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

Update swiper component formatting and structure

Browse Source
This commit is contained in:
wangqiao
2025-08-27 09:22:25 +08:00
parent 0c59337af3
commit 2b2586293d
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,7 @@
<template>
<div class="box-border h-[631px] w-[1019px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] pa-[30px]">
<div
class="box-border h-[631px] w-[1019px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] pa-[30px]"
>
<ClientOnly>
<swiper
:style="{
@ -14,7 +16,9 @@
@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>
<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
@ -24,9 +28,13 @@
</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
><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 class="box-border h-[126px] w-[1019px] border border-[#EEEEEE] rounded-[6px] border-solid bg-[#FFFFFF] pa-[23px]">
<ClientOnly>
<swiper
:space-between="10"
@ -47,9 +55,8 @@
</div>
</template>
<script setup lang="ts">
import type { PropType} from 'vue'
import type { PropType } from 'vue'
import { ref, watch, nextTick } from 'vue'
// @ts-ignore
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
@ -59,7 +66,6 @@
import 'swiper/css/thumbs'
// import required modules
// @ts-ignore
import { FreeMode, Navigation, Thumbs } from 'swiper/modules'
const modules = [FreeMode, Navigation, Thumbs]