1

src/views/Home/homePage.vue

@@ -5,7 +5,8 @@
     :style="{ backgroundImage: `url(${getSceneImg()})` }"
   >
     <div class="baiyun">
-      <img src="@/assets/images/home/baiyun.png" alt="">
+      <img class="baiyun2" src="@/assets/images/home/baiyun2.png" alt="" />
+      <img class="baiyun4" src="@/assets/images/home/baiyun4.png" alt="" />
     </div>
     <!-- :style="{ 'width': state == 'product' ? '100%' : '' }" -->
     <div class="left-box">
@@ -39,6 +40,7 @@
           <!-- 简介 -->
           <div
             class="list-item"
+            style="animation-duration: 3s"
             @click="
               () => {
                 state = 'info';
@@ -65,6 +67,7 @@
           <!-- 全景 -->
           <div
             class="list-item"
+            style="animation-duration: 3.5s"
             @click="
               () => {
                 (state = 'full'), (currentV = dataAll.full.content[0]);
@@ -91,6 +94,7 @@
           <!-- 展馆 -->
           <div
             class="list-item"
+            style="animation-duration: 4s"
             @click="
               () => {
                 state = 'scene';
@@ -124,9 +128,10 @@
           <!-- 馆藏 -->
           <div
             class="list-item"
+            style="animation-duration: 4.5s"
             @click="
               () => {
-                (state = 'product');
+                state = 'product';
               }
             "
           >
@@ -150,7 +155,7 @@
         </div>
       </div>
       <!-- 列表右侧 -->
-      <div class="babar-content">
+      <div class="babar-content" v-show="state != 'home'">
         <!-- 简介 -->
         <!-- introData.rtf || -->
         <div
@@ -274,7 +279,7 @@
     <!-- quanjing -->
     <div
       class="v-labels full"
-      :class="{ active: item.id == activequanjing, mxd: item.class == 'mxd', }"
+      :class="{ active: item.id == activequanjing, mxd: item.class == 'mxd' }"
       v-show="state == 'full'"
       v-for="item in dataAll.full.vLabels"
       @click="handlequanjing(item)"
@@ -282,10 +287,10 @@
       :style="{ top: item.top, right: item.right }"
     >
       <img
-          v-if="item.class == 'mxd'"
-          :src="item.id == activequanjing ? mxda : mxd"
-          alt=""
-        />
+        v-if="item.class == 'mxd'"
+        :src="item.id == activequanjing ? mxda : mxd"
+        alt=""
+      />
       <img v-else :src="item.id == activequanjing ? lable3a : lable3" alt="" />
       <div style="width: 100%">{{ item.name }}</div>
     </div>
@@ -392,11 +397,13 @@ export default {
     },
   },
   methods: {
-    handlequanjing(item){
+    handlequanjing(item) {
       this.activequanjing = item.id;
-      let ele = this.dataAll.full.content.find(items => items.name == item.name)
-      console.log(ele,'ele', item)
-      if(ele){
+      let ele = this.dataAll.full.content.find(
+        (items) => items.name == item.name
+      );
+      console.log(ele, "ele", item);
+      if (ele) {
         this.currentV = ele;
       }
     },
@@ -503,21 +510,21 @@ export default {
       this.$request.get("/show/intro/detail").then((res) => {
         this.introData = {
           ...res.data,
-          rtf: decodeURIComponent(res.data.rtf.replace(/%/g, '%25')),
+          rtf: decodeURIComponent(res.data.rtf.replace(/%/g, "%25")),
         };
         console.log(this.introData);
       });
       this.$request.get("/show/about/getList").then((res) => {
-        let introduction = []
-        res.data.map(ele => {
+        let introduction = [];
+        res.data.map((ele) => {
           introduction.push({
             ...ele,
-            rtf: unescape(ele.rtf)
-          })
+            rtf: unescape(ele.rtf),
+          });
         });
-        this.introduction = introduction
+        this.introduction = introduction;
         let item = (this.introduction && this.introduction[0]) || false;
-        console.log('rtfitem', item, introduction);
+        console.log("rtfitem", item, introduction);
         if (item) {
           this.changeType(item);
         }
@@ -542,7 +549,7 @@ export default {
       console.log("changeType", item);
       this.productActive = item.name;
       // this.productHtml = item.rtf?decodeURIComponent(item.rtf): item.text;
-      this.productHtml =unescape(item.rtf || item.text);
+      this.productHtml = unescape(item.rtf || item.text);
       let parent = document.getElementById("result-box-div");
       parent.scrollTop = 0;
     },
@@ -663,15 +670,29 @@ export default {
       width: 116px;
     }
   }
-  .baiyun{
+  .baiyun {
     position: absolute;
-    left: 100%;
-    animation: slideshow 10s linear infinite;
-    
+    left: -100%;
+    animation: slideshow 23s linear infinite;
+    .baiyun4 {
+      position: absolute;
+      width: 1400px;
+      top: 45%;
+      left: -56%;
+    }
+    .baiyun2 {
+      width: 1700px;
+      position: relative;
+      top: -300px;
+    }
   }
   @keyframes slideshow {
-    0%    { left: 100%; }
-    100%  { left: -100%; }
+    0% {
+      left: -100%;
+    }
+    100% {
+      left: 160%;
+    }
   }
   .left-box {
     width: 57%;
@@ -746,6 +767,7 @@ export default {
       position: absolute;
       top: 0;
       left: 0;
+      animation: bounceInLeft 1s 1 cubic-bezier(0.215, 0.61, 0.355, 1);
 
       .title {
         width: 100%;
@@ -768,6 +790,7 @@ export default {
         justify-content: center;
 
         &-item {
+          animation: numeInLeft 3s 1 0s cubic-bezier(0.215, 0.61, 0.355, 1);
           width: 100%;
           height: 10vh;
           display: flex;
@@ -837,13 +860,14 @@ export default {
       position: absolute;
       top: 0;
       right: 0;
+      animation: bounceopacity 6s 1 0s cubic-bezier(0.215, 0.61, 0.355, 1);
 
       .info-box {
         color: white;
         width: 80%;
         max-height: 90%;
         overflow: auto;
-        font-size: 1.2em;
+        font-size: 20px;
         letter-spacing: 1px;
         line-height: 2em;
         font-family: Source Han Sans SC, Source Han Sans SC;
@@ -855,7 +879,7 @@ export default {
 
       .full-box {
         width: 88%;
-        height: 60%;
+        height: 62%;
         .v-list {
           width: 100%;
           height: 30px;
@@ -889,7 +913,7 @@ export default {
           margin-top: 20px;
           width: 100%;
           max-height: calc(100% - 50px);
-          padding: 0 1.5%;
+          padding: 0 1.5% 10px 1.5%;
           overflow: auto;
           display: grid;
           grid-template-columns: repeat(2, 1fr);
@@ -1226,9 +1250,71 @@ export default {
   height: 100vh;
   overflow: hidden;
 }
+@keyframes bounceopacity {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes bounceInLeft {
+  0% {
+    opacity: 0;
+    transform: translate3d(-200px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0px, 0, 0);
+  }
+}
+@keyframes numeInLeft {
+  0% {
+    opacity: 0;
+    transform: translate3d(-500px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0px, 0, 0);
+  }
+}
 </style>
-<style>
-.media-wrap{
+<style lang="less">
+.media-wrap {
   text-align: center;
 }
+.v-labels {
+  animation: backInDown 1s 1 cubic-bezier(0.215, 0.61, 0.355, 1);
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+.active {
+  // animation: lableInLeft 1s 1 cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+@keyframes lableInLeft {
+  0% {
+    transform: perspective(1px) scale(1);
+  }
+  100% {
+    transform: perspective(1px) scale(1.05);
+  }
+}
+@keyframes backInDown {
+  0% {
+    opacity: 0.7;
+    -webkit-transform: translateY(-1200px) scale(0.7);
+    transform: translateY(-1200px) scale(0.7);
+  }
+  80% {
+    opacity: 0.7;
+    -webkit-transform: translateY(0) scale(0.7);
+    transform: translateY(0) scale(0.7);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
 </style>