63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
<template>
|
|
<view>
|
|
<swiper class="swiper-guide" :indicator-dots="true" indicator-color="rgba(255,255,255,.3)" indicator-active-color="#FFF" @change="swiperChange">
|
|
<swiper-item v-for="(item, index) in urls" :key="index">
|
|
<view class="swiper-item">
|
|
<image :src="item.cover" mode="aspectFill"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<button class="guide-btn" v-if="current === (urls.length - 1)" type="default" @click="$Router.replaceAll({name: 'Index'})">立即开启</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { guide } from '@/apis/interfaces/guide'
|
|
export default {
|
|
data() {
|
|
return {
|
|
urls : [],
|
|
current : 0
|
|
};
|
|
},
|
|
created() {
|
|
guide().then(res=> {
|
|
this.urls = res
|
|
})
|
|
},
|
|
methods:{
|
|
swiperChange(e){
|
|
this.current = e.detail.current
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.swiper-guide{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: #1f1922;
|
|
.swiper-item{
|
|
image{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.guide-btn{
|
|
position: fixed;
|
|
bottom: 10vh;
|
|
left: 10vw;
|
|
right: 10vw;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
background-color: #774ffd;
|
|
color: white;
|
|
border: none;
|
|
}
|
|
</style>
|