完成第一个页面的播放视频

src/components/GuidePage.vue

@@ -3,18 +3,21 @@
     <!-- 点击播放视频出现的弹窗 -->
     <div class="video" v-if="isShow">
       <div class="bac">
-        <div class="one">
+        <div class="one" >
           <img src="../assets/images/page1.png" alt="" />
         </div>
       </div>
       <video src="../assets/video/once.mp4" autoplay muted loop controls></video>
       <div class="close" @click="play">
-        <img src="../assets/images/close.png" alt="">
+        <img src="../assets/images/close.png" alt="" >
       </div>
     </div>
-    <div class="paly" @click="play">
+    <div class="paly" @click="play" :class="{cative:change}">
       <img src="../assets/images/play.png" alt="" />
     </div>
+    <div class="paly" @click="play" :class="{cative:!change}">
+      <img src="../assets/images/play2.png" alt="" />
+    </div>
     <div class="bac">
       <div class="one">
         <img src="../assets/images/page1.png" alt="" />
@@ -77,6 +80,8 @@ export default {
   name: "GuidePage",
   data() {
     return {
+      // 控制播放按钮的转换
+      change:false,
       // 控制页面视频弹窗的显示
       isShow:false,
       titles: ["点击看展", "参加云展", "往届博博会"],
@@ -113,11 +118,14 @@ export default {
         ![].slice.call(event.target.classList).includes("img-qrcode")
       ) {
         this.isShowContact = false;
-
-        //TODO:测试下点击其他组件时能不能收回
       }
     },
   },
+  mounted(){
+   setInterval(() => {
+      this.change=!this.change
+    }, 3000);
+  }
 };
 </script>
 
@@ -149,6 +157,8 @@ export default {
   max-height: 300px;
 }
 .paly {
+  opacity: 1;
+  transition: all 2s;
   position: absolute;
   width: 223px;
   height: 223px;
@@ -156,6 +166,9 @@ export default {
   top: 50%;
   transform: translate(-50%, -50%);
 }
+.cative {
+  opacity: 0;
+}
 .paly img {
   width: 100%;
   height: 100%;
@@ -219,7 +232,7 @@ export default {
 #contactInfo {
   width: 100%;
   height: 100%;
-  opacity: 0.8;
+  opacity: 1;
 }
 #phone {
   position: absolute;

src/components/RenCulture.vue

@@ -6,42 +6,56 @@
     </div>
     <div class="conten">
       <div class="left">
-        <a href="https://4dkanzhan.4dkankan.com/LiangJiaHe/index.html" class="one">
+        <a
+          href="https://4dkanzhan.4dkankan.com/LiangJiaHe/index.html"
+          class="one"
+        >
           <img src="../assets/images/AllWall/hswh1.png" alt="" />
         </a>
-        <a href="http://www.4dmodel.com/SuperTwo/index.html?m=794_f" class="tow">
+        <a
+          href="http://www.4dmodel.com/SuperTwo/index.html?m=794_f"
+          class="tow"
+        >
           <img src="../assets/images/AllWall/hswh2.png" alt="" />
         </a>
+        <a
+          href="https://admin.4dmuseum.cn/showPC.html?m=118&amp;bigScene=&amp;novr="
+          class="one"
+        >
+          <img src="../assets/images/AllWall/hswh6.png" alt="" />
+        </a>
       </div>
       <div class="right">
-        <a href="http://www.4dmodel.com/SuperTwoCustom/shaoshan/index.html#/" class="tow">
+        <a
+          href="http://www.4dmodel.com/SuperTwoCustom/shaoshan/index.html#/"
+          class="tow"
+        >
           <img src="../assets/images/AllWall/hswh3.png" alt="" />
         </a>
-        <a href="http://www.4dmodel.com/SuperTwo/index.html?m=770_f" class="one">
+        <a
+          href="http://www.4dmodel.com/SuperTwo/index.html?m=770_f"
+          class="tow"
+        >
           <img src="../assets/images/AllWall/hswh4.png" alt="" />
         </a>
-      </div>
-    </div>
-        <div class="conten" style="margin: 0px auto 0;">
-      <div class="right">
-        <a href="http://www.4dmodel.com/SuperTwo/index.html?m=775_f" class="tow">
+        <a
+          href="http://www.4dmodel.com/SuperTwo/index.html?m=775_f"
+          class="tow"
+        >
           <img src="../assets/images/AllWall/hswh5.png" alt="" />
         </a>
-        <a href="https://admin.4dmuseum.cn/showPC.html?m=118&amp;bigScene=&amp;novr=" class="one">
-          <img src="../assets/images/AllWall/hswh6.png" alt="" />
-        </a>
-      </div>
-            <div class="left">
-        <a href="https://www.4dmodel.com/SuperTwoCustom/JinZhai/list.html" class="one">
-          <img src="../assets/images/AllWall/hswh7.png" alt="" />
-        </a>
-        <a href="http://www.4dmodel.com/SuperTwoCustom/SuperTwo710_711/index/home.html" class="tow">
+        <a
+          href="http://www.4dmodel.com/SuperTwoCustom/SuperTwo710_711/index/home.html"
+          class="tow"
+        >
           <img src="../assets/images/AllWall/hswh8.png" alt="" />
         </a>
       </div>
-
     </div>
-
+    <div class="conten" style="margin: 0px auto 0">
+      <div class="right"></div>
+      <div class="left"></div>
+    </div>
   </div>
 </template>
 
@@ -80,14 +94,13 @@ export default {
   width: 100vw;
 }
 .txt {
-    margin-top: 60px;
+  margin-top: 60px;
 }
 .conten {
   width: 90%;
   margin: 28px auto 0;
   display: flex;
   justify-content: space-around;
-  height: 448px;
 }
 .conten a {
   display: inline-block;
@@ -106,10 +119,10 @@ export default {
 }
 .one {
   width: 100%;
-  height: 274px;
+  height: 317px;
 }
 .tow {
   width: 100%;
-  height: 166px;
+  height: 210px;
 }
 </style>