From 84a7263f367f3a30bee52d81c3e9705a31a46fd5 Mon Sep 17 00:00:00 2001
From: wangqiao <wangqiao@58hn.cn>
Date: Tue, 26 Aug 2025 21:28:11 +0800
Subject: [PATCH] Update detail page routing and swiper implementation

---
 api/drawe-detail/index.ts                     |   2 +-
 assets/scss/app.scss                          |   1 +
 components/kl-card-picture/index.vue          |  38 +-
 nuxt.config.ts                                |   4 +-
 package.json                                  |   1 +
 pages/down-drawe-detail/[id].vue              | 365 ++++++++++++++++++
 pages/down-drawe-detail/components/swiper.vue |  82 ++--
 pages/down-drawe-detail/index.vue             | 350 -----------------
 pages/home/components/Leaderboard.vue         |   2 +-
 pages/home/components/PopularDrawings.vue     |   2 +-
 pages/personal-detail/index.vue               |  42 +-
 yarn.lock                                     |  15 +-
 12 files changed, 469 insertions(+), 435 deletions(-)
 create mode 100644 pages/down-drawe-detail/[id].vue
 delete mode 100644 pages/down-drawe-detail/index.vue

diff --git a/api/drawe-detail/index.ts b/api/drawe-detail/index.ts
index df9bb46..5fe0aa7 100644
--- a/api/drawe-detail/index.ts
+++ b/api/drawe-detail/index.ts
@@ -7,7 +7,7 @@ import type { ProjectRespVO, PageResultProjectCommentResVO, ProjectDrawPageRespV
  * @return {Promise}
  */
 export const getDetail = (params: { id?: number | string }) => {
-  return useFetchRequest.get<IResponse<ProjectRespVO>>('/prod-api/app-api/business/app/project-draw/preview', { params })
+  return useFetchRequest.get<IResponse<ProjectRespVO>>('/prod-api/app-api/business/app/project-draw/preview', { query:params })
 }
 
 /**
diff --git a/assets/scss/app.scss b/assets/scss/app.scss
index 38c3777..3ad8838 100644
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@@ -11,6 +11,7 @@ li {
 }
 body {
   min-width: 1500px;
+  font-size: 14px;
 }
 img {
   user-select: none;
diff --git a/components/kl-card-picture/index.vue b/components/kl-card-picture/index.vue
index 08bc7b5..840af71 100644
--- a/components/kl-card-picture/index.vue
+++ b/components/kl-card-picture/index.vue
@@ -1,33 +1,33 @@
 <template>
-  <div class="mb-20px w-100% cursor-pointer overflow-hidden border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF]" @click="handleClick">
+  <div class="mb-[20px] w-[100%] cursor-pointer overflow-hidden border border-[#EEEEEE] rounded-[10px] border-solid bg-[#FFFFFF]" @click="handleClick">
     <div>
-      <el-image :src="props.itemInfo.iconUrl" class="h-216px w-100%" fit="cover"></el-image>
+      <el-image :src="props.itemInfo.iconUrl" class="h-[216px] w-[100%]" fit="cover"></el-image>
     </div>
-    <div class="box-border p-16px">
+    <div class="box-border p-[16px]">
       <div class="flex items-center justify-between">
         <div>
-          <div class="title mr-38px text-16px text-[#333333] font-bold">{{ props.itemInfo.title }}</div>
-          <div class="mt-8px text-15px text-[#999999] font-normal">by {{ props.itemInfo?.ownedUserIdInfo?.nickName }}</div>
+          <div class="title mr-[38px] text-[16px] text-[#333333] font-bold">{{ props.itemInfo.title }}</div>
+          <div class="mt-[8px] text-[15px] text-[#999999] font-normal">by {{ props.itemInfo?.ownedUserIdInfo?.nickName }}</div>
         </div>
-        <div><img :src="props.itemInfo?.ownedUserIdInfo?.avatar" alt="" srcset="" class="h-40px w-40px rd-50%" /></div>
+        <div><img :src="props.itemInfo?.ownedUserIdInfo?.avatar" alt="" srcset="" class="h-[40px] w-[40px] rd-[50%]" /></div>
       </div>
-      <div class="mt-24px flex items-center justify-between">
-        <div class="flex items-center justify-between text-14px text-[#666666] font-normal">
-          <div class="mr-9px flex items-center">
-            <img src="~/assets/images/look.png" alt="" srcset="" class="mr-2px h-17px" />
-            <span class="color-#666">{{ props.itemInfo.previewPoint }}</span>
+      <div class="mt-[24px] flex items-center justify-between">
+        <div class="flex items-center justify-between text-[14px] text-[#666666] font-normal">
+          <div class="mr-[9px] flex items-center">
+            <img src="~/assets/images/look.png" alt="" srcset="" class="mr-[2px] h-[17px]" />
+            <span class="color-[#666]">{{ props.itemInfo.previewPoint }}</span>
           </div>
-          <div class="mr-9px flex items-center">
-            <img src="~/assets/images/add.png" alt="" srcset="" class="mr-2px h-22px" />
-            <span class="color-#666">{{ props.itemInfo.hotPoint }}</span>
+          <div class="mr-[9px] flex items-center">
+            <img src="~/assets/images/add.png" alt="" srcset="" class="mr-[2px] h-[22px]" />
+            <span class="color-[#666]">{{ props.itemInfo.hotPoint }}</span>
           </div>
           <div class="flex items-center">
-            <img src="~/assets/images/chat.png" alt="" srcset="" class="mr-4px h-17px" />
-            <span class="color-#666">{{ props.itemInfo.commentsPoint }}</span>
+            <img src="~/assets/images/chat.png" alt="" srcset="" class="mr-[4px] h-[17px]" />
+            <span class="color-[#666]">{{ props.itemInfo.commentsPoint }}</span>
           </div>
         </div>
-        <div class="h-30px w-90px cursor-pointer border border-[#1A65FF] rounded-15px border-solid text-center line-height-30px"
-          ><span class="text-14px text-[#1A65FF] font-normal">查看详情</span></div
+        <div class="h-[30px] w-[90px] cursor-pointer border border-[#1A65FF] rounded-[15px] border-solid text-center line-height-[30px]"
+          ><span class="text-[14px] text-[#1A65FF] font-normal">查看详情</span></div
         >
       </div>
     </div>
@@ -50,7 +50,7 @@
     console.log(props.itemInfo)
 
     // 跳转到下载详情页 并且是单独开标签
-    window.open(`/down-drawe-detail?id=${props.itemInfo.id}`, '_blank') // 修改为在新窗口打开
+    navigateTo(`/down-drawe-detail/${props.itemInfo.id}`) // 修改为在新窗口打开
   }
 </script>
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f44ff91..41082cd 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -11,7 +11,7 @@ export default defineNuxtConfig({
   debug: process.env.NODE_ENV === "development",   // 开启详细调试日志
 
   ssr: true,
-  modules: ["@unocss/nuxt", "@pinia/nuxt", "@element-plus/nuxt",'pinia-plugin-persistedstate/nuxt'],
+  modules: ["@unocss/nuxt", "@pinia/nuxt", "@element-plus/nuxt",'pinia-plugin-persistedstate/nuxt','nuxt-swiper'],
   css: ["@unocss/reset/tailwind.css", "element-plus/dist/index.css","~/assets/scss/app.scss"],
   vite: {
     css: {
@@ -116,7 +116,7 @@ export default defineNuxtConfig({
     // 在这里引入插件
     // { src: "~plugins/tinymce" ,ssr: false},
   ],
-  piniaPersistedstate: {
+  piniaPluginPersistedstate: {
     storage: 'localStorage'
   }
 });
diff --git a/package.json b/package.json
index 21fec9a..013f180 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "echarts": "^6.0.0",
     "mqtt": "^5.14.0",
     "nuxt": "^3.18.1",
+    "nuxt-swiper": "^2.0.1",
     "pdfjs-dist": "^5.4.54",
     "pinia": "^3.0.3",
     "qrcode.vue": "^3.6.0",
diff --git a/pages/down-drawe-detail/[id].vue b/pages/down-drawe-detail/[id].vue
new file mode 100644
index 0000000..17d0517
--- /dev/null
+++ b/pages/down-drawe-detail/[id].vue
@@ -0,0 +1,365 @@
+<template>
+    <KlNavTab />
+    <div class="ml-auto mr-auto mt-[20px] w-[1440px]">
+      <div class="flex items-center">
+        <div class="box-border h-[60px] w-[1019px] flex items-center justify-between border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[27px] py-[24px]">
+          <div class="text-[20px] text-[#333333] font-normal"> {{ detail?.title }}</div>
+          <div class="flex items-center">
+            <img :src="detail?.ownedUserIdInfo?.avatar" alt="" srcset="" class="h-[30px] w-[30px] rd-[50%]" />
+            <span class="ml-[12px] color-[#999999]">by {{ detail?.ownedUserIdInfo?.nickName }}</span>
+          </div>
+        </div>
+  
+        <div class="ml-[23px] flex flex-1 text-[18px] text-[#FFFFFF] font-normal">
+          <div class="h-[60px] w-[160px] flex cursor-pointer items-center justify-center rounded-[8px] bg-[#1A65FF]" @click="handleDownload">
+            <img src="~/assets/images/download.png" alt="" srcset="" class="mr-[4px] h-[22px] w-[27px]" />
+            {{ detail?.points === 0 ? '免费下载' : '立即下载' }}
+          </div>
+          <div
+            v-if="!detail?.favoriteId"
+            class="ml-[11px] h-[60px] flex flex-1 cursor-pointer items-center justify-center rounded-[8px] bg-[#E7B03B]"
+            @click="handleCollect"
+            ><img src="~/assets/images/collect.png" alt="" srcset="" class="mr-[4px] h-[24px] w-[24px]" /> 收藏</div
+          >
+          <div v-else class="ml-[11px] h-[60px] flex flex-1 cursor-pointer items-center justify-center rounded-[8px] bg-[#E7B03B]" @click="handleCollect"
+            ><img src="~/assets/images/wjx2.png" alt="" srcset="" class="mr-[4px] h-[18px] w-[18px]" /> 已收藏</div
+          >
+  
+          <div class="ml-[11px] h-[60px] flex flex-1 cursor-pointer items-center justify-center rounded-[8px] bg-[#F56C6C]" @click="handleReport"
+            ><el-icon class="mr-[4px] mt-[4px]"><Warning /></el-icon> 举报</div
+          >
+        </div>
+      </div>
+    </div>
+    <!--  -->
+    <div class="ma-auto mt-[21px] flex">
+      <div class="w-[1019px]">
+        <div>
+          <ThumBnail :data="detail?.coverImages" :type="detail?.type" @change-swiper="changeSwiper" @next-swiper="nextSwiper"></ThumBnail>
+        </div>
+        <div class="mb-[20px] mt-[34px] flex items-center text-[16px] text-[#333333] font-normal">
+          <div class="h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div><span class="ml-[10px]">{{ detail?.title }}描述</span></div
+        >
+        <div class="box-border min-h-[90px] w-[1019px] border border-[#EEEEEE] rounded-[6px] border-solid bg-[#FFFFFF] pa-[24px] text-[14px] text-[#333333] font-normal">
+          {{ detail?.description }}
+        </div>
+        <div id="section1" class="mb-[20px] mt-[34px] flex items-center text-[16px] text-[#333333] font-normal">
+          <div class="h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div><span class="ml-[10px]">{{ detail?.title }}附件</span></div
+        >
+        <div class="box-border w-[1019px] border border-[#EEEEEE] rounded-[6px] border-solid bg-[#FFFFFF] pa-[24px]">
+          <div class="border-b-[1px] border-b-[#eee] border-b-solid p-b-[10px]">
+            {{ detail?.type === 1 ? '图纸' : detail?.type === 2 ? '文本' : '模型' }}中包含的文件
+          </div>
+          <div>
+            <div v-for="item in detail?.files" :key="item.id" class="flex items-center justify-between border-b-[1px] border-b-[#eee] border-b-solid py-[10px]">
+              <!-- <img src="~/assets/images/avater.png" alt="" srcset="" class="h-30px w-30px" /> -->
+              <div>
+                <span class="ml-[10px] cursor-pointer" @click="handleDownloadPreview(item)">{{ item.title }}</span>
+                <span v-if="item.size" class="ml-[200px] color-[#999]">{{ item.size || '-' }}</span>
+              </div>
+              <el-button
+                v-if="detail?.downloadId || detail?.points === 0"
+                type="text"
+                tag="a"
+                target="download"
+                :href="item.url"
+                @click="handleDownloadFile(item.url, item.title)"
+              >
+                下载
+              </el-button>
+            </div>
+          </div>
+        </div>
+        <!-- 关联项目 -->
+        <div class="mb-[20px] mt-[34px] flex items-center text-[16px] text-[#333333] font-normal">
+          <div class="h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div
+          ><span class="ml-[10px]">关联{{ detail?.type === 1 ? '图纸' : detail?.type === 2 ? '文本' : '模型' }}</span></div
+        >
+        <el-row :gutter="20">
+          <el-col v-for="(item, index) in detail?.relationDraws" :key="index" :span="12">
+            <CardPicture :item-info="item" />
+          </el-col>
+        </el-row>
+        <el-empty v-if="!detail?.relationDraws?.length" description="暂无数据"></el-empty>
+        <!-- 关联模型 -->
+        <div class="mb-[20px] mt-[34px] flex items-center text-[16px] text-[#333333] font-normal">
+          <div class="h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div
+          ><span class="ml-[10px]">相关{{ detail?.type === 1 ? '图纸' : detail?.type === 2 ? '文本' : '模型' }}推荐</span></div
+        >
+        <el-row :gutter="20">
+          <el-col v-for="(item, index) in relationRecommend" :key="index" :span="12">
+            <CardPicture :item-info="item" />
+          </el-col>
+        </el-row>
+        <!-- 评论 -->
+        <CommentSection :relation-id="detail!.id" :project-id="detail!.projectId" />
+      </div>
+      <div class="ml-[22px]">
+        <div class="box-border h-[269px] w-[397px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] pa-[22px]">
+          <div class="mb-[10px]">图纸ID: {{ detail?.id }}</div>
+          <div class="mb-[10px]">文件大小：{{ detail?.filesInfo?.fileSize || 0 }} </div>
+          <!-- <div class="mb-10px">图纸版本：{{ detail.editionsName }} </div> -->
+          <div class="mb-[10px]">图纸格式：{{ detail?.formatType?.toString() }}</div>
+          <div class="mb-[10px]">所需金币：{{ detail?.points }}金币</div>
+          <div class="mb-[10px]">发布时间：{{ dayjs(detail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
+          <div class="mb-[10px]">图纸参数：{{ detail?.editTypeName }}</div>
+          <div class="mb-[10px]">图纸分类：{{ detail?.projectTypeName }}</div>
+          <div class="mb-[10px]">软件分类：{{ detail?.editionsName }}</div>
+        </div>
+        <div class="mt-[20px] w-[398px] border border-[#EEEEEE] border-rd-[10px_10px_0px_0px] border-solid bg-[#FFFFFF]">
+          <img src="~/assets/images/banner.png" alt="" srcset="" class="w-[100%]" />
+          <div class="box-border border border-[#EEEEEE] border-rd-[10px_10px_0px_0px] border-solid border-t-none bg-[#FFFFFF] pa-[18px]">
+            <div class="flex flex-wrap items-start">
+              <div v-if="userInfo.nickname" class="mt-[10px] text-[18px] text-[#333333] font-bold">{{ userInfo.nickname }}</div>
+              <div
+                v-for="item in userInfo.labels"
+                :key="item"
+                class="mb-[10px] ml-[10px] box-border border border-[#1A65FF] rounded-[13px] border-solid px-[8px] py-[3px] color-[#1a65ff]"
+                >{{ item }}</div
+              >
+            </div>
+            <div v-if="userInfo.description" class="mb-[20px] text-[14px] text-[#333333] font-normal">{{ userInfo.description }}</div>
+            <!-- 显示作品 粉丝 荣誉证书 -->
+            <div class="flex items-center gap-[40px]">
+              <div class="flex items-center">
+                <div class="h-[20px]">
+                  <img src="~/assets/images/folder.png" alt="works" class="w-[80%]" />
+                </div>
+                <div class="ml-[8px] mt-[-4px] text-[14px] text-[#666] font-normal">作品: {{ userInfo.projectCount || 0 }}</div>
+              </div>
+              <div class="flex items-center">
+                <div class="h-[20px]">
+                  <img src="~/assets/images/user4.png" alt="fans" class="w-[80%] rounded-full vertical-top" />
+                </div>
+                <div class="relative top-[-3px] ml-[8px] text-[14px] text-[#666] font-normal">粉丝: {{ userInfo.fansCount || 0 }}</div>
+              </div>
+            </div>
+  
+            <!-- 3个图片一排 超过换下一行 -->
+            <div v-if="userInfo.files?.length" class="mt-[20px] flex flex-wrap gap-[16px]">
+              <div v-for="i in userInfo.files" :key="i" class="flex-1">
+                <div
+                  class="box-border h-[200px] w-full overflow-hidden border border-[#E5E7EB] rounded-[8px] border-solid from-[#FFFFFF] to-[#F5F7FA] bg-gradient-to-b p-[16px]"
+                >
+                  <el-image :src="i.url" fit="cover" alt="" srcset="" class="h-full object-cover" />
+                </div>
+              </div>
+            </div>
+  
+            <div class="mt-[20px] h-[1px] w-[336px] rounded-[1px] bg-[#EEEEEE]"></div>
+            <div class="mt-[20px] flex items-center">
+              <div class="h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div>
+              <span class="ml-[10px] text-[16px]">最新发布</span>
+            </div>
+            <div class="mt-[10px]">
+              <div
+                v-for="item in mainWork"
+                :key="item.id"
+                class="flex cursor-pointer items-center justify-between px-[10px] py-[10px] hover:bg-[#f5f5f5]"
+                @click="handleClick(item.id)"
+              >
+                <div class="ellipsis text-[15px] text-[#333333] font-normal">{{ item.title }}</div>
+                <span class="ml-[10px] flex-shrink-0 color-[#999999]">{{ dayjs(item.createTime).format('MM-DD') }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+    import dayjs from 'dayjs'
+    import { downloadFile } from '~/utils/utils'
+    import { useMessage } from '~/utils/useMessage'
+    import { Warning } from '@element-plus/icons-vue'
+    import CardPicture from '~/components/kl-card-picture/index.vue'
+    import { getDetail, getRelationRecommend, report, getUserInfo, getMainWork, createContent, createUserProject, deleteProject } from '~/api/drawe-detail/index'
+    import KlNavTab from '~/components/kl-nav-tab/index.vue'
+    import ThumBnail from './components/swiper.vue'
+    import CommentSection from '~/components/comment-section/index.vue'
+    import { useRoute } from 'vue-router'
+    import { ref } from 'vue'
+    import type { ProjectRespVO, ProjectDrawPageRespVO, UserExtendSimpleRespDTO, ProjectDrawMemberRespVO } from '~/api/drawe-detail/types'
+    import useUserStore from '~/stores/user'
+    const message = useMessage()
+    const userStore = useUserStore()
+    // 获取路由参数
+    const route = useRoute()
+    const id = route.params.id as string
+  
+    // 获取详情
+    // const detail = ref<ProjectRespVO>({} as ProjectRespVO)
+
+    const {data: detail } = await useAsyncData('getDetail', async () => {
+      const res = await getDetail({ id })
+      return res.data
+    })
+
+    if (!detail.value) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Page Not Found',
+      fatal: true
+    });
+  }
+
+    // const init = () => {
+    //   getDetail({ id }).then((res) => {
+    //     if (res.code === 0) {
+    //       detail.value = res.data
+    //       // 获取推荐信息
+    //       getRelationRecommendList()
+    //       // 获取用户信息
+    //       handleGetUserInfo()
+    //       // 最新发布
+    //       handleGetMainWork()
+    //     }
+    //   })
+    // }
+  
+    // init()
+  
+    // 获取最新发布
+    const mainWork = ref<ProjectDrawMemberRespVO[]>([])
+    const handleGetMainWork = () => {
+      getMainWork({ id: detail.value?.id, limit: 10, memberId: detail.value?.ownedUserId }).then((res) => {
+        if (res.code === 0) {
+          mainWork.value = res.data
+        }
+      })
+    }
+    // 获取用户信息
+    const userInfo = ref<UserExtendSimpleRespDTO>({} as UserExtendSimpleRespDTO)
+    const handleGetUserInfo = () => {
+      getUserInfo({ id: detail.value?.id }).then((res) => {
+        if (res.code === 0) {
+          userInfo.value = res.data
+        }
+      })
+    }
+  
+    // 获取关联推荐
+    const relationRecommend = ref<ProjectDrawPageRespVO[]>([])
+    const getRelationRecommendList = () => {
+      getRelationRecommend({ type: detail.value?.type, projectType: detail.value?.projectType[0] }).then((res) => {
+        if (res.code === 0) {
+          relationRecommend.value = res.data
+        }
+      })
+    }
+  
+    const changeSwiper = (index: number) => {
+      console.log(index)
+    }
+  
+    const nextSwiper = (val: any) => {
+      console.log(val)
+    }
+    const handleDownloadPreview = (item: any) => {
+      // 预览pdf
+      navigateTo(`/pdf-preview?url=${item.url}`)
+    }
+  
+    /** 获取下载类型 */
+    const getType = (type: number) => {
+      if (type === 1 || type === 2 || type === 3) {
+        // 图纸 文本 模型都传1
+        return 1
+      }
+      // 工具箱传
+      return 2
+    }
+  
+    const handleDownload = async () => {
+      if (!userStore.token) {
+        ElMessage.error('请先登录')
+        return
+      }
+  
+      if (detail.value?.points === 0) {
+        scrollTo()
+        return
+      }
+  
+      if (detail.value?.downloadId) {
+        ElMessage.success('您已获取下载权限')
+        scrollTo()
+        return
+      }
+  
+      const res = await message.confirm(`是否花费${detail.value?.points}金币下载此资源，是否继续？`, '提示')
+      if (res) {
+        createUserProject({ relationId: detail.value?.id, type: getType(detail.value?.type as number) }).then((res) => {
+          if (res.code === 0) {
+            ElMessage.success('获取下载权限成功')
+            detail.value!.downloadId = res.data
+            scrollTo()
+          }
+        })
+      }
+    }
+  
+    const scrollTo = () => {
+      const element = document.getElementById('section1')
+      if (element) {
+        element.scrollIntoView({
+          behavior: 'smooth',
+        })
+      }
+    }
+  
+    const handleReport = () => {
+      if (!userStore.token) {
+        ElMessage.error('请先登录')
+        return
+      }
+      console.log('举报')
+      ElMessageBox.prompt('说明内容', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPlaceholder: '请输入举报内容',
+        inputErrorMessage: '请输入举报内容',
+      }).then(({ value }) => {
+        report({
+          id: detail.value?.id,
+          title: detail.value?.title,
+          files: detail.value?.files,
+          comments: value,
+          projectId: detail.value?.projectId,
+          drawId: detail.value?.id,
+        }).then((res) => {
+          if (res.code === 0) {
+            ElMessage.success('举报成功')
+          }
+        })
+      })
+    }
+  
+    const handleCollect = async () => {
+      if (!userStore.token) {
+        ElMessage.error('请先登录')
+        return
+      }
+  
+      const res = detail.value?.favoriteId
+        ? await deleteProject({ id: detail.value.favoriteId })
+        : await createContent({
+            projectId: detail.value?.projectId,
+            drawId: detail.value?.id,
+          })
+      if (res.code === 0) {
+        ElMessage.success(`${detail.value?.favoriteId ? '取消' : '收藏'}成功`)
+        // init()
+      }
+    }
+  
+    const handleClick = (id: string | number) => {
+      navigateTo(`/down-drawe-detail/${id}`) // 修改为在新窗口打开
+    }
+  
+    const handleDownloadFile = (url: string, name: string) => {
+      downloadFile(url, name)
+    }
+  </script>
+  
\ No newline at end of file
diff --git a/pages/down-drawe-detail/components/swiper.vue b/pages/down-drawe-detail/components/swiper.vue
index cad3e92..a1360c3 100644
--- a/pages/down-drawe-detail/components/swiper.vue
+++ b/pages/down-drawe-detail/components/swiper.vue
@@ -1,45 +1,49 @@
 <template>
