|
@@ -1,5 +1,5 @@
|
|
<script setup>
|
|
<script setup>
|
|
-import { onMounted, inject } from 'vue'
|
|
|
|
|
|
+import { onMounted, inject, ref, computed } from 'vue'
|
|
import useSizeAdapt from "@/useFunctions/useSizeAdapt"
|
|
import useSizeAdapt from "@/useFunctions/useSizeAdapt"
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
import { Pagination } from 'swiper/modules'
|
|
import { Pagination } from 'swiper/modules'
|
|
@@ -8,6 +8,8 @@ import { Pagination } from 'swiper/modules'
|
|
// import 'swiper/css/pagination'
|
|
// import 'swiper/css/pagination'
|
|
|
|
|
|
|
|
|
|
|
|
+
|
|
|
|
+
|
|
const $env = inject('$env')
|
|
const $env = inject('$env')
|
|
|
|
|
|
const {
|
|
const {
|
|
@@ -19,14 +21,56 @@ const emit = defineEmits(['close'])
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
list: {
|
|
list: {
|
|
type: Array,
|
|
type: Array,
|
|
- default: () => {return []},
|
|
|
|
|
|
+ default: () => { return [] },
|
|
},
|
|
},
|
|
})
|
|
})
|
|
|
|
|
|
const modules = [Pagination]
|
|
const modules = [Pagination]
|
|
-const paginationOptions = { clickable: true }
|
|
|
|
|
|
+
|
|
|
|
+const swiperRef = ref(null) // 用于访问Swiper实例
|
|
|
|
+
|
|
|
|
+const swiperRealIndex = ref(0)
|
|
|
|
+
|
|
|
|
+const displayedPages = ref([])
|
|
|
|
+
|
|
|
|
+const currentIndex = ref(0)
|
|
|
|
+
|
|
|
|
+const slideChange = (item) => {
|
|
|
|
+ swiperRealIndex.value = item.activeIndex
|
|
|
|
+ // 这里只是一个简单的示例,根据实际需要调整逻辑
|
|
|
|
+ const totalSlides = props.list.length // 总幻灯片数量
|
|
|
|
+ const visibleRange = 5 // 每次显示的分页指示器数量(可以根据需要调整)
|
|
|
|
+ currentIndex.value = swiperRealIndex.value % 5// 当前幻灯片索引
|
|
|
|
+ // console.log('currentIndex', currentIndex)
|
|
|
|
+ // displayedPages.value = totalSlides / 5
|
|
|
|
+
|
|
|
|
+ // let start = Math.max(0, currentIndex.value - Math.floor(visibleRange / 2))
|
|
|
|
+ // let end = Math.min(totalSlides - 1, start + visibleRange - 1)
|
|
|
|
+
|
|
|
|
+ if (swiperRealIndex.value >= totalSlides - totalSlides % visibleRange ) {
|
|
|
|
+ displayedPages.value = Array.from({ length: totalSlides % visibleRange }, (_, i) => 0 + i)
|
|
|
|
+ // console.log('displayedPages', totalSlides, visibleRange, swiperRealIndex.value, displayedPages.value)
|
|
|
|
+ } else {
|
|
|
|
+ displayedPages.value = Array.from({ length: 5 }, (_, i) => 0 + i)
|
|
|
|
+ }
|
|
|
|
+ console.log('displayedPages', totalSlides, visibleRange, swiperRealIndex.value, displayedPages.value)
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+// 跳转到指定幻灯片
|
|
|
|
+const goToSlide = (index) => {
|
|
|
|
+ swiperRef.value.slideTo(index)
|
|
|
|
+}
|
|
|
|
+
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
- console.log(props.list)
|
|
|
|
|
|
+ const totalSlides = props.list.length // 总幻灯片数量
|
|
|
|
+ const visibleRange = 5 // 每次显示的分页指示器数量(可以根据需要调整)
|
|
|
|
+ const currentIndex = swiperRealIndex.value// 当前幻灯片索引
|
|
|
|
+ let start = Math.max(0, currentIndex - Math.floor(visibleRange / 2))
|
|
|
|
+ let end = Math.min(totalSlides - 1, start + visibleRange - 1)
|
|
|
|
+ displayedPages.value = Array.from({ length: end - start + 1 }, (_, i) => start + i)
|
|
})
|
|
})
|
|
|
|
|
|
|
|
|
|
@@ -36,41 +80,53 @@ onMounted(() => {
|
|
<div class="screen-box">
|
|
<div class="screen-box">
|
|
<div class="screen-box3">
|
|
<div class="screen-box3">
|
|
<Swiper
|
|
<Swiper
|
|
|
|
+ ref="swiperRef"
|
|
class="step-list"
|
|
class="step-list"
|
|
:modules="modules"
|
|
:modules="modules"
|
|
- :pagination="paginationOptions"
|
|
|
|
|
|
+ @slide-change="slideChange"
|
|
>
|
|
>
|
|
<SwiperSlide
|
|
<SwiperSlide
|
|
- v-for="(item,index) in list"
|
|
|
|
|
|
+ v-for="(item, index) in list"
|
|
:key="index"
|
|
:key="index"
|
|
class="step-item"
|
|
class="step-item"
|
|
>
|
|
>
|
|
<!-- <div>{{ item['名称'] }}</div> -->
|
|
<!-- <div>{{ item['名称'] }}</div> -->
|
|
<div class="name-box">
|
|
<div class="name-box">
|
|
- <div
|
|
|
|
|
|
+ {{ item['画法'] }}
|
|
|
|
+ <div class="name-box2">
|
|
|
|
+ {{ item['名称'] }}
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <div
|
|
v-for="(item1,index1) in item['显示名称']"
|
|
v-for="(item1,index1) in item['显示名称']"
|
|
:key="index1"
|
|
:key="index1"
|
|
>
|
|
>
|
|
{{ item1 }}
|
|
{{ item1 }}
|
|
- </div>
|
|
|
|
|
|
+ </div> -->
|
|
</div>
|
|
</div>
|
|
<img
|
|
<img
|
|
- :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${item['名称']}.png`"
|
|
|
|
|
|
+ :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${item['图片名称'] ? item['图片名称'] : item['名称']}.png`"
|
|
alt=""
|
|
alt=""
|
|
>
|
|
>
|
|
</SwiperSlide>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</Swiper>
|
|
- <div class="system-btns">
|
|
|
|
- <BtnBack
|
|
|
|
- @click="emit('close')"
|
|
|
|
|
|
+ <!-- 自定义分页器 -->
|
|
|
|
+ <div class="custom-pagination">
|
|
|
|
+ <span
|
|
|
|
+ v-for="(index, i) in displayedPages"
|
|
|
|
+ :key="i"
|
|
|
|
+ :class="{ 'pagination-bullet': true, 'swiper-pagination-bullet-active': index === currentIndex }"
|
|
|
|
+ @click="goToSlide(index)"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="system-btns">
|
|
|
|
+ <BtnBack @click="emit('close')" />
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<style lang='less' scoped>
|
|
<style lang='less' scoped>
|
|
-::v-deep{
|
|
|
|
|
|
+::v-deep {
|
|
.swiper-pagination-bullet {
|
|
.swiper-pagination-bullet {
|
|
border: 1px solid white;
|
|
border: 1px solid white;
|
|
background: none;
|
|
background: none;
|
|
@@ -78,14 +134,35 @@ onMounted(() => {
|
|
height: 10px;
|
|
height: 10px;
|
|
opacity: 1;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
- .swiper-pagination-bullet-active{
|
|
|
|
|
|
+
|
|
|
|
+ .swiper-pagination-bullet-active {
|
|
background: white;
|
|
background: white;
|
|
}
|
|
}
|
|
- .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
|
|
|
|
- margin: 0 calc(10 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
|
|
|
|
+ .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
|
|
|
|
+ margin: 0 calc(5 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .custom-pagination {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 10px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ position: fixed;
|
|
|
|
+ bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+
|
|
|
|
+ span {
|
|
|
|
+ width: 10px;
|
|
|
|
+ height: 10px;
|
|
|
|
+ margin: 0 calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+ border-radius: 50px;
|
|
|
|
+ border: 1px solid rgb(245, 243, 243);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+
|
|
.screen-box {
|
|
.screen-box {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
@@ -95,43 +172,64 @@ onMounted(() => {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
background: url(@/assets/images/screen-box3.png);
|
|
background: url(@/assets/images/screen-box3.png);
|
|
- background-size:cover ;
|
|
|
|
|
|
+ background-size: cover;
|
|
|
|
|
|
- .step-list{
|
|
|
|
|
|
+ .step-list {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: calc(100% - 15px);
|
|
height: calc(100% - 15px);
|
|
- .step-item{
|
|
|
|
|
|
+
|
|
|
|
+ .step-item {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
position: relative;
|
|
position: relative;
|
|
- >.name-box{
|
|
|
|
|
|
+
|
|
|
|
+ >.name-box {
|
|
position: absolute;
|
|
position: absolute;
|
|
left: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
left: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
top: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
top: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
- writing-mode: horizontal-tb;
|
|
|
|
|
|
+ writing-mode: vertical-rl;
|
|
|
|
+ letter-spacing: 12px;
|
|
background: url(@/assets/images/name-bg.png);
|
|
background: url(@/assets/images/name-bg.png);
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
- padding: 15px ;
|
|
|
|
|
|
+ padding: 10px;
|
|
color: #476446;
|
|
color: #476446;
|
|
font-family: 'KingHwa_OldSong';
|
|
font-family: 'KingHwa_OldSong';
|
|
font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
- >:nth-child(odd){
|
|
|
|
- color:#7B916B;
|
|
|
|
|
|
+ // >:nth-child(odd){
|
|
|
|
+ // color:#7B916B;
|
|
|
|
+ // font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+ // line-height: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+ // transform: translateX(-40%)
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ .name-box2 {
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ transform: translate(100%, 30%);
|
|
|
|
+ writing-mode: vertical-rl;
|
|
|
|
+ letter-spacing: 8px;
|
|
|
|
+ font-family: 'KingHwa_OldSong';
|
|
font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
- line-height: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
- transform: translateX(-40%)
|
|
|
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+ color: #7B916B;
|
|
|
|
+ white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- >img{
|
|
|
|
|
|
+
|
|
|
|
+ >img {
|
|
// width: 40%;
|
|
// width: 40%;
|
|
|
|
+ max-width: 80%;
|
|
margin-left: calc(50 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))
|
|
margin-left: calc(50 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
|
|
.system-btns {
|
|
.system-btns {
|