解决index.js合并冲突

README.md

@@ -7,7 +7,7 @@ cnpm install 或者 npm install  由于vue-video-player 建议用cnpm install保
 
 ### Compiles and hot-reloads for development
 ```
-npm run serve
+npm run dev
 ```
 
 ### Compiles and minifies for production

package.json

@@ -30,6 +30,7 @@
     "vue-router": "^3.5.1",
     "vue-slidepage": "^1.0.0",
     "vue-video-player": "^5.0.2",
+    "vue-waterfall-easy": "^2.4.4",
     "vuex": "^3.6.2",
     "wowjs": "^1.1.3"
   },

src/App.vue

@@ -19,7 +19,7 @@ export default {
   data() {
     return {
       headerFixed: false,
-      whiteList: ["3d"], //不需要nav或者footer的路由页面
+      whiteList: ["3dDetail"], //不需要nav或者footer的路由页面
     };
   },
   mounted() {

src/assets/styles/grayscale.scss

+// 悼念模式，必要时引用
+
+html {
+    filter: grayscale(100%);
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
+    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
+    -webkit-filter: grayscale(1);
+}
\ No newline at end of file

src/assets/styles/index.scss

 @import url('@/assets/fonts/font.css');
 @import url('./animations.scss');
-
 /**适应移动端 */
 @media screen and (max-width: 500px) {
 
@@ -11,7 +10,7 @@
 }
 
 #app {
-  // font-family: "Alibaba-PuHuiTi",Avenir, Helvetica, Arial, sans-serif;
+  // font-family: "Alibaba-pu-hui-ti",Avenir, Helvetica, Arial, sans-serif;
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -42,7 +41,7 @@ li {
 //一些公共样式
 .empty-space {
   height: 100px;
-  background-color: $deepBlue;
+  background-color: $deep-blue;
   width: 100%;
 }
 
@@ -84,12 +83,12 @@ li {
   .btn-quicknext,
   .number {
     background: transparent !important;
-    border: 1px solid $deepBlue !important;
-    color: $deepBlue !important;
+    border: 1px solid $deep-blue !important;
+    color: $deep-blue !important;
   }
 
   .number.active {
-    background: $deepBlue !important;
+    background: $deep-blue !important;
     color: #fff !important;
   }
 }
@@ -227,7 +226,7 @@ li {
             background: #fff;
             min-width: 0;
             margin: 0 16px;
-            color: $deepBlue;
+            color: $deep-blue;
             border-radius: 0 !important;
           }
 
@@ -277,13 +276,13 @@ li {
 
         .el-checkbox__input.is-checked {
           .el-checkbox__inner {
-            background-color: $deepBlue;
-            border-color: $deepBlue;
+            background-color: $deep-blue;
+            border-color: $deep-blue;
           }
 
           +.el-checkbox__label {
             font-weight: 600;
-            color: $deepBlue;
+            color: $deep-blue;
           }
         }
       }

src/assets/styles/variable.scss

-// $deepBlue:#223e36;
-// $deepBlue: #2069c4;
-// $deepBlue:#132c33;
-$deepBlue: #252F57;
-$yellow: #dfab46;
-$puHuiTi: "Alibaba-PuHuiTi";
-$siyuanSongBold: "SourceHanSerifCN-Bold";
+$deep-blue: #252F57; //主题深蓝
+$blue: #2365D3; //
+$yellow: #dfab46; //辅色黄色，用于高亮，选中菜单等
+$pu-hui-ti: "Alibaba-pu-hui-ti"; //阿里巴巴普惠体
+$siyuan-song-bold: "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;
+$nav-height: 120px; //导航高度
 
-$defaultFontFamily: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+$default-font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; //默认字体
\ No newline at end of file

src/components/AudioPlayer/NormalPlayer.vue

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

src/components/Breadcrumb/index.vue

@@ -40,7 +40,7 @@ export default {
 }
 
 ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
-  color: $deepBlue;
+  color: $deep-blue;
 }
 
 ::v-deep .el-breadcrumb__inner.is-link:hover {

src/components/Footer/index.vue

@@ -166,7 +166,7 @@ export default {
   padding: 30px 0;
   justify-content: center;
   align-items: center;
-  background-color: $deepBlue;
+  background-color: $deep-blue;
   flex-direction: column;
   color: #fefefe;
   font-size: 14px;

src/components/ListBanner/index.vue

@@ -79,7 +79,7 @@ export default {
   .total {
     // width: 400px;
     color: #fff;
-    font-family: $puHuiTi;
+    font-family: $pu-hui-ti;
     // position: relative;
     z-index: 1;
     font-size: 40px;
@@ -108,7 +108,7 @@ export default {
       font-weight: normal;
       .num {
         // font-size: 56px;
-        font-family: $puHuiTi;
+        font-family: $pu-hui-ti;
         font-size: 60px;
         margin-right: 10px;
         color: #ffbe1a;
@@ -165,7 +165,7 @@ export default {
     .text {
       font-size: 28px;
       font-weight: 400;
-      color: $deepBlue;
+      color: $deep-blue;
     }
   }
 }

src/components/MenuList/index.vue

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

src/components/NavBar/index.vue

@@ -290,7 +290,7 @@ export default {
 <style lang="scss" scoped>
 .fixed {
   position: fixed !important;
-  background-color: $deepBlue !important;
+  background-color: $deep-blue !important;
   z-index: 99;
   top: 0;
 }
@@ -303,7 +303,7 @@ export default {
   height: $nav-height;
   width: 100%;
   transition: all 0.5s ease;
-  background-color: $deepBlue;
+  background-color: $deep-blue;
   position: relative;
   z-index: 99;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
@@ -348,7 +348,7 @@ export default {
           color: #fff;
           display: flex;
           align-items: center;
-          font-family: "Alibaba-PuHuiTi";
+          font-family: "Alibaba-pu-hui-ti";
           position: relative;
           height: 100%;
           text-align: center;

src/components/ReaderOperations/index.vue

@@ -268,7 +268,7 @@ export default {
 }
 
 .el-button--text {
-  color: $deepBlue;
+  color: $deep-blue;
 }
 
 .copy {
@@ -300,7 +300,7 @@ export default {
 
   .el-button--primary {
     border: none;
-    background-color: $deepBlue;
+    background-color: $deep-blue;
   }
 }
 </style>

src/components/SlideImageGroup/index.vue

@@ -178,7 +178,7 @@ export default {
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background-color: rgba($deepBlue, 0.4);
+  background-color: rgba($deep-blue, 0.4);
   transform: translateY(-20px);
   color: #333;
 }
@@ -214,7 +214,7 @@ export default {
     height: 10px;
   }
   .swiper-pagination-bullet-active {
-    background: $deepBlue;
+    background: $deep-blue;
   }
 }
 </style>

src/components/Video/index.vue

@@ -125,8 +125,8 @@ export default {
 }
 .blue {
   .play-btn {
-    border: 2px solid $deepBlue;
-    color: $deepBlue;
+    border: 2px solid $deep-blue;
+    color: $deep-blue;
   }
 }
 </style>

src/components/VideoPlayer/index.vue

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

src/icons/svg/cloud.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1697703877249" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24503" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M1022 236.61c-9.63 39.93-17 62-52 95.92-11.52 11.19-28 18-44.7 44.5a262 262 0 0 1-75.26 74.66c-56.45 36.9-119.52 57-184.39 72.62-30.4 7.33-61.65 9.65-92.15 16.27-36.89 8-71.32 23.83-107.57 33.93-23.47 6.54-95.52 17-154.38 1.82-42-10.86-76.94-42-88.93-59-19.48-27.6-30-74.94-9-99.92 10.7-12.75 4.81-19.81 1.84-35.5-11.71-61.78 40.31-117.3 102.58-109.14 10.67 1.39 17.49-1.15 24.33-8.53 11.74-12.66 31.11-22.69 51.1-21.69 43 4 58.71 20 80 49.91 5.23 7.33 11.2 13.08 20.07 14.69 23.86 4.35 46.16 22.06 53.83 46.31 8.81 27.85-1 64.95-32 76.94-8 4-6.89 5.08-11 17-10 29-47.74 36.84-78.9 26.78-2.18-0.7-2.87-0.16-5 0.2-23.19 3.89-43.94-11.09-49-34.18-4.16-19 5.92-32.74 14.79-47.19 2.16-3.54 7.23-7.56 9.5-6.46 4.73 2.28 0.31 6.92-1 10.26-7.46 18.86 2.81 37.71 21.63 36.77 19.11-1 39-5.73 48.06-24.15s4.28-40.76-9-54.95c-29-31-94.11-34.44-128.52-2.62-19.93 18.43-24.36 43.59-18.36 72.56 9 28.6 23.87 48.66 48 64.95 47.52 32.13 100.22 33.84 155.87 35 46.3 0.94 98.61-6.12 143.88-16 61.68-13.44 97.1-24.7 151.88-57 28-16.49 89.25-66.4 84.93-72.94s-39 18-66 18c-57.28 0-98.87-7.44-135.23-54.53-11.79-15.26-20.91-32.22-31.47-48.26-16.36-24.83-39.49-39.1-68.26-45.41-29.46-6.46-58.7-4.37-87.84 1.35-11.46 2.25-20.68 1.53-27.59-9.58a149.8 149.8 0 0 0-24.3-29.42c-21.38-19.43-75.57-44.68-134.89-47-52-2-99.06 16-110.91 21-55.95 30-95.29 82.62-98 154.27-0.72 19-8.38 31.86-26.26 39.76-28.6 12.63-48.29 34.57-60.9 63-18.56 42-24.89 85.65-19.77 131.25 6.45 57.47 26.41 108.39 71 147.12 28.29 24.58 60.5 40.69 99.1 42 28.49 0.94 54.69-7.19 80.6-17.44 17.64-7 18-7 25.18 10.13 14.7 35.17 38.19 62.11 72.34 79.58A235.08 235.08 0 0 0 479 859.59c30-2.55 57.35-13.22 80.13-33.81 39-35.22 44.45-81.45 42.54-130-0.44-11.23-2.12-22.41-3.27-34a33.43 33.43 0 0 1 4.21 0.65c3.05 1 6.07 2 9.08 3.09 39.05 14 78.73 21 120.26 12.86 97.64-19.25 126.6-107.36 116-176.09-1.11-7.24-4.77-9.41-11.73-7.23a51.32 51.32 0 0 0-26.63 18.71c-8.66 11.72-16.8 23.83-25.13 35.8-17.65 25.37-37.94 48.2-64.86 64-27.29 16-56.6 21.09-87.1 11.13-24.72-8.07-30.14-27.59-14.87-48.49 5.83-8 13-14.13 22.05-17.94 13-5.45 30.58-1.62 38.24 8 4.38 5.53 4.81 11.07 0 16.35-5.12 5.55-10.72 10.2-19 5.85a5.81 5.81 0 0 1 3.8-4.49c4.08-1.86 8.24-5 7.34-9.4-1-4.77-6.3-6.52-10.88-7.45-12.09-2.44-22.24 1.9-29.35 11.3-13.46 17.81-6.67 32.11 16.52 37.79 20.26 5 35 3.15 54.18-5 30.16-12.8 51.86-35.62 71.09-61.27 11.93-15.92 21.36-33.69 35.57-48 13.55-13.6 28.61-22.21 48-18.69 11 2 24.64 3.47 30 3 34-3 49-18.73 68.95-39 23.52-23.84 46.54-51.72 57.95-90.92 15.83-54.51 12.08-117.55 9.91-119.73zM520 608.73c-0.34 3.33-4.56 2.65-7.27 2.53C442 608.16 377 629.72 313.1 657c-41.07 17.56-83.39 31.61-129 30.84-62.09-1-106.38-47.53-104.5-109.65 0.42-13.91 3.36-27.44 11.69-39.08 13.41-18.73 32-25 54.1-20.92 20.74 3.87 40.43 25.23 44.61 46.61 2.54 13 1.64 25.29-5.49 36.69-6.22 10-15.74 14.6-27 13.32-12.89-1.46-22.51-8.76-26.45-21.5-5-16 9.59-31 26.91-27.41-1.18 3.75-3.93 3.93-6.05 5-7.39 3.63-11.84 9.45-10.69 17.77 1.29 9.29 8.06 14 16.76 15.22 8.07 1.18 14.35-2.34 18.41-9.55 8.81-15.61 2-42.7-14-55.7-13.45-10.94-28.72-14.44-44.68-7.78-19.74 8.24-26.57 25.87-27.35 45.56-2 49.77 27.42 99 93.56 100.83 41.86 1.19 80.77-12 119.05-27C341.83 635 380 618 421.32 610.38c30.3-5.59 60.69-10.17 91.61-5.58 2.83 0.42 7.57-0.71 7.07 3.93z" fill="#D0BE92" p-id="24504"></path><path d="M971.77 407.61c0.39 3.54-1.61 4.8-4.5 5.76-0.4-3.55 1.62-4.8 4.5-5.76z" fill="#D0BE92" p-id="24505"></path></svg>
\ No newline at end of file

src/icons/svg/mouse2.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1697706570225" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2673" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M616 64H408c-119.3 0-216 96.71-216 216v360c0 176.73 143.27 320 320 320s320-143.27 320-320V280c0-119.29-96.71-216-216-216z m168 576a272 272 0 1 1-544 0V280a168 168 0 0 1 168-168h92v113.3a56 56 0 0 0-44 54.7v80a56 56 0 0 0 112 0v-80a56 56 0 0 0-44-54.7V112h92a168 168 0 0 1 168 168zM512 238a42 42 0 0 1 42 42v80a42 42 0 0 1-84 0v-80a42 42 0 0 1 42-42z" p-id="2674"></path></svg>
\ No newline at end of file

src/icons/svg/pen.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1697706563782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2522" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M952.905948 257.137938l-487.760107 481.546603c3.829253 35.330276-1.264376 79.475058-36.955902 115.63621-40.60453 41.146405-218.33966 135.938475-369.125521-31.320398 0 0 72.647428 3.179002 100.246949-59.461794 36.052776-118.164962 119.646088-139.587102 180.083257-138.214351L832.60961 138.431101c33.126649-32.765399 87.025189-32.765399 120.260213 0 33.162774 32.765399 33.162774 85.941438 0.036125 118.706837z m-748.149298 524.896635C185.176886 822.566852 159.311367 842.796867 159.311367 842.796867c74.309179 56.644041 200.493897-1.842376 228.815917-27.96077 49.997037-46.348409 20.41064-98.621322 20.013265-98.982573l-40.062654-39.629154c0 0.036125-116.611585-18.351513-163.321245 105.810203z m243.446553-105.774078l60.184294-59.353418-40.062654-39.593029-60.184294 59.353418c0-0.036125 36.414027 35.944401 40.062654 39.593029zM912.734919 178.02413c-11.018133-11.018133-28.972271-11.018133-40.062655 0l-364.284767 359.624639 40.062655 39.593029 364.284767-359.733014a27.52727 27.52727 0 0 0 0-39.484654z" p-id="2523"></path></svg>
\ No newline at end of file

src/icons/svg/power-off.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1697706575619" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2824" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M512 920.917333c-225.28 0-408.917333-183.637333-408.917333-408.917333 0-174.762667 110.592-330.410667 275.797333-386.389333 10.922667-3.413333 22.528 2.048 25.941333 12.970666 3.413333 10.922667-2.048 22.528-12.970666 25.941334C243.029333 215.04 143.36 354.986667 143.36 512.682667c0 202.752 165.205333 367.957333 367.957333 367.957333s367.957333-165.205333 367.957334-367.957333c0-157.696-99.669333-296.96-248.490667-348.16-10.922667-3.413333-16.384-15.018667-12.970667-25.941334 3.413333-10.922667 15.018667-16.384 25.941334-12.970666 165.205333 55.978667 275.797333 211.626667 275.797333 386.389333 1.365333 225.28-182.272 408.917333-407.552 408.917333z" p-id="2825"></path><path d="M512 532.48c-11.605333 0-20.48-8.874667-20.48-20.48V123.562667c0-11.605333 8.874667-20.48 20.48-20.48s20.48 8.874667 20.48 20.48V512c0 11.605333-8.874667 20.48-20.48 20.48z" p-id="2826"></path></svg>
\ No newline at end of file

src/icons/svg/right.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696831414984" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2842" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M512 1008.64c-131.072 0-254.976-51.2-348.16-142.336-12.288-12.288-12.288-31.744 0-43.008 12.288-12.288 31.744-12.288 43.008 0 81.92 80.896 190.464 124.928 305.152 124.928 239.616 0 435.2-195.584 435.2-435.2S751.616 76.8 512 76.8 76.8 272.384 76.8 512c0 17.408-13.312 30.72-30.72 30.72s-30.72-13.312-30.72-30.72C15.36 238.592 238.592 15.36 512 15.36S1008.64 238.592 1008.64 512 785.408 1008.64 512 1008.64z" p-id="2843"></path><path d="M746.496 490.496 588.8 332.8c-12.288-12.288-31.744-12.288-43.008 0-12.288 12.288-12.288 31.744 0 43.008L650.24 481.28 299.008 481.28c-17.408 0-30.72 13.312-30.72 30.72 0 17.408 13.312 30.72 30.72 30.72l351.232 0L545.792 648.192c-12.288 12.288-12.288 31.744 0 43.008 6.144 6.144 14.336 9.216 21.504 9.216s15.36-3.072 21.504-9.216l157.696-157.696c6.144-6.144 9.216-13.312 9.216-21.504S752.64 495.616 746.496 490.496z" p-id="2844"></path></svg>
\ No newline at end of file

src/router/index.js

@@ -181,7 +181,6 @@ const routes = [
     component: () =>
       import("@/views/boutique/components/lzsg/index.vue"),
   },
-  // 3d展示页面，仅供测试用
   {
     path: "/3d",
     name: "3d",
@@ -199,6 +198,12 @@ const routes = [
       import("@/views/boutique/components/wrf/index.vue"),
       // import("@/views/boutique/components/gzgs/index.vue"),
   },
+  {
+    path: "/3d/:id",
+    name: "3dDetail",
+    component: () =>
+      import("@/views/3d/detail.vue"),
+  },
   // 404
   {
     path: "*",

src/views/3d/detail.vue

+<template>
+  <div class="container-3d">
+    <Viewer3d backgroundcolor="linear(0, 0, 0,40%)" />
+    <div class="left-text">
+      <div>多彩贵州</div>
+      <div>博物<br />盛筵</div>
+    </div>
+    <div class="top">
+      <div class="name">【{{ crInfo.name }}】</div>
+      <div class="deptName">
+        <svg-icon icon-class="cloud"></svg-icon>
+        <span>{{ crInfo.deptName }}</span>
+        <svg-icon icon-class="cloud"></svg-icon>
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="current-content">{{ currentButton.value }}</div>
+      <div class="buttons">
+        <div
+          @click="handleChangeButton(item)"
+          :class="[
+            'button-item',
+            currentButton.value == item.value ? 'active' : '',
+          ]"
+          v-for="(item, index) in buttons"
+          :key="index"
+        >
+          <svg-icon icon-class="wenshi1"></svg-icon>
+          <div class="text">{{ item.label }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="right-top" @click="handleOpenIntro">
+      <svg-icon icon-class="pen"></svg-icon>
+      <div>简介</div>
+    </div>
+    <div class="right-bottom">
+      <div class="icon" @click="handelExit">
+        <svg-icon icon-class="power-off"></svg-icon>
+        <span>退出</span>
+      </div>
+      <div class="icon">
+        <svg-icon icon-class="mouse2"></svg-icon>
+        <span>放大、缩小</span>
+      </div>
+    </div>
+    <div class="fixed" v-show="showIntro">
+      <div class="intro-container">
+        <div class="name">{{ crInfo.name }}</div>
+        <div class="intro" style="overflow-x: hidden">
+          <el-scrollbar style="height: 100%">
+            {{ crInfo.intro }}
+          </el-scrollbar>
+        </div>
+        <div class="close" @click="handleCloseIntro">
+          <i class="el-icon-close"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Viewer3d from "@/components/Viewer3d";
+export default {
+  components: { Viewer3d },
+  data() {
+    return {
+      crInfo: {
+        name: "兴义欧龙",
+        deptName: "贵州省地质博物馆",
+        year: "中三叠纪",
+        type: "古生物化石",
+        size: "板250cm×160cm， 龙长240cm",
+        intro:
+          "1976年贵州省博物馆收购的“尘定轩”斗彩山水人物盖碗，通高6.8厘米，口径6.7厘米，足径2.7厘米。敞口，圈足，盖可作倒置小碟，盖顶圈钮。此盖碗体形小巧玲珑，轻盈雅致。胎白细腻，釉色白中闪青，釉下绘青花高温烧制，釉上填彩低温烘烧，绘制处以手摸之，有凸出感。碗外壁绘唐杜牧“停车坐爱枫林晚”诗意图。一老人坐石上看枫树，一童子倚立车后，盖上绘山水，绘工细致、精湛。底足内及盖钮内有青花楷书“尘定轩”三字款，字体工整。此器据原收藏人石朴（石赞清的侄孙女）介绍，为清同治御用品，赏赐给石赞清。石赞清，贵阳人，生于清嘉庆十年（公元1805————公元1869年）。清道光十五年（公元1835年）中举人，清道光十八年（公元1838年）中进士，曾任天津府知府，工部右侍郎等职。因其无子，故将此器赠给其侄，后传给其侄孙女保存。这件传承清晰的文物具有重要历史价值，也是了解道光时期景德镇瓷器生产状况不可多得的实物资料。",
+      },
+      currentButton: {
+        label: "年代",
+        value: "中三叠纪",
+      },
+      buttons: [
+        {
+          label: "年代",
+          value: "中三叠纪",
+        },
+        {
+          label: "尺寸",
+          value: "板250cm×160cm， 龙长240cm",
+        },
+      ],
+      showIntro: false,
+    };
+  },
+  mounted() {
+    console.log(this.$router);
+  },
+  methods: {
+    handleChangeButton(item) {
+      this.currentButton = item;
+    },
+    handleOpenIntro() {
+      this.showIntro = true;
+    },
+    handleCloseIntro() {
+      this.showIntro = false;
+    },
+    handelExit() {
+      this.$router.push("/3d");
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+$deep-yellow: #e7ba40;
+$yellow: #e4d1ac;
+$custom-font-family: "KaiTi" $siyuan-song-bold;
+.container-3d {
+  width: 100%;
+  height: 100vh;
+  background-color: #011c4a;
+  position: relative;
+  .left-text {
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-family: $custom-font-family;
+    & > div {
+      color: rgba($color: $deep-yellow, $alpha: 0.1);
+      &:nth-child(1) {
+        font-size: 140px;
+        writing-mode: vertical-lr;
+      }
+      &:nth-child(2) {
+        font-size: 70px;
+        padding-left: 16px;
+        letter-spacing: 4px;
+      }
+    }
+  }
+
+  .top {
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    transform: translateX(-50%);
+    color: $deep-yellow;
+    font-family: $custom-font-family;
+    .name {
+      font-size: 46px;
+      margin-bottom: 8px;
+    }
+    .deptName {
+      font-size: 24px;
+      color: $yellow;
+      .svg-icon {
+        margin: 0 8px;
+      }
+    }
+  }
+
+  .bottom {
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-family: $custom-font-family;
+    font-size: 18px;
+    .current-content {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      padding: 0 120px;
+      color: $deep-yellow;
+      margin-bottom: 16px;
+      background: linear-gradient(
+        270deg,
+        rgba(216, 216, 216, 0) 0%,
+        rgba(191, 215, 255, 0.4) 51%,
+        rgba(216, 216, 216, 0) 100%
+      );
+    }
+    .buttons {
+      display: flex;
+      color: $yellow;
+      justify-content: space-between;
+      width: 180px;
+      .button-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        cursor: pointer;
+        &:hover {
+          color: $deep-yellow;
+        }
+        .svg-icon {
+          font-size: 24px;
+        }
+        .text {
+          position: relative;
+          &:after {
+            content: "";
+            position: absolute;
+            right: -38px;
+            top: 50%;
+            width: 32px;
+            height: 4px;
+            background: linear-gradient(
+              270deg,
+              rgba(216, 216, 216, 0) 3%,
+              $yellow 100%
+            );
+          }
+          &:before {
+            content: "";
+            position: absolute;
+            left: -38px;
+            top: 50%;
+            width: 32px;
+            height: 4px;
+            transform: rotate(180deg);
+            background: linear-gradient(
+              270deg,
+              rgba(216, 216, 216, 0) 3%,
+              $yellow 100%
+            );
+          }
+        }
+      }
+      .active {
+        color: $deep-yellow;
+      }
+    }
+  }
+  .right-top {
+    position: absolute;
+    right: 40px;
+    top: 40px;
+    color: $deep-yellow;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-family: $custom-font-family;
+    .svg-icon {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      border: 2px solid $deep-yellow;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 8px;
+      margin-bottom: 16px;
+      cursor: pointer;
+    }
+  }
+
+  .right-bottom {
+    position: absolute;
+    right: 40px;
+    bottom: 40px;
+    color: #fff;
+    font-family: $custom-font-family;
+    .icon {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 32px;
+      &:nth-child(1) {
+        cursor: pointer;
+      }
+    }
+    .svg-icon {
+      font-size: 60px;
+    }
+  }
+
+  .fixed {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .intro-container {
+      width: 50vw;
+      height: 50vh;
+      background: linear-gradient(180deg, #604614 0%, #272215 100%);
+      border-radius: 6px;
+      position: relative;
+      padding: 40px;
+      color: $deep-yellow;
+      font-family: $custom-font-family;
+      line-height: 2;
+      font-size: 20px;
+
+      .name {
+        font-size: 24px;
+        text-align: center;
+      }
+      .intro {
+        height: calc(100% - 40px);
+        text-indent: 32px;
+      }
+      &::after {
+        position: absolute;
+        left: 20px;
+        top: 20px;
+        content: "";
+        width: calc(50vw - 40px);
+        height: calc(50vh - 40px);
+        border: 1px dashed $deep-yellow;
+        border-radius: 6px;
+      }
+      .close {
+        position: absolute;
+        bottom: -60px;
+        left: 50%;
+        transform: translateX(-50%);
+        border: 1px solid $deep-yellow;
+        border-radius: 50%;
+        padding: 8px;
+        width: 40px;
+        height: 40px;
+        color: $deep-yellow;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+::v-deep .el-scrollbar__wrap {
+  overflow: hidden;
+}
+</style>

src/views/3d/index.vue

 <template>
-  <div class="dialog-container">
-    <div class="box">
-      <Viewer3d backgroundcolor="0, 0, 0,40%" />
-      <div class="close">
-        <i class="el-icon-close"></i>
+  <div class="three">
+    <div class="poster">
+      <div class="comon-title">
+        <div class="ch">三维展示</div>
+        <div class="en">
+          <span>3D display</span>
+          <svg-icon icon-class="right"></svg-icon>
+        </div>
+      </div>
+      <div class="imgs">
+        <div class="left">
+          <div class="common-bg-name">
+            <div class="icon">
+              <img :src="icon3D" />
+            </div>
+            <div class="name">{{ leftImg.name }}</div>
+          </div>
+          <img :src="leftImg.url" class="cr-img" />
+        </div>
+        <div class="center">
+          <img :src="centerImg.url" />
+          <div class="content">
+            <div class="name">{{ centerImg.name }}</div>
+            <img class="line" :src="line" />
+            <div class="year">{{ centerImg.year }}</div>
+            <div class="desc">{{ centerImg.desc }}</div>
+          </div>
+        </div>
+        <div class="right">
+          <img :src="rightImg.url" class="cr-img" />
+          <div class="common-bg-name">
+            <div class="icon">
+              <img :src="icon3D" />
+            </div>
+            <div class="name">{{ rightImg.name }}</div>
+          </div>
+        </div>
+        <div class="left-bottom">
+          <img :src="leftLineDraft.url" class="cr-img" />
+          <div class="common-cr-intro">
+            <img :src="dot" class="dot" />
+            <div class="name" :style="{ backgroundImage: greyBg }">
+              {{ leftLineDraft.name }}
+            </div>
+          </div>
+        </div>
+        <div class="right-bottom">
+          <img :src="rightLineDraft.url" class="cr-img" />
+          <div class="common-cr-intro right">
+            <div class="name" :style="{ backgroundImage: greyBg }">
+              {{ rightLineDraft.name }}
+            </div>
+            <img :src="dot" class="dot" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="list">
+      <div class="comon-title blue">
+        <div class="ch">三维列表</div>
+        <div class="en">
+          <span>3D list</span>
+          <svg-icon icon-class="right"></svg-icon>
+        </div>
+      </div>
+      <div class="list-group">
+        <el-row>
+          <el-col
+            :span="6"
+            v-for="(item, index) in 8"
+            :key="index"
+            class="list-item"
+            @click.native="handleOpen3d(item)"
+          >
+            <div class="list-item-img" :style="{ backgroundImage: listBg }">
+              <img :src="centerImg.url" />
+            </div>
+            <div class="list-item-name">{{ centerImg.name }}</div>
+            <div class="list-item-icon">
+              <img :src="icon3D" alt="" />
+            </div>
+          </el-col>
+        </el-row>
       </div>
     </div>
   </div>
 </template>
-
 <script>
-import Viewer3d from "@/components/Viewer3d";
 export default {
-  components: { Viewer3d },
   data() {
     return {
-      title: "",
+      leftImg: {
+        url: require("@/assets/imgs/3d/2.png"),
+        name: "清琥珀长命锁",
+      },
+      rightImg: {
+        url: require("@/assets/imgs/3d/4.png"),
+        name: "斗彩山水人物盖碗",
+      },
+      centerImg: {
+        url: require("@/assets/imgs/3d/1.png"),
+        name: "螭首金杯、金盘",
+        year: "南宋(1127~1279)",
+        desc: "金杯系夹层，双螭缠绕其上，两螭首对称探出杯口成杯柄。承盘纹饰与金杯呼应，盘心为翻涌的浪花，双螭盘旋，口尾互衔。金杯、金盘共同构成教子升天纹。教子升天纹是宋代已降流行的纹饰，由天上的大龙和海水中的小龙组成，通过大龙呼唤小龙升天来借喻父母望子成龙的愿望，也可祝人高升。",
+      },
+      icon3D: require("@/assets/imgs/3d/circle.png"),
+      leftLineDraft: {
+        url: require("@/assets/imgs/line-draft/6.png"),
+        name: "清道光“尘定轩”斗彩山水人物盖碗",
+      },
+      rightLineDraft: {
+        url: require("@/assets/imgs/line-draft/3.png"),
+        name: "清圆雕白玉太白像",
+      },
+      dot: require("@/assets/imgs/3d/dot.png"),
+      greyBg: `url(${require("@/assets/imgs/3d/bg.png")})`,
+      bgCircle: `url(${require("@/assets/imgs/3d/bg-circle.png")})`,
+      line: require("@/assets/imgs/3d/line.png"),
+      listBg: `url(${require("@/assets/imgs/3d/bg-circle.png")})`,
     };
   },
   methods: {
-    handleClose() {
-      this.dialogVisible = false;
+    handleOpen3d(item) {
+      const newPage = this.$router.resolve({ path: "/3d/" + item });
+      window.open(newPage.href, "_blank");
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.dialog-container {
-  // background-color: #000;
-  width: 100vw;
-  height: 100vh;
+.comon-title {
+  color: #fff;
+  font-family: $siyuan-song-bold;
+  .ch,
+  .en {
     display: flex;
     justify-content: center;
+  }
+  .ch {
+    font-size: 22px;
+  }
+  .en {
+    font-size: 14px;
     align-items: center;
+    .svg-icon {
+      margin-left: 8px;
+    }
+  }
+}
+.blue {
+  color: $deep-blue;
 }
-.box {
+.common-bg-name {
+  &:nth-child(2) {
+    transform: translateX(60px);
+  }
+  &:nth-child(2) {
+    transform: translateX(-80px);
+  }
+  .icon {
+    width: 40px;
+    height: 40px;
+    margin-bottom: 16px;
+    img {
+      width: 100%;
       height: 100%;
+      object-fit: contain;
+    }
+  }
+  .name {
+    background-color: $deep-blue;
+    width: 40px;
+    padding: 10px;
+    color: #fff;
+  }
+}
+
+.common-cr-intro {
+  display: flex;
+  align-items: center;
+  transform: translate(200px, 200px);
+  .dot {
+    width: 20px;
+    height: 20px;
+  }
+  .name {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 8px 41px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    color: #fff;
+    font-size: 14px;
+  }
+}
+.common-cr-intro.right {
+  transform: translate(-240px, 160px);
+}
+.three {
+  min-height: 1000px !important;
   width: 100%;
-  // background-color: rgba($color: #000000, $alpha: 0.4);
+  background-image: url(@/assets/imgs/3d/full-bg.png);
+  background-size: cover;
+}
+.poster,
+.list {
+  padding: 100px 0;
+}
+.imgs {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 100px;
+  .left,
+  .right {
+    display: flex;
+
+    .cr-img {
+      width: 400px;
+      height: 400px;
+      object-fit: contain;
+      cursor: pointer;
+    }
+  }
+  .left {
+    .cr-img {
+      transform: translateY(100px);
+    }
+  }
+  .right {
+    .cr-img {
+      width: 600px;
+      height: 600px;
+    }
+  }
+  .center {
+    width: 900px;
+    height: 900px;
+    transition: all ease 0.5s;
+    transform: translate(100px, 0px);
+    cursor: pointer;
     position: relative;
-  .close {
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    .content {
       position: absolute;
-    right: -50px;
-    top: -100px;
-    padding: 10px;
-    border: 1px solid #fff;
-    color: #fff;
-    border-radius: 50%;
+      bottom: 0px;
+
+      .name {
+        font-size: 28px;
+        text-align: center;
+        width: 100%;
+        margin-bottom: 16px;
+      }
+      .year {
+        width: 100%;
+        text-align: center;
+        font-size: 14px;
+        margin-bottom: 16px;
+      }
+      .line {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        object-fit: contain;
+        margin-bottom: 16px;
+      }
+      .desc {
+        color: $deep-blue;
+        line-height: 1.8;
+        font-size: 14px;
+        text-align: center;
+      }
+    }
+  }
+  .left-bottom,
+  .right-bottom {
+    position: absolute;
+    top: 500px;
+    .cr-img {
+      position: absolute;
+      left: -100px;
+    }
+  }
+  .right-bottom {
+    right: 0;
+    top: 600px;
+    .cr-img {
+      width: 300px;
+      height: 300px;
+      object-fit: contain;
+    }
+  }
+}
+
+.list-group {
+  padding: 100px 8%;
+  .list-item {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 32px;
+    position: relative;
+    .list-item-img {
+      width: 400px;
+      height: 300px;
+      display: flex;
+      justify-content: center;
+      margin-bottom: 16px;
+      background-size: contain;
+      background-position-x: 45%;
+      background-repeat: no-repeat;
+      padding: 40px;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    .list-item-name {
+      display: flex;
+      justify-content: center;
+      color: $deep-blue;
+    }
+    .list-item-icon {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 50px;
+      height: 50px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
   }
 }
 </style>

src/views/boutique/components/lzsg/index.vue

@@ -30,7 +30,7 @@
       data-wow-delay="0.5s"
     >
       <div>
-        <img src="@/assets/imgs/topic/lzsg/txt-bg.png" alt=""/>
+        <img src="@/assets/imgs/topic/lzsg/txt-bg.png" alt="" />
         <div class="content">
           <nav>六枝原则</nav>
           <p v-for="node in principles">{{ node }}</p>
@@ -51,20 +51,33 @@
       />
 
       <div class="content">
-        <div class="title wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
+        <div
+          class="title wow animate__animated animate__fadeInUp"
+          data-wow-delay="0.5s"
+        >
           <img src="@/assets/imgs/topic/lzsg/yc.png" alt="" />
         </div>
-        <div class="tabs wow animate__animated animate__bounceIn" data-wow-delay="0.5s">
+        <div
+          class="tabs wow animate__animated animate__bounceIn"
+          data-wow-delay="0.5s"
+        >
           <ul>
             <li v-for="(node, i) in details" :key="i">
-              <div class="detail-card" :class="{active: node.title === curNode.title }" @click="handleDetailChange(node)">
+              <div
+                class="detail-card"
+                :class="{ active: node.title === curNode.title }"
+                @click="handleDetailChange(node)"
+              >
                 <!-- <img src="@/assets/imgs/topic/lzsg/tab.png" alt="" /> -->
                 <span>{{ node.title }}</span>
               </div>
             </li>
           </ul>
         </div>
-        <div class="detail wow animate__animated animate__fadeInRight" data-wow-delay="0.5s">
+        <div
+          class="detail wow animate__animated animate__fadeInRight"
+          data-wow-delay="0.5s"
+        >
           <div class="desc">
             {{ curNode.desc }}
           </div>
@@ -95,7 +108,11 @@
     </div>
     <!-- 第三部分 -->
     <div class="part-3">
-      <img src="@/assets/imgs/topic/lzsg/community.png" alt="" class="bg wow animate__animated animate__fadeIn" />
+      <img
+        src="@/assets/imgs/topic/lzsg/community.png"
+        alt=""
+        class="bg wow animate__animated animate__fadeIn"
+      />
       <img
         src="@/assets/imgs/topic/lzsg/community-color.png"
         alt=""
@@ -106,7 +123,7 @@
         <div class="title wow animate__animated animate__fadeInUp">
           <img src="@/assets/imgs/topic/lzsg/sqfz.png" alt="" />
         </div>
-        <p class=" wow animate__animated animate__fadeIn">
+        <p class="wow animate__animated animate__fadeIn">
           自建立生态博物馆以来，长角苗社区文化遗产和自然遗产得到了整体保护，社区经济不断发展，基础设施建设不断完善，文化教育水平不断提高，科学知识不断增强，文化交流不断扩大，社区居民生活水平不断得到完善。
         </p>
         <div class="swiper-area wow animate__animated animate__fadeInUp">
@@ -131,7 +148,11 @@
     </div>
     <!-- 第四部分 -->
     <div class="part-4">
-      <img src="@/assets/imgs/topic/lzsg/bg3.png" alt="" class="wow animate__animated animate__fadeIn" />
+      <img
+        src="@/assets/imgs/topic/lzsg/bg3.png"
+        alt=""
+        class="wow animate__animated animate__fadeIn"
+      />
 
       <div class="content">
         <div class="title wow animate__animated animate__fadeInUp">
@@ -181,7 +202,7 @@
 <script>
 import { swiper, swiperSlide } from "vue-awesome-swiper";
 import "swiper/dist/css/swiper.css";
-import summary from './data.json'
+import summary from "./data.json";
 
 export default {
   components: {
@@ -241,9 +262,9 @@ export default {
   },
   methods: {
     handleDetailChange(node) {
-      this.curNode = node
-    }
-  }
+      this.curNode = node;
+    },
+  },
 };
 </script>
 

src/views/boutique/data.js → src/views/boutique/components/smgz/data.js

-export var crPics = [
+export const crPics = [
     [
         {
             "name": "邓氏贵州鱼龙（模式标本）",
             "crId": "fe79d56cd28142e9a6404277c7fbef67",
-            "index":"2",
+            "index": "2",
             "intro": "邓氏贵州鱼龙属于鱼龙目，萨斯特鱼龙科，贵州鱼龙属，产于贵州关岭岗乌乡白岩，晚三叠世法朗组瓦窑组。邓氏贵州鱼龙已列入“国家重点保护古生物化石名录（第一批）”，也是关岭生物群的重要成员之一。",
             "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/2邓氏贵州鱼龙/low/2邓氏贵州鱼龙.png"
         },
         {
             "name": "梁氏关岭鱼龙（怀孕）",
             "crId": "aaf921134d9a4abbbe6c300ad7cf0fcd",
-            "index":"1",
+            "index": "1",
             "intro": "该标本左侧视保存，右前肢骨骼保存较为散乱，左后肢部分骨骼缺失。标本两侧肋骨之间保存有三条胚胎个体，胚胎的脊椎部分出露。胚胎可见长度90～110cm。",
             "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/22梁氏关岭鱼龙（怀孕）/low/22梁氏关岭鱼龙-怀孕.png"
         },
@@ -18,7 +18,7 @@ export var crPics = [
         {
             "name": "美丽瓦窑龙（模式标本）",
             "crId": "26a5c7cd499a4d22a6f43e7d881dcaae",
-            "index":"3",
+            "index": "3",
             "intro": "该标本是美丽瓦窑龙的正模标本，也就是美丽瓦窑龙这个新属种命名依据的标本。美丽瓦窑龙属于肿肋龙类瓦窑龙属，产出于贵州关岭新铺乡小凹，上三叠统瓦窑组，是关岭生物群的重要成员。",
             "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/3美丽瓦窑龙/low/3美丽瓦窑龙.png"
         },
@@ -27,21 +27,21 @@ export var crPics = [
         {
             "name": "许氏创孔海百合",
             "crId": "39ea6e3fb71c434aa07cf25c98b96ace",
-            "index":"1",
+            "index": "1",
             "intro": "许氏创孔海百合属于超大型密集共生的国家一级重点保护古生物化石，主要产自关岭等地的法郎组瓦窑段，距今约两亿三千万年。是一种古老的无脊椎棘皮动物。",
             "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/10许氏创孔海百合/low/10许氏创孔海百合.png"
         },
         {
             "name": "黄果树安顺龙",
             "crId": "7b822103b1a3493a95004bca11d526a4",
-            "index":"2",
+            "index": "2",
             "intro": "黄果树安顺龙是“国家重点保护古生物化石名录”中的一级化石，这条黄果树安顺龙龙长3.72m，呈腹视保存，整体骨骼出露清晰，表面覆盖极薄的围岩，尾末端有缺失，左前肢指骨有移位，腹膜肋呈松散保存。",
             "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/26黄果树安顺龙/low/26黄果树安顺龙.png"
         },
         {
             "name": "杨氏幻龙",
             "crId": "5d8d468a0a7e40cb9c53089c658f6778",
-            "index":"3",
+            "index": "3",
             "intro": "蜥形纲，鳞龙形下纲，鳍龙超目，始鳍龙目，幻龙科，幻龙属。标本为产出于贵州省兴义的中三叠统法郎组竹竿坡段地层中的幻龙类幼体。腹视保存，整体保存较好，仅尾后部脱位保存。",
             "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/16杨氏幻龙/low/16杨氏幻龙.png"
         },
@@ -52,21 +52,21 @@ export var crPics = [
         {
             "name": "兴义欧龙",
             "crId": "c6c0b8beda804b1097914c8db014c921",
-            "index":"1",
+            "index": "1",
             "intro": "兴义欧龙为产出于贵州省兴义的中三叠统法郎组竹竿坡段地层中的海生爬行动物。该化石腹视保存，整体骨骼保存良好，仅腹膜肋部分散乱保存。",
             "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/15兴义欧龙/low/15兴义欧龙.png"
         },
         {
             "name": "盘县混鱼龙",
             "crId": "ad54eec4c4b54f9ea3cb5d406b1f2a88",
-            "index":"2",
+            "index": "2",
             "intro": "盘县混鱼龙已列入“国家重点保护古生物化石名录（第一批）”，是三叠纪海生爬行动物的重要分子，它属于鱼龙类混鱼龙属，混鱼龙是迄今发现的较小的鱼龙类动物之一。",
             "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/33盘县混鱼龙/low/33盘县混鱼龙.png"
         },
         {
             "name": "东方恐头龙",
             "crId": "7973c7ad71d549d2a2a7d61ac534a5f5",
-            "index":"3",
+            "index": "3",
             "intro": "东方恐头龙为产出于贵州省盘州的中三叠统关岭组地层中的海生爬行动物。恐头龙是首个发现于中国的三叠纪中期的原龙类动物。该标本头部背视保存，颈部左侧视保存，其余部分近右侧视保存。体躯、四肢及尾前部骨骼部分脱位保存。",
             "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/25东方恐头龙/low/25东方恐头龙.png"
         },
@@ -75,20 +75,20 @@ export var crPics = [
         {
             "name": "孙氏新铺龙（模式标本 正型）",
             "crId": "28e7b26a80fb4f1dbb8a0ca37ea46849",
-            "index":"1",
+            "index": "1",
             "intro": "该标本是孙氏新铺龙的正模式标本，也就是孙氏新铺龙命名时所依据的标本。是一具主轴骨彼此关联完整骨架之左侧视。",
             "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/5孙氏新铺龙/low/5孙氏新铺龙.png"
         },
         {
             "name": "乌沙安顺龙",
-            "index":"2",
+            "index": "2",
             "crId": "388950e11fb14d369eb97e8de4ddcd7b",
             "intro": "标本头部左腹视保存，头后部分右侧视保存，右前肢部分骨骼移位重叠，左后肢向背侧翻转。乌沙安顺龙是产出于贵州省兴义中三叠统法郎组竹竿坡段地层的中型海生爬行动物，属于海龙类，是安顺龙的第二个种。",
             "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/17乌沙安顺龙/low/17乌沙安顺龙.png"
         },
         {
             "name": "羊圈幻龙",
-            "index":"3",
+            "index": "3",
             "crId": "d16048bb74254beb834655250217f2fe",
             "intro": "羊圈幻龙已列入“国家重点保护古生物化石名录（第一批）”，是三叠纪海生爬行动物的重要分子，属于鳍龙目，幻龙科，幻龙属，产于盘县、普安中三叠世关岭组。",
             "url": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-12-ede637d02d0c4f53a313178a0da0bfbc/贵州省地质博物馆文物1/faceImage/14羊圈幻龙/low/14羊圈幻龙.png"

src/views/boutique/index-old.vue

-<template>
-  <div class="boutique">
-    <div class="boutique-header">
-      <img src="@/assets/imgs/boutique/banner.jpg" width="100%" />
-      <ul class="tabs">
-        <li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
-          <div :class="{ active: activeTab === node.tab }">
-            <span>{{ node.name }}</span>
-          </div>
-        </li>
-      </ul>
-    </div>
-    <!-- <ul class="fixed-tabs">
-      <li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
-        <div class="tab-container">
-          <img :src="
-            require(`@/assets/imgs/boutique/smgz/7_leftBar/${node.tab}.png`)
-          " alt="" />
-          <span class="name">{{ node.name }}</span>
-        </div>
-      </li>
-    </ul> -->
-    <!-- <div class="boutique-tabs">
-      <m-tabs @handleClickItem="handleClickItem"></m-tabs>
-    </div> -->
-
-    <div class="boutique-content" ref="boutiqueContent">
-      <div class="focus-content" v-if="activeTab">
-        <!-- <p v-if="activeTab == 'cjm'" style="display: flex; justify-content: center">
-          长角苗民俗及文化遗产
-        </p> -->
-        <SMGZ v-if="activeTab == 'smgz'" />
-        <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=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-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 },
-  data() {
-    return {
-      tabs: [
-        { tab: "smgz", name: "神秘贵州" },
-        { tab: "jyycc", name: "记忆与传承" },
-        { tab: "ylgdyw", name: "夜郎的疑问" },
-        { tab: "sdcs", name: "四渡赤水出奇兵" },
-        { tab: "lzsg", name: "六枝梭戛" },
-        { tab: "zggz", name: "中共贵州省工委斗争纪略展" },
-        { tab: "gzjy", name: "贵州教育史馆" },
-      ],
-      activeTab: "",
-
-      // content: { title: "四渡赤水" }
-    };
-  },
-
-  computed: {
-    ...mapGetters(["navbarHeight"]),
-    content() {
-      let obj = Object.create(null);
-
-      const { tabs, activeTab } = this;
-      let node = tabs.find((n) => n.tab === activeTab);
-
-      node && (obj.title = node.name);
-
-      return obj;
-    },
-  },
-  watch: {
-    activeTab: {
-      handler: function (value) {
-        let color = "";
-        if (!value) {
-          return;
-        }
-        switch (value) {
-          case "sdcs":
-            color = "4";
-            break;
-          case "smgz":
-            color = "5";
-            break;
-          case "jyycc":
-            color = "6";
-            break;
-          case "ylgdyw":
-            color = "7";
-            break;
-          case "cjm":
-            color = "1";
-        }
-        this.$store.commit("app/CHANGE_NAV_COLOR", color);
-      },
-      immediate: true,
-    },
-  },
-  mounted() {
-    this.activeTab = "smgz";
-  },
-  methods: {
-    handleTabClick(data) {
-      this.activeTab = data.tab;
-      let el = document.getElementsByClassName("boutique-header")[0];
-      let height = el.offsetHeight - this.navbarHeight; //5像素偏移量
-      document.documentElement.scroll({
-        top: height,
-        behavior: "smooth", // 平滑移动
-      });
-    },
-
-    // handleClickItem(key) {
-    //   this.activeTab = key
-    //   let el = document.getElementsByClassName("boutique-tabs")[0];
-    //   let height = el.offsetHeight - this.navbarHeight; //5像素偏移量
-    //   document.documentElement.scroll({
-    //     top: height,
-    //     behavior: "smooth", // 平滑移动
-    //   });
-    // }
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.boutique {
-  min-height: calc(100% - 300px);
-
-  .boutique-header {
-    position: relative;
-    overflow: hidden;
-
-    > img {
-      height: 500px;
-      object-fit: cover;
-    }
-  }
-
-  .boutique-tabs {
-    width: 100%;
-    height: 100vh;
-    cursor: pointer;
-  }
-
-  .fixed-tabs {
-    position: fixed;
-    left: 0;
-    top: 100px;
-    z-index: 9999;
-    height: calc(100vh - 100px);
-    display: flex;
-    flex-direction: column;
-    display: none;
-
-    li {
-      flex: 1;
-      position: relative;
-
-      .tab-container {
-        width: 100px;
-        height: 100%;
-        position: absolute;
-        left: -70px;
-        transition: all ease 0.5s;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-
-        &:hover {
-          left: 0;
-
-          .name {
-            opacity: 1;
-          }
-        }
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
-
-        .name {
-          position: absolute;
-          left: 2px;
-          opacity: 0;
-          color: #fff;
-          font-family: "SourceHanSerifCN-Bold";
-          width: 80%;
-          margin: 4px;
-        }
-      }
-    }
-
-    // li {
-    //   margin-bottom: 32px;
-
-    //   & > span {
-    //     color: #fff;
-    //     cursor: pointer;
-    //   }
-    // }
-  }
-
-  .boutique-title {
-    height: 500px;
-    position: relative;
-    overflow: hidden;
-    z-index: 1;
-
-    > p {
-      margin: 0;
-      font-size: 46px;
-      font-weight: 600;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      letter-spacing: 12px;
-      background-image: -webkit-linear-gradient(45deg, #98bcff, #814b02);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      animation: hue 6s infinite linear;
-    }
-
-    > span {
-      font-weight: 600;
-      font-family: "宋体";
-      font-size: 24px;
-      position: absolute;
-      top: 65%;
-      left: 60%;
-      color: #666;
-    }
-  }
-
-  ul.tabs {
-    display: flex;
-    justify-content: space-between;
-    position: absolute;
-    z-index: 1;
-    padding: 10px 0;
-    width: 100%;
-    bottom: 0;
-
-    > li {
-      flex: 1;
-
-      > div {
-        text-align: center;
-
-        > span {
-          font-size: 20px;
-          color: #333;
-          font-weight: 600;
-          font-family: "楷体";
-
-          &:hover {
-            cursor: pointer;
-            position: relative;
-            color: #003fa7;
-
-            &::after {
-              content: "";
-              position: absolute;
-              left: 0;
-              width: 100%;
-              bottom: -10px;
-              border-bottom: 3px solid $deepBlue;
-              border-radius: 30px;
-            }
-          }
-        }
-
-        &.active {
-          > span {
-            position: relative;
-            color: #003fa7;
-            text-shadow: 6px 2px 2px #999;
-
-            &::after {
-              content: "";
-              position: absolute;
-              left: 0;
-              width: 100%;
-              bottom: -10px;
-              border-bottom: 3px solid $deepBlue;
-              border-radius: 30px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .boutique-content {
-    .focus-content {
-      // padding: 20px 0;
-      // margin: 20px;
-      box-shadow: 1px 12px 10px 1px #ddd;
-      margin-top: 0;
-      min-height: 600px;
-      // display: flex;
-      // justify-content: center;
-      // align-items: center;
-      font-size: 30px;
-      // font-weight: 600;
-      // background: rgb(239 247 255);
-
-      > p {
-        margin: 0;
-      }
-
-      .img-container {
-        width: 100%;
-
-        img {
-          width: 100%;
-        }
-      }
-    }
-  }
-}
-
-@keyframes hue {
-  from {
-    -webkit-filter: hue-rotate(0deg);
-  }
-
-  to {
-    -webkit-filter: hue-rotate(-360deg);
-  }
-}
-</style>

src/views/boutique/index.vue

@@ -15,8 +15,8 @@
 
 <script>
 // import mTabs from '@/views/home/components/Boutique.vue'
-import SMGZ from "./components/SMGZ"; //神秘贵州
-import YLGDYW from "./components/YLGDYW"; //夜郎的疑问
+import SMGZ from "./components/smgz/index"; //神秘贵州
+import YLGDYW from "./components/ylgdyw/index"; //夜郎的疑问
 import JYYCC from "./components/jyycc"; //技艺与传承
 import SDCS from "./components/sdcs"; //四渡赤水
 import JYSG from "./components/jysg"; //教育史馆

src/views/ccProduct/Detail.vue

@@ -145,7 +145,7 @@ export default {
       .intro {
         & > p {
           color: #666;
-          // font-family: $defaultFontFamily;
+          // font-family: $default-font-family;
         }
       }
 

src/views/ccProduct/index.vue

@@ -295,13 +295,13 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-$blue: $deepBlue;
+$blue: $deep-blue;
 $text-indent: 16px;
 
 .cultural-relic {
   width: 100%;
 
-  // background-color: $deepBlue;
+  // background-color: $deep-blue;
   // color: #fff;
   .content-wrapper {
     padding-top: 60px;
@@ -352,7 +352,7 @@ $text-indent: 16px;
             transition: all 0.5s ease;
 
             &:hover {
-              border: 2px solid $deepBlue;
+              border: 2px solid $deep-blue;
 
               .face-image {
                 transform: scale(1.2);
@@ -369,7 +369,7 @@ $text-indent: 16px;
             }
 
             .img-container {
-              background-color: rgba($deepBlue, 0.1);
+              background-color: rgba($deep-blue, 0.1);
               height: 268px;
               cursor: pointer;
               transition: all 0.5s ease;
@@ -431,7 +431,7 @@ $text-indent: 16px;
               .name {
                 font-size: 18px;
                 font-weight: bold;
-                color: $deepBlue;
+                color: $deep-blue;
                 margin-bottom: 18px;
               }
 

src/views/culturalRelic/Detail.vue

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

src/views/culturalRelic/detail-bp.vue

@@ -630,13 +630,13 @@ $titleFontFamily: SourceHanSerifCN-Bold;
     align-items: center;
     .svg-icon {
       font-size: 50px;
-      color: $deepBlue;
+      color: $deep-blue;
       margin-right: 10px;
     }
     .title {
       font-size: 26px;
       font-weight: 400;
-      color: $deepBlue;
+      color: $deep-blue;
       line-height: 101px;
     }
   }
@@ -687,7 +687,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
 .intro-title {
   font-size: 26px;
   font-weight: 400;
-  color: $deepBlue;
+  color: $deep-blue;
   font-family: "SourceHanSerifCN-Bold";
   display: flex;
   align-items: center;
@@ -840,7 +840,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                background-color: $deepBlue;
+                background-color: $deep-blue;
                 margin: 20px 0;
                 color: #fff;
                 cursor: pointer;
@@ -871,7 +871,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
                     color: #831122;
                   }
                   .collect {
-                    color: $deepBlue;
+                    color: $deep-blue;
                   }
                 }
               }
@@ -885,7 +885,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           cursor: pointer;
           animation: audioRotate 8s linear infinite;
           transform-origin: center center;
-          border: 2px solid $deepBlue;
+          border: 2px solid $deep-blue;
           padding: 10px;
           border-radius: 50%;
           display: flex;
@@ -897,7 +897,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
             box-shadow: 0 0 14px rgb(0 0 0 / 40%);
           }
           .svg-icon {
-            color: $deepBlue;
+            color: $deep-blue;
             font-size: 80px;
           }
           img {
@@ -923,7 +923,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           position: relative;
 
           &:hover {
-            color: $deepBlue;
+            color: $deep-blue;
             &::after {
               display: inline-block;
             }
@@ -933,7 +933,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           }
         }
         .active {
-          color: $deepBlue;
+          color: $deep-blue;
           &::after {
             display: inline-block;
           }
@@ -946,7 +946,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           width: 100%;
           bottom: -10px;
           left: 0;
-          background-color: $deepBlue;
+          background-color: $deep-blue;
         }
       }
       /**简介和视频 */
@@ -959,7 +959,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
         }
         .left-box {
           width: 60px;
-          background-color: $deepBlue;
+          background-color: $deep-blue;
           min-height: 200px;
           color: #fff;
           font-size: 28px;
@@ -974,7 +974,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           flex: 1;
           text-indent: 34px;
           padding: 16px 32px;
-          background-color: rgba($deepBlue, 10%);
+          background-color: rgba($deep-blue, 10%);
         }
       }
 
@@ -987,7 +987,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           // justify-content: center;
           align-items: center;
           font-size: 26px;
-          color: $deepBlue;
+          color: $deep-blue;
           margin: 80px 0 40px;
           font-family: SourceHanSerifCN-Bold;
           padding-left: 46px;
@@ -1009,7 +1009,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
               position: relative;
               cursor: pointer;
               &:hover {
-                color: $deepBlue;
+                color: $deep-blue;
                 &::after {
                   display: inline-block;
                 }
@@ -1023,7 +1023,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
               content: "";
               width: 50%;
               height: 1px;
-              background-color: $deepBlue;
+              background-color: $deep-blue;
               position: absolute;
               left: 0;
               bottom: -9px;
@@ -1037,7 +1037,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
               width: 0;
               height: 0;
               border: 8px solid transparent;
-              border-top-color: $deepBlue;
+              border-top-color: $deep-blue;
               position: absolute;
               left: 50%;
               bottom: -25px;
@@ -1130,7 +1130,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
     height: 50px;
     :hover {
       background: #fff;
-      color: $deepBlue;
+      color: $deep-blue;
     }
   }
 }
@@ -1144,7 +1144,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
   font-family: SourceHanSerifCN-Bold;
 }
 ::v-deep .el-radio__input.is-checked + .el-radio__label {
-  color: $deepBlue;
+  color: $deep-blue;
 }
 // ::v-deep .el-radio-button:first-child .el-radio-button__inner{
 //   border-radius: 0;

src/views/culturalRelic/index-hasbg.vue

@@ -558,7 +558,7 @@ $text-indent: 16px;
             text-align: center;
             text-align: center;
             &:hover {
-              // border: 2px solid $deepBlue;
+              // border: 2px solid $deep-blue;
 
               // border-radius: 100%;
 
@@ -686,7 +686,7 @@ $text-indent: 16px;
               .name {
                 font-size: 18px;
                 font-weight: bold;
-                color: $deepBlue;
+                color: $deep-blue;
                 margin-bottom: 18px;
                 width: 100%;
                 white-space: nowrap;
@@ -872,7 +872,7 @@ $text-indent: 16px;
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    background: $deepBlue;
+    background: $deep-blue;
     min-width: 0;
     margin: 0 10px;
     color: #b7b7b7;

src/views/culturalRelic/index.vue

@@ -360,7 +360,7 @@ $text-indent: 16px;
 .cultural-relic {
   width: 100%;
 
-  // background-color: $deepBlue;
+  // background-color: $deep-blue;
   // color: #fff;
   .search-bar {
     display: flex;
@@ -482,7 +482,7 @@ $text-indent: 16px;
     display: flex;
     justify-content: center;
     font-weight: 600;
-    background-color: rgba($color: $deepBlue, $alpha: 0.3);
+    background-color: rgba($color: $deep-blue, $alpha: 0.3);
 
     ::v-deep .el-scrollbar__view {
       display: flex;
@@ -513,7 +513,7 @@ $text-indent: 16px;
         .text {
           cursor: pointer;
           &:hover {
-            color: $deepBlue;
+            color: $deep-blue;
           }
         }
 
@@ -567,7 +567,7 @@ $text-indent: 16px;
             transition: all 0.5s ease;
 
             &:hover {
-              //   border: 2px solid $deepBlue;
+              //   border: 2px solid $deep-blue;
 
               .face-image {
                 transform: scale(1.2);
@@ -651,7 +651,7 @@ $text-indent: 16px;
                 font-size: 20px;
                 padding: 20px 0;
                 // font-weight: bold;
-                // color: $deepBlue;
+                // color: $deep-blue;
                 color: #333;
                 // margin-bottom: 18px;
                 width: 100%;
@@ -786,7 +786,7 @@ $text-indent: 16px;
     background: #fff;
     min-width: 0;
     margin: 0 16px;
-    color: $deepBlue;
+    color: $deep-blue;
   }
 
   .active {

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

@@ -533,7 +533,7 @@ export default {
 <style lang="scss">
 .intro-content {
   p {
-    font-family: $defaultFontFamily !important;
+    font-family: $default-font-family !important;
   }
 }
 </style>
@@ -1056,7 +1056,7 @@ $themeRed: #892325;
 
   a:hover {
     cursor: pointer;
-    color: $deepBlue;
+    color: $deep-blue;
   }
 }
 

src/views/display/components/ChStyle.vue

@@ -556,7 +556,7 @@ export default {
 .unit-content_intro {
   p {
     // color: red !important;
-    font-family: $defaultFontFamily !important;
+    font-family: $default-font-family !important;
     font-size: 22px;
     text-indent: 44px;
     // color: #fff !important;
@@ -564,14 +564,14 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-$deepBlue: #a30e0c;
+$deep-blue: #a30e0c;
 
 // 中国风主题样式
 /**公共样式开始 */
 
 .custom-title {
   width: 50px;
-  background-color: $deepBlue;
+  background-color: $deep-blue;
   min-height: 300px;
   color: #fff;
   font-size: 28px;
@@ -944,12 +944,12 @@ $deepBlue: #a30e0c;
                 display: flex;
                 align-content: center;
                 padding: 8px 10px;
-                // border: 1px solid $deepBlue;
+                // border: 1px solid $deep-blue;
                 color: #666;
                 cursor: pointer;
 
                 &:hover {
-                  color: $deepBlue;
+                  color: $deep-blue;
                 }
 
                 .svg-icon {

src/views/display/components/ChStyleUnit.vue

@@ -89,7 +89,7 @@ export default {
 <style lang="scss">
 .units-content-intro,.unit-intro{
   p{
-    font-family: $defaultFontFamily !important;
+    font-family: $default-font-family !important;
   }
 }
 </style>

src/views/display/components/NormalStyle.vue

@@ -664,7 +664,7 @@ export default {
 .display-detail_intro {
   .intro-content {
     p {
-      font-family: $defaultFontFamily !important;
+      font-family: $default-font-family !important;
     }
   }
 }
@@ -710,19 +710,19 @@ $titleFontFamily: SourceHanSerifCN-Bold;
     i {
       margin-right: 10px;
       font-size: 28px;
-      color: $deepBlue;
+      color: $deep-blue;
     }
 
     .svg-icon {
       font-size: 32px;
-      color: $deepBlue;
+      color: $deep-blue;
       margin-right: 10px;
     }
 
     .title {
       font-size: 26px;
       font-weight: 400;
-      color: $deepBlue;
+      color: $deep-blue;
       font-family: "SourceHanSerifCN-Bold";
     }
   }
@@ -933,7 +933,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
                   }
 
                   .collect {
-                    color: $deepBlue;
+                    color: $deep-blue;
                   }
                 }
               }
@@ -948,7 +948,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           cursor: pointer;
           animation: audioRotate 8s linear infinite;
           transform-origin: center center;
-          border: 2px solid $deepBlue;
+          border: 2px solid $deep-blue;
           padding: 10px;
           border-radius: 50%;
           display: flex;
@@ -962,7 +962,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           }
 
           .svg-icon {
-            color: $deepBlue;
+            color: $deep-blue;
             font-size: 80px;
           }
 
@@ -983,14 +983,14 @@ $titleFontFamily: SourceHanSerifCN-Bold;
         .tab-item {
           height: 100%;
           margin-right: 40px;
-          color: $deepBlue;
+          color: $deep-blue;
           font-size: 24px;
           font-family: $titleFontFamily;
           cursor: pointer;
           position: relative;
 
           &:hover {
-            color: $deepBlue;
+            color: $deep-blue;
 
             &::after {
               display: inline-block;
@@ -1003,7 +1003,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
         }
 
         .active {
-          color: $deepBlue;
+          color: $deep-blue;
 
           &::after {
             display: inline-block;
@@ -1018,7 +1018,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           width: 100%;
           bottom: -10px;
           left: 0;
-          background-color: $deepBlue;
+          background-color: $deep-blue;
         }
       }
 
@@ -1032,7 +1032,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
         .intro-title {
           font-size: 26px;
           font-weight: 400;
-          color: $deepBlue;
+          color: $deep-blue;
           font-family: "SourceHanSerifCN-Bold";
           display: flex;
           align-items: center;
@@ -1055,7 +1055,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
 
         .left-box {
           width: 60px;
-          background-color: $deepBlue;
+          background-color: $deep-blue;
           min-height: 200px;
           color: #fff;
           font-size: 28px;
@@ -1071,7 +1071,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           flex: 1;
           text-indent: 34px;
           padding: 16px 32px;
-          background-color: rgba($deepBlue, 10%);
+          background-color: rgba($deep-blue, 10%);
         }
       }
 
@@ -1086,7 +1086,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           // justify-content: center;
           align-items: center;
           font-size: 24px;
-          color: $deepBlue;
+          color: $deep-blue;
           padding: 0 40px;
           margin-bottom: 32px;
           font-family: SourceHanSerifCN-Bold;
@@ -1115,16 +1115,16 @@ $titleFontFamily: SourceHanSerifCN-Bold;
             .name {
               padding: 8px;
               // border-radius: 4px;
-              color: $deepBlue;
+              color: $deep-blue;
               cursor: pointer;
               text-overflow: ellipsis;
               overflow: hidden;
               width: 100%;
               white-space: nowrap;
-              border: 1px solid $deepBlue;
+              border: 1px solid $deep-blue;
               font-size: 14px;
               &:hover {
-                background: $deepBlue;
+                background: $deep-blue;
                 color: $yellow;
               }
               &:not(&:last-child) {
@@ -1134,7 +1134,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
             }
 
             .active {
-              background: $deepBlue;
+              background: $deep-blue;
               color: $yellow;
             }
           }
@@ -1156,7 +1156,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
         //     display: flex;
         //     justify-content: center;
         //     align-items: center;
-        //     color: $deepBlue;
+        //     color: $deep-blue;
         //     font-weight: bolder;
         //     font-size: 28px;
         //     transform: translateY(-6px);
@@ -1168,18 +1168,18 @@ $titleFontFamily: SourceHanSerifCN-Bold;
         //     .slide-item {
         //       padding: 8px;
         //       border-radius: 4px;
-        //       color: $deepBlue;
+        //       color: $deep-blue;
         //       cursor: pointer;
         //       text-overflow: ellipsis;
         //       overflow: hidden;
         //       width: 100%;
         //       white-space: nowrap;
-        //       border: 1px solid $deepBlue;
+        //       border: 1px solid $deep-blue;
         //       font-size: 14px;
         //     }
 
         //     .active {
-        //       background: $deepBlue;
+        //       background: $deep-blue;
         //       color: #fff;
         //     }
         //   }
@@ -1272,7 +1272,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           display: flex;
           align-items: center;
           font-size: 26px;
-          color: $deepBlue;
+          color: $deep-blue;
           font-family: SourceHanSerifCN-Bold;
 
           i {
@@ -1327,7 +1327,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
           }
 
           .lt-name {
-            color: $deepBlue;
+            color: $deep-blue;
             cursor: pointer;
           }
         }

src/views/display/components/NormalStyleUnit.vue

@@ -180,7 +180,7 @@ export default {
 .unit-content_intro {
   p {
     // color: red !important;
-    font-family: $defaultFontFamily !important;
+    font-family: $default-font-family !important;
 
     // color: #333 !important;
   }
@@ -203,17 +203,17 @@ export default {
     .slide-item {
       padding: 8px;
       border-radius: 4px;
-      color: $deepBlue;
+      color: $deep-blue;
       cursor: pointer;
       text-overflow: ellipsis;
       overflow: hidden;
       width: 100%;
       white-space: nowrap;
-      border: 1px solid $deepBlue;
+      border: 1px solid $deep-blue;
     }
 
     .active {
-      background: $deepBlue;
+      background: $deep-blue;
       color: #fff;
     }
   }
@@ -229,7 +229,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  color: $deepBlue;
+  color: $deep-blue;
   font-weight: bolder;
   font-size: 28px;
   transform: translateY(-6px);
@@ -345,12 +345,12 @@ export default {
       display: flex;
       align-content: center;
       padding: 8px 10px;
-      // border: 1px solid $deepBlue;
+      // border: 1px solid $deep-blue;
       color: #666;
       cursor: pointer;
 
       &:hover {
-        color: $deepBlue;
+        color: $deep-blue;
       }
 
       .svg-icon {

src/views/display/components/RedStyle.vue

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

src/views/display/index.vue

@@ -303,13 +303,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$blue: $deepBlue;
+$blue: $deep-blue;
 $text-indent: 16px;
 
 .display {
   width: 100%;
 
-  // background-color: $deepBlue;
+  // background-color: $deep-blue;
   // color: #fff;
 
   .type-group {
@@ -337,7 +337,7 @@ $text-indent: 16px;
       color: #999;
 
       &:hover {
-        color: $deepBlue;
+        color: $deep-blue;
       }
     }
 
@@ -463,7 +463,7 @@ $text-indent: 16px;
               .name {
                 font-size: 18px;
                 font-weight: bold;
-                color: $deepBlue;
+                color: $deep-blue;
                 margin-bottom: 18px;
                 white-space: nowrap;
                 overflow: hidden;
@@ -561,7 +561,7 @@ $text-indent: 16px;
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    background: $deepBlue;
+    background: $deep-blue;
     min-width: 0;
     margin: 0 10px;
     color: #b7b7b7;

src/views/home/components/CulturalRelic.vue

@@ -134,7 +134,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$blue: $deepBlue;
+$blue: $deep-blue;
 .home-cr {
   // background-image: url("@/assets/imgs/home/display-bg.png");
   background-size: cover;
@@ -147,7 +147,7 @@ $blue: $deepBlue;
     display: flex;
     flex-direction: column;
     align-items: center;
-    font-family: "Alibaba PuHuiTi";
+    font-family: "Alibaba pu-hui-ti";
     // .ch {
     //   color: #2d4bb5;
     //   margin-bottom: 12px;
@@ -184,7 +184,7 @@ $blue: $deepBlue;
     color: #2d4ab5;
     margin-bottom: 8px;
     // margin-top: 40px;
-    font-family: "Alibaba PuHuiTi";
+    font-family: "Alibaba pu-hui-ti";
     font-size: 48px;
     font-weight: bold;
   }

src/views/home/components/Display.vue

@@ -157,7 +157,7 @@ export default {
     color: #fff;
     // margin-top: 10px;
     // margin-bottom: 90px;
-    font-family: "Alibaba PuHuiTi";
+    font-family: "Alibaba pu-hui-ti";
     flex-basis: auto;
     font-size: 48px;
     font-weight: bold;
@@ -205,7 +205,7 @@ export default {
 
         .content {
           color: #fff;
-          font-family: "Alibaba PuHuiTi";
+          font-family: "Alibaba pu-hui-ti";
           width: 600px;
           height: 100%;
 

src/views/home/components/MuseumMap.vue

@@ -577,7 +577,7 @@ export default {
       // margin-top: 100px;//去除上间距
       width: 600px;
       color: #333;
-      font-family: "Alibaba PuHuiTi";
+      font-family: "Alibaba pu-hui-ti";
       height: 50vh;
       position: relative;
       padding: 40px;
@@ -680,7 +680,7 @@ export default {
         }
         .num {
           // font-weight: bold;
-          font-family: $puHuiTi;
+          font-family: $pu-hui-ti;
           font-size: 60px;
           margin: 0 4px;
           cursor: pointer;

src/views/home/components/Virtural.vue

@@ -115,7 +115,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$blue: $deepBlue;
+$blue: $deep-blue;
 
 .home-virtural {
   display: flex;
@@ -134,7 +134,7 @@ $blue: $deepBlue;
       flex-direction: column;
       align-items: center;
       padding: 100px 0 80px 0;
-      font-family: "Alibaba PuHuiTi";
+      font-family: "Alibaba pu-hui-ti";
 
       .ch {
         font-size: 30px;
@@ -153,7 +153,7 @@ $blue: $deepBlue;
       width: 74vw;
 
       .intro {
-        font-family: "Alibaba PuHuiTi";
+        font-family: "Alibaba pu-hui-ti";
         color: #ffffff;
         margin-top: 110px;
         // width: 300px;

src/views/museum/Detail.vue

@@ -379,7 +379,7 @@ $node-w: 700px;
         &:hover,
         &.active {
           cursor: pointer;
-          // background-color: $deepBlue;
+          // background-color: $deep-blue;
           background-image: url(@/assets/imgs/show/outer-active.png);
 
           > span {

src/views/museum/index.vue

@@ -240,7 +240,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$blue: $deepBlue;
+$blue: $deep-blue;
 $text-indent: 16px;
 .display {
   width: 100%;
@@ -281,7 +281,7 @@ $text-indent: 16px;
             cursor: pointer;
             transition: all 0.5s ease;
             &:hover {
-              border: 2px solid $deepBlue;
+              border: 2px solid $deep-blue;
               .face-image {
                 transform: scale(1.2);
               }
@@ -307,7 +307,7 @@ $text-indent: 16px;
               .name {
                 font-size: 18px;
                 font-weight: bold;
-                color: $deepBlue;
+                color: $deep-blue;
                 margin-bottom: 18px;
               }
               .deptName {

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

@@ -35,7 +35,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$blue: $deepBlue;
+$blue: $deep-blue;
 .container {
   border: 1px solid #f1f1f1;
   height: 300px;

src/views/personal/components/Info.vue

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

src/views/personal/index.vue

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

src/views/register/index.vue

@@ -260,7 +260,7 @@ export default {
 .wrapper {
   width: 100%;
   // background-image: url("@/assets/imgs/home/display-bg.png");
-  // background-color: rgba($color: $deepBlue, $alpha: 0.2);
+  // background-color: rgba($color: $deep-blue, $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: $deepBlue;
+        background-color: $deep-blue;
         &:hover {
           filter: brightness(0.9);
         }

src/views/searchPic/components/imgList/index.vue

+<template>
+  <div class="img-list">
+    <vue-waterfall-easy
+      :maxCols="7"
+      v-if="imgsArr.length > 0"
+      :imgsArr="imgsArr"
+      @scrollReachBottom="loadImgList"
+      :gap="30"
+      ref="waterfall"
+      @click="handleClickImg"
+      :src-key="getSrcKey"
+    >
+      <div slot="waterfall-over" class="load-over">已加载完全部</div>
+    </vue-waterfall-easy>
+    <el-empty v-else></el-empty>
+  </div>
+</template>
+
+<script>
+import { imgList } from "../../mock";
+import vueWaterfallEasy from "vue-waterfall-easy";
+export default {
+  components: {
+    vueWaterfallEasy,
+  },
+  data() {
+    return {
+      current: 0,
+      size: 20,
+      total: 20,
+      hasMore: true,
+      imgsArr: imgList, //图片数组
+    };
+  },
+  computed: {
+    getSrcKey() {
+      return "filePath";
+    },
+  },
+  mounted() {
+    this.loadImgList();
+  },
+  methods: {
+    async loadImgList() {
+      if (this.total === this.imgsArr.length) {
+        this.hasMore = false;
+        this.$refs.waterfall && this.$refs.waterfall.waterfallOver();
+      }
+      //   const params = {
+      //   };
+
+      //   let res = await getListFileByPage(params);
+      //   if (res && res.data) {
+      //     const { records, size, current, total } = res.data;
+      //     this.size = size;
+      //     this.current = current;
+      //     this.total = total;
+      //     let list = JSON.parse(JSON.stringify(records));
+      //     this.imgsArr = this.imgsArr.concat(list);
+      //     this.current++;
+      //   }
+    },
+    handleClickImg(e){
+      console.log(e);
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$box-shadow: 0 2px 8px rgba(28, 31, 35, 0.03),
+  0 16px 48px 8px rgba(28, 31, 35, 0.08);
+.img-list {
+  height: calc(100vh);
+
+  ::v-deep .vue-waterfall-easy-container .vue-waterfall-easy a.img-inner-box {
+    border-radius: none;
+    box-shadow: none;
+    transition: all ease 0.3s;
+    cursor: pointer;
+
+    &:hover {
+      transform: translateY(-10px);
+    }
+  }
+
+  ::v-deep .img-wraper {
+    img {
+      border-radius: 14px;
+      transition: all ease 0.3s;
+      box-shadow: $box-shadow;
+
+      &:hover {
+        // box-shadow: $box-shadow-deep;
+      }
+    }
+  }
+  .load-over {
+    padding: 20px 0;
+  }
+}
+</style>

src/views/searchPic/mock.js

+export const imgList = [
+  {
+    filePath:
+      "http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
+  },
+  {
+    filePath:
+      "http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/62%E8%B4%B5%E5%B7%9E%E6%B8%85%E6%B1%9F%E5%8D%8F%E4%B8%AD%E5%86%9B%E9%83%A8%E5%8F%B8%E4%B9%8B%E5%85%B3%E9%98%B2%E9%93%9C%E5%8D%B0/low/62.%E8%B4%B5%E5%B7%9E%E6%B8%85%E6%B1%9F%E5%8D%8F%E4%B8%AD%E5%86%9B%E9%83%A8%E5%8F%B8%E4%B9%8B%E5%85%B3%E9%98%B2%E9%93%9C%E5%8D%B0.png",
+  },
+  {
+    filePath:
+      "http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
+  },
+  {
+    filePath:
+      "http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/42%E8%88%9E%E8%B9%88%E4%BF%91/low/42.%E8%88%9E%E8%B9%88%E4%BF%91.png",
+  },
+  {
+    filePath:
+      "http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
+  },
+  {
+    filePath:
+      "http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/31%E9%93%9C%E8%BD%A6%E9%A9%AC/low/31.%E9%93%9C%E8%BD%A6%E9%A9%AC.png",
+  },
+  {
+    filePath:
+      "http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
+  },
+];

src/views/virtual/index.vue

@@ -226,11 +226,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$blue: $deepBlue;
+$blue: $deep-blue;
 $text-indent: 16px;
 .display {
   width: 100%;
-  // background-color: $deepBlue;
+  // background-color: $deep-blue;
   // color: #fff;
   .content-wrapper {
     padding-top: 60px;
@@ -301,7 +301,7 @@ $text-indent: 16px;
             cursor: pointer;
             transition: all 0.5s ease;
             &:hover {
-              border: 2px solid $deepBlue;
+              border: 2px solid $deep-blue;
               .face-image {
                 transform: scale(1.2);
               }
@@ -361,7 +361,7 @@ $text-indent: 16px;
               .name {
                 font-size: 18px;
                 font-weight: bold;
-                color: $deepBlue;
+                color: $deep-blue;
                 margin-bottom: 18px;
               }
               .deptName {
@@ -424,7 +424,7 @@ $text-indent: 16px;
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    background: $deepBlue;
+    background: $deep-blue;
     min-width: 0;
     margin: 0 10px;
     color: #b7b7b7;