-  <div class="box-border h-631px w-1019px border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] pa-30px">
-    <swiper
-      :style="{
-        '--swiper-navigation-color': '#666',
-        '--swiper-pagination-color': '#666',
-      }"
-      :space-between="10"
-      disabled-class=""
-      :thumbs="{ swiper: thumbsSwiper }"
-      :modules="modules"
-      class="mySwiper2"
-      @swiper="onSwiper"
-      @slide-change="changeSwiper"
-    >
-      <swiper-slide v-for="(item, index) in props.data" :key="index"><el-image fit="cover" :src="item.url" /></swiper-slide>
-      <div class="swiper-button-prev color-#fff" @click="handlePrev"></div
-      ><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
-      <div class="swiper-button-next color-#fff" @click="handleNext"></div
-      ><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
-    </swiper>
+  <div class="box-border h-[631px] w-[1019px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] pa-[30px]">
+    <ClientOnly>
+      <swiper
+        :style="{
+          '--swiper-navigation-color': '#666',
+          '--swiper-pagination-color': '#666',
+        }"
+        :space-between="10"
+        disabled-class=""
+        :thumbs="{ swiper: thumbsSwiper }"
+        :modules="modules"
+        class="mySwiper2"
+        @swiper="onSwiper"
+        @slide-change="changeSwiper"
+      >
+        <swiper-slide v-for="(item, index) in props.data" :key="index"><el-image fit="cover" :src="item.url" /></swiper-slide>
+        <div class="swiper-button-prev color-[#fff]" @click="handlePrev"></div
+        ><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
+        <div class="swiper-button-next color-[#fff]" @click="handleNext"></div
+        ><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
+      </swiper>
+  </ClientOnly>
   </div>
