149 lines
2.9 KiB
Vue
149 lines
2.9 KiB
Vue
<template>
|
||
<view v-if="show">
|
||
<swiper class="guide_pages_swiper" indicator-dots="true" indicator-color="#d1d1d1" indicator-active-color="#54a966">
|
||
<swiper-item>
|
||
<view class="guide_pages_bg1">
|
||
疯子读书，
|
||
<br>
|
||
让阅读无处不在
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<view class="guide_pages_bg2">
|
||
疯子读书，
|
||
<br>
|
||
古今一统，中西互参
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<view class="guide_pages_bg3">
|
||
疯子读书，
|
||
<br>
|
||
和光同尘，普惠人间
|
||
</view>
|
||
<button v-if="screenHeight > 667" class="guide_pages_close close_1624" @click="onClose">开始使用</button>
|
||
<button v-else class="guide_pages_close close_btj" @click="onClose">开始使用</button>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapMutations
|
||
} from 'vuex';
|
||
export default {
|
||
data() {
|
||
return {
|
||
screenHeight: 667,
|
||
show: false
|
||
};
|
||
},
|
||
created() {
|
||
if (uni.getStorageSync('guidePages') != 2) {
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
this.screenHeight = systemInfo.screenHeight;
|
||
this.show = true;
|
||
}else{
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
onClose() {
|
||
uni.setStorageSync('guidePages', 2);
|
||
this.show = false;
|
||
uni.navigateTo({
|
||
url: '/pages/user/login'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.guide_pages_swiper {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: #000;
|
||
z-index: 10000;
|
||
|
||
image {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
}
|
||
|
||
.guide_pages_bg1 {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: url("@/static/icon/e_0ban_1.jpg") no-repeat bottom center;
|
||
background-size: cover;
|
||
// background-color: #4CD964;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #000;
|
||
font-size: 60rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.guide_pages_bg2 {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: url("@/static/icon/e_0ban_2.jpg") no-repeat;
|
||
background-size: cover;
|
||
// background-color: #007AFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #000;
|
||
font-size: 60rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.guide_pages_bg3 {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: url("@/static/icon/e_0ban_3.jpg") no-repeat;
|
||
background-size: cover;
|
||
// background-color: #EA552D;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #000;
|
||
font-size: 60rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.guide_pages_close {
|
||
border: 2rpx solid #000;
|
||
color: #000;
|
||
line-height: 68rpx;
|
||
height: 68rpx;
|
||
}
|
||
|
||
.close_btj {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 290rpx;
|
||
height: 68rpx;
|
||
transform: translateX(-50%) translateY(438rpx);
|
||
background-color: transparent;
|
||
}
|
||
|
||
.close_1624 {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 290rpx;
|
||
height: 68rpx;
|
||
background-color: transparent;
|
||
transform: translateX(-50%) translateY(412rpx);
|
||
}
|
||
}
|
||
</style>
|