From 70a75333e87573014130452b74a3034309af583b Mon Sep 17 00:00:00 2001
From: wangqiao <wangqiao@58hn.cn>
Date: Wed, 24 Sep 2025 22:03:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96VIP=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=8F=8A=E5=B7=A5=E5=85=B7=E7=AE=B1=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kl-quick-menu/components/kl-vip.vue       |   4 +-
 .../personal-Center/index/components/pay.vue  |   5 +-
 pages/toolbox-detail/[id].vue                 | 402 ++++++++++++++++--
 pages/toolbox-detail/components/swiper.vue    | 163 +++++++
 4 files changed, 539 insertions(+), 35 deletions(-)
 create mode 100644 pages/toolbox-detail/components/swiper.vue

diff --git a/components/kl-quick-menu/components/kl-vip.vue b/components/kl-quick-menu/components/kl-vip.vue
index c31ff81..6055c69 100644
--- a/components/kl-quick-menu/components/kl-vip.vue
+++ b/components/kl-quick-menu/components/kl-vip.vue
@@ -153,8 +153,10 @@
   .vip-cards {
     display: flex;
     gap: 32px;
-    justify-content: center;
+    /* justify-content: center; */
     margin: 24px 0;
+    overflow-x: auto;
+    padding: 10px;
   }
   .vip-card {
     background: #fff;
diff --git a/pages/personal-Center/index/components/pay.vue b/pages/personal-Center/index/components/pay.vue
index 492cab3..0455413 100644
--- a/pages/personal-Center/index/components/pay.vue
+++ b/pages/personal-Center/index/components/pay.vue
@@ -155,8 +155,10 @@
   .vip-cards {
     display: flex;
     gap: 32px;
-    justify-content: center;
+    /* justify-content: center; */
     margin: 24px 0;
+    overflow-x: auto;
+    padding: 10px;
   }
   .vip-card {
     background: #fff;
@@ -169,6 +171,7 @@
     align-items: center;
     padding-bottom: 70px;
     position: relative;
+    flex-shrink: 0;
   }
   .vip-card-header {
     width: 100%;
diff --git a/pages/toolbox-detail/[id].vue b/pages/toolbox-detail/[id].vue
index daeed75..6076e75 100644
--- a/pages/toolbox-detail/[id].vue
+++ b/pages/toolbox-detail/[id].vue
@@ -1,56 +1,392 @@
-<!-- 工具箱详情页面 -->
 <template>
+  <SeoHead :title="detail?.title" :description="detail?.description" :keywords="detail?.labels?.toString()" />
   <KlNavTab />
-  <div
-    class="toolbox-detail w-[1200px] min-h-[374px] bg-[#FFFFFF] rounded-[12px] border border-solid border-[#EEEEEE] pa-[37px] pt-[20px] box-border ma-auto mt-[30px]"
-  >
-    <div class="w-[100%]">
-      <h1 class="font-[Microsoft_YaHei] font-bold text-[24px] text-[#333333] leading-[21px]">{{ detail?.title }}</h1>
-      <div class="flex items-center w-[100%] mt-[30px]">
-        <img :src="userStore.ownedUserAvatar" alt="头像" class="w-[49px] h-[50px] rounded-[50%] mr-[16px]" />
-        <div class="flex flex-col items-start w-[100%]">
-          <p class="font-[Microsoft_YaHei] font-normal text-[16px] text-[#333333] leading-[8px]">{{ userStore.ownedUserName || '用户昵称' }}</p>
-          <div class="flex items-center justify-between mt-[8px] w-[100%]">
-            <p class="font-[Microsoft_YaHei] font-normal text-[12px] text-[#999999] leading-[8px]">
-              {{ dayjs(detail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}
-            </p>
-            <div class="flex items-center justify-between font-[Microsoft_YaHei] font-normal text-[14px] text-[#666666] leading-[8px]">
-              <div class="mr-[9px] flex items-center">
-                <img src="~/assets/images/look.png" alt="" srcset="" class="mr-[2px] h-[17px]" />
-                <span class="color-[#666]">{{ detail?.previewPoint || 0 }}</span>
+  <!-- <div v-if="breadList && breadList.length > 1" class="mb-[-10px] mt-[20px] w-[1440px] mx-auto">
+    <el-breadcrumb :separator-icon="ArrowRight">
+      <el-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">{{ item.name }}</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div> -->
+  <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"></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]"> 包含的文件 </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 class="ml-[10px]">{{ 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 min-h-[269px] w-[397px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] pa-[22px]">
+        <div class="mb-[10px]">图纸ID: {{ detail?.no }}</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="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="mr-[9px] flex items-center">
-                <img src="~/assets/images/add.png" alt="" srcset="" class="mr-[2px] h-[22px]" />
-                <span class="color-[#666]">{{ detail?.hotPoint || 0}}</span>
+              <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="flex items-center">
-                <img src="~/assets/images/chat.png" alt="" srcset="" class="mr-[4px] h-[17px]" />
-                <span class="color-[#666]">{{ detail?.commentsPoint || 0 }}</span>
+              <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 class="w-[100%] h-[1px] bg-[#EEEEEE] rounded-[1px] my-[20px]"></div>
-    <div class="body">
-      <p class="font-[Microsoft_YaHei] font-normal text-[14px] text-[#333333] leading-[26px]">
-        {{ detail?.description }}
-      </p>
-    </div>
   </div>
 </template>
+
 <script setup lang="ts">
   import dayjs from 'dayjs'
+  import { ArrowRight } from '@element-plus/icons-vue'
+  import { downloadFile } from '~/utils/utils'
+  import { useMessage } from '~/utils/useMessage'
+  import { Warning } from '@element-plus/icons-vue'
+  import SeoHead from '~/components/seo-head/index.vue'
+  import CardPicture from '~/components/kl-card-picture/index.vue'
+  import { getDictTree } from '~/api/home/index'
   import { get } from '@/api/toolbox/index'
+  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 } = await useAsyncData(`toolbox-detail-${route.params.id}}`, async () => {
-    const res = await get({ id: route.params.id as string })
+  // 获取详情
+  // const detail = ref<ProjectRespVO>({} as ProjectRespVO)
+
+  const { data: detail, refresh: refreshDetail } = await useAsyncData(`toolbox-getDetail${id}`, async () => {
+    const res = await get({ id: id as string })
     return res.data
   })
 
-  console.log(detail.value)
+  console.log('==', detail.value)
+
+  if (!detail.value) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Page Not Found',
+      fatal: true,
+    })
+  }
+
+  // 获取面包屑
+  // const { data: breadList } = await useAsyncData(`breadList-detail-${route.params.id}}`, async () => {
+  //   const res = await getDictTree({ type: 1, id: detail.value?.projectType?.[0] })
+  //   const all = [
+  //     {
+  //       id: -1,
+  //       name: detail.value?.type === 1 ? '图纸库' : detail.value?.type === 3 ? '模型库' : '文本库',
+  //       isChildren: false,
+  //     },
+  //   ]
+  //   const arr = [...res.data, ...all]
+  //   return arr.reverse()
+  // })
+
+  // const init = () => {
+  //   getDetail({ id }).then((res) => {
+  //     if (res.code === 0) {
+  //       detail.value = res.data
+  //       // 获取推荐信息
+  //       getRelationRecommendList()
+  //       // 获取用户信息
+  //       handleGetUserInfo()
+  //       // 最新发布
+  //       handleGetMainWork()
+  //     }
+  //   })
+  // }
+
+  // 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
+    }
+    // 工具箱传
+    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 ? '取消' : '收藏'}成功`)
+      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/toolbox-detail/components/swiper.vue b/pages/toolbox-detail/components/swiper.vue
new file mode 100644
index 0000000..e45965a
--- /dev/null
+++ b/pages/toolbox-detail/components/swiper.vue
@@ -0,0 +1,163 @@
+<template>
+  <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]">
+    <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, onMounted } from 'vue'
+
+  const props = defineProps({
+    data: {
+      type: Array as PropType<any[]>,
+      default: () => [],
+    },
+    type: {
+      type: Number as PropType<number>,
+      default: 1,
+    },
+  })
+
+  onMounted(() => {
+    // Initialize Swiper
+    // @ts-ignore
+    var swiper = new Swiper('.mySwiper', {
+      spaceBetween: 10,
+      slidesPerView: 4,
+      freeMode: true,
+      watchSlidesProgress: true,
+    })
+    // @ts-ignore
+    var swiper2 = new Swiper('.mySwiper2', {
+      spaceBetween: 10,
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      thumbs: {
+        swiper: swiper,
+      },
+    })
+  })
+</script>
+
+<style scoped>
+  .swiper-button-disabled {
+    cursor: pointer !important;
+  }
+  .swiper {
+    width: 100%;
+    height: 100%;
+  }
+
+  .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    background: #fff;
+
+    /* Center slide text vertically */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    pointer-events: none;
+  }
+
+  .swiper {
+    width: 100%;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .swiper-slide {
+    background-size: cover;
+    background-position: center;
+  }
+
+  .mySwiper2 {
+    height: 100%;
+    /* height: calc(100vh - 207px); */
+    /* width: 100%; */
+  }
+
+  .mySwiper {
+    height: 90px;
+    box-sizing: border-box;
+    padding: 6px 6px;
+
+    /* position: absolute;
+    bottom: 0;
+    left: 0px;
+    right: 0px !important; */
+    background: rgba(0, 0, 0, 0.65);
+
+    /* z-index: 1000; */
+
+    /* width: 100%; */
+  }
+
+  .mySwiper .swiper-slide {
+    width: 25%;
+    height: 100%;
+    opacity: 0.4;
+    background: rgba(0, 0, 0, 0.65);
+    cursor: pointer;
+  }
+
+  .mySwiper .swiper-slide-thumb-active {
+    opacity: 1;
+  }
+
+  .swiper-slide img {
+    display: block;
+    /* width: 100%; */
+    height: 100%;
+    object-fit: contain;
+    pointer-events: none;
+  }
+
+  .Thumbs {
+    position: relative;
+    height: 100%;
+    width: auto;
+    background: rgba(0, 0, 0, 0.65);
+  }
+
+  .Thumbs img {
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .swiper-button-next,
+  .swiper-button-prev {
+    color: #666 !important;
+  }
+</style>