四渡赤水增加动画

src/router/index.js

@@ -153,12 +153,12 @@ const routes = [
   {
     path: "/sdcs",
     name: "SDCS",
-    component: () => import("@/views/boutique/components/SDCS"),
+    component: () => import("@/views/boutique/components/sdcs"),
   },
   {
     path: "/jysg",
     name: "JYSG",
-    component: () => import("@/views/boutique/components/JYSG"),
+    component: () => import("@/views/boutique/components/jysg"),
   },
   {
     path: "/zggzsgwdzjlz",

src/views/boutique/components/SDCS.vue → src/views/boutique/components/sdcs/index.vue

 <template>
   <div class="sdcs">
     <div class="face-image">
-      <div class="top">
+      <div class="top wow animate__animated animate__fadeInDown">
         <img src="@/assets/imgs/boutique/sdcs/faceImage/layer1.png" />
       </div>
       <div class="layer2">
         <div class="wrapper">
-          <div class="center"></div>
-          <div class="right1">
+          <div class="center wow animate__animated animate__fadeInUp"></div>
+          <div class="right1 wow animate__animated animate__fadeInRight">
             <img src="@/assets/imgs/boutique/sdcs/faceImage/right1.png" />
           </div>
-          <div class="right2">
+          <div class="right2 wow animate__animated animate__fadeInRight">
             <img src="@/assets/imgs/boutique/sdcs/faceImage/right2.png" />
           </div>
-          <div class="left">
+          <div class="left wow animate__animated animate__fadeInLeft">
             <img src="@/assets/imgs/boutique/sdcs/faceImage/left1.png" />
           </div>
-          <div class="bottom"></div>
-          <div class="layer3">
+          <div class="bottom wow animate__animated animate__fadeInUp"></div>
+          <div class="layer3 wow animate__animated animate__fadeInDown">
             <div class="title">
               <img src="@/assets/imgs/boutique/sdcs/faceImage/title.png" />
             </div>
           </div>
           <div class="box">
-            <div class="titles">
+            <div class="titles wow animate__animated animate__fadeInUp">
               <div
-                class="item"
+                class="item wow animate__animated animate__fadeInUp"
                 v-for="(item, index) in unitsData[0].data"
                 :key="index"
               >
@@ -45,14 +45,14 @@
       </div>
     </div>
     <div class="units">
-      <div class="part1">
+      <div class="part1 wow animate__animated animate__fadeInUp">
         <div class="title">
           <img src="@/assets/imgs/boutique/sdcs/part1/title.png" />
         </div>
         <div class="intro">
           <div class="txt" v-html="unitsData[1].txt"></div>
         </div>
-        <div class="line-group">
+        <div class="line-group wow animate__animated animate__bounceInLeft">
           <div class="line"></div>
           <div class="units-title-group">
             <div class="container">
@@ -67,7 +67,7 @@
           </div>
         </div>
         <div class="content">
-          <div class="left-txt">
+          <div class="left-txt wow animate__animated animate__fadeInLeft">
             <div class="title" v-html="part1CurUnit.title"></div>
             <div class="intro" v-html="part1CurUnit.txt"></div>
           </div>
@@ -78,28 +78,33 @@
                 v-for="(item, index) in part1CurUnit.imgs"
                 :key="index"
               >
-                <div class="name">{{ item.name }}</div>
+                <div class="name wow animate__animated animate__fadeIn">
+                  {{ item.name }}
+                </div>
                 <img
-                  class="cr-img"
+                  class="cr-img wow animate__animated animate__fadeInRight"
                   :src="
                     require(`@/assets/imgs/boutique/sdcs/part1/${item.url}`)
                   "
                 />
-                <div class="line2" v-if="index == 0"></div>
-                <div class="line3" v-if="index == 1"></div>
+                <div
+                  class="line2 wow animate__animated animate__fadeInRight"
+                  v-if="index == 0"
+                ></div>
+                <div class="line3 animate__fadeInRight" v-if="index == 1"></div>
               </div>
             </div>
           </div>
         </div>
       </div>
       <div class="part2">
-        <div class="title">
+        <div class="title wow animate__animated animate__fadeInUp">
           <img src="@/assets/imgs/boutique/sdcs/part2/title.png" />
         </div>
-        <div class="intro">
+        <div class="intro wow animate__animated animate__fadeInUp">
           <div class="txt" v-html="unitsData[2].txt"></div>
         </div>
-        <div class="line-group">
+        <div class="line-group wow animate__animated animate__bounceInLeft">
           <div class="line"></div>
           <div class="units-title-group">
             <div class="container">
@@ -117,11 +122,14 @@
           </div>
         </div>
         <div class="content">
-          <div class="left-txt">
+          <div class="left-txt wow animate__animated animate__fadeInLeft">
             <div class="title" v-html="part2CurUnit.title"></div>
             <div class="intro" v-html="part2CurUnit.txt"></div>
           </div>
-          <div class="right-cr" v-if="part2CurUnit.imgs">
+          <div
+            class="right-cr wow animate__animated animate__fadeInRight"
+            v-if="part2CurUnit.imgs"
+          >
             <div class="cr-group">
               <div class="cr" v-for="(v, i) in part2CurUnit.imgs" :key="i">
                 <img
@@ -147,13 +155,13 @@
         </swiper> -->
       </div>
       <div class="part3">
-        <div class="title">
+        <div class="title wow animate__animated animate__fadeInDown">
           <img src="@/assets/imgs/boutique/sdcs/part3/title.png" />
         </div>
-        <div class="intro">
+        <div class="intro wow animate__animated animate__fadeInUp">
           <div class="txt" v-html="unitsData[2].txt"></div>
         </div>
-        <div class="line-group">
+        <div class="line-group wow animate__animated animate__bounceInRight">
           <div class="line"></div>
           <div class="units-title-group">
             <div class="container">
@@ -171,7 +179,10 @@
           </div>
         </div>
         <div class="content">
-          <div class="right-cr" v-if="part3CurUnit.imgs">
+          <div
+            class="right-cr wow animate__animated animate__fadeInLeft"
+            v-if="part3CurUnit.imgs"
+          >
             <div class="cr-group">
               <div
                 class="cr"
@@ -189,20 +200,20 @@
               <div class="line2"></div>
             </div>
           </div>
-          <div class="left-txt">
+          <div class="left-txt wow animate__animated animate__fadeInRight">
             <div class="title" v-html="part3CurUnit.title"></div>
             <div class="intro" v-html="part3CurUnit.txt"></div>
           </div>
         </div>
       </div>
       <div class="part4">
-        <div class="title">
+        <div class="title wow animate__animated animate__fadeInDown">
           <img src="@/assets/imgs/boutique/sdcs/part4/title.png" />
         </div>
-        <div class="intro">
+        <div class="intro wow animate__animated animate__fadeInUp">
           <div class="txt" v-html="unitsData[4].txt"></div>
         </div>
-        <div class="line-group">
+        <div class="line-group wow animate__animated animate__bounceInLeft">
           <div class="line"></div>
           <div class="units-title-group">
             <div class="container">
@@ -217,11 +228,14 @@
           </div>
         </div>
         <div class="content">
-          <div class="left-txt">
+          <div class="left-txt wow animate__animated animate__fadeInLeft">
             <div class="intro" v-html="part4CurUnit.txt"></div>
             <div class="title" v-html="part4CurUnit.title"></div>
           </div>
-          <div class="right-cr" v-if="part4CurUnit.imgs">
+          <div
+            class="right-cr wow animate__animated animate__fadeInRight"
+            v-if="part4CurUnit.imgs"
+          >
             <div class="cr-group">
               <div
                 class="cr"
@@ -243,10 +257,10 @@
         </div>
       </div>
       <div class="part5">
-        <div class="title">
+        <div class="title wow animate__animated animate__fadeInDown">
           <img src="@/assets/imgs/boutique/sdcs/part5/title.png" />
         </div>
-        <div class="intro">
+        <div class="intro wow animate__animated animate__fadeInUp">
           <div class="txt" v-html="unitsData[5].txt"></div>
         </div>
       </div>
@@ -258,13 +272,13 @@
             v-for="(item, index) in culturalRelic"
             :key="index"
           >
-            <div class="cr-img" v-for="(v, i) in item.imgs" :key="i">
+            <div class="cr-img  wow animate__animated animate__bounceInDown" v-for="(v, i) in item.imgs" :key="i">
               <img
                 :src="require(`@/assets/imgs/boutique/sdcs/culturalRelic/${v}`)"
                 alt=""
               />
             </div>
-            <div class="name">{{ item.name }}</div>
+            <div class="name  wow animate__animated animate__bounceInUp">{{ item.name }}</div>
           </div>
         </div>
       </div>
@@ -278,7 +292,7 @@
             <div class="text">详细介绍四渡赤水纪念馆</div>
             <div class="video-button">观看视频</div>
           </div>
-          <div class="center wow animate__animated animate__fadeIn">
+          <div class="center wow animate__animated animate__fadeInDown">
             <div class="img-container">
               <img src="@/assets/imgs/boutique/sdcs/vr/circle.png" alt="" />
             </div>
@@ -476,7 +490,7 @@ export default {
           top: 0;
           width: 100%;
           height: 360px;
-          background-image: url("@/assets/imgs/boutique/sdcs/faceImage/bottom.png");
+          // background-image: url("@/assets/imgs/boutique/sdcs/faceImage/bottom.png");
           background-size: 100% 100%;
           display: flex;
           justify-content: center;
@@ -537,7 +551,7 @@ export default {
 
   .units {
     background-image: url("@/assets/imgs/boutique/sdcs/bg.jpg");
-    height: 10693px;
+    height: 9600px;
     width: 100%;
     background-size: 100% 100%;
     padding-top: 600px;
@@ -1149,13 +1163,13 @@ export default {
       padding: 0 80px;
       & > .container {
         width: 100%;
-        height: 2064px;
-        background-image: url("@/assets/imgs/boutique/sdcs/culturalRelic/bg.png");
+        height: 1900px;
+        background-image: url("@/assets/imgs/boutique/sdcs/culturalRelic/bg1.png");
         background-size: 100% 100%;
         display: flex;
         & > .item {
           position: relative;
-          padding-top: 50%;
+          padding-top: 64%;
           margin-right: 55px;
           & > .cr-img {
             // width: 350px;
@@ -1169,7 +1183,7 @@ export default {
             }
           }
           &:nth-child(2n) {
-            padding-top: 40%;
+            padding-top: 50%;
           }
         }
         & > .cr-1,
@@ -1184,7 +1198,7 @@ export default {
             align-items: center;
             background: red;
             padding: 16px 0;
-            top: 32%;
+            top: 40%;
             font-size: 18px;
             right: 10%;
           }
@@ -1201,7 +1215,7 @@ export default {
             align-items: center;
             background: red;
             padding: 16px 0;
-            top: 24%;
+            top: 32%;
             font-size: 18px;
             left: 10%;
           }

src/views/boutique/index.vue

@@ -18,8 +18,8 @@
 import SMGZ from "./components/SMGZ"; //神秘贵州
 import YLGDYW from "./components/YLGDYW"; //夜郎国的疑问
 import JYYCC from "./components/jyycc"; //技艺与传承
-import SDCS from "./components/SDCS"; //四渡赤水
-import JYSG from "./components/JYSG"; //教育史馆
+import SDCS from "./components/sdcs"; //四渡赤水
+import JYSG from "./components/jysg"; //教育史馆
 import LZST from "./components/lzsg"; //六枝生态
 import LGGZSGW from "./components/zggzsgwdzjlz"; //六枝生态
 export default {