|
|
@@ -1,6 +1,16 @@
|
|
|
<template>
|
|
|
- <div class='Home' @click="$router.push('/layout/construct')">
|
|
|
- 首页，任意点击跳到Layout
|
|
|
+ <div class='Home'>
|
|
|
+ <img class="logo" src="../../assets/img/home/logo.png" alt="">
|
|
|
+ <img class="btn" @click="videoShow = true" src="../../assets/img/home/btn.png" alt="">
|
|
|
+ <div class="ifrBox">
|
|
|
+ <iframe src="http://zzbbh.4dage.com/SWKK/show.html?id=WK1592095910366638080" frameborder="0"></iframe>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频盒子 -->
|
|
|
+ <div class="videoBox" :class="{ videoAc: videoShow }">
|
|
|
+ <video muted src="../../assets/media/home.mp4"></video>
|
|
|
+ <div v-show="videoBtnShow" class="videoBtn" @click="$router.push('/layout/construct')">点击跳过视频</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -11,11 +21,25 @@ export default {
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ videoShow: false,
|
|
|
+ videoBtnShow: false
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
- watch: {},
|
|
|
+ watch: {
|
|
|
+ videoShow(val) {
|
|
|
+ if (val) {
|
|
|
+ let dom = document.querySelector('video')
|
|
|
+ dom.play()
|
|
|
+ dom.addEventListener('ended', () => { //结束
|
|
|
+ this.$router.push('/layout/construct')
|
|
|
+ }, false);
|
|
|
+ setTimeout(() => {
|
|
|
+ this.videoBtnShow = true
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
|
|
|
},
|
|
|
@@ -35,9 +59,83 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
- .Home{
|
|
|
+.Home {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .ifrBox {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ width: 300px;
|
|
|
+ top: 60px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 40px;
|
|
|
+ width: 200px;
|
|
|
+ z-index: 2;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .videoBox {
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: opacity .3s;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 3;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- background-color: aquamarine;
|
|
|
+
|
|
|
+ video {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .videoBtn {
|
|
|
+ background-color: rgba(255, 89, 89, .6);
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 40px;
|
|
|
+ width: 200px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 24px;
|
|
|
+ z-index: 2;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .videoAc {
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: auto;
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
任一存