-  <div class="mb-20px mt-34px flex items-center text-16px text-[#333333] font-normal">
-    <div class="h-24px w-4px rounded-1px bg-[#1A65FF]"></div
-    ><span class="ml-10px">{{ props.type === 1 ? '图纸' : props.type === 2 ? '文本' : '模型' }}</span></div
+  <div class="mb-[20px] mt-[34px] flex items-center text-[16px] text-[#333333] font-normal">
+    <div class="h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div
+    ><span class="ml-[10px]">{{ props.type === 1 ? '图纸' : props.type === 2 ? '文本' : '模型' }}</span></div
   >
-  <div class="box-border h-126px w-1019px border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] pa-23px">
-    <swiper
-      :space-between="10"
-      :slides-per-view="4"
-      :free-mode="true"
-      :watch-slides-progress="true"
-      :modules="modules"
-      class="mySwiper"
-      @swiper="setThumbsSwiper"
-    >
-      <swiper-slide v-for="(item, index) in props.data" :key="index">
-        <div class="Thumbs">
-          <el-image fit="cover" :src="item.url" />
-        </div>
-      </swiper-slide>
-    </swiper>
+  <div class="box-border h-[126px] w-[1019px] border border-[#EEEEEE] rounded-[6px] border-solid bg-[#FFFFFF] pa-[23px]">
+    <ClientOnly>
+      <swiper
+        :space-between="10"
+        :slides-per-view="4"
+        :free-mode="true"
+        :watch-slides-progress="true"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="setThumbsSwiper"
+      >
+        <swiper-slide v-for="(item, index) in props.data" :key="index">
+          <div class="Thumbs">
+            <el-image fit="cover" :src="item.url" />
+          </div>
+        </swiper-slide>
+      </swiper>
+  </ClientOnly>
   </div>
 </template>
 <script setup lang="ts">
