update scss

xuxueyang

2024-09-10 5aefbc23367e65accd61b8f2f9686822a8767511

 components/banner3d/banner3d.vue

@@ -5,6 +5,7 @@
         :autoplay="swiperConfig.autoplay" :interval="swiperConfig.interval" :duration="swiperConfig.duration"
         :circular="swiperConfig.circular" :previous-margin="swiperConfig.previousMargin"
         :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,7 +16,12 @@
              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.bg" class="slide-image">

               </image>
               <view v-if="item.currentMsg" class="top-msg" :class="[`v${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}`]">
                  <view class="title">{{bannerList[i].title}}</view>
@@ -133,6 +139,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: 16rpx;
            border-bottom-right-radius: 16rpx;
            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 {