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

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

@ -1,5 +1,7 @@
<template> <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> <ClientOnly>
<swiper <swiper
:style="{ :style="{
@ -14,7 +16,9 @@
@swiper="onSwiper" @swiper="onSwiper"
@slide-change="changeSwiper" @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 <div class="swiper-button-prev color-[#fff]" @click="handlePrev"></div
><!--左箭头。如果放置在swiper外面，需要自定义样式。--> ><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
<div class="swiper-button-next color-[#fff]" @click="handleNext"></div <div class="swiper-button-next color-[#fff]" @click="handleNext"></div
@ -24,9 +28,13 @@
</div> </div>
<div class="mb-[20px] mt-[34px] flex items-center text-[16px] text-[#333333] font-normal"> <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 <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> <ClientOnly>
<swiper <swiper
:space-between="10" :space-between="10"
@ -49,7 +57,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { PropType } from 'vue' import type { PropType } from 'vue'
import { ref, watch, nextTick } from 'vue' import { ref, watch, nextTick } from 'vue'
// @ts-ignore
import { Swiper, SwiperSlide } from 'swiper/vue' import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css' import 'swiper/css'
@ -59,7 +66,6 @@
import 'swiper/css/thumbs' import 'swiper/css/thumbs'
// import required modules // import required modules
// @ts-ignore
import { FreeMode, Navigation, Thumbs } from 'swiper/modules' import { FreeMode, Navigation, Thumbs } from 'swiper/modules'
const modules = [FreeMode, Navigation, Thumbs] const modules = [FreeMode, Navigation, Thumbs]