diff --git a/pages/down-drawe-detail/index.vue b/pages/down-drawe-detail/index.vue
deleted file mode 100644
index 703a8fb..0000000
--- a/pages/down-drawe-detail/index.vue
+++ /dev/null
@@ -1,350 +0,0 @@
-<template>
-  <KlNavTab />
-  <div class="ml-auto mr-auto mt-20px w1440">
-    <div class="flex items-center">
-      <div class="box-border h-60px w-1019px flex items-center justify-between border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-27px py-24px">
-        <div class="text-20px text-[#333333] font-normal"> {{ detail.title }}</div>
-        <div class="flex items-center">
-          <img :src="detail.ownedUserIdInfo?.avatar" alt="" srcset="" class="h-30px w-30px rd-50%" />
-          <span class="ml-12px color-#999999">by {{ detail.ownedUserIdInfo?.nickName }}</span>
-        </div>
-      </div>
-
-      <div class="ml-23px flex flex-1 text-18px text-[#FFFFFF] font-normal">
-        <div class="h-60px w-160px flex cursor-pointer items-center justify-center rounded-8px bg-[#1A65FF]" @click="handleDownload">
-          <img src="~/assets/images/download.png" alt="" srcset="" class="mr-4px h-22px w-27px" />
-          {{ detail.points === 0 ? '免费下载' : '立即下载' }}
-        </div>
-        <div
-          v-if="!detail.favoriteId"
-          class="ml-11px h-60px flex flex-1 cursor-pointer items-center justify-center rounded-8px bg-[#E7B03B]"
-          @click="handleCollect"
-          ><img src="~/assets/images/collect.png" alt="" srcset="" class="mr-4px h-24px w-24px" /> 收藏</div
-        >
-        <div v-else class="ml-11px h-60px flex flex-1 cursor-pointer items-center justify-center rounded-8px bg-[#E7B03B]" @click="handleCollect"
-          ><img src="~/assets/images/wjx2.png" alt="" srcset="" class="mr-4px h-18px w-18px" /> 已收藏</div
-        >
-
-        <div class="ml-11px h-60px flex flex-1 cursor-pointer items-center justify-center rounded-8px bg-[#F56C6C]" @click="handleReport"
-          ><el-icon class="mr-4px mt-4px"><Warning /></el-icon> 举报</div
-        >
-      </div>
-    </div>
-  </div>
-  <!--  -->
-  <div class="ma-auto mt-21px flex">
-    <div class="w-1019px">
-      <div>
-        <ThumBnail :data="detail.coverImages" :type="detail.type" @change-swiper="changeSwiper" @next-swiper="nextSwiper"></ThumBnail>
-      </div>
-      <div class="mb-20px mt-34px flex items-center text-16px text-[#333333] font-normal">
-        <div class="h-24px w-4px rounded-1px bg-[#1A65FF]"></div><span class="ml-10px">{{ detail.title }}描述</span></div
-      >
-      <div class="box-border min-h-90px w-1019px border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] pa-24px text-14px text-[#333333] font-normal">
-        {{ detail.description }}
-      </div>
-      <div id="section1" class="mb-20px mt-34px flex items-center text-16px text-[#333333] font-normal">
-        <div class="h-24px w-4px rounded-1px bg-[#1A65FF]"></div><span class="ml-10px">{{ detail.title }}附件</span></div
-      >
-      <div class="box-border w-1019px border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] pa-24px">
-        <div class="border-b-1px border-b-[#eee] border-b-solid p-b-10px">
-          {{ detail.type === 1 ? '图纸' : detail.type === 2 ? '文本' : '模型' }}中包含的文件
-        </div>
-        <div>
-          <div v-for="item in detail.files" :key="item.id" class="flex items-center justify-between border-b-1px border-b-[#eee] border-b-solid py-10px">
-            <!-- <img src="~/assets/images/avater.png" alt="" srcset="" class="h-30px w-30px" /> -->
-            <div>
-              <span class="ml-10px cursor-pointer" @click="handleDownloadPreview(item)">{{ item.title }}</span>
-              <span v-if="item.size" class="ml-200px color-#999">{{ item.size || '-' }}</span>
-            </div>
-            <el-button
-              v-if="detail.downloadId || detail.points === 0"
-              type="text"
-              tag="a"
-              target="download"
-              :href="item.url"
-              @click="handleDownloadFile(item.url, item.title)"
-            >
-              下载
-            </el-button>
-          </div>
-        </div>
-      </div>
-      <!-- 关联项目 -->
-      <div class="mb-20px mt-34px flex items-center text-16px text-[#333333] font-normal">
-        <div class="h-24px w-4px rounded-1px bg-[#1A65FF]"></div
-        ><span class="ml-10px">关联{{ detail.type === 1 ? '图纸' : detail.type === 2 ? '文本' : '模型' }}</span></div
-      >
-      <el-row :gutter="20">
-        <el-col v-for="(item, index) in detail.relationDraws" :key="index" :span="12">
-          <CardPicture :item-info="item" />
-        </el-col>
-      </el-row>
-      <el-empty v-if="!detail.relationDraws?.length" description="暂无数据"></el-empty>
-      <!-- 关联模型 -->
-      <div class="mb-20px mt-34px flex items-center text-16px text-[#333333] font-normal">
-        <div class="h-24px w-4px rounded-1px bg-[#1A65FF]"></div
-        ><span class="ml-10px">相关{{ detail.type === 1 ? '图纸' : detail.type === 2 ? '文本' : '模型' }}推荐</span></div
-      >
-      <el-row :gutter="20">
-        <el-col v-for="(item, index) in relationRecommend" :key="index" :span="12">
-          <CardPicture :item-info="item" />
-        </el-col>
-      </el-row>
-      <!-- 评论 -->
-      <CommentSection :relation-id="detail.id" :project-id="detail.projectId" />
-    </div>
-    <div class="ml-22px">
-      <div class="box-border h-269px w-397px border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] pa-22px">
-        <div class="mb-10px">图纸ID: {{ detail.id }}</div>
-        <div class="mb-10px">文件大小：{{ detail.filesInfo?.fileSize || 0 }} </div>
-        <!-- <div class="mb-10px">图纸版本：{{ detail.editionsName }} </div> -->
-        <div class="mb-10px">图纸格式：{{ detail.formatType?.toString() }}</div>
-        <div class="mb-10px">所需金币：{{ detail.points }}金币</div>
-        <div class="mb-10px">发布时间：{{ dayjs(detail.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
-        <div class="mb-10px">图纸参数：{{ detail.editTypeName }}</div>
-        <div class="mb-10px">图纸分类：{{ detail.projectTypeName }}</div>
-        <div class="mb-10px">软件分类：{{ detail.editionsName }}</div>
-      </div>
-      <div class="mt-20px w-398px border border-[#EEEEEE] border-rd-[10px_10px_0px_0px] border-solid bg-[#FFFFFF]">
-        <img src="~/assets/images/banner.png" alt="" srcset="" class="w-100%" />
-        <div class="box-border border border-[#EEEEEE] border-rd-[10px_10px_0px_0px] border-solid border-t-none bg-[#FFFFFF] pa-18px">
-          <div class="flex flex-wrap items-start">
-            <div v-if="userInfo.nickname" class="mt-10px text-18px text-[#333333] font-bold">{{ userInfo.nickname }}</div>
-            <div
-              v-for="item in userInfo.labels"
-              :key="item"
-              class="mb-10px ml-10px box-border border border-[#1A65FF] rounded-13px border-solid px-8px py-3px color-#1a65ff"
-              >{{ item }}</div
-            >
-          </div>
-          <div v-if="userInfo.description" class="mb-20px text-14px text-[#333333] font-normal">{{ userInfo.description }}</div>
-          <!-- 显示作品 粉丝 荣誉证书 -->
-          <div class="flex items-center gap-40px">
-            <div class="flex items-center">
-              <div class="h-20px">
-                <img src="~/assets/images/folder.png" alt="works" class="w-80%" />
-              </div>
-              <div class="ml-8px mt--4px text-14px text-[#666] font-normal">作品: {{ userInfo.projectCount || 0 }}</div>
-            </div>
-            <div class="flex items-center">
-              <div class="h-20px">
-                <img src="~/assets/images/user4.png" alt="fans" class="w-80% rounded-full vertical-top" />
-              </div>
-              <div class="relative top--3px ml-8px text-14px text-[#666] font-normal">粉丝: {{ userInfo.fansCount || 0 }}</div>
-            </div>
-          </div>
-
-          <!-- 3个图片一排 超过换下一行 -->
-          <div v-if="userInfo.files?.length" class="mt-20px flex flex-wrap gap-16px">
-            <div v-for="i in userInfo.files" :key="i" class="flex-1">
-              <div
-                class="box-border h-200px w-full overflow-hidden border border-[#E5E7EB] rounded-8px border-solid from-[#FFFFFF] to-[#F5F7FA] bg-gradient-to-b p-16px"
-              >
-                <el-image :src="i.url" fit="cover" alt="" srcset="" class="h-full object-cover" />
-              </div>
-            </div>
-          </div>
-
-          <div class="mt-20px h-1px w-336px rounded-1px bg-[#EEEEEE]"></div>
-          <div class="mt-20px flex items-center">
-            <div class="h-24px w-4px rounded-1px bg-[#1A65FF]"></div>
-            <span class="ml-10px text-16px">最新发布</span>
-          </div>
-          <div class="mt-10px">
-            <div
-              v-for="item in mainWork"
-              :key="item.id"
-              class="flex cursor-pointer items-center justify-between px-10px py-10px hover:bg-#f5f5f5"
-              @click="handleClick(item.id)"
-            >
-              <div class="ellipsis text-15px text-[#333333] font-normal">{{ item.title }}</div>
-              <span class="ml-10px flex-shrink-0 color-#999999">{{ dayjs(item.createTime).format('MM-DD') }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import dayjs from 'dayjs'
-  import { downloadFile } from '~/utils/utils'
-  import { useMessage } from '~/utils/useMessage'
-  import { Warning } from '@element-plus/icons-vue'
-  import CardPicture from '~/components/kl-card-picture/index.vue'
-  import { getDetail, getRelationRecommend, report, getUserInfo, getMainWork, createContent, createUserProject, deleteProject } from '~/api/drawe-detail/index'
-  import KlNavTab from '~/components/kl-nav-tab/index.vue'
-  import ThumBnail from './components/swiper.vue'
-  import CommentSection from '~/components/comment-section/index.vue'
-  import { useRoute } from 'vue-router'
-  import { ref } from 'vue'
-  import type { ProjectRespVO, ProjectDrawPageRespVO, UserExtendSimpleRespDTO, ProjectDrawMemberRespVO } from '~/api/drawe-detail/types'
-  import useUserStore from '~/stores/user'
-  const message = useMessage()
-  const userStore = useUserStore()
-  // 获取路由参数
-  const route = useRoute()
-  const id = route.query.id as string
-
-  // 获取详情
-  const detail = ref<ProjectRespVO>({} as ProjectRespVO)
-  const init = () => {
-    getDetail({ id }).then((res) => {
-      if (res.code === 0) {
-        detail.value = res.data
-        // 获取推荐信息
-        getRelationRecommendList()
-        // 获取用户信息
-        handleGetUserInfo()
-        // 最新发布
-        handleGetMainWork()
-      }
-    })
-  }
-
-  init()
-
-  // 获取最新发布
-  const mainWork = ref<ProjectDrawMemberRespVO[]>([])
-  const handleGetMainWork = () => {
-    getMainWork({ id: detail.value.id, limit: 10, memberId: detail.value.ownedUserId }).then((res) => {
-      if (res.code === 0) {
-        mainWork.value = res.data
-      }
-    })
-  }
-  // 获取用户信息
-  const userInfo = ref<UserExtendSimpleRespDTO>({} as UserExtendSimpleRespDTO)
-  const handleGetUserInfo = () => {
-    getUserInfo({ id: detail.value.id }).then((res) => {
-      if (res.code === 0) {
-        userInfo.value = res.data
-      }
-    })
-  }
-
-  // 获取关联推荐
-  const relationRecommend = ref<ProjectDrawPageRespVO[]>([])
-  const getRelationRecommendList = () => {
-    getRelationRecommend({ type: detail.value.type, projectType: detail.value.projectType[0] }).then((res) => {
-      if (res.code === 0) {
-        relationRecommend.value = res.data
-      }
-    })
-  }
-
-  const changeSwiper = (index: number) => {
-    console.log(index)
-  }
-
-  const nextSwiper = (val: any) => {
-    console.log(val)
-  }
-  const handleDownloadPreview = (item: any) => {
-    // 预览pdf
-    navigateTo(`/pdf-preview?url=${item.url}`)
-  }
-
-  /** 获取下载类型 */
-  const getType = (type: number) => {
-    if (type === 1 || type === 2 || type === 3) {
-      // 图纸 文本 模型都传1
-      return 1
-    }
-    // 工具箱传
-    return 2
-  }
-
-  const handleDownload = async () => {
-    if (!userStore.token) {
-      ElMessage.error('请先登录')
-      return
-    }
-
-    if (detail.value.points === 0) {
-      scrollTo()
-      return
-    }
-
-    if (detail.value.downloadId) {
-      ElMessage.success('您已获取下载权限')
-      scrollTo()
-      return
-    }
-
-    const res = await message.confirm(`是否花费${detail.value.points}金币下载此资源，是否继续？`, '提示')
-    if (res) {
-      createUserProject({ relationId: detail.value.id, type: getType(detail.value.type) }).then((res) => {
-        if (res.code === 0) {
-          ElMessage.success('获取下载权限成功')
-          detail.value.downloadId = res.data
-          scrollTo()
-        }
-      })
-    }
-  }
-
-  const scrollTo = () => {
-    const element = document.getElementById('section1')
-    if (element) {
-      element.scrollIntoView({
-        behavior: 'smooth',
-      })
-    }
-  }
-
-  const handleReport = () => {
-    if (!userStore.token) {
-      ElMessage.error('请先登录')
-      return
-    }
-    console.log('举报')
-    ElMessageBox.prompt('说明内容', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      inputPlaceholder: '请输入举报内容',
-      inputErrorMessage: '请输入举报内容',
-    }).then(({ value }) => {
-      report({
-        id: detail.value.id,
-        title: detail.value.title,
-        files: detail.value.files,
-        comments: value,
-        projectId: detail.value.projectId,
-        drawId: detail.value.id,
-      }).then((res) => {
-        if (res.code === 0) {
-          ElMessage.success('举报成功')
-        }
-      })
-    })
-  }
-
-  const handleCollect = async () => {
-    if (!userStore.token) {
-      ElMessage.error('请先登录')
-      return
-    }
-
-    const res = detail.value.favoriteId
-      ? await deleteProject({ id: detail.value.favoriteId })
-      : await createContent({
-          projectId: detail.value.projectId,
-          drawId: detail.value.id,
-        })
-    if (res.code === 0) {
-      ElMessage.success(`${detail.value.favoriteId ? '取消' : '收藏'}成功`)
-      init()
-    }
-  }
-
-  const handleClick = (id: string | number) => {
-    navigateTo(`/down-drawe-detail?id=${id}`) // 修改为在新窗口打开
-  }
-
-  const handleDownloadFile = (url: string, name: string) => {
-    downloadFile(url, name)
-  }
-</script>
diff --git a/pages/home/components/Leaderboard.vue b/pages/home/components/Leaderboard.vue
index 5b5b718..d11d6da 100644
--- a/pages/home/components/Leaderboard.vue
+++ b/pages/home/components/Leaderboard.vue
@@ -134,7 +134,7 @@
   // handleuserTop()
 
   const handleClick = (item: ProjectDrawPageRespVO) => {
-    window.open(`/down-drawe-detail?id=${item.id}`, '_blank') // 修改为在新窗口打开
+    navigateTo(`/down-drawe-detail/${item.id}`) // 修改为在新窗口打开
   }
 </script>
 
diff --git a/pages/home/components/PopularDrawings.vue b/pages/home/components/PopularDrawings.vue
index 458803a..79b1436 100644
--- a/pages/home/components/PopularDrawings.vue
+++ b/pages/home/components/PopularDrawings.vue
@@ -110,7 +110,7 @@
   /** 点击卡片 */
   const handleCardClick = (item: ProjectDrawPageRespVO) => {
     // 跳转到下载详情页 并且是单独开标签
-    navigateTo(`/down-drawe-detail?id=${item.id}`) // 修改为在新窗口打开
+    navigateTo(`/down-drawe-detail/${item.id}`) // 修改为在新窗口打开
   }
 
   const handleClickType = (primary?: ProjectDictNodeVO, secondary?: ProjectDictNodeVO) => {
diff --git a/pages/personal-detail/index.vue b/pages/personal-detail/index.vue
index 2259516..f2e24e5 100644
--- a/pages/personal-detail/index.vue
+++ b/pages/personal-detail/index.vue
@@ -5,20 +5,20 @@
     <div class="profile-header">
       <div class="profile-container">
         <div class="avatar-container">
-          <el-image :src="userForm.avatar" alt="用户头像" class="avatar mt-4px" fit="cover" />
+          <el-image :src="userForm.avatar" alt="用户头像" class="avatar mt-[4px]" fit="cover" />
         </div>
         <div class="user-info">
           <h2 class="username">{{ userForm.nickname }}</h2>
           <!-- <div class="education">手机号码：{{ userForm.phone }}</div> -->
           <div class="stats">
-            技能标签：<el-tag v-for="label in userForm.labels" :key="label" type="primary" class="mr-10px" size="small">{{ label }}</el-tag>
+            技能标签：<el-tag v-for="label in userForm.labels" :key="label" type="primary" class="mr-[10px]" size="small">{{ label }}</el-tag>
           </div>
           <div class="description">{{ userForm.description }}</div>
         </div>
       </div>
     </div>
 
-    <div class="items-flex-start mx-auto mt-20px max-w-[1200px] flex justify-center">
+    <div class="items-flex-start mx-auto mt-[20px] max-w-[1200px] flex justify-center">
       <div class="flex-1">
         <!-- 导航标签 -->
         <div class="nav-tabs">
@@ -30,27 +30,27 @@
         </div>
 
         <!-- 作品展示区 -->
-        <div class="content w-800px">
-          <el-table v-loading="result.loading" :data="result.tableList" style="width: 100%" class="mt-14px">
+        <div class="content w-[800px]">
+          <el-table v-loading="result.loading" :data="result.tableList" style="width: 100%" class="mt-[14px]">
             <el-table-column prop="date" label="文件信息">
               <template #default="scope">
                 <div class="flex items-center">
-                  <el-image :src="scope.row.iconUrl" fit="cover" alt="" srcset="" class="h-91px w-181px rd-4px" />
-                  <div class="ml-17px">
-                    <div class="text-16px text-[#333333] font-normal">{{ scope.row.title }}</div>
-                    <div class="text-14px text-[#666] font-normal my-10px!">{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
+                  <el-image :src="scope.row.iconUrl" fit="cover" alt="" srcset="" class="h-[91px] w-[181px] rd-[4px]" />
+                  <div class="ml-[17px]">
+                    <div class="text-[16px] text-[#333333] font-normal">{{ scope.row.title }}</div>
+                    <div class="text-[14px] text-[#666] font-normal my-[10px]!">{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
                     <div class="flex items-center">
                       <div class="flex items-center">
-                        <img src="~/assets/images/look.png" alt="" srcset="" class="h-17px" />
-                        <span class="ml-4px">{{ scope.row.previewPoint }}</span>
+                        <img src="~/assets/images/look.png" alt="" srcset="" class="h-[17px]" />
+                        <span class="ml-[4px]">{{ scope.row.previewPoint }}</span>
                       </div>
-                      <div class="ml-13px flex items-center">
-                        <img src="~/assets/images/add.png" alt="" srcset="" class="h-23px" />
-                        <span class="ml-4px">{{ scope.row.hotPoint }}</span>
+                      <div class="ml-[13px] flex items-center">
+                        <img src="~/assets/images/add.png" alt="" srcset="" class="h-[23px]" />
+                        <span class="ml-[4px]">{{ scope.row.hotPoint }}</span>
                       </div>
-                      <div class="ml-13px flex items-center">
-                        <img src="~/assets/images/chat.png" alt="" srcset="" class="h-17px" />
-                        <span class="ml-4px">{{ scope.row.commentsPoint }}</span>
+                      <div class="ml-[13px] flex items-center">
+                        <img src="~/assets/images/chat.png" alt="" srcset="" class="h-[17px]" />
+                        <span class="ml-[4px]">{{ scope.row.commentsPoint }}</span>
                       </div>
                     </div>
                   </div>
@@ -70,7 +70,7 @@
             </el-table-column>
           </el-table>
           <!-- 分页 -->
-          <div class="mt-10px flex justify-center">
+          <div class="mt-[10px] flex justify-center">
             <el-pagination
               v-model:current-page="query.pageNo"
               v-model:page-size="query.pageSize"
@@ -91,10 +91,10 @@
           <div
             v-for="item in mainWork"
             :key="item.id"
-            class="flex cursor-pointer items-center justify-between px-10px py-4px hover:bg-#f5f5f5"
+            class="flex cursor-pointer items-center justify-between px-[10px] py-[4px] hover:bg-[#f5f5f5]"
             @click="handleClickV2(item.id)"
           >
-            <div class="ellipsis text-15px text-[#333333] font-normal">{{ item.title }}发货速度发货速度开发还是看东方航空</div>
+            <div class="ellipsis text-[15px] text-[#333333] font-normal">{{ item.title }}发货速度发货速度开发还是看东方航空</div>
           </div>
         </div>
       </div>
@@ -249,7 +249,7 @@
   }
 
   const handleClickV2 = (id: string | number) => {
-    navigateTo(`/down-drawe-detail?id=${id}`) // 修改为在新窗口打开
+    navigateTo(`/down-drawe-detail/${id}`) // 修改为在新窗口打开
   }
   // 获取最新发布
   const mainWork = ref<ProjectDrawMemberRespVO[]>([])
diff --git a/yarn.lock b/yarn.lock
index beec998..cc2c3ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1009,7 +1009,7 @@
     which "^5.0.0"
     ws "^8.18.3"
 
-"@nuxt/kit@3.18.1", "@nuxt/kit@^3.12.2", "@nuxt/kit@^3.13.2", "@nuxt/kit@^3.15.4", "@nuxt/kit@^3.17.6", "@nuxt/kit@^3.9.0":
+"@nuxt/kit@3.18.1", "@nuxt/kit@^3.12.2", "@nuxt/kit@^3.13.2", "@nuxt/kit@^3.15.4", "@nuxt/kit@^3.17.2", "@nuxt/kit@^3.17.6", "@nuxt/kit@^3.9.0":
   version "3.18.1"
   resolved "https://registry.npmmirror.com/@nuxt/kit/-/kit-3.18.1.tgz"
   integrity sha512-z6w1Fzv27CIKFlhct05rndkJSfoslplWH5fJ9dtusEvpYScLXp5cATWIbWkte9e9zFSmQTgDQJjNs3geQHE7og==
@@ -5055,6 +5055,14 @@ number-allocator@^1.0.14:
     debug "^4.3.1"
     js-sdsl "4.3.0"
 
+nuxt-swiper@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/nuxt-swiper/-/nuxt-swiper-2.0.1.tgz#6e05bea474bab8d7e866eaf40554943ce3348177"
+  integrity sha512-mUAzuGqQHcsqJa1p5y/Hafvurn62o6njHq8DcwQErourkpJpv7z/SnnT0ezXMr7YvDPNg22ayEKGdHkGXXOxMQ==
+  dependencies:
+    "@nuxt/kit" "^3.17.2"
+    swiper "^11.2.6"
+
 nuxt@^3.18.1:
   version "3.18.1"
   resolved "https://registry.npmmirror.com/nuxt/-/nuxt-3.18.1.tgz"
@@ -6433,6 +6441,11 @@ svgo@^4.0.0:
     picocolors "^1.1.1"
     sax "^1.4.1"
 
+swiper@^11.2.6:
+  version "11.2.10"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.2.10.tgz#ed0b17286b56f7fe8d4b46ed61e6e0bd8daaccad"
+  integrity sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==
+
 system-architecture@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmmirror.com/system-architecture/-/system-architecture-0.1.0.tgz"