优化VIP卡片布局及工具箱详情页面

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>