修改文物下拉面板颜色问题；拆分navbar组件

src/assets/styles/index.scss

@@ -3,6 +3,7 @@
 
 /**适应移动端 */
 @media screen and (max-width: 500px) {
+
   html,
   body {
     width: 1920px;
@@ -41,7 +42,7 @@ li {
 //一些公共样式
 .empty-space {
   height: 100px;
-  background-color: $themeColor;
+  background-color: $deepBlue;
   width: 100%;
 }
 
@@ -64,6 +65,7 @@ li {
 }
 
 .content-wrapper {
+
   // width: 1200px;
   // width: 100vw;
   // padding: 0 13%;
@@ -71,22 +73,23 @@ li {
   /* display: flex;
   flex-direction: column;
   align-items: center; */
-  > .content {
+  >.content {
     width: 1400px;
     margin: auto;
   }
 }
 
 .el-pager {
+
   .btn-quicknext,
   .number {
     background: transparent !important;
-    border: 1px solid $themeColor !important;
-    color: $themeColor !important;
+    border: 1px solid $deepBlue !important;
+    color: $deepBlue !important;
   }
 
   .number.active {
-    background: $themeColor !important;
+    background: $deepBlue !important;
     color: #fff !important;
   }
 }
@@ -94,9 +97,11 @@ li {
 .content-wrapper:not(.relic) {
   padding-top: 0 !important;
   padding-bottom: 40px !important;
-  > .content {
+
+  >.content {
     box-shadow: none !important;
-    > .search {
+
+    >.search {
       // padding: 24px 20%;
       // padding: 16px 13%;
       padding: 16px 0 32px;
@@ -107,7 +112,7 @@ li {
         width: 100%;
         height: 46px;
 
-        > div {
+        >div {
           width: 100%;
           height: 100%;
         }
@@ -162,7 +167,7 @@ li {
         padding: 0 !important;
         height: auto !important;
 
-        > .name {
+        >.name {
           padding: 20px 0 !important;
           margin: 0 !important;
           font-size: 20px !important;
@@ -184,7 +189,7 @@ li {
           border: 2px solid #999;
         }
 
-        > div[class|='deco'] {
+        >div[class|='deco'] {
           z-index: 2;
         }
       }
@@ -195,7 +200,7 @@ li {
         .desc {
           background: none !important;
 
-          > .name {
+          >.name {
             color: #0e45ab !important;
           }
         }
@@ -208,10 +213,11 @@ li {
       }
     }
 
-    > .pagination-container {
-      > .pagination {
+    >.pagination-container {
+      >.pagination {
         margin: 0 !important;
         background-image: none !important;
+
         .el-pager {
           li {
             width: 42px;
@@ -221,7 +227,7 @@ li {
             background: #fff;
             min-width: 0;
             margin: 0 16px;
-            color: $themeColor;
+            color: $deepBlue;
             border-radius: 0 !important;
           }
 
@@ -236,6 +242,7 @@ li {
 
 .display,
 .cultural-relic {
+
   .search-bar,
   .content-wrapper,
   .type-group {
@@ -245,12 +252,14 @@ li {
   .search-bar {
     .search-item {
       line-height: 46px;
+
       &.none-border {
         background: transparent !important;
       }
 
-      > .el-checkbox {
+      >.el-checkbox {
         color: #2b2d35;
+
         .el-checkbox__inner {
           width: 20px;
           height: 20px;
@@ -260,18 +269,21 @@ li {
             border-width: 3px;
           }
         }
+
         .el-checkbox__label {
           font-size: 16px;
           line-height: 20px;
         }
+
         .el-checkbox__input.is-checked {
           .el-checkbox__inner {
-            background-color: $themeColor;
-            border-color: $themeColor;
+            background-color: $deepBlue;
+            border-color: $deepBlue;
           }
-          + .el-checkbox__label {
+
+          +.el-checkbox__label {
             font-weight: 600;
-            color: $themeColor;
+            color: $deepBlue;
           }
         }
       }
@@ -286,9 +298,10 @@ li {
   font-size: 16px;
   padding: 8px 14%;
   background-color: #fff;
+
   .list-total-num {
     font-size: 24px;
-    color: $themeSecondaryColor;
+    color: $yellow;
     margin: 0 6px;
   }
 }
@@ -296,7 +309,7 @@ li {
 
 #app {
   #navbar {
-    + div {
+    +div {
       min-height: 440px;
     }
   }

src/assets/styles/variable.scss

-// $themeColor:#223e36;
-// $themeColor: #2069c4;
-// $themeColor:#132c33;
-$themeColor: #252F57;
-$themeSecondaryColor:#dfab46;
+// $deepBlue:#223e36;
+// $deepBlue: #2069c4;
+// $deepBlue:#132c33;
+$deepBlue: #252F57;
+$yellow: #dfab46;
 $puHuiTi: "Alibaba-PuHuiTi";
 $siyuanSongBold: "SourceHanSerifCN-Bold";
 
-$font-size-sm:14px;
-$font-size-base:16px;
-$font-size-lg:22px;
+$font-size-sm: 14px;
+$font-size-base: 16px;
+$font-size-lg: 22px;
 
 $nav-height: 120px;
 

src/components/AudioPlayer/NormalPlayer.vue

@@ -248,7 +248,7 @@ export default {
     color: #5c5e66;
     display: flex;
     align-items: center;
-    color: $themeColor;
+    color: $deepBlue;
     font-size: 38px;
   }
   .progress-bar-bg {
@@ -263,7 +263,7 @@ export default {
     margin: 0 10px;
   }
   .progress-bar {
-    background-color: $themeColor;
+    background-color: $deepBlue;
     width: 0%;
     height: 10px;
     border-radius: 5px;
@@ -281,4 +281,3 @@ export default {
   }
 }
 </style>
-

src/components/Breadcrumb/index.vue

 <template>
-    <el-breadcrumb separator-class="el-icon-arrow-right" :class="{ 'is-light': isLight }">
-        <el-breadcrumb-item v-for="(item, index) in list" :key="index" :to="{ path: item.path }">{{ item.name
-        }}</el-breadcrumb-item>
+  <el-breadcrumb
+    separator-class="el-icon-arrow-right"
+    :class="{ 'is-light': isLight }"
+  >
+    <el-breadcrumb-item
+      v-for="(item, index) in list"
+      :key="index"
+      :to="{ path: item.path }"
+      >{{ item.name }}</el-breadcrumb-item
+    >
   </el-breadcrumb>
 </template>
 
 <script>
-
 export default {
-    name: 'Breadcrumb',
+  name: "Breadcrumb",
   props: {
     list: {
       type: Array,
       default: [
         {
-                    name: '首页',
-                    path: "/"
-                }
-            ]
+          name: "首页",
+          path: "/",
+        },
+      ],
     },
     isLight: {
       type: Boolean,
-            default: false
-        }
-    }
-}
+      default: false,
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -34,7 +40,7 @@ export default {
 }
 
 ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
-    color: $themeColor;
+  color: $deepBlue;
 }
 
 ::v-deep .el-breadcrumb__inner.is-link:hover {
@@ -54,6 +60,5 @@ export default {
   ::v-deep .el-breadcrumb__inner.is-link:hover {
     color: #b5800a;
   }
-
 }
 </style>

src/components/Footer/index.vue

 <!-- -->
 <template>
-  <div :class="{
+  <div
+    :class="{
       footer: true,
       //isHome:isHome,
       isChStyle: navbarStyle == '2',
@@ -9,7 +10,8 @@
       isSMGZ: navbarStyle == '5',
       isJYYCC: navbarStyle == '6',
       isYLGDYW: navbarStyle == '7',
-}">
+    }"
+  >
     <!-- <span>贵州省文化和旅游厅博物馆处版权所有</span>
     <span>中国知网提供技术支持</span> -->
     <div class="logo">
@@ -25,7 +27,11 @@
                 {{ item.title }}
               </div>
               <ul v-if="item.children && item.children.length > 0">
-                <li v-for="(v, i) in item.children" :key="i" @click="handleClickItem(v)">
+                <li
+                  v-for="(v, i) in item.children"
+                  :key="i"
+                  @click="handleClickItem(v)"
+                >
                   {{ v.title }}
                 </li>
               </ul>
@@ -40,19 +46,24 @@
           <el-popover placement="top-start" width="280" trigger="hover">
             <span slot="reference">小程序</span>
             <div class="wechat-app">
-              <img src="@/assets/imgs/wechat-app.jpg" alt="">
+              <img src="@/assets/imgs/wechat-app.jpg" alt="" />
             </div>
           </el-popover>
         </span>
       </div>
     </div>
     <div class="copyright">
-      <a href="https://beian.miit.gov.cn" target="_blank"> 黔ICP备2022009785号-1 &nbsp; &nbsp;</a>
+      <a href="https://beian.miit.gov.cn" target="_blank">
+        黔ICP备2022009785号-1 &nbsp; &nbsp;</a
+      >
       |&nbsp; &nbsp; ©2022-现在 贵州省文化和旅游厅
     </div>
     <div class="support">网站建设：贵州同方知网科技发展有限公司</div>
     <div class="advice">
-      <el-tooltip placement="top-start" content="谷歌 火狐 最佳分辨率（1920 x 1080）">
+      <el-tooltip
+        placement="top-start"
+        content="谷歌 火狐 最佳分辨率（1920 x 1080）"
+      >
         <span>浏览建议</span>
       </el-tooltip>
     </div>
@@ -166,7 +177,7 @@ export default {
   padding: 30px 0;
   justify-content: center;
   align-items: center;
-  background-color: $themeColor;
+  background-color: $deepBlue;
   flex-direction: column;
   color: #fefefe;
   font-size: 14px;
@@ -188,8 +199,6 @@ export default {
     .menu-item {
       margin-right: 20px;
       cursor: pointer;
-
-
     }
   }
 
@@ -207,13 +216,11 @@ export default {
   }
 
   .copyright {
-    &>a {
+    & > a {
       text-decoration: none;
       color: #fff;
     }
   }
-
-
 }
 
 .map {

src/components/ListBanner/index.vue

@@ -165,7 +165,7 @@ export default {
     .text {
       font-size: 28px;
       font-weight: 400;
-      color: $themeColor;
+      color: $deepBlue;
     }
   }
 }

src/components/MenuList/index.vue

@@ -64,15 +64,15 @@ export default {
 .el-menu-item {
   background-color: #f5f5f9;
   font-size: 16px;
-  // color: $themeColor;
+  // color: $deepBlue;
   &:hover {
-    background-color: $themeColor;
+    background-color: $deepBlue;
     color: #fff;
   }
 }
 
 .el-menu-item.is-active {
-  color: $themeColor;
+  color: $deepBlue;
   font-weight: bold;
 }
 .blueStyle {
@@ -87,7 +87,7 @@ export default {
     text-overflow: ellipsis;
     &:hover {
       background: rgba($color: #fff, $alpha: 0.6);
-      color: $themeColor;
+      color: $deepBlue;
       font-weight: bold;
     }
   }

src/components/NavBar/components/loginDialog.vue

+<template>
+  <el-dialog
+    :visible.sync="visible"
+    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>
+      <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-item :label-width="formLabelWidth" prop="account">
+          <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-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-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"
+              />
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+      <div class="opration">
+        <el-button
+          round
+          @click="handleLoginSubmit"
+          size="small"
+          class="loginBtn"
+          >登 陆</el-button
+        >
+        <div class="register" @click="handleToRegister">注册</div>
+        <div v-if="!isLoginByUsername">
+          提示：若您已经登录过“黔云展”小程序，请直接登录，账号及密码皆为您的手机号
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { getVerify } from "@/api/user";
+import md5 from "js-md5";
+export default {
+  name: "LoginDialog",
+  computed: {
+    ...mapGetters(["token", "userInfo", "showLoginDialog"]),
+  },
+  data() {
+    var validateAccout = (rule, value, callback) => {
+      if (value === "") {
+        let text = this.isLoginByUsername ? "账号" : "手机号";
+        callback(new Error("请输入" + text));
+      } else {
+        if (!this.isLoginByUsername) {
+          var pattern = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
+          if (!pattern.test(value)) {
+            callback(new Error("请输入合法手机号/电话号"));
+          } else {
+            callback();
+          }
+        } else {
+          callback();
+        }
+      }
+    };
+    return {
+      visible: false,
+      loginForm: {
+        account: "",
+        password: "",
+        captcha: "",
+      },
+      requestCodeSuccess: false,
+      captchaImgSrc: "",
+      loading: false,
+      labelPosition: "right",
+      formLabelWidth: "1px",
+      loginRules: {
+        account: [
+          { validator: validateAccout, required: true, trigger: "blur" },
+        ],
+        password: [{ required: true, trigger: "blur", message: "请输入密码" }],
+        captcha: [{ required: true, trigger: "blur", message: "请输入验证码" }],
+      },
+      isLoginByUsername: true,
+      loadingText: "",
+    };
+  },
+  watch: {
+    showLoginDialog(value) {
+      this.visible = value;
+    },
+    visible(value) {
+      if (value) {
+        this.handleGetCaptcha();
+      }
+    },
+  },
+  mounted() {},
+  methods: {
+    handleLoginSubmit() {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          // debugger
+          this.loading = true;
+          this.loadingText = "正在登录";
+          const { account, password, captcha } = this.loginForm;
+          const params = {
+            captcha,
+            password,
+          };
+          params.password = md5(params.password);
+          if (this.isLoginByUsername) {
+            params.username = account;
+          } else {
+            params.phone = account;
+          }
+          this.$store
+            .dispatch("user/login", params)
+            .then((res) => {
+              if (res.code == "0") {
+                this.$message.success("登录成功");
+                this.handleCloseLogin();
+                this.loading = false;
+              }
+            })
+            .catch((err) => {
+              console.log(err);
+              this.loading = false;
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+
+    handleCloseLogin() {
+      this.visible = false;
+      this.$refs["loginForm"].resetFields;
+      if (this.showLoginDialog) {
+        this.$store.commit("app/OPEN_LOGIN_DIALOG", null);
+      }
+    },
+
+    handleGetCaptcha() {
+      this.currdatetime = new Date().getTime();
+      getVerify()
+        .then((res) => {
+          this.requestCodeSuccess = true;
+          const imgSrc = window.URL.createObjectURL(res);
+          this.captchaImgSrc = imgSrc;
+        })
+        .catch(() => {
+          this.requestCodeSuccess = false;
+        });
+    },
+
+    handleChangeLoginWay(type) {
+      this.isLoginByUsername = type === "username";
+      let line = document.getElementsByClassName("line")[0];
+      if (this.isLoginByUsername) {
+        line.style.left = "24px";
+      } else {
+        line.style.left = "136px";
+      }
+    },
+
+    handleToRegister() {
+      this.$router.push("/register?redirect=" + this.$route.fullPath);
+      this.handleCloseLogin();
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.login {
+  .title {
+    display: flex;
+    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: 20px 0;
+    font-size: 14px;
+    cursor: pointer;
+
+    &:hover {
+      color: #2069c4;
+    }
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+}
+
+.captcha {
+  display: flex;
+  justify-content: flex-end;
+
+  img {
+    margin-top: 2px;
+    height: 40px;
+  }
+}
+
+::v-deep .loginBtn {
+  padding: 16px !important;
+  border-radius: 0 !important;
+  width: 100%;
+  background-color: #2069c4;
+  color: #fff;
+  font-size: 14px;
+
+  &:hover {
+    filter: brightness(0.9) !important;
+    background-color: #2069c4;
+    color: #fff;
+    border: none;
+    border-radius: 0 !important;
+    padding: 16px !important;
+    width: 100%;
+    font-size: 14px;
+  }
+}
+
+::v-deep .el-dialog {
+  width: 400px;
+  border-radius: 0;
+
+  .el-dialog__body {
+    padding: 20px 30px 60px !important;
+  }
+}
+
+::v-deep .el-input__inner {
+  background: #e8f0fe;
+  border: none;
+}
+
+::v-deep .el-dialog__header {
+  padding: 48px 30px 10px !important;
+  color: #666 !important;
+  font-weight: bold;
+}
+
+::v-deep .el-dialog__headerbtn {
+  top: 48px !important;
+  font-size: 24px;
+  right: 30px;
+}
+
+.login-title {
+  display: flex;
+  position: relative;
+
+  .title-item {
+    margin-right: 40px;
+    cursor: pointer;
+    position: relative;
+
+    &:hover {
+      color: #2069c4;
+    }
+  }
+
+  .active {
+    color: #2069c4;
+  }
+
+  .line {
+    width: 18px;
+    height: 4px;
+    background-color: #2069c4;
+    // border-radius: 4px;
+    position: absolute;
+    left: 24px;
+    bottom: -14px;
+    transition: all 0.3s ease;
+  }
+}
+</style>

src/components/NavBar/index.vue

@@ -43,10 +43,13 @@
         </div>
         <div class="tools animate__animated animate__fadeInRight">
           <div class="wrapper">
+            <span class="search-pic">
+              <i class="el-icon-search"></i>
+              以图搜图
+            </span>
             <el-button round v-if="!hasToken" @click.native="handleToLogin">
               <i class="el-icon-user"></i>
               <span>登录</span>
-              <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
             </el-button>
             <el-dropdown trigger="click" v-else>
               <el-button round>
@@ -54,7 +57,7 @@
                 <span>{{
                   hasToken ? userInfo.nickName || userInfo.username : "登录"
                 }}</span>
-                <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
+                <i class="el-icon-arrow-down" style="margin-left: 10px"></i>
               </el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item
@@ -99,128 +102,27 @@
             v-if="index != typeList.length - 1"
           ></svg-icon>
         </li>
-        <!-- <li>
-            <span @click="handleToPage('/display', true)">基本陈列</span>
-            <svg-icon icon-class="wenshi"></svg-icon>
-          </li>
-          <li>
-            <span @click="handleToPage('/boutique', true)">十大精品展</span>
-            <svg-icon icon-class="wenshi"></svg-icon>
-          </li>
-          <li><span @click="handleToPage('/virtual', true)">虚拟展厅</span></li> -->
       </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"
-    >
-      <div slot="title" class="login-title">
-        <div
-          :class="['title-item', isLoginByUsername ? 'active' : '']"
-          @click="handleChangeLoginWay('username')"
-        >
-          账号登录
-        </div>
-        <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-item :label-width="formLabelWidth" prop="account">
-            <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-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-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"
-                />
-              </el-col>
-            </el-row>
-          </el-form-item>
-        </el-form>
-        <div class="opration">
-          <el-button
-            round
-            @click="handleLoginSubmit"
-            size="small"
-            class="loginBtn"
-            >登 陆</el-button
-          >
-          <div class="register" @click="handleToRegister">注册</div>
-          <div v-if="!isLoginByUsername">
-            提示：若您已经登录过“黔云展”小程序，请直接登录，账号及密码皆为您的手机号
-          </div>
-        </div>
-      </div>
-    </el-dialog>
+    <LoginDialog ref="LoginDialog"/>
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
-import { getVerify } from "@/api/user";
 import { getDisplayExistDict } from "@/api/display";
-import md5 from "js-md5";
+import LoginDialog from "./components/loginDialog.vue";
 export default {
   name: "NavBar",
+  components: {
+    LoginDialog,
+  },
   computed: {
     ...mapGetters([
       "token",
       "userInfo",
       "curPath",
       "navBarFixed",
-      "showLoginDialog",
       "navbarStyle",
     ]),
     hasToken() {
@@ -260,7 +162,7 @@ export default {
             path: "/ccProduct",
           };
         }
-        if (value.name=='home') {
+        if (value.name == "home") {
           this.currentTab = {
             name: "首页",
             path: "/",
@@ -274,54 +176,19 @@ export default {
       },
       immediate: true,
     },
-    navBarFixed(value) {
-      console.log("navBarFixed", value);
-    },
-    showLoginDialog(value) {
-      this.loginVisible = value;
-    },
-    loginVisible(value) {
-      if (value) {
-        this.handleGetCaptcha();
-      }
-    },
+
     "$route.path"(cur) {
       this.getAbsolute(cur);
       this.isListPage(cur);
     },
   },
   data() {
-    var validateAccout = (rule, value, callback) => {
-      if (value === "") {
-        let text = this.isLoginByUsername ? "账号" : "手机号";
-        callback(new Error("请输入" + text));
-      } else {
-        if (!this.isLoginByUsername) {
-          var pattern = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
-          if (!pattern.test(value)) {
-            callback(new Error("请输入合法手机号/电话号"));
-          } else {
-            callback();
-          }
-        } else {
-          callback();
-        }
-      }
-    };
     return {
       pages: [
         {
           name: "首页",
           path: "/",
         },
-        // {
-        //   name: "虚拟展厅",
-        //   path: "/virtual",
-        // },
-        // {
-        //   name: "精品展",
-        //   path: "/boutique",
-        // },
         {
           name: "展览展示",
           path: "/display",
@@ -340,10 +207,6 @@ export default {
             },
           ],
         },
-        // {
-        //   name: "展览展示",
-        //   path: "/display",
-        // },
         {
           name: "文物展示",
           path: "/culturalRelic",
@@ -365,26 +228,6 @@ export default {
       isBoutique: false, //是否是精品展页
       isFixed: false,
       offsetTop: 0,
-      loginVisible: false,
-      loginForm: {
-        account: "",
-        password: "",
-        captcha: "",
-      },
-      requestCodeSuccess: false,
-      captchaImgSrc: "",
-      formLabelWidth: "1px",
-      labelPosition: "right",
-      loading: false,
-      loginRules: {
-        account: [
-          { validator: validateAccout, required: true, trigger: "blur" },
-        ],
-        password: [{ required: true, trigger: "blur", message: "请输入密码" }],
-        captcha: [{ required: true, trigger: "blur", message: "请输入验证码" }],
-      },
-      isLoginByUsername: true,
-      loadingText: "",
       showSubMenu: false,
       typeList: [
         {
@@ -434,13 +277,9 @@ export default {
       this.isFixed = scrollTop > this.offsetTop ? true : false;
     },
 
-    handleToRegister() {
-      this.$router.push("/register?redirect=" + this.$route.fullPath);
-      this.handleCloseLogin();
-    },
-
     handleToLogin() {
-      this.loginVisible = true;
+      this.$refs.LoginDialog.visible = true
+      // this.loginVisible = true;
     },
 
     handleToPersonal() {
@@ -470,79 +309,6 @@ export default {
       this.currentTab = tab;
     },
 
-    handleLoginSubmit() {
-      this.$refs.loginForm.validate((valid) => {
-        if (valid) {
-          // debugger
-          this.loading = true;
-          this.loadingText = "正在登录";
-          const { account, password, captcha } = this.loginForm;
-          const params = {
-            captcha,
-            password,
-          };
-          params.password = md5(params.password);
-          if (this.isLoginByUsername) {
-            params.username = account;
-          } else {
-            params.phone = account;
-          }
-          this.$store
-            .dispatch("user/login", params)
-            .then((res) => {
-              if (res.code == "0") {
-                this.$message.success("登录成功");
-                this.handleCloseLogin();
-                // if (this.$route.name !== "home") {
-                //   this.$router.push({
-                //     path: this.$route.query.redirect || "/",
-                //   });
-                // }
-                this.loading = false;
-              }
-            })
-            .catch((err) => {
-              console.log(err);
-              this.loading = false;
-            });
-        } else {
-          console.log("error submit!!");
-          return false;
-        }
-      });
-    },
-
-    handleCloseLogin() {
-      this.loginVisible = false;
-      this.$refs["loginForm"].resetFields;
-      if (this.showLoginDialog) {
-        this.$store.commit("app/OPEN_LOGIN_DIALOG", null);
-      }
-    },
-
-    handleGetCaptcha() {
-      this.currdatetime = new Date().getTime();
-      getVerify()
-        .then((res) => {
-          this.requestCodeSuccess = true;
-          const imgSrc = window.URL.createObjectURL(res);
-          this.captchaImgSrc = imgSrc;
-        })
-        .catch(() => {
-          this.requestCodeSuccess = false;
-        });
-    },
-
-    handleChangeLoginWay(type) {
-      this.isLoginByUsername = type === "username";
-      let line = document.getElementsByClassName("line")[0];
-      if (this.isLoginByUsername) {
-        line.style.left = "24px";
-      } else {
-        line.style.left = "136px";
-      }
-    },
-
     handleToPage(path, type, isOpenNewPage) {
       if (path) {
         if (isOpenNewPage) {
@@ -597,35 +363,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// #2069c4: #2069c4;
-
 .header-absolute {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 9;
   background-color: rgba(#000, 0.25) !important;
-  // background-color: rgba($themeColor, 0.3)!important;
 }
 
 .header-fixed {
   position: fixed !important;
-  background-color: $themeColor !important;
+  background-color: $deepBlue !important;
   z-index: 99;
   top: 0;
 }
 
 .show-themeColor {
-  background-color: $themeColor !important;
+  background-color: $deepBlue !important;
 }
 
 .isChStyle {
-  // background-color: #892325 !important;
   background-color: rgba(0, 0, 0, 0.25) !important;
 }
 
 .isRedStyle {
-  // background-color: #813525 !important;
   background-color: rgba(0, 0, 0, 0.25) !important;
 }
 
@@ -649,11 +410,10 @@ export default {
   height: $nav-height;
   width: 100%;
   transition: all 0.5s ease;
-  background-color: $themeColor;
+  background-color: $deepBlue;
   position: relative;
   z-index: 99;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
-  // padding-top: 10px;
   .container {
     width: 100%;
     height: 100%;
@@ -750,7 +510,6 @@ export default {
   }
 
   .submenu {
-    // background: #f8f8f8;
     background-color: rgba(0, 0, 0, 0.4);
     color: #fff;
     height: 50px;
@@ -762,15 +521,13 @@ export default {
     ul {
       display: flex;
       align-items: center;
-      // transform: translateX(50%); //往后移会导致不容易移动到想选择的子菜单中
-
       li {
         margin-right: 40px;
         cursor: pointer;
 
         &:hover {
           span {
-            color: $themeSecondaryColor;
+            color: $yellow;
           }
         }
 
@@ -789,6 +546,14 @@ export default {
   transform: translateY(-50%);
   .wrapper {
     transform: translateY(4px);
+    .search-pic {
+      color: #fff;
+      margin-right: 8px;
+      cursor: pointer;
+      &:hover {
+        color: $yellow;
+      }
+    }
   }
 
   .el-button {
@@ -827,140 +592,4 @@ export default {
   background-color: #f8f8f8;
   color: #8a919f;
 }
-
-.login {
-  .title {
-    display: flex;
-    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: 20px 0;
-    font-size: 14px;
-    cursor: pointer;
-
-    &:hover {
-      color: #2069c4;
-    }
-  }
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: center;
-}
-
-.captcha {
-  display: flex;
-  justify-content: flex-end;
-
-  img {
-    margin-top: 2px;
-    height: 40px;
-  }
-}
-
-::v-deep .loginBtn {
-  padding: 16px !important;
-  border-radius: 0 !important;
-  width: 100%;
-  background-color: #2069c4;
-  color: #fff;
-  font-size: 14px;
-
-  &:hover {
-    filter: brightness(0.9) !important;
-    background-color: #2069c4;
-    color: #fff;
-    border: none;
-    border-radius: 0 !important;
-    padding: 16px !important;
-    width: 100%;
-    font-size: 14px;
-  }
-}
-
-::v-deep .el-dialog {
-  width: 400px;
-  border-radius: 0;
-
-  .el-dialog__body {
-    padding: 20px 30px 60px !important;
-  }
-}
-
-::v-deep .el-input__inner {
-  background: #e8f0fe;
-  border: none;
-}
-
-::v-deep .el-dialog__header {
-  padding: 48px 30px 10px !important;
-  color: #666 !important;
-  font-weight: bold;
-}
-
-::v-deep .el-dialog__headerbtn {
-  top: 48px !important;
-  font-size: 24px;
-  right: 30px;
-}
-
-.login-title {
-  display: flex;
-  position: relative;
-
-  .title-item {
-    margin-right: 40px;
-    cursor: pointer;
-    position: relative;
-
-    &:hover {
-      color: #2069c4;
-    }
-  }
-
-  .active {
-    color: #2069c4;
-  }
-
-  .line {
-    width: 18px;
-    height: 4px;
-    background-color: #2069c4;
-    // border-radius: 4px;
-    position: absolute;
-    left: 24px;
-    bottom: -14px;
-    transition: all 0.3s ease;
-  }
-}
 </style>

src/components/ReaderOperations/index.vue

 <template>
   <div class="reader-operations">
-    <span class="operations" :style="{
+    <span
+      class="operations"
+      :style="{
         color,
-    }">
+      }"
+    >
       <span class="operation-item">
-        <svg-icon icon-class="view" :style="{
+        <svg-icon
+          icon-class="view"
+          :style="{
             fontSize: iconSize + 'px',
             color,
-        }"></svg-icon>
+          }"
+        ></svg-icon>
         <span>{{ formatNum(info.browseCount) }}</span>
       </span>
       <span class="operation-item">
-        <svg-icon @click="handleLike" :icon-class="info.loveCountStatus ? 'dianzan-s' : 'dianzan'" :style="{
+        <svg-icon
+          @click="handleLike"
+          :icon-class="info.loveCountStatus ? 'dianzan-s' : 'dianzan'"
+          :style="{
             fontSize: iconSize + 'px',
             color: info.loveCountStatus ? selectColor : color,
-        }"></svg-icon>
+          }"
+        ></svg-icon>
         <span>{{
           formatNum(info.loveCount) == 0 ? "点赞" : formatNum(info.loveCount)
         }}</span>
       </span>
       <span class="operation-item" @click="handleCollect">
-        <svg-icon :icon-class="info.collectCountStatus ? 'collect-s' : 'collect'" :style="{
+        <svg-icon
+          :icon-class="info.collectCountStatus ? 'collect-s' : 'collect'"
+          :style="{
             fontSize: iconSize + 'px',
             color: info.collectCountStatus ? selectColor : color,
-        }"></svg-icon>
+          }"
+        ></svg-icon>
         <span>{{
           formatNum(info.collectCount) == 0
             ? "收藏"
@@ -31,24 +44,39 @@
         }}</span>
       </span>
       <span class="operation-item" @click="handleShare">
-        <svg-icon icon-class="share2" :style="{
+        <svg-icon
+          icon-class="share2"
+          :style="{
             fontSize: iconSize + 'px',
             color,
-        }"></svg-icon>
+          }"
+        ></svg-icon>
         <span>分享</span>
       </span>
     </span>
-    <el-dialog title="登录提示" :visible.sync="loginDialogVisible" width="30%" :before-close="handleLoginClose"
-      append-to-body>
+    <el-dialog
+      title="登录提示"
+      :visible.sync="loginDialogVisible"
+      width="30%"
+      :before-close="handleLoginClose"
+      append-to-body
+    >
       <span>读者功能需登录进行使用，是否去登录？</span>
       <span slot="footer" class="dialog-footer">
         <el-button @click="loginDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click.native="handleToLogin">确 定</el-button>
+        <el-button type="primary" @click.native="handleToLogin"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
 
-    <el-dialog title="分享给朋友" :visible.sync="shareDialogVisible" width="40%" :before-close="handleShareClose"
-      append-to-body>
+    <el-dialog
+      title="分享给朋友"
+      :visible.sync="shareDialogVisible"
+      width="40%"
+      :before-close="handleShareClose"
+      append-to-body
+    >
       <!-- <div class="qrcode">
       </div> -->
       <div class="copy">
@@ -57,7 +85,9 @@
           <template slot="append">
             <el-button type="text" @click.native="copyUrl">
               <svg-icon icon-class="copy"></svg-icon>
-              复制链接</el-button></template>
+              复制链接</el-button
+            ></template
+          >
         </el-input>
       </div>
     </el-dialog>
@@ -128,8 +158,7 @@ export default {
           }
           setTimeout(() => {
             this.$emit("reload", this.info.crId || this.info.exhibitionId);
-          }, 300)
-
+          }, 300);
         });
       } else {
         this.loginDialogVisible = true;
@@ -161,7 +190,7 @@ export default {
           }
           setTimeout(() => {
             this.$emit("reload", this.info.crId || this.info.exhibitionId);
-          }, 300)
+          }, 300);
         });
       } else {
         this.loginDialogVisible = true;
@@ -239,7 +268,7 @@ export default {
 }
 
 .el-button--text {
-  color: $themeColor;
+  color: $deepBlue;
 }
 
 .copy {
@@ -271,7 +300,7 @@ export default {
 
   .el-button--primary {
     border: none;
-    background-color: $themeColor;
+    background-color: $deepBlue;
   }
 }
 </style>

src/components/SlideImageGroup/index.vue

 <template>
   <div class="slide-img-group">
     <div class="list">
-      <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
-        <swiper-slide class="slide-item" v-for="(item, index) in imgList" :key="index" @click="handleClickItem(item)">
+      <swiper
+        class="swiper gallery-thumbs"
+        :options="swiperOptionThumbs"
+        ref="swiperThumbs"
+      >
+        <swiper-slide
+          class="slide-item"
+          v-for="(item, index) in imgList"
+          :key="index"
+          @click="handleClickItem(item)"
+        >
           <!-- <img :src="item.pressUrl || item.faceImagePressUrl" alt="" /> -->
-          <div class="img-container" @click="handelPreviewImages(imgList, index)">
+          <div
+            class="img-container"
+            @click="handelPreviewImages(imgList, index)"
+          >
             <slot name="img" :item="item"></slot>
           </div>
           <slot name="info" :item="item" />
@@ -18,7 +30,6 @@
           </div> -->
         </swiper-slide>
 
-
         <!--分页器。如果放置在swiper外面，需要自定义样式。-->
       </swiper>
       <div class="swiper-pagination" slot="pagination"></div>
@@ -28,10 +39,13 @@
       <div class="swiper-button-prev swiper-button-white" slot="button-prev">
         <i class="el-icon-arrow-left"></i>
       </div>
-
     </div>
-    <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="previewList"
-      :initial-index="initialIndex" />
+    <el-image-viewer
+      v-if="imgViewerVisible"
+      :on-close="closeImgViewer"
+      :url-list="previewList"
+      :initial-index="initialIndex"
+    />
   </div>
 </template>
 
@@ -77,16 +91,16 @@ export default {
         },
       },
       imgViewerVisible: false,
-      initialIndex: 0
+      initialIndex: 0,
     };
   },
 
-  mounted() { },
+  mounted() {},
   methods: {
     handelPreviewImages(items, index) {
       this.imgViewerVisible = true;
       this.previewList = items.map((item) => this.$getFullUrl(item.url));
-      this.initialIndex = index
+      this.initialIndex = index;
     },
     closeImgViewer() {
       this.imgViewerVisible = false;
@@ -103,7 +117,7 @@ export default {
 .slide-img-group {
   // height: 100%;
   height: 240px;
-  .list{
+  .list {
     position: relative;
     display: flex;
     justify-content: center;
@@ -112,7 +126,7 @@ export default {
 
 .swiper-container {
   //   padding: 0 60px;
-  width:calc(100% - 140px);
+  width: calc(100% - 140px);
   // overflow-y: auto;
   ::v-deep .swiper-wrapper {
     display: flex;
@@ -164,7 +178,7 @@ export default {
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background-color: rgba($themeColor,0.4);
+  background-color: rgba($deepBlue, 0.4);
   transform: translateY(-20px);
   color: #333;
 }
@@ -193,18 +207,14 @@ export default {
 }
 
 ::v-deep .swiper-pagination-bullets {
-  bottom:-10px;
-  .swiper-pagination-bullet{
+  bottom: -10px;
+  .swiper-pagination-bullet {
     margin-right: 10px;
     width: 10px;
     height: 10px;
   }
-  .swiper-pagination-bullet-active{
-    background: $themeColor;
+  .swiper-pagination-bullet-active {
+    background: $deepBlue;
   }
 }
 </style>
-     
-     
-     
-     
\ No newline at end of file

src/components/Video/index.vue

 <template>
   <div :class="['video-container', theme]" @click="hanleClick">
-    <video :src="url" class="video-dom" ref="video" :controls="isPlaying"></video>
+    <video
+      :src="url"
+      class="video-dom"
+      ref="video"
+      :controls="isPlaying"
+    ></video>
     <div class="modal" :style="{ opacity: opacity }">
       <div class="play-btn">
         <i class="el-icon-caret-right"></i>
@@ -53,7 +58,7 @@ export default {
 };
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .video-container {
   position: relative;
   height: 100%;
@@ -120,8 +125,8 @@ export default {
 }
 .blue {
   .play-btn {
-    border: 2px solid $themeColor;
-    color: $themeColor;
+    border: 2px solid $deepBlue;
+    color: $deepBlue;
   }
 }
 </style>

src/components/VideoPlayer/index.vue

 <template>
   <div class="m-video">
-    <video-player ref="videoPlayer" @play="autoIncrement" @timeupdate="onPlayerTimeupdate($event)"
-      @ready="playerReadied" :playsinline="true" :options="playerOptions">
+    <video-player
+      ref="videoPlayer"
+      @play="autoIncrement"
+      @timeupdate="onPlayerTimeupdate($event)"
+      @ready="playerReadied"
+      :playsinline="true"
+      :options="playerOptions"
+    >
     </video-player>
   </div>
 </template>
@@ -16,14 +22,14 @@ export default {
   },
   computed: {
     player() {
-      return this.$refs.videoPlayer.player
+      return this.$refs.videoPlayer.player;
     },
   },
-  watch:{
-    src(newSrc){
-      console.log('newSrc',newSrc);
-      this.toggle(newSrc)
-    }
+  watch: {
+    src(newSrc) {
+      console.log("newSrc", newSrc);
+      this.toggle(newSrc);
+    },
   },
   data() {
     return {
@@ -76,11 +82,11 @@ export default {
       let player = this.$refs.videoPlayer.player;
       player.play();
     },
-    playerReadied(player) { },
+    playerReadied(player) {},
 
-    toggle(newSrc){
-      this.player.src(newSrc)
-    }
+    toggle(newSrc) {
+      this.player.src(newSrc);
+    },
   },
 };
 </script>
@@ -93,10 +99,10 @@ export default {
     height: 100%;
 
     .video-js {
-      &:hover{
-        .vjs-big-play-button{
+      &:hover {
+        .vjs-big-play-button {
           // background-color: #fff;
-          // color: $themeColor;
+          // color: $deepBlue;
         }
       }
       video {
@@ -117,7 +123,7 @@ export default {
         transform: translate(-50%, -50%);
         font-size: 50px;
         color: #fff;
-        background-color: $themeColor;
+        background-color: $deepBlue;
       }
 
       .vjs-control-bar {

src/views/boutique/index-old.vue

@@ -33,8 +33,10 @@
         <YLGDYW v-else-if="activeTab == 'ylgdyw'" />
         <JYYCC v-else-if="activeTab == 'jyycc'" />
         <div v-else class="img-container">
-          <img :src="require(`@/assets/imgs/boutique/${activeTab}.jpg`)
-          " alt="" />
+          <img
+            :src="require(`@/assets/imgs/boutique/${activeTab}.jpg`)"
+            alt=""
+          />
         </div>
       </div>
     </div>
@@ -42,14 +44,14 @@
 </template>
 
 <script>
-import mTabs from '@/views/home/components/Boutique.vue'
+import mTabs from "@/views/home/components/Boutique.vue";
 import SMGZ from "./components/SMGZ";
 import YLGDYW from "./components/YLGDYW";
 import JYYCC from "./components/jyycc";
 import { mapGetters } from "vuex";
 export default {
   name: "Boutique",
-  components: { mTabs, SMGZ, YLGDYW,JYYCC },
+  components: { mTabs, SMGZ, YLGDYW, JYYCC },
   data() {
     return {
       tabs: [
@@ -143,7 +145,7 @@ export default {
     position: relative;
     overflow: hidden;
 
-    >img {
+    > img {
       height: 500px;
       object-fit: cover;
     }
@@ -220,7 +222,7 @@ export default {
     overflow: hidden;
     z-index: 1;
 
-    >p {
+    > p {
       margin: 0;
       font-size: 46px;
       font-weight: 600;
@@ -235,7 +237,7 @@ export default {
       animation: hue 6s infinite linear;
     }
 
-    >span {
+    > span {
       font-weight: 600;
       font-family: "宋体";
       font-size: 24px;
@@ -255,13 +257,13 @@ export default {
     width: 100%;
     bottom: 0;
 
-    >li {
+    > li {
       flex: 1;
 
-      >div {
+      > div {
         text-align: center;
 
-        >span {
+        > span {
           font-size: 20px;
           color: #333;
           font-weight: 600;
@@ -278,14 +280,14 @@ export default {
               left: 0;
               width: 100%;
               bottom: -10px;
-              border-bottom: 3px solid $themeColor;
+              border-bottom: 3px solid $deepBlue;
               border-radius: 30px;
             }
           }
         }
 
         &.active {
-          >span {
+          > span {
             position: relative;
             color: #003fa7;
             text-shadow: 6px 2px 2px #999;
@@ -296,7 +298,7 @@ export default {
               left: 0;
               width: 100%;
               bottom: -10px;
-              border-bottom: 3px solid $themeColor;
+              border-bottom: 3px solid $deepBlue;
               border-radius: 30px;
             }
           }
@@ -306,7 +308,6 @@ export default {
   }
 
   .boutique-content {
-
     .focus-content {
       // padding: 20px 0;
       // margin: 20px;
@@ -320,7 +321,7 @@ export default {
       // font-weight: 600;
       // background: rgb(239 247 255);
 
-      >p {
+      > p {
         margin: 0;
       }
 

src/views/ccProduct/index.vue

@@ -8,22 +8,51 @@
     /> -->
     <div class="content-wrapper">
       <div class="content">
-        <el-row :gutter="40" class="search wow animate__animated animate__fadeIn">
+        <el-row
+          :gutter="40"
+          class="search wow animate__animated animate__fadeIn"
+        >
           <el-col :span="6">
-            <el-select class="years item" v-model="deptId" placeholder="请选择所属单位" filterable @change="handleDeptChange"
-              clearable>
-              <el-option v-for="(item, index) in deptList" :key="index" :label="item.name" :value="item.id">
+            <el-select
+              class="years item"
+              v-model="deptId"
+              placeholder="请选择所属单位"
+              filterable
+              @change="handleDeptChange"
+              clearable
+            >
+              <el-option
+                v-for="(item, index) in deptList"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              >
               </el-option>
             </el-select>
           </el-col>
           <el-col :span="6">
-            <el-cascader class="years item" v-model="regionCode" :options="regionTree" :props="culturalRegionProps"
-              placeholder="请选择所属地区" filterable @change="handleRegionChange" clearable popper-class="cascader"
-              :show-all-levels="false">
+            <el-cascader
+              class="years item"
+              v-model="regionCode"
+              :options="regionTree"
+              :props="culturalRegionProps"
+              placeholder="请选择所属地区"
+              filterable
+              @change="handleRegionChange"
+              clearable
+              popper-class="cascader"
+              :show-all-levels="false"
+            >
             </el-cascader>
           </el-col>
           <el-col :span="6">
-            <el-input class="input item" v-model="keyword" placeholder="请输入关键词" @keyup.enter.native="search" clearable>
+            <el-input
+              class="input item"
+              v-model="keyword"
+              placeholder="请输入关键词"
+              @keyup.enter.native="search"
+              clearable
+            >
             </el-input>
           </el-col>
           <el-col :span="6">
@@ -40,12 +69,26 @@
           件/套
         </div>
         <el-row :gutter="40" class="cr-list">
-          <el-col :span="item.status == 1 ? 6 : 0" class="cr-item" @click.native="handleClick(item)"
-            @mouseenter.native="handleEnterImg(item)" @mouseleave.native="handleLeaveImg(item)"
-            v-for="(item, index) in list.records" :key="index">
-            <div class="container wow animate__animated animate__fadeInUp" v-if="item.status == 1">
+          <el-col
+            :span="item.status == 1 ? 6 : 0"
+            class="cr-item"
+            @click.native="handleClick(item)"
+            @mouseenter.native="handleEnterImg(item)"
+            @mouseleave.native="handleLeaveImg(item)"
+            v-for="(item, index) in list.records"
+            :key="index"
+          >
+            <div
+              class="container wow animate__animated animate__fadeInUp"
+              v-if="item.status == 1"
+            >
               <div class="img-container">
-                <img :src="$getFullUrl(item.imagesVo[0].pressUrl)" width="100%" class="face-image" lazy />
+                <img
+                  :src="$getFullUrl(item.imagesVo[0].pressUrl)"
+                  width="100%"
+                  class="face-image"
+                  lazy
+                />
               </div>
               <div class="desc">
                 <div class="name">{{ item.title }}</div>
@@ -73,11 +116,21 @@
             </div>
           </el-col>
         </el-row>
-        <el-empty description="暂无数据" v-if="list.records.length == 0"></el-empty>
+        <el-empty
+          description="暂无数据"
+          v-if="list.records.length == 0"
+        ></el-empty>
         <div class="pagination-container">
-          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-            :current-page="Number(list.current)" :page-sizes="[20, 40, 100]" :page-size="Number(list.size)"
-            layout="total, prev, pager, next" :total="Number(list.total)" class="pagination">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="Number(list.current)"
+            :page-sizes="[20, 40, 100]"
+            :page-size="Number(list.size)"
+            layout="total, prev, pager, next"
+            :total="Number(list.total)"
+            class="pagination"
+          >
           </el-pagination>
         </div>
       </div>
@@ -242,20 +295,19 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-$blue: $themeColor;
+$blue: $deepBlue;
 $text-indent: 16px;
 
 .cultural-relic {
   width: 100%;
 
-  // background-color: $themeColor;
+  // background-color: $deepBlue;
   // color: #fff;
   .content-wrapper {
     padding-top: 60px;
     background-color: #fff;
     padding-bottom: 126px;
 
-
     .content {
       // width: 100%;
       box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
@@ -273,19 +325,18 @@ $text-indent: 16px;
       }
 
       .total {
-        padding-bottom:16px;
+        padding-bottom: 16px;
         display: flex;
         justify-content: flex-end;
         font-size: 16px;
         align-items: center;
         .list-total-num {
           font-size: 24px;
-          color: $themeSecondaryColor;
+          color: $yellow;
           margin: 0 6px;
         }
       }
 
-
       .cr-list {
         // padding: 0 74px;
 
@@ -301,14 +352,13 @@ $text-indent: 16px;
             transition: all 0.5s ease;
 
             &:hover {
-              border: 2px solid $themeColor;
+              border: 2px solid $deepBlue;
 
               .face-image {
                 transform: scale(1.2);
               }
 
               .img-container {
-
                 .deco-left-top,
                 .deco-left-bottom,
                 .deco-right-top,
@@ -316,12 +366,10 @@ $text-indent: 16px;
                   display: block;
                 }
               }
-
-          
             }
 
             .img-container {
-              background-color: rgba($themeColor, 0.1);
+              background-color: rgba($deepBlue, 0.1);
               height: 268px;
               cursor: pointer;
               transition: all 0.5s ease;
@@ -383,7 +431,7 @@ $text-indent: 16px;
               .name {
                 font-size: 18px;
                 font-weight: bold;
-                color: $themeColor;
+                color: $deepBlue;
                 margin-bottom: 18px;
               }
 
@@ -468,5 +516,4 @@ $text-indent: 16px;
     height: 116px;
   }
 }
-
 </style>

src/views/culturalRelic/Detail.vue

@@ -477,7 +477,7 @@ export default {
         images: this.imgList,
         options: {
           initialViewIndex: index,
-          zoomRatio:1.4,
+          zoomRatio: 1.4,
         },
       });
     },
@@ -894,7 +894,7 @@ $node-w: 700px;
       .swiper-button-prev {
         background-image: none;
         border: 2px solid #666;
-        background-color: rgba($themeColor, 0.5);
+        background-color: rgba($deepBlue, 0.5);
         width: 60px;
         height: 60px;
         border-radius: 50%;
@@ -952,7 +952,7 @@ $node-w: 700px;
         &:hover,
         &.active {
           cursor: pointer;
-          // background-color: $themeColor;
+          // background-color: $deepBlue;
           background-image: url(@/assets/imgs/show/outer-active.png);
 
           > span {
@@ -1001,7 +1001,7 @@ $node-w: 700px;
 
     :hover {
       background: #fff;
-      color: $themeColor;
+      color: $deepBlue;
     }
   }
 }

src/views/culturalRelic/detail-bp.vue

@@ -22,11 +22,7 @@
         <div class="content-item display-detail_basic_info">
           <div class="info-container">
             <div
-                class="
-                  info-container-left
-                  wow
-                  animate__animated animate__fadeInLeft
-                "
+              class="info-container-left wow animate__animated animate__fadeInLeft"
             >
               <SlideImage
                 :imgList="CRDetail.imagesVo"
@@ -39,11 +35,7 @@
             </div>
 
             <div
-                class="
-                  info-container-right
-                  wow
-                  animate__animated animate__fadeInRight
-                "
+              class="info-container-right wow animate__animated animate__fadeInRight"
             >
               <div class="info-title">
                 <span>{{ CRDetail.name }} </span>
@@ -341,21 +333,21 @@
       :url-list="imgList"
     />
   </div>
-  </template>
+</template>
 
-    <script>
-  // import SearchBar from "@/components/SearchBar";
-  // import CustomTitle from "@/components/CustomTitle";
-  // import QRCode from "qrcodejs2";
-  import AudioPlayer from "@/components/AudioPlayer";
-  import Video from "@/components/Video";
-  import ReaderOperations from "@/components/ReaderOperations";
-  import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic";
-  import { previewFile } from "@/utils/index";
-  import videoPlayer from "@/components/VideoPlayer";
-  import SlideImage from "@/components/SlideImage";
-  import { isElementInViewport2 } from "@/utils/index";
-  export default {
+<script>
+// import SearchBar from "@/components/SearchBar";
+// import CustomTitle from "@/components/CustomTitle";
+// import QRCode from "qrcodejs2";
+import AudioPlayer from "@/components/AudioPlayer";
+import Video from "@/components/Video";
+import ReaderOperations from "@/components/ReaderOperations";
+import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic";
+import { previewFile } from "@/utils/index";
+import videoPlayer from "@/components/VideoPlayer";
+import SlideImage from "@/components/SlideImage";
+import { isElementInViewport2 } from "@/utils/index";
+export default {
   components: {
     AudioPlayer,
     ReaderOperations,
@@ -581,26 +573,26 @@
       });
     },
   },
-  };
-  </script>
+};
+</script>
 
-    <style lang="scss" >
-  // 自定义分页器样式
-  #page {
+<style lang="scss">
+// 自定义分页器样式
+#page {
   height: 30px;
   display: flex;
   justify-content: center;
-  }
-  .page-item {
+}
+.page-item {
   cursor: pointer;
-  }
-  </style>
+}
+</style>
 
-    <style lang="scss" scoped>
-  // 中国风主题样式
-  /**公共样式开始 */
-  $titleFontFamily: SourceHanSerifCN-Bold;
-  .custom-title {
+<style lang="scss" scoped>
+// 中国风主题样式
+/**公共样式开始 */
+$titleFontFamily: SourceHanSerifCN-Bold;
+.custom-title {
   width: 50px;
   background-color: #d72f3f;
   min-height: 300px;
@@ -612,21 +604,21 @@
   justify-content: center;
   box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
   letter-spacing: 10px;
-  }
-  .units {
+}
+.units {
   background-image: linear-gradient(to bottom, #660d04, #520002);
   min-height: 400px;
-  }
-  .content {
+}
+.content {
   // background: url("@/assets/imgs/display/normal/bg1.png");
   background-color: #f3f3f3;
   min-height: 100px;
-  }
-  .content-item {
+}
+.content-item {
   width: 100%;
-  }
+}
 
-  .custom_title {
+.custom_title {
   display: flex;
   width: 100%;
   padding: 50px 0 40px 0;
@@ -638,13 +630,13 @@
     align-items: center;
     .svg-icon {
       font-size: 50px;
-        color: $themeColor;
+      color: $deepBlue;
       margin-right: 10px;
     }
     .title {
       font-size: 26px;
       font-weight: 400;
-        color: $themeColor;
+      color: $deepBlue;
       line-height: 101px;
     }
   }
@@ -669,9 +661,9 @@
       }
     }
   }
-  }
+}
 
-  .enlarge {
+.enlarge {
   position: absolute;
   bottom: 20px;
   right: 40px;
@@ -690,12 +682,12 @@
     width: 24px;
     height: 24px;
   }
-  }
+}
 
-  .intro-title {
+.intro-title {
   font-size: 26px;
   font-weight: 400;
-    color: $themeColor;
+  color: $deepBlue;
   font-family: "SourceHanSerifCN-Bold";
   display: flex;
   align-items: center;
@@ -704,18 +696,18 @@
     margin-right: 10px;
     font-size: 36px;
   }
-  }
+}
 
-  .isFixed {
+.isFixed {
   position: fixed;
   left: 0;
   top: $nav-height;
   z-index: 99;
-  }
-  /**公共样式结束 */
+}
+/**公共样式结束 */
 
-  /**样式开始 */
-  .content {
+/**样式开始 */
+.content {
   width: 100%;
   overflow: hidden;
   display: flex;
@@ -848,7 +840,7 @@
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                  background-color: $themeColor;
+                background-color: $deepBlue;
                 margin: 20px 0;
                 color: #fff;
                 cursor: pointer;
@@ -879,7 +871,7 @@
                     color: #831122;
                   }
                   .collect {
-                      color: $themeColor;
+                    color: $deepBlue;
                   }
                 }
               }
@@ -893,7 +885,7 @@
           cursor: pointer;
           animation: audioRotate 8s linear infinite;
           transform-origin: center center;
-            border: 2px solid $themeColor;
+          border: 2px solid $deepBlue;
           padding: 10px;
           border-radius: 50%;
           display: flex;
@@ -905,7 +897,7 @@
             box-shadow: 0 0 14px rgb(0 0 0 / 40%);
           }
           .svg-icon {
-              color: $themeColor;
+            color: $deepBlue;
             font-size: 80px;
           }
           img {
@@ -931,7 +923,7 @@
           position: relative;
 
           &:hover {
-              color: $themeColor;
+            color: $deepBlue;
             &::after {
               display: inline-block;
             }
@@ -941,7 +933,7 @@
           }
         }
         .active {
-            color: $themeColor;
+          color: $deepBlue;
           &::after {
             display: inline-block;
           }
@@ -954,7 +946,7 @@
           width: 100%;
           bottom: -10px;
           left: 0;
-            background-color: $themeColor;
+          background-color: $deepBlue;
         }
       }
       /**简介和视频 */
@@ -967,7 +959,7 @@
         }
         .left-box {
           width: 60px;
-            background-color: $themeColor;
+          background-color: $deepBlue;
           min-height: 200px;
           color: #fff;
           font-size: 28px;
@@ -982,7 +974,7 @@
           flex: 1;
           text-indent: 34px;
           padding: 16px 32px;
-            background-color: rgba($themeColor, 10%);
+          background-color: rgba($deepBlue, 10%);
         }
       }
 
@@ -995,7 +987,7 @@
           // justify-content: center;
           align-items: center;
           font-size: 26px;
-            color: $themeColor;
+          color: $deepBlue;
           margin: 80px 0 40px;
           font-family: SourceHanSerifCN-Bold;
           padding-left: 46px;
@@ -1017,7 +1009,7 @@
               position: relative;
               cursor: pointer;
               &:hover {
-                  color: $themeColor;
+                color: $deepBlue;
                 &::after {
                   display: inline-block;
                 }
@@ -1031,7 +1023,7 @@
               content: "";
               width: 50%;
               height: 1px;
-                background-color: $themeColor;
+              background-color: $deepBlue;
               position: absolute;
               left: 0;
               bottom: -9px;
@@ -1045,7 +1037,7 @@
               width: 0;
               height: 0;
               border: 8px solid transparent;
-                border-top-color: $themeColor;
+              border-top-color: $deepBlue;
               position: absolute;
               left: 50%;
               bottom: -25px;
@@ -1119,84 +1111,84 @@
       }
     }
   }
-  }
-  ::v-deep .el-carousel__item--card {
+}
+::v-deep .el-carousel__item--card {
   width: 100%;
   height: 100%;
   transform: translateX(0) scale(1) !important;
-  }
+}
 
-  ::v-deep .el-carousel {
+::v-deep .el-carousel {
   height: 100%;
-  }
-  ::v-deep .el-carousel__container {
+}
+::v-deep .el-carousel__container {
   height: 100%;
-  }
-  ::v-deep .el-tree {
+}
+::v-deep .el-tree {
   background: transparent;
   .el-tree-node__content {
     height: 50px;
     :hover {
       background: #fff;
-        color: $themeColor;
+      color: $deepBlue;
     }
   }
-  }
-  ::v-deep .el-radio__input {
+}
+::v-deep .el-radio__input {
   display: none;
-  }
+}
 
-  ::v-deep .el-radio__label {
+::v-deep .el-radio__label {
   font-size: 18px;
   padding-left: 0;
   font-family: SourceHanSerifCN-Bold;
-  }
-  ::v-deep .el-radio__input.is-checked + .el-radio__label {
-    color: $themeColor;
-  }
-  // ::v-deep .el-radio-button:first-child .el-radio-button__inner{
-  //   border-radius: 0;
-  // }
-  // ::v-deep .el-radio-button:last-child .el-radio-button__inner{
-  //   border-radius: 0;
-  // }
-  @keyframes filmMoveLeft {
+}
+::v-deep .el-radio__input.is-checked + .el-radio__label {
+  color: $deepBlue;
+}
+// ::v-deep .el-radio-button:first-child .el-radio-button__inner{
+//   border-radius: 0;
+// }
+// ::v-deep .el-radio-button:last-child .el-radio-button__inner{
+//   border-radius: 0;
+// }
+@keyframes filmMoveLeft {
   0% {
     transform: translateX(0);
   }
   100% {
     transform: translateX(-1200px);
   }
-  }
-  @keyframes filmMoveRight {
+}
+@keyframes filmMoveRight {
   0% {
     transform: translateX(0);
   }
   100% {
     transform: translateX(1200px);
   }
-  }
+}
 
-  @keyframes audioRotate {
+@keyframes audioRotate {
   0% {
     transform: rotateZ(0deg);
   }
   100% {
     transform: rotateZ(360deg);
   }
-  }
+}
 
-  @-webkit-keyframes audioRotate {
+@-webkit-keyframes audioRotate {
   0% {
     transform: rotateZ(0deg);
   }
   100% {
     transform: rotateZ(360deg);
   }
-  }
+}
 
-  .animation-play-paused {
+.animation-play-paused {
   animation-play-state: paused;
   -webkit-animation-play-state: paused; /* Safari 和 Chrome */
-  }
-  </style>
\ No newline at end of file
+}
+</style>

src/views/culturalRelic/index-hasbg.vue

 <template>
   <div class="cultural-relic">
-    <ListBanner title="共计已上线文物" :num="list.total" unit="件/套" :info="['文物','展示']"/>
+    <ListBanner
+      title="共计已上线文物"
+      :num="list.total"
+      unit="件/套"
+      :info="['文物', '展示']"
+    />
     <div class="search-bar wow animate__animated animate__fadeIn">
       <div class="search-wrapper">
         <div class="search-item" @click="handleClickSearchBar('type')">
@@ -26,7 +31,6 @@
           <i class="el-icon-search"></i>
         </div>
       </div>
-
     </div>
     <transition name="el-zoom-in-top">
       <div class="search-panel" v-show="showSearchPanel">
@@ -554,7 +558,7 @@ $text-indent: 16px;
             text-align: center;
             text-align: center;
             &:hover {
-              // border: 2px solid $themeColor;
+              // border: 2px solid $deepBlue;
 
               // border-radius: 100%;
 
@@ -574,7 +578,6 @@ $text-indent: 16px;
                 }
               }
 
-
               .hover-bg {
                 > div {
                   opacity: 1;
@@ -683,7 +686,7 @@ $text-indent: 16px;
               .name {
                 font-size: 18px;
                 font-weight: bold;
-                color: $themeColor;
+                color: $deepBlue;
                 margin-bottom: 18px;
                 width: 100%;
                 white-space: nowrap;
@@ -869,7 +872,7 @@ $text-indent: 16px;
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    background: $themeColor;
+    background: $deepBlue;
     min-width: 0;
     margin: 0 10px;
     color: #b7b7b7;

src/views/culturalRelic/index.vue

@@ -10,13 +10,21 @@
       <div class="search-wrapper">
         <el-row :gutter="40">
           <el-col :span="6">
-            <div class="search-item" id="type-select" @click.lazy="handleClickSearchBar('type')">
+            <div
+              class="search-item"
+              id="type-select"
+              @click.lazy="handleClickSearchBar('type')"
+            >
               <span>{{ currentType }}</span>
               <i class="el-icon-caret-bottom"></i>
             </div>
           </el-col>
           <el-col :span="6">
-            <div class="search-item" id="year-select" @click="handleClickSearchBar('years')">
+            <div
+              class="search-item"
+              id="year-select"
+              @click="handleClickSearchBar('years')"
+            >
               <span>{{ currentYears }}</span>
               <i class="el-icon-caret-bottom"></i>
             </div>
@@ -142,7 +150,7 @@
 import ListBanner from "@/components/ListBanner";
 import { getCulturalRelicList, getCrExistDict } from "@/api/culturalRelic";
 import { mapGetters } from "vuex";
-import {debounce} from '@/utils/utils'
+import { debounce } from "@/utils/utils";
 export default {
   name: "CulturalRelic",
   components: { ListBanner },
@@ -172,7 +180,7 @@ export default {
       currentYears: "文物年代",
       yearList: [],
       typeList: [],
-      windowClick: null
+      windowClick: null,
     };
   },
   computed: {
@@ -208,36 +216,7 @@ export default {
     });
     this.typeList = typeList;
     this.yearList = yearList;
-    // await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]);
-    // for (const key in this.dicts.culturalRelicType) {
-    //     typeList.push({
-    //         label: this.dicts.culturalRelicType[key],
-    //         value: key,
-    //     });
-    // }
-
-    // let res = await this.$store.dispatch("dict/getDictTree", [
-    //     "culturalRelicYears",
-    // ]);
-    // this.culturalRelicYears = res.culturalRelicYears;
-    // traveseYears(this.culturalRelicYears);
-
-    // // 获取叶子节点
-    // function traveseYears(arr) {
-    //     if (arr && arr.length > 0) {
-    //         arr.map((item) => {
-    //             if (item.children && item.children.length > 0) {
-    //                 traveseYears(item.children);
-    //             } else {
-    //                 yearList.push({
-    //                     value: item.value,
-    //                     label: item.label,
-    //                 });
-    //             }
-    //         });
-    //     }
-    // }
-    this.windowClick = debounce(this.handleWindowClick, 200, true)
+    this.windowClick = debounce(this.handleWindowClick, 200, true);
     window.addEventListener("click", this.windowClick);
   },
   mounted() {
@@ -251,9 +230,6 @@ export default {
       this.onlyShow3d = value;
       this.search();
     },
-    // keyword(value) {
-    //   debounce(this.handleKeyWordChange(value), 1000); //500ms
-    // },
   },
   methods: {
     search() {
@@ -361,16 +337,20 @@ export default {
       this.showSearchPanel = false;
     },
     handleWindowClick(em) {
-      let parent = document.getElementsByClassName('search-panel')[0]
-      let parent2 = document.getElementById('type-select')
-      let parent3 = document.getElementById('year-select')
-      if (parent.contains(em.target) || parent2.contains(em.target) || parent3.contains(em.target)) {
-        return
+      let parent = document.getElementsByClassName("search-panel")[0];
+      let parent2 = document.getElementById("type-select");
+      let parent3 = document.getElementById("year-select");
+      if (
+        parent.contains(em.target) ||
+        parent2.contains(em.target) ||
+        parent3.contains(em.target)
+      ) {
+        return;
       } else {
-        this.showSearchPanel = false
-      }
+        this.showSearchPanel = false;
       }
     },
+  },
 };
 </script>
 
@@ -380,7 +360,7 @@ $text-indent: 16px;
 .cultural-relic {
   width: 100%;
 
-  // background-color: $themeColor;
+  // background-color: $deepBlue;
   // color: #fff;
   .search-bar {
     display: flex;
@@ -388,7 +368,7 @@ $text-indent: 16px;
     flex-direction: column;
     // padding: 24px 20%;
     // padding: 16px 13%;
-    padding:48px 0 16px;
+    padding: 48px 0 16px;
     background: #fff;
     .search-wrapper {
       //   display: flex;
@@ -416,15 +396,15 @@ $text-indent: 16px;
         margin-right: 20px;
         cursor: pointer;
 
-        i{
+        i {
           font-size: 18px;
-          &:hover{
+          &:hover {
             color: #000;
           }
         }
-        .svg-icon{
+        .svg-icon {
           font-size: 18px;
-          &:hover{
+          &:hover {
             color: #000;
           }
         }
@@ -502,6 +482,7 @@ $text-indent: 16px;
     display: flex;
     justify-content: center;
     font-weight: 600;
+    background-color: rgba($color: $deepBlue, $alpha: 0.3);
 
     ::v-deep .el-scrollbar__view {
       display: flex;
@@ -531,6 +512,9 @@ $text-indent: 16px;
 
         .text {
           cursor: pointer;
+          &:hover {
+            color: $deepBlue;
+          }
         }
 
         .divider {
@@ -583,7 +567,7 @@ $text-indent: 16px;
             transition: all 0.5s ease;
 
             &:hover {
-              //   border: 2px solid $themeColor;
+              //   border: 2px solid $deepBlue;
 
               .face-image {
                 transform: scale(1.2);
@@ -597,7 +581,6 @@ $text-indent: 16px;
                   display: block;
                 }
               }
-
             }
 
             .img-container {
@@ -668,7 +651,7 @@ $text-indent: 16px;
                 font-size: 20px;
                 padding: 20px 0;
                 // font-weight: bold;
-                // color: $themeColor;
+                // color: $deepBlue;
                 color: #333;
                 // margin-bottom: 18px;
                 width: 100%;
@@ -803,7 +786,7 @@ $text-indent: 16px;
     background: #fff;
     min-width: 0;
     margin: 0 16px;
-    color: $themeColor;
+    color: $deepBlue;
   }
 
   .active {

src/views/display/components/ChStyle-old.vue

@@ -2,12 +2,7 @@
   <div class="ch-style">
     <div class="content" id="content">
       <div
-        class="
-          content-item
-          sliders
-          wow
-          animate__animated animate__fadeInRightBig
-        "
+        class="content-item sliders wow animate__animated animate__fadeInRightBig"
         ref="imgs"
         v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
       >
@@ -55,12 +50,12 @@
               <el-row>
                 <el-col class="item">
                   <div class="label">关键词：</div>
-                  <div class="value">{{ displayDetail.keyword ||'暂无'}}</div>
+                  <div class="value">{{ displayDetail.keyword || "暂无" }}</div>
                 </el-col>
                 <el-col class="item" v-if="dicts.displayType">
                   <div class="label">展览类型：</div>
                   <div class="value">
-                    {{ dicts.displayType[displayDetail.type]||'暂无' }}
+                    {{ dicts.displayType[displayDetail.type] || "暂无" }}
                   </div>
                 </el-col>
               </el-row>
@@ -68,12 +63,17 @@
                 <el-col class="item" v-if="dicts.displayCharacter">
                   <div class="label">展览性质：</div>
                   <div class="value">
-                    {{ dicts.displayCharacter[displayDetail.displayCharacter] ||'暂无'}}
+                    {{
+                      dicts.displayCharacter[displayDetail.displayCharacter] ||
+                      "暂无"
+                    }}
                   </div>
                 </el-col>
                 <el-col class="item">
                   <div class="label">展览单位：</div>
-                  <div class="value">{{ displayDetail.deptName ||'暂无'}}</div>
+                  <div class="value">
+                    {{ displayDetail.deptName || "暂无" }}
+                  </div>
                 </el-col>
               </el-row>
             </div>
@@ -120,12 +120,7 @@
             </el-carousel>
           </div> -->
           <div
-            class="
-              content-item
-              videos
-              wow
-              animate__animated animate__fadeInRight
-            "
+            class="content-item videos wow animate__animated animate__fadeInRight"
             v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
           >
             <div class="video-title">
@@ -536,8 +531,8 @@ export default {
 </script>
 
 <style lang="scss">
-.intro-content{
-  p{
+.intro-content {
+  p {
     font-family: $defaultFontFamily !important;
   }
 }
@@ -1061,7 +1056,7 @@ $themeRed: #892325;
 
   a:hover {
     cursor: pointer;
-    color: $themeColor;
+    color: $deepBlue;
   }
 }
 

src/views/display/components/ChStyle.vue

@@ -2,15 +2,32 @@
   <div class="ch-style">
     <div class="content" id="content">
       <div class="e-imgs">
-        <swiper class="swiper gallery-top" :options="swiperOption" ref="swiperTop">
-          <swiper-slide class="slide-item" v-for="(item, index) in displayDetail.imagesVo" :key="index">
-            <img :src="$getFullUrl(item.middleUrl || item.pressUrl)" style="cursor:pointer"
-              @click="handelPreviewImages(displayDetail.imagesVo, index)" />
+        <swiper
+          class="swiper gallery-top"
+          :options="swiperOption"
+          ref="swiperTop"
+        >
+          <swiper-slide
+            class="slide-item"
+            v-for="(item, index) in displayDetail.imagesVo"
+            :key="index"
+          >
+            <img
+              :src="$getFullUrl(item.middleUrl || item.pressUrl)"
+              style="cursor: pointer"
+              @click="handelPreviewImages(displayDetail.imagesVo, index)"
+            />
           </swiper-slide>
-          <div class="swiper-button-next swiper-button-white" slot="button-next">
+          <div
+            class="swiper-button-next swiper-button-white"
+            slot="button-next"
+          >
             <i class="el-icon-arrow-right"></i>
           </div>
-          <div class="swiper-button-prev swiper-button-white" slot="button-prev">
+          <div
+            class="swiper-button-prev swiper-button-white"
+            slot="button-prev"
+          >
             <i class="el-icon-arrow-left"></i>
           </div>
         </swiper>
@@ -21,7 +38,11 @@
             {{ displayDetail.title }}
           </div>
           <div class="e-tools">
-            <ReaderOperations :info="displayDetail" :sourceType="'biz_exhibition'" @reload="reload" />
+            <ReaderOperations
+              :info="displayDetail"
+              :sourceType="'biz_exhibition'"
+              @reload="reload"
+            />
           </div>
           <div class="e-info">
             <div class="info-item">
@@ -46,7 +67,9 @@
             </div>
             <div class="info-item">
               <span class="label"> 展览地区： </span>
-              <span class="value">{{ displayDetail.regionName || "暂无" }}</span>
+              <span class="value">{{
+                displayDetail.regionName || "暂无"
+              }}</span>
             </div>
           </div>
         </div>
@@ -57,26 +80,45 @@
             <div class="text" v-html="displayDetail.intro"></div>
           </div>
         </div>
-        <div class="e-units wow animate__animated animate__fadeInUp" ref="units"
-          v-if="displayDetail.exhibitionUnits.length > 0">
+        <div
+          class="e-units wow animate__animated animate__fadeInUp"
+          ref="units"
+          v-if="displayDetail.exhibitionUnits.length > 0"
+        >
           <div class="units-title">展览单元</div>
           <div class="units-content" v-if="currentUnit">
             <div class="left">
-              <div class="line" :style="{
-                height: (displayDetail.exhibitionUnits.length - 1) * 130 + 'px',
-              }"></div>
+              <div
+                class="line"
+                :style="{
+                  height:
+                    (displayDetail.exhibitionUnits.length - 1) * 130 + 'px',
+                }"
+              ></div>
               <div class="dots">
-                <div class="dot-item" v-for="(item, index) in displayDetail.exhibitionUnits" :key="index"
-                  :style="{ top: index * 130 - 17 + 'px' }" @click="handleClickUnitTitle(item)"
-                  @mouseenter="handleMouseEnterUnit(item)" @mouseleave="handleMouseLeaveUnit">
-                  <div class="circle" :style="{
-                    'background-image': `url(${require(`@/assets/imgs/display/red/${currentUnit.title == item.title ? 'circle-s' : 'circle'
+                <div
+                  class="dot-item"
+                  v-for="(item, index) in displayDetail.exhibitionUnits"
+                  :key="index"
+                  :style="{ top: index * 130 - 17 + 'px' }"
+                  @click="handleClickUnitTitle(item)"
+                  @mouseenter="handleMouseEnterUnit(item)"
+                  @mouseleave="handleMouseLeaveUnit"
+                >
+                  <div
+                    class="circle"
+                    :style="{
+                      'background-image': `url(${require(`@/assets/imgs/display/red/${
+                        currentUnit.title == item.title ? 'circle-s' : 'circle'
                       }.png`)})`,
-                  }"></div>
-                  <div :class="{
+                    }"
+                  ></div>
+                  <div
+                    :class="{
                       title: true,
                       active: currentUnit.title == item.title,
-                  }">
+                    }"
+                  >
                     {{ item.title }}
                   </div>
                 </div>
@@ -84,52 +126,98 @@
             </div>
             <div class="right-content">
               <div class="unit-content">
-                <div class="unit-content-container" v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo"
-                  :key="unitTitle">
+                <div
+                  class="unit-content-container"
+                  v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo"
+                  :key="unitTitle"
+                >
                   <div class="unit-content-title">
                     {{ unitTitle }}
                   </div>
-                  <div class="text-indent unit-content_intro" v-if="currentUnit.intro" v-html="unitValue.intro"></div>
-                  <div class="unit-content_images" v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0">
+                  <div
+                    class="text-indent unit-content_intro"
+                    v-if="currentUnit.intro"
+                    v-html="unitValue.intro"
+                  ></div>
+                  <div
+                    class="unit-content_images"
+                    v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"
+                  >
                     <!-- <div class="imgs-title">单元图片</div> -->
                     <div class="unit-imgs">
-                      <SlideImageGroup :imgList="unitValue.imagesVo" :needEnlarge="true"
-                        v-if="unitValue.imagesVo.length > 3">
+                      <SlideImageGroup
+                        :imgList="unitValue.imagesVo"
+                        :needEnlarge="true"
+                        v-if="unitValue.imagesVo.length > 3"
+                      >
                         <template slot-scope="{ item }" slot="img">
-                          <img :src="$getFullUrl(item.middleUrl || item.url)" alt=""
-                            style="width: 100%; height: 100%; object-fit: contain" />
+                          <img
+                            :src="$getFullUrl(item.middleUrl || item.url)"
+                            alt=""
+                            style="
+                              width: 100%;
+                              height: 100%;
+                              object-fit: contain;
+                            "
+                          />
                         </template>
                       </SlideImageGroup>
-                      <el-row v-if="
+                      <el-row
+                        v-if="
                           unitValue.imagesVo.length > 0 &&
                           unitValue.imagesVo.length < 4
-                      " :gutter="10">
-                        <el-col v-for="(item, index) in unitValue.imagesVo" :key="index"
-                          :span="24 / unitValue.imagesVo.length" style="height: 300px;">
-                          <img :src="$getFullUrl(item.middleUrl || item.url)" alt="" style="
+                        "
+                        :gutter="10"
+                      >
+                        <el-col
+                          v-for="(item, index) in unitValue.imagesVo"
+                          :key="index"
+                          :span="24 / unitValue.imagesVo.length"
+                          style="height: 300px"
+                        >
+                          <img
+                            :src="$getFullUrl(item.middleUrl || item.url)"
+                            alt=""
+                            style="
                               width: 100%;
                               height: 100%;
                               object-fit: contain;
                               cursor: pointer;
-                          " @click="handelPreviewImages(unitValue.imagesVo, index)" />
+                            "
+                            @click="
+                              handelPreviewImages(unitValue.imagesVo, index)
+                            "
+                          />
                         </el-col>
                       </el-row>
                     </div>
                   </div>
 
-                  <div class="unit-content_crs" v-if="
+                  <div
+                    class="unit-content_crs"
+                    v-if="
                       unitValue.culturalRelics &&
                       unitValue.culturalRelics.length > 0
-                  ">
+                    "
+                  >
                     <div class="imgs-title">相关文物</div>
                     <SlideImageGroup :imgList="unitValue.culturalRelics">
                       <template slot-scope="{ item }" slot="img">
-                        <img :src="$getFullUrl(item.faceImageMiddleUrl || item.faceImagePressUrl)" alt="" style="
+                        <img
+                          :src="
+                            $getFullUrl(
+                              item.faceImageMiddleUrl || item.faceImagePressUrl
+                            )
+                          "
+                          alt=""
+                          style="
                             width: 100%;
                             height: 100%;
                             object-fit: fill;
                             cursor: pointer;
-                        " @click="handleToCr(item)" />
+                          "
+                          @click="handleToCr(item)"
+                        />
                       </template>
                       <template slot-scope="{ item }" slot="info">
                         <div class="name">{{ item.name }}</div>
@@ -142,35 +230,41 @@
           </div>
         </div>
 
-        <div class="
-          e-video
-          wow
-          animate__animated animate__fadeInRight
-        " v-if="currentVideo.url">
-          <div class="video-title">
-            展览视频
-          </div>
+        <div
+          class="e-video wow animate__animated animate__fadeInRight"
+          v-if="currentVideo.url"
+        >
+          <div class="video-title">展览视频</div>
           <div class="video-content">
-
-            <video-player v-if="currentVideo.url" :src="$getFullUrl(currentVideo.url)" class="video-box"></video-player>
+            <video-player
+              v-if="currentVideo.url"
+              :src="$getFullUrl(currentVideo.url)"
+              class="video-box"
+            ></video-player>
             <div class="video-names">
-              <div :class="{
-                'video-item': true, active: currentVideo && item.fileId == currentVideo.fileId
-              }" v-for="(item, index) in displayDetail.videosVo" :key="index" @click="handleChangeCurrentVideo(item)">
-                {{
-                    item.name.split(".")[0]
-                }}
-
+              <div
+                :class="{
+                  'video-item': true,
+                  active: currentVideo && item.fileId == currentVideo.fileId,
+                }"
+                v-for="(item, index) in displayDetail.videosVo"
+                :key="index"
+                @click="handleChangeCurrentVideo(item)"
+              >
+                {{ item.name.split(".")[0] }}
               </div>
             </div>
           </div>
-
         </div>
         <div class="e-virtual" v-if="displayDetail.virtualVo.length > 0">
           <div class="virtual-title">虚拟展厅</div>
           <div class="wrapper">
-            <div class="img-container" @click="handleToVR(item)" v-for="(item, index) in displayDetail.virtualVo"
-              :key="index">
+            <div
+              class="img-container"
+              @click="handleToVR(item)"
+              v-for="(item, index) in displayDetail.virtualVo"
+              :key="index"
+            >
               <img :src="item.faceImagePressUrl" alt="" />
               <div class="modal">
                 <svg-icon icon-class="360"></svg-icon>
@@ -180,29 +274,41 @@
           </div>
         </div>
 
-        <div class="e-lts" v-if="
-          displayDetail.literatureVo &&
-          displayDetail.literatureVo.length > 0
-        ">
+        <div
+          class="e-lts"
+          v-if="
+            displayDetail.literatureVo && displayDetail.literatureVo.length > 0
+          "
+        >
           <div class="lts-title">相关文献</div>
           <div class="lts-content">
-            <div class="lt-item" v-for="(item, index) in displayDetail.literatureVo" :key="index"
-              @click="handleViewLt(item)">
+            <div
+              class="lt-item"
+              v-for="(item, index) in displayDetail.literatureVo"
+              :key="index"
+              @click="handleViewLt(item)"
+            >
               <span class="lt-order">[{{ index + 1 }}]</span>
-              <span class="lt-authors" v-if="item.authors">{{ item.authors }}.</span>
+              <span class="lt-authors" v-if="item.authors"
+                >{{ item.authors }}.</span
+              >
               <span class="lt-name" v-if="item.name">{{ item.name }}.</span>
-              <span class="lt-source" v-if="item.source">{{ item.source }}.</span>
+              <span class="lt-source" v-if="item.source"
+                >{{ item.source }}.</span
+              >
               <span class="lt-date" v-if="item.date">{{ item.date }}</span>
             </div>
           </div>
         </div>
       </div>
-
     </div>
 
-
-    <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList"
-      :initial-index="initialIndex" />
+    <el-image-viewer
+      v-if="imgViewerVisible"
+      :on-close="closeImgViewer"
+      :url-list="imgList"
+      :initial-index="initialIndex"
+    />
   </div>
 </template>
 
@@ -274,7 +380,7 @@ export default {
       },
       currentUnit: null,
       currentVideo: {},
-      initialIndex: 0
+      initialIndex: 0,
     };
   },
   computed: {
@@ -287,11 +393,11 @@ export default {
     // let units = this.$refs.
   },
   updated() {
-    let p = document.getElementsByTagName('p')
-    let arr = [...p]
-    arr.map(item => {
-      item.style.color = "#fff"
-    })
+    let p = document.getElementsByTagName("p");
+    let arr = [...p];
+    arr.map((item) => {
+      item.style.color = "#fff";
+    });
   },
   methods: {
     async loadDetail() {
@@ -393,7 +499,7 @@ export default {
     handelPreviewImages(images, index) {
       this.imgViewerVisible = true;
       this.imgList = images.map((item) => this.$getFullUrl(item.url));
-      this.initialIndex = index
+      this.initialIndex = index;
     },
 
     closeImgViewer() {
@@ -446,8 +552,7 @@ export default {
 };
 </script>
 
-
-<style lang="scss" >
+<style lang="scss">
 .unit-content_intro {
   p {
     // color: red !important;
@@ -459,14 +564,14 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-$themeColor: #a30e0c;
+$deepBlue: #a30e0c;
 
 // 中国风主题样式
 /**公共样式开始 */
 
 .custom-title {
   width: 50px;
-  background-color: $themeColor;
+  background-color: $deepBlue;
   min-height: 300px;
   color: #fff;
   font-size: 28px;
@@ -521,7 +626,6 @@ $themeColor: #a30e0c;
   top: -$nav-height;
   height: 100%;
 
-
   .content {
     width: 100%;
     overflow: hidden;
@@ -533,7 +637,6 @@ $themeColor: #a30e0c;
       display: flex;
       justify-content: center;
 
-
       .slide-item {
         display: flex;
         justify-content: center;
@@ -559,12 +662,11 @@ $themeColor: #a30e0c;
         font-weight: 800;
         transform: translateY(-72px);
         font-size: 26px !important;
-        background-color: #1C4E52;
+        background-color: #1c4e52;
       }
 
       .swiper-button-next {
         transform: translateX(-100px);
-
       }
 
       .swiper-button-prev {
@@ -576,7 +678,7 @@ $themeColor: #a30e0c;
       background-image: url(@/assets/imgs/display/ch/pattern2.png);
       background-size: 100%;
       width: 100%;
-      background-color: #1C4E52;
+      background-color: #1c4e52;
       padding-bottom: 73px;
       // height:4818px ;
     }
@@ -623,7 +725,7 @@ $themeColor: #a30e0c;
         min-height: 572px;
         color: #fff;
 
-        &>.title {
+        & > .title {
           font-size: 46px;
           font-family: PingFang;
           font-weight: 800;
@@ -635,7 +737,7 @@ $themeColor: #a30e0c;
           justify-content: center;
         }
 
-        &>.text {
+        & > .text {
           font-size: 24px;
           font-family: PingFang;
           font-weight: 500;
@@ -734,7 +836,6 @@ $themeColor: #a30e0c;
             color: #fff;
 
             .unit-content-container {
-
               .unit-content-title {
                 font-family: PingFang;
                 line-height: 48px;
@@ -843,12 +944,12 @@ $themeColor: #a30e0c;
                 display: flex;
                 align-content: center;
                 padding: 8px 10px;
-                // border: 1px solid $themeColor;
+                // border: 1px solid $deepBlue;
                 color: #666;
                 cursor: pointer;
 
                 &:hover {
-                  color: $themeColor;
+                  color: $deepBlue;
                 }
 
                 .svg-icon {
@@ -868,7 +969,6 @@ $themeColor: #a30e0c;
       width: 100%;
       padding: 0 13%;
 
-
       .video-title {
         width: 100%;
         display: flex;
@@ -903,7 +1003,7 @@ $themeColor: #a30e0c;
           }
 
           .active {
-            color: $themeSecondaryColor;
+            color: $yellow;
           }
         }
 
@@ -917,8 +1017,6 @@ $themeColor: #a30e0c;
           }
         }
       }
-
-
     }
 
     .e-virtual {
@@ -1001,7 +1099,6 @@ $themeColor: #a30e0c;
       }
     }
 
-
     /**关联文献 */
     .e-lts {
       color: #333;
@@ -1035,7 +1132,7 @@ $themeColor: #a30e0c;
           color: #dbb645;
         }
 
-        &>span {
+        & > span {
           padding: 0 4px;
         }
       }
@@ -1043,7 +1140,6 @@ $themeColor: #a30e0c;
   }
 }
 
-
 ::v-deep .el-carousel {
   height: 100%;
 }
@@ -1052,7 +1148,6 @@ $themeColor: #a30e0c;
   height: 100%;
 }
 
-
 @keyframes audioRotate {
   0% {
     transform: rotateZ(0deg);

src/views/display/components/NormalStyle.vue

@@ -649,7 +649,7 @@ export default {
 };
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 // 自定义分页器样式
 #page {
   height: 30px;
@@ -670,7 +670,6 @@ export default {
 }
 </style>
 
-
 <style lang="scss" scoped>
 // 中国风主题样式
 /**公共样式开始 */
@@ -711,19 +710,19 @@ $titleFontFamily: SourceHanSerifCN-Bold;
     i {
       margin-right: 10px;
       font-size: 28px;
-      color: $themeColor;
+      color: $deepBlue;
     }
 
     .svg-icon {
       font-size: 32px;
-      color: $themeColor;
+      color: $deepBlue;
       margin-right: 10px;
     }
 
     .title {
       font-size: 26px;
       font-weight: 400;
-      color: $themeColor;
+      color: $deepBlue;
       font-family: "SourceHanSerifCN-Bold";
     }
   }
@@ -934,7 +933,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
                   }
 
                   .collect {
-                    color: $themeColor;
+                    color: $deepBlue;
                   }
                 }
               }
@@ -949,7 +948,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           cursor: pointer;
           animation: audioRotate 8s linear infinite;
           transform-origin: center center;
-          border: 2px solid $themeColor;
+          border: 2px solid $deepBlue;
           padding: 10px;
           border-radius: 50%;
           display: flex;
@@ -963,7 +962,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           }
 
           .svg-icon {
-            color: $themeColor;
+            color: $deepBlue;
             font-size: 80px;
           }
 
@@ -984,14 +983,14 @@ $titleFontFamily: SourceHanSerifCN-Bold;
         .tab-item {
           height: 100%;
           margin-right: 40px;
-          color: $themeColor;
+          color: $deepBlue;
           font-size: 24px;
           font-family: $titleFontFamily;
           cursor: pointer;
           position: relative;
 
           &:hover {
-            color: $themeColor;
+            color: $deepBlue;
 
             &::after {
               display: inline-block;
@@ -1004,7 +1003,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
         }
 
         .active {
-          color: $themeColor;
+          color: $deepBlue;
 
           &::after {
             display: inline-block;
@@ -1019,7 +1018,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           width: 100%;
           bottom: -10px;
           left: 0;
-          background-color: $themeColor;
+          background-color: $deepBlue;
         }
       }
 
@@ -1033,7 +1032,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
         .intro-title {
           font-size: 26px;
           font-weight: 400;
-          color: $themeColor;
+          color: $deepBlue;
           font-family: "SourceHanSerifCN-Bold";
           display: flex;
           align-items: center;
@@ -1056,7 +1055,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
 
         .left-box {
           width: 60px;
-          background-color: $themeColor;
+          background-color: $deepBlue;
           min-height: 200px;
           color: #fff;
           font-size: 28px;
@@ -1072,7 +1071,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           flex: 1;
           text-indent: 34px;
           padding: 16px 32px;
-          background-color: rgba($themeColor, 10%);
+          background-color: rgba($deepBlue, 10%);
         }
       }
 
@@ -1087,7 +1086,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           // justify-content: center;
           align-items: center;
           font-size: 24px;
-          color: $themeColor;
+          color: $deepBlue;
           padding: 0 40px;
           margin-bottom: 32px;
           font-family: SourceHanSerifCN-Bold;
@@ -1116,17 +1115,17 @@ $titleFontFamily: SourceHanSerifCN-Bold;
             .name {
               padding: 8px;
               // border-radius: 4px;
-              color: $themeColor;
+              color: $deepBlue;
               cursor: pointer;
               text-overflow: ellipsis;
               overflow: hidden;
               width: 100%;
               white-space: nowrap;
-              border: 1px solid $themeColor;
+              border: 1px solid $deepBlue;
               font-size: 14px;
               &:hover {
-                background: $themeColor;
-                color: $themeSecondaryColor;
+                background: $deepBlue;
+                color: $yellow;
               }
               &:not(&:last-child) {
                 border-bottom: none;
@@ -1135,8 +1134,8 @@ $titleFontFamily: SourceHanSerifCN-Bold;
             }
 
             .active {
-              background: $themeColor;
-              color: $themeSecondaryColor;
+              background: $deepBlue;
+              color: $yellow;
             }
           }
         }
@@ -1157,7 +1156,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
         //     display: flex;
         //     justify-content: center;
         //     align-items: center;
-        //     color: $themeColor;
+        //     color: $deepBlue;
         //     font-weight: bolder;
         //     font-size: 28px;
         //     transform: translateY(-6px);
@@ -1169,18 +1168,18 @@ $titleFontFamily: SourceHanSerifCN-Bold;
         //     .slide-item {
         //       padding: 8px;
         //       border-radius: 4px;
-        //       color: $themeColor;
+        //       color: $deepBlue;
         //       cursor: pointer;
         //       text-overflow: ellipsis;
         //       overflow: hidden;
         //       width: 100%;
         //       white-space: nowrap;
-        //       border: 1px solid $themeColor;
+        //       border: 1px solid $deepBlue;
         //       font-size: 14px;
         //     }
 
         //     .active {
-        //       background: $themeColor;
+        //       background: $deepBlue;
         //       color: #fff;
         //     }
         //   }
@@ -1273,7 +1272,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           display: flex;
           align-items: center;
           font-size: 26px;
-          color: $themeColor;
+          color: $deepBlue;
           font-family: SourceHanSerifCN-Bold;
 
           i {
@@ -1328,7 +1327,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           }
 
           .lt-name {
-            color: $themeColor;
+            color: $deepBlue;
             cursor: pointer;
           }
         }
@@ -1345,8 +1344,6 @@ $titleFontFamily: SourceHanSerifCN-Bold;
   height: 100%;
 }
 
-
-
 @keyframes filmMoveLeft {
   0% {
     transform: translateX(0);

src/views/display/components/NormalStyleUnit.vue

 <template>
-
   <div class="unit-container">
     <div class="unit-content-menu">
-            <swiper class="swiper unit-swiper" :options="unitSwiperOption" ref="videoSwiper">
-                <swiper-slide :class="[
-                    'slide-item',
-                    item.euId == curUnit.euId ? 'active' : '',
-                ]" v-for="(item, index) in exhibitionUnits" :key="index" @click.native="handleClickUnit(item)">
+      <swiper
+        class="swiper unit-swiper"
+        :options="unitSwiperOption"
+        ref="videoSwiper"
+      >
+        <swiper-slide
+          :class="['slide-item', item.euId == curUnit.euId ? 'active' : '']"
+          v-for="(item, index) in exhibitionUnits"
+          :key="index"
+          @click.native="handleClickUnit(item)"
+        >
           {{ item.title }}
         </swiper-slide>
       </swiper>
-            <div class="swiper-button-prev unit-swiper-button-prev" slot="button-prev">
+      <div
+        class="swiper-button-prev unit-swiper-button-prev"
+        slot="button-prev"
+      >
         <i class="el-icon-arrow-left"></i>
       </div>
-            <div class="swiper-button-next unit-swiper-button-next" slot="button-next">
+      <div
+        class="swiper-button-next unit-swiper-button-next"
+        slot="button-next"
+      >
         <i class="el-icon-arrow-right"></i>
       </div>
     </div>
 
     <div class="unit-content">
-            <div class="unit-content-container" v-for="(unitValue, unitTitle) in curUnit.expandUnitInfo"
-                :key="unitTitle">
+      <div
+        class="unit-content-container"
+        v-for="(unitValue, unitTitle) in curUnit.expandUnitInfo"
+        :key="unitTitle"
+      >
         <div class="unit-content-title">
           {{ unitTitle }}
         </div>
-                <div class="text-indent unit-content_intro" v-if="curUnit.intro" v-html="unitValue.intro"></div>
-                <div class="unit-content_images" v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0">
+        <div
+          class="text-indent unit-content_intro"
+          v-if="curUnit.intro"
+          v-html="unitValue.intro"
+        ></div>
+        <div
+          class="unit-content_images"
+          v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"
+        >
           <!-- <div class="imgs-title">单元图片</div> -->
           <div class="unit-imgs">
-
-                        <SlideImageGroup :imgList="unitValue.imagesVo" :needEnlarge="true"
-                            v-if="unitValue.imagesVo.length > 3">
+            <SlideImageGroup
+              :imgList="unitValue.imagesVo"
+              :needEnlarge="true"
+              v-if="unitValue.imagesVo.length > 3"
+            >
               <template slot-scope="{ item }" slot="img">
-                                <img :src="$getFullUrl(item.middleUrl)" alt=""
-                                    style="width: 100%; height: 100%; object-fit: contain" />
+                <img
+                  :src="$getFullUrl(item.middleUrl)"
+                  alt=""
+                  style="width: 100%; height: 100%; object-fit: contain"
+                />
               </template>
             </SlideImageGroup>
-                        <el-row v-if="unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4" :gutter="10">
-                            <el-col v-for="(item, index) in unitValue.imagesVo" :key="index"
-                                :span="24 / unitValue.imagesVo.length" style="height:300px">
-                                <img :src="$getFullUrl(item.middleUrl)" alt=""
-                                    style="width: 100%; height: 100%; object-fit: contain;cursor: pointer;"
-                                    @click="handelPreviewImages(unitValue.imagesVo)" />
+            <el-row
+              v-if="
+                unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4
+              "
+              :gutter="10"
+            >
+              <el-col
+                v-for="(item, index) in unitValue.imagesVo"
+                :key="index"
+                :span="24 / unitValue.imagesVo.length"
+                style="height: 300px"
+              >
+                <img
+                  :src="$getFullUrl(item.middleUrl)"
+                  alt=""
+                  style="
+                    width: 100%;
+                    height: 100%;
+                    object-fit: contain;
+                    cursor: pointer;
+                  "
+                  @click="handelPreviewImages(unitValue.imagesVo)"
+                />
               </el-col>
             </el-row>
           </div>
         </div>
 
-                <div class="unit-content_crs" v-if="
-                    unitValue.culturalRelics && unitValue.culturalRelics.length > 0
-                ">
+        <div
+          class="unit-content_crs"
+          v-if="unitValue.culturalRelics && unitValue.culturalRelics.length > 0"
+        >
           <div class="imgs-title">单元文物</div>
           <SlideImageGroup :imgList="unitValue.culturalRelics">
             <template slot-scope="{ item }" slot="img">
-                            <img :src="$getFullUrl(item.faceImageMiddleUrl)" alt="" style="
+              <img
+                :src="$getFullUrl(item.faceImageMiddleUrl)"
+                alt=""
+                style="
                   width: 100%;
                   height: 100%;
                   object-fit: fill;
                   cursor: pointer;
-                      " @click="handleToCr(item)" />
+                "
+                @click="handleToCr(item)"
+              />
             </template>
             <template slot-scope="{ item }" slot="info">
               <div class="name">{{ item.name }}</div>
@@ -84,12 +133,12 @@ export default {
   props: {
     curUnit: {
       type: Object,
-            default: null
+      default: null,
     },
     exhibitionUnits: {
       type: Array,
-            default: null
-        }
+      default: null,
+    },
   },
 
   data() {
@@ -104,30 +153,30 @@ export default {
           prevEl: ".unit-swiper-button-prev",
         },
       },
-        }
+    };
   },
   updated() {
-        let p = document.getElementsByTagName('p')
-        let arr = [...p]
-        arr.map(item => {
-            item.style.color = "#333"
-        })
+    let p = document.getElementsByTagName("p");
+    let arr = [...p];
+    arr.map((item) => {
+      item.style.color = "#333";
+    });
   },
   methods: {
     handleClickUnit(item) {
-            this.$emit('handleClickUnit', item)
+      this.$emit("handleClickUnit", item);
     },
     handelPreviewImages(images) {
-            this.$emit('handelPreviewImages', images)
+      this.$emit("handelPreviewImages", images);
     },
     handleToCr(item) {
-            this.$emit('handleToCr', item)
-        }
-    }
-}
+      this.$emit("handleToCr", item);
+    },
+  },
+};
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 .unit-content_intro {
   p {
     // color: red !important;
@@ -141,7 +190,6 @@ export default {
 .unit-container {
   margin-bottom: 40px;
   position: relative;
-
 }
 
 .unit-content-menu {
@@ -155,20 +203,19 @@ export default {
     .slide-item {
       padding: 8px;
       border-radius: 4px;
-            color: $themeColor;
+      color: $deepBlue;
       cursor: pointer;
       text-overflow: ellipsis;
       overflow: hidden;
       width: 100%;
       white-space: nowrap;
-            border: 1px solid $themeColor;
+      border: 1px solid $deepBlue;
     }
 
     .active {
-            background: $themeColor;
+      background: $deepBlue;
       color: #fff;
     }
-
   }
 }
 
@@ -182,7 +229,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-    color: $themeColor;
+  color: $deepBlue;
   font-weight: bolder;
   font-size: 28px;
   transform: translateY(-6px);
@@ -193,14 +240,12 @@ export default {
   padding: 60px 40px 0;
 
   .unit-content-container {
-
     .unit-content-title {
       font-size: 20px;
       line-height: 2;
       display: flex;
       justify-content: center;
       margin-top: 48px;
-
     }
 
     .unit-content_intro {
@@ -213,16 +258,13 @@ export default {
     }
 
     &:nth-child(1) {
-
       .unit-content-title {
         font-size: 24px;
         font-weight: bold;
       }
     }
-
   }
 
-
   .unit-content_images {
     position: relative;
 
@@ -303,12 +345,12 @@ export default {
       display: flex;
       align-content: center;
       padding: 8px 10px;
-            // border: 1px solid $themeColor;
+      // border: 1px solid $deepBlue;
       color: #666;
       cursor: pointer;
 
       &:hover {
-                color: $themeColor;
+        color: $deepBlue;
       }
 
       .svg-icon {

src/views/display/components/RedStyle.vue

@@ -546,8 +546,7 @@ export default {
 };
 </script>
 
-
-<style lang="scss" >
+<style lang="scss">
 .unit-content_intro {
   p {
     // color: red !important;
@@ -559,14 +558,14 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-$themeColor: #a30e0c;
+$deepBlue: #a30e0c;
 
 // 中国风主题样式
 /**公共样式开始 */
 
 .custom-title {
   width: 50px;
-  background-color: $themeColor;
+  background-color: $deepBlue;
   min-height: 300px;
   color: #fff;
   font-size: 28px;
@@ -950,12 +949,12 @@ $themeColor: #a30e0c;
                 display: flex;
                 align-content: center;
                 padding: 8px 10px;
-                // border: 1px solid $themeColor;
+                // border: 1px solid $deepBlue;
                 color: #666;
                 cursor: pointer;
 
                 &:hover {
-                  color: $themeColor;
+                  color: $deepBlue;
                 }
 
                 .svg-icon {
@@ -1008,7 +1007,7 @@ $themeColor: #a30e0c;
           }
 
           .active {
-            color: $themeSecondaryColor;
+            color: $yellow;
           }
         }
 

src/views/display/index.vue

@@ -303,13 +303,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$blue: $themeColor;
+$blue: $deepBlue;
 $text-indent: 16px;
 
 .display {
   width: 100%;
 
-  // background-color: $themeColor;
+  // background-color: $deepBlue;
   // color: #fff;
 
   .type-group {
@@ -333,16 +333,16 @@ $text-indent: 16px;
       line-height: 46px;
       // margin-right: 16px;
       cursor: pointer;
-      // border: 1px solid $themeSecondaryColor;
+      // border: 1px solid $yellow;
       color: #999;
 
       &:hover {
-        color: $themeColor;
+        color: $deepBlue;
       }
     }
 
     .active {
-      background: $themeSecondaryColor;
+      background: $yellow;
       color: #fff;
     }
     .search-item {
@@ -425,7 +425,7 @@ $text-indent: 16px;
             .boutique-tag {
               width: 40px;
               height: 40px;
-              background: $themeSecondaryColor;
+              background: $yellow;
               color: #fff;
               display: flex;
               justify-content: center;
@@ -463,7 +463,7 @@ $text-indent: 16px;
               .name {
                 font-size: 18px;
                 font-weight: bold;
-                color: $themeColor;
+                color: $deepBlue;
                 margin-bottom: 18px;
                 white-space: nowrap;
                 overflow: hidden;
@@ -561,7 +561,7 @@ $text-indent: 16px;
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    background: $themeColor;
+    background: $deepBlue;
     min-width: 0;
     margin: 0 10px;
     color: #b7b7b7;

src/views/home/components/CulturalRelic.vue

@@ -134,7 +134,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$blue: $themeColor;
+$blue: $deepBlue;
 .home-cr {
   // background-image: url("@/assets/imgs/home/display-bg.png");
   background-size: cover;
@@ -213,10 +213,10 @@ $blue: $themeColor;
         }
         &:hover {
           background-color: transparent;
-          .detail{
+          .detail {
             opacity: 1;
           }
-          .title{
+          .title {
             opacity: 0;
           }
         }

src/views/home/components/Virtural.vue

@@ -2,7 +2,10 @@
 <template>
   <div class="home-virtural">
     <div class="content-wrapper">
-      <div class="title wow animate__animated animate__fadeInUp" data-wow-offset="200">
+      <div
+        class="title wow animate__animated animate__fadeInUp"
+        data-wow-offset="200"
+      >
         <div class="ch">虚拟展厅</div>
         <div class="en">Virtual Exhibition Hall</div>
       </div>
@@ -21,12 +24,21 @@
         <el-col :span="18">
           <div class="virtual-items wow animate__animated animate__fadeInRight">
             <el-row :gutter="10">
-              <el-col :span="12" v-for="(item, index) in list" :key="index" @click.native="handleClick(item)"
-                @mouseenter.native="handleMouseEnter(item)" @mouseleave.native="handleMouseLeave()">
+              <el-col
+                :span="12"
+                v-for="(item, index) in list"
+                :key="index"
+                @click.native="handleClick(item)"
+                @mouseenter.native="handleMouseEnter(item)"
+                @mouseleave.native="handleMouseLeave()"
+              >
                 <div class="item">
-                  <img :src="
+                  <img
+                    :src="
                       $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
-                  " alt="" />
+                    "
+                    alt=""
+                  />
                   <div class="name">{{ item.name }}</div>
                 </div>
               </el-col>
@@ -69,7 +81,7 @@ export default {
   data() {
     return {
       list: [],
-      currentItem: null
+      currentItem: null,
     };
   },
   mounted() {
@@ -81,7 +93,7 @@ export default {
 
       if (res.code == 0) {
         this.list = res.data;
-        this.currentItem = this.list[0]
+        this.currentItem = this.list[0];
         console.log(this.currentItem);
       }
     },
@@ -92,19 +104,18 @@ export default {
       }, 1000);
     },
     handleMouseEnter(item) {
-      this.currentItem = item
+      this.currentItem = item;
     },
 
     handleMouseLeave() {
       // this.currentItem = null
-    }
-
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-$blue: $themeColor;
+$blue: $deepBlue;
 
 .home-virtural {
   display: flex;
@@ -187,7 +198,6 @@ $blue: $themeColor;
           .svg-icon {
             font-size: 20px;
             margin-right: 4px;
-
           }
         }
       }
@@ -199,7 +209,6 @@ $blue: $themeColor;
           position: relative;
           overflow: hidden;
 
-
           img {
             width: 100%;
             height: 25vh;
@@ -226,7 +235,6 @@ $blue: $themeColor;
 
         .active,
         .item:hover {
-
           img {
             transform: scale(1.1);
             filter: grayscale(0);

src/views/museum/Detail.vue

@@ -150,7 +150,7 @@ export default {
     },
 
     handelPreviewImages(items, index) {
-      this.imgList = items
+      this.imgList = items;
       const $viewer = this.$viewerApi({
         images: this.imgList,
         options: {
@@ -379,7 +379,7 @@ $node-w: 700px;
         &:hover,
         &.active {
           cursor: pointer;
-          // background-color: $themeColor;
+          // background-color: $deepBlue;
           background-image: url(@/assets/imgs/show/outer-active.png);
 
           > span {

src/views/museum/index.vue

@@ -37,7 +37,6 @@
               clearable
             >
             </el-input>
-          
           </el-col>
           <el-col :span="8">
             <div class="search-button" @click="search">
@@ -76,7 +75,6 @@
                   class="face-image"
                   lazy
                 />
-  
               </div>
               <div class="desc">
                 <div class="name">{{ item.name }}</div>
@@ -242,7 +240,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$blue: $themeColor;
+$blue: $deepBlue;
 $text-indent: 16px;
 .display {
   width: 100%;
@@ -251,23 +249,22 @@ $text-indent: 16px;
     padding-bottom: 126px;
     background-color: #fff;
     .content {
-
       .search {
         padding: 48px 0 32px;
       }
-      .search-button{
+      .search-button {
         height: 44px;
       }
 
       .total {
-        padding-bottom:16px;
+        padding-bottom: 16px;
         display: flex;
         justify-content: flex-end;
         font-size: 16px;
         align-items: center;
         .list-total-num {
           font-size: 24px;
-          color: $themeSecondaryColor;
+          color: $yellow;
           margin: 0 6px;
         }
       }
@@ -284,7 +281,7 @@ $text-indent: 16px;
             cursor: pointer;
             transition: all 0.5s ease;
             &:hover {
-              border: 2px solid $themeColor;
+              border: 2px solid $deepBlue;
               .face-image {
                 transform: scale(1.2);
               }
@@ -301,7 +298,6 @@ $text-indent: 16px;
                 object-fit: cover;
                 transition: all 0.5s ease;
               }
-
             }
             .desc {
               height: 100px;
@@ -311,7 +307,7 @@ $text-indent: 16px;
               .name {
                 font-size: 18px;
                 font-weight: bold;
-                color: $themeColor;
+                color: $deepBlue;
                 margin-bottom: 18px;
               }
               .deptName {
@@ -335,5 +331,4 @@ $text-indent: 16px;
     height: 116px;
   }
 }
-
 </style>

src/views/personal/components/Card/index.vue

 <template>
-  <div
-    class="container wow animate__animated animate__fadeInUp"
-    v-if="url"
-  >
+  <div class="container wow animate__animated animate__fadeInUp" v-if="url">
     <div class="img">
-      <img
-        :src="url"
-        v-if="url"
-        width="100%"
-        class="img"
-        lazy
-      />
+      <img :src="url" v-if="url" width="100%" class="img" lazy />
       <img
         v-else
         src="@/assets/404_images/no-pic.png"
@@ -43,8 +34,8 @@ export default {
 };
 </script>
 
-<style lang='scss' scoped>
-$blue: $themeColor;
+<style lang="scss" scoped>
+$blue: $deepBlue;
 .container {
   border: 1px solid #f1f1f1;
   height: 300px;

src/views/personal/components/Info.vue

@@ -264,7 +264,7 @@ export default {
 }
 ::v-deep .el-descriptions__extra {
   .el-button {
-    background-color: $themeColor;
+    background-color: $deepBlue;
     border-radius: 0;
     border: none;
   }
@@ -300,7 +300,7 @@ export default {
     .edit-button {
       width: 160px;
       height: 50px;
-      background-color: $themeColor;
+      background-color: $deepBlue;
       display: flex;
       justify-content: center;
       align-items: center;

src/views/personal/index.vue

@@ -52,8 +52,8 @@ export default {
 };
 </script>
 
-<style lang='scss' scoped>
-$blue: $themeColor;
+<style lang="scss" scoped>
+$blue: $deepBlue;
 .personal {
   padding: 40px 0;
   background-color: #fff;
@@ -105,13 +105,13 @@ $blue: $themeColor;
 }
 
 ::v-deep .el-tabs__active-bar {
-  background-color: $themeColor;
+  background-color: $deepBlue;
 }
 
 ::v-deep {
   .el-tabs__item:hover,
   .el-tabs__item.is-active {
-    color: $themeColor;
+    color: $deepBlue;
   }
 }
 ::v-deep .el-descriptions {

src/views/register/index.vue

@@ -83,7 +83,7 @@
 <script>
 import { register } from "@/api/user";
 import { checkUserName, checkPhone } from "@/utils/validate";
-import md5 from 'js-md5'
+import md5 from "js-md5";
 export default {
   data() {
     var validatePass = (rule, value, callback) => {
@@ -215,7 +215,7 @@ export default {
             nickName,
             status: 1,
           };
-           params.password = md5(params.password)
+          params.password = md5(params.password);
           register(params)
             .then((res) => {
               if (res.code == "0") {
@@ -260,7 +260,7 @@ export default {
 .wrapper {
   width: 100%;
   // background-image: url("@/assets/imgs/home/display-bg.png");
-  // background-color: rgba($color: $themeColor, $alpha: 0.2);
+  // background-color: rgba($color: $deepBlue, $alpha: 0.2);
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: center;
@@ -312,7 +312,7 @@ export default {
       border-radius: 0px;
       &:last-child {
         width: 160px;
-        background-color: $themeColor;
+        background-color: $deepBlue;
         &:hover {
           filter: brightness(0.9);
         }

src/views/virtual/index.vue

 <template>
   <div class="display">
-    <ListBanner title="虚拟展厅" unit="个" :num="list.total"/>
+    <ListBanner title="虚拟展厅" unit="个" :num="list.total" />
     <div class="content-wrapper">
       <div class="content">
         <div class="search wow animate__animated animate__fadeIn">
@@ -110,7 +110,6 @@ export default {
         value: "code",
         label: "name",
         children: "children",
-         
       },
       culturalRelicYears: [],
       onlyShow3d: false,
@@ -227,11 +226,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$blue: $themeColor;
+$blue: $deepBlue;
 $text-indent: 16px;
 .display {
   width: 100%;
-  // background-color: $themeColor;
+  // background-color: $deepBlue;
   // color: #fff;
   .content-wrapper {
     padding-top: 60px;
@@ -302,7 +301,7 @@ $text-indent: 16px;
             cursor: pointer;
             transition: all 0.5s ease;
             &:hover {
-              border: 2px solid $themeColor;
+              border: 2px solid $deepBlue;
               .face-image {
                 transform: scale(1.2);
               }
@@ -362,7 +361,7 @@ $text-indent: 16px;
               .name {
                 font-size: 18px;
                 font-weight: bold;
-                color: $themeColor;
+                color: $deepBlue;
                 margin-bottom: 18px;
               }
               .deptName {
@@ -425,7 +424,7 @@ $text-indent: 16px;
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    background: $themeColor;
+    background: $deepBlue;
     min-width: 0;
     margin: 0 10px;
     color: #b7b7b7;