陶杰
2025-01-13 efa9bfe98ba906e4c9b8f49c89f5da162a46bb0f
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 {