xuxueyang
2024-09-12 0b9141c17270d83b05d8b51139989644a4b84763
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,11 +19,12 @@
               <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">
@@ -39,7 +40,7 @@
                     <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>
                        <span v-else>当前成长值:{{bannerList[i].point.current || 0}}</span>
                     </view>
                  </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
@@ -149,8 +157,8 @@
            background-color: #9DBEDF;
            padding: 8rpx 14rpx;
            color: #fff;
            border-top-left-radius: 16rpx;
            border-bottom-right-radius: 16rpx;
            border-top-left-radius: 8rpx;
            border-bottom-right-radius: 8rpx;
            text-align: center;
            line-height: 48rpx;
            min-width: 132rpx;