From d39644872fa6f9499fc2c1651bced631a9e96b19 Mon Sep 17 00:00:00 2001
From: 陶杰 <1378534974@qq.com>
Date: 星期一, 23 十二月 2024 09:48:53 +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