陈列展示右侧增加下拉图标，强调有二级菜单

src/components/NavBar/index.vue

 <template>
-  <div
-    :class="{
-      nav: true,
-      'header-fixed ': isFixed,
-      'home-nav': isHome || isBoutique,
-      'show-themeColor':isFixed&&isHome,
-      isChStyle: navbarStyle == '2' ,
-      isRedStyle: navbarStyle == '3',
-      isSDCS: navbarStyle == '4'&& isFixed,
-      isSMGZ: navbarStyle == '5'&& isFixed,
-      isJYYCC: navbarStyle == '6'&& isFixed,
-      isYLGDYW: navbarStyle == '7'&& isFixed,
-    }"
-    id="navbar"
-  >
+  <div :class="{
+    nav: true,
+    'header-fixed ': isFixed,
+    'home-nav': isHome || isBoutique,
+    'show-themeColor': isFixed && isHome,
+    isChStyle: navbarStyle == '2',
+    isRedStyle: navbarStyle == '3',
+    isSDCS: navbarStyle == '4' && isFixed,
+    isSMGZ: navbarStyle == '5' && isFixed,
+    isJYYCC: navbarStyle == '6' && isFixed,
+    isYLGDYW: navbarStyle == '7' && isFixed,
+  }" id="navbar">
     <div class="container">
       <div class="logo-container animate__animated animate__fadeInLeft">
         <img src="@/assets/imgs/home/logo3.png" />
@@ -21,19 +18,13 @@
       </div>
       <div class="right">
         <div class="tabs animate__animated animate__fadeInUp">
-          <div
-            class="tab-item"
-            :class="{
-              activeHome: currentTab.name == item.name && isHome,
-              active: currentTab.name == item.name,
-            }"
-            v-for="(item, index) in pages"
-            :key="index"
-            @click="handleClickTab(item)"
-            @mouseenter="handleEnterTabItem(item)"
-            @mouseleave="handleLeaveTabItem(item)"
-          >
+          <div class="tab-item" :class="{
+            activeHome: currentTab.name == item.name && isHome,
+            active: currentTab.name == item.name,
+          }" v-for="(item, index) in pages" :key="index" @click="handleClickTab(item)"
+            @mouseenter="handleEnterTabItem(item)" @mouseleave="handleLeaveTabItem(item)">
             <span @click="handleToPage(item.path)">{{ item.name }} </span>
+            <i v-if="item.name == '陈列展览'" class="el-icon-arrow-down" style="transform: translate(30%,30%);cursor: pointer;"></i>
           </div>
         </div>
 
@@ -45,19 +36,10 @@
                 <i class="el-icon-arrow-down el-icon--right"></i>
               </el-button>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item
-                  v-if="!hasToken"
-                  @click.native="handleToLogin"
-                  class="operation-item"
-                  >登陆
+                <el-dropdown-item v-if="!hasToken" @click.native="handleToLogin" class="operation-item">登陆
                 </el-dropdown-item>
-                <el-dropdown-item
-                  v-if="hasToken"
-                  class="operation-item"
-                  @click.native="handleToPersonal"
-                >
-                  个人中心</el-dropdown-item
-                >
+                <el-dropdown-item v-if="hasToken" class="operation-item" @click.native="handleToPersonal">
+                  个人中心</el-dropdown-item>
                 <el-dropdown-item v-if="hasToken" @click.native="handleLogOut">
                   <span>退出</span>
                 </el-dropdown-item>
@@ -68,12 +50,7 @@
       </div>
     </div>
     <transition name="el-zoom-in-top">
-      <div
-        class="submenu"
-        v-show="showSubMenu"
-        @mouseenter="handleEnterSubmenu"
-        @mouseleave="handleMouseLeaveSubMenu"
-      >
+      <div class="submenu" v-show="showSubMenu" @mouseenter="handleEnterSubmenu" @mouseleave="handleMouseLeaveSubMenu">
         <ul>
           <li>
             <span @click="handleToPage('/display', true)">基本陈列</span>
@@ -87,92 +64,45 @@
         </ul>
       </div>
     </transition>
-    <el-dialog
-      :visible.sync="loginVisible"
-      append-to-body
-      v-loading="loading"
-      element-loading-background="rgba(0, 0, 0, 0.5)"
-      :element-loading-text="loadingText"
-      :before-close="handleCloseLogin"
-    >
+    <el-dialog :visible.sync="loginVisible" append-to-body v-loading="loading"
+      element-loading-background="rgba(0, 0, 0, 0.5)" :element-loading-text="loadingText"
+      :before-close="handleCloseLogin">
       <div slot="title" class="login-title">
-        <div
-          :class="['title-item', isLoginByUsername ? 'active' : '']"
-          @click="handleChangeLoginWay('username')"
-        >
+        <div :class="['title-item', isLoginByUsername ? 'active' : '']" @click="handleChangeLoginWay('username')">
           账号登录
         </div>
-        <div
-          :class="['title-item', isLoginByUsername ? '' : 'active']"
-          @click="handleChangeLoginWay('phone')"
-        >
+        <div :class="['title-item', isLoginByUsername ? '' : 'active']" @click="handleChangeLoginWay('phone')">
           手机号登录
         </div>
         <div class="line"></div>
       </div>
       <div class="login">
-        <el-form
-          :model="loginForm"
-          :label-position="labelPosition"
-          ref="loginForm"
-          :rules="loginRules"
-        >
+        <el-form :model="loginForm" :label-position="labelPosition" ref="loginForm" :rules="loginRules">
           <el-form-item :label-width="formLabelWidth" prop="account">
-            <el-input
-              v-model="loginForm.account"
-              autocomplete="off"
-              clearable
-              :placeholder="isLoginByUsername ? '账号' : '手机号'"
-            ></el-input>
+            <el-input v-model="loginForm.account" autocomplete="off" clearable
+              :placeholder="isLoginByUsername ? '账号' : '手机号'"></el-input>
           </el-form-item>
           <el-form-item :label-width="formLabelWidth" prop="password">
-            <el-input
-              v-model="loginForm.password"
-              autocomplete="off"
-              type="password"
-              clearable
-              show-password
-              placeholder="密码"
-            ></el-input>
+            <el-input v-model="loginForm.password" autocomplete="off" type="password" clearable show-password
+              placeholder="密码"></el-input>
           </el-form-item>
           <el-form-item :label-width="formLabelWidth">
             <el-row :gutter="10">
               <el-col :span="12">
                 <el-form-item prop="captcha">
-                  <el-input
-                    ref="captcha"
-                    v-model="loginForm.captcha"
-                    placeholder="请输入验证码"
-                    name="captcha"
-                    tabindex="3"
-                    auto-complete="on"
-                    @keyup.enter.native="handleLoginSubmit"
-                  />
+                  <el-input ref="captcha" v-model="loginForm.captcha" placeholder="请输入验证码" name="captcha" tabindex="3"
+                    auto-complete="on" @keyup.enter.native="handleLoginSubmit" />
                 </el-form-item>
               </el-col>
               <el-col :span="12" class="captcha">
-                <img
-                  v-if="requestCodeSuccess"
-                  :src="captchaImgSrc"
-                  @click="handleGetCaptcha"
-                />
-                <img
-                  v-else
-                  src="@/assets/404_images/checkcode.png"
-                  @click="handleGetCaptcha"
-                />
+                <img v-if="requestCodeSuccess" :src="captchaImgSrc" @click="handleGetCaptcha" />
+                <img v-else src="@/assets/404_images/checkcode.png" @click="handleGetCaptcha" />
               </el-col>
             </el-row>
           </el-form-item>
         </el-form>
         <div class="opration">
-          <el-button
-            round
-            @click="handleLoginSubmit"
-            size="small"
-            class="loginBtn"
-            >登 陆</el-button
-          >
+          <el-button round @click="handleLoginSubmit" size="small" class="loginBtn">登 陆</el-button>
           <div class="register" @click="handleToRegister">注册</div>
         </div>
       </div>
@@ -202,7 +132,7 @@ export default {
     curPath: {
       handler: function (value) {
         this.isHome = value.name == "home";
-        this.isBoutique = value.name=='boutique'
+        this.isBoutique = value.name == 'boutique'
         this.currentTab = {
           name: value.name,
           path: value.path,
@@ -324,7 +254,7 @@ export default {
         path: "/",
       },
       isHome: true,
-      isBoutique:false,//是否是精品展页
+      isBoutique: false,//是否是精品展页
       isFixed: false,
       offsetTop: 0,
       loginVisible: false,
@@ -530,6 +460,7 @@ export default {
   z-index: 9;
   background-color: rgba(#000, 0.25) !important;
 }
+
 .header-fixed {
   position: fixed !important;
   background-color: $themeColor !important;
@@ -537,15 +468,18 @@ export default {
   top: 0;
 }
 
-.show-themeColor{
+.show-themeColor {
   background-color: #2069c4 !important;
 }
+
 .isChStyle {
   background-color: #892325 !important;
 }
+
 .isRedStyle {
   background-color: #a30e0c !important;
 }
+
 .isSDCS {
   background-color: #6c0c0d !important;
 }
@@ -561,6 +495,7 @@ export default {
 .isYLGDYW {
   background-color: #212040 !important;
 }
+
 .nav {
   height: 100px;
   width: 100%;
@@ -569,6 +504,7 @@ export default {
   // background-color: #fff;
   // background-image: url('@/assets/imgs/home/panel-bg.png');
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
+
   .container {
     width: 100%;
     height: 100%;
@@ -576,12 +512,14 @@ export default {
     align-items: center;
     justify-content: space-between;
     padding: 0 70px 0 100px;
+
     // overflow: hidden;
     .logo-container {
       // width: 380px;
       // height: 74px;
       display: flex;
       align-items: center;
+
       img {
         // width: 100%;
         // height: 100%;
@@ -591,6 +529,7 @@ export default {
         // box-shadow: 2px 2px 3px 2px rgb(0 0 0 / 30%);
         margin-right: 8px;
       }
+
       .name {
         font-size: 30px;
         font-weight: bold;
@@ -599,6 +538,7 @@ export default {
         margin-left: 8px;
       }
     }
+
     .right {
       display: flex;
       height: 100%;
@@ -609,6 +549,7 @@ export default {
         margin-right: 80px;
         min-width: 512px;
         height: 100%;
+
         .tab-item {
           margin-right: 70px;
           color: #fff;
@@ -618,6 +559,7 @@ export default {
           position: relative;
           height: 100%;
           text-align: center;
+
           &::after {
             position: absolute;
             content: "";
@@ -638,7 +580,7 @@ export default {
             opacity: 1;
           }
 
-          & > span {
+          &>span {
             transform: translateY(4px);
             font-size: 20px;
             display: inline-block;
@@ -648,6 +590,7 @@ export default {
               cursor: pointer;
             }
           }
+
           // a {
           //   font-size: 18px;
           //   white-space: nowrap;
@@ -672,7 +615,7 @@ export default {
           }
         }
 
-        .active::after{
+        .active::after {
           opacity: 1;
         }
       }
@@ -681,7 +624,7 @@ export default {
 
   .submenu {
     // background: #f8f8f8;
-    background-color: rgba(0,0,0,0.4);
+    background-color: rgba(0, 0, 0, 0.4);
     color: #fff;
     height: 50px;
     display: flex;
@@ -689,19 +632,23 @@ export default {
     position: absolute;
     width: 100%;
     z-index: 99;
+
     // border-bottom: 1px solid #f2f2f2;
     ul {
       display: flex;
       align-items: center;
       transform: translateX(50%);
+
       li {
         margin-right: 40px;
         cursor: pointer;
+
         &:hover {
           span {
             color: #2069c4;
           }
         }
+
         .svg-icon {
           margin-left: 40px;
         }
@@ -714,10 +661,12 @@ export default {
   .wrapper {
     transform: translateY(4px);
   }
+
   .el-button {
     background: transparent;
     border-color: #fff;
     color: #fff;
+
     i {
       font-size: 14px;
     }
@@ -727,14 +676,17 @@ export default {
 ::v-deep .el-button.is-round {
   padding: 10px 20px;
 }
+
 .el-dropdown-menu {
   background-color: #fff;
   // border: 1px solid #8a919f;
 }
+
 .el-dropdown-menu__item {
   background-color: transparent;
   // color: #fff;
   color: #8a919f;
+
   a {
     text-decoration: none;
     color: #8a919f;
@@ -753,33 +705,39 @@ export default {
     justify-content: space-between;
     align-items: center;
     margin-bottom: 30px;
+
     .text {
       font-weight: bold;
       font-size: 24px;
       color: #666;
     }
+
     .close {
       font-size: 34px;
       cursor: pointer;
       color: #ccc;
     }
   }
+
   .login-box {
     width: 500px;
     margin: auto;
   }
 }
+
 .opration {
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   margin-top: 20px;
+
   .register {
     display: flex;
     justify-content: center;
     margin-top: 20px;
     font-size: 14px;
     cursor: pointer;
+
     &:hover {
       color: #2069c4;
     }
@@ -794,6 +752,7 @@ export default {
 .captcha {
   display: flex;
   justify-content: flex-end;
+
   img {
     margin-top: 2px;
     height: 40px;
@@ -807,6 +766,7 @@ export default {
   background-color: #2069c4;
   color: #fff;
   font-size: 14px;
+
   &:hover {
     filter: brightness(0.9) !important;
     background-color: #2069c4;
@@ -818,9 +778,11 @@ export default {
     font-size: 14px;
   }
 }
+
 ::v-deep .el-dialog {
   width: 400px;
   border-radius: 0;
+
   .el-dialog__body {
     padding: 20px 30px 60px !important;
   }
@@ -846,10 +808,12 @@ export default {
 .login-title {
   display: flex;
   position: relative;
+
   .title-item {
     margin-right: 40px;
     cursor: pointer;
     position: relative;
+
     &:hover {
       color: #2069c4;
     }
@@ -858,6 +822,7 @@ export default {
   .active {
     color: #2069c4;
   }
+
   .line {
     width: 18px;
     height: 4px;

src/views/boutique/index.vue

@@ -59,7 +59,7 @@ export default {
         { tab: "sdcs", name: "四渡赤水出奇兵" },
         { tab: "lzsg", name: "六枝梭戛" },
         { tab: "zggz", name: "中共贵州省工委斗争纪略展" },
-        { tab: "gzjy", name: "贵州教育使馆" },
+        { tab: "gzjy", name: "贵州教育史馆" },
       ],
       activeTab: "",