<template>
|
<div class="banner-container">
|
<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" 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 -->
|
<!-- 3.当前展示为其他项（非第1和最后1项）时，bannerList当前项的前1项和后1项的justifyContent值分别为flex-end和flex-start，其余项值为center -->
|
<!-- 4.padding值也需要根据不同项设定不同值，但理同justifyContent -->
|
<div class="image-container" :style="{
|
transform: curIndex===i?'scale(' + scaleX + ',' + scaleY + ')':'scale(1,1)',
|
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>
|
<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.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.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.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>
|
</div>
|
</swiper-item>
|
</swiper>
|
<!-- <div class="desc-wrap" :class="[isDescAnimating?'hideAndShowDesc':'']">
|
<div class="title">{{bannerList[descIndex].title}}</div>
|
<div class="desc">{{bannerList[descIndex].description}}</div>
|
</div> -->
|
</div>
|
</template>
|
<script>
|
export default {
|
props: {
|
bannerList: {
|
type: Array,
|
default () {
|
return []
|
}
|
},
|
swiperConfig: {
|
type: Object,
|
default () {
|
return {
|
indicatorDots: true,
|
indicatorColor: 'rgba(255, 255, 255, .4)',
|
indicatorActiveColor: 'rgba(255, 255, 255, 1)',
|
autoplay: false,
|
interval: 3000,
|
duration: 300,
|
circular: true,
|
previousMargin: '58rpx',
|
nextMargin: '58rpx'
|
}
|
}
|
},
|
scaleX: {
|
type: String,
|
default: (634 / 550).toFixed(4)
|
},
|
scaleY: {
|
type: String,
|
default: (378 / 328).toFixed(4)
|
}
|
},
|
computed: {
|
listLen() {
|
return this.bannerList.length
|
}
|
},
|
data() {
|
return {
|
curIndex: 0,
|
descIndex: 0,
|
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
|
this.isDescAnimating = true
|
let timer = setTimeout(function() {
|
that.descIndex = e.mp.detail.current
|
clearTimeout(timer)
|
}, 150)
|
this.$emit('changeIndex',this.curIndex)
|
},
|
animationfinish(e) {
|
this.isDescAnimating = false
|
},
|
// getBannerDetail(index) {
|
// uni.showLoading({
|
// title: '将前往详情页面',
|
// duration: 2000,
|
// mask: true
|
// })
|
// }
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.banner-container {
|
width: 100vw;
|
height: 454rpx;
|
|
.image-container {
|
box-sizing: border-box;
|
width: 100%;
|
height: 100%;
|
display: flex;
|
position: relative;
|
|
.slide-image {
|
width: 550rpx;
|
height: 328rpx;
|
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 {
|
position: absolute;
|
right: 50rpx;
|
top: 26rpx;
|
z-index: 1;
|
background-size: 100% 100%;
|
width: 196rpx;
|
height: 254rpx;
|
}
|
|
.icon-image.v4 {
|
top: 10rpx;
|
}
|
|
.container {
|
position: absolute;
|
left: 90rpx;
|
right: 90rpx;
|
top: 90rpx;
|
bottom: 90rpx;
|
z-index: 1;
|
|
.title {
|
font-weight: 600;
|
font-size: 56rpx;
|
line-height: 80rpx;
|
text-align: left;
|
margin-top: 60rpx;
|
font-style: normal;
|
}
|
|
.line-component {
|
margin-top: 60rpx;
|
|
.desc {
|
font-size: 24rpx;
|
font-weight: 600;
|
font-size: 24rpx;
|
// color: #7D5809;
|
line-height: 34rpx;
|
text-align: left;
|
margin-top: 16rpx;
|
}
|
|
.line-bg {
|
width: 322rpx;
|
height: 12rpx;
|
// background: #A1B8CC;
|
border-radius: 6rpx;
|
position: relative;
|
|
.tip-loc {
|
width: 22rpx;
|
height: 12rpx;
|
// background: #D7E5F3;
|
border-radius: 6rpx;
|
position: absolute;
|
left: 0;
|
top: 0;
|
bottom: 0;
|
border-radius: 6rpx;
|
}
|
|
.tip {
|
min-width: 52rpx;
|
padding-left: 20rpx;
|
padding-right: 20rpx;
|
height: 28rpx;
|
font-size: 20rpx;
|
|
// background: #D7E5F3;
|
// color: #85A7E3;
|
line-height: 28rpx;
|
text-align: center;
|
font-style: normal;
|
position: absolute;
|
left: 0;
|
top: -40rpx;
|
}
|
}
|
|
}
|
}
|
|
.container.v1 {
|
.title {
|
color: #7CC662;
|
}
|
|
.line-component {
|
.desc {
|
color: #6DA05C;
|
}
|
|
.line-bg {
|
background: #AECD96;
|
|
.tip-loc {
|
background: #DEE9CF;
|
}
|
|
.tip {
|
background: #DEE9CF;
|
color: #6DA05C;
|
}
|
}
|
}
|
}
|
|
.container.v2 {
|
.title {
|
color: #7498E0;
|
}
|
|
.line-component {
|
.desc {
|
color: #809BB5;
|
}
|
|
.line-bg {
|
background: #A1B8CC;
|
|
.tip-loc {
|
background: #D7E5F3;
|
}
|
|
.tip {
|
background: #D7E5F3;
|
color: #809BB5;
|
}
|
}
|
}
|
}
|
|
.container.v3 {
|
.title {
|
color: #C47810;
|
}
|
|
.line-component {
|
.desc {
|
color: #7D5809;
|
}
|
|
.line-bg {
|
background: #D1B067;
|
|
.tip-loc {
|
background: #FFF0CE;
|
}
|
|
.tip {
|
background: #FFF0CE;
|
color: #7D5809;
|
}
|
}
|
}
|
}
|
|
.container.v4 {
|
.title {
|
color: #DD834E;
|
}
|
|
.line-component {
|
.desc {
|
color: #B66A2C;
|
}
|
|
.line-bg {
|
background: #D69975;
|
|
.tip-loc {
|
background: #FACAAE;
|
}
|
|
.tip {
|
background: #FACAAE;
|
color: #B66A2C;
|
}
|
}
|
}
|
}
|
}
|
|
.item-left {
|
justify-content: flex-end;
|
padding: 56rpx 26rpx 0 0;
|
}
|
|
.item-right {
|
justify-content: flex-start;
|
padding: 56rpx 0 0 26rpx;
|
}
|
|
.item-center {
|
justify-content: center;
|
padding: 56rpx 0 0 0;
|
}
|
|
.desc-wrap {
|
box-sizing: border-box;
|
width: 100%;
|
height: 98rpx;
|
padding: 24rpx 66rpx 0;
|
|
.title {
|
width: 100%;
|
height: 42rpx;
|
line-height: 42rpx;
|
color: #222222;
|
font-size: 30rpx;
|
font-family: 'PingFangTC-Regular';
|
font-weight: 600;
|
text-align: left;
|
}
|
|
.desc {
|
margin-top: 4rpx;
|
width: 100%;
|
height: 34rpx;
|
line-height: 34rpx;
|
color: #999999;
|
font-size: 24rpx;
|
font-family: 'PingFangTC-Regular';
|
text-align: left;
|
}
|
}
|
|
@keyframes descAnimation {
|
0% {
|
opacity: 1;
|
}
|
|
25% {
|
opacity: .5;
|
}
|
|
50% {
|
opacity: 0;
|
}
|
|
75% {
|
opacity: .5;
|
}
|
|
100% {
|
opacity: 1;
|
}
|
}
|
|
@-webkit-keyframes descAnimation {
|
0% {
|
opacity: 1;
|
}
|
|
25% {
|
opacity: .5;
|
}
|
|
50% {
|
opacity: 0;
|
}
|
|
75% {
|
opacity: .5;
|
}
|
|
100% {
|
opacity: 1;
|
}
|
}
|
|
.hideAndShowDesc {
|
animation: descAnimation .3s ease 1;
|
-webkit-animation: descAnimation .3s ease 1;
|
}
|
}
|
</style>
|
