Update swiper implementation and configuration

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',
+        },
+      ],
     },
   },
 

pages/down-drawe-detail/[id].vue

@@ -2,7 +2,9 @@
   <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="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%]" />
@@ -35,12 +37,14 @@
   <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>
+        <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">
+      <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">
@@ -166,9 +170,9 @@
       </div>
     </div>
   </div>
-  </template>
+</template>
 
-  <script setup lang="ts">
+<script setup lang="ts">
   import dayjs from 'dayjs'
   import { downloadFile } from '~/utils/utils'
   import { useMessage } from '~/utils/useMessage'
@@ -188,24 +192,22 @@
   const route = useRoute()
   const id = route.params.id as string
 
-  
   // 获取详情
   // const detail = ref<ProjectRespVO>({} as ProjectRespVO)
 
-    const {data: detail, refresh: refreshDetail } = await useAsyncData(`getDetail${id}`, async () => {
+  const { data: detail, refresh: refreshDetail } = await useAsyncData(`getDetail${id}`, async () => {
     const res = await getDetail({ id })
     return res.data
   })
 
-    console.log('==', detail.value);
-    
+  console.log('==', detail.value)
 
   if (!detail.value) {
     throw createError({
       statusCode: 404,
       statusMessage: 'Page Not Found',
-      fatal: true
-    });
+      fatal: true,
+    })
   }
 
   // const init = () => {
@@ -224,10 +226,10 @@
 
   // init()
 
-    const [{data:mainWork},{data:userInfo},{data:relationRecommend}] = await Promise.all([
+  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] })
+    getRelationRecommend({ type: detail.value?.type, projectType: detail.value?.projectType[0] }),
   ])
 
   // 获取最新发布
@@ -259,13 +261,6 @@
   //   })
   // }
 
-    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}`)
@@ -371,5 +366,4 @@
   const handleDownloadFile = (url: string, name: string) => {
     downloadFile(url, name)
   }
-  </script>
-  
+</script>

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 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>
-        </swiper-slide>
-      </swiper>
-    </ClientOnly>
   </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')
+  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,
+      },
+    })
   })
-      }
-    }
-  )
-
-  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)
-  }
 </script>
 
 <style scoped>