fix: 修复轮播图滚动的时候,界面异常展示的问题
This commit is contained in:
@@ -8,24 +8,22 @@
|
||||
<div class="banner-block swiper-slide" :key="surveyStats.user_count">
|
||||
<p class="banner-block-slogan">实时链接消费者的深度洞察及日常信息采集工具</p>
|
||||
<div class="banner-block-desc">
|
||||
已支持 <CountTo :end="surveyStats.user_count" :use-comma="true" :key="surveyStats.user_count"
|
||||
@ready-loop="readyLoop"
|
||||
/> 用户 |
|
||||
发起 <CountTo :end="surveyStats.survey_count" :use-comma="true" @ready-loop="readyLoop" /> 次调研 |
|
||||
有效回收 <CountTo :end="surveyStats.sample_count" :use-comma="true" @ready-loop="readyLoop" /> 份数据
|
||||
已支持
|
||||
<CountTo :end="surveyStats.user_count" :use-comma="true" :key="surveyStats.user_count" />
|
||||
用户 | 发起
|
||||
<CountTo :end="surveyStats.survey_count" :use-comma="true" />
|
||||
次调研 | 有效回收
|
||||
<CountTo :end="surveyStats.sample_count" :use-comma="true" />
|
||||
份数据
|
||||
</div>
|
||||
</div>
|
||||
<!-- 动态 Banner 列表 -->
|
||||
<div
|
||||
v-for="(item, index) in bannerList"
|
||||
:key="index"
|
||||
class="swiper-slide banner-content"
|
||||
:style="{ backgroundImage: 'url(' + item.banner_address + ')' }"
|
||||
>
|
||||
<p class="banner-content-title" :class="{'white': index === 0}">
|
||||
<div v-for="(item, index) in bannerList" :key="index" class="swiper-slide banner-content"
|
||||
:style="{ backgroundImage: 'url(' + item.banner_address + ')' }">
|
||||
<p class="banner-content-title" :class="{ 'white': index === 0 }">
|
||||
{{ item.title }}
|
||||
</p>
|
||||
<p class="banner-content-desc" :class="{'white': index === 0}">
|
||||
<p class="banner-content-desc" :class="{ 'white': index === 0 }">
|
||||
{{ item.synopsis }}
|
||||
</p>
|
||||
<p v-if="index === 0" class="banner-content-btn" @click="toBannerDetail(item)">
|
||||
@@ -44,13 +42,8 @@
|
||||
|
||||
<!-- 分页器 -->
|
||||
<div class="custom-pagination">
|
||||
<span
|
||||
v-for="(item, index) in 3"
|
||||
:key="'dot' + index"
|
||||
class="custom-pagination-bullet"
|
||||
:class="{ 'active': activeIndex === index }"
|
||||
@click="goToSlide(index)"
|
||||
></span>
|
||||
<span v-for="(item, index) in 3" :key="'dot' + index" class="custom-pagination-bullet"
|
||||
:class="{ 'active': activeIndex === index }" @click="goToSlide(index)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -108,17 +101,20 @@ const getQuesStatics = async () => {
|
||||
surveyData.value = res.data
|
||||
}
|
||||
|
||||
const readyLoop = ()=>{
|
||||
if (bannerSwiper){
|
||||
bannerSwiper.destroy()
|
||||
}
|
||||
initSwiper(true)
|
||||
}
|
||||
// function readyLoop(){
|
||||
// initSwiper(true)
|
||||
// }
|
||||
// const readyLoop = ()=>{
|
||||
// if (bannerSwiper){
|
||||
// bannerSwiper.destroy()
|
||||
// }
|
||||
// initSwiper(true)
|
||||
// }
|
||||
|
||||
const initSwiper = (loop = false)=>{
|
||||
const initSwiper = (loop = false) => {
|
||||
// 初始化 Swiper
|
||||
if (bannerSwiper) {
|
||||
bannerSwiper.destroy(true, true);
|
||||
// bannerSwiper.destroy(true, true);
|
||||
bannerSwiper = null;
|
||||
}
|
||||
bannerSwiper = new Swiper(swiperContainer.value, {
|
||||
@@ -143,7 +139,7 @@ const initSwiper = (loop = false)=>{
|
||||
},
|
||||
on: {
|
||||
slideChange: () => {
|
||||
if (bannerSwiper){
|
||||
if (bannerSwiper) {
|
||||
activeIndex.value = bannerSwiper.realIndex
|
||||
}
|
||||
},
|
||||
@@ -166,7 +162,7 @@ const goNext = () => {
|
||||
const goToSlide = (index) => {
|
||||
if (bannerSwiper) {
|
||||
// 如果使用 loop: true,则需用 slideToLoop
|
||||
bannerSwiper.slideToLoop(index )
|
||||
bannerSwiper.slideToLoop(index)
|
||||
activeIndex.value = index
|
||||
}
|
||||
}
|
||||
@@ -200,6 +196,7 @@ onBeforeUnmount(() => {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header-cont {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -341,10 +338,12 @@ onBeforeUnmount(() => {
|
||||
.header-cont {
|
||||
height: 45vh;
|
||||
}
|
||||
|
||||
.banner-block-slogan {
|
||||
top: 35%;
|
||||
left: 18%;
|
||||
}
|
||||
|
||||
.banner-block-desc {
|
||||
left: 5%;
|
||||
}
|
||||
@@ -354,10 +353,12 @@ onBeforeUnmount(() => {
|
||||
.header-cont {
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
.banner-block-slogan {
|
||||
top: calc(35%);
|
||||
left: calc(21%);
|
||||
}
|
||||
|
||||
.banner-block-desc {
|
||||
top: calc(54%);
|
||||
left: calc(6%);
|
||||
@@ -394,7 +395,8 @@ onBeforeUnmount(() => {
|
||||
justify-content: center;
|
||||
//background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
opacity: 0; /* 默认隐藏 */
|
||||
opacity: 0;
|
||||
/* 默认隐藏 */
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -419,6 +421,7 @@ onBeforeUnmount(() => {
|
||||
.custom-swiper-button-next {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
/* 自定义分页器样式 */
|
||||
.custom-pagination {
|
||||
position: absolute;
|
||||
|
||||
Reference in New Issue
Block a user