|
|
<template>
|
|
|
<view class="container">
|
|
|
<image class="logo" :src="require('@/static/index-logo.png')"></image>
|
|
|
<image class="logo1" :src="require('@/static/index-logo1.png')"></image>
|
|
|
<image class="logo2" :src="require('@/static/index-logo2.png')"></image>
|
|
|
<view class="titlewrap">
|
|
|
<image class="title" :src="require('@/static/index-title.png')"></image>
|
|
|
<view class="title-progress">
|
|
|
<view class="progress-text">{{progressPercentage}}%</view>
|
|
|
|
|
|
<view class="progress-bar-container">
|
|
|
<view class="progress-bar" :style="{'width':progressPercentage+'%'}"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="support">
|
|
|
<view>
|
|
|
<p>技术支撑：江苏有线苏州分公司</p>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
progressPercentage: 0,
|
|
|
interval:null,
|
|
|
isShare:false,
|
|
|
}
|
|
|
},
|
|
|
async onLoad() {
|
|
|
// await this.$onLaunched;
|
|
|
this.start();
|
|
|
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
clearInterval(this.interval);
|
|
|
},
|
|
|
methods: {
|
|
|
start() {
|
|
|
this.interval = setInterval(() => {
|
|
|
this.isShare = uni.getStorageSync('tadk2_lifeData').vuex_share?true:false
|
|
|
const userInfo = uni.getStorageSync('tadk2_lifeData').vuex_user
|
|
|
// if(this.isShare){
|
|
|
if(this.progressPercentage<100){
|
|
|
this.progressPercentage++;
|
|
|
}else{
|
|
|
// return
|
|
|
clearInterval(this.interval);
|
|
|
if(userInfo && userInfo.mobile){
|
|
|
uni.navigateTo({
|
|
|
url:'/pages/map/map'
|
|
|
})
|
|
|
}else{
|
|
|
uni.navigateTo({
|
|
|
url:'/pages/login/login'
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
// }else{
|
|
|
// if(this.progressPercentage<99){
|
|
|
// this.progressPercentage++;
|
|
|
// }
|
|
|
// }
|
|
|
|
|
|
}, 60);
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.container {
|
|
|
height: 100vh;
|
|
|
width: 100vw;
|
|
|
background: #e1f1f2;
|
|
|
position: relative;
|
|
|
|
|
|
.logo {
|
|
|
width: 59rpx;
|
|
|
height: 106rpx;
|
|
|
position: absolute;
|
|
|
top: 35rpx;
|
|
|
left: 65rpx;
|
|
|
}
|
|
|
|
|
|
.logo1 {
|
|
|
width: 97rpx;
|
|
|
height: 86rpx;
|
|
|
position: absolute;
|
|
|
top: 45rpx;
|
|
|
left: 140rpx
|
|
|
}
|
|
|
.logo2 {
|
|
|
width: 189rpx;
|
|
|
height: 88rpx;
|
|
|
position: absolute;
|
|
|
top: 45rpx;
|
|
|
left: 250rpx
|
|
|
}
|
|
|
.titlewrap{
|
|
|
position: absolute;
|
|
|
top: 40%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
.title {
|
|
|
width: 633rpx;
|
|
|
height: 498rpx;
|
|
|
}
|
|
|
.title-progress{
|
|
|
margin-top:30rpx;
|
|
|
.progress-text{
|
|
|
text-align: center;
|
|
|
color:#156e68;
|
|
|
font-size: 60rpx;
|
|
|
margin-bottom:20rpx
|
|
|
}
|
|
|
.progress-bar-container {
|
|
|
width: 90%;
|
|
|
height: 55rpx;
|
|
|
background-color: #f7f1e1;
|
|
|
overflow: hidden;
|
|
|
border:4rpx solid #156e68;
|
|
|
border-radius: 20rpx;
|
|
|
margin:0 auto;
|
|
|
font-size: 0;
|
|
|
}
|
|
|
|
|
|
.progress-bar {
|
|
|
height: 100%;
|
|
|
background-color: #156e68;
|
|
|
width:0;
|
|
|
border-radius:0 16rpx 16rpx 0;
|
|
|
// transition: width 0.5s;
|
|
|
// animation: width100 5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
|
|
}
|
|
|
// @keyframes width100 {
|
|
|
// 0% {
|
|
|
// width:0%
|
|
|
// }
|
|
|
// 30% {
|
|
|
// width:30%
|
|
|
// }
|
|
|
// 50%{
|
|
|
// width:30%
|
|
|
// }
|
|
|
// 70%{
|
|
|
// width:70%
|
|
|
// }
|
|
|
// 100% {
|
|
|
// width:100%
|
|
|
// }
|
|
|
// }
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
.support {
|
|
|
position: absolute;
|
|
|
bottom: 10rpx;
|
|
|
width: 100%;
|
|
|
font-size: 24rpx;
|
|
|
color: #333;
|
|
|
font-family: '宋体';
|
|
|
opacity: 1;
|
|
|
text-align: center;
|
|
|
z-index: 9;
|
|
|
}
|
|
|
}
|
|
|
</style> |
