- components/splash.vue
<div id="splash">
<img src="@/img/main.jpg" alt="">
</div>
1
2
3
2
3
#splash{
position: fixed;
top: 0;
left: 0;
width :100%;
height :100%;
opacity :1;
transition: opacity .3s ease;
box-sizing: border-box;
&.fade-enter,&.fade-leave-to{
opacity :0;
}
img{
width: 100%;
height: 100%;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- App.vue
<template>
<div id="app">
<transition name="fade">
<Splash v-if="splash"></Splash>
</transition>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script>
import Splash from './components/splash.vue';
export default {
components: {
Splash,
},
data() {
return {
splash: false,
};
},
created() {
// 从企业微信进入 判断路由是否是首页
const url = window.location.href;
const str = url.split('/')[4];
if (str.indexOf('?') === 0 || !str) {
this.splash = true;
}
},
watch: {
'$route.path': function (newVal, oldVal) {
this.splash = newVal === '/';
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
- index.vue 启动页
<div class="box">
<div class="tiaoguo" v-show="timeShow" @click="finish">
<van-count-down :time="time" format="跳过(ss)" @finish="finish"></van-count-down>
</div>
</div>
1
2
3
4
5
2
3
4
5
<script>
import { noBack } from '../../utils';
export default {
name: 'SilentLogin',
data() {
return {
isOpenLoginage: '', // 是否启用登录页 0不启用 1启用
time: 4000,
timeShow: false,
};
},
mounted() {
// 禁止页面后退
noBack();
},
methods: {
finish() {
this.isOpenLoginage === '0' ? this.Code() : this.$router.replace({ name: 'login' });
},
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.tiaoguo {
padding: vw(3) vw(10);
border: 1px solid #f4f4f4;
border-radius: vw(20);
position: absolute;
bottom: vw(100);
right: vw(10);
z-index: 999;
.van-count-down {
color: #999;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13