修改文物下拉面板颜色问题；拆分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;
 
-$defaultFontFamily: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+$defaultFontFamily: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
\ No newline at end of file

src/components/AudioPlayer/NormalPlayer.vue

@@ -202,7 +202,7 @@ export default {
 };
 </script>
 
-<style lang="scss"  scoped>
+<style lang="scss" scoped>
 .volume {
   position: relative;
   .volume-progress {
@@ -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>
+  <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',
-    props: {
-        list: {
-            type: Array,
-            default: [
-                {
-                    name: '首页',
-                    path: "/"
-                }
-            ]
+  name: "Breadcrumb",
+  props: {
+    list: {
+      type: Array,
+      default: [
+        {
+          name: "首页",
+          path: "/",
         },
-        isLight: {
-            type: Boolean,
-            default: false
-        }
-    }
-}
+      ],
+    },
+    isLight: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 ::v-deep .el-breadcrumb__inner {
-    color: #666;
-    font-size: 18px;
+  color: #666;
+  font-size: 18px;
 }
 
 ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
-    color: $themeColor;
+  color: $deepBlue;
 }
 
 ::v-deep .el-breadcrumb__inner.is-link:hover {
-    color: #b5800a;
+  color: #b5800a;
 }
 
 .isLight {
-    ::v-deep .el-breadcrumb__inner {
-        color: #ccc;
-        font-size: 18px;
-    }
-
-    ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
-        color: #fff;
-    }
+  ::v-deep .el-breadcrumb__inner {
+    color: #ccc;
+    font-size: 18px;
+  }
 
-    ::v-deep .el-breadcrumb__inner.is-link:hover {
-        color: #b5800a;
-    }
+  ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
+    color: #fff;
+  }
 
+  ::v-deep .el-breadcrumb__inner.is-link:hover {
+    color: #b5800a;
+  }
 }
-</style>    
+</style>
\ No newline at end of file

src/components/Footer/index.vue

 <!-- -->
 <template>
-  <div :class="{
-  footer: true,
-  //isHome:isHome,
-  isChStyle: navbarStyle == '2',
-  isRedStyle: navbarStyle == '3',
-  isSDCS: navbarStyle == '4',
-  isSMGZ: navbarStyle == '5',
-  isJYYCC: navbarStyle == '6',
-  isYLGDYW: navbarStyle == '7',
-}">
+  <div
+    :class="{
+      footer: true,
+      //isHome:isHome,
+      isChStyle: navbarStyle == '2',
+      isRedStyle: navbarStyle == '3',
+      isSDCS: navbarStyle == '4',
+      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/ReaderOperations/index.vue

 <template>
   <div class="reader-operations">
-    <span class="operations" :style="{
-      color,
-    }">
+    <span
+      class="operations"
+      :style="{
+        color,
+      }"
+    >
       <span class="operation-item">
-        <svg-icon icon-class="view" :style="{
-          fontSize: iconSize + 'px',
-          color,
-        }"></svg-icon>
+        <svg-icon
+          icon-class="view"
+          :style="{
+            fontSize: iconSize + 'px',
+            color,
+          }"
+        ></svg-icon>
         <span>{{ formatNum(info.browseCount) }}</span>
       </span>
       <span class="operation-item">
-        <svg-icon @click="handleLike" :icon-class="info.loveCountStatus ? 'dianzan-s' : 'dianzan'" :style="{
-          fontSize: iconSize + 'px',
-          color: info.loveCountStatus ? selectColor : color,
-        }"></svg-icon>
+        <svg-icon
+          @click="handleLike"
+          :icon-class="info.loveCountStatus ? 'dianzan-s' : 'dianzan'"
+          :style="{
+            fontSize: iconSize + 'px',
+            color: info.loveCountStatus ? selectColor : color,
+          }"
+        ></svg-icon>
         <span>{{
-            formatNum(info.loveCount) == 0 ? "点赞" : formatNum(info.loveCount)
+          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="{
-          fontSize: iconSize + 'px',
-          color: info.collectCountStatus ? selectColor : color,
-        }"></svg-icon>
+        <svg-icon
+          :icon-class="info.collectCountStatus ? 'collect-s' : 'collect'"
+          :style="{
+            fontSize: iconSize + 'px',
+            color: info.collectCountStatus ? selectColor : color,
+          }"
+        ></svg-icon>
         <span>{{
-            formatNum(info.collectCount) == 0
-              ? "收藏"
-              : formatNum(info.collectCount)
+          formatNum(info.collectCount) == 0
+            ? "收藏"
+            : formatNum(info.collectCount)
         }}</span>
       </span>
       <span class="operation-item" @click="handleShare">
-        <svg-icon icon-class="share2" :style="{
-          fontSize: iconSize + 'px',
-          color,
-        }"></svg-icon>
+        <svg-icon
+          icon-class="share2"
+          :style="{
+            fontSize: iconSize + 'px',
+            color,
+          }"
+        ></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>
+</style>
\ No newline at end of file

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" />
@@ -17,7 +29,6 @@
             <span>查看大图</span>
           </div> -->
         </swiper-slide>
-      
 
         <!--分页器。如果放置在swiper外面，需要自定义样式。-->
       </swiper>
@@ -28,13 +39,16 @@
       <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>
-     
+
 <script>
 import { swiper, swiperSlide } from "vue-awesome-swiper";
 import "swiper/dist/css/swiper.css";
@@ -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;
@@ -98,12 +112,12 @@ export default {
   },
 };
 </script>
-     
+
 <style scoped lang="scss">
 .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>
+</style>
\ No newline at end of file

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,18 +116,28 @@
             </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>
     </div>
   </div>
 </template>
-  
+
 <script>
 import ListBanner from "@/components/ListBanner";
 import { getCcProductList } from "@/api/literature";
@@ -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>
+</style>
\ No newline at end of file

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/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">
@@ -537,7 +541,7 @@ $text-indent: 16px;
       .cr-list {
         // padding: 0 74px;
         min-height: 500px;
-      
+
         .cr-item {
           margin-bottom: 40px;
           .container {
@@ -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>
@@ -64,7 +72,7 @@
         </el-scrollbar>
       </div>
     </transition>
-      <div class="list-total">
+    <div class="list-total">
       共计文物
       <span class="list-total-num">{{ list.total }}</span>
       件/套
@@ -137,12 +145,12 @@
     </div>
   </div>
 </template>
-  
+
 <script>
 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,26 +337,30 @@ 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>
-  
+
 <style lang="scss" scoped>
 $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 {
@@ -815,4 +798,4 @@ $text-indent: 16px;
   //可设置滚动条颜色
   background: rgba($color: #000000, $alpha: 0.4);
 }
-</style>
+</style>
\ No newline at end of file

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;
   }
 }
@@ -789,22 +784,22 @@ $themeRed: #892325;
             //   margin-right: 10px;
             // }
             font-size: 32px;
-              font-family: KaiTi;
-              font-weight: 400;
-              color: #0f0f0f;
-              margin-bottom: 43px;
-              position: relative;
+            font-family: KaiTi;
+            font-weight: 400;
+            color: #0f0f0f;
+            margin-bottom: 43px;
+            position: relative;
 
-              &::after {
-                content: "";
-                display: inline-block;
-                width: 60px;
-                height: 2px;
-                background-color: #caad91;
-                position: absolute;
-                left: 0;
-                bottom: -12px;
-              }
+            &::after {
+              content: "";
+              display: inline-block;
+              width: 60px;
+              height: 2px;
+              background-color: #caad91;
+              position: absolute;
+              left: 0;
+              bottom: -12px;
+            }
           }
           .video-names {
             display: flex;
@@ -1061,7 +1056,7 @@ $themeRed: #892325;
 
   a:hover {
     cursor: pointer;
-    color: $themeColor;
+    color: $deepBlue;
   }
 }
 
@@ -1101,4 +1096,4 @@ $themeRed: #892325;
   height: 100%;
   transform: translateX(0) scale(1) !important;
 }
-</style>
+</style>
\ No newline at end of file