121 lines
2.8 KiB
Vue
121 lines
2.8 KiB
Vue
<!-- 引导页组件 -->
|
||
<template>
|
||
<view class="codeElfGuide">
|
||
<swiper
|
||
class="swiperView"
|
||
indicator-color="rgba(255, 255, 255, .5)"
|
||
indicator-active-color="#fff"
|
||
:indicator-dots="dotsShow"
|
||
:autoplay="autoplay"
|
||
:duration="duration"
|
||
@change="swiperChange">
|
||
<template v-for="item in guideList">
|
||
<swiper-item :key="item.id">
|
||
<view class="swiperItemView" :style="{ 'background-color': item.bg }">
|
||
<image class="imgView" :src="item.img" mode="aspectFit"></image>
|
||
<view class="titleView">
|
||
<view class="title">{{ item.title }}</view>
|
||
<view class="dec">{{ item.dec }}</view>
|
||
</view>
|
||
<view v-if="(item.id + 1) === guideList.length" class="actBtnView">
|
||
<virtual-button style="width: 300rpx;" btnHeight="80" type="376AF5" shape="round" @click="launchFlag">
|
||
<view style="font-size: 28rpx;">{{ experience }}</view>
|
||
</virtual-button>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</template>
|
||
</swiper>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'CodeElfGuide',
|
||
data() {
|
||
return {
|
||
autoplay: false,
|
||
duration: 500,
|
||
dotsShow: true, // 指示点是否显示
|
||
experience: '立即体验',
|
||
guideList: [
|
||
{ id: 0, img: '/static/components/guidePages/2.png', bg: '#00022D', title: '专业行情机制', dec: '实时更新行业动态数据 及时把握行情趋势' },
|
||
{ id: 1, img: '/static/components/guidePages/3.1.png', bg: '#171C30', title: '账户安全模式', dec: '实时更新行业动态数据 及时把握行情趋势' },
|
||
{ id: 2, img: '/static/components/guidePages/1.png', bg: '#000000', title: '去中心化交易', dec: '实时更新行业动态数据 及时把握行情趋势' }
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
launchFlag: function(){
|
||
/**
|
||
* 向本地存储中设置launchFlag的值，即启动标识；
|
||
*/
|
||
uni.setStorage({
|
||
key: 'launchFlag',
|
||
data: true,
|
||
});
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
});
|
||
},
|
||
swiperChange (e) {
|
||
const _current = e.detail.current
|
||
if (_current === 2) {
|
||
this.dotsShow = false
|
||
} else {
|
||
this.dotsShow = true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.codeElfGuide,
|
||
.swiperView {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.swiperView {
|
||
// 覆盖样式
|
||
/deep/ .uni-swiper-dots.uni-swiper-dots-horizontal {
|
||
bottom: 90rpx;
|
||
}
|
||
|
||
.swiperItemView {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.imgView {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.titleView {
|
||
width: 100%;
|
||
position: absolute;
|
||
bottom: 360rpx;
|
||
left: 0;
|
||
text-align: center;
|
||
.title {
|
||
font-size: 48rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.dec {
|
||
margin-top: 30rpx;
|
||
font-size: 28rpx;
|
||
color: #CECECE;
|
||
}
|
||
}
|
||
|
||
.actBtnView {
|
||
width: 100%;
|
||
position: absolute;
|
||
bottom: 90rpx;
|
||
left: 0;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
</style>
|