From efa9bfe98ba906e4c9b8f49c89f5da162a46bb0f Mon Sep 17 00:00:00 2001 From: 陶杰 <1378534974@qq.com> Date: 星期一, 13 一月 2025 10:21:24 +0800 Subject: [PATCH] 1.微信一键登录:新增“同意用户协议”之后才可登录 --- components/banner3d/banner3d.vue | 70 ++++++++++++++++++++++++++++++---- 1 files changed, 61 insertions(+), 9 deletions(-) diff --git a/components/banner3d/banner3d.vue b/components/banner3d/banner3d.vue index 4e2b8df..926f03f 100644 --- a/components/banner3d/banner3d.vue +++ b/components/banner3d/banner3d.vue @@ -3,8 +3,9 @@ <swiper :style="{width: '100vw', height: '410rpx'}" :indicator-dots="swiperConfig.indicatorDots" :indicator-color="swiperConfig.indicatorColor" :indicator-active-color="swiperConfig.indicatorActiveColor" :autoplay="swiperConfig.autoplay" :interval="swiperConfig.interval" :duration="swiperConfig.duration" - :circular="swiperConfig.circular" :previous-margin="swiperConfig.previousMargin" + :circular="swiperConfig.circular" :previous-margin="swiperConfig.previousMargin" v-if="init" :next-margin="swiperConfig.nextMargin" @change="swiperChange" @animationfinish="animationfinish"> + <swiper-item v-for="(item, i) in bannerList" :key="i"> <!-- 1.当前展示为第1项时,bannerList最后一项和第二项的justifyContent值分别为flex-end和flex-start,其余项值为center --> <!-- 2.当前展示为最后一项时,bannerList倒数第2项和第1项的justifyContent值分别为flex-end和flex-start,其余项值为center --> @@ -15,25 +16,31 @@ transitionDuration: '.3s', transitionTimingFunction: 'ease' }" :class="[curIndex===0?((i===listLen-1)?'item-left':(i===1?'item-right':'item-center')):(curIndex===listLen-1?(i===0?'item-right':(i===listLen-2?'item-left':'item-center')):(i===curIndex-1?'item-left':(i===curIndex+1?'item-right':'item-center')))]"> - <image :src="item.bg" class="slide-image" /> - <image :src="item.picture" class="icon-image" :class="[`v${i+1}`]" mode="aspectFit"></image> - <view class="container" :class="[`v${i+1}`]"> + <image :src="item.bg" class="slide-image"> + + </image> + <view v-if="item.currentMsg" class="top-msg" :class="[`v${bannerList[i].key|| (i+1)}`]"> + {{item.currentMsg}} + </view> + <image :src="item.picture" class="icon-image" :class="[`v${bannerList[i].key||(i+1)}`]" + mode="aspectFit"></image> + <view class="container" :class="[`v${bannerList[i].key|| (i+1)}`]"> <view class="title">{{bannerList[i].title}}</view> <view class="line-component" v-if="bannerList[i].point"> <view class="line-bg"> <view class="tip" - :style="{'left':(bannerList[i].point.end&&(bannerList[i].point.current/bannerList[i].point.end)||0).toFixed(2)*100+'%'}"> + :style="{'left':(bannerList[i].point.current<=bannerList[i].point.endPoint)?((bannerList[i].point.endPoint&&(bannerList[i].point.current/bannerList[i].point.endPoint)||0).toFixed(2)*100+'%'):'100%'}"> {{bannerList[i].point.current || 0}} </view> <view class="tip-loc" - :style="{'left':(bannerList[i].point.end&&(bannerList[i].point.current/bannerList[i].point.end)||0).toFixed(2)*100+'%'}"> + :style="{'left':(bannerList[i].point.current<=bannerList[i].point.endPoint)?((bannerList[i].point.endPoint&&(bannerList[i].point.current/bannerList[i].point.endPoint)||0).toFixed(2)*100+'%'):'100%'}"> </view> </view> <view class="desc"> <span - v-if="bannerList[i].point.end">{{bannerList[i].point.current || 0}}/{{bannerList[i].point.end}},升级还需{{bannerList[i].point.end-bannerList[i].point.current}}成长值</span> - <span v-else>成长值:{{bannerList[i].point.current || 0}}</span> + v-if="bannerList[i].point.endPoint&&(bannerList[i].point.current<=bannerList[i].point.endPoint)">{{bannerList[i].point.current || 0}}/{{bannerList[i].point.endPoint}},升级还需{{bannerList[i].point.endPoint - bannerList[i].point.current}}成长值</span> + <span v-else>当前成长值:{{bannerList[i].point.current || 0}}</span> </view> </view> </view> @@ -89,10 +96,17 @@ return { curIndex: 0, descIndex: 0, - isDescAnimating: false + isDescAnimating: false, + init: true } }, methods: { + + // swiperChangeIndex(index){ + // this.curIndex = index || 0 + // this.init = true + // this.$forceUpdate() + // }, swiperChange(e) { const that = this this.curIndex = e.mp.detail.current @@ -101,6 +115,7 @@ that.descIndex = e.mp.detail.current clearTimeout(timer) }, 150) + this.$emit('changeIndex',this.curIndex) }, animationfinish(e) { this.isDescAnimating = false @@ -133,6 +148,43 @@ z-index: 200; position: relative; z-index: 0; + + } + + .top-msg { + position: absolute; + top: 31px; + left: 45rpx; + background-color: #9DBEDF; + padding: 8rpx 14rpx; + color: #fff; + border-top-left-radius: 8rpx; + border-bottom-right-radius: 8rpx; + text-align: center; + line-height: 48rpx; + min-width: 132rpx; + z-index: 1; + font-size: 24rpx; + display: block; + } + + .top-msg.v1 { + background-color: #B6D6AF; + + } + + .top-msg.v2 { + background-color: #9DBEDF; + + } + + .top-msg.v3 { + background-color: #BF9653; + + } + + .top-msg.v4 { + background-color: #F1A582; } .icon-image { -- Gitblit v1.9.3