wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update detail page routing and swiper implementation

Browse Source
This commit is contained in:
wangqiao
2025-08-26 21:28:11 +08:00
parent bfa0f5e6bd
commit 84a7263f36
12 changed files with 469 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
pages/down-drawe-detail/components/swiper.vue
View File

@ -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">