修改文物下拉面板颜色问题；拆分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>    
\ No newline at end of file
+</style>

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/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="{
-      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>
\ No newline at end of file
+</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" />
@@ -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>
\ No newline at end of file
+</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,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>
\ No newline at end of file
+</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

 <template>
-    <div class="content">
-      <!-- 文物图片 -->
-      <!-- <div class="content-item display-detail_imgs" ref="imgs">
+  <div class="content">
+    <!-- 文物图片 -->
+    <!-- <div class="content-item display-detail_imgs" ref="imgs">
         <img
           class="animate__animated animate__fadeInDownBig"
           v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
@@ -15,1188 +15,1180 @@
           :src="CRDetail.faceImagePressUrl"
         />
       </div> -->
-  
-      <div class="wrapper wow animate__animated animate__fadeInUpBig">
-        <div class="inner">
-          <!-- 展览基本信息 -->
-          <div class="content-item display-detail_basic_info">
-            <div class="info-container">
-              <div
-                class="
-                  info-container-left
-                  wow
-                  animate__animated animate__fadeInLeft
-                "
-              >
-                <SlideImage
-                  :imgList="CRDetail.imagesVo"
-                  v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
-                />
-                <SlideImage
-                  :imgList="[{ pressUrl: CRDetail.faceImagePressUrl }]"
-                  v-else-if="CRDetail.faceImagePressUrl"
-                />
+
+    <div class="wrapper wow animate__animated animate__fadeInUpBig">
+      <div class="inner">
+        <!-- 展览基本信息 -->
+        <div class="content-item display-detail_basic_info">
+          <div class="info-container">
+            <div
+              class="info-container-left wow animate__animated animate__fadeInLeft"
+            >
+              <SlideImage
+                :imgList="CRDetail.imagesVo"
+                v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
+              />
+              <SlideImage
+                :imgList="[{ pressUrl: CRDetail.faceImagePressUrl }]"
+                v-else-if="CRDetail.faceImagePressUrl"
+              />
+            </div>
+
+            <div
+              class="info-container-right wow animate__animated animate__fadeInRight"
+            >
+              <div class="info-title">
+                <span>{{ CRDetail.name }} </span>
+                <div class="view-count">
+                  <svg-icon icon-class="view"></svg-icon>
+                  <span>{{ CRDetail.browseCount }}</span>
+                </div>
               </div>
-  
-              <div
-                class="
-                  info-container-right
-                  wow
-                  animate__animated animate__fadeInRight
-                "
-              >
-                <div class="info-title">
-                  <span>{{ CRDetail.name }} </span>
-                  <div class="view-count">
-                    <svg-icon icon-class="view"></svg-icon>
-                    <span>{{ CRDetail.browseCount }}</span>
-                  </div>
+              <div class="basic-info">
+                <div class="body-item">
+                  <span class="label">
+                    <!-- <svg-icon icon-class="keyword"></svg-icon> -->
+                    年代</span
+                  >
+                  <span class="value">{{ CRDetail.yearsLabel || "暂无" }}</span>
                 </div>
-                <div class="basic-info">
-                  <div class="body-item">
-                    <span class="label">
-                      <!-- <svg-icon icon-class="keyword"></svg-icon> -->
-                      年代</span
-                    >
-                    <span class="value">{{ CRDetail.yearsLabel || "暂无" }}</span>
-                  </div>
-                  <div class="body-item">
-                    <span class="label">
-                      <!-- <svg-icon icon-class="glww"></svg-icon> -->
-                      来源</span
-                    >
-                    <span class="value">{{ CRDetail.sourceWay || "暂无" }}</span>
-                  </div>
-                  <div class="body-item">
-                    <span class="label">
-                      <!-- <svg-icon icon-class="zllx"></svg-icon> -->
-                      类别</span
-                    >
-                    <span class="value">{{ CRDetail.typeLabel || "暂无" }}</span>
-                  </div>
-                  <div class="body-item">
-                    <span class="label">
-                      <!-- <svg-icon icon-class="zlxz"></svg-icon> -->
-                      级别</span
-                    >
-                    <span class="value">{{ CRDetail.levelLabel || "暂无" }}</span>
-                  </div>
-                  <div class="body-item">
-                    <span class="label">
-                      <!-- <svg-icon icon-class="wwzd"></svg-icon> -->
-                      质地</span
-                    >
-                    <span class="value">{{
-                      CRDetail.textureTypeLabel || "暂无"
-                    }}</span>
-                  </div>
-                  <div class="body-item">
-                    <span class="label">
-                      <!-- <svg-icon icon-class="wwcc"></svg-icon> -->
-                      尺寸
-                    </span>
-                    <span class="value">{{ CRDetail.detailSize || "暂无" }}</span>
-                  </div>
-                  <div class="body-item">
-                    <span class="label">
-                      <!-- <svg-icon icon-class="zldq"></svg-icon> -->
-  
-                      馆藏单位</span
-                    >
-                    <span class="value">{{ CRDetail.deptName || "暂无" }}</span>
-                  </div>
+                <div class="body-item">
+                  <span class="label">
+                    <!-- <svg-icon icon-class="glww"></svg-icon> -->
+                    来源</span
+                  >
+                  <span class="value">{{ CRDetail.sourceWay || "暂无" }}</span>
                 </div>
-                <div class="bottom">
-                  <div class="tools">
-                    <ReaderOperations
-                      :loveCount="CRDetail.loveCount"
-                      :loveCountStatus="Boolean(CRDetail.loveCountStatus)"
-                      :collectCount="CRDetail.collectCount"
-                      :collectCountStatus="Boolean(CRDetail.collectCountStatus)"
-                      :sourceId="CRDetail.crId"
-                      :title="CRDetail.name"
-                      :sourceType="'biz_cultural_relic'"
-                      @reload="loadDetail"
-                    />
-                  </div>
-                  <div class="showIcon" v-if="CRDetail.url3d" @click="handleTo3D">
-                    <svg-icon icon-class="3d" class="icon"></svg-icon
-                    >查看文物3D模型
-                  </div>
+                <div class="body-item">
+                  <span class="label">
+                    <!-- <svg-icon icon-class="zllx"></svg-icon> -->
+                    类别</span
+                  >
+                  <span class="value">{{ CRDetail.typeLabel || "暂无" }}</span>
+                </div>
+                <div class="body-item">
+                  <span class="label">
+                    <!-- <svg-icon icon-class="zlxz"></svg-icon> -->
+                    级别</span
+                  >
+                  <span class="value">{{ CRDetail.levelLabel || "暂无" }}</span>
+                </div>
+                <div class="body-item">
+                  <span class="label">
+                    <!-- <svg-icon icon-class="wwzd"></svg-icon> -->
+                    质地</span
+                  >
+                  <span class="value">{{
+                    CRDetail.textureTypeLabel || "暂无"
+                  }}</span>
+                </div>
+                <div class="body-item">
+                  <span class="label">
+                    <!-- <svg-icon icon-class="wwcc"></svg-icon> -->
+                    尺寸
+                  </span>
+                  <span class="value">{{ CRDetail.detailSize || "暂无" }}</span>
+                </div>
+                <div class="body-item">
+                  <span class="label">
+                    <!-- <svg-icon icon-class="zldq"></svg-icon> -->
+
+                    馆藏单位</span
+                  >
+                  <span class="value">{{ CRDetail.deptName || "暂无" }}</span>
+                </div>
+              </div>
+              <div class="bottom">
+                <div class="tools">
+                  <ReaderOperations
+                    :loveCount="CRDetail.loveCount"
+                    :loveCountStatus="Boolean(CRDetail.loveCountStatus)"
+                    :collectCount="CRDetail.collectCount"
+                    :collectCountStatus="Boolean(CRDetail.collectCountStatus)"
+                    :sourceId="CRDetail.crId"
+                    :title="CRDetail.name"
+                    :sourceType="'biz_cultural_relic'"
+                    @reload="loadDetail"
+                  />
+                </div>
+                <div class="showIcon" v-if="CRDetail.url3d" @click="handleTo3D">
+                  <svg-icon icon-class="3d" class="icon"></svg-icon
+                  >查看文物3D模型
                 </div>
               </div>
-            </div>
-            <div
-              class="audio wow animate__animated animate__fadeInRight"
-              :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
-              @click="handleClickAudio"
-              v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
-            >
-              <!-- <img src="@/assets/imgs/display/normal/music.png" alt="" /> -->
-              <svg-icon icon-class="music"></svg-icon>
-              <AudioPlayer
-                style="display: none"
-                :url="$getFullUrl(CRDetail.audiosVo[0].url)"
-                ref="AudioPlayer"
-              />
             </div>
           </div>
-  
           <div
-            class="content-item display-detail_tabbar"
-            id="tabbar"
-            :class="{ isFixed: isFixed }"
+            class="audio wow animate__animated animate__fadeInRight"
+            :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
+            @click="handleClickAudio"
+            v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
           >
-            <span v-for="(item, index) in tabbarData" :key="index">
-              <span
-                @click="handleClickTabItem(item)"
-                :class="[
-                  'tab-item',
-                  currentTab && currentTab.domId == item.domId ? 'active' : '',
-                ]"
-                v-html="item.name"
-                v-if="CRDetail[item.domId] && CRDetail[item.domId].length > 0"
-              >
-              </span>
-              <span
-                @click="handleClickTabItem(item)"
-                v-else-if="
-                  item.domId == 'relateRelics' &&
-                  relateRelics &&
-                  relateRelics.length > 0
-                "
-                v-html="item.name"
-                :class="[
-                  'tab-item',
-                  currentTab && currentTab.domId == item.domId ? 'active' : '',
-                ]"
-              >
-              </span>
+            <!-- <img src="@/assets/imgs/display/normal/music.png" alt="" /> -->
+            <svg-icon icon-class="music"></svg-icon>
+            <AudioPlayer
+              style="display: none"
+              :url="$getFullUrl(CRDetail.audiosVo[0].url)"
+              ref="AudioPlayer"
+            />
+          </div>
+        </div>
+
+        <div
+          class="content-item display-detail_tabbar"
+          id="tabbar"
+          :class="{ isFixed: isFixed }"
+        >
+          <span v-for="(item, index) in tabbarData" :key="index">
+            <span
+              @click="handleClickTabItem(item)"
+              :class="[
+                'tab-item',
+                currentTab && currentTab.domId == item.domId ? 'active' : '',
+              ]"
+              v-html="item.name"
+              v-if="CRDetail[item.domId] && CRDetail[item.domId].length > 0"
+            >
+            </span>
+            <span
+              @click="handleClickTabItem(item)"
+              v-else-if="
+                item.domId == 'relateRelics' &&
+                relateRelics &&
+                relateRelics.length > 0
+              "
+              v-html="item.name"
+              :class="[
+                'tab-item',
+                currentTab && currentTab.domId == item.domId ? 'active' : '',
+              ]"
+            >
             </span>
+          </span>
+        </div>
+
+        <!-- 文物简介 -->
+        <div
+          class="content-item display-detail_intro"
+          v-if="CRDetail.intro"
+          id="intro"
+        >
+          <div class="intro-title">
+            <!-- <svg-icon icon-class="jianjie"></svg-icon> -->
+            <!-- <i class="el-icon-tickets" style="margin-right: 10px"></i> -->
+            <span>文物简介</span>
           </div>
-  
-          <!-- 文物简介 -->
-          <div
-            class="content-item display-detail_intro"
-            v-if="CRDetail.intro"
-            id="intro"
-          >
-            <div class="intro-title">
-              <!-- <svg-icon icon-class="jianjie"></svg-icon> -->
-              <!-- <i class="el-icon-tickets" style="margin-right: 10px"></i> -->
-              <span>文物简介</span>
-            </div>
-            <div class="intro-content">
-              <div class="left-box">简介</div>
-  
-              <div class="intro-content-container" v-html="CRDetail.intro"></div>
-            </div>
+          <div class="intro-content">
+            <div class="left-box">简介</div>
+
+            <div class="intro-content-container" v-html="CRDetail.intro"></div>
           </div>
-  
-          <!-- 文物视频 -->
-          <div
-            class="content-item display-detail_videos"
-            v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
-            id="videosVo"
-          >
-            <div class="video-title">
-              <!-- <i class="el-icon-video-camera"></i> -->
-              相关视频
-            </div>
-            <div class="video-names">
+        </div>
+
+        <!-- 文物视频 -->
+        <div
+          class="content-item display-detail_videos"
+          v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
+          id="videosVo"
+        >
+          <div class="video-title">
+            <!-- <i class="el-icon-video-camera"></i> -->
+            相关视频
+          </div>
+          <div class="video-names">
+            <div
+              class="video-item"
+              v-for="(item, index) in CRDetail.videosVo"
+              :key="index"
+              @click="handleChangeCurrentVideo(item)"
+            >
               <div
-                class="video-item"
-                v-for="(item, index) in CRDetail.videosVo"
-                :key="index"
-                @click="handleChangeCurrentVideo(item)"
+                :class="[
+                  'name',
+                  currentVideo && item.fileId == currentVideo.fileId
+                    ? 'active'
+                    : '',
+                ]"
               >
-                <div
-                  :class="[
-                    'name',
-                    currentVideo && item.fileId == currentVideo.fileId
-                      ? 'active'
-                      : '',
-                  ]"
-                >
-                  {{ item.name.split(".")[0] }}
-                </div>
+                {{ item.name.split(".")[0] }}
               </div>
             </div>
-            <video-player
-              v-if="currentVideo"
-              :src="$getFullUrl(currentVideo.url)"
-              class="video-box"
-            ></video-player>
           </div>
-  
-          <!--相关文物  -->
-          <div
-            class="content-item display-detail_relate_rc"
-            ref="units"
-            id="relateRelics"
-          >
-            <div class="intro-title">
-              <!-- <i class="el-icon-menu" style="margin-right: 10px"></i> -->
-              <span>相关文物推荐</span>
-            </div>
-            <div class="recommend-type">
-              <el-radio-group v-model="currentRcKey" size="small">
-                <el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio>
-                <el-radio :label="'years'" v-if="CRDetail.years">同年代</el-radio>
-                <el-radio :label="'deptId'" v-if="CRDetail.deptId"
-                  >同馆藏</el-radio
-                >
-              </el-radio-group>
-            </div>
-            <el-row :gutter="8" v-if="relateRelics.length > 0">
-              <el-col
-                :span="6"
-                v-for="(item, index) in relateRelics"
-                :key="index"
+          <video-player
+            v-if="currentVideo"
+            :src="$getFullUrl(currentVideo.url)"
+            class="video-box"
+          ></video-player>
+        </div>
+
+        <!--相关文物  -->
+        <div
+          class="content-item display-detail_relate_rc"
+          ref="units"
+          id="relateRelics"
+        >
+          <div class="intro-title">
+            <!-- <i class="el-icon-menu" style="margin-right: 10px"></i> -->
+            <span>相关文物推荐</span>
+          </div>
+          <div class="recommend-type">
+            <el-radio-group v-model="currentRcKey" size="small">
+              <el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio>
+              <el-radio :label="'years'" v-if="CRDetail.years">同年代</el-radio>
+              <el-radio :label="'deptId'" v-if="CRDetail.deptId"
+                >同馆藏</el-radio
               >
-                <div class="img-container" @click="handleToCr(item)">
-                  <img :src="item.faceImagePressUrl" alt="" />
-                </div>
-                <div class="cr-name">{{ item.name }}</div>
-              </el-col>
-            </el-row>
-            <el-empty
-              v-else
-              description="暂无相关推荐，去看看其他的吧~"
-            ></el-empty>
+            </el-radio-group>
           </div>
-          <!-- 相关文献 -->
-          <div
-            class="content-item display-detail_lts"
-            id="literatureVo"
-            v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
-          >
-            <!-- <div class="wrapper"> -->
-            <div class="custom_title wow animate__animated animate__fadeInUp">
-              <div class="desc">
-                <div class="divider"></div>
-                <img
-                  src="@/assets/imgs/display/normal/title-desc.png"
-                  class="modify"
-                  alt=""
-                />
-              </div>
-              <div class="center">
-                <svg-icon icon-class="wenxian"></svg-icon>
-                <span class="title">相关文献</span>
-              </div>
-              <div class="desc">
-                <img
-                  src="@/assets/imgs/display/normal/title-desc.png"
-                  class="modify"
-                  alt=""
-                />
-                <div class="divider"></div>
+          <el-row :gutter="8" v-if="relateRelics.length > 0">
+            <el-col
+              :span="6"
+              v-for="(item, index) in relateRelics"
+              :key="index"
+            >
+              <div class="img-container" @click="handleToCr(item)">
+                <img :src="item.faceImagePressUrl" alt="" />
               </div>
+              <div class="cr-name">{{ item.name }}</div>
+            </el-col>
+          </el-row>
+          <el-empty
+            v-else
+            description="暂无相关推荐，去看看其他的吧~"
+          ></el-empty>
+        </div>
+        <!-- 相关文献 -->
+        <div
+          class="content-item display-detail_lts"
+          id="literatureVo"
+          v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
+        >
+          <!-- <div class="wrapper"> -->
+          <div class="custom_title wow animate__animated animate__fadeInUp">
+            <div class="desc">
+              <div class="divider"></div>
+              <img
+                src="@/assets/imgs/display/normal/title-desc.png"
+                class="modify"
+                alt=""
+              />
             </div>
-            <div class="lts-content wow animate__animated animate__fadeInUp">
-              <el-table
-                :data="CRDetail.literatureVo"
-                :header-cell-style="{
-                  background: '#eeeeee',
-                  color: '#333',
-                }"
-                :row-style="tableRowStyle"
-              >
-                <el-table-column
-                  prop="name"
-                  label="名称"
-                  align="center"
-                ></el-table-column>
-                <el-table-column
-                  prop="authors"
-                  label="作者"
-                  align="center"
-                ></el-table-column>
-                <el-table-column
-                  prop="date"
-                  label="出版时间"
-                  align="center"
-                ></el-table-column>
-                <el-table-column
-                  align="center"
-                  prop="source"
-                  label="出版所在刊物"
-                ></el-table-column>
-                <el-table-column label="阅读" align="center">
-                  <template slot-scope="scope">
-                    <div class="pdf-img" @click="handleViewLt(scope.row)">
-                      <img src="@/assets/imgs/display/ch/pdf-icon.png" />
-                    </div>
-                  </template>
-                </el-table-column>
-              </el-table>
+            <div class="center">
+              <svg-icon icon-class="wenxian"></svg-icon>
+              <span class="title">相关文献</span>
             </div>
+            <div class="desc">
+              <img
+                src="@/assets/imgs/display/normal/title-desc.png"
+                class="modify"
+                alt=""
+              />
+              <div class="divider"></div>
+            </div>
+          </div>
+          <div class="lts-content wow animate__animated animate__fadeInUp">
+            <el-table
+              :data="CRDetail.literatureVo"
+              :header-cell-style="{
+                background: '#eeeeee',
+                color: '#333',
+              }"
+              :row-style="tableRowStyle"
+            >
+              <el-table-column
+                prop="name"
+                label="名称"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="authors"
+                label="作者"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="date"
+                label="出版时间"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                prop="source"
+                label="出版所在刊物"
+              ></el-table-column>
+              <el-table-column label="阅读" align="center">
+                <template slot-scope="scope">
+                  <div class="pdf-img" @click="handleViewLt(scope.row)">
+                    <img src="@/assets/imgs/display/ch/pdf-icon.png" />
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
         </div>
       </div>
-      <el-image-viewer
-        v-if="imgViewerVisible"
-        :on-close="closeImgViewer"
-        :url-list="imgList"
-      />
     </div>
-  </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 {
-    components: {
-      AudioPlayer,
-      ReaderOperations,
-      Video,
-      videoPlayer,
-      SlideImage,
-      "el-image-viewer": () =>
-        import("element-ui/packages/image/src/image-viewer"),
+    <el-image-viewer
+      v-if="imgViewerVisible"
+      :on-close="closeImgViewer"
+      :url-list="imgList"
+    />
+  </div>
+</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 {
+  components: {
+    AudioPlayer,
+    ReaderOperations,
+    Video,
+    videoPlayer,
+    SlideImage,
+    "el-image-viewer": () =>
+      import("element-ui/packages/image/src/image-viewer"),
+  },
+  data() {
+    let vm = this;
+    return {
+      imgViewerVisible: false,
+      CRDetail: {},
+      relateRelics: [],
+      audioPlaying: true,
+      page: null,
+      currentRcKey: "type",
+      currentVideo: null,
+      currentTab: null,
+      isFixed: false,
+      tabbarData: [
+        {
+          name: "文物简介",
+          domId: "intro",
+        },
+        {
+          name: "相关视频",
+          domId: "videosVo",
+        },
+
+        {
+          name: "相关文物",
+          domId: "relateRelics",
+        },
+        {
+          name: "相关文献",
+          domId: "literatureVo",
+        },
+      ],
+      // tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"],
+    };
+  },
+  watch: {
+    "$route.params.crId"(value) {
+      this.loadDetail(value);
+    },
+    currentRcKey(key) {
+      this.loadCrRecommend();
+    },
+  },
+  async mounted() {
+    let crId = this.$route.params.crId;
+    this.loadDetail(crId);
+    setTimeout(() => {
+      window.addEventListener("scroll", this.initHeight);
+      this.offsetTop = document.querySelector("#tabbar").offsetTop; //距离offsetParent的高度
+      this.tabbarData.map((item) => {
+        let dom = document.getElementById(item.domId);
+        if (dom) {
+          item.position = dom.offsetTop - 320; //100navbar 55tabbar
+        }
+      });
+    }, 500);
+  },
+  beforeRouteLeave(to, form, next) {
+    // 离开路由移除滚动事件
+    window.removeEventListener("scroll", this.initHeight);
+    next();
+  },
+  methods: {
+    async loadDetail(crId) {
+      if (crId) {
+        let res = await getRCDetailByIdV2({ crId });
+        if (res.code == 0) {
+          this.CRDetail = res.data.culturalRelicVo;
+          // this.relateRelics = res.data.recommendList.records;
+          if (this.CRDetail.videosVo && this.CRDetail.videosVo.length > 0) {
+            this.currentVideo = this.CRDetail.videosVo[0];
+          }
+          // 获取关联文物
+          this.loadCrRecommend();
+          this.$nextTick(() => {
+            // this.replaceFaceImage();
+            if (this.CRDetail.audiosVo && this.CRDetail.audiosVo.length > 0) {
+              this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
+              this.$refs.AudioPlayer.play();
+            }
+          });
+        }
+      }
     },
-    data() {
-      let vm = this;
-      return {
-        imgViewerVisible: false,
-        CRDetail: {},
-        relateRelics: [],
-        audioPlaying: true,
-        page: null,
-        currentRcKey: "type",
-        currentVideo: null,
-        currentTab: null,
-        isFixed: false,
-        tabbarData: [
-          {
-            name: "文物简介",
-            domId: "intro",
-          },
-          {
-            name: "相关视频",
-            domId: "videosVo",
-          },
-  
-          {
-            name: "相关文物",
-            domId: "relateRelics",
-          },
-          {
-            name: "相关文献",
-            domId: "literatureVo",
-          },
-        ],
-        // tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"],
+
+    async loadCrRecommend() {
+      const { crId } = this.CRDetail;
+      const params = {
+        crId,
+        page: 1,
+        limit: 4,
       };
+      if (this.currentRcKey == "type") {
+        params.type = this.CRDetail.type;
+      }
+      if (this.currentRcKey == "years") {
+        params.years = this.CRDetail.years;
+      }
+      if (this.currentRcKey == "deptId") {
+        params.deptId = this.CRDetail.deptId;
+      }
+      let res = await crRecommendByPage(params);
+      this.relateRelics = res.data.records;
+      // console.log("res", res);
     },
-    watch: {
-      "$route.params.crId"(value) {
-        this.loadDetail(value);
-      },
-      currentRcKey(key) {
-        this.loadCrRecommend();
-      },
+
+    replaceFaceImage() {
+      var img = new Image(); //新建一个图片对象
+      let url; //最终显示的大图
+      // debugger
+      if (this.CRDetail.faceImagePressUrl) {
+        url = this.$getFullUrl(this.CRDetail.faceImageUrl);
+      } else if (this.CRDetail.imagesVo.length > 0) {
+        url = this.$getFullUrl(this.CRDetail.imagesVo[0].url);
+      }
+      let faceImage = document.getElementById("faceImage");
+      img.src = url;
+      img.onload = function () {
+        faceImage.src = url;
+      };
     },
-    async mounted() {
-      let crId = this.$route.params.crId;
-      this.loadDetail(crId);
+    handleBack() {
+      this.$router.go(-1);
+    },
+
+    handleTo3D() {
+      this.$message.info("即将打开3D模型...");
       setTimeout(() => {
-        window.addEventListener("scroll", this.initHeight);
-        this.offsetTop = document.querySelector("#tabbar").offsetTop; //距离offsetParent的高度
-        this.tabbarData.map((item) => {
-          let dom = document.getElementById(item.domId);
-          if (dom) {
-            item.position = dom.offsetTop - 320; //100navbar 55tabbar
-          }
-        });
-      }, 500);
+        window.open(this.CRDetail.url3d, "_blank");
+      }, 1000);
     },
-    beforeRouteLeave(to, form, next) {
-      // 离开路由移除滚动事件
-      window.removeEventListener("scroll", this.initHeight);
-      next();
+
+    closeImgViewer() {
+      this.imgViewerVisible = false;
     },
-    methods: {
-      async loadDetail(crId) {
-        if (crId) {
-          let res = await getRCDetailByIdV2({ crId });
-          if (res.code == 0) {
-            this.CRDetail = res.data.culturalRelicVo;
-            // this.relateRelics = res.data.recommendList.records;
-            if (this.CRDetail.videosVo && this.CRDetail.videosVo.length > 0) {
-              this.currentVideo = this.CRDetail.videosVo[0];
-            }
-            // 获取关联文物
-            this.loadCrRecommend();
-            this.$nextTick(() => {
-              // this.replaceFaceImage();
-              if (this.CRDetail.audiosVo && this.CRDetail.audiosVo.length > 0) {
-                this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
-                this.$refs.AudioPlayer.play();
-              }
-            });
-          }
-        }
-      },
-  
-      async loadCrRecommend() {
-        const { crId } = this.CRDetail;
-        const params = {
-          crId,
-          page: 1,
-          limit: 4,
+
+    handelPreviewImages(items, hasImages) {
+      this.imgViewerVisible = true;
+      if (hasImages) {
+        this.imgList = items.map((item) => this.$getFullUrl(item.url));
+      } else {
+        this.imgList = items.map((item) => this.$getFullUrl(item));
+      }
+    },
+    handleToDetail(crId) {
+      // const newPage = this.$router.resolve({
+      //   path: `culturalReli/${crId}`,
+      // });
+      // window.open(newPage.href, "_blank");
+      this.$router.push(`culturalRelic/${crId}`);
+    },
+    // 点击音频
+    handleClickAudio() {
+      this.audioPlaying = !this.audioPlaying;
+      if (this.audioPlaying) {
+        this.$refs["AudioPlayer"].play();
+        // console.log(this.$refs['audioContainer']);
+      } else {
+        this.$refs["AudioPlayer"].pause();
+      }
+    },
+
+    // 关联文献的行样式调整
+    tableRowStyle({ row, rowIndex }) {
+      if (rowIndex % 2 == 0) {
+        return {
+          background: "#f9f9f9 !important",
         };
-        if (this.currentRcKey == "type") {
-          params.type = this.CRDetail.type;
-        }
-        if (this.currentRcKey == "years") {
-          params.years = this.CRDetail.years;
-        }
-        if (this.currentRcKey == "deptId") {
-          params.deptId = this.CRDetail.deptId;
-        }
-        let res = await crRecommendByPage(params);
-        this.relateRelics = res.data.records;
-        // console.log("res", res);
-      },
-  
-      replaceFaceImage() {
-        var img = new Image(); //新建一个图片对象
-        let url; //最终显示的大图
-        // debugger
-        if (this.CRDetail.faceImagePressUrl) {
-          url = this.$getFullUrl(this.CRDetail.faceImageUrl);
-        } else if (this.CRDetail.imagesVo.length > 0) {
-          url = this.$getFullUrl(this.CRDetail.imagesVo[0].url);
-        }
-        let faceImage = document.getElementById("faceImage");
-        img.src = url;
-        img.onload = function () {
-          faceImage.src = url;
+      } else {
+        return {
+          background: "#fff !important",
         };
-      },
-      handleBack() {
-        this.$router.go(-1);
-      },
-  
-      handleTo3D() {
-        this.$message.info("即将打开3D模型...");
-        setTimeout(() => {
-          window.open(this.CRDetail.url3d, "_blank");
-        }, 1000);
-      },
-  
-      closeImgViewer() {
-        this.imgViewerVisible = false;
-      },
-  
-      handelPreviewImages(items, hasImages) {
-        this.imgViewerVisible = true;
-        if (hasImages) {
-          this.imgList = items.map((item) => this.$getFullUrl(item.url));
-        } else {
-          this.imgList = items.map((item) => this.$getFullUrl(item));
-        }
-      },
-      handleToDetail(crId) {
-        // const newPage = this.$router.resolve({
-        //   path: `culturalReli/${crId}`,
-        // });
-        // window.open(newPage.href, "_blank");
-        this.$router.push(`culturalRelic/${crId}`);
-      },
-      // 点击音频
-      handleClickAudio() {
-        this.audioPlaying = !this.audioPlaying;
-        if (this.audioPlaying) {
-          this.$refs["AudioPlayer"].play();
-          // console.log(this.$refs['audioContainer']);
-        } else {
-          this.$refs["AudioPlayer"].pause();
-        }
-      },
-  
-      // 关联文献的行样式调整
-      tableRowStyle({ row, rowIndex }) {
-        if (rowIndex % 2 == 0) {
-          return {
-            background: "#f9f9f9 !important",
-          };
-        } else {
-          return {
-            background: "#fff !important",
-          };
-        }
-      },
-      // 预览关联文献
-      handleViewLt(item) {
-        previewFile(item.files[0].url, item.files[0].name);
-      },
-  
-      closeImgViewer() {
-        this.imgViewerVisible = false;
-      },
-  
-      handleToCr(item) {
-        const { crId } = item;
-        const newPage = this.$router.resolve({
-          path: "/culturalRelic/" + crId,
-        });
-        window.open(newPage.href, "_blank");
-        // this.$router.push(`/culturalRelic/${crId}`);
-      },
-  
-      handleChangeCurrentVideo(video) {
-        this.currentVideo = video;
-      },
-  
-      handleClickTabItem(item) {
-        this.currentTab = item;
-        if (item.position) {
-          document.documentElement.scrollTop = item.position;
+      }
+    },
+    // 预览关联文献
+    handleViewLt(item) {
+      previewFile(item.files[0].url, item.files[0].name);
+    },
+
+    closeImgViewer() {
+      this.imgViewerVisible = false;
+    },
+
+    handleToCr(item) {
+      const { crId } = item;
+      const newPage = this.$router.resolve({
+        path: "/culturalRelic/" + crId,
+      });
+      window.open(newPage.href, "_blank");
+      // this.$router.push(`/culturalRelic/${crId}`);
+    },
+
+    handleChangeCurrentVideo(video) {
+      this.currentVideo = video;
+    },
+
+    handleClickTabItem(item) {
+      this.currentTab = item;
+      if (item.position) {
+        document.documentElement.scrollTop = item.position;
+      }
+    },
+
+    initHeight() {
+      let scrollTop =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop;
+      this.isFixed = scrollTop > this.offsetTop - 155 ? true : false; //100为navbar的高度，55为tabbar的高度
+      this.tabbarData.map((item) => {
+        let content = document.getElementById(item.domId);
+        if (content && isElementInViewport2(content)) {
+          this.currentTab = item;
         }
-      },
-  
-      initHeight() {
-        let scrollTop =
-          window.pageYOffset ||
-          document.documentElement.scrollTop ||
-          document.body.scrollTop;
-        this.isFixed = scrollTop > this.offsetTop - 155 ? true : false; //100为navbar的高度，55为tabbar的高度
-        this.tabbarData.map((item) => {
-          let content = document.getElementById(item.domId);
-          if (content && isElementInViewport2(content)) {
-            this.currentTab = item;
-          }
-        });
-      },
+      });
     },
-  };
-  </script>
-    
-    <style lang="scss" >
-  // 自定义分页器样式
-  #page {
-    height: 30px;
-    display: flex;
-    justify-content: center;
-  }
-  .page-item {
-    cursor: pointer;
-  }
-  </style>
-    
-    <style lang="scss" scoped>
-  // 中国风主题样式
-  /**公共样式开始 */
-  $titleFontFamily: SourceHanSerifCN-Bold;
-  .custom-title {
-    width: 50px;
-    background-color: #d72f3f;
-    min-height: 300px;
-    color: #fff;
-    font-size: 28px;
-    writing-mode: vertical-rl;
+  },
+};
+</script>
+
+<style lang="scss">
+// 自定义分页器样式
+#page {
+  height: 30px;
+  display: flex;
+  justify-content: center;
+}
+.page-item {
+  cursor: pointer;
+}
+</style>
+
+<style lang="scss" scoped>
+// 中国风主题样式
+/**公共样式开始 */
+$titleFontFamily: SourceHanSerifCN-Bold;
+.custom-title {
+  width: 50px;
+  background-color: #d72f3f;
+  min-height: 300px;
+  color: #fff;
+  font-size: 28px;
+  writing-mode: vertical-rl;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
+  letter-spacing: 10px;
+}
+.units {
+  background-image: linear-gradient(to bottom, #660d04, #520002);
+  min-height: 400px;
+}
+.content {
+  // background: url("@/assets/imgs/display/normal/bg1.png");
+  background-color: #f3f3f3;
+  min-height: 100px;
+}
+.content-item {
+  width: 100%;
+}
+
+.custom_title {
+  display: flex;
+  width: 100%;
+  padding: 50px 0 40px 0;
+  align-items: center;
+  .center {
+    width: 180px;
+    margin: 0 10px;
     display: flex;
     align-items: center;
-    justify-content: center;
-    box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
-    letter-spacing: 10px;
-  }
-  .units {
-    background-image: linear-gradient(to bottom, #660d04, #520002);
-    min-height: 400px;
-  }
-  .content {
-    // background: url("@/assets/imgs/display/normal/bg1.png");
-    background-color: #f3f3f3;
-    min-height: 100px;
-  }
-  .content-item {
-    width: 100%;
+    .svg-icon {
+      font-size: 50px;
+      color: $deepBlue;
+      margin-right: 10px;
+    }
+    .title {
+      font-size: 26px;
+      font-weight: 400;
+      color: $deepBlue;
+      line-height: 101px;
+    }
   }
-  
-  .custom_title {
+  .desc {
+    flex: 1;
     display: flex;
-    width: 100%;
-    padding: 50px 0 40px 0;
     align-items: center;
-    .center {
-      width: 180px;
-      margin: 0 10px;
-      display: flex;
-      align-items: center;
-      .svg-icon {
-        font-size: 50px;
-        color: $themeColor;
-        margin-right: 10px;
-      }
-      .title {
-        font-size: 26px;
-        font-weight: 400;
-        color: $themeColor;
-        line-height: 101px;
+    .modify {
+      width: 16px;
+      margin: 0 6px;
+      img {
+        width: 100%;
       }
     }
-    .desc {
+    .divider {
       flex: 1;
-      display: flex;
-      align-items: center;
-      .modify {
-        width: 16px;
-        margin: 0 6px;
-        img {
-          width: 100%;
-        }
-      }
-      .divider {
-        flex: 1;
-        height: 6px;
-        background: url("@/assets/imgs/display/normal/divider.png") 100% 100%
-          repeat-x;
-        img {
-          width: 100%;
-        }
+      height: 6px;
+      background: url("@/assets/imgs/display/normal/divider.png") 100% 100%
+        repeat-x;
+      img {
+        width: 100%;
       }
     }
   }
-  
-  .enlarge {
-    position: absolute;
-    bottom: 20px;
-    right: 40px;
-    display: flex;
-    z-index: 9;
-    background-color: #c1925b;
-    width: 40px;
-    height: 40px;
-    border-radius: 12px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+}
+
+.enlarge {
+  position: absolute;
+  bottom: 20px;
+  right: 40px;
+  display: flex;
+  z-index: 9;
+  background-color: #c1925b;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+  cursor: pointer;
+  img {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.intro-title {
+  font-size: 26px;
+  font-weight: 400;
+  color: $deepBlue;
+  font-family: "SourceHanSerifCN-Bold";
+  display: flex;
+  align-items: center;
+  margin-bottom: 32px;
+  .svg-icon {
     margin-right: 10px;
-    cursor: pointer;
-    img {
-      width: 24px;
-      height: 24px;
-    }
+    font-size: 36px;
   }
-  
-  .intro-title {
-    font-size: 26px;
-    font-weight: 400;
-    color: $themeColor;
-    font-family: "SourceHanSerifCN-Bold";
-    display: flex;
-    align-items: center;
-    margin-bottom: 32px;
-    .svg-icon {
-      margin-right: 10px;
-      font-size: 36px;
+}
+
+.isFixed {
+  position: fixed;
+  left: 0;
+  top: $nav-height;
+  z-index: 99;
+}
+/**公共样式结束 */
+
+/**样式开始 */
+.content {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  /**轮播图 */
+  .display-detail_imgs {
+    height: 436px;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
     }
   }
-  
-  .isFixed {
-    position: fixed;
-    left: 0;
-    top: $nav-height;
-    z-index: 99;
-  }
-  /**公共样式结束 */
-  
-  /**样式开始 */
-  .content {
-    width: 100%;
-    overflow: hidden;
+  .wrapper {
+    width: 1200px;
+    // padding: 0 13%;
+    // width: 100%;
+    // width: 78%;
     display: flex;
     justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    /**轮播图 */
-    .display-detail_imgs {
-      height: 436px;
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-    .wrapper {
-      width: 1200px;
-      // padding: 0 13%;
-      // width: 100%;
-      // width: 78%;
+    .inner {
+      width: 100%;
+      // box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
       display: flex;
+      flex-direction: column;
+      align-items: center;
       justify-content: center;
-      .inner {
-        width: 100%;
-        // box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        min-height: 200px;
+      min-height: 200px;
+      position: relative;
+      background-color: #fff;
+      // margin: 36px 0 70px;
+      /**基本信息 */
+      .display-detail_basic_info {
         position: relative;
-        background-color: #fff;
-        // margin: 36px 0 70px;
-        /**基本信息 */
-        .display-detail_basic_info {
-          position: relative;
-          .info-container {
-            display: flex;
-            justify-content: space-between;
-            padding: 40px 36px;
-            height: 100%;
-            background-color: #fff;
-            .info-container-left {
-              min-height: 200px;
-              max-height: 460px;
-              margin-right: 50px;
-              flex: 1;
-              overflow: hidden;
-              position: relative;
-              // .imagesVo-image-container {
-              //   // position: relative;
-  
-              // }
-              .img-container {
-                height: 100%;
+        .info-container {
+          display: flex;
+          justify-content: space-between;
+          padding: 40px 36px;
+          height: 100%;
+          background-color: #fff;
+          .info-container-left {
+            min-height: 200px;
+            max-height: 460px;
+            margin-right: 50px;
+            flex: 1;
+            overflow: hidden;
+            position: relative;
+            // .imagesVo-image-container {
+            //   // position: relative;
+
+            // }
+            .img-container {
+              height: 100%;
+              width: 100%;
+              background: #f5f5f9;
+              img {
                 width: 100%;
-                background: #f5f5f9;
-                img {
-                  width: 100%;
-                  height: 100%;
-                  object-fit: contain;
+                height: 100%;
+                object-fit: contain;
+              }
+            }
+          }
+          .info-container-right {
+            flex: 1;
+            min-height: 200px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            .info-title {
+              font-size: 28px;
+              font-weight: bold;
+              color: #444;
+              padding-bottom: 20px;
+              margin-bottom: 20px;
+              border-bottom: 2px solid #f2f2f2;
+              .view-count {
+                font-size: 18px;
+                margin-top: 10px;
+                color: #999;
+                font-weight: normal;
+                .svg-icon {
+                  margin-right: 10px;
                 }
               }
             }
-            .info-container-right {
-              flex: 1;
-              min-height: 200px;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-              .info-title {
-                font-size: 28px;
-                font-weight: bold;
-                color: #444;
-                padding-bottom: 20px;
-                margin-bottom: 20px;
-                border-bottom: 2px solid #f2f2f2;
-                .view-count {
-                  font-size: 18px;
-                  margin-top: 10px;
+            .basic-info {
+              .body-item {
+                display: flex;
+                align-items: flex-start;
+                margin-bottom: 10px;
+                font-size: 18px;
+                .label {
+                  display: flex;
+                  align-items: center;
+                  width: 120px;
+                  // margin-right: 26px;
+                  // margin-bottom: 10px;
+                  font-weight: bold;
                   color: #999;
-                  font-weight: normal;
                   .svg-icon {
-                    margin-right: 10px;
+                    width: 24px;
+                    height: 24px;
+                    margin-right: 16px;
                   }
                 }
+                .value {
+                  color: #666;
+                  // font-weight: bold;
+                }
               }
-              .basic-info {
-                .body-item {
-                  display: flex;
-                  align-items: flex-start;
-                  margin-bottom: 10px;
-                  font-size: 18px;
-                  .label {
-                    display: flex;
-                    align-items: center;
-                    width: 120px;
-                    // margin-right: 26px;
-                    // margin-bottom: 10px;
-                    font-weight: bold;
-                    color: #999;
-                    .svg-icon {
-                      width: 24px;
-                      height: 24px;
-                      margin-right: 16px;
-                    }
-                  }
-                  .value {
-                    color: #666;
-                    // font-weight: bold;
-                  }
+            }
+
+            .bottom {
+              display: flex;
+              flex-direction: column;
+              justify-content: flex-end;
+              .qrcode {
+                display: flex;
+                justify-content: center;
+                img {
+                  width: 50%;
+                  height: 100%;
                 }
               }
-  
-              .bottom {
+              .showIcon {
+                height: 40px;
+                width: 100%;
                 display: flex;
-                flex-direction: column;
-                justify-content: flex-end;
-                .qrcode {
-                  display: flex;
-                  justify-content: center;
-                  img {
-                    width: 50%;
-                    height: 100%;
-                  }
+                justify-content: center;
+                align-items: center;
+                background-color: $deepBlue;
+                margin: 20px 0;
+                color: #fff;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                &:hover {
+                  // box-shadow: 2px 6px 6px 2px rgb(0 0 0 / 40%);
+                  opacity: 0.8;
+                }
+                .svg-icon {
+                  margin-right: 8px;
                 }
-                .showIcon {
-                  height: 40px;
-                  width: 100%;
+              }
+              .tools {
+                width: 100%;
+                margin-top: 10px;
+                .tools-item {
+                  color: #858585;
+                  flex: 1;
                   display: flex;
-                  justify-content: center;
                   align-items: center;
-                  background-color: $themeColor;
-                  margin: 20px 0;
-                  color: #fff;
                   cursor: pointer;
-                  transition: all 0.3s ease;
-                  &:hover {
-                    // box-shadow: 2px 6px 6px 2px rgb(0 0 0 / 40%);
-                    opacity: 0.8;
-                  }
                   .svg-icon {
+                    width: 22px;
+                    height: 22px;
                     margin-right: 8px;
                   }
-                }
-                .tools {
-                  width: 100%;
-                  margin-top: 10px;
-                  .tools-item {
-                    color: #858585;
-                    flex: 1;
-                    display: flex;
-                    align-items: center;
-                    cursor: pointer;
-                    .svg-icon {
-                      width: 22px;
-                      height: 22px;
-                      margin-right: 8px;
-                    }
-                    .like {
-                      color: #831122;
-                    }
-                    .collect {
-                      color: $themeColor;
-                    }
+                  .like {
+                    color: #831122;
+                  }
+                  .collect {
+                    color: $deepBlue;
                   }
                 }
               }
             }
           }
-          .audio {
-            position: absolute;
-            right: -120px;
-            top: 34px;
-            cursor: pointer;
-            animation: audioRotate 8s linear infinite;
-            transform-origin: center center;
-            border: 2px solid $themeColor;
-            padding: 10px;
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background-color: #fff;
-            transition: all 0.5s ease;
-            &:hover {
-              box-shadow: 0 0 14px rgb(0 0 0 / 40%);
-            }
-            .svg-icon {
-              color: $themeColor;
-              font-size: 80px;
-            }
-            img {
-              width: 60px;
-              height: 60px;
-            }
-          }
         }
-  
-        .display-detail_tabbar {
-          background-color: #fff;
+        .audio {
+          position: absolute;
+          right: -120px;
+          top: 34px;
+          cursor: pointer;
+          animation: audioRotate 8s linear infinite;
+          transform-origin: center center;
+          border: 2px solid $deepBlue;
+          padding: 10px;
+          border-radius: 50%;
           display: flex;
           justify-content: center;
-          padding: 10px;
-          border-bottom: 1px solid #f2f2f2;
-          .tab-item {
-            height: 100%;
-            margin-right: 20px;
-            color: #666;
-            font-size: 24px;
-            font-family: $titleFontFamily;
-            cursor: pointer;
-            position: relative;
-  
-            &:hover {
-              color: $themeColor;
-              &::after {
-                display: inline-block;
-              }
-            }
-            &::after {
-              display: none;
-            }
+          align-items: center;
+          background-color: #fff;
+          transition: all 0.5s ease;
+          &:hover {
+            box-shadow: 0 0 14px rgb(0 0 0 / 40%);
           }
-          .active {
-            color: $themeColor;
+          .svg-icon {
+            color: $deepBlue;
+            font-size: 80px;
+          }
+          img {
+            width: 60px;
+            height: 60px;
+          }
+        }
+      }
+
+      .display-detail_tabbar {
+        background-color: #fff;
+        display: flex;
+        justify-content: center;
+        padding: 10px;
+        border-bottom: 1px solid #f2f2f2;
+        .tab-item {
+          height: 100%;
+          margin-right: 20px;
+          color: #666;
+          font-size: 24px;
+          font-family: $titleFontFamily;
+          cursor: pointer;
+          position: relative;
+
+          &:hover {
+            color: $deepBlue;
             &::after {
               display: inline-block;
             }
           }
-          .tab-item::after,
-          .active::after {
-            position: absolute;
-            content: "";
-            height: 4px;
-            width: 100%;
-            bottom: -10px;
-            left: 0;
-            background-color: $themeColor;
+          &::after {
+            display: none;
           }
         }
-        /**简介和视频 */
-        .display-detail_intro {
-          padding: 40px;
-  
-          .intro-content {
-            line-height: 28px;
-            display: flex;
+        .active {
+          color: $deepBlue;
+          &::after {
+            display: inline-block;
           }
-          .left-box {
-            width: 60px;
-            background-color: $themeColor;
-            min-height: 200px;
-            color: #fff;
+        }
+        .tab-item::after,
+        .active::after {
+          position: absolute;
+          content: "";
+          height: 4px;
+          width: 100%;
+          bottom: -10px;
+          left: 0;
+          background-color: $deepBlue;
+        }
+      }
+      /**简介和视频 */
+      .display-detail_intro {
+        padding: 40px;
+
+        .intro-content {
+          line-height: 28px;
+          display: flex;
+        }
+        .left-box {
+          width: 60px;
+          background-color: $deepBlue;
+          min-height: 200px;
+          color: #fff;
+          font-size: 28px;
+          writing-mode: vertical-rl;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          letter-spacing: 10px;
+          font-family: SourceHanSerifCN-Bold;
+        }
+        .intro-content-container {
+          flex: 1;
+          text-indent: 34px;
+          padding: 16px 32px;
+          background-color: rgba($deepBlue, 10%);
+        }
+      }
+
+      .display-detail_videos {
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        .video-title {
+          display: flex;
+          // justify-content: center;
+          align-items: center;
+          font-size: 26px;
+          color: $deepBlue;
+          margin: 80px 0 40px;
+          font-family: SourceHanSerifCN-Bold;
+          padding-left: 46px;
+          i {
             font-size: 28px;
-            writing-mode: vertical-rl;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            letter-spacing: 10px;
-            font-family: SourceHanSerifCN-Bold;
-          }
-          .intro-content-container {
-            flex: 1;
-            text-indent: 34px;
-            padding: 16px 32px;
-            background-color: rgba($themeColor, 10%);
+            margin-right: 10px;
           }
         }
-  
-        .display-detail_videos {
+        .video-names {
           display: flex;
-          flex-direction: column;
-          background-color: #fff;
-          .video-title {
-            display: flex;
-            // justify-content: center;
-            align-items: center;
-            font-size: 26px;
-            color: $themeColor;
-            margin: 80px 0 40px;
-            font-family: SourceHanSerifCN-Bold;
-            padding-left: 46px;
-            i {
-              font-size: 28px;
-              margin-right: 10px;
-            }
-          }
-          .video-names {
-            display: flex;
-            justify-content: center;
-            border-bottom: 1px solid #f2f0f0;
-            margin-bottom: 30px;
-            .video-item {
-              font-size: 18px;
-              margin: 8px 30px;
-              .name {
-                color: #999;
-                position: relative;
-                cursor: pointer;
-                &:hover {
-                  color: $themeColor;
-                  &::after {
-                    display: inline-block;
-                  }
-                  &::before {
-                    display: inline-block;
-                  }
+          justify-content: center;
+          border-bottom: 1px solid #f2f0f0;
+          margin-bottom: 30px;
+          .video-item {
+            font-size: 18px;
+            margin: 8px 30px;
+            .name {
+              color: #999;
+              position: relative;
+              cursor: pointer;
+              &:hover {
+                color: $deepBlue;
+                &::after {
+                  display: inline-block;
+                }
+                &::before {
+                  display: inline-block;
                 }
-              }
-              .active::after,
-              .name::after {
-                content: "";
-                width: 50%;
-                height: 1px;
-                background-color: $themeColor;
-                position: absolute;
-                left: 0;
-                bottom: -9px;
-                left: 50%;
-                transform: translateX(-50%);
-                display: none;
-              }
-              .active::before,
-              .name::before {
-                content: "";
-                width: 0;
-                height: 0;
-                border: 8px solid transparent;
-                border-top-color: $themeColor;
-                position: absolute;
-                left: 50%;
-                bottom: -25px;
-                transform: translateX(-50%);
-                display: none;
-              }
-              .active::after,
-              .active::before {
-                display: inline-block;
               }
             }
-          }
-          .video-box {
-            height: 600px;
-            .video-player {
-              height: 100%;
+            .active::after,
+            .name::after {
+              content: "";
+              width: 50%;
+              height: 1px;
+              background-color: $deepBlue;
+              position: absolute;
+              left: 0;
+              bottom: -9px;
+              left: 50%;
+              transform: translateX(-50%);
+              display: none;
+            }
+            .active::before,
+            .name::before {
+              content: "";
+              width: 0;
+              height: 0;
+              border: 8px solid transparent;
+              border-top-color: $deepBlue;
+              position: absolute;
+              left: 50%;
+              bottom: -25px;
+              transform: translateX(-50%);
+              display: none;
+            }
+            .active::after,
+            .active::before {
+              display: inline-block;
             }
           }
         }
-  
-        // 关联文物
-        .display-detail_relate_rc {
-          min-height: 560px;
-          // background-image: url("@/assets/imgs/display/normal/bg.png");
-          background-color: #fff;
-          background-size: 1%;
-          padding: 50px 46px;
-          .intro-title {
-            display: flex;
-            align-items: center;
-            font-family: SourceHanSerifCN-Bold;
-          }
-  
-          .recommend-type {
-            margin-bottom: 20px;
-            border-bottom: 1px solid #f2f2f2;
-            padding-bottom: 8px;
+        .video-box {
+          height: 600px;
+          .video-player {
+            height: 100%;
           }
-          .el-row {
-            .el-col {
-              .img-container {
+        }
+      }
+
+      // 关联文物
+      .display-detail_relate_rc {
+        min-height: 560px;
+        // background-image: url("@/assets/imgs/display/normal/bg.png");
+        background-color: #fff;
+        background-size: 1%;
+        padding: 50px 46px;
+        .intro-title {
+          display: flex;
+          align-items: center;
+          font-family: SourceHanSerifCN-Bold;
+        }
+
+        .recommend-type {
+          margin-bottom: 20px;
+          border-bottom: 1px solid #f2f2f2;
+          padding-bottom: 8px;
+        }
+        .el-row {
+          .el-col {
+            .img-container {
+              width: 100%;
+              height: 214px;
+              position: relative;
+              cursor: pointer;
+              background-color: #939393;
+              img {
                 width: 100%;
-                height: 214px;
-                position: relative;
-                cursor: pointer;
-                background-color: #939393;
-                img {
-                  width: 100%;
-                  height: 100%;
-                  object-fit: contain;
-                }
-              }
-              .cr-name {
-                font-size: 18px;
-                // font-weight: bold;
-                color: #666;
-                text-align: left;
-                margin: 20px 0;
-                text-indent: 2px;
+                height: 100%;
+                object-fit: contain;
               }
             }
+            .cr-name {
+              font-size: 18px;
+              // font-weight: bold;
+              color: #666;
+              text-align: left;
+              margin: 20px 0;
+              text-indent: 2px;
+            }
           }
         }
-  
-        /**关联文献 */
-        .display-detail_lts {
-          background-color: #fafafa;
-          .lts-content {
-            flex: 1;
-          }
+      }
+
+      /**关联文献 */
+      .display-detail_lts {
+        background-color: #fafafa;
+        .lts-content {
+          flex: 1;
         }
       }
     }
   }
-  ::v-deep .el-carousel__item--card {
-    width: 100%;
-    height: 100%;
-    transform: translateX(0) scale(1) !important;
-  }
-  
-  ::v-deep .el-carousel {
-    height: 100%;
-  }
-  ::v-deep .el-carousel__container {
-    height: 100%;
-  }
-  ::v-deep .el-tree {
-    background: transparent;
-    .el-tree-node__content {
-      height: 50px;
-      :hover {
-        background: #fff;
-        color: $themeColor;
-      }
+}
+::v-deep .el-carousel__item--card {
+  width: 100%;
+  height: 100%;
+  transform: translateX(0) scale(1) !important;
+}
+
+::v-deep .el-carousel {
+  height: 100%;
+}
+::v-deep .el-carousel__container {
+  height: 100%;
+}
+::v-deep .el-tree {
+  background: transparent;
+  .el-tree-node__content {
+    height: 50px;
+    :hover {
+      background: #fff;
+      color: $deepBlue;
     }
   }
-  ::v-deep .el-radio__input {
-    display: none;
+}
+::v-deep .el-radio__input {
+  display: none;
+}
+
+::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: $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);
   }
-  
-  ::v-deep .el-radio__label {
-    font-size: 18px;
-    padding-left: 0;
-    font-family: SourceHanSerifCN-Bold;
+  100% {
+    transform: translateX(-1200px);
   }
-  ::v-deep .el-radio__input.is-checked + .el-radio__label {
-    color: $themeColor;
+}
+@keyframes filmMoveRight {
+  0% {
+    transform: translateX(0);
   }
-  // ::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);
-    }
+  100% {
+    transform: translateX(1200px);
   }
-  @keyframes filmMoveRight {
-    0% {
-      transform: translateX(0);
-    }
-    100% {
-      transform: translateX(1200px);
-    }
+}
+
+@keyframes audioRotate {
+  0% {
+    transform: rotateZ(0deg);
   }
-  
-  @keyframes audioRotate {
-    0% {
-      transform: rotateZ(0deg);
-    }
-    100% {
-      transform: rotateZ(360deg);
-    }
+  100% {
+    transform: rotateZ(360deg);
   }
-  
-  @-webkit-keyframes audioRotate {
-    0% {
-      transform: rotateZ(0deg);
-    }
-    100% {
-      transform: rotateZ(360deg);
-    }
+}
+
+@-webkit-keyframes audioRotate {
+  0% {
+    transform: rotateZ(0deg);
   }
-  
-  .animation-play-paused {
-    animation-play-state: paused;
-    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
+  100% {
+    transform: rotateZ(360deg);
   }
-  </style>
\ No newline at end of file
+}
+
+.animation-play-paused {
+  animation-play-state: paused;
+  -webkit-animation-play-state: paused; /* Safari 和 Chrome */
+}
+</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">
@@ -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>
\ No newline at end of file
+</style>

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>
\ No newline at end of file
+</style>

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">
@@ -31,13 +52,13 @@
             <div class="info-item">
               <span class="label"> 展览类型： </span>
               <span class="value">{{
-                  dicts.displayType[displayDetail.type] || "暂无"
+                dicts.displayType[displayDetail.type] || "暂无"
               }}</span>
             </div>
             <div class="info-item">
               <span class="label"> 展览性质： </span>
               <span class="value">{{
-                  dicts.displayCharacter[displayDetail.displayCharacter] || "暂无"
+                dicts.displayCharacter[displayDetail.displayCharacter] || "暂无"
               }}</span>
             </div>
             <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="{
-                    title: true,
-                    active: currentUnit.title == item.title,
-                  }">
+                    }"
+                  ></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="
-                        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="
-                            width: 100%;
-                            height: 100%;
-                            object-fit: contain;
-                            cursor: pointer;
-                          " @click="handelPreviewImages(unitValue.imagesVo, index)" />
+                      <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="
+                              width: 100%;
+                              height: 100%;
+                              object-fit: contain;
+                              cursor: pointer;
+                            "
+                            @click="
+                              handelPreviewImages(unitValue.imagesVo, index)
+                            "
+                          />
                         </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 || item.faceImagePressUrl)" alt="" style="
-                          width: 100%;
-                          height: 100%;
-                          object-fit: fill;
-                          cursor: pointer;
-                        " @click="handleToCr(item)" />
+                        <img
+                          :src="
+                            $getFullUrl(
+                              item.faceImageMiddleUrl || item.faceImagePressUrl
+                            )
+                          "
+                          alt=""
+                          style="
+                            width: 100%;
+                            height: 100%;
+                            object-fit: fill;
+                            cursor: pointer;
+                          "
+                          @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);
@@ -1078,4 +1173,4 @@ $themeColor: #a30e0c;
   -webkit-animation-play-state: paused;
   /* Safari 和 Chrome */
 }
-</style>
\ No newline at end of file
+</style>

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);
@@ -1392,4 +1389,4 @@ $titleFontFamily: SourceHanSerifCN-Bold;
   -webkit-animation-play-state: paused;
   /* Safari 和 Chrome */
 }
-</style>
\ No newline at end of file
+</style>

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)"
+        >
+          {{ item.title }}
+        </swiper-slide>
+      </swiper>
+      <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"
+      >
+        <i class="el-icon-arrow-right"></i>
+      </div>
+    </div>
 
-    <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)">
-                    {{ item.title }}
-                </swiper-slide>
-            </swiper>
-            <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">
-                <i class="el-icon-arrow-right"></i>
-            </div>
+    <div class="unit-content">
+      <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="imgs-title">单元图片</div> -->
+          <div class="unit-imgs">
+            <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"
+                />
+              </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-col>
+            </el-row>
+          </div>
         </div>
 
-        <div class="unit-content">
-            <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="imgs-title">单元图片</div> -->
-                    <div class="unit-imgs">
-
-                        <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" />
-                            </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-col>
-                        </el-row>
-                    </div>
-                </div>
-
-                <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="
-                        width: 100%;
-                        height: 100%;
-                        object-fit: fill;
-                        cursor: pointer;
-                      " @click="handleToCr(item)" />
-                        </template>
-                        <template slot-scope="{ item }" slot="info">
-                            <div class="name">{{ item.name }}</div>
-                        </template>
-                    </SlideImageGroup>
-                </div>
-            </div>
+        <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="
+                  width: 100%;
+                  height: 100%;
+                  object-fit: fill;
+                  cursor: pointer;
+                "
+                @click="handleToCr(item)"
+              />
+            </template>
+            <template slot-scope="{ item }" slot="info">
+              <div class="name">{{ item.name }}</div>
+            </template>
+          </SlideImageGroup>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -75,247 +124,240 @@ import { swiper, swiperSlide } from "vue-awesome-swiper";
 import SlideImageGroup from "@/components/SlideImageGroup";
 import "swiper/dist/css/swiper.css";
 export default {
-    name: "NormalStyleUnit",
-    components: {
-        swiper,
-        swiperSlide,
-        SlideImageGroup,
+  name: "NormalStyleUnit",
+  components: {
+    swiper,
+    swiperSlide,
+    SlideImageGroup,
+  },
+  props: {
+    curUnit: {
+      type: Object,
+      default: null,
+    },
+    exhibitionUnits: {
+      type: Array,
+      default: null,
     },
-    props: {
-        curUnit: {
-            type: Object,
-            default: null
+  },
+
+  data() {
+    return {
+      unitSwiperOption: {
+        loop: false,
+        loopedSlides: 8, // looped slides should be the same
+        spaceBetween: 10,
+        slidesPerView: 4,
+        navigation: {
+          nextEl: ".unit-swiper-button-next",
+          prevEl: ".unit-swiper-button-prev",
         },
-        exhibitionUnits: {
-            type: Array,
-            default: null
-        }
+      },
+    };
+  },
+  updated() {
+    let p = document.getElementsByTagName("p");
+    let arr = [...p];
+    arr.map((item) => {
+      item.style.color = "#333";
+    });
+  },
+  methods: {
+    handleClickUnit(item) {
+      this.$emit("handleClickUnit", item);
     },
-
-    data() {
-        return {
-            unitSwiperOption: {
-                loop: false,
-                loopedSlides: 8, // looped slides should be the same
-                spaceBetween: 10,
-                slidesPerView: 4,
-                navigation: {
-                    nextEl: ".unit-swiper-button-next",
-                    prevEl: ".unit-swiper-button-prev",
-                },
-            },
-        }
+    handelPreviewImages(images) {
+      this.$emit("handelPreviewImages", images);
     },
-    updated() {
-        let p = document.getElementsByTagName('p')
-        let arr = [...p]
-        arr.map(item => {
-            item.style.color = "#333"
-        })
+    handleToCr(item) {
+      this.$emit("handleToCr", item);
     },
-    methods: {
-        handleClickUnit(item) {
-            this.$emit('handleClickUnit', item)
-        },
-        handelPreviewImages(images) {
-            this.$emit('handelPreviewImages', images)
-        },
-        handleToCr(item) {
-            this.$emit('handleToCr', item)
-        }
-    }
-}
+  },
+};
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 .unit-content_intro {
-    p {
-        // color: red !important;
-        font-family: $defaultFontFamily !important;
-        
-        // color: #333 !important;
-    }
+  p {
+    // color: red !important;
+    font-family: $defaultFontFamily !important;
+
+    // color: #333 !important;
+  }
 }
 </style>
 <style lang="scss" scoped>
 .unit-container {
-    margin-bottom: 40px;
-    position: relative;
-
+  margin-bottom: 40px;
+  position: relative;
 }
 
 .unit-content-menu {
-    margin-right: 40px;
-    padding: 0 20px;
-    position: relative;
-
-    .swiper-container {
-        width: 90%;
-
-        .slide-item {
-            padding: 8px;
-            border-radius: 4px;
-            color: $themeColor;
-            cursor: pointer;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            width: 100%;
-            white-space: nowrap;
-            border: 1px solid $themeColor;
-        }
-
-        .active {
-            background: $themeColor;
-            color: #fff;
-        }
+  margin-right: 40px;
+  padding: 0 20px;
+  position: relative;
+
+  .swiper-container {
+    width: 90%;
+
+    .slide-item {
+      padding: 8px;
+      border-radius: 4px;
+      color: $deepBlue;
+      cursor: pointer;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      width: 100%;
+      white-space: nowrap;
+      border: 1px solid $deepBlue;
+    }
 
+    .active {
+      background: $deepBlue;
+      color: #fff;
     }
+  }
 }
 
 .swiper-button-next,
 .swiper-button-prev {
-    // background-color: rgba(0,0,0,0.2);
-    // border-radius: 50%;
-    background-image: none;
-    width: 60px;
-    height: 60px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: $themeColor;
-    font-weight: bolder;
-    font-size: 28px;
-    transform: translateY(-6px);
+  // background-color: rgba(0,0,0,0.2);
+  // border-radius: 50%;
+  background-image: none;
+  width: 60px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: $deepBlue;
+  font-weight: bolder;
+  font-size: 28px;
+  transform: translateY(-6px);
 }
 
 .unit-content {
-    flex: 1;
-    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 {
-            font-size: 16px;
-            font-weight: 400;
-            color: #444444;
-            line-height: 36px;
-            text-indent: 32px;
-            margin-bottom: 20px;
-        }
-
-        &:nth-child(1) {
-
-            .unit-content-title {
-                font-size: 24px;
-                font-weight: bold;
-            }
-        }
-
+  flex: 1;
+  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 {
+      font-size: 16px;
+      font-weight: 400;
+      color: #444444;
+      line-height: 36px;
+      text-indent: 32px;
+      margin-bottom: 20px;
+    }
 
-    .unit-content_images {
-        position: relative;
+    &:nth-child(1) {
+      .unit-content-title {
+        font-size: 24px;
+        font-weight: bold;
+      }
+    }
+  }
 
-        .unit-content_images_container {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            background-color: #f5f5f9;
+  .unit-content_images {
+    position: relative;
 
-            .images_img {
-                flex: 1;
-            }
+    .unit-content_images_container {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      background-color: #f5f5f9;
 
-            .desc {
-                display: flex;
-                justify-content: center;
-                height: 40px;
-                align-items: center;
-            }
-        }
-    }
+      .images_img {
+        flex: 1;
+      }
 
-    //单元文物和单元图片公共样式
-    .imgs-title {
-        margin: 16px 0;
+      .desc {
         display: flex;
-        align-items: center;
         justify-content: center;
-        font-size: 20px;
-        font-family: SourceHanSerifCN-Bold;
-
-        i {
-            margin: 0 10px;
-            font-size: 18px;
-        }
+        height: 40px;
+        align-items: center;
+      }
     }
+  }
 
-    .unit-imgs {
-        // height: 300px;
+  //单元文物和单元图片公共样式
+  .imgs-title {
+    margin: 16px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    font-family: SourceHanSerifCN-Bold;
+
+    i {
+      margin: 0 10px;
+      font-size: 18px;
     }
+  }
 
-    .unit-content_crs {
-        position: relative;
+  .unit-imgs {
+    // height: 300px;
+  }
 
-        .el-row {
-            .el-col {
-                margin-bottom: 10px;
+  .unit-content_crs {
+    position: relative;
 
-                .img-container {
-                    background-color: #f5f5f9;
-                    height: 250px;
+    .el-row {
+      .el-col {
+        margin-bottom: 10px;
 
-                    .images_img {
-                        height: 100%;
-                        width: 100%;
-                        position: relative;
-                        cursor: pointer;
-                    }
-                }
-            }
-        }
+        .img-container {
+          background-color: #f5f5f9;
+          height: 250px;
 
-        .desc {
-            display: flex;
-            justify-content: center;
-            padding: 10px;
-            align-items: center;
-            color: #333;
-            font-size: 14px;
+          .images_img {
+            height: 100%;
+            width: 100%;
+            position: relative;
+            cursor: pointer;
+          }
         }
+      }
     }
 
-    .buttons {
-        display: flex;
-        justify-content: flex-end;
-
-        .btn {
-            display: flex;
-            align-content: center;
-            padding: 8px 10px;
-            // border: 1px solid $themeColor;
-            color: #666;
-            cursor: pointer;
-
-            &:hover {
-                color: $themeColor;
-            }
+    .desc {
+      display: flex;
+      justify-content: center;
+      padding: 10px;
+      align-items: center;
+      color: #333;
+      font-size: 14px;
+    }
+  }
 
-            .svg-icon {
-                font-size: 22px;
-                margin: 0 4px;
-            }
-        }
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+
+    .btn {
+      display: flex;
+      align-content: center;
+      padding: 8px 10px;
+      // border: 1px solid $deepBlue;
+      color: #666;
+      cursor: pointer;
+
+      &:hover {
+        color: $deepBlue;
+      }
+
+      .svg-icon {
+        font-size: 22px;
+        margin: 0 4px;
+      }
     }
+  }
 }
-</style>
\ No newline at end of file
+</style>

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;
           }
         }
 
@@ -1204,4 +1203,4 @@ $themeColor: #a30e0c;
   -webkit-animation-play-state: paused;
   /* Safari 和 Chrome */
 }
-</style>
\ No newline at end of file
+</style>

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;
@@ -571,4 +571,4 @@ $text-indent: 16px;
     color: #fff;
   }
 }
-</style>
\ No newline at end of file
+</style>

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="
-                    $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
-                  " alt="" />
+                  <img
+                    :src="
+                      $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
+                    "
+                    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>
\ No newline at end of file
+</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;
@@ -81,4 +72,4 @@ $blue: $themeColor;
     flex: 1;
   }
 }
-</style>
\ No newline at end of file
+</style>

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;
@@ -313,4 +313,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>

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,16 +105,16 @@ $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 {
   margin-left: 30px;
 }
-</style>
\ No newline at end of file
+</style>

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);
         }
@@ -320,4 +320,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>

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);
               }
@@ -359,10 +358,10 @@ $text-indent: 16px;
               padding: 36px 30px;
               transition: all 0.5s ease;
               background: #fff;
-               .name {
+              .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;
@@ -434,4 +433,4 @@ $text-indent: 16px;
     color: #fff;
   }
 }
-</style>
\ No newline at end of file
+</style>