神秘贵州封面图修改

src/components/NavBar/index.vue

@@ -32,8 +32,26 @@
           >
             <!-- <div ></div> -->
             <router-link :to="item.path">{{ item.name }} </router-link>
+            <!-- <div class="submenu" :style="{left:currentTabItem}">
+              <ul
+                class="submenu-container"
+                v-if="item.children && item.children.length > 0"
+              >
+                <li
+                  v-for="(item, index) in item.children"
+                  :key="index"
+                  class="submenu-item"
+                >
+                  {{ item.name }}
+                </li>
+              </ul>
+            </div> -->
           </div>
         </div>
+
+        <!-- <div class="submenu" v-if="currentMenu.name == '陈列展览'">
+          陈列展览的副菜单
+        </div> -->
         <div class="tools animate__animated animate__fadeInRight">
           <div class="wrapper">
             <el-dropdown trigger="click">
@@ -64,6 +82,7 @@
         </div>
       </div>
     </div>
+
     <el-dialog
       :visible.sync="loginVisible"
       append-to-body
@@ -260,12 +279,30 @@ export default {
           name: "精品展",
           path: "/boutique",
         },
+        // {
+        //   name: "陈列展览",
+        //   path: "",
+        //   children: [
+        //     {
+        //       name: "基本陈列展",
+        //       path: "/display",
+        //     },
+        //     {
+        //       name: "十大精品展",
+        //       path: "/boutique",
+        //     },
+        //     {
+        //       name: "虚拟展厅",
+        //       path: "/virtual",
+        //     },
+        //   ],
+        // },
         {
           name: "展览展示",
           path: "/display",
         },
         {
-          name: "文物展",
+          name: "文物展示",
           path: "/culturalRelic",
         },
         {
@@ -304,6 +341,7 @@ export default {
       },
       isLoginByUsername: true,
       loadingText: "",
+      currentHoverMenu: {},
     };
   },
   mounted() {
@@ -431,6 +469,14 @@ export default {
         line.style.left = "136px";
       }
     },
+
+    handleEnterImg(item) {
+      this.currentHoverMenu = item;
+    },
+
+    handleLeaveImg(item) {
+      this.currentHoverMenu = null;
+    },
   },
 
   destroyed() {
@@ -440,13 +486,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.tab-item {
-  a {
-    color: #fff;
-    text-decoration: none;
-  }
-}
-
 .home-nav {
   position: absolute;
   top: 0;
@@ -494,7 +533,7 @@ export default {
     align-items: center;
     justify-content: space-between;
     padding: 0 70px 0 100px;
-    overflow: hidden;
+    // overflow: hidden;
     .logo-container {
       // width: 380px;
       // height: 74px;
@@ -541,6 +580,8 @@ export default {
             font-size: 18px;
             white-space: nowrap;
             transition: all 0.5s ease;
+            color: #fff;
+            text-decoration: none;
           }
 
           &:hover {
@@ -558,6 +599,20 @@ export default {
             text-shadow: 0 1px 2px #9fafcb, 1px 0px 2px #9fafcb;
           }
         }
+
+        .submenu {
+          position: absolute;
+          top: 100px;
+          background: #f8f8f8;
+          color: #666;
+          width: 10vw;
+          .submenu-container{
+            display: flex;
+            .submenu-item{
+              margin-right: 10px;
+            }
+          }
+        }
       }
     }
   }

src/views/display/components/BlueStyle.vue

@@ -973,11 +973,12 @@ $titleFontFamily: SourceHanSerifCN-Bold;
         .tab-item {
           height: 100%;
           margin-right: 20px;
-          color: #666;
+          color: $themeColor;
           font-size: 24px;
           font-family: $titleFontFamily;
           cursor: pointer;
           position: relative;
+          border: 1px solid $themeColor;
 
           &:hover {
             color: $themeColor;

src/views/home/components/topic/smgz.vue

 <template>
   <div class="m-smgz">
-    <div class="waterfall animate__animated animate__fadeInLeft delay3">
+    <div class="waterfall animate__animated animate__fadeIn delay3">
       <img src="@/assets/imgs/topic/smgz/waterfall.png" alt="" />
     </div>
-    <div class="gzmap animate__animated animate__fadeInRight delay3">
+    <div class="gzmap animate__animated animate__fadeIn delay3">
       <img src="@/assets/imgs/topic/smgz/map.png" alt="" />
     </div>
     <div class="animal animate__animated animate__fadeIn delay1">
@@ -37,7 +37,7 @@
 
 <script>
 export default {
-  methods: {}
+  methods: {},
 };
 </script>
 
@@ -81,7 +81,8 @@ export default {
   .gzmap {
     top: 0;
     right: 0;
-    width: 1131px;
+    // width: 1131px;
+    width: 1327px;
     height: calc(100% - 55px);
   }
   .fish {
@@ -104,10 +105,12 @@ export default {
     height: 687px;
   }
   .evolution {
-    left: 530px;
+    left: 350px;
     bottom: 20px;
-    width: 510px;
+    width: 900px;
     height: 498px;
+    // left: 530px;
+    // width: 510px;
   }
   .title-first {
     left: 400px;