|
@@ -0,0 +1,141 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="Video">
|
|
|
+ <div class="videoBox" :class="{ none: show }">
|
|
|
+ <video
|
|
|
+ id="VideoDom"
|
|
|
+ src="../../assets/media/bacVideo.mp4"
|
|
|
+ muted
|
|
|
+ autoplay
|
|
|
+ ></video>
|
|
|
+ <div class="skip" :class="{ active: skip }" @click="show = true">
|
|
|
+ 跳过
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bacImg">
|
|
|
+ <div class="btnn" @click="toSwkk"> 进入展馆</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "Video",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ skip: false,
|
|
|
+ show: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ toSwkk(){
|
|
|
+ window.location.replace('/Swkk')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成(可以访问当前this实例)
|
|
|
+ created() {},
|
|
|
+ //生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
+ mounted() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.skip = true;
|
|
|
+ }, 3000);
|
|
|
+ let dom = document.querySelector("#VideoDom");
|
|
|
+ dom.addEventListener("ended", () => {
|
|
|
+ this.show = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.Video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ .videoBox {
|
|
|
+ background-color: #fff;
|
|
|
+ transition: opacity 0.5s;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 30;
|
|
|
+ }
|
|
|
+ video {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .skip {
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: opacity 0.3s;
|
|
|
+ cursor: pointer;
|
|
|
+ background-image: url("../../assets/img/skip.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 50px;
|
|
|
+ right: 50px;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #a50f0f;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+.bacImg {
|
|
|
+ transition: opacity 0.5s;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 29;
|
|
|
+ background-image: url("../../assets/img/HomeBac.jpg");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .btnn {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 70px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 302px;
|
|
|
+ height: 140px;
|
|
|
+ line-height: 190px;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #930909;
|
|
|
+ background-image: url("../../assets/img/HomeBtnn.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.none {
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+</style>
|