156 lines
3.2 KiB
Vue
156 lines
3.2 KiB
Vue
<template>
|
|
<view>
|
|
<view class="guide-swiper" v-if="show">
|
|
<button class="guide-btn" size="default" @click="openApp">开启我的易货之旅</button>
|
|
<swiper @change="swiperChange">
|
|
<swiper-item v-for="(item, index) in swiperArray" :key="index">
|
|
<view class="swiper-content">
|
|
<view class="title">{{item.title}}</view>
|
|
<view class="sub-title">{{item.subTitle}}</view>
|
|
<view class="cover">
|
|
<image :src="item.coverUrl" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- 分页 -->
|
|
<view class="swiper-pages" v-if="swiperArray.length > 1">
|
|
<text
|
|
class="item"
|
|
v-for="(item, index) in swiperArray"
|
|
:key="index"
|
|
:class="{'show': index === swiperCurrent}"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
swiperCurrent: 0,
|
|
swiperArray : [{
|
|
title : "打造B2B2C",
|
|
subTitle: "数字通证商品易货贸易平台",
|
|
coverUrl: "../../static/dev/guide_cover_00.png"
|
|
},{
|
|
title : "打造为自由创业者",
|
|
subTitle: "提供数字商品供应链云仓平台",
|
|
coverUrl: "../../static/dev/guide_cover_01.png"
|
|
}]
|
|
};
|
|
},
|
|
mounted() {
|
|
// 检查是否直接进入首页
|
|
uni.showLoading()
|
|
let spread = this.$store.getters.getSpread || uni.getStorageSync('spread')
|
|
setTimeout(()=>{
|
|
uni.hideLoading()
|
|
if(!spread){
|
|
this.$Router.pushTab({name: 'Equity'})
|
|
return
|
|
}
|
|
// 此处请求轮播屏数据
|
|
this.show = true
|
|
}, 500)
|
|
},
|
|
methods:{
|
|
swiperChange(e){
|
|
this.swiperCurrent = e.detail.current
|
|
},
|
|
// 进入首页
|
|
openApp(){
|
|
this.$store.commit('setSpread', false)
|
|
this.$Router.pushTab({name: 'Equity'})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.guide-swiper{
|
|
background: white;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
swiper{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
.swiper-content{
|
|
text-align: center;
|
|
height: 100%;
|
|
padding-bottom: 27%;
|
|
box-sizing: border-box;
|
|
@extend .vertical;
|
|
.title{
|
|
font-weight: bold;
|
|
font-size: 50rpx;
|
|
color: $text-color;
|
|
padding: $padding 0;
|
|
}
|
|
.sub-title{
|
|
font-size: $title-size-m;
|
|
color: $text-gray;
|
|
}
|
|
.cover{
|
|
margin-top: $margin * 3;
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 68%;
|
|
padding-top: 68%;
|
|
image{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 分页信息
|
|
.swiper-pages{
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 27vh;
|
|
text-align: center;
|
|
.item{
|
|
display: inline-block;
|
|
background: $text-gray-m;
|
|
height: 10rpx;
|
|
width: 10rpx;
|
|
margin: 0 8rpx;
|
|
&.show{
|
|
background: $text-price;
|
|
width: 20rpx;
|
|
transition: all .4s;
|
|
}
|
|
}
|
|
}
|
|
// 按钮
|
|
.guide-btn[size="default"]{
|
|
position: fixed;
|
|
bottom: 12vh;
|
|
left: 10vw;
|
|
width: 80vw;
|
|
background: $text-price;
|
|
border-radius: 0;
|
|
color: white;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
padding: 0;
|
|
font-size: 32rpx;
|
|
z-index: 9;
|
|
&::after{
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|