diff --git a/nuxt.config.ts b/nuxt.config.ts
index e07251b..f307dd4 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -11,13 +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',
-    'nuxt-swiper',
-  ],
+  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: {
@@ -74,8 +68,7 @@ export default defineNuxtConfig({
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
         {
           name: 'description',
-          content:
-            '图夕夕是一家图纸素材分享交易平台，提供AutoCAD/ProE/Creo/CATIA/UG/inventor/CAXA/等建筑图纸的素材下载及免费教程。',
+          content: '图夕夕是一家图纸素材分享交易平台，提供AutoCAD/ProE/Creo/CATIA/UG/inventor/CAXA/等建筑图纸的素材下载及免费教程。',
         },
         { name: 'keywords', content: '图纸,图纸下载,设计素材,图纸大全,设计图纸,,工程图纸,cad图纸' },
         { name: 'author', content: '图夕夕' },
@@ -86,8 +79,7 @@ export default defineNuxtConfig({
         },
         {
           property: 'og:description',
-          content:
-            '图夕夕是一家图纸素材分享交易平台，提供AutoCAD/ProE/Creo/CATIA/UG/inventor/CAXA/等建筑图纸的素材下载及免费教程。',
+          content: '图夕夕是一家图纸素材分享交易平台，提供AutoCAD/ProE/Creo/CATIA/UG/inventor/CAXA/等建筑图纸的素材下载及免费教程。',
         },
         { property: 'og:type', content: 'website' },
         { property: 'og:url', content: 'https://www.xlcig.cn' },
@@ -96,7 +88,16 @@ export default defineNuxtConfig({
         // robots meta
         { name: 'robots', content: 'index, follow' },
       ],
-      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon2.ico' }],
+      link: [
+        { rel: 'icon', type: 'image/x-icon', href: '/favicon2.ico' },
+        { rel: 'stylesheet', type: 'text/css', href: 'https://unpkg.com/swiper@8/swiper-bundle.css' },
+      ],
+      script: [
+        {
+          type: 'text/javascript',
+          src: 'https://unpkg.com/swiper@8/swiper-bundle.js',
+        },
+      ],
     },
   },
 
diff --git a/pages/down-drawe-detail/[id].vue b/pages/down-drawe-detail/[id].vue
index 87ef878..c59bee1 100644
--- a/pages/down-drawe-detail/[id].vue
+++ b/pages/down-drawe-detail/[id].vue
@@ -1,375 +1,369 @@
 <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
-          >
+  <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 class="ma-auto mt-[21px] flex">
-      <div class="w-[1019px]">
+  </div>
+  <!--  -->
+  <div class="ma-auto mt-[21px] flex">
+    <div class="w-[1019px]">
+      <div>
+        <ThumBnail :data="detail?.coverImages" :type="detail?.type"></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>
-          <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 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 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-[8px]">图纸ID: {{ detail?.id }}</div>
-          <div class="mb-[8px]">文件大小：{{ detail?.filesInfo?.fileSize || 0 }} </div>
-          <!-- <div class="mb-10px">图纸版本：{{ detail.editionsName }} </div> -->
-          <div class="mb-[8px]">图纸格式：{{ detail?.formatType?.toString() }}</div>
-          <div class="mb-[8px]">所需金币：{{ detail?.points }}金币</div>
-          <div class="mb-[8px]">发布时间：{{ dayjs(detail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
-          <div class="mb-[8px]">图纸参数：{{ detail?.editTypeName }}</div>
-          <div class="mb-[8px]">图纸分类：{{ detail?.projectTypeName }}</div>
-          <div class="mb-[8px]">软件分类：{{ 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 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-[8px]">图纸ID: {{ detail?.id }}</div>
+        <div class="mb-[8px]">文件大小：{{ detail?.filesInfo?.fileSize || 0 }} </div>
+        <!-- <div class="mb-10px">图纸版本：{{ detail.editionsName }} </div> -->
+        <div class="mb-[8px]">图纸格式：{{ detail?.formatType?.toString() }}</div>
+        <div class="mb-[8px]">所需金币：{{ detail?.points }}金币</div>
+        <div class="mb-[8px]">发布时间：{{ dayjs(detail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
+        <div class="mb-[8px]">图纸参数：{{ detail?.editTypeName }}</div>
+        <div class="mb-[8px]">图纸分类：{{ detail?.projectTypeName }}</div>
+        <div class="mb-[8px]">软件分类：{{ 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
-                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
+                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]"
               >
-            </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>
+                <el-image :src="i.url" fit="cover" alt="" srcset="" class="h-full object-cover" />
               </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 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>
-  </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 { onMounted } 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
+  </div>
+</template>
 
-  
-    // 获取详情
-    // const detail = ref<ProjectRespVO>({} as ProjectRespVO)
+<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 { onMounted } 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 {data: detail, refresh: refreshDetail } = await useAsyncData(`getDetail${id}`, async () => {
-      const res = await getDetail({ id })
-      return res.data
-    })
+  // 获取详情
+  // const detail = ref<ProjectRespVO>({} as ProjectRespVO)
 
-    console.log('==', detail.value);
-    
+  const { data: detail, refresh: refreshDetail } = await useAsyncData(`getDetail${id}`, async () => {
+    const res = await getDetail({ id })
+    return res.data
+  })
 
-    if (!detail.value) {
+  console.log('==', detail.value)
+
+  if (!detail.value) {
     throw createError({
       statusCode: 404,
       statusMessage: 'Page Not Found',
-      fatal: true
-    });
+      fatal: true,
+    })
   }
 
-    // const init = () => {
-    //   getDetail({ id }).then((res) => {
-    //     if (res.code === 0) {
-    //       detail.value = res.data
-    //       // 获取推荐信息
-    //       getRelationRecommendList()
-    //       // 获取用户信息
-    //       handleGetUserInfo()
-    //       // 最新发布
-    //       handleGetMainWork()
-    //     }
-    //   })
-    // }
-  
-    // init()
+  // const init = () => {
+  //   getDetail({ id }).then((res) => {
+  //     if (res.code === 0) {
+  //       detail.value = res.data
+  //       // 获取推荐信息
+  //       getRelationRecommendList()
+  //       // 获取用户信息
+  //       handleGetUserInfo()
+  //       // 最新发布
+  //       handleGetMainWork()
+  //     }
+  //   })
+  // }
 
-    const [{data:mainWork},{data:userInfo},{data:relationRecommend}] = await Promise.all([
-        getMainWork({ id: detail.value?.id, limit: 10, memberId: detail.value?.ownedUserId }),
-        getUserInfo({ id: detail.value?.id }),
-        getRelationRecommend({ type: detail.value?.type, projectType: detail.value?.projectType[0] })
-    ])
-  
-    // 获取最新发布
-    // 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)
+  // init()
+
+  const [{ data: mainWork }, { data: userInfo }, { data: relationRecommend }] = await Promise.all([
+    getMainWork({ id: detail.value?.id, limit: 10, memberId: detail.value?.ownedUserId }),
+    getUserInfo({ id: detail.value?.id }),
+    getRelationRecommend({ type: detail.value?.type, projectType: detail.value?.projectType[0] }),
+  ])
+
+  // 获取最新发布
+  // 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 handleDownloadPreview = (item: any) => {
+    // 预览pdf
+    navigateTo(`/pdf-preview?url=${item.url}`)
+  }
+
+  /** 获取下载类型 */
+  const getType = (type: number) => {
+    if (type === 1 || type === 2 || type === 3) {
+      // 图纸 文本 模型都传1
+      return 1
     }
-  
-    const nextSwiper = (val: any) => {
-      console.log(val)
+    // 工具箱传
+    return 2
+  }
+
+  const handleDownload = async () => {
+    if (!userStore.token) {
+      ElMessage.error('请先登录')
+      return
     }
-    const handleDownloadPreview = (item: any) => {
-      // 预览pdf
-      navigateTo(`/pdf-preview?url=${item.url}`)
+
+    if (detail.value?.points === 0) {
+      scrollTo()
+      return
     }
-  
-    /** 获取下载类型 */
-    const getType = (type: number) => {
-      if (type === 1 || type === 2 || type === 3) {
-        // 图纸 文本 模型都传1
-        return 1
-      }
-      // 工具箱传
-      return 2
+
+    if (detail.value?.downloadId) {
+      ElMessage.success('您已获取下载权限')
+      scrollTo()
+      return
     }
-  
-    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 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 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 ? '取消' : '收藏'}成功`)
-        refreshDetail()
-      }
+  }
+
+  const scrollTo = () => {
+    const element = document.getElementById('section1')
+    if (element) {
+      element.scrollIntoView({
+        behavior: 'smooth',
+      })
     }
-  
-    const handleClick = (id: string | number) => {
-      navigateTo(`/down-drawe-detail/${id}`) // 修改为在新窗口打开
+  }
+
+  const handleReport = () => {
+    if (!userStore.token) {
+      ElMessage.error('请先登录')
+      return
     }
-  
-    const handleDownloadFile = (url: string, name: string) => {
-      downloadFile(url, name)
+    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
     }
-  </script>
-  
\ No newline at end of file
+
+    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 ? '取消' : '收藏'}成功`)
+      refreshDetail()
+    }
+  }
+
+  const handleClick = (id: string | number) => {
+    navigateTo(`/down-drawe-detail/${id}`) // 修改为在新窗口打开
+  }
+
+  const handleDownloadFile = (url: string, name: string) => {
+    downloadFile(url, name)
+  }
+</script>
diff --git a/pages/down-drawe-detail/components/swiper.vue b/pages/down-drawe-detail/components/swiper.vue
index 2940acf..46d5409 100644
--- a/pages/down-drawe-detail/components/swiper.vue
+++ b/pages/down-drawe-detail/components/swiper.vue
@@ -1,74 +1,32 @@
 <template>
-  <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 class="box-border h-[631px] w-[1019px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] pa-[30px]">
+    <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide" v-for="(item, index) in props.data" :key="index">
+          <img :src="item.url" />
+        </div>
+      </div>
+      <div class="swiper-button-next"></div>
+      <div class="swiper-button-prev"></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]">{{
-      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]"
-  >
-    <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 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]">
+    <div thumbsSlider="" class="swiper mySwiper">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide" v-for="(item, index) in props.data" :key="index">
+          <img :src="item.url" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
   import type { PropType } from 'vue'
-  import { ref, watch, nextTick } from 'vue'
-  import { Swiper, SwiperSlide } from 'swiper/vue'
-
-  import 'swiper/css'
-
-  import 'swiper/css/free-mode'
-  import 'swiper/css/navigation'
-  import 'swiper/css/thumbs'
-
-  // import required modules
-  import { FreeMode, Navigation, Thumbs } from 'swiper/modules'
-
-  const modules = [FreeMode, Navigation, Thumbs]
+  import { ref, watch, nextTick, onMounted } from 'vue'
 
   const props = defineProps({
     data: {
@@ -81,50 +39,25 @@
     },
   })
 
-  const emit = defineEmits(['changeSwiper', 'nextSwiper'])
-
-  const thumbsSwiper = ref<any>(null)
-  const useSwiper = ref<any>(null)
-  const activeIndex = ref<number>(0)
-
-  watch(
-    () => props.data,
-    (value) => {
-      if (value.length) {
-        nextTick(() => {
-          const thumb_active = document.querySelector(`.mySwiper .swiper-slide`)
-          thumb_active?.classList.add('swiper-slide-thumb-active')
-        })
-      }
-    }
-  )
-
-  const setThumbsSwiper = (swiper: any) => {
-    thumbsSwiper.value = swiper
-  }
-
-  const handlePrev = () => {
-    if (activeIndex.value === 0 || props.data.length === 0) {
-      emit('nextSwiper', false)
-    }
-    useSwiper.value.slidePrev()
-  }
-
-  const handleNext = () => {
-    if (activeIndex.value === props.data.length - 1 || props.data.length === 0) {
-      emit('nextSwiper', true)
-    }
-    useSwiper.value.slideNext()
-  }
-
-  const onSwiper = (swiper: any) => {
-    useSwiper.value = swiper
-  }
-
-  const changeSwiper = (e: any) => {
-    activeIndex.value = e.activeIndex
-    emit('changeSwiper', e.activeIndex)
-  }
+  onMounted(() => {
+    // Initialize Swiper
+    var swiper = new Swiper('.mySwiper', {
+      spaceBetween: 10,
+      slidesPerView: 4,
+      freeMode: true,
+      watchSlidesProgress: true,
+    })
+    var swiper2 = new Swiper('.mySwiper2', {
+      spaceBetween: 10,
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      thumbs: {
+        swiper: swiper,
+      },
+    })
+  })
 </script>
 
 <style scoped>