修改颜色变量

src/assets/styles/variable.scss

+$deepBlue: #252F57;
+$yellow: #dfab46;
 
-$themeColor: #252F57;
-$themeSecondaryColor:#dfab46;
-
-$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/Footer/index.vue

 <!-- -->
 <template>
-  <div :class="{
-  footer: true,
-}">
+  <div
+    :class="{
+      footer: true,
+    }"
+  >
     <div class="logo">
       <img src="~@/assets/imgs/display/logo3.png" alt="" />
     </div>
@@ -31,19 +33,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>
@@ -120,7 +127,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;
@@ -142,8 +149,6 @@ export default {
     .menu-item {
       margin-right: 20px;
       cursor: pointer;
-
-
     }
   }
 
@@ -161,13 +166,11 @@ export default {
   }
 
   .copyright {
-    &>a {
+    & > a {
       text-decoration: none;
       color: #fff;
     }
   }
-
-
 }
 
 .map {

src/components/NavBar/index.vue

@@ -30,7 +30,7 @@
         </div>
         <div class="tools animate__animated animate__fadeInRight">
           <div class="wrapper">
-            <el-button  round v-if="!hasToken">
+            <el-button round v-if="!hasToken">
               <i class="el-icon-user"></i>
               <span>登录</span>
               <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
@@ -44,17 +44,10 @@
                 <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
               </el-button>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item
-                  v-if="!hasToken"
-               
-                  class="operation-item"
+                <el-dropdown-item v-if="!hasToken" class="operation-item"
                   >登录
                 </el-dropdown-item>
-                <el-dropdown-item
-                  v-if="hasToken"
-                  class="operation-item"
-                 
-                >
+                <el-dropdown-item v-if="hasToken" class="operation-item">
                   个人中心</el-dropdown-item
                 >
                 <el-dropdown-item v-if="hasToken">
@@ -75,11 +68,7 @@
       @mouseleave="handleMouseLeaveSubMenu"
     >
       <ul>
-        <li
-          v-for="(item, index) in typeList"
-          :key="index"
-          
-        >
+        <li v-for="(item, index) in typeList" :key="index">
           <span>{{ item.label }}</span>
           <svg-icon
             icon-class="wenshi"
@@ -96,10 +85,7 @@ import { mapGetters } from "vuex";
 export default {
   name: "NavBar",
   computed: {
-    ...mapGetters([
-      "token",
-      "userInfo",
-    ]),
+    ...mapGetters(["token", "userInfo"]),
     hasToken() {
       return this.token;
     },
@@ -179,8 +165,8 @@ export default {
       showThemeColor: false,
     };
   },
-  mounted(){
-     console.log(this.themeType);
+  mounted() {
+    console.log(this.themeType);
   },
   methods: {
     handleEnterTabItem(item) {
@@ -225,18 +211,18 @@ export default {
   left: 0;
   z-index: 9;
   background-color: rgba(#000, 0.25) !important;
-  // background-color: rgba($themeColor, 0.3)!important;
+  // background-color: rgba($deepBlue, 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 {
@@ -249,12 +235,11 @@ export default {
   background-color: rgba(0, 0, 0, 0.25) !important;
 }
 
-
 .nav {
   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;
@@ -375,7 +360,7 @@ export default {
 
         &:hover {
           span {
-            color: $themeSecondaryColor;
+            color: $yellow;
           }
         }
 

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  :icon-class="info.loveCountStatus ? 'dianzan-s' : 'dianzan'" :style="{
-          fontSize: iconSize + 'px',
-          color: info.loveCountStatus ? selectColor : color,
-        }"></svg-icon>
+        <svg-icon
+          :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" >
-        <svg-icon :icon-class="info.collectCountStatus ? 'collect-s' : 'collect'" :style="{
-          fontSize: iconSize + 'px',
-          color: info.collectCountStatus ? selectColor : color,
-        }"></svg-icon>
+      <span class="operation-item">
+        <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">
-        <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>
-
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
-import {  formatNum } from "@/utils/index";
+import { formatNum } from "@/utils/index";
 export default {
   name: "ReaderOperations",
   props: {
@@ -81,8 +95,6 @@ export default {
     ...mapGetters(["token", "showLoginDialog"]),
   },
   methods: {
-
-
     formatNum(num) {
       return formatNum(num);
     },
@@ -124,7 +136,7 @@ export default {
 }
 
 .el-button--text {
-  color: $themeColor;
+  color: $deepBlue;
 }
 
 .copy {
@@ -156,7 +168,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%;
@@ -102,8 +107,8 @@ export default {
 }
 
 .play-btn {
-    border: 2px solid #fff;
-    color: #fff;
-    background: $themeColor;;
-  }
-</style>
\ No newline at end of file
+  border: 2px solid #fff;
+  color: #fff;
+  background: $deepBlue;
+}
+</style>

src/components/VideoPlayer/index.vue

@@ -101,7 +101,7 @@ export default {
       &:hover {
         .vjs-big-play-button {
           // background-color: #fff;
-          // color: $themeColor;
+          // color: $deepBlue;
         }
       }
       video {
@@ -122,7 +122,7 @@ export default {
         transform: translate(-50%, -50%);
         font-size: 50px;
         color: #fff;
-        background-color: $themeColor;
+        background-color: $deepBlue;
       }
 
       .vjs-control-bar {

src/views/display/components/templates/NormalStyle.vue

@@ -111,7 +111,6 @@
           <div
             class="audio"
             :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
-            
             v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
           >
             <!-- <img src="@/assets/imgs/display/normal/music.png" alt="" /> -->
@@ -130,7 +129,6 @@
         >
           <span v-for="(item, index) in tabbarData" :key="index">
             <span
-              
               :class="[
                 'tab-item',
                 currentTab && currentTab.domId == item.domId ? 'active' : '',
@@ -174,7 +172,6 @@
           <div class="vr-content">
             <div
               class="img-container"
-          
               v-for="(item, index) in displayDetail.virtualVo"
               :key="index"
             >
@@ -204,7 +201,10 @@
                 class="video-player"
               >
               </video-player> -->
-              <Video :url="$getFullUrl(currentVideo.url)" class="video-player"/>
+              <Video
+                :url="$getFullUrl(currentVideo.url)"
+                class="video-player"
+              />
             </div>
             <div class="video-name-list">
               <div class="title">播放列表</div>
@@ -269,7 +269,6 @@
                   object-fit: fill;
                   cursor: pointer;
                 "
-                
               />
             </template>
             <template slot-scope="{ item }" slot="info">
@@ -513,7 +512,6 @@ export default {
       window.open(newPage.href, "_blank");
     },
 
-
     handleChangeCurrentVideo(video) {
       this.currentVideo = video;
     },
@@ -561,7 +559,7 @@ export default {
 };
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 // 自定义分页器样式
 #page {
   height: 30px;
@@ -582,7 +580,6 @@ export default {
 }
 </style>
 
-
 <style lang="scss" scoped>
 // 中国风主题样式
 /**公共样式开始 */
@@ -623,19 +620,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";
     }
   }
@@ -846,7 +843,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
                   }
 
                   .collect {
-                    color: $themeColor;
+                    color: $deepBlue;
                   }
                 }
               }
@@ -861,7 +858,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;
@@ -875,7 +872,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           }
 
           .svg-icon {
-            color: $themeColor;
+            color: $deepBlue;
             font-size: 80px;
           }
 
@@ -896,14 +893,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;
@@ -916,7 +913,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
         }
 
         .active {
-          color: $themeColor;
+          color: $deepBlue;
 
           &::after {
             display: inline-block;
@@ -931,7 +928,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           width: 100%;
           bottom: -10px;
           left: 0;
-          background-color: $themeColor;
+          background-color: $deepBlue;
         }
       }
 
@@ -945,7 +942,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;
@@ -968,7 +965,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
 
         .left-box {
           width: 60px;
-          background-color: $themeColor;
+          background-color: $deepBlue;
           min-height: 200px;
           color: #fff;
           font-size: 28px;
@@ -984,7 +981,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           flex: 1;
           text-indent: 34px;
           padding: 16px 32px;
-          background-color: rgba($themeColor, 10%);
+          background-color: rgba($deepBlue, 10%);
         }
       }
 
@@ -999,7 +996,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;
@@ -1028,17 +1025,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;
@@ -1047,8 +1044,8 @@ $titleFontFamily: SourceHanSerifCN-Bold;
             }
 
             .active {
-              background: $themeColor;
-              color: $themeSecondaryColor;
+              background: $deepBlue;
+              color: $yellow;
             }
           }
         }
@@ -1069,7 +1066,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);
@@ -1081,18 +1078,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;
         //     }
         //   }
@@ -1185,7 +1182,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           display: flex;
           align-items: center;
           font-size: 26px;
-          color: $themeColor;
+          color: $deepBlue;
           font-family: SourceHanSerifCN-Bold;
 
           i {
@@ -1240,7 +1237,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           }
 
           .lt-name {
-            color: $themeColor;
+            color: $deepBlue;
             cursor: pointer;
           }
         }
@@ -1249,7 +1246,6 @@ $titleFontFamily: SourceHanSerifCN-Bold;
   }
 }
 
-
 // 修改tree icon
 ::v-deep .el-carousel__item--card {
   width: 100%;
@@ -1261,7 +1257,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
   height: 100%;
 }
 
-::v-deep .el-carousel__container {                                              
+::v-deep .el-carousel__container {
   height: 100%;
 }
 
@@ -1273,7 +1269,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
 
     &:hover {
       background-color: #fff;
-      color: $themeColor;
+      color: $deepBlue;
     }
 
     padding-left: 16px !important;
@@ -1282,7 +1278,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
   .is-current {
     .el-tree-node__content {
       background-color: #fff;
-      color: $themeColor;
+      color: $deepBlue;
     }
   }
 }
@@ -1332,4 +1328,4 @@ $titleFontFamily: SourceHanSerifCN-Bold;
   -webkit-animation-play-state: paused;
   /* Safari 和 Chrome */
 }
-</style>
\ No newline at end of file
+</style>

src/views/display/components/templates/RedStyle.vue

@@ -554,14 +554,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;
@@ -939,12 +939,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 {
@@ -997,7 +997,7 @@ $themeColor: #a30e0c;
           }
 
           .active {
-            color: $themeSecondaryColor;
+            color: $yellow;
           }
         }