陶杰
2024-12-23 d39644872fa6f9499fc2c1651bced631a9e96b19
components/banner3d/banner3d.vue
@@ -3,9 +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 -->
@@ -19,26 +19,27 @@
               <image :src="item.bg" class="slide-image">
               </image>
               <view v-if="item.currentMsg" class="top-msg" :class="[`v${i+1}`]">
               <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${i+1}`]" mode="aspectFit"></image>
               <view class="container" :class="[`v${i+1}`]">
               <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>
                           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>
@@ -95,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
@@ -107,6 +115,7 @@
               that.descIndex = e.mp.detail.current
               clearTimeout(timer)
            }, 150)
            this.$emit('changeIndex',this.curIndex)
         },
         animationfinish(e) {
            this.isDescAnimating = false