教育史馆增加动画

src/views/boutique/components/JYSG.vue

 <template>
   <div class="gysg">
     <div class="part1">
-      <div class="title-box">
-        <div class="left">
+      <div class="title-box wow animate__animated animate__fadeInUp">
+        <div class="left wow animate__animated animate__fadeInLeft">
           <img src="@/assets/imgs/boutique/jysg/part1/left.png" alt="" />
         </div>
-        <div class="title">
+        <div class="title wow animate__animated animate__fadeIn">
           <img src="@/assets/imgs/boutique/jysg/part1/title.png" alt="" />
         </div>
-        <div class="right">
+        <div class="right wow animate__animated animate__fadeInRight">
           <img src="@/assets/imgs/boutique/jysg/part1/right.png" alt="" />
         </div>
       </div>
@@ -17,7 +17,7 @@
       </div>
     </div>
     <div class="part2">
-      <div class="hall1">
+      <div class="hall1 wow animate__animated animate__fadeInLeft">
         <div class="img-1">
           <img src="@/assets/imgs/boutique/jysg/part2/1.png" alt="" />
         </div>
@@ -25,7 +25,7 @@
           <img src="@/assets/imgs/boutique/jysg/part2/t-1.png" alt="" />
         </div>
       </div>
-      <div class="hall2">
+      <div class="hall2 wow animate__animated animate__fadeInRight">
         <div class="img-2-intro">
           <div class="content">
             左边为贵州教育史发展“大事记”时间轴，右边为“前言”，正前方为“育人兴邦”主题浮雕
@@ -41,7 +41,7 @@
           <img src="@/assets/imgs/boutique/jysg/part2/2.png" alt="" />
         </div>
       </div>
-      <div class="hall3">
+      <div class="hall3 wow animate__animated animate__fadeInLeft">
         <div class="img-3-intro">
           <div class="wt">
             <img src="@/assets/imgs/boutique/jysg/part2/weiting.png" alt="" />
@@ -61,11 +61,11 @@
 
       <div class="part3">
         <div class="tab-line">
-          <div class="zt">
+          <div class="zt wow animate__animated animate__bounceInLeft">
             <img src="@/assets/imgs/boutique/jysg/part3/zhengting.png" alt="" />
           </div>
           <div class="part3-content">
-            <div class="line"></div>
+            <div class="line wow animate__animated animate__bounceInLeft"></div>
             <div class="unit-group">
               <div
                 class="unit-item"
@@ -74,10 +74,10 @@
                 @mouseleave="handleLeaveUnit"
                 @click="handleClickUnit(item)"
                 :key="index"
-                :style="{ left: index * 200 + 'px' }"
+                :style="{ left: index * 260 + 'px' }"
               >
                 <div
-                  class="circle"
+                  class="circle wow animate__animated animate__bounceInLeft"
                   :style="{
                     backgroundImage: `url(${
                       curUnitItem == item ? circleS : circle
@@ -89,8 +89,15 @@
                     name: true,
                     active: curUnitItem.name == item.name,
                   }"
+                  class="wow animate__animated animate__bounceInUp"
                 >
-                  {{ item.name }}
+                  <!-- {{ item.name }} -->
+                  <img
+                    :src="
+                      require(`@/assets/imgs/boutique/jysg/part3/${item.img}`)
+                    "
+                    alt=""
+                  />
                 </div>
               </div>
             </div>
@@ -99,51 +106,89 @@
       </div>
       <div class="unit-content">
         <div class="title-container">
-          <div class="unit-title">
-            {{ curUnitItem.name }}
+          <div class="unit-title wow animate__animated animate__fadeInLeft">
+            <!-- {{ curUnitItem.name }} -->
+            <img
+              :src="
+                require(`@/assets/imgs/boutique/jysg/part3/${curUnitItem.img}`)
+              "
+              alt=""
+            />
           </div>
-          <div class="unit-intro">
+          <div class="unit-intro wow animate__animated animate__fadeInRight">
             {{ curUnitItem.intro }}
           </div>
         </div>
         <div class="cr">
-          <div class="cr-1">
+          <div class="cr-1 wow animate__animated animate__fadeInLeft">
             <img src="@/assets/imgs/boutique/jysg/part3/cr-1.png" alt="" />
           </div>
-          <div class="cr-2">
+          <div class="cr-2 wow animate__animated animate__fadeInRight">
             <img src="@/assets/imgs/boutique/jysg/part3/cr-2.png" alt="" />
           </div>
-          <div class="cr-3">
+          <div class="cr-3 wow animate__animated animate__fadeInLeft">
             <img src="@/assets/imgs/boutique/jysg/part3/cr-3.png" alt="" />
           </div>
         </div>
       </div>
 
       <div class="part4">
-        <div class="title">
+        <div class="title wow animate__animated animate__fadeInUp">
           <img src="@/assets/imgs/boutique/jysg/part4/title.png" alt="" />
         </div>
         <div class="imgs-group">
           <div class="item" v-for="(item, index) in imgs" :key="index">
-            <div class="img">
+            <div v-if="index == 0">
+              <div class="img wow animate__animated animate__fadeInLeft">
                 <img
-                :src="require(`@/assets/imgs/boutique/jysg/part4/${item.img}`)"
+                  :src="
+                    require(`@/assets/imgs/boutique/jysg/part4/${item.img}`)
+                  "
                   alt=""
                 />
               </div>
-            <div class="name">
+              <div class="name wow animate__animated animate__fadeInLeft">
                 {{ item.name }}
               </div>
             </div>
+            <div v-if="index == 1">
+              <div class="img wow animate__animated animate__fadeInUp">
+                <img
+                  :src="
+                    require(`@/assets/imgs/boutique/jysg/part4/${item.img}`)
+                  "
+                  alt=""
+                />
+              </div>
+              <div class="name wow animate__animated animate__fadeInUp">
+                {{ item.name }}
+              </div>
+            </div>
+            <div v-if="index == 2">
+              <div class="img wow animate__animated animate__fadeInRight">
+                <img
+                  :src="
+                    require(`@/assets/imgs/boutique/jysg/part4/${item.img}`)
+                  "
+                  alt=""
+                />
+              </div>
+              <div class="name wow animate__animated animate__fadeInRight">
+                {{ item.name }}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 
-      <div class="part5">
-        <div class="title">
+      <div class="part5 ">
+        <div class="title  wow animate__animated animate__fadeInDown">
           <img src="@/assets/imgs/boutique/jysg/part5/title.png" alt="" />
         </div>
-        <div class="video-box">
-          <div class="container"></div>
+        <div class="video-box  wow animate__animated animate__fadeInUp">
+          <div class="container">
+            <video-player :src="videoUrl"></video-player>
+          </div>
         </div>
       </div>
     </div>
@@ -152,7 +197,11 @@
 
 <script>
 import units from "./jysg.json";
+import videoPlayer from "@/components/VideoPlayer";
 export default {
+  components: {
+    videoPlayer,
+  },
   data() {
     return {
       prefix: "@/assets/imgs/boutique/jysg",
@@ -174,6 +223,7 @@ export default {
           img: "3.png",
         },
       ],
+      videoUrl: "/files/boutique_imgs/jysg/video/jysg.mp4",
     };
   },
   mounted() {
@@ -206,6 +256,7 @@ img {
   background-size: 100% 100%;
   height: 7720px;
   .part1 {
+    position: relative;
     height: 1569px;
     width: 100%;
     background-image: url("@/assets/imgs/boutique/jysg/part1/bg.png");
@@ -342,7 +393,7 @@ img {
       .zt {
         width: 70px;
         height: 152px;
-        margin-right: 56px;
+        margin-right: 100px;
       }
       .part3-content {
         position: relative;
@@ -390,25 +441,29 @@ img {
   }
 
   .unit-content {
-    padding: 200px 100px;
+    padding: 560px 100px;
     color: #fff;
     display: flex;
     width: 100%;
     height: 2200px;
     .title-container {
       width: 20%;
-      height: 400px;
-      display: flex;
 
+      display: flex;
+      align-items: flex-start;
       .unit-title {
         writing-mode: vertical-lr;
         font-size: 32px;
         font-weight: bold;
         margin-right: 16px;
         letter-spacing: 2px;
+        width: 50px;
       }
       .unit-intro {
-        writing-mode: vertical-lr;
+        writing-mode: vertical-rl;
+        height: 500px;
+        font-size: 18px;
+        letter-spacing: 2px;
       }
     }
 
@@ -419,7 +474,7 @@ img {
         position: absolute;
         width: 546px;
         height: 882px;
-        left: 25%;
+        left: 14%;
         top: 0;
       }
       .cr-2 {
@@ -427,14 +482,14 @@ img {
         width: 595px;
         height: 596px;
         right: 0;
-        top: 882px;
+        top: 682px;
       }
       .cr-3 {
         position: absolute;
         width: 546px;
         height: 566px;
         left: 12%;
-        top: 1200px;
+        top: 1000px;
       }
     }
   }
@@ -458,6 +513,7 @@ img {
         margin-right: 32px;
         display: flex;
         flex-direction: column;
+        & > div {
           & > .img {
             height: 518px;
           }
@@ -471,9 +527,10 @@ img {
         }
       }
     }
+  }
 
   .part5 {
-    height: 1700px;
+    height: 1200px;
     background-image: url("@/assets/imgs/boutique/jysg/part5/bg.png");
     background-size: 100% 100%;
     margin-top: 140px;

src/views/boutique/components/jysg.json

 [
   {
     "name": "贵州古代教育史馆",
+    "img": "t-1.png",
     "intro": "第一部分为贵州古代教育史馆，即“参差交错的贵州古代教育”，展示了原始形态教育社会(先秦到宋元)——明清时期的贵州教育(约19世纪中叶前)——地域文化馆（沙滩文化与影山文化）。尹真讲学的“务本堂”复制品及视频介绍。"
   },
   {
     "name": "贵州近代教育史馆",
+    "img": "t-2.png",
     "intro": "第二部分为贵州近代教育史馆，即“除旧布新的贵州近代教育”，展示了鸦片战争后贵州近代先贤促进贵州教育近代化的历程——近代学堂体系的建立——民国初期贵州教育——抗战时期教育文化内迁贵州及贵州近代教育体系建立。"
   },
   {
     "name": "贵州现代教育史馆",
+    "img": "t-3.png",
     "intro": "第三部分为贵州现代教育史馆，即（曲折发展的新中国初期贵州教育与快速发展的改革开放以来的贵州教育），展示了新中国初期贵州现代教育体系的建立——文革时期贵州曲折发展——改革开放后贵州教育的快速发展——十八大以来贵州教育取得的辉煌成就。"
   },
   {
     "name": "贵州民族教育史馆",
+    "img": "t-4.png",
     "intro": "第四部分为贵州现代教育史馆，即“多元教育模式的贵州少数民族教育概况”，展示了传统形态、封建形态、近代形态、现代形态的贵州民族教育发展概况。"
   },
   {
     "name": "贵州名师馆",
+    "img": "t-5.png",
     "intro": "第五部分为贵州历史上的名师，即“薪火相传的贵州近现代著名教师”，展示了明清以来贵州名师、先贤及其献身教育的精神。"
   }
 ]

src/views/boutique/index.vue

@@ -4,9 +4,8 @@
     <YLGDYW v-else-if="currentTitle == '夜郎国的疑问'" />
     <JYYCC v-else-if="currentTitle == '记忆与传承'" />
     <SDCS v-else-if="currentTitle == '四渡赤水出奇兵'" />
+    <JYSG v-else-if="currentTitle == '贵州教育史馆'" />
     <div v-else class="img-container">
-            <!-- <img :src="require(`@/assets/imgs/boutique/${currentTitle}.jpg`)
-            " alt="" /> -->
       <el-empty description="暂无数据"></el-empty>
     </div>
   </div>
@@ -18,8 +17,9 @@ 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";
 export default {
-    components: { SMGZ, YLGDYW, JYYCC,SDCS },
+  components: { SMGZ, YLGDYW, JYYCC, SDCS, JYSG },
   watch: {
     currentTitle: {
       handler: function (value) {
@@ -50,15 +50,14 @@ export default {
   },
   data() {
     return {
-            currentTitle: ''
-        }
+      currentTitle: "",
+    };
   },
   mounted() {
-        this.currentTitle = this.$route.params.title
-    }
-}
+    this.currentTitle = this.$route.params.title;
+  },
+};
 </script>
 
 <style>
-
 </style>
\ No newline at end of file

src/views/display/boutiqueTitles.js

+//此处为配置需跳转为精品展的展览
+//在此处添加title后需在@/views/boutique/index.vue中引入对应的页面组件
+export var titles = [
+  "神秘贵州",
+  "四渡赤水出奇兵",
+  "记忆与传承",
+  "夜郎国的疑问",
+  "贵州教育史馆",
+];

src/views/display/index.vue

@@ -111,7 +111,7 @@ import ListBanner from "@/components/ListBanner";
 import { getList, getDisplayExistDict } from "@/api/display";
 import { mapGetters } from "vuex";
 import { debounce } from "@/utils/index";
-
+import { titles} from './boutiqueTitles'
 export default {
   name: "Display",
   components: { ListBanner },
@@ -141,12 +141,7 @@ export default {
         },
       ],
       currentType: "",
-      boutiqueTitles: [
-        "神秘贵州",
-        "四渡赤水出奇兵",
-        "记忆与传承",
-        "夜郎国的疑问",
-      ],
+      boutiqueTitles:titles
     };
   },
   computed: {
@@ -217,7 +212,6 @@ export default {
 
     handleClick(item) {
       let index = this.boutiqueTitles.indexOf(item.title);
-      // debugger
       let newPage;
       if (index == -1) {
         const { themeType, exhibitionId } = item;