修改动画，增加最后一页logo文字显示

src/views/home/index.vue

@@ -23,86 +23,21 @@
 
       <!-- 文字slogan -->
       <div id="slogan" class="slogan">
-        <img
-          id="slogan11"
-          class="slogan11"
-          src="/sk/skImage/word/幸.png"
-          alt=""
-        />
-        <img
-          id="slogan12"
-          class="slogan12"
-          src="/sk/skImage/word/福.png"
-          alt=""
-        />
-
-        <img
-          id="slogan21"
-          class="slogan21"
-          src="/sk/skImage/word/S.png"
-          alt=""
-        />
-        <img
-          id="slogan22"
-          class="slogan22"
-          src="/sk/skImage/word/U.png"
-          alt=""
-        />
-        <img
-          id="slogan23"
-          class="slogan23"
-          src="/sk/skImage/word/P.png"
-          alt=""
-        />
-        <img
-          id="slogan24"
-          class="slogan24"
-          src="/sk/skImage/word/e.png"
-          alt=""
-        />
-        <img
-          id="slogan25"
-          class="slogan25"
-          src="/sk/skImage/word/X.png"
-          alt=""
-        />
-
-        <img
-          id="slogan31"
-          class="slogan31"
-          src="/sk/skImage/word/P2.png"
-          alt=""
-        />
-        <img
-          id="slogan32"
-          class="slogan32"
-          src="/sk/skImage/word/a.png"
-          alt=""
-        />
-        <img
-          id="slogan33"
-          class="slogan33"
-          src="/sk/skImage/word/e2.png"
-          alt=""
-        />
-        <img
-          id="slogan34"
-          class="slogan34"
-          src="/sk/skImage/word/-.png"
-          alt=""
-        />
-        <img
-          id="slogan35"
-          class="slogan35"
-          src="/sk/skImage/word/g.png"
-          alt=""
-        />
-        <img
-          id="slogan36"
-          class="slogan36"
-          src="/sk/skImage/word/i.png"
-          alt=""
-        />
+        <img id="slogan11" class="slogan11" src="/sk/skImage/word/幸.png" alt="" />
+        <img id="slogan12" class="slogan12" src="/sk/skImage/word/福.png" alt="" />
+
+        <img id="slogan21" class="slogan21" src="/sk/skImage/word/S.png" alt="" />
+        <img id="slogan22" class="slogan22" src="/sk/skImage/word/U.png" alt="" />
+        <img id="slogan23" class="slogan23" src="/sk/skImage/word/P.png" alt="" />
+        <img id="slogan24" class="slogan24" src="/sk/skImage/word/e.png" alt="" />
+        <img id="slogan25" class="slogan25" src="/sk/skImage/word/X.png" alt="" />
+
+        <img id="slogan31" class="slogan31" src="/sk/skImage/word/P2.png" alt="" />
+        <img id="slogan32" class="slogan32" src="/sk/skImage/word/a.png" alt="" />
+        <img id="slogan33" class="slogan33" src="/sk/skImage/word/e2.png" alt="" />
+        <img id="slogan34" class="slogan34" src="/sk/skImage/word/-.png" alt="" />
+        <img id="slogan35" class="slogan35" src="/sk/skImage/word/g.png" alt="" />
+        <img id="slogan36" class="slogan36" src="/sk/skImage/word/i.png" alt="" />
       </div>
 
       <img id="ani4" class="ani4" src="/sk/skImage/ani4.jpg" alt="" />
@@ -129,7 +64,11 @@
         </div>
       </div>
     </div>
-
+    <div id="aniThree" class="aniThree">
+      <div id="aniThree5" class="aniThree5"><img src="/sk/skImage/word/SK 1.png" alt=""></div>
+      <div id="aniThree6" class="aniThree6"><img src="/sk/skImage/word/text4.png" alt=""></div>
+    </div>
+    <!-- 
     <div id="aniThree" class="aniThree">
       <div id="logoLeft" class="logoLeft">
         <img src="/sk/skImage/EXPOlogo.jpg" alt="" />
@@ -141,7 +80,7 @@
       <div class="text" id="text">
         <img src="/sk/skImage/text.jpg" alt="" />
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -160,7 +99,7 @@ import {
 export default defineComponent({
   components: {},
   setup(props) {
-    const formatEnergyDate = function(type = 1) {
+    const formatEnergyDate = function (type = 1) {
       //三目运算符
       let dates = null;
       if (type == 2) {
@@ -191,7 +130,7 @@ export default defineComponent({
         hours + ":" + minutes,
       ];
     };
-    const getWeek = function() {
+    const getWeek = function () {
       let week = new Date().getDay();
       let str = "";
       if (week == 0) {
@@ -235,6 +174,8 @@ export default defineComponent({
       init() {
         let myVid = document.getElementById("video1");
         let aniThree = document.getElementById("aniThree");
+        let aniThree5 = document.getElementById("aniThree5");
+        let aniThree6 = document.getElementById("aniThree6");
         let logoLeft = document.getElementById("logoLeft");
         let logoRight = document.getElementById("logoRight");
         let line = document.getElementById("line");
@@ -269,7 +210,7 @@ export default defineComponent({
         myVid.controls = false;
 
         // 视频播放完成
-        $(myVid).bind("ended", function() {
+        $(myVid).bind("ended", function () {
           $(myVid).fadeOut();
 
           // 第2部分
@@ -305,35 +246,37 @@ export default defineComponent({
           /**
            * 删除第三部分的时候用此代码
            */
-          let time2 = setTimeout(() => {
-            clearTimeout(time2);
-            router.push({
-              path: "/weather",
-              query: { type: proxyData.type },
-            });
-            // 30000
-          }, 30000);
+          // let time2 = setTimeout(() => {
+          //   clearTimeout(time2);
+          //   router.push({
+          //     path: "/weather",
+          //     query: { type: proxyData.type },
+          //   });
+          //   // 30000
+          // }, 30000);
 
           /**
            * 需要第三个画面的时候
            */
-          // let timer = setTimeout(function () {
-          //   $(skSlogan).fadeOut();
-          //   // $(aniThree).show();
-          //   $(logoLeft).addClass("logoLeftAni");
-          //   $(logoRight).addClass("logoRightAni");
-          //   $(line).addClass("lineAni");
-          //   $(text).addClass("lineAni");
-          //   clearTimeout(timer);
-          //   let time2 = setTimeout(() => {
-          //     clearTimeout(time2);
-          //     router.push({
-          //       path: "/weather",
-          //       query: { type: proxyData.type },
-          //     });
-          //     // 30000
-          //   }, 30000);
-          // }, 30000);
+          let timer = setTimeout(function () {
+            $(skSlogan).fadeOut();
+            $(aniThree).show();
+            $(aniThree).addClass("aniThreeActive");
+            $(aniThree5).addClass("aniThreeActive5");
+            $(aniThree6).addClass("aniThreeActive6");
+            // $(logoLeft).addClass("logoLeftAni");
+            // $(logoRight).addClass("logoRightAni");
+            // $(line).addClass("lineAni");
+            // $(text).addClass("lineAni");
+            clearTimeout(timer);
+            let time2 = setTimeout(() => {
+              clearTimeout(time2);
+              router.push({
+                path: "/weather",
+                query: { type: proxyData.type },
+              });
+            }, 30000);
+          }, 30000);
         });
       },
       // 动态修改样式
@@ -343,23 +286,23 @@ export default defineComponent({
         if (ani1 && ani2) {
           ani2.style.top = ani1.offsetHeight - ani1.offsetHeight * 0.08 + "px";
         }
-        let line = document.getElementById("line");
-        let text = document.getElementById("text");
-        line.style.height = logoLeft.offsetHeight + "px";
-        text.style.top = logoLeft.offsetHeight + logoLeft.offsetTop + 20 + "px";
+        // let line = document.getElementById("line");
+        // let text = document.getElementById("text");
+        // line.style.height = logoLeft.offsetHeight + "px";
+        // text.style.top = logoLeft.offsetHeight + logoLeft.offsetTop + 20 + "px";
       },
       // 窗口变化的时候调整适配
       winChange() {
         window.addEventListener(
           "resize",
-          function() {
+          function () {
             proxyData.updateStyle();
           },
           false
         );
       },
     });
-    onBeforeUnmount(() => {});
+    onBeforeUnmount(() => { });
     onMounted(() => {
       let type = route.query.type;
       proxyData.type = type;
@@ -395,7 +338,7 @@ export default defineComponent({
 
 /* 第3部分动画 */
 .aniThree {
-  display: none; 
+  display: none;
   width: 100vw;
   height: 100vh;
   position: absolute;
@@ -404,6 +347,38 @@ export default defineComponent({
 .aniThreeActive {
   display: block;
 }
+.aniThree5 {
+  opacity: 0;
+  padding-left: 100px;
+  margin-top: 330px;
+  margin-bottom: 60px;
+}
+.aniThreeActive5 {
+  animation: aniThreeActive5 1.5s ease-in-out 0.1s forwards;
+}
+@keyframes aniThreeActive5 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.aniThree6 {
+  opacity: 0;
+}
+.aniThreeActive6 {
+  animation: aniThreeActive6 1.5s ease-in-out 0.9s forwards;
+}
+@keyframes aniThreeActive6 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 
 .logoLeft {
   top: 20vh;

src/views/home/tiantan.vue

@@ -138,8 +138,11 @@
         </div>
       </div>
     </div>
-
     <div id="aniThree" class="aniThree">
+      <div id="aniThree5" class="aniThree5"><img src="/sk/skImage/word/SK 1.png" alt=""></div>
+      <div id="aniThree6" class="aniThree6"><img src="/sk/skImage/word/text4.png" alt=""></div>
+    </div>
+    <!-- <div id="aniThree" class="aniThree">
       <div id="logoLeft" class="logoLeft">
         <img src="/sk/skImage/EXPOlogo.jpg" alt="" />
       </div>
@@ -150,7 +153,7 @@
       <div class="text" id="text">
         <img src="/sk/skImage/text.jpg" alt="" />
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
   
@@ -233,6 +236,8 @@ export default defineComponent({
       init() {
         let myVid = document.getElementById("video1");
         let aniThree = document.getElementById("aniThree");
+        let aniThree5 = document.getElementById("aniThree5");
+        let aniThree6 = document.getElementById("aniThree6");
         let logoLeft = document.getElementById("logoLeft");
         let logoRight = document.getElementById("logoRight");
         let line = document.getElementById("line");
@@ -329,14 +334,33 @@ export default defineComponent({
           /**
            * 删除第三部分的时候用此代码
            */
-          let time2 = setTimeout(() => {
-            clearTimeout(time2);
-            console.log("/weather" + "?type=" + type);
-            router.push({
-              path: "/weather",
-              query: { type: proxyData.type },
-            });
-          }, 30000);
+          // let time2 = setTimeout(() => {
+          //   clearTimeout(time2);
+          //   console.log("/weather" + "?type=" + type);
+          //   router.push({
+          //     path: "/weather",
+          //     query: { type: proxyData.type },
+          //   });
+          // }, 30000);
+          let timer = setTimeout(function () {
+            $(skSlogan).fadeOut();
+            $(aniThree).show();
+            $(aniThree).addClass("aniThreeActive");
+            $(aniThree5).addClass("aniThreeActive5");
+            $(aniThree6).addClass("aniThreeActive6");
+            // $(logoLeft).addClass("logoLeftAni");
+            // $(logoRight).addClass("logoRightAni");
+            // $(line).addClass("lineAni");
+            // $(text).addClass("lineAni");
+            clearTimeout(timer);
+            let time2 = setTimeout(() => {
+              clearTimeout(time2);
+              router.push({
+                path: "/weather",
+                query: { type: proxyData.type },
+              });
+            }, 30000);
+          }, 15000);
         });
       },
       // 动态修改样式
@@ -346,10 +370,10 @@ export default defineComponent({
         if (ani1 && ani2) {
           ani2.style.top = ani1.offsetHeight - ani1.offsetHeight * 0.014 + "px";
         }
-        let line = document.getElementById("line");
-        let text = document.getElementById("text");
-        line.style.height = logoLeft.offsetHeight + "px";
-        text.style.top = logoLeft.offsetHeight + logoLeft.offsetTop + 20 + "px";
+        // let line = document.getElementById("line");
+        // let text = document.getElementById("text");
+        // line.style.height = logoLeft.offsetHeight + "px";
+        // text.style.top = logoLeft.offsetHeight + logoLeft.offsetTop + 20 + "px";
       },
       // 窗口变化的时候调整适配
       winChange() {
@@ -402,10 +426,43 @@ export default defineComponent({
   width: 100vw;
   height: 100vh;
   position: absolute;
+  text-align:center;
 }
 .aniThreeActive {
   display: block;
 }
+.aniThree5 {
+  opacity: 0;
+  padding-left: 100px;
+  margin-top: 330px;
+  margin-bottom: 60px;
+}
+.aniThreeActive5 {
+  animation: aniThreeActive5 1.5s ease-in-out 0.1s forwards;
+}
+@keyframes aniThreeActive5 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.aniThree6 {
+  opacity: 0;
+}
+.aniThreeActive6 {
+  animation: aniThreeActive6 1.5s ease-in-out 0.9s forwards;
+}
+@keyframes aniThreeActive6 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 
 .logoLeft {
   top: 20vh;