合并提交

package-lock.json

@@ -23,7 +23,6 @@
         "sass-loader": "^13.0.2",
         "svgo": "^2.8.0",
         "vue": "^2.6.14",
-        "vue-awesome-swiper": "^3.1.3",
         "vue-router": "^3.5.1",
         "vuex": "^3.6.2",
         "wowjs": "^1.1.3"
@@ -45,6 +44,7 @@
         "sass": "^1.32.7",
         "svg-sprite-loader": "^6.0.11",
         "terser-webpack-plugin": "^5.3.3",
+        "vue-awesome-swiper": "^3.1.3",
         "vue-template-compiler": "^2.6.14"
       }
     },
@@ -5300,6 +5300,7 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
       "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "dev": true,
       "dependencies": {
         "ssr-window": "^2.0.0"
       }
@@ -5307,7 +5308,8 @@
     "node_modules/dom7/node_modules/ssr-window": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
-      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==",
+      "dev": true
     },
     "node_modules/domelementtype": {
       "version": "2.3.0",
@@ -12609,7 +12611,8 @@
     "node_modules/ssr-window": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-1.0.1.tgz",
-      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg==",
+      "dev": true
     },
     "node_modules/ssri": {
       "version": "8.0.1",
@@ -13238,6 +13241,7 @@
       "version": "4.5.1",
       "resolved": "https://registry.npmmirror.com/swiper/-/swiper-4.5.1.tgz",
       "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
+      "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "dom7": "^2.1.3",
@@ -13974,6 +13978,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
       "integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
+      "dev": true,
       "dependencies": {
         "object-assign": "^4.1.1",
         "swiper": "^4.0.7"
@@ -18979,6 +18984,7 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
       "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "dev": true,
       "requires": {
         "ssr-window": "^2.0.0"
       },
@@ -18986,7 +18992,8 @@
         "ssr-window": {
           "version": "2.0.0",
           "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
-          "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+          "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==",
+          "dev": true
         }
       }
     },
@@ -24755,7 +24762,8 @@
     "ssr-window": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-1.0.1.tgz",
-      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg==",
+      "dev": true
     },
     "ssri": {
       "version": "8.0.1",
@@ -25271,6 +25279,7 @@
       "version": "4.5.1",
       "resolved": "https://registry.npmmirror.com/swiper/-/swiper-4.5.1.tgz",
       "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
+      "dev": true,
       "requires": {
         "dom7": "^2.1.3",
         "ssr-window": "^1.0.1"
@@ -25863,6 +25872,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
       "integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
+      "dev": true,
       "requires": {
         "object-assign": "^4.1.1",
         "swiper": "^4.0.7"

package.json

@@ -24,7 +24,6 @@
     "sass-loader": "^13.0.2",
     "svgo": "^2.8.0",
     "vue": "^2.6.14",
-    "vue-awesome-swiper": "^3.1.3",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2",
     "wowjs": "^1.1.3"
@@ -46,6 +45,7 @@
     "sass": "^1.32.7",
     "svg-sprite-loader": "^6.0.11",
     "terser-webpack-plugin": "^5.3.3",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {

src/components/AudioPlayer/NormalPlayer.vue

+<template>
+  <div>
+    <audio
+      @timeupdate="updateProgress"
+      controls
+      ref="audioRef"
+      style="display: none"
+    >
+      <source :src="fileurl" type="audio/mpeg" />
+      您的浏览器不支持音频播放
+    </audio>
+    <div class="audio-right">
+      <i
+        :class="
+          audioStatus !== 'pause' ? 'el-icon-video-play' : 'el-icon-video-pause'
+        "
+        @click="playAudio"
+        class="dialogAudioPlay"
+      ></i>
+      <div class="progress-bar-bg" id="progressBarBg" v-dragto="setAudioIcon">
+        <div class="progress-bar" id="progressBar"></div>
+      </div>
+      <div class="audio-time" style="min-height: 10px">
+        <span class="audio-length-current" id="audioCurTime">{{
+          audioStart
+        }}</span
+        >/
+        <span class="audio-length-total">{{ duration }}</span>
+      </div>
+      <div class="volume">
+        <div
+          @click.stop="
+            () => {
+              return false;
+            }
+          "
+          class="volume-progress"
+          v-show="audioHuds"
+        >
+          <div
+            class="volume-bar-bg"
+            id="volumeBarBg"
+            v-adjuster="handleShowMuteIcon"
+          >
+            <div class="volume-bar" id="volumeBar"></div>
+          </div>
+        </div>
+        <i
+          class="iconfont pl-1"
+          :class="audioIcon"
+          @click.stop="audioHuds = !audioHuds"
+        >
+        </i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NormalPlayer",
+  props: {
+    fileurl: {
+      trpe: String,
+    },
+  },
+  data() {
+    return {
+      audioStatus: "play",
+      audioStart: "0:00",
+      duration: "0:00",
+      audioVolume: 0.5,
+      audioHuds: false,
+    };
+  },
+
+  directives: {
+    dragto: {
+      inserted: function (el, binding, vnode) {
+        el.addEventListener(
+          "click",
+          (e) => {
+            let wdiv = document.getElementById("progressBarBg").clientWidth;
+            let audio = vnode.context.$refs.audioRef;
+            // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
+            let ratemin = e.offsetX / wdiv;
+            let rate = ratemin * 100;
+            document.getElementById("progressBar").style.width = rate + "%";
+            audio.currentTime = audio.duration * ratemin;
+            audio.play();
+            binding.value();
+          },
+          false
+        );
+      },
+    },
+    adjuster: {
+      inserted: function (el, binding, vnode) {
+        el.addEventListener(
+          "click",
+          (e) => {
+            let hdiv = document.getElementById("volumeBarBg").clientHeight;
+            let audio = vnode.context.$refs.audioRef;
+            // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
+            let ratemin = e.offsetY / hdiv;
+            let rate = ratemin * 100;
+            document.getElementById("volumeBar").style.height = rate + "%";
+            audio.volume = ratemin;
+            binding.value(rate / 100);
+          },
+          false
+        );
+      },
+    },
+  },
+  computed: {
+    audioIcon() {
+      if (this.audioHuds) {
+        return this.audioVolume < 0.01
+          ? "checked icon-jingyin"
+          : "checked icon-shengyin";
+      } else {
+        return "icon-shengyin";
+      }
+    },
+  },
+  mounted() {
+    this.fetch();
+  },
+  methods: {
+    fetch() {
+      let that = this;
+      var myVid = this.$refs.audioRef;
+      myVid.loop = false;
+      // 监听音频播放完毕
+      myVid.addEventListener(
+        "ended",
+        function () {
+          that.audioStatus = "play"; // 显示播放icon
+          document.getElementById("progressBar").style.width = "0%"; // 进度条初始化
+        },
+        false
+      );
+      if (myVid != null) {
+        myVid.oncanplay = function () {
+          that.duration = that.transTime(myVid.duration); // 计算音频时长
+        };
+        myVid.volume = 0.5; // 设置音量50%
+      }
+    },
+    // 播放暂停控制
+    playAudio() {
+      let recordAudio = this.$refs.audioRef; // 获取audio元素
+      if (recordAudio.paused) {
+        recordAudio.play();
+        this.audioStatus = "pause";
+      } else {
+        recordAudio.pause();
+        this.audioStatus = "play";
+      }
+    },
+    // 更新进度条与当前播放时间
+    updateProgress(e) {
+      var value = e.target.currentTime / e.target.duration;
+      if (document.getElementById("progressBar")) {
+        document.getElementById("progressBar").style.width = value * 100 + "%";
+        if (e.target.currentTime === e.target.duration) {
+          this.audioStatus = "pause";
+        }
+      } else {
+        this.audioStatus = "pause";
+      }
+
+      this.audioStart = this.transTime(this.$refs.audioRef.currentTime);
+    },
+    /**
+     * 音频播放时间换算
+     * @param {number} value - 音频当前播放时间，单位秒
+     */
+    transTime(time) {
+      var duration = parseInt(time);
+      var minute = parseInt(duration / 60);
+      var sec = (duration % 60) + "";
+      var isM0 = ":";
+      if (minute === 0) {
+        minute = "00";
+      } else if (minute < 10) {
+        minute = "0" + minute;
+      }
+      if (sec.length === 1) {
+        sec = "0" + sec;
+      }
+      return minute + isM0 + sec;
+    },
+    setAudioIcon() {
+      this.audioStatus = "pause";
+    },
+    handleShowMuteIcon(val) {
+      this.audioVolume = val;
+    },
+  },
+};
+</script>
+
+<style lang="scss"  scoped>
+.volume {
+  position: relative;
+  .volume-progress {
+    position: absolute;
+    top: -150px;
+    width: 32px;
+    height: 140px;
+    background: #f6f6f6;
+    border-radius: 4px;
+    padding-top: 10px;
+  }
+  .volume-bar-bg {
+    margin: 0 auto;
+    width: 6px;
+    height: 120px;
+    background: #dcdcdc;
+    border-radius: 100px;
+    flex: 1;
+    position: relative;
+    transform: rotate(180deg);
+    cursor: pointer;
+    .volume-bar {
+      width: 6px;
+      height: 50%;
+      background: #56bf8b;
+      border-radius: 100px;
+    }
+  }
+  .checked {
+    color: #56bf8b;
+  }
+}
+.audio-right {
+  width: 100%;
+  height: 49px;
+  line-height: 49px;
+  background: #f5f5f9;
+  border-radius: 6px;
+  display: flex;
+  padding: 0 15px;
+  .dialogAudioPlay {
+    cursor: pointer;
+    color: #5c5e66;
+    display: flex;
+    align-items: center;
+    color: #2069c4;
+    font-size: 38px;
+  }
+  .progress-bar-bg {
+    background-color: #fff;
+    flex: 1;
+    position: relative;
+    height: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-top: -1px;
+    cursor: pointer;
+    margin: 0 10px;
+  }
+  .progress-bar {
+    background-color: #2069c4;
+    width: 0%;
+    height: 10px;
+    border-radius: 5px;
+  }
+
+  .audio-time {
+    overflow: hidden;
+    font-size: 14px;
+    .audio-length-total {
+      float: right;
+    }
+    .audio-length-current {
+      float: left;
+    }
+  }
+}
+</style>
+

src/components/CustomTitle/index.vue

 <!-- -->
 <template>
   <div class="custom-title">
-    {{ text }}
+    <svg-icon icon-class="mz-list"></svg-icon>
+  <span> {{ text }}</span>
   </div>
 </template>
 
@@ -26,8 +27,10 @@ export default {
 .custom-title {
   width: 100%;
   padding: 8px;
-  font-size: 18px;
-  border-bottom: 1px solid rgba($color: #000000, $alpha: 0.3);
+  font-size: 32px;
+  border-bottom: 1px solid rgba($color: #b8b8b8, $alpha: 0.3);
   margin-bottom: 32px;
+  font-family: "KaiTi";
+  color: #666;
 }
 </style>

src/components/Footer/index.vue

 <!-- -->
 <template>
-  <div class="footer">
+  <div
+    :class="{
+      footer: true,
+      isChStyle: navbarStyle == '2',
+      isRedStyle: navbarStyle == '3',
+    }"
+  >
     <span>贵州省文化和旅游厅博物馆处版权所有</span>
     <span>中国知网提供技术支持</span>
   </div>
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 export default {
   name: "Footer",
+  computed: {
+    ...mapGetters(["curPath", "navbarStyle"]),
+  },
+  curPath: {
+    handler: function (value) {
+      if (value.params.themeType) {
+        this.$store.commit("app/CHANGE_NAV_COLOR", value.params.themeType);
+      } else {
+        this.$store.commit("app/CHANGE_NAV_COLOR", "1");
+      }
+    },
+    immediate: true,
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-.footer{
+.footer {
   display: flex;
   height: 200px;
   padding: 0 24px;
   justify-content: center;
   align-items: center;
-    background-color: #2069C4;
+  background-color: #2069c4;
   color: #fff;
   // position: fixed;
   // bottom: 0;
   // left: 0;
   // right: 0;
 
-    span{
+  span {
     margin-right: 16px;
   }
 }
+
+.isChStyle {
+  background-color: #892325 !important;
+}
+.isRedStyle {
+  background-color: #a30e0c !important;
+}
 </style>

src/components/MenuList/index.vue

 <!-- -->
 <template>
   <el-menu
-    class="sidebar-el-menu"
+    v-if="items.length > 0"
+    class="sidebar-el-menu blueStyle"
     default-active=""
     @open="handleOpen"
     @close="handleClose"
     :default-openeds="[items[0].euId]"
   >
     <!-- 遍历菜单 -->
-    <template v-for="(item) in items">
+    <template v-for="item in items">
       <!-- 含有子菜单 -->
       <template v-if="item.children">
         <!-- 第一层 含有子菜单菜单 -->
@@ -16,7 +17,11 @@
           <template slot="title">
             <div slot="title" @click="handleClick(item)">{{ item.title }}</div>
           </template>
-          <menu-list :items="item.children" v-bind="$attrs" v-on="$listeners"></menu-list
+          <menu-list
+            :items="item.children"
+            v-bind="$attrs"
+            v-on="$listeners"
+          ></menu-list
           ><!--递归调用-->
         </el-submenu>
       </template>
@@ -38,22 +43,53 @@ export default {
     items: Array,
     isCollapse: Boolean,
   },
-  inheritAttrs:false,
+  inheritAttrs: false,
   methods: {
-    handleOpen(key, keyPath) {
-      
-    },
+    handleOpen(key, keyPath) {},
     handleClose(key, keyPath) {
       // console.log(key, keyPath);
-      
     },
-    handleClick(item){
+    handleClick(item) {
       // console.log(item.title);
-      this.$emit('open',item)
-    }
+      this.$emit("open", item);
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.el-menu {
+  border-right: none;
+}
+.el-menu-item {
+  background-color: #f5f5f9;
+  font-size: 16px;
+  // color: #2069c4;
+  &:hover {
+    background-color: #2069c4;
+    color: #fff;
+  }
+}
+
+.el-menu-item.is-active {
+  color: #2069c4;
+  font-weight: bold;
+}
+.blueStyle {
+  background-image: url("@/assets/imgs/display/normal/bg.png");
+  background-size: 1%;
+  ::v-deep .el-menu-item {
+    transition: all 0.5s ease;
+    background: transparent;
+    padding: 0 60px !important;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    &:hover {
+      background: rgba($color: #fff, $alpha: 0.6);
+      color: #2069c4;
+      font-weight: bold;
+    }
+  }
+}
 </style>

src/components/NavBar/index.vue

 <template>
   <div
-    :class="{ nav: true, 'header-fixed ': isFixed, 'home-nav': isHome }"
+    :class="{
+      nav: true,
+      'header-fixed ': isFixed,
+      'home-nav': isHome,
+      isChStyle: navbarStyle == '2',
+      isRedStyle: navbarStyle == '3',
+    }"
     id="navbar"
   >
     <div class="container">
@@ -152,6 +158,7 @@ export default {
       "curPath",
       "navBarFixed",
       "showLoginDialog",
+      "navbarStyle",
     ]),
     hasToken() {
       return this.token;
@@ -165,7 +172,6 @@ export default {
           name: value.name,
           path: value.path,
         };
-
         if (value.name.indexOf("display") != -1) {
           this.currentTab = {
             name: "展览",
@@ -184,6 +190,12 @@ export default {
             path: "/museum",
           };
         }
+
+        if (value.params.themeType) {
+          this.$store.commit("app/CHANGE_NAV_COLOR", value.params.themeType);
+        }else{
+          this.$store.commit("app/CHANGE_NAV_COLOR", '1');
+        }
       },
       immediate: true,
     },
@@ -418,7 +430,12 @@ export default {
   z-index: 99;
   top: 0;
 }
-
+.isChStyle {
+  background-color: #892325 !important;
+}
+.isRedStyle {
+  background-color: #a30e0c !important;
+}
 .nav {
   height: 100px;
   width: 100%;

src/components/ReaderOperations/index.vue

 <template>
   <div>
     <div class="operations">
-      <span class="operation-item" @click="handleLike" v-if="like">
+      <span class="operation-item" v-if="like">
         <svg-icon
-          icon-class="like"
-          :class="loveCountStatus ? 'like' : ''"
+          @click="handleLike"
+          :icon-class="loveCountStatus ? 'mz-like-s' : 'mz-like'"
+          :style="{
+            fontSize: iconSize + 'px',
+            color: loveCountStatus ? selectColor : '#61666d',
+          }"
         ></svg-icon>
-        <span>{{ loveCount }}</span>
+        <span>{{ formatNum(loveCount) }}</span>
       </span>
       <span class="operation-item" @click="handleCollect" v-if="collect">
         <svg-icon
-          icon-class="collect"
-          :class="collectCountStatus ? 'collect' : ''"
+          :icon-class="collectCountStatus ? 'collect-s' : 'collect'"
+          :style="{
+            fontSize: iconSize + 'px',
+            color: collectCountStatus ? selectColor : '#61666d',
+          }"
         ></svg-icon>
-        <span>{{ collectCount }}</span>
+        <span>{{ formatNum(collectCount) }}</span>
       </span>
       <span v-if="share" class="operation-item" @click="handleShare">
-        <svg-icon icon-class="share"></svg-icon>
+        <svg-icon
+          icon-class="mz-fx"
+          class="collect"
+          :style="{
+            fontSize: iconSize + 'px',
+            color: selectColor,
+          }"
+        ></svg-icon>
+        <span>分享</span>
       </span>
     </div>
     <el-dialog
@@ -24,7 +39,7 @@
       :visible.sync="loginDialogVisible"
       width="30%"
       :before-close="handleLoginClose"
-      :modal="false"
+      append-to-body
     >
       <span>读者功能需登录进行使用，是否去登录？</span>
       <span slot="footer" class="dialog-footer">
@@ -34,14 +49,14 @@
     </el-dialog>
 
     <el-dialog
-      title="分享"
+      title="分享给朋友"
       :visible.sync="shareDialogVisible"
       width="40%"
       :before-close="handleShareClose"
-      :modal="false"
+      append-to-body
     >
       <div class="qrcode">
-        <div>
+        <div class="img-container">
           <img
             src="@/assets/404_images/no-pic.png"
             alt="二维码"
@@ -49,22 +64,24 @@
             height="100px"
           />
         </div>
-        <div>扫描左侧二维码，跳转到对应小程序页面后分享，或复制下方链接</div>
-      </div>
-      <div class="copy">
-        <div class="link">{{ curLink }}</div>
+        <div>
+          扫描左侧二维码，跳转到对应小程序页面后分享，或
           <el-button type="text" @click.native="copyUrl">
             <svg-icon icon-class="copy"></svg-icon>
             复制链接</el-button
           >
         </div>
+      </div>
+      <div class="copy">
+        <!-- <div class="link">{{ curLink }}</div> -->
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
-import { debounce } from "@/utils/index";
+import { debounce, formatNum } from "@/utils/index";
 export default {
   name: "ReaderOperations",
   props: {
@@ -116,6 +133,14 @@ export default {
       type: String,
       default: "",
     },
+    iconSize: {
+      type: [Number, String],
+      default: 32,
+    },
+    selectColor: {
+      type: String,
+      default: "#2069c4",
+    },
   },
   data() {
     return {
@@ -183,7 +208,8 @@ export default {
     },
 
     handleToLogin() {
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+      this.$store.commit("app/OPEN_LOGIN_DIALOG", true);
+      // this.$router.push(`/login?redirect=${this.$route.fullPath}`);
     },
 
     copyUrl() {
@@ -195,37 +221,56 @@ export default {
       inputElement.remove();
       this.$message.success("复制成功！赶快去分享吧~");
     },
+
+    formatNum(num) {
+      return formatNum(num);
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .operations {
-  margin-top: 22px;
+  // margin-top: 22px;
   display: flex;
-  //   justify-content: space-between;
+  justify-content: space-between;
   .operation-item {
     display: flex;
     align-items: center;
-    margin-right: 32px;
+    // margin-right: 32px;
     cursor: pointer;
   }
   .svg-icon {
-    margin-right: 16px;
+    margin-right: 10px;
     font-size: 36px;
     color: #61666d;
   }
   .like {
-    color: #d4237a;
+    color: #831122;
   }
   .collect {
-    color: #2069c4;
+    color: #831122;
   }
 }
+
+.el-button--text {
+  color: #2069c4;
+}
 .qrcode,
 .copy {
   display: flex;
   //   justify-content: space-between;
   align-items: center;
 }
+
+.qrcode {
+  .img-container {
+    width: 200px;
+    height: 200px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
 </style>
\ No newline at end of file

src/components/Video/index.vue

 <template>
-  <div class="video-container" @click="hanleClick">
-    <video :src="url" class="video-dom" ref="video"></video>
+  <div :class="['video-container', theme]" @click="hanleClick">
+    <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>
@@ -18,6 +18,10 @@ export default {
       default: "",
       type: String,
     },
+    theme: {
+      default: "red",
+      type: String,
+    },
   },
   data() {
     return {
@@ -58,48 +62,66 @@ export default {
     width: 100%;
   }
   .modal {
-    width: 100%;
-    height: 100%;
-    background-color: rgba($color: #000000, $alpha: 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    transition: all 0.5s ease;
-    position: absolute;
-    z-index: 9;
+    // width: 100%;
+    // height: 100%;
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
+    // background-color: rgba($color: #000000, $alpha: 0.5);
+    // display: flex;
+    // justify-content: center;
+    // align-items: center;
+    // position: absolute;
+    // left: 0;
+    // bottom: 0;
+    // transition: all 0.5s ease;
+    // position: absolute;
+    // z-index: 9;
 
     .play-btn {
       width: 100px;
       height: 70px;
-      border: 2px solid #892325;
       // background-color: #fff;
-      border-radius: 20px;
+      border-radius: 16px;
       display: flex;
       justify-content: center;
       align-items: center;
-      color: #892325;
       position: absolute;
       z-index: 1;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
       i {
-        font-size: 50px;
+        font-size: 70px;
         z-index: 1;
+        transform: scaleX(1.5);
       }
     }
   }
 
   .blur {
-    width: 100px;
-    height: 70px;
+    width: 120px;
+    height: 84px;
     background-color: #fff;
     position: absolute;
     left: 50%;
     bottom: 50%;
     transform: translate(-50%, 50%);
-    filter: blur(26px);
+    filter: blur(20px);
     z-index: 0;
   }
 }
+
+.red {
+  .play-btn {
+    border: 2px solid #892325;
+    color: #892325;
+  }
+}
+.blue {
+  .play-btn {
+    border: 2px solid #2069c4;
+    color: #2069c4;
+  }
+}
 </style>
\ No newline at end of file

src/icons/svg/3d.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="1661156733273" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1789" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M571.306667 754.517333l264.064-158.976s2.688 0 2.688-2.688l2.688-2.688V140.117333s0-2.688-2.688-2.688h-8.064l-401.493334-102.4H409.6L169.770667 202.112s-2.688 0-2.688 2.688v2.688s0 2.688-2.688 2.688v2.688c-2.730667 2.730667-2.730667 2.730667-2.730667 5.418667v433.834666l2.730667 2.688s2.688 0 2.688 2.730667h5.376l382.677333 96.981333h5.376c2.688 0 5.376 0 5.376-2.688 2.688 2.688 2.688 2.688 5.376 2.688-2.688 0 0 0 0 0zM425.728 113.194667c10.794667 0 18.858667-8.106667 18.858667-18.858667v-16.213333l334.165333 83.541333-223.658667 153.6-113.194666-34.986667c-2.688-8.106667-8.106667-16.213333-18.858667-16.213333a20.565333 20.565333 0 0 0-13.482667 5.418667L220.970667 212.864l183.253333-123.946667v5.418667c2.688 10.752 10.752 18.858667 21.546667 18.858667z m172.458667 371.84l-18.858667-5.376V344.917333l226.346667-156.288v363.776l-13.482667-5.376c-10.752-2.688-21.546667 2.688-24.234667 13.482667-2.688 10.752 2.688 18.858667 10.794667 24.234667l-199.424 121.258666V520.106667l8.106667 2.730666h5.376c8.106667 0 16.170667-5.418667 18.858666-13.482666 2.688-10.794667-2.688-21.546667-13.482666-24.277334z m-371.882667 118.613333c-5.376-8.106667-18.858667-10.794667-26.922667-2.730667H196.693333V245.205333l207.488 64.682667v37.717333c0 10.794667 8.106667 18.858667 18.858667 18.858667s18.858667-8.064 18.858667-18.858667v-26.922666l97.024 29.653333v118.528l-8.106667-2.688c-10.794667-2.688-21.546667 2.688-24.234667 13.482667-2.688 10.794667 2.688 21.546667 13.44 24.277333l18.901334 5.376v204.8l-320.682667-80.853333h2.688a21.930667 21.930667 0 0 0 5.376-29.653334z" p-id="1790"></path><path d="M406.912 220.970667c0 10.794667 8.106667 18.858667 18.858667 18.858666 10.794667 0 18.858667-8.106667 18.858666-18.858666V156.288a18.432 18.432 0 0 0-18.858666-18.858667 18.432 18.432 0 0 0-18.858667 18.858667V221.013333z m-134.741333 366.506666c5.376 0 8.106667 0 10.794666-2.730666l59.306667-48.512c8.064-5.376 10.752-18.858667 2.645333-26.922667-5.376-8.106667-18.858667-10.794667-26.922666-2.688l-59.306667 48.512c-8.106667 5.376-10.752 18.858667-2.688 26.922667 5.376 2.688 10.794667 5.376 16.170667 5.376z m121.258666-94.336c5.376 0 8.106667 0 10.794667-2.688l24.234667-18.858666 29.653333 8.106666h5.376c8.106667 0 16.213333-5.418667 18.858667-13.525333 2.688-10.752-2.688-21.546667-13.482667-24.234667l-24.234667-8.106666v-26.922667a18.432 18.432 0 0 0-18.858666-18.858667 18.432 18.432 0 0 0-18.858667 18.858667v32.341333l-24.277333 18.858667c-8.106667 5.376-10.752 18.858667-2.688 26.922667 2.688 5.418667 8.106667 8.106667 13.482666 8.106666z m258.688 48.512l64.682667 21.546667h5.376c8.106667 0 16.213333-5.376 18.858667-13.482667 2.730667-10.752-2.688-21.546667-13.44-24.234666l-64.682667-21.546667c-10.794667-2.730667-21.546667 2.688-24.277333 13.44-2.688 10.794667 2.730667 21.589333 13.482666 24.277333z m258.688-99.712c-8.106667-8.106667-18.858667-8.106667-26.922666 0-8.106667 8.106667-8.106667 18.858667 0 26.922667C926.976 512 951.253333 563.2 951.253333 614.4c0 132.053333-148.224 247.893333-353.024 272.170667-10.794667 0-18.858667 10.794667-16.170666 21.546666 0 10.794667 8.106667 16.213333 18.858666 16.213334h2.688c223.658667-26.965333 388.053333-159.018667 388.053334-309.930667-2.688-61.994667-29.653333-121.258667-80.853334-172.458667zM512 910.848v-8.106667s0-2.688-2.688-2.688v-2.688l-45.824-59.306666c-5.376-8.106667-18.858667-10.794667-26.922667-2.688-8.106667 5.376-10.794667 18.858667-2.730666 26.965333l21.589333 26.922667c-8.106667 0-16.213333-2.688-24.277333-2.688-210.176-24.234667-358.4-140.117333-358.4-272.170667 0-48.512 18.858667-94.293333 56.618666-134.741333 5.376-8.106667 5.376-21.546667-2.730666-26.922667-8.106667-8.106667-18.858667-5.418667-26.922667 2.688C56.618667 503.893333 34.986667 557.824 34.986667 614.4c0 150.912 161.706667 282.965333 388.053333 309.888 10.752 0 21.546667 2.688 32.341333 2.688l-24.277333 32.341333a20.736 20.736 0 0 0 13.482667 32.341334c5.376 0 10.794667-2.688 16.170666-8.106667l45.824-59.264v-8.064c2.688-2.688 5.376-2.688 5.376-5.418667z" p-id="1791"></path></svg>
\ No newline at end of file

src/icons/svg/collect-s.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="1661508484412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2637" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28"><path d="M519.2 807.2l255.2 133.6c12 6.4 25.6-4 23.2-16.8L748.8 640c-0.8-4.8 0.8-10.4 4.8-14.4L960 424.8c9.6-9.6 4-25.6-8.8-27.2l-284.8-41.6c-5.6-0.8-9.6-4-12-8.8l-128-257.6c-5.6-12-23.2-12-28.8 0L370.4 348c-2.4 4.8-7.2 8-12 8.8L73.6 398.4c-13.6 1.6-18.4 17.6-8.8 27.2l206.4 200.8c4 4 5.6 8.8 4.8 14.4l-48.8 284c-2.4 12.8 11.2 23.2 23.2 16.8L505.6 808c4-3.2 8.8-3.2 13.6-0.8z" p-id="2638"></path></svg>
\ No newline at end of file

src/icons/svg/collect.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="1657871872507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13498" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
-</style></defs><path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z" p-id="13499"></path></svg>
\ No newline at end of file
+<?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="1661508487793" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2779" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28"><path d="M946.44567 407.179676c-3.706415-11.056823-13.268188-19.154245-24.823362-20.929682l-263.117606-40.614L540.930913 93.91802c-5.108345-10.93198-16.071024-17.939581-28.155247-17.971303-0.030699 0-0.062422 0-0.062422 0-12.021801 0-22.985504 6.945179-28.155247 17.84646L365.79001 345.247138l-263.917832 39.507806c-11.399631 1.961678-20.774139 10.060123-24.355711 21.054525-3.613294 10.963703-0.778736 23.047926 7.257288 31.332612l191.202717 196.684568-45.6282 277.132808c-1.930979 11.741415 3.0208 23.608697 12.769838 30.491455 9.717316 6.882757 22.549575 7.630794 32.983205 1.868557l235.366565-129.47177 234.868215 130.282229c4.703115 2.616594 9.904581 3.924379 15.106046 3.924379 6.291287 0 12.551874-1.868557 17.877159-5.699816 9.748015-6.852058 14.763239-18.687618 12.862959-30.460756L747.488339 634.635061l191.669344-195.84341C947.286828 430.476265 950.121386 418.2365 946.44567 407.179676zM691.986257 602.337471c-6.882757 7.039323-10.060123 16.974603-8.471952 26.722618l37.000706 229.480508L526.666024 751.025908c-9.343809-5.232165-20.74344-5.232165-30.117948-0.062422L302.262138 857.856006l37.779442-229.387387c1.588171-9.717316-1.52575-19.652596-8.40953-26.754341L170.703847 436.176081l220.156142-31.686676c2.191922-0.378623 4.288676-0.980327 6.274914-1.771343 7.674796-2.63092 14.32117-8.233522 18.061354-16.156982l97.392144-206.183919 96.550986 206.712969c4.422729 9.406231 13.205766 16.008602 23.483854 17.596773l219.638349 33.886785L691.986257 602.337471z" p-id="2780"></path></svg>
\ No newline at end of file

src/icons/svg/enlarge.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="1661304913948" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8136" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z" p-id="8137"></path><path d="M625.792 448H512v-112a32 32 0 0 0-64 0V448h-112a32 32 0 0 0 0 64H448v112a32 32 0 1 0 64 0V512h113.792a32 32 0 1 0 0-64z" p-id="8138"></path></svg>
\ No newline at end of file

src/icons/svg/fullScreen.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="1661328618904" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1851" xmlns:xlink="http://www.w3.org/1999/xlink" width="239.84375" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M843.1616 68.266667H989.866667a170.666667 170.666667 0 0 1 170.666666 170.666666v152.8832a34.133333 34.133333 0 1 0 68.266667 0V238.933333a238.933333 238.933333 0 0 0-238.933333-238.933333h-146.705067a34.133333 34.133333 0 0 0 0 68.266667zM1160.533333 629.3504V785.066667a170.666667 170.666667 0 0 1-170.666666 170.666666h-123.5968a34.133333 34.133333 0 0 0 0 68.266667H989.866667a238.933333 238.933333 0 0 0 238.933333-238.933333v-155.716267a34.133333 34.133333 0 1 0-68.266667 0zM393.4208 955.733333H238.933333a170.666667 170.666667 0 0 1-170.666666-170.666666v-155.136a34.133333 34.133333 0 0 0-68.266667 0V785.066667a238.933333 238.933333 0 0 0 238.933333 238.933333h154.487467a34.133333 34.133333 0 0 0 0-68.266667zM68.266667 393.045333V238.933333a170.666667 170.666667 0 0 1 170.666666-170.666666h147.933867a34.133333 34.133333 0 0 0 0-68.266667H238.933333a238.933333 238.933333 0 0 0-238.933333 238.933333v154.112a34.133333 34.133333 0 1 0 68.266667 0z" p-id="1852"></path></svg>
\ No newline at end of file

src/icons/svg/jianjie.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="1661222716400" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8472" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M185.98250762 944.5510206C124.4518956 907.81632617 126.28863037 918.83673477 126.28863037 509.24489786 126.28863037 146.4897957 126.28863037 137.30612276 145.57434453 113.42857168 185.06414023 62.91836738 192.4110793 62 512.00291622 62c326.02040859 0 333.36734677 0.91836739 367.34693818 57.85714248 17.4489794 27.5510206 18.36734678 48.67346953 18.36734677 390.30612275 0 398.57142832 0 398.57142832-57.85714248 433.46938799-27.5510206 17.4489794-47.75510214 18.36734678-327.85714248 18.36734678-274.59183691 0-300.30612276-1.83673477-326.0204086-17.4489794z m573.97959228-143.26530644v-22.95918369H512.92128359c-190.10204122 0-247.95918369 2.75510214-251.63265322 11.93877597-11.02040859 32.14285752 0 33.97959141 251.63265322 33.97959141h247.04081631v-22.95918369z m0-192.85714249v-22.95918368H512.92128359c-190.10204122 0-247.95918369 2.75510214-251.63265322 11.93877509-11.02040859 32.14285752 0 33.97959141 251.63265322 33.97959229h247.04081631v-22.9591837z m0-192.85714335v-22.95918369H512.92128359c-190.10204122 0-247.95918369 2.75510214-251.63265322 11.93877597-11.02040859 32.14285752 0 33.97959141 251.63265322 33.97959141h247.04081631v-22.95918369zM502.81924238 222.71428584v-22.9591837H384.3498544c-87.24489785 0-120.30612276 2.75510214-123.06122403 11.9387751-10.10204122 30.30612276 3.67346953 33.97959141 123.06122403 33.97959229h118.46938798v-22.95918369z" p-id="8473"></path></svg>
\ No newline at end of file

src/icons/svg/keyword.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="1661225574756" class="icon" viewBox="0 0 1048 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9316" xmlns:xlink="http://www.w3.org/1999/xlink" width="204.6875" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M813.70567198 461.89602354c9.07430273 31.29132128 13.94384062 64.36927793 13.94384062 98.58645878 0 195.14037656-158.19503115 353.33540771-353.3319 353.33540771-195.15000058 0-353.34503174-158.19503115-353.34503174-353.33540771 0-195.13776797 158.19503115-353.33540771 353.34503174-353.33540771 31.18329844 0 61.41976348 4.04565557 90.22100009 11.63031592l15.87276739-45.63487003c-33.79642558-9.23593183-69.36887373-14.17139737-106.09376748-14.17139735-221.75976533 0-401.5209832 179.76391612-401.5209832 401.51135917 0 221.75364903 179.7613084 401.51747549 401.5209832 401.51747549 221.74654394 0 401.51396777-179.76391612 401.51396777-401.51747549 0-40.41041573-5.9762918-79.42428018-17.08313643-116.21240419L813.70567198 461.89602354zM474.31761348 415.9361876c7.17172998 0 14.21969766 0.53048672 21.11125342 1.5397418l16.0431205-46.12587188c-12.02381807-2.34869326-24.44284776-3.59243086-37.15437392-3.59243086-106.44067969 0-192.73196075 86.28768369-192.73196075 192.72485566 0 106.4441874 86.29128105 192.72836338 192.73196074 192.72836338 106.4441874 0 192.73196075-86.28417598 192.73196075-192.72836338 0-13.57498301-1.41148213-26.81879326-4.08082325-39.60056513l-45.72976025 17.8946956c1.0662794 7.08043711 1.62230977 14.32861875 1.62230977 21.70586953 0 79.83442178-64.71538066 144.54278701-144.54278702 144.54278702-79.83091406 0-144.5560084-64.70836523-144.55600839-144.54278702C329.76169472 480.65156826 394.48579941 415.9361876 474.31761348 415.9361876zM972.51375781 239.27199102L795.52460234 239.27199102 795.52460234 62l-48.18206865 48.78289073 0 0.20904784L619.18806464 239.27199102l-0.32762636 0 0 142.81418847L442.18658076 558.74774287l33.86226445 33.85264043 176.67651797-176.6641957L795.52460234 415.9361876l0-0.18796729 0.17655909 0.18798135 128.30556885-128.31519288-0.18447364-0.17305136 0.1844543 0L972.51375781 239.27199102zM777.16786133 367.75762666l-110.11922227 0L667.04863818 257.61818691l80.29385333-80.29996962 0 110.12888407 110.13678984 0L777.16786133 367.75762666z" p-id="9317"></path></svg>
\ No newline at end of file

src/icons/svg/music.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="1661334765143" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1911" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M628.905386 769.860427 628.905386 482.261019l169.381759-27.464779C771.308637 311.811584 645.822916 203.633728 494.993179 203.633728c-170.51599 0-308.738475 138.222485-308.738475 308.738875 0 170.516989 138.222485 308.738875 308.738475 308.738875 16.540186 0 32.756191-1.34209 48.589456-3.839397 12.391598-20.573051 34.625524-37.084856 62.858182-44.145869C613.897561 771.276467 621.429455 770.182208 628.905386 769.860427zM551.718919 228.830645l-33.079572 144.922942-33.078373 0-23.62798-144.922942C496.589896 211.497397 551.718919 228.830645 551.718919 228.830645zM494.993179 626.995689c-63.300482 0-114.622086-51.317007-114.622086-114.622886 0-63.30348 51.321604-114.622486 114.622086-114.622486 63.306478 0 114.622486 51.319006 114.622486 114.622486C609.615665 575.678482 558.299457 626.995689 494.993179 626.995689zM494.993179 424.978057c-48.20112 0-87.394147 39.192827-87.394147 87.394546 0 48.20112 39.192827 87.395546 87.394147 87.395546 48.201719 0 87.395946-39.194226 87.395946-87.395546C582.389124 464.170884 543.194698 424.978057 494.993179 424.978057zM494.993179 574.79708c-34.421063 0-62.423477-28.002015-62.423477-62.424476 0-34.421662 28.011408-62.424076 62.423477-62.424076 34.432055 0 62.416082 28.002414 62.416082 62.424076C557.409061 546.795265 529.425034 574.79708 494.993179 574.79708zM534.528574 870.531771c1.499983 8.297374 4.789753 16.008146 9.524542 22.939447-16.073102 2.058604-32.429013 3.239803-49.050144 3.239803-211.934708 0-384.347812-172.417701-384.347812-384.338419 0-211.922716 172.413104-384.338419 384.338019-384.338419 188.118456 0 345.001689 135.905456 377.892189 314.664258l-37.310503 6.059292c-29.969681-160.790984-171.236502-282.919381-340.581686-282.919381-191.084445 0-346.53365 155.451604-346.53365 346.53425 0 191.080048 155.449205 346.53425 346.53365 346.53425 12.796724 0 25.414169-0.748493 37.859731-2.104573C532.968631 861.361189 533.461497 865.948079 534.528574 870.531771zM912.096583 463.425989l0 333.227272c0 27.59629-20.573051 49.609165-52.658098 57.716668-35.234911 8.736077-69.250848-6.021917-75.997274-33.022611-6.760416-27.057655 16.31294-56.065787 51.53386-64.879811 15.920206-3.931335 31.587384-3.128879 44.698494 1.494986L879.673565 557.20001l-180.148459 32.927675-0.834434 249.757065-0.036975 0c-0.156894 23.646767-21.482435 46.868223-52.156438 54.45388-34.814196 8.759061-71.280472-7.807706-75.193819-32.597899-6.691463-26.747865 16.124068-55.470191 51.00222-64.201272 15.699356-3.904353 31.039755-3.119885 43.933013 1.402049L666.238674 503.300354 912.096583 463.425989z" p-id="1912"></path></svg>
\ No newline at end of file

src/icons/svg/mz-download.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="1661484374544" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2417" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 955.733333c-213.333333 0-384-170.666667-384-384 0-93.866667 34.133333-183.466667 93.866667-251.733333 8.533333-12.8 25.6-12.8 38.4-4.266667 12.8 8.533333 12.8 25.6 4.266666 38.4-51.2 59.733333-81.066667 136.533333-81.066666 217.6 0 183.466667 149.333333 328.533333 328.533333 328.533334s328.533333-149.333333 328.533333-328.533334c0-76.8-29.866667-153.6-76.8-213.333333-8.533333-12.8-8.533333-29.866667 4.266667-38.4 12.8-8.533333 29.866667-8.533333 38.4 4.266667 59.733333 68.266667 89.6 157.866667 89.6 247.466666 0 213.333333-170.666667 384-384 384z" p-id="2418"></path><path d="M452.266667 166.4c4.266667 136.533333 12.8 268.8 17.066666 405.333333-8.533333-12.8-21.333333-29.866667-38.4-46.933333-17.066667-12.8-25.6-17.066667-46.933333-34.133333-55.466667-38.4-72.533333-55.466667-76.8-46.933334-4.266667 8.533333 4.266667 38.4 17.066667 59.733334 8.533333 12.8 12.8 21.333333 17.066666 21.333333 17.066667 17.066667 34.133333 38.4 55.466667 51.2 21.333333 17.066667 55.466667 72.533333 128 243.2 0-12.8 4.266667-29.866667 4.266667-46.933333 4.266667-34.133333 4.266667-51.2 8.533333-72.533334 0-12.8 4.266667-34.133333 12.8-59.733333 21.333333-25.6 38.4-42.666667 51.2-51.2 12.8-8.533333 21.333333-12.8 34.133333-17.066667 17.066667-8.533333 29.866667-12.8 55.466667-21.333333 51.2-21.333333 51.2-17.066667 51.2-21.333333 17.066667-8.533333 42.666667-25.6 68.266667-64 0 0-46.933333 21.333333-98.133334 29.866666-29.866667 4.266667-29.866667 0-59.733333 4.266667-21.333333 4.266667-42.666667 8.533333-64 21.333333-12.8 8.533333-29.866667 21.333333-51.2 46.933334-17.066667-238.933333-17.066667-354.133333-8.533333-396.8 0-4.266667 4.266667-25.6-4.266667-42.666667-12.8-25.6-51.2-29.866667-64 0-12.8 8.533333-12.8 29.866667-8.533333 38.4z" p-id="2419"></path></svg>
\ No newline at end of file

src/icons/svg/mz-fh.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="1661484386421" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2985" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M584.533333 499.2c0 12.8 4.266667 29.866667 12.8 42.666667 4.266667 8.533333-4.266667 34.133333-12.8 38.4-21.333333 8.533333-21.333333-12.8-25.6-25.6-8.533333-29.866667-25.6-38.4-55.466666-21.333334-25.6 12.8-46.933333 34.133333-68.266667 51.2-21.333333 21.333333-21.333333 68.266667 4.266667 89.6 17.066667 17.066667 34.133333 29.866667 55.466666 42.666667 42.666667 25.6 85.333333 21.333333 123.733334-12.8 8.533333-8.533333 17.066667-17.066667 29.866666-25.6 17.066667-12.8 29.866667-8.533333 38.4 12.8 21.333333 51.2 59.733333 68.266667 110.933334 59.733333 34.133333-4.266667 68.266667 8.533333 98.133333 34.133334 8.533333 8.533333 21.333333 12.8 34.133333 21.333333 25.6-68.266667-12.8-102.4-46.933333-136.533333-55.466667-51.2-115.2-93.866667-179.2-136.533334-17.066667-12.8-25.6-21.333333-25.6-34.133333" p-id="2986"></path><path d="M584.533333 516.266667c0-12.8 4.266667-29.866667 12.8-42.666667 4.266667-8.533333-4.266667-34.133333-12.8-38.4-21.333333-8.533333-21.333333 12.8-25.6 25.6-8.533333 29.866667-29.866667 38.4-55.466666 21.333333-25.6-12.8-46.933333-34.133333-68.266667-51.2-21.333333-21.333333-17.066667-68.266667 4.266667-89.6 17.066667-17.066667 38.4-29.866667 55.466666-42.666666 42.666667-25.6 85.333333-21.333333 123.733334 12.8 8.533333 8.533333 17.066667 17.066667 29.866666 25.6 17.066667 12.8 29.866667 8.533333 38.4-8.533334 21.333333-51.2 59.733333-68.266667 110.933334-59.733333 34.133333 4.266667 68.266667-8.533333 98.133333-34.133333 8.533333-8.533333 21.333333-12.8 34.133333-21.333334 25.6 68.266667-12.8 102.4-46.933333 136.533334-55.466667 51.2-119.466667 93.866667-179.2 136.533333-17.066667 12.8-25.6 21.333333-25.6 29.866667M456.533333 507.733333c0-8.533333-8.533333-12.8-21.333333-17.066666-8.533333-8.533333-34.133333-21.333333-46.933333-42.666667-8.533333-17.066667-4.266667-21.333333-17.066667-29.866667 0 0-8.533333-8.533333-25.6-12.8-25.6-4.266667-128 34.133333-256 102.4 128 68.266667 230.4 106.666667 256 102.4 17.066667 0 29.866667-12.8 29.866667-12.8 12.8-8.533333 8.533333-17.066667 17.066666-34.133333s12.8-21.333333 46.933334-38.4c8.533333-4.266667 12.8-12.8 17.066666-17.066667z" p-id="2987"></path></svg>
\ No newline at end of file

src/icons/svg/mz-fx.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="1661484383322" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2843" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M469.333333 913.066667c-213.333333 0-384-170.666667-384-384s170.666667-384 384-384c12.8 0 25.6 12.8 25.6 25.6s-12.8 29.866667-25.6 29.866666c-183.466667 0-328.533333 149.333333-328.533333 328.533334s149.333333 328.533333 328.533333 328.533333 328.533333-149.333333 328.533334-328.533333c0-12.8 12.8-25.6 25.6-25.6s25.6 12.8 25.6 25.6c4.266667 213.333333-170.666667 384-379.733334 384z" p-id="2844"></path><path d="M640 123.733333c-4.266667 4.266667-34.133333 21.333333-38.4 51.2-8.533333 34.133333 12.8 72.533333 42.666667 85.333334 12.8 8.533333 38.4 8.533333 51.2-4.266667 4.266667-8.533333 8.533333-17.066667 8.533333-29.866667 0-4.266667-4.266667-12.8-4.266667-12.8 0-4.266667-4.266667-8.533333-8.533333-12.8-4.266667-4.266667-8.533333-4.266667-12.8-4.266666h-8.533333c-4.266667 4.266667-8.533333 4.266667-12.8 8.533333-4.266667 4.266667-8.533333 8.533333-12.8 8.533333-4.266667 0-8.533333-8.533333-8.533334-12.8-8.533333-17.066667 0-34.133333 0-34.133333 4.266667-17.066667 17.066667-21.333333 25.6-25.6 4.266667 0 17.066667-8.533333 29.866667-4.266667 8.533333 0 12.8 4.266667 12.8 4.266667 8.533333 4.266667 12.8 8.533333 17.066667 8.533333 4.266667 12.8 8.533333 17.066667 12.8 21.333334 4.266667 8.533333 17.066667 21.333333 17.066666 38.4 0 4.266667 0 8.533333-4.266666 17.066666l-25.6 38.4c-4.266667 4.266667-4.266667 8.533333 0 8.533334 0 0 4.266667 4.266667 8.533333 4.266666 17.066667 0 34.133333-4.266667 46.933333-4.266666 8.533333 0 12.8 4.266667 17.066667 4.266666 17.066667 8.533333 21.333333 21.333333 25.6 34.133334 0 4.266667 4.266667 8.533333 4.266667 17.066666v17.066667s0 8.533333-4.266667 12.8c-4.266667 12.8-17.066667 21.333333-21.333333 21.333333-4.266667 4.266667-17.066667 8.533333-34.133334 8.533334 0 0-21.333333-4.266667-29.866666-17.066667 0-4.266667-4.266667-8.533333-4.266667-12.8 0-4.266667 4.266667-4.266667 12.8-8.533333 8.533333 0 8.533333 0 12.8-4.266667l4.266667-4.266667c8.533333 4.266667 8.533333 0 8.533333-4.266666 0-8.533333-4.266667-12.8-4.266667-17.066667l-8.533333-8.533333c-8.533333-4.266667-21.333333-8.533333-29.866667-4.266667-17.066667 4.266667-29.866667 25.6-34.133333 42.666667-4.266667 34.133333 21.333333 68.266667 55.466667 81.066666 29.866667 8.533333 59.733333-4.266667 64-8.533333 8.533333-4.266667 29.866667-17.066667 38.4-38.4 4.266667-12.8 4.266667-29.866667 4.266666-34.133333 0-12.8-4.266667-25.6-4.266666-34.133334 0-4.266667 0-4.266667-4.266667-8.533333 0-4.266667-4.266667-4.266667 0-8.533333 0-4.266667 4.266667-4.266667 4.266667-4.266667 12.8-8.533333 68.266667-68.266667 85.333333-123.733333 0-4.266667 4.266667-8.533333 4.266667-17.066667-8.533333-4.266667-12.8-4.266667-17.066667-8.533333-51.2-12.8-136.533333 4.266667-149.333333 12.8 0 0-4.266667 4.266667-4.266667 0 0 0-4.266667 0-4.266667-4.266667s-4.266667-4.266667-4.266666-8.533333c-4.266667-4.266667-12.8-12.8-25.6-21.333334-4.266667-4.266667-17.066667-8.533333-34.133334-12.8-29.866667-4.266667-51.2 8.533333-59.733333 12.8" p-id="2845"></path><path d="M541.866667 294.4c-8.533333 4.266667-8.533333 8.533333-8.533334 17.066667 4.266667 8.533333 12.8 12.8 21.333334 4.266666 12.8-4.266667 29.866667 0 38.4 8.533334-34.133333 0-68.266667 12.8-98.133334 34.133333-38.4 25.6-64 68.266667-72.533333 115.2 0 25.6 0 38.4 4.266667 51.2 0 8.533333 8.533333 17.066667 17.066666 17.066667s17.066667-8.533333 17.066667-21.333334v-38.4c4.266667-38.4 25.6-68.266667 55.466667-93.866666 25.6-21.333333 59.733333-29.866667 93.866666-25.6 0 12.8-4.266667 21.333333-12.8 29.866666-8.533333 8.533333-4.266667 17.066667 0 21.333334 4.266667 4.266667 8.533333 4.266667 12.8 0 25.6-42.666667 46.933333-81.066667 72.533334-123.733334l-140.8 4.266667z" p-id="2846"></path></svg>
\ No newline at end of file

src/icons/svg/mz-like-s.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="1661484392351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3266" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M874.666667 209.066667c-89.6-89.6-230.4-89.6-320 0L507.733333 256 469.333333 213.333333C384 128 238.933333 128 149.333333 213.333333c-89.6 89.6-89.6 230.4 0 320 119.466667 115.2 238.933333 230.4 358.4 349.866667 59.733333-55.466667 115.2-110.933333 174.933334-166.4l187.733333-187.733333c89.6-89.6 89.6-234.666667 4.266667-320zM512 537.6c-76.8 0-136.533333-59.733333-136.533333-136.533333s59.733333-136.533333 136.533333-136.533334c46.933333 0 89.6 21.333333 115.2 59.733334 17.066667 21.333333 25.6 51.2 25.6 76.8 0 76.8-64 136.533333-140.8 136.533333z" p-id="3267"></path><path d="M576 358.4c-12.8-21.333333-38.4-34.133333-64-34.133333-42.666667 0-76.8 34.133333-76.8 76.8s34.133333 76.8 76.8 76.8 76.8-34.133333 76.8-76.8c4.266667-17.066667 0-29.866667-12.8-42.666667z" p-id="3268"></path></svg>
\ No newline at end of file

src/icons/svg/mz-like.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="1661484377255" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2558" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M507.733333 883.2c-8.533333 0-17.066667-4.266667-21.333333-8.533333l-332.8-324.266667c-93.866667-93.866667-93.866667-247.466667 0-337.066667 93.866667-93.866667 243.2-93.866667 337.066667 0l17.066666 17.066667 21.333334-21.333333c93.866667-93.866667 243.2-93.866667 337.066666 0C913.066667 256 938.666667 315.733333 938.666667 379.733333s-25.6 123.733333-68.266667 170.666667L691.2 725.333333l-162.133333 153.6c-4.266667 4.266667-12.8 4.266667-21.333334 4.266667zM324.266667 204.8c-46.933333 0-93.866667 17.066667-128 51.2-68.266667 68.266667-68.266667 183.466667 0 256l311.466666 302.933333 140.8-132.266666 174.933334-174.933334c68.266667-68.266667 68.266667-183.466667 0-256-68.266667-68.266667-183.466667-68.266667-256 0l-42.666667 42.666667c-12.8 12.8-29.866667 12.8-42.666667 0l-29.866666-38.4c-34.133333-34.133333-81.066667-51.2-128-51.2z m524.8 320z" p-id="2559"></path><path d="M512 524.8c-76.8 0-136.533333-59.733333-136.533333-136.533333s59.733333-136.533333 136.533333-136.533334c46.933333 0 89.6 21.333333 115.2 59.733334 17.066667 21.333333 25.6 51.2 25.6 76.8 0 72.533333-64 136.533333-140.8 136.533333z m0-217.6c-42.666667 0-76.8 34.133333-76.8 76.8s34.133333 76.8 76.8 76.8 76.8-34.133333 76.8-76.8c0-17.066667-4.266667-29.866667-12.8-42.666667-12.8-21.333333-38.4-34.133333-64-34.133333z" p-id="2560"></path><path d="M512 388.266667m-38.4 0a38.4 38.4 0 1 0 76.8 0 38.4 38.4 0 1 0-76.8 0Z" p-id="2561"></path></svg>
\ No newline at end of file

src/icons/svg/mz-list.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="1661484380168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2700" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M200.533333 311.466667C162.133333 311.466667 128 277.333333 128 234.666667s34.133333-76.8 76.8-76.8 76.8 34.133333 76.8 76.8c-4.266667 42.666667-38.4 76.8-81.066667 76.8z m0-106.666667c-17.066667 0-29.866667 12.8-29.866666 29.866667 0 17.066667 12.8 29.866667 29.866666 29.866666 17.066667 0 29.866667-12.8 29.866667-29.866666 0-12.8-12.8-29.866667-29.866667-29.866667z" p-id="2701"></path><path d="M200.533333 337.066667c29.866667 0 59.733333-17.066667 72.533334-38.4 0 34.133333-34.133333 64-72.533334 64S132.266667 332.8 128 298.666667c17.066667 21.333333 42.666667 38.4 72.533333 38.4zM200.533333 785.066667c-42.666667 0-76.8-34.133333-76.8-76.8s34.133333-76.8 76.8-76.8 76.8 34.133333 76.8 76.8-34.133333 76.8-76.8 76.8z m0-102.4c-17.066667 0-29.866667 12.8-29.866666 29.866666s12.8 29.866667 29.866666 29.866667c17.066667 0 29.866667-12.8 29.866667-29.866667s-12.8-29.866667-29.866667-29.866666z" p-id="2702"></path><path d="M200.533333 810.666667c29.866667 0 59.733333-17.066667 72.533334-38.4-4.266667 38.4-38.4 64-72.533334 64S132.266667 810.666667 128 772.266667c17.066667 21.333333 42.666667 38.4 72.533333 38.4zM200.533333 546.133333C162.133333 546.133333 128 512 128 469.333333s34.133333-76.8 76.8-76.8 76.8 34.133333 76.8 76.8-38.4 76.8-81.066667 76.8z m0-102.4c-17.066667 0-29.866667 12.8-29.866666 29.866667s12.8 29.866667 29.866666 29.866667c17.066667 0 29.866667-12.8 29.866667-29.866667s-12.8-29.866667-29.866667-29.866667z" p-id="2703"></path><path d="M200.533333 571.733333c29.866667 0 59.733333-17.066667 72.533334-38.4 0 34.133333-34.133333 64-72.533334 64s-68.266667-29.866667-72.533333-64c17.066667 21.333333 42.666667 38.4 72.533333 38.4zM857.6 320H384c-21.333333 0-38.4-17.066667-38.4-38.4v-17.066667c0-21.333333 17.066667-38.4 38.4-38.4h473.6c21.333333 0 38.4 17.066667 38.4 38.4v12.8c0 25.6-17.066667 42.666667-38.4 42.666667zM857.6 554.666667H384c-21.333333 0-38.4-17.066667-38.4-38.4v-12.8c0-21.333333 17.066667-38.4 38.4-38.4h473.6c21.333333 0 38.4 17.066667 38.4 38.4v12.8c0 21.333333-17.066667 38.4-38.4 38.4zM857.6 793.6H384c-21.333333 0-38.4-17.066667-38.4-38.4v-12.8c0-21.333333 17.066667-38.4 38.4-38.4h473.6c21.333333 0 38.4 17.066667 38.4 38.4v12.8c0 21.333333-17.066667 38.4-38.4 38.4z" p-id="2704"></path></svg>
\ No newline at end of file

src/icons/svg/mz-play-s.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="1661484389558" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3126" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 85.333333C277.333333 85.333333 85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667S746.666667 85.333333 512 85.333333zM260.266667 580.266667c-4.266667-4.266667 0-12.8 12.8-17.066667 17.066667-4.266667 34.133333-21.333333 34.133333-42.666667s-12.8-38.4-34.133333-42.666666c-8.533333 0-17.066667-8.533333-12.8-17.066667 0-4.266667 8.533333-8.533333 12.8-8.533333l119.466666 68.266666c-38.4 21.333333-81.066667 46.933333-119.466666 68.266667-8.533333-4.266667-12.8-4.266667-12.8-8.533333zM768 512c-8.533333 8.533333-12.8 17.066667-17.066667 21.333333-55.466667 51.2-166.4 89.6-183.466666 89.6 0 0-4.266667 0-8.533334 4.266667-4.266667 0-4.266667 4.266667-4.266666 12.8 0 4.266667 0 8.533333-4.266667 12.8 0 8.533333-8.533333 29.866667-17.066667 42.666667-4.266667 8.533333-12.8 25.6-29.866666 38.4-29.866667 21.333333-64 21.333333-72.533334 21.333333-8.533333 0-51.2 0-81.066666-34.133333-34.133333-34.133333-38.4-98.133333-8.533334-132.266667 12.8-17.066667 42.666667-34.133333 68.266667-29.866667 12.8 4.266667 21.333333 12.8 29.866667 25.6 4.266667 8.533333 4.266667 12.8 4.266666 17.066667 0 4.266667 0 12.8-4.266666 21.333333s-8.533333 8.533333-12.8 12.8c-4.266667 4.266667-8.533333 4.266667-8.533334 4.266667-8.533333 0-12.8 0-21.333333-4.266667s-17.066667-4.266667-17.066667 0c-4.266667 4.266667-4.266667 17.066667-4.266666 21.333334 0 25.6 21.333333 38.4 21.333333 42.666666 17.066667 12.8 38.4 12.8 46.933333 12.8 4.266667 0 21.333333 0 38.4-12.8 8.533333-4.266667 12.8-12.8 12.8-12.8 4.266667-8.533333 8.533333-17.066667 12.8-21.333333 4.266667-12.8 4.266667-21.333333 4.266667-25.6 0-12.8 4.266667-38.4-8.533333-59.733333 0-4.266667-4.266667-12.8-17.066667-17.066667-21.333333-12.8-38.4-21.333333-59.733333-29.866667-4.266667-4.266667-8.533333-4.266667-8.533334-8.533333s4.266667-4.266667 8.533334-8.533333c21.333333-8.533333 38.4-21.333333 59.733333-29.866667 8.533333-4.266667 12.8-17.066667 17.066667-17.066667 12.8-21.333333 8.533333-42.666667 8.533333-59.733333 0-4.266667 0-17.066667-4.266667-25.6-4.266667-8.533333-4.266667-12.8-12.8-21.333333 0 0-4.266667-8.533333-12.8-12.8-17.066667-12.8-34.133333-12.8-38.4-12.8-8.533333 0-25.6 0-46.933333 12.8 0 0-21.333333 17.066667-21.333333 42.666666 0 4.266667 0 17.066667 4.266666 21.333334 4.266667 4.266667 12.8 4.266667 21.333334 0s12.8-4.266667 21.333333-4.266667c0 0 4.266667 0 8.533333 4.266667 0 0 8.533333 4.266667 12.8 8.533333 4.266667 8.533333 4.266667 17.066667 4.266667 21.333333 0 4.266667 0 8.533333-4.266667 17.066667-17.066667 0-29.866667 8.533333-38.4 12.8-25.6 8.533333-55.466667-8.533333-68.266666-25.6-29.866667-38.4-25.6-98.133333 8.533333-136.533333 29.866667-34.133333 72.533333-34.133333 81.066667-34.133334 8.533333 0 42.666667 0 72.533333 21.333334 17.066667 12.8 25.6 29.866667 29.866667 38.4 8.533333 12.8 12.8 34.133333 17.066666 42.666666 0 4.266667 0 8.533333 4.266667 12.8 0 8.533333 0 8.533333 4.266667 12.8 4.266667 4.266667 8.533333 4.266667 8.533333 4.266667 21.333333 0 132.266667 34.133333 187.733333 85.333333 4.266667 0 8.533333 8.533333 17.066667 17.066667z" p-id="3127"></path></svg>
\ No newline at end of file

src/icons/svg/mz-play.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="1661484370707" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2275" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 938.666667C277.333333 938.666667 85.333333 746.666667 85.333333 512S277.333333 85.333333 512 85.333333s426.666667 192 426.666667 426.666667-192 426.666667-426.666667 426.666667z m0-793.6c-200.533333 0-366.933333 166.4-366.933333 366.933333s166.4 366.933333 366.933333 366.933333 366.933333-166.4 366.933333-366.933333-166.4-366.933333-366.933333-366.933333z" p-id="2276"></path><path d="M750.933333 512c-8.533333-8.533333-12.8-17.066667-17.066666-17.066667-51.2-46.933333-153.6-81.066667-174.933334-81.066666h-8.533333s-4.266667-4.266667-4.266667-8.533334v-12.8c0-8.533333-8.533333-25.6-17.066666-38.4-4.266667-8.533333-12.8-21.333333-29.866667-34.133333C469.333333 298.666667 439.466667 298.666667 430.933333 298.666667c-8.533333 0-51.2 0-76.8 34.133333-29.866667 34.133333-34.133333 89.6-8.533333 123.733333 12.8 17.066667 38.4 34.133333 64 25.6 12.8-4.266667 21.333333-12.8 29.866667-25.6 4.266667-8.533333 4.266667-12.8 4.266666-17.066666 0-4.266667 0-12.8-4.266666-21.333334-4.266667-4.266667-8.533333-8.533333-12.8-8.533333 0-8.533333-4.266667-8.533333-8.533334-8.533333-8.533333 0-8.533333 0-17.066666 4.266666-8.533333 0-12.8 0-17.066667-4.266666-8.533333-4.266667-4.266667-12.8-4.266667-17.066667 0-21.333333 21.333333-38.4 21.333334-38.4 17.066667-12.8 34.133333-12.8 42.666666-12.8 4.266667 0 21.333333 0 38.4 12.8 8.533333 4.266667 12.8 12.8 12.8 12.8 4.266667 8.533333 8.533333 12.8 12.8 21.333333 4.266667 8.533333 4.266667 21.333333 4.266667 25.6 0 12.8 4.266667 34.133333-8.533333 55.466667 0 4.266667-4.266667 12.8-17.066667 17.066667-17.066667 8.533333-38.4 17.066667-55.466667 29.866666-4.266667 4.266667-8.533333 4.266667-8.533333 8.533334s4.266667 4.266667 8.533333 8.533333c17.066667 8.533333 38.4 17.066667 55.466667 29.866667 8.533333 4.266667 12.8 12.8 17.066667 17.066666 12.8 21.333333 8.533333 38.4 8.533333 55.466667 0 4.266667 0 12.8-4.266667 25.6-4.266667 8.533333-4.266667 12.8-8.533333 21.333333 0 0-4.266667 8.533333-12.8 12.8-17.066667 12.8-29.866667 12.8-38.4 12.8-8.533333 0-25.6 0-42.666667-12.8 0 0-21.333333-17.066667-21.333333-38.4 0-4.266667 0-12.8 4.266667-17.066666 4.266667-4.266667 8.533333-4.266667 17.066666 0s12.8 4.266667 17.066667 4.266666c0 0 4.266667 0 8.533333-4.266666 0 0 8.533333-4.266667 12.8-8.533334 4.266667-8.533333 4.266667-17.066667 4.266667-21.333333 0-4.266667 0-8.533333-4.266667-17.066667-8.533333-12.8-17.066667-21.333333-29.866666-25.6-21.333333-8.533333-51.2 8.533333-64 25.6-25.6 34.133333-21.333333 89.6 8.533333 123.733334 29.866667 29.866667 68.266667 34.133333 76.8 34.133333 8.533333 0 42.666667 0 68.266667-21.333333 17.066667-12.8 25.6-25.6 29.866666-34.133334 8.533333-12.8 12.8-29.866667 12.8-38.4v-12.8c0-4.266667 0-8.533333 4.266667-8.533333 4.266667-4.266667 8.533333-4.266667 8.533333-4.266667 17.066667 0 119.466667-34.133333 170.666667-81.066666 8.533333-17.066667 12.8-21.333333 21.333333-29.866667z" p-id="2277"></path><path d="M285.866667 452.266667c-8.533333 0-12.8 4.266667-12.8 8.533333s4.266667 12.8 12.8 12.8c17.066667 4.266667 29.866667 21.333333 29.866666 38.4 0 21.333333-12.8 34.133333-29.866666 38.4-8.533333 4.266667-12.8 12.8-8.533334 17.066667 0 4.266667 4.266667 4.266667 8.533334 8.533333 38.4-21.333333 72.533333-42.666667 110.933333-64l-110.933333-59.733333z" p-id="2278"></path></svg>
\ No newline at end of file

src/icons/svg/share2.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="1661222710493" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8192" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M397.184 642.112a192 192 0 1 1-10.144-270.464L554.592 262.4a144 144 0 1 1 36.8 52.416l-165.44 107.84c14.08 26.72 22.016 57.12 22.016 89.376a191.36 191.36 0 0 1-15.808 76.384l241.056 135.584a144 144 0 1 1-28.992 57.12l-247.072-138.976z" p-id="8193"></path></svg>
\ No newline at end of file

src/icons/svg/unit.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="1661225582636" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9736" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M475.7212211 634.97693577h-152.29668467a58.21867749 58.21867749 0 0 0-44.92963146 21.09372362A67.92179013 67.92179013 0 0 0 258.87774219 703.32060089v161.99979731A68.13272763 68.13272763 0 0 0 278.49490497 912.78127636a58.85148916 58.85148916 0 0 0 44.92963147 21.09372364h152.29668466a60.74992419 60.74992419 0 0 0 45.35150565-21.09372364 67.49991595 67.49991595 0 0 0 19.4062261-48.30462734v-161.15604813a67.49991595 67.49991595 0 0 0-19.4062261-48.09368986 60.11711252 60.11711252 0 0 0-45.35150565-21.09372362z m4.85155673-70.03116184A97.24206555 97.24206555 0 0 0 512.00242578 542.79736362 105.46861816 105.46861816 0 0 0 539.63520367 469.81308008V194.32904951A109.68736322 109.68736322 0 0 0 533.09614942 153.40722558a101.67174811 101.67174811 0 0 0-21.09372364-33.32808297 97.24206555 97.24206555 0 0 0-30.5858996-21.09372364A86.27332957 86.27332957 0 0 0 443.23688648 90.12605469H186.52627032A86.90614123 86.90614123 0 0 0 149.19037897 98.3526073a99.77331308 99.77331308 0 0 0-30.58589877 21.09372363A105.46861816 105.46861816 0 0 0 97.72169323 153.40722558 109.68736322 109.68736322 0 0 0 90.12795312 194.32904951V469.81308008a105.46861816 105.46861816 0 0 0 28.47652708 72.77334687 99.77331308 99.77331308 0 0 0 30.58589876 22.35934698 86.90614123 86.90614123 0 0 0 37.33589137 8.22655178h256.71061615a87.53895291 87.53895291 0 0 0 37.33589135-8.22655178z m434.53070618-271.26528635a59.06242584 59.06242584 0 0 0-45.14056814-21.09372364h-152.08574717a60.11711252 60.11711252 0 0 0-45.56244314 21.09372364 67.49991595 67.49991595 0 0 0-19.40622611 48.09368984v161.15604895a68.5546018 68.5546018 0 0 0 19.40622611 49.1483757 60.96086169 60.96086169 0 0 0 45.56244314 21.09372364H870.59572754a59.69523752 59.69523752 0 0 0 45.14056897-21.09372364 70.03116266 70.03116266 0 0 0 18.14060193-49.1483757v-161.15604895a68.3436643 68.3436643 0 0 0-18.77341443-48.09368984zM870.59572754 634.97693577h-152.71855884a60.11711252 60.11711252 0 0 0-45.56244314 21.09372362 67.49991595 67.49991595 0 0 0-19.40622611 48.09368985v161.99979813A67.49991595 67.49991595 0 0 0 672.31472556 912.78127636a60.96086169 60.96086169 0 0 0 45.56244314 21.09372364H870.59572754a59.69523752 59.69523752 0 0 0 45.14056897-21.09372364 68.7655393 68.7655393 0 0 0 18.14060193-47.46087816v-161.99979731a68.5546018 68.5546018 0 0 0-18.77341443-48.09368986 59.06242584 59.06242584 0 0 0-45.14056814-21.09372362z m0 0" p-id="9737"></path></svg>
\ No newline at end of file

src/icons/svg/wenxian.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="1661225580299" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9596" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.390625" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M954.8 756.8q4.5 27-11.25 48.6t-42.75 26.1l-108 17.1q-26.1 4.5-48.15-11.25t-26.55-42.75l-91.8-581.4q-1.8-13.5 1.35-25.65t10.35-22.5 18.45-17.1 24.75-9.45l107.1-17.1q27-4.5 48.6 11.7t26.1 43.2zM502.1 117.8q27 0 45.9 18.9t18.9 45.9l0 601.2q0 27-18.9 45.9t-45.9 18.9l-93.6 0q-27 0-45.9-18.9t-18.9-45.9l0-601.2q0-27 14.4-45.9t42.3-18.9l101.7 0zM502.1 571.4q9 0 15.3-8.55t6.3-20.25q0-12.6-6.3-20.7t-15.3-8.1l-93.6 0q-9 0-15.3 8.1t-6.3 20.7q0 11.7 6.3 20.25t15.3 8.55l93.6 0zM502.1 457.1q9 0 15.3-8.55t6.3-21.15-6.3-20.7-15.3-8.1l-93.6 0q-9 0-15.3 8.1t-6.3 20.7 6.3 21.15 15.3 8.55l93.6 0zM219.5 117.8q27 0 46.35 18.9t19.35 45.9l0 601.2q0 27-19.35 45.9t-46.35 18.9l-93.6 0q-27 0-46.35-18.9t-19.35-45.9l0-601.2q0-27 19.35-45.9t46.35-18.9l93.6 0zM129.5 342.8q-9.9 0-16.2 8.1t-6.3 20.7q0 11.7 6.3 20.25t16.2 8.55l86.4 0q9.9 0 15.75-8.55t5.85-20.25q0-12.6-5.85-20.7t-15.75-8.1l-86.4 0zM219.5 625.4q9.9 0 15.75-8.1t5.85-19.8q0-12.6-5.85-20.25t-15.75-7.65l-90 0q-9.9 0-16.2 7.65t-6.3 20.25q0 11.7 6.3 19.8t16.2 8.1l90 0zM219.5 514.7q9.9 0 15.75-8.1t5.85-20.7-5.85-20.7-15.75-8.1l-90 0q-9.9 0-16.2 8.1t-6.3 20.7 6.3 20.7 16.2 8.1l90 0z" p-id="9597"></path></svg>
\ No newline at end of file

src/icons/svg/zldq.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="1661222722693" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8612" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M884.1875 931.0625H139.8125a46.875 46.875 0 0 1-46.875-46.875l110.364375-348.75h0.4565625a28.59375 28.59375 0 1 1 53.131875 20.5659375c0.0346875 0 0.069375 0.009375 0.1040625 0.01125L149.1875 860.75a14.0625 14.0625 0 0 0 14.0625 14.0625h697.5a14.0625 14.0625 0 0 0 14.0625-14.0625L767.005625 556.0146875c0.0346875 0 0.069375-0.009375 0.1040625-0.01125A28.59375 28.59375 0 1 1 820.2415625 535.4375h0.4565625L931.0625 884.1875a46.875 46.875 0 0 1-46.875 46.875zM305.75 299.1875c0-113.90625 92.34375-206.25 206.25-206.25s206.25 92.34375 206.25 206.25c0 148.321875-206.25 519.375-206.25 519.375S305.75 447.509375 305.75 299.1875z m206.25-150a150 150 0 0 0-150 150c0 126.5625 150 406.875 150 406.875s150-280.3125 150-406.875a150 150 0 0 0-150-150zM418.25 317.9375a93.75 93.75 0 1 1 93.75 93.75 93.75 93.75 0 0 1-93.75-93.75z m131.25 0a37.5 37.5 0 1 0-37.5 37.5 37.5 37.5 0 0 0 37.5-37.5z" p-id="8613"></path></svg>
\ No newline at end of file

src/icons/svg/zldw.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="1661225565711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8894" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M839.04000031 854.40000031H803.19999969V536c0-43.51999969-27.84-81.6-69.43999969-94.87999969l-139.84000031-44.32000031v-107.68000031c0-51.19999969-41.59999969-92.80000031-92.79999938-92.79999938H279.36000031c-51.19999969 0-92.80000031 41.59999969-92.80000031 92.79999938V854.40000031H137.91999969c-17.59999969 0-31.99999969 14.4-31.99999969 31.99999969s14.4 31.99999969 31.99999969 31.99999969h701.12000062c17.59999969 0 31.99999969-14.4 31.99999969-31.99999969s-14.4-31.99999969-31.99999969-31.99999969z m-588.48 0V289.11999969c0-15.84 12.96-28.8 28.8-28.8h221.91999938c15.84 0 28.8 12.96 28.8 28.8V854.40000031H250.56000031z m343.35999938 0V464l120.48 38.23999969c14.88 4.63999969 24.79999969 18.24 24.80000062 33.92000062v318.39999938h-145.28000062z" p-id="8895"></path></svg>
\ No newline at end of file

src/icons/svg/zllx.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="1661222725755" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8752" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M517.46133333 431.55911111h369.32266667c12.85688889 0 23.32444445 10.46755555 23.32444445 23.32444444s-10.46755555 23.32444445-23.32444445 23.32444445H517.46133333c-12.85688889 0-23.32444445-10.46755555-23.32444444-23.32444445s10.46755555-23.32444445 23.32444444-23.32444444zM517.46133333 617.92711111h369.32266667c12.85688889 0 23.32444445 10.46755555 23.32444445 23.32444444s-10.46755555 23.32444445-23.32444445 23.32444445H517.46133333c-12.85688889 0-23.32444445-10.46755555-23.32444444-23.32444445 0-12.97066667 10.46755555-23.32444445 23.32444444-23.32444444zM517.46133333 804.18133333h369.32266667c12.85688889 0 23.32444445 10.46755555 23.32444445 23.32444445s-10.46755555 23.32444445-23.32444445 23.32444444H517.46133333c-12.85688889 0-23.32444445-10.46755555-23.32444444-23.32444444s10.46755555-23.32444445 23.32444444-23.32444445z" p-id="8753"></path><path d="M397.42577778 503.23911111H164.52266667c-13.88088889 0-25.03111111-11.264-25.03111112-25.03111111V245.30488889c0-13.76711111 11.15022222-25.03111111 25.03111112-25.03111111h232.90311111c13.88088889 0 25.03111111 11.264 25.03111111 25.03111111v232.78933333c0 13.88088889-11.15022222 25.14488889-25.03111111 25.14488889z m-207.872-50.06222222h182.84088889V270.336H189.55377778v182.84088889zM397.42577778 875.74755555H164.52266667c-13.88088889 0-25.03111111-11.264-25.03111112-25.0311111V617.92711111c0-13.76711111 11.15022222-25.03111111 25.03111112-25.03111111h232.90311111c13.88088889 0 25.03111111 11.264 25.03111111 25.03111111v232.90311111c0 13.76711111-11.15022222 24.91733333-25.03111111 24.91733333z m-207.872-50.06222222h182.84088889V642.95822222H189.55377778v182.72711111z" p-id="8754"></path><path d="M517.46133333 245.30488889h369.32266667c12.85688889 0 23.32444445 10.46755555 23.32444445 23.32444444s-10.46755555 23.32444445-23.32444445 23.32444445H517.46133333c-12.85688889 0-23.32444445-10.46755555-23.32444444-23.32444445s10.46755555-23.32444445 23.32444444-23.32444444z" p-id="8755"></path></svg>
\ No newline at end of file

src/icons/svg/zlxz.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="1661225572215" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9174" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M512 64C264.58 64 64 264.58 64 512s200.58 448 448 448 448-200.58 448-448S759.42 64 512 64z m295.57 743.57c-38.4 38.4-83.1 68.54-132.88 89.59C623.18 918.95 568.44 930 512 930s-111.18-11.05-162.7-32.84c-49.77-21.05-94.48-51.2-132.88-89.59-38.4-38.4-68.54-83.1-89.59-132.88C105.05 623.18 94 568.44 94 512s11.05-111.18 32.84-162.7c21.05-49.77 51.2-94.48 89.59-132.88 38.4-38.4 83.1-68.54 132.88-89.59C400.82 105.05 455.56 94 512 94s111.18 11.05 162.7 32.84c49.77 21.05 94.48 51.2 132.88 89.59 38.4 38.4 68.54 83.1 89.59 132.88C918.95 400.82 930 455.56 930 512s-11.05 111.18-32.84 162.7c-21.05 49.77-51.19 94.47-89.59 132.87z" p-id="9175"></path><path d="M508 349H380.4c-5.52 0-10 4.48-10 10v292.4H518V359c0-5.52-4.48-10-10-10z m-13.8 139.87c0 8.28-6.72 15-15 15h-70c-8.28 0-15-6.72-15-15 0-8.28 6.72-15 15-15h70c8.28 0 15 6.71 15 15z m-15-46.87h-70c-8.28 0-15-6.72-15-15 0-8.28 6.72-15 15-15h70c8.28 0 15 6.72 15 15 0 8.28-6.72 15-15 15zM643.6 489.4H548v162h105.6v-152c0-5.51-4.49-10-10-10z" p-id="9176"></path><path d="M512 192c-176.73 0-320 143.27-320 320s143.27 320 320 320 320-143.27 320-320-143.27-320-320-320z m171.6 489.4H340.4V359c0-22.09 17.91-40 40-40H508c22.09 0 40 17.91 40 40v100.4h95.6c22.09 0 40 17.91 40 40v182z" p-id="9177"></path></svg>
\ No newline at end of file

src/icons/svg/交流.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="1661225577930" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9456" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M700.53080036 417.73459981h-377.06160072a47.1327001 47.1327001 0 1 1 0-94.26540017h377.06160072a47.1327001 47.1327001 0 0 1 0 94.26540017z m0 188.53080038h-377.06160072a47.1327001 47.1327001 0 1 1 0-94.26540019h377.06160072a47.1327001 47.1327001 0 0 1 0 94.26540019z m-188.53080036 282.79620056a47.1327001 47.1327001 0 0 1-33.46421707-13.66848303L397.93886578 794.79620057H182.07109936a94.26540019 94.26540019 0 0 1-94.26540019-94.26540021V229.20379943a94.26540019 94.26540019 0 0 1 94.26540019-94.26540018h659.85780128a94.26540019 94.26540019 0 0 1 94.26540019 94.26540018v471.32700093a94.26540019 94.26540019 0 0 1-94.26540019 94.26540021h-216.33909342l-81.06824416 80.59691715A47.1327001 47.1327001 0 0 1 512 889.06160075zM182.07109936 229.20379943v471.32700093h235.66350045a47.1327001 47.1327001 0 0 1 33.46421708 13.66848303l60.3298561 60.80118314 61.27251012-60.80118314A47.1327001 47.1327001 0 0 1 606.26540019 700.53080036h235.66350045V229.20379943H182.07109936z" p-id="9457"></path></svg>
\ No newline at end of file

src/router/index.js

@@ -48,7 +48,7 @@ const routes = [
   },
   // 布展详情页
   {
-    path: '/display/:exhibitionId',
+    path: '/display/:themeType/:exhibitionId',
     name: 'displayDetail',
     component: () => import('@/views/display/Detail.vue'),
     meta: {

src/store/getters.js

@@ -10,6 +10,7 @@ const getters = {
 
   curPath: state => state.app.curPath,
   navBarFixed: state => state.app.navBarFixed,
-  showLoginDialog: state => state.app.showLoginDialog
+  showLoginDialog: state => state.app.showLoginDialog,
+  navbarStyle: state => state.app.navbarStyle
 }
 export default getters

src/store/modules/app.js

-
 const getDefaultState = () => {
   return {
     curPath: null,
     navBarFixed: false,
-    showLoginDialog: null
+    showLoginDialog: null,
+    navbarStyle: '1',//1-默认蓝色；2-中国风；3-红色
   }
 }
 
@@ -21,7 +21,10 @@ const mutations = {
   },
   OPEN_LOGIN_DIALOG: (state, showLoginDialog) => {
     state.showLoginDialog = showLoginDialog
-  }
+  },
+  CHANGE_NAV_COLOR: (state, themeStyle) => {
+    state.navbarStyle = themeStyle
+  },
 }
 
 export default {

src/utils/index.js

@@ -51,3 +51,35 @@ export function getFullUrl(url) {
   a.click();
   a.remove();
 }
+
+
+/**
+ * 增加千位分割符 
+ * @param num 
+ */
+export function addSeparator(num){
+  var res=num.toString().replace(/\d+/, function(n){ // 先提取整数部分
+       return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
+          return $1+",";
+        });
+  })
+  return res;
+}
+
+
+/**
+ * 增加万单位 
+ * @param num 
+ */
+export function formatNum(num) {
+	num = Number(num);
+  console.log(num);
+	if (num == 0) {
+		return num + '';
+	} else
+	if (num > 0 && num < 10000) {
+		return num + '';
+	} else {
+		return (num / 10000).toFixed(1) + 'w'; 
+	}
+}
\ No newline at end of file

src/views/culturalRelic/Detail.vue

 <!-- -->
 <template>
-  <div class="display-detail">
+  <div class="cr-detail">
     <div class="wrapper">
-      <div class="back">
-        <el-button
-          type="text"
-          icon="el-icon-arrow-left"
-          @click.native="handleBack"
-          >返回上页</el-button
-        >
+      <div class="back" @click="handleBack">
+        <svg-icon icon-class="mz-fh"></svg-icon>
+        <span>返回上页 </span>
       </div>
-      <el-row class="detail-container" :gutter="10">
+      <el-row class="cr-detail_info" :gutter="10">
         <el-col class="cr-images" :span="18">
           <el-carousel
             indicator-position="outside"
@@ -34,26 +30,13 @@
         </el-col>
         <el-col class="relic-info" :span="8">
           <div class="info-title">
-            <div
-              class="title-container"
-            >
-              <h3>
+            <div class="title">
               {{ CRDetail.name }}
-              </h3>
-              <span class="view-container">
-                <svg-icon
-                  icon-class="view"
-                  class="view-svg-icon"
-                ></svg-icon>
+            </div>
+            <div class="view-container">
+              <svg-icon icon-class="view" class="view-svg-icon"></svg-icon>
               <span class="view-text">{{ CRDetail.browseCount }}</span>
-              </span>
             </div>
-
-            <AudioPlayer
-              :url="$getFullUrl(CRDetail.audiosVo[0].url)"
-              ref="AudioPlayer"
-              v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
-            />
           </div>
           <div class="info-body">
             <div class="basic-info">
@@ -106,73 +89,130 @@
             :sourceType="'biz_cultural_relic'"
             @reload="loadDetail"
           />
+
+          <div
+            class="audio"
+            :style="{
+              animationPlayState: audioPlaying ? 'running' : 'paused',
+            }"
+            @click="handleClickAudio"
+            v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
+          >
+            <img src="@/assets/imgs/display/normal/music.png" alt="" />
+            <!-- <svg-icon icon-class="music"></svg-icon> -->
+            <AudioPlayer
+              style="display: none"
+              :url="$getFullUrl(CRDetail.audiosVo[0].url)"
+              ref="AudioPlayer"
+            />
+          </div>
         </el-col>
       </el-row>
 
-      <div class="margin-bottom-32">
+      <div class="cr-detail_intro">
         <CustomTitle text="文物简介" />
-        <div class="intro text-indent">
+        <div class="intro-and-video">
+          <div class="intro-content wow animate__animated animate__fadeInLeft">
             {{ CRDetail.intro }}
           </div>
-      </div>
-
-      <div class="relate-book margin-bottom-32">
-        <CustomTitle text="相关文献" />
           <div
-          class="book-item"
-          v-for="(item, index) in CRDetail.literatureVo"
-          :key="index"
+            class="intro-video wow animate__animated animate__fadeInRight"
+            v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
+          >
+            <el-carousel trigger="click" height="320px">
+              <el-carousel-item
+                v-for="item in CRDetail.videosVo"
+                :key="item.fileId"
               >
-          <span class="mr-20">{{ item.name }}</span>
-          <span class="mr-20">{{ item.author }}</span>
-          <span>{{ item.source }}</span>
+                <Video :url="$getFullUrl(item.url)" theme="blue" />
+              </el-carousel-item>
+            </el-carousel>
+          </div>
         </div>
       </div>
-      <div class="relate-cultual-relic margin-bottom-32">
+
+      <div class="cr-detail_relate_cr">
         <CustomTitle text="关联文物" />
-        <div class="display-group">
-          <div
-            class="display-item"
+        <el-row :gutter="40" class="cr-list">
+          <el-col
+            :span="8"
+            class="cr-item"
+            @click.native="handleToDetail(item.crId)"
             v-for="(item, index) in relateRelics"
             :key="index"
-            @click="handleToDetail(item.crId)"
           >
-            <img :src="$getFullUrl(item.faceImageUrl)" width="100%" :alt="item.title" />
-            <div class="display-desc">
-              <div class="desc-title">
-                <h4>{{ item.name }}</h4>
-              </div>
-              <!-- <div class="desc-time">
-                <span>{{ item.time }}</span>
-              </div>
-              <a class="desc-content" :alt="item.content">
-                {{ item.content }}
-              </a> -->
+            <div class="container wow animate__animated animate__fadeInUp">
+              <div class="img">
+                <img
+                  v-if="
+                    $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
+                  "
+                  :src="
+                    $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
+                  "
+                  width="100%"
+                  :alt="item.name"
+                />
+                <img
+                  v-else
+                  src="@/assets/404_images/no-pic.png"
+                  alt=""
+                  width="100%"
+                  height="100%"
+                  class="img"
+                />
               </div>
+              <div class="desc">
+                <span class="name">{{ item.name }}</span>
               </div>
             </div>
+          </el-col>
+        </el-row>
       </div>
       <div
-        class="relate-video margin-bottom-32"
-        v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
+        class="cr-detail_relate_lt"
+        v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
       >
-        <CustomTitle text="关联视频" />
-        <el-carousel :interval="4000" type="card" height="400px">
-          <el-carousel-item
-            v-for="item in CRDetail.videosVo"
-            :key="item.fileId"
+        <CustomTitle text="相关文献" />
+        <div class="lts-content wow animate__animated animate__fadeInUp">
+          <el-table
+            :data="CRDetail.literatureVo"
+            :header-cell-style="{
+              background: '#eeeeee',
+              color: '#333',
+            }"
+            :row-style="tableRowStyle"
           >
-            <div class="video-container">
-              <div class="video-box">
-                <Video :url="$getFullUrl(item.url)" />
+            <el-table-column
+              prop="name"
+              label="名称"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="authors"
+              label="作者"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="date"
+              label="出版时间"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              prop="source"
+              label="出版所在刊物"
+            ></el-table-column>
+            <el-table-column label="阅读" align="center">
+              <template slot-scope="scope">
+                <div class="pdf-img" @click="handleViewLt(scope.row)">
+                  <img src="@/assets/imgs/display/ch/pdf-icon.png" />
                 </div>
-              <div class="info-box">
-                <h4 class="name">{{ item.name.split(".")[0] }}</h4>
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
       </div>
-          </el-carousel-item>
-        </el-carousel>
-      </div>
     </div>
     <el-image-viewer
       v-if="imgViewerVisible"
@@ -185,16 +225,19 @@
 <script>
 import SearchBar from "@/components/SearchBar";
 import AudioPlayer from "@/components/AudioPlayer";
+import Video from "@/components/Video";
 import CustomTitle from "@/components/CustomTitle";
 import ReaderOperations from "@/components/ReaderOperations";
 import QRCode from "qrcodejs2";
 import { getRCDetailById, crRecommendByPage } from "@/api/culturalRelic";
+import { previewFile } from "@/utils/index";
 export default {
   components: {
     SearchBar,
     CustomTitle,
     AudioPlayer,
     ReaderOperations,
+    Video,
     "el-image-viewer": () =>
       import("element-ui/packages/image/src/image-viewer"),
   },
@@ -213,7 +256,8 @@ export default {
       slideImageWidth: "",
       imgViewerVisible: false,
       relateRelics: [],
-      imgList:[]
+      imgList: [],
+      audioPlaying: true,
     };
   },
   mounted() {
@@ -243,8 +287,10 @@ export default {
           // 获取关联文物
           this.loadCrRecommend();
           this.$nextTick(() => {
-            // this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
-            // this.$refs.AudioPlayer.play();
+            if (this.CRDetail.audiosVo && this.CRDetail.audiosVo.length > 0) {
+              this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
+              this.$refs.AudioPlayer.play();
+            }
           });
         }
       }
@@ -302,12 +348,42 @@ export default {
 
     handelPreviewImages() {
       this.imgViewerVisible = true;
-      this.imgList = this.CRDetail.imagesVo.map((item) => this.$getFullUrl(item.url));
+      this.imgList = this.CRDetail.imagesVo.map((item) =>
+        this.$getFullUrl(item.url)
+      );
     },
     handleToDetail(crId) {
       console.log(crId);
       this.$router.replace({ name: "culturalRelicDetail", params: { crId } });
     },
+    // 点击音频
+    handleClickAudio() {
+      this.audioPlaying = !this.audioPlaying;
+      if (this.audioPlaying) {
+        this.$refs["AudioPlayer"].play();
+        // console.log(this.$refs['audioContainer']);
+      } else {
+        this.$refs["AudioPlayer"].pause();
+      }
+    },
+
+    // 预览关联文献
+    handleViewLt(item) {
+      previewFile(item.files[0].url, item.files[0].name);
+    },
+
+    // 关联文献的行样式调整
+    tableRowStyle({ row, rowIndex }) {
+      if (rowIndex % 2 == 0) {
+        return {
+          background: "#f9f9f9 !important",
+        };
+      } else {
+        return {
+          background: "#fff !important",
+        };
+      }
+    },
   },
 };
 </script>
@@ -317,11 +393,7 @@ export default {
   margin-right: 20px;
 }
 $label: #9f9c9a;
-.search {
-  width: 1200px;
-  margin: auto;
-  margin-bottom: 32px;
-}
+
 .wrapper {
   width: 1200px;
   margin: 60px auto;
@@ -329,14 +401,21 @@ $label: #9f9c9a;
   padding: 40px;
   .back {
     font-size: 18px;
-    font-weight: bold;
-    margin-bottom: 40px;
-    .el-button {
+    display: flex;
+    align-items: center;
     color: $label;
+    cursor: pointer;
+    .svg-icon {
+      font-size: 28px;
+      margin-right: 10px;
+    }
+    span {
+      font-size: 16px;
     }
   }
-  .detail-container {
-    margin-bottom: 32px;
+  /**文物基本信息 */
+  .cr-detail_info {
+    margin-top: 32px;
     // display: flex;
     img {
       max-width: 100%;
@@ -371,15 +450,26 @@ $label: #9f9c9a;
       }
     }
     .relic-info {
+      position: relative;
       .info-title {
         display: flex;
-        // align-items: center;
-        flex-direction: column;
-        margin-bottom: 40px;
-        .title-container{
-          display: flex;
-          justify-content: space-between;
         align-items: center;
+        justify-content: space-between;
+        margin-bottom: 40px;
+        .title {
+          font-size: 28px;
+          font-weight: bold;
+          color: #444;
+        }
+        .view-container {
+          .view-svg-icon {
+            color: #999;
+            margin-right: 5px;
+          }
+
+          .view-text {
+            color: #999;
+          }
         }
         .play {
           margin-left: 10px;
@@ -408,83 +498,162 @@ $label: #9f9c9a;
       }
 
       .view-3d {
-        margin-top: 32px;
+        margin: 32px 0;
         padding: 6px 10px;
         width: 100%;
         background-color: #c1925b;
-        border-radius: 48px;
+        // border-radius: 48px;
         display: flex;
         justify-content: center;
         align-items: center;
         color: white;
         cursor: pointer;
+        transition: all 0.3s ease;
+        &:hover {
+          box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
+            rgba(0, 0, 0, 0.23) 0px 6px 6px;
+        }
         img {
           margin-right: 10px;
         }
       }
-    }
-
-    .title-container {
-      display: flex;
-      justify-content: center;
-      position: relative;
-      .operation {
+      .audio {
         position: absolute;
-        right: 0;
+        right: -180px;
+        top: 34px;
+        cursor: pointer;
+        animation: audioRotate 8s linear infinite;
+        transform-origin: center center;
+        border: 2px solid #2069c4;
+        padding: 10px;
+        border-radius: 50%;
         display: flex;
+        justify-content: center;
         align-items: center;
-        height: 100%;
+        background-color: #fff;
+        transition: all 0.5s ease;
+        &:hover {
+          box-shadow: 0 0 14px rgb(0 0 0 / 40%);
+        }
+        .svg-icon {
+          color: #2069c4;
+          font-size: 80px;
+        }
+        img {
+          width: 60px;
+          height: 60px;
+        }
+      }
+      @keyframes audioRotate {
+        0% {
+          transform: rotateZ(0deg);
+        }
+        100% {
+          transform: rotateZ(360deg);
+        }
+      }
+
+      @-webkit-keyframes audioRotate {
+        0% {
+          transform: rotateZ(0deg);
+        }
+        100% {
+          transform: rotateZ(360deg);
+        }
       }
     }
     .content {
       text-indent: 32px;
     }
   }
-  .relate-book {
-    .book-item {
-      margin-bottom: 10px;
+
+  // 文物简介
+  .cr-detail_intro {
+    margin-top: 32px;
+    .intro-and-video {
+      display: flex;
+      justify-content: space-between;
+      .intro-content {
+        flex: 1;
+        line-height: 1.5;
+        text-indent: 32px;
+        padding: 0 30px 0 20px;
       }
+      .intro-video {
+        min-height: 320px;
+        flex: 1;
       }
-  .relate-cultual-relic {
-    .display-group {
-      margin-top: 24px;
-      display: flex;
-      flex-flow: row wrap;
+    }
+  }
+  /**文物相关文献 */
+  // .cr-detail_relate_lt {
+  //   margin-top: 32px;
+  //   .book-item {
+  //     margin-bottom: 10px;
+  //   }
+  // }
 
-      .display-item {
-        width: 282px;
-        margin-bottom: 32px;
-        border-radius: 16px;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        // padding: 0 0 32px 0;
-        background-color: #fff;
-        margin-right: 10px;
+  .cr-detail_relate_lt {
+    margin: 100px 0;
+    .wrapper {
+      display: flex;
+      background-color: #fafafa;
+      border: 2px solid #cccccc;
+      border-left: none;
+      .lts-content {
+        flex: 1;
+        padding: 10px;
+      }
+    }
+  }
+  /**关联文物 */
+  .cr-detail_relate_cr {
+    margin-top: 32px;
+    .cr-list {
+      .cr-item {
+        margin-bottom: 40px;
+        .container {
+          border: 1px solid #f1f1f1;
+          height: 300px;
+          position: relative;
+          display: flex;
+          flex-direction: column;
           cursor: pointer;
+          &:hover {
             img {
-          border-radius: 16px 16px 0 0;
+              transform: scale(1.2);
+            }
+            .desc {
+              background-color: #2069c4;
+              color: #fff;
             }
-        .display-desc {
-          padding: 0 16px;
-          .desc-content {
-            text-indent: 16px;
-            white-space: nowrap;
+          }
+          .img {
+            background-color: #f8f8f8;
+            height: 240px;
+            cursor: pointer;
             overflow: hidden;
-            text-overflow: ellipsis;
-            display: block;
+            img {
+              height: 100%;
+              object-fit: contain;
+              transition: all 0.5s ease;
+              // width: auto;
             }
           }
-        .display-source {
-          margin-top: 8px;
+          .desc {
+            padding: 16px 0;
             display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 0 16px;
+            justify-content: center;
+            transition: all 0.5s ease;
+            flex: 1;
           }
         }
       }
     }
-
-  .relate-video {
+  }
+  /**关联视频 */
+  .cr-detail_relate_video {
+    margin: 32px 0;
     .video-container {
       display: flex;
       flex-direction: column;
@@ -510,11 +679,21 @@ $label: #9f9c9a;
   text-indent: 28px;
 }
 
-.margin-bottom-32 {
-  margin-bottom: 32px;
-}
 .el-image-container {
   width: 100%;
   height: 100%;
 }
+
+::v-deep .el-carousel__item--card {
+  width: 100%;
+  height: 100%;
+  transform: translateX(0) scale(1) !important;
+}
+
+::v-deep .el-carousel {
+  height: 100%;
+}
+::v-deep .el-carousel__container {
+  height: 100%;
+}
 </style>

src/views/culturalRelic/index.vue

@@ -51,13 +51,15 @@
                 ref="years"
               >
               </el-cascader>
-              <div class="threeD item" @click="handleClickThreeD">
+
+              <div class="search-button item" @click="search">搜 索</div>
+
+              <div class="threeD" @click="handleClickThreeD">
                 <div class="box">
                   <i class="el-icon-check" v-show="onlyShow3d"></i>
                 </div>
-                <div class="text">只看3D</div>
+                <div class="text">查看3D文物</div>
               </div>
-              <div class="search-button" @click="search">搜 索</div>
             </div>
             <el-row :gutter="40" class="cr-list">
               <el-col
@@ -99,10 +101,11 @@
                     />
                   </div>
                   <div class="showIcon" v-if="item && item.url3d">
-                    <img src="@/assets/imgs/cr/3d.png" class="icon" />
-                    <div class="text" @click.stop="handleTo3D(item.url3d)">
-                      点击查看3D链接
-                    </div>
+                    <!-- <img src="@/assets/imgs/cr/3D.png" class="icon" /> -->
+                    <svg-icon icon-class="3d" class="icon"></svg-icon>
+                    <!-- <div class="text" @click.stop="handleTo3D(item.url3d)">
+                      点击查看3D模型
+                    </div> -->
                   </div>
                   <div class="desc">
                     <span class="name">{{ item.name }}</span>
@@ -290,15 +293,15 @@ $text-indent: 16px;
       }
       .threeD {
         display: flex;
-        width: 420px;
+        width: 560px;
         cursor: pointer;
         .box {
-          width: 36px;
-          height: 36px;
+          width: 28px;
+          height: 28px;
           display: flex;
           justify-content: center;
           align-items: center;
-          border: 2px solid #563f17;
+          border: 2px solid #2069c4;
           margin-right: 6px;
           i {
             font-size: 28px;
@@ -308,12 +311,13 @@ $text-indent: 16px;
           display: flex;
           justify-content: center;
           align-items: center;
+          color: #2069c4;
         }
       }
       .search-button {
         cursor: pointer;
         width: 420px;
-        height: 48px;
+        height: 40px;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -381,17 +385,22 @@ $text-indent: 16px;
               width: 28px;
               white-space: nowrap;
               overflow: hidden;
-              &:hover {
-                .icon {
-                  display: none;
-                }
-                .text {
-                  display: block;
-                }
-                width: 130px;
-                padding: 4px 8px;
-                background-color: $blue;
-              }
+
+              background: rgba(0, 0, 0, 0.3);
+              color: #fff;
+              border-radius: 8px;
+              font-size: 16px;
+              // &:hover {
+              //   .icon {
+              //     display: none;
+              //   }
+              //   .text {
+              //     display: block;
+              //   }
+              //   width: 130px;
+              //   padding: 4px 8px;
+              //   background-color: $blue;
+              // }
               .icon {
                 width: 20px;
                 display: inline-block;

src/views/display/Detail.vue

 <template>
   <div class="display-detail">
+<<<<<<< HEAD
     <div class="content" id="content">
       <div
         class="content-item sliders"
@@ -269,21 +270,39 @@
         ></detail-dialog>
       </transition>
     </div>
+=======
+    <BlueStyle
+      v-if="displayDetail.themeType == '1'"
+      :displayDetail="displayDetail"
+      :dicts="dicts"
+      @reload="loadDetail"
+    />
+    <ChStyle
+      v-if="displayDetail.themeType == '2'"
+      :displayDetail="displayDetail"
+      :dicts="dicts"
+      @reload="loadDetail"
+    />
+    <RedStyle
+      v-if="displayDetail.themeType == '3'"
+      :displayDetail="displayDetail"
+      :dicts="dicts"
+      @reload="loadDetail"
+    />
+>>>>>>> 0a5122f18a449aad5a094cb7200226a4a74ebba7
   </div>
 </template>
 
 <script>
-import AudioPlayer from "@/components/AudioPlayer";
-import ReaderOperations from "@/components/ReaderOperations";
-import Card from "@/views/personal/components/Card";
-import Video from "@/components/Video";
-import QRCode from "qrcodejs2";
+import BlueStyle from "./components/BlueStyle.vue";
+// import NormalStyle from "./components/NormalStyle.vue";
+import ChStyle from "./components/ChStyle.vue";
+import RedStyle from "./components/RedStyle.vue";
 import { getDisplayById } from "@/api/display";
-import MenuList from "@/components/MenuList";
 import { mapGetters } from "vuex";
-import { previewFile } from "@/utils/index";
 export default {
   components: {
+<<<<<<< HEAD
     AudioPlayer,
     ReaderOperations,
     MenuList,
@@ -292,19 +311,17 @@ export default {
     "el-image-viewer": () =>
       import("element-ui/packages/image/src/image-viewer"),
     detailDialog: () => import("./detail-dialog.vue"),
+=======
+    BlueStyle,
+    ChStyle,
+    RedStyle,
+>>>>>>> 0a5122f18a449aad5a094cb7200226a4a74ebba7
   },
 
   data() {
     return {
-      options: [
-        {
-          value: "name",
-          label: "文物名称",
-        },
-      ],
-      selectValue: "",
-      keyword: "",
       displayDetail: {},
+<<<<<<< HEAD
       slideImageWidth: 0, //单个图片的宽度
       sildeGroupWidth: 0, //整个轮播的宽度
       slideGroupleft: 0, //整个轮播距离父亲盒子的距离（中间view区域）
@@ -317,6 +334,8 @@ export default {
       audioPlaying: true,
       activeUnit: "",
       unitVisible: false,
+=======
+>>>>>>> 0a5122f18a449aad5a094cb7200226a4a74ebba7
     };
   },
   computed: {
@@ -329,54 +348,20 @@ export default {
     ]);
     this.loadDetail();
   },
-  destroyed() {
-    //同时在destroyed回调中移除监听：
-    if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
-      //firefox支持onmousewheel
-      removeEventListener("DOMMouseScroll", firefoxListenFun);
-    }
-  },
+
   methods: {
     async loadDetail() {
-      let exhibitionId = this.$route.params.exhibitionId;
+      const { exhibitionId } = this.$route.params;
+      console.log(exhibitionId);
       if (exhibitionId) {
         let res = await getDisplayById({ exhibitionId });
         if (res.code == 0) {
           console.log("res", res);
           this.displayDetail = res.data;
-          if (
-            this.displayDetail.exhibitionUnits &&
-            this.displayDetail.exhibitionUnits.length > 0
-          ) {
-            this.curUnit = this.displayDetail.exhibitionUnits[0];
-          }
-          processUnit(this.displayDetail.exhibitionUnits);
-
-          function processUnit(list) {
-            for (let o of list || []) {
-              if (o.children) {
-                if (o.children.length == 0) {
-                  o.children = null;
-                } else {
-                  processUnit(o.children);
-                }
-              }
-            }
-          }
-          this.$nextTick(() => {
-            this.loadWidth();
-
-            if (
-              this.displayDetail.videosVo &&
-              this.displayDetail.videosVo.length > 0
-            ) {
-              this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
-              this.$refs.AudioPlayer.play();
-            }
-          });
         }
       }
     },
+<<<<<<< HEAD
 
     loadWidth() {
       if (
@@ -512,11 +497,14 @@ export default {
     changeTitle(str) {
       return str.split("").join("<br>");
     },
+=======
+>>>>>>> 0a5122f18a449aad5a094cb7200226a4a74ebba7
   },
 };
 </script>
 
 <style lang="scss" scoped>
+<<<<<<< HEAD
 // 中国风主题样式
 /**公共样式开始 */
 .wrapper {
@@ -946,3 +934,6 @@ export default {
   }
 }
 </style>
+=======
+</style>
+>>>>>>> 0a5122f18a449aad5a094cb7200226a4a74ebba7

src/views/display/components/BlueStyle.vue

+<template>
+  <div class="content">
+    <!-- 展览图片 -->
+    <div
+      class="
+        content-item
+        display-detail_imgs
+        wow
+        animate__animated animate__fadeInDownBig
+      "
+      ref="imgs"
+      v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
+    >
+      <el-image
+        :src="$getFullUrl(displayDetail.faceImageUrl)"
+        fit="cover"
+      ></el-image>
+    </div>
+    <div class="wrapper wow animate__animated animate__fadeInUpBig">
+      <!-- 展览基本信息 -->
+      <div class="content-item display-detail_basic_info">
+        <div class="info-container">
+          <div
+            class="
+              info-container-left
+              wow
+              animate__animated animate__fadeInLeft
+            "
+          >
+            <swiper :options="swiperOption" ref="mySwiper">
+              <swiper-slide
+                v-for="(item, index) in displayDetail.imagesVo"
+                :key="index"
+              >
+                <div
+                  class="img-container"
+                  @click="handelPreviewImages(displayDetail.imagesVo)"
+                >
+                  <img :src="item.url" alt="" srcset="" />
+                </div>
+              </swiper-slide>
+              <div class="swiper-pagination" slot="pagination"></div>
+              <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
+              <!-- <div class="swiper-button-next" slot="button-next"></div> -->
+            </swiper>
+          </div>
+          <div
+            class="
+              info-container-right
+              wow
+              animate__animated animate__fadeInRight
+            "
+          >
+            <div class="info-title">
+              <span>{{ displayDetail.title }} </span>
+              <div class="view-count">
+                <svg-icon icon-class="view"></svg-icon>
+                <span>{{ displayDetail.browseCount }}</span>
+              </div>
+            </div>
+
+            <el-row :span="20">
+              <el-col :span="14" class="left">
+                <div class="basic-info">
+                  <div class="body-item">
+                    <span class="label">
+                      <svg-icon icon-class="keyword"></svg-icon>
+                      关键词：</span
+                    >
+                    <span class="value">{{ displayDetail.keyword }}</span>
+                  </div>
+                  <div class="body-item">
+                    <span class="label">
+                      <svg-icon icon-class="zllx"></svg-icon>展览类型：</span
+                    >
+                    <span class="value">{{
+                      dicts.display_type[displayDetail.type]
+                    }}</span>
+                  </div>
+                  <div class="body-item">
+                    <span class="label">
+                      <svg-icon icon-class="zlxz"></svg-icon>展览性质：</span
+                    >
+                    <span class="value">{{
+                      dicts.display_character[displayDetail.displayCharacter]
+                    }}</span>
+                  </div>
+                  <div class="body-item">
+                    <span class="label"
+                      ><svg-icon icon-class="zldw"></svg-icon>展览单位：</span
+                    >
+                    <span class="value">{{ displayDetail.deptName }}</span>
+                  </div>
+                  <div class="body-item">
+                    <span class="label"
+                      ><svg-icon icon-class="zldq"></svg-icon>展览地区：</span
+                    >
+                    <span class="value">{{ displayDetail.regionName }}</span>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="10" class="right">
+                <div class="qrcode">
+                  <img
+                    src="@/assets/imgs/display/normal/test-qrcode.png"
+                    alt=""
+                  />
+                </div>
+                <div class="tools">
+                  <ReaderOperations
+                    :loveCount="displayDetail.loveCount"
+                    :loveCountStatus="Boolean(displayDetail.loveCountStatus)"
+                    :collectCount="displayDetail.collectCount"
+                    :collectCountStatus="
+                      Boolean(displayDetail.collectCountStatus)
+                    "
+                    :sourceId="displayDetail.exhibitionId"
+                    :title="displayDetail.title"
+                    :sourceType="'biz_exhibition'"
+                    :iconSize="24"
+                    @reload="reload"
+                  />
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+        <div
+          class="audio wow animate__animated animate__fadeInRight"
+          :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
+          @click="handleClickAudio"
+          v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
+        >
+          <img src="@/assets/imgs/display/normal/music.png" alt="" />
+          <!-- <svg-icon icon-class="music"></svg-icon> -->
+          <AudioPlayer
+            style="display: none"
+            :url="$getFullUrl(displayDetail.audiosVo[0].url)"
+            ref="AudioPlayer"
+          />
+        </div>
+      </div>
+      <!-- 展览简介 -->
+      <div class="content-item display-detail_intro">
+        <div class="intro-content wow animate__animated animate__fadeInLeft">
+          <div class="intro-title">
+            <svg-icon icon-class="jianjie"></svg-icon>
+            <span>展览简介</span>
+          </div>
+          <div class="intro-content-container">
+            {{ displayDetail.intro }}
+          </div>
+        </div>
+        <div
+          class="intro-video wow animate__animated animate__fadeInRight"
+          v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
+        >
+          <el-carousel :interval="4000" type="card" indicator-position="none">
+            <el-carousel-item
+              v-for="item in displayDetail.videosVo"
+              :key="item.fileId"
+            >
+              <Video :url="$getFullUrl(item.url)" theme="blue" />
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+      </div>
+      <!--展览单元  -->
+      <div
+        class="content-item display-detail_units"
+        ref="units"
+        v-if="displayDetail.exhibitionUnits.length > 0"
+      >
+        <div class="custom_title wow animate__animated animate__fadeInUp">
+          <div class="desc">
+            <div class="divider"></div>
+            <img
+              src="@/assets/imgs/display/normal/title-desc.png"
+              class="modify"
+              alt=""
+            />
+          </div>
+          <div class="center">
+            <svg-icon icon-class="unit"></svg-icon>
+            <span class="title">展览单元</span>
+          </div>
+          <div class="desc">
+            <img
+              src="@/assets/imgs/display/normal/title-desc.png"
+              class="modify"
+              alt=""
+            />
+            <div class="divider"></div>
+          </div>
+        </div>
+        <div class="unit-container">
+          <div
+            class="unit-content-menu wow animate__animated animate__fadeInLeft"
+          >
+            <!-- 只能单开 unique-opened -->
+            <menu-list
+              :items="displayDetail.exhibitionUnits"
+              :isCollapse="false"
+              @open="handleOpenUnit"
+              style="height: 100%"
+            ></menu-list>
+          </div>
+          <div class="unit-content wow animate__animated animate__fadeInRight">
+            <div class="text-indent unit-content_intro" v-if="curUnit.intro">
+              {{ curUnit.intro }}
+            </div>
+            <div
+              class="unit-content_images"
+              v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
+            >
+              <el-row :gutter="20">
+                <el-col
+                  :span="24 / curUnit.imagesVo.length"
+                  v-for="item in curUnit.imagesVo"
+                  :key="item.euId"
+                  class="margin-bottom-32 unit-content_images_container"
+                >
+                  <img :src="$getFullUrl(item.url)" width="100%" />
+
+                  <div
+                    class="enlarge"
+                    @click="handelPreviewImages(curUnit.imagesVo)"
+                  >
+                    <img src="@/assets/imgs/enlarge-s.png" alt="" />
+                  </div>
+                  <div class="unit-content_images_desc">
+                    {{ item.name }}
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+            <div
+              class="unit-content_videos"
+              v-if="curUnit.videosVo && curUnit.videosVo.length > 0"
+            >
+              <el-row :gutter="20">
+                <el-col
+                  :span="24 / curUnit.videosVo.length"
+                  v-for="item in curUnit.videosVo"
+                  :key="item.euId"
+                >
+                  <Video :url="$getFullUrl(item.url)" />
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!--展览相关文物  -->
+      <div
+        class="content-item display-detail_relateRc"
+        ref="units"
+        v-if="
+          displayDetail.culturalRelicVo &&
+          displayDetail.culturalRelicVo.length > 0
+        "
+      >
+        <el-row :gutter="26">
+          <el-col
+            :span="index == 0 ? 12 : 4"
+            v-for="(item, index) in displayDetail.culturalRelicVo"
+            :key="index"
+          >
+            <div
+              class="img-container wow animate__animated animate__fadeInUp"
+              @click="handleToCr(item)"
+            >
+              <img :src="item.faceImagePressUrl || item.faceImageUrl" alt="" />
+              <div class="cr-name-intro" v-if="index == 0">
+                <div class="cr-name">{{ item.name }}</div>
+                <div class="cr-intro">{{ item.intro }}</div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <!-- 相关文献 -->
+      <div
+        class="content-item display-detail_lts"
+        v-if="
+          displayDetail.literatureVo && displayDetail.literatureVo.length > 0
+        "
+      >
+        <!-- <div class="wrapper"> -->
+        <div class="custom_title wow animate__animated animate__fadeInUp">
+          <div class="desc">
+            <div class="divider"></div>
+            <img
+              src="@/assets/imgs/display/normal/title-desc.png"
+              class="modify"
+              alt=""
+            />
+          </div>
+          <div class="center">
+            <svg-icon icon-class="wenxian"></svg-icon>
+            <span class="title">相关文献</span>
+          </div>
+          <div class="desc">
+            <img
+              src="@/assets/imgs/display/normal/title-desc.png"
+              class="modify"
+              alt=""
+            />
+            <div class="divider"></div>
+          </div>
+        </div>
+        <div class="lts-content wow animate__animated animate__fadeInUp">
+          <el-table
+            :data="displayDetail.literatureVo"
+            :header-cell-style="{
+              background: '#eeeeee',
+              color: '#333',
+            }"
+            :row-style="tableRowStyle"
+          >
+            <el-table-column
+              prop="name"
+              label="名称"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="authors"
+              label="作者"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="date"
+              label="出版时间"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              prop="source"
+              label="出版所在刊物"
+            ></el-table-column>
+            <el-table-column label="阅读" align="center">
+              <template slot-scope="scope">
+                <div class="pdf-img" @click="handleViewLt(scope.row)">
+                  <img src="@/assets/imgs/display/ch/pdf-icon.png" />
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <el-image-viewer
+      v-if="imgViewerVisible"
+      :on-close="closeImgViewer"
+      :url-list="imgList"
+    />
+  </div>
+</template>
+
+<script>
+import AudioPlayer from "@/components/AudioPlayer";
+import ReaderOperations from "@/components/ReaderOperations";
+import Card from "@/views/personal/components/Card";
+import Video from "@/components/Video";
+import { previewFile } from "@/utils/index";
+import ChStyleUnit from "./ChStyleUnit.vue";
+import { swiper, swiperSlide } from "vue-awesome-swiper";
+import "swiper/dist/css/swiper.css";
+import MenuList from "@/components/MenuList";
+
+export default {
+  name: "BlueStyle",
+  components: {
+    AudioPlayer,
+    ReaderOperations,
+    Video,
+    Card,
+    ChStyleUnit,
+    swiper,
+    swiperSlide,
+    MenuList,
+    "el-image-viewer": () =>
+      import("element-ui/packages/image/src/image-viewer"),
+  },
+  props: {
+    displayDetail: {
+      type: Object,
+      default: () => ({}),
+    },
+    dicts: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    let vm = this;
+    return {
+      imgViewerVisible: false,
+      relateRelics: [],
+      audioPlaying: true,
+      curUnit: [],
+      dotImg: require("@/assets/imgs/display/normal/mz-dot.png"),
+      dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
+      page: null,
+      swiperOption: {
+        // autoplay: false,
+        effect: "fade",
+        pagination: {
+          el: ".swiper-pagination",
+          type: "custom",
+          clickable: true,
+          renderCustom: function (swiper, current, total) {
+            var customPaginationHtml = "";
+            for (var i = 0; i < total; i++) {
+              //判断哪个分页器此刻应该被激活
+              if (i == current - 1) {
+                customPaginationHtml += `<img class="page-item" src="${vm.dotImgS}" />`;
+              } else {
+                customPaginationHtml += `<img class="page-item" src="${vm.dotImg}" />`;
+              }
+            }
+            return `<span id="page">` + customPaginationHtml + `</span>`;
+          },
+        },
+        on: {
+          click: function (e) {
+            let page = document.getElementById("page");
+            var item = e.target;
+            var lists = Array.from(page.querySelectorAll("img"));
+            let index = lists.indexOf(item);
+            vm.swiper.slideTo(index);
+          },
+        },
+      },
+    };
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.swiper;
+    },
+  },
+  async mounted() {
+    this.loadDetail();
+  },
+  methods: {
+    async loadDetail() {
+      if (
+        this.displayDetail.exhibitionUnits &&
+        this.displayDetail.exhibitionUnits.length > 0
+      ) {
+        this.curUnit = this.displayDetail.exhibitionUnits[0];
+      }
+      processUnit(this.displayDetail.exhibitionUnits);
+      function processUnit(list) {
+        for (let o of list || []) {
+          if (o.children) {
+            if (o.children.length == 0) {
+              o.children = null;
+            } else {
+              processUnit(o.children);
+            }
+          }
+        }
+      }
+      this.$nextTick(() => {
+        if (
+          this.displayDetail.audiosVo &&
+          this.displayDetail.audiosVo.length > 0
+        ) {
+          // this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
+          this.$refs.AudioPlayer.play();
+        }
+      });
+    },
+
+    //节流函数
+    throttle(fn, gapTime) {
+      let _this = this;
+      return function () {
+        let _nowTime = +new Date();
+        if (_nowTime - _this._lastTime > gapTime || !_this._lastTime) {
+          fn(...arguments); // 函数可以带参数
+          _this._lastTime = _nowTime;
+        }
+      };
+    },
+
+    // 关联文献的行样式调整
+    tableRowStyle({ row, rowIndex }) {
+      if (rowIndex % 2 == 0) {
+        return {
+          background: "#f9f9f9 !important",
+        };
+      } else {
+        return {
+          background: "#fff !important",
+        };
+      }
+    },
+
+    // 预览关联文献
+    handleViewLt(item) {
+      previewFile(item.files[0].url, item.files[0].name);
+    },
+
+    // 点击音频
+    handleClickAudio() {
+      this.audioPlaying = !this.audioPlaying;
+      if (this.audioPlaying) {
+        this.$refs["AudioPlayer"].play();
+        // console.log(this.$refs['audioContainer']);
+      } else {
+        this.$refs["AudioPlayer"].pause();
+      }
+    },
+
+    reload() {
+      this.$emit("reload");
+    },
+
+    handelPreviewImages(images) {
+      this.imgViewerVisible = true;
+      this.imgList = images.map((item) => this.$getFullUrl(item.url));
+    },
+
+    closeImgViewer() {
+      this.imgViewerVisible = false;
+    },
+
+    handleOpenUnit(item) {
+      this.curUnit = item;
+    },
+
+    handleToCr(item) {
+      const { crId } = item;
+      this.$router.push({
+        path: "/culturalRelic/" + crId,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" >
+// 自定义分页器样式
+#page {
+  height: 30px;
+  display: flex;
+  justify-content: center;
+}
+.page-item {
+  cursor: pointer;
+}
+</style>
+
+<style lang="scss" scoped>
+// 中国风主题样式
+/**公共样式开始 */
+
+.custom-title {
+  width: 50px;
+  background-color: #d72f3f;
+  min-height: 300px;
+  color: #fff;
+  font-size: 28px;
+  writing-mode: vertical-rl;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
+  letter-spacing: 10px;
+}
+.units {
+  background-image: linear-gradient(to bottom, #660d04, #520002);
+  min-height: 400px;
+}
+.content {
+  background: url("@/assets/imgs/display/normal/bg1.png");
+}
+.content-item {
+  width: 100%;
+}
+
+.custom_title {
+  display: flex;
+  width: 100%;
+  padding: 50px 0 40px 0;
+  align-items: center;
+  .center {
+    width: 180px;
+    margin: 0 10px;
+    display: flex;
+    align-items: center;
+    .svg-icon {
+      font-size: 50px;
+      color: #2068c3;
+      margin-right: 10px;
+    }
+    .title {
+      font-size: 26px;
+      font-weight: 400;
+      color: #2069c4;
+      line-height: 101px;
+    }
+  }
+  .desc {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    .modify {
+      width: 16px;
+      margin: 0 6px;
+      img {
+        width: 100%;
+      }
+    }
+    .divider {
+      flex: 1;
+      height: 6px;
+      background: url("@/assets/imgs/display/normal/divider.png") 100% 100% repeat-x;
+      img {
+        width: 100%;
+      }
+    }
+  }
+}
+/**公共样式结束 */
+
+/**样式开始 */
+.content {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  /**轮播图 */
+  .display-detail_imgs {
+    height: 436px;
+    .el-image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .wrapper {
+    width: 1200px;
+    box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+    position: relative;
+    margin: 36px 0 70px;
+    /**基本信息 */
+    .display-detail_basic_info {
+      position: relative;
+      .info-container {
+        display: flex;
+        justify-content: space-between;
+        padding: 60px 36px;
+        height: 100%;
+        background-color: #fff;
+        .info-container-left {
+          min-height: 200px;
+          margin-right: 50px;
+          flex: 1;
+          overflow: hidden;
+          .img-container {
+            height: 280px;
+            width: 100%;
+          }
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+        .info-container-right {
+          flex: 1;
+          min-height: 200px;
+
+          .info-title {
+            font-size: 28px;
+            font-weight: bold;
+            color: #444;
+            padding-bottom: 20px;
+            margin-bottom: 20px;
+            border-bottom: 2px solid #f2f2f2;
+            .view-count {
+              font-size: 18px;
+              margin-top: 10px;
+              color: #999;
+              font-weight: normal;
+              .svg-icon {
+                margin-right: 10px;
+              }
+            }
+          }
+          .basic-info {
+            .body-item {
+              display: flex;
+              .label {
+                display: flex;
+                align-items: center;
+                width: 120px;
+                margin-right: 26px;
+                margin-bottom: 10px;
+                font-weight: bold;
+                color: #858585;
+                .svg-icon {
+                  width: 24px;
+                  height: 24px;
+                  margin-right: 16px;
+                }
+              }
+            }
+          }
+
+          .right {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            .qrcode {
+              margin-bottom: 28px;
+              display: flex;
+              justify-content: center;
+              img {
+                width: 50%;
+                height: 100%;
+              }
+            }
+            .tools {
+              width: 100%;
+              .tools-item {
+                color: #858585;
+                flex: 1;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                .svg-icon {
+                  width: 22px;
+                  height: 22px;
+                  margin-right: 8px;
+                }
+                .like {
+                  color: #831122;
+                }
+                .collect {
+                  color: #2069c4;
+                }
+              }
+            }
+          }
+        }
+      }
+      .audio {
+        position: absolute;
+        right: -100px;
+        top: 34px;
+        cursor: pointer;
+        animation: audioRotate 8s linear infinite;
+        transform-origin: center center;
+        border: 2px solid #2069c4;
+        padding: 10px;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #fff;
+        transition: all 0.5s ease;
+        &:hover {
+          box-shadow: 0 0 14px rgb(0 0 0 / 40%);
+        }
+        .svg-icon {
+          color: #2069c4;
+          font-size: 80px;
+        }
+        img {
+          width: 60px;
+          height: 60px;
+        }
+      }
+    }
+
+    /**简介和视频 */
+    .display-detail_intro {
+      background-image: url("@/assets/imgs/display/normal/bg.png");
+      background-size: 1%;
+      display: flex;
+      .intro-content,
+      .intro-video {
+        flex: 1;
+      }
+      .intro-content {
+        padding: 20px;
+        margin: 20px;
+        line-height: 28px;
+        .intro-title {
+          font-size: 26px;
+          font-weight: 400;
+          color: #2069c4;
+          line-height: 90px;
+          .svg-icon {
+            margin-right: 10px;
+            font-size: 36px;
+          }
+        }
+        .intro-content-container {
+          text-indent: 34px;
+        }
+      }
+    }
+
+    /**展览单元 */
+    .display-detail_units {
+      overflow-x: hidden;
+
+      .unit-container {
+        height: 100%;
+        margin-bottom: 40px;
+        display: flex;
+      }
+      .unit-content-menu {
+        width: 360px;
+        margin-right: 40px;
+      }
+      .unit-content {
+        flex: 1;
+        padding: 40px;
+        background-image: url("@/assets/imgs/display/normal/bg.png");
+        background-size: 1%;
+
+        .unit-content_intro {
+          font-size: 16px;
+          font-weight: 400;
+          color: #444444;
+          line-height: 36px;
+          text-indent: 32px;
+          margin-bottom: 20px;
+        }
+        .unit-content_images_container {
+          position: relative;
+          .unit-content_images_desc {
+            display: flex;
+            justify-content: center;
+          }
+          .enlarge {
+            position: absolute;
+            bottom: 60px;
+            right: 40px;
+            display: flex;
+            z-index: 9;
+            background-color: #c1925b;
+            width: 40px;
+            height: 40px;
+            border-radius: 12px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 10px;
+            cursor: pointer;
+            img {
+              width: 24px;
+              height: 24px;
+            }
+          }
+        }
+      }
+    }
+    // 关联文物
+    .display-detail_relateRc {
+      height: 560px;
+      background-image: url("@/assets/imgs/display/normal/bg.png");
+      background-size: 1%;
+      padding: 50px 0;
+      .el-col {
+        &:first-child {
+          .img-container {
+            width: 100%;
+            height: 460px;
+            position: relative;
+
+            .cr-name-intro {
+              width: 100%;
+              height: 100%;
+              position: absolute;
+              left: 0;
+              top: 0;
+              padding: 100px 28px 50px;
+
+              background-image: linear-gradient(
+                to top,
+                rgba(0, 0, 0, 0.8),
+                rgba(0, 0, 0, 0.1)
+              );
+              .cr-name {
+                font-size: 48px;
+                font-weight: bold;
+                color: #ffffff;
+                text-align: center;
+                margin-bottom: 40px;
+              }
+              .cr-intro {
+                font-size: 16px;
+                font-weight: 400;
+                color: #ccc;
+                text-indent: 32px;
+                line-height: 40px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 5;
+                -webkit-box-orient: vertical;
+              }
+            }
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+        &:not(&:first-child) {
+          margin-bottom: 30px;
+          .img-container {
+            height: 214px;
+          }
+        }
+      }
+      .img-container {
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        overflow: hidden;
+        &:hover {
+          box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+          img {
+            transform: scale(1.1);
+          }
+        }
+        img {
+          width: 100%;
+          height: 214px;
+          object-fit: cover;
+          transition: all 0.5s ease;
+        }
+      }
+    }
+
+    /**关联文献 */
+    .display-detail_lts {
+      background-color: #fafafa;
+      .lts-content {
+        flex: 1;
+      }
+    }
+  }
+}
+::v-deep .el-carousel__item--card {
+  width: 100%;
+  height: 100%;
+  transform: translateX(0) scale(1) !important;
+}
+
+::v-deep .el-carousel {
+  height: 100%;
+}
+::v-deep .el-carousel__container {
+  height: 100%;
+}
+
+@keyframes filmMoveLeft {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-1200px);
+  }
+}
+@keyframes filmMoveRight {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(1200px);
+  }
+}
+
+@keyframes audioRotate {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@-webkit-keyframes audioRotate {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+.animation-play-paused {
+  animation-play-state: paused;
+  -webkit-animation-play-state: paused; /* Safari 和 Chrome */
+}
+</style>
\ No newline at end of file

src/views/display/detail/ChStyle.vue → src/views/display/components/ChStyle.vue

@@ -2,7 +2,12 @@
   <div class="display-detail">
     <div class="content" id="content">
       <div
-        class="content-item sliders"
+        class="
+          content-item
+          sliders
+          wow
+          animate__animated animate__fadeInRightBig
+        "
         ref="imgs"
         v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
       >
@@ -29,16 +34,24 @@
           <div class="left-layer"></div>
           <div class="center-img" @mousewheel="handleImgsSlide">
             <!-- <div class="border-box"></div> -->
-            <img src="@/assets/imgs/display/slider-box.png" alt="" />
+            <img src="@/assets/imgs/display/ch/slider-box.png" alt="" />
           </div>
           <div class="right-layer"></div>
         </div>
       </div>
-      <div class="content-item intro wow animate__animated animate__fadeInUp">
+      <div class="content-item intro">
         <div class="wrapper">
-          <div class="title">{{ displayDetail.title }}</div>
+          <div class="title">
+            <div class="wow animate__animated animate__fadeIn">
+              {{ displayDetail.title }}
+            </div>
+            <div class="view-count wow animate__animated animate__fadeIn">
+              <svg-icon icon-class="view"></svg-icon>
+              <span>{{ displayDetail.browseCount }}</span>
+            </div>
+          </div>
           <div class="desc-and-tools">
-            <div class="desc">
+            <div class="desc wow animate__animated animate__fadeIn">
               <el-row>
                 <el-col class="item">
                   <div class="label">关键词：</div>
@@ -66,7 +79,7 @@
                 </el-col>
               </el-row>
             </div>
-            <div class="tools">
+            <div class="tools wow animate__animated animate__fadeIn">
               <ReaderOperations
                 :loveCount="displayDetail.loveCount"
                 :loveCountStatus="Boolean(displayDetail.loveCountStatus)"
@@ -75,34 +88,30 @@
                 :sourceId="displayDetail.exhibitionId"
                 :title="displayDetail.title"
                 :sourceType="'biz_exhibition'"
-                @reload="loadDetail"
+                @reload="reload"
+                :selectColor="'#892325'"
               />
             </div>
           </div>
           <div class="divider"></div>
           <div class="intro-and-video">
-            <el-row :gutter="70">
-              <el-col
-                class="intro-container"
-                :span="
-                  displayDetail.videosVo && displayDetail.videosVo.length > 0
-                    ? 12
-                    : 24
-                "
+            <div class="intro-container">
+              <div
+                class="intro-title wow animate__animated animate__fadeInLeft"
+              >
+                展览简介
+              </div>
+              <div
+                class="intro-content wow animate__animated animate__fadeInLeft"
               >
-                <div class="intro-title">展览简介</div>
-                <div class="intro-content">
                 {{ displayDetail.intro }}
               </div>
-              </el-col>
-              <el-col
-                :span="12"
-                v-if="
-                  displayDetail.videosVo && displayDetail.videosVo.length > 0
-                "
-                class="videos"
+            </div>
+            <div
+              v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
+              class="videos wow animate__animated animate__fadeInRight"
             >
-                <el-carousel :interval="4000" type="card" height="220px">
+              <el-carousel>
                 <el-carousel-item
                   v-for="item in displayDetail.videosVo"
                   :key="item.fileId"
@@ -110,8 +119,7 @@
                   <Video :url="$getFullUrl(item.url)" />
                 </el-carousel-item>
               </el-carousel>
-              </el-col>
-            </el-row>
+            </div>
           </div>
           <div
             class="audio"
@@ -119,7 +127,8 @@
             @click="handleClickAudio"
             v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
           >
-            <img src="@/assets/imgs/display/audio.png" alt="" />
+            <!-- <svg-icon icon-class="music"></svg-icon> -->
+            <img src="@/assets/imgs/display/normal/music-red.png" alt="" />
             <AudioPlayer
               style="display: none"
               :url="$getFullUrl(displayDetail.audiosVo[0].url)"
@@ -128,53 +137,33 @@
           </div>
         </div>
       </div>
-      <div class="content-item units">
+      <div
+        class="content-item units"
+        v-if="displayDetail.exhibitionUnits.length > 0"
+      >
         <div class="wrapper">
-          <div class="custom-title">
+          <div class="custom-title wow animate__animated animate__fadeInLeft">
             <div class="custom-title-prefix">
-              <img src="@/assets/imgs/display/custom-title.png" alt="" />
+              <img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
             </div>
             <div class="custom-title-text">展览单元</div>
             <div class="custom-title-suffix">
-              <img src="@/assets/imgs/display/custom-title.png" alt="" />
+              <img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
             </div>
           </div>
 
-          <div class="units-content">
-            <ul>
-              <li
-                v-for="(item, index) in displayDetail.exhibitionUnits"
-                :key="index"
-              >
-                <div class="unit-title">{{ item.title }}</div>
-
-                <div class="unit-intro">{{ item.intro }}</div>
-                <div
-                  class="unit-imgs"
-                  v-if="item.imagesVo && item.imagesVo.length > 0"
-                >
-                  <div
-                    class="img-item"
-                    v-for="(i, idx) in item.imagesVo"
-                    :key="idx"
-                  >
-                    <img :src="$getFullUrl(i.url)" alt="" />
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
+          <ChStyleUnit :units="displayDetail.exhibitionUnits" />
         </div>
       </div>
       <div class="content-item lts">
         <div class="wrapper">
-          <div class="custom-title">
+          <div class="custom-title wow animate__animated animate__fadeInUp">
             <div class="custom-title-prefix">
-              <img src="@/assets/imgs/display/custom-title.png" alt="" />
+              <img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
             </div>
             <div class="custom-title-text">关联文献</div>
             <div class="custom-title-suffix">
-              <img src="@/assets/imgs/display/custom-title.png" alt="" />
+              <img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
             </div>
           </div>
         </div>
@@ -185,7 +174,7 @@
             displayDetail.literatureVo && displayDetail.literatureVo.length > 0
           "
         >
-          <div class="wrapper">
+          <div class="wrapper wow animate__animated animate__fadeInUp">
             <el-table
               :data="displayDetail.literatureVo"
               :header-cell-style="{
@@ -217,19 +206,20 @@
               <el-table-column label="阅读" align="center">
                 <template slot-scope="scope">
                   <div class="pdf-img" @click="handleViewLt(scope.row)">
-                    <img src="@/assets/imgs/display/pdf-icon.png" />
+                    <img src="@/assets/imgs/display/ch/pdf-icon.png" />
                   </div>
                 </template>
               </el-table-column>
             </el-table>
-            <!-- <div class="title">
-              
-            </div>
-            <div class="lts-item"></div> -->
           </div>
         </div>
       </div>
     </div>
+    <el-image-viewer
+      v-if="imgViewerVisible"
+      :on-close="closeImgViewer"
+      :url-list="imgList"
+    />
   </div>
 </template>
 
@@ -238,11 +228,9 @@ import AudioPlayer from "@/components/AudioPlayer";
 import ReaderOperations from "@/components/ReaderOperations";
 import Card from "@/views/personal/components/Card";
 import Video from "@/components/Video";
-import QRCode from "qrcodejs2";
-import { getDisplayById } from "@/api/display";
 import MenuList from "@/components/MenuList";
-import { mapGetters } from "vuex";
 import { previewFile } from "@/utils/index";
+import ChStyleUnit from "./ChStyleUnit.vue";
 export default {
   components: {
     AudioPlayer,
@@ -250,41 +238,34 @@ export default {
     MenuList,
     Video,
     Card,
+    ChStyleUnit,
     "el-image-viewer": () =>
       import("element-ui/packages/image/src/image-viewer"),
   },
-
+  props: {
+    displayDetail: {
+      type: Object,
+      default: () => ({}),
+    },
+    dicts: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
   data() {
     return {
-      options: [
-        {
-          value: "name",
-          label: "文物名称",
-        },
-      ],
-      selectValue: "",
-      keyword: "",
-      displayDetail: {},
       slideImageWidth: 0, //单个图片的宽度
       sildeGroupWidth: 0, //整个轮播的宽度
       slideGroupleft: 0, //整个轮播距离父亲盒子的距离（中间view区域）
       imgViewerVisible: false,
       relateRelics: [],
-      curUnit: [],
       imgsDom: null,
       moveLeft: true,
       moveRight: true,
       audioPlaying: true,
     };
   },
-  computed: {
-    ...mapGetters(["dicts"]),
-  },
   async mounted() {
-    await this.$store.dispatch("dict/getDictList", [
-      "display_type",
-      "display_character",
-    ]);
     this.loadDetail();
   },
   destroyed() {
@@ -296,19 +277,7 @@ export default {
   },
   methods: {
     async loadDetail() {
-      let exhibitionId = this.$route.params.exhibitionId;
-      if (exhibitionId) {
-        let res = await getDisplayById({ exhibitionId });
-        if (res.code == 0) {
-          this.displayDetail = res.data;
-          if (
-            this.displayDetail.exhibitionUnits &&
-            this.displayDetail.exhibitionUnits.length > 0
-          ) {
-            this.curUnit = this.displayDetail.exhibitionUnits[0];
-          }
       processUnit(this.displayDetail.exhibitionUnits);
-
       function processUnit(list) {
         for (let o of list || []) {
           if (o.children) {
@@ -331,8 +300,6 @@ export default {
           this.$refs.AudioPlayer.play();
         }
       });
-        }
-      }
     },
 
     loadWidth() {
@@ -458,6 +425,10 @@ export default {
         this.$refs["AudioPlayer"].pause();
       }
     },
+
+    reload() {
+      this.$emit("reload");
+    },
   },
 };
 </script>
@@ -493,10 +464,10 @@ export default {
 
 /**样式开始 */
 .display-detail {
-  overflow-x: hidden;
+  overflow: hidden;
   .content {
     width: 100%;
-    overflow-y: hidden;
+    overflow: hidden;
     .content-item {
       width: 100%;
     }
@@ -523,6 +494,7 @@ export default {
             width: 300px;
             height: 100%;
             position: relative;
+            margin-right: 1px;
             img {
               width: 300px;
               height: 100%;
@@ -560,22 +532,35 @@ export default {
 
     /**展览信息 */
     .intro {
-      margin-top: 84px;
+      margin-top: 55px;
       display: flex;
       justify-content: center;
 
       .wrapper {
-        background: url("@/assets/imgs/display/intro-bg.png");
+        background: url("@/assets/imgs/display/ch/intro-bg.png");
         background-repeat: no-repeat;
         background-size: 100% 100%;
-        padding: 60px;
+        padding: 50px;
         position: relative;
+        border: 1px solid #d3d3d37a;
         .title {
-          font-size: 62px;
+          font-size: 50px;
           font-family: KaiTi;
-          font-weight: 400;
+          font-weight: bold;
           color: #0f0f0f;
           margin-bottom: 60px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .view-count {
+            font-size: 18px;
+            margin-top: 10px;
+            color: #999;
+            font-weight: normal;
+            .svg-icon {
+              margin-right: 10px;
+            }
+          }
         }
         .desc-and-tools {
           display: flex;
@@ -584,25 +569,33 @@ export default {
             display: flex;
             .item {
               display: flex;
+              margin-right: 16px;
               .label,
               .value {
                 font-size: 18px;
-                font-weight: 300;
                 color: #0f0f0f;
                 line-height: 36px;
               }
+              .label {
+                margin-left: 8px;
+              }
             }
           }
+          .tools {
+            width: 230px;
+          }
         }
 
         .divider {
           width: 100%;
           height: 2px;
           border: 1px dashed #b1b0af;
-          margin: 60px 0;
+          margin: 42px 0;
         }
         .intro-and-video {
+          display: flex;
           .intro-container {
+            flex: 1;
             .intro-title {
               font-size: 40px;
               font-family: KaiTi;
@@ -628,25 +621,14 @@ export default {
               color: #444444;
               text-indent: 32px;
               line-height: 28px;
+              margin-left: 8px;
             }
           }
           .videos {
+            flex: 1;
             position: relative;
-            ::v-deep {
-              .el-carousel {
-                height: 100%;
-                width: 100%;
-                .el-carousel__container {
-                  height: 100%;
-                  display: flex;
-                  justify-content: center;
-                }
-                .el-carousel__item {
-                  width: 100%;
-                  transform: translateX(0) !important;
-                }
-              }
-            }
+            height: 256px;
+            margin-left: 70px;
           }
         }
 
@@ -657,17 +639,20 @@ export default {
           cursor: pointer;
           animation: audioRotate 8s linear infinite;
           transform-origin: center center;
-          border: 1px solid #892325;
+          border: 2px solid #892325;
+          padding: 10px;
           border-radius: 50%;
-          // padding: 10px;
-          width: 60px;
-          height: 60px;
           display: flex;
           justify-content: center;
           align-items: center;
+          background-color: #fff;
+          transition: all 0.5s ease;
+          &:hover {
+            box-shadow: 0 0 14px rgb(0 0 0 / 40%);
+          }
           img {
-            width: 28px;
-            height: 28px;
+            width: 60px;
+            height: 60px;
           }
         }
       }
@@ -748,9 +733,21 @@ export default {
         justify-content: center;
         width: 100%;
         height: 569px;
-        background-image: url("@/assets/imgs/display/lts-bg.png");
+        background-image: url("@/assets/imgs/display/ch/lts-bg.png");
+        overflow-x: hidden;
       }
     }
   }
 }
+::v-deep .el-carousel {
+  height: 100%;
+}
+::v-deep .el-carousel__container {
+  height: 100%;
+}
+::v-deep .el-carousel__item--card {
+  width: 100%;
+  height: 100%;
+  transform: translateX(0) scale(1) !important;
+}
 </style>
\ No newline at end of file

src/views/display/components/ChStyleUnit.vue

+<!-- -->
+<template>
+  <div class="units-content">
+    <div class="units-content-item" v-for="(unit, index) in units" :key="index">
+      <div class="unit-title">{{ unit.title }}</div>
+      <div class="unit-intro">{{ unit.intro }}</div>
+      <div class="unit-imgs" v-if="unit.imagesVo && unit.imagesVo.length > 0">
+        <div class="img-item" v-for="(i, idx) in unit.imagesVo" :key="idx">
+          <img :src="$getFullUrl(i.url)" />
+        </div>
+      </div>
+      <ChStyleUnit
+        :units="unit.children"
+        v-if="unit.children && unit.children.length > 0"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChStyleUnit",
+  props: {
+    units: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.units-content-item {
+  margin-bottom: 20px;
+  .unit-title {
+    font-size: 36px;
+    font-family: KaiTi;
+    font-weight: 400;
+    color: #4e392c;
+    line-height: 83px;
+    display: flex;
+    justify-content: center;
+  }
+  .unit-intro {
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #444444;
+    text-indent: 36px;
+    margin-bottom: 10px;
+    line-height: 32px;
+  }
+  .unit-imgs {
+    width: 100%;
+    .img-item {
+      width: 100%;
+      img {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/display/detail/NormalStyle.vue → src/views/display/components/NormalStyle.vue

 <!-- -->
 <template>
   <div class="display-detail">
-    <!-- <div class="search">
-      <SearchBar
-        :options="options"
-        :selectValue="selectValue"
-        :keyword="keyword"
-      />
-    </div> -->
-    <div class="empty-space"></div>
     <div class="wrapper">
-      <div class="back">
-        <el-button
-          type="text"
-          icon="el-icon-arrow-left"
-          @click.native="handleBack"
-          >返回上页</el-button
-        >
+      <div class="back"  @click="handleBack">
+        <svg-icon icon-class="mz-fh"></svg-icon>
+        <span>返回上页 </span>
       </div>
-      <el-row class="detail-container" :gutter="30">
+      <el-row class="detail-container" :gutter="60">
         <el-col class="cr-images" :span="16">
           <el-carousel
             indicator-position="outside"
@@ -36,19 +24,16 @@
               ></el-image>
             </el-carousel-item>
           </el-carousel>
-          <div class="enlarge" @click="handelPreviewImages">
+          <div
+            class="enlarge"
+            @click="handelPreviewImages(displayDetail.imagesVo)"
+          >
             <img src="@/assets/imgs/enlarge-s.png" alt="" />
           </div>
         </el-col>
         <el-col class="relic-info" :span="8">
           <div class="info-title">
-            <div
-              style="
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-              "
-            >
+            <div class="title">
               <h4>
                 {{ displayDetail.title }}
               </h4>
@@ -58,35 +43,29 @@
               </span>
             </div>
 
-            <AudioPlayer
-              :url="$getFullUrl(displayDetail.audiosVo[0].url)"
+            <NormalPlayer
+              :fileurl="$getFullUrl(displayDetail.audiosVo[0].url)"
               ref="AudioPlayer"
               v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
             />
           </div>
           <div class="info-body">
             <div class="basic-info">
-              <!--  <div class="body-item">
-                <span class="label">年份</span>
-                <span class="value">{{ displayDetail.yearsLabel }}</span>
-              </div>
-              <div class="body-item">
-                <span class="label">类别</span>
-                <span class="value">
-                  {{ displayDetail.typeLabel }}
-                </span>
-              </div>-->
               <div class="body-item">
-                <span class="label">开始日期</span>
-                <span class="value">{{ displayDetail.startDate }}</span>
+                <span class="label">关键词</span>
+                <span class="value">{{ displayDetail.keyword }}</span>
               </div>
               <div class="body-item">
-                <span class="label">结束日期</span>
-                <span class="value">{{ displayDetail.endDate }}</span>
+                <span class="label">展览类型</span>
+                <span class="value">{{
+                  dicts.display_type[displayDetail.type]
+                }}</span>
               </div>
               <div class="body-item">
-                <span class="label">关键词</span>
-                <span class="value">{{ displayDetail.keyword }}</span>
+                <span class="label">展览性质</span>
+                <span class="value">{{
+                  dicts.display_character[displayDetail.displayCharacter]
+                }}</span>
               </div>
               <div class="body-item">
                 <span class="label">展览单位</span>
@@ -94,8 +73,6 @@
               </div>
             </div>
           </div>
-          <!-- <div class="qrcode" ref="qrCodeUrl"></div> -->
-          <!-- </div> -->
           <ReaderOperations
             :loveCount="displayDetail.loveCount"
             :loveCountStatus="Boolean(displayDetail.loveCountStatus)"
@@ -104,26 +81,26 @@
             :sourceId="displayDetail.exhibitionId"
             :title="displayDetail.title"
             :sourceType="'biz_exhibition'"
-            @reload="loadDetail"
+            @reload="reload"
           />
         </el-col>
       </el-row>
 
-      <div class="margin-bottom-32">
+      <div class="margin-bottom-32 intro">
         <CustomTitle text="展览介绍" />
-        <div class="intro text-indent">
+        <div class="text-indent intro_text">
           {{ displayDetail.intro }}
         </div>
       </div>
       <div
-        class="margin-bottom-32"
+        class="margin-bottom-32 unit"
         v-if="
           displayDetail.exhibitionUnits &&
           displayDetail.exhibitionUnits.length > 0
         "
       >
         <CustomTitle text="展览单元" />
-        <el-row :gutter="20">
+        <el-row :gutter="40">
           <el-col :span="8">
             <!-- 只能单开 unique-opened -->
             <menu-list
@@ -132,17 +109,12 @@
               @open="handleOpenUnit"
             ></menu-list>
           </el-col>
-          <el-col :span="16">
-            <el-card>
-              <div slot="header" class="clearfix">
-                <span>单元介绍</span>
-              </div>
-              <div class="unit-content">
-                <div class="intro text-indent" v-if="curUnit.intro">
+          <el-col :span="16" class="unit-content">
+            <div class="text-indent unit-content_intro" v-if="curUnit.intro">
               {{ curUnit.intro }}
             </div>
             <div
-                  class="images"
+              class="unit-content_images"
               v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
             >
               <el-row :gutter="20">
@@ -150,17 +122,24 @@
                   :span="24 / curUnit.imagesVo.length"
                   v-for="item in curUnit.imagesVo"
                   :key="item.euId"
-                      class="margin-bottom-32"
+                  class="margin-bottom-32 unit-content_images_container"
+                >
+                  <img :src="$getFullUrl(item.url)" width="100%" />
+
+                  <div
+                    class="enlarge"
+                    @click="handelPreviewImages(curUnit.imagesVo)"
                   >
-                      <img :src="$getFullUrl(item.url)" alt="" srcset="" width="100%" />
-                      <div class="desc flex-center">
+                    <img src="@/assets/imgs/enlarge-s.png" alt="" />
+                  </div>
+                  <div class="unit-content_images_desc">
                     {{ item.name }}
                   </div>
                 </el-col>
               </el-row>
             </div>
             <div
-                  class="videos"
+              class="unit-content_videos"
               v-if="curUnit.videosVo && curUnit.videosVo.length > 0"
             >
               <el-row :gutter="20">
@@ -173,8 +152,6 @@
                 </el-col>
               </el-row>
             </div>
-              </div>
-            </el-card>
           </el-col>
         </el-row>
       </div>
@@ -257,43 +234,42 @@
 </template>
 
 <script>
-import SearchBar from "@/components/SearchBar";
 import AudioPlayer from "@/components/AudioPlayer";
 import CustomTitle from "@/components/CustomTitle";
 import ReaderOperations from "@/components/ReaderOperations";
 import Card from "@/views/personal/components/Card";
 import Video from "@/components/Video";
 import QRCode from "qrcodejs2";
-import { getDisplayById } from "@/api/display";
 import MenuList from "@/components/MenuList";
+import NormalPlayer from "@/components/AudioPlayer/NormalPlayer.vue";
 export default {
   components: {
-    SearchBar,
     CustomTitle,
     AudioPlayer,
     ReaderOperations,
     MenuList,
     Video,
     Card,
+    NormalPlayer,
     "el-image-viewer": () =>
       import("element-ui/packages/image/src/image-viewer"),
   },
-
+  props: {
+    displayDetail: {
+      type: Object,
+      default: () => ({}),
+    },
+    dicts: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
   data() {
     return {
-      options: [
-        {
-          value: "name",
-          label: "文物名称",
-        },
-      ],
-      selectValue: "",
-      keyword: "",
-      displayDetail: {},
-      slideImageWidth: "",
       imgViewerVisible: false,
       relateRelics: [],
       curUnit: [],
+      imgList: [],
     };
   },
   mounted() {
@@ -314,13 +290,6 @@ export default {
       });
     },
     async loadDetail() {
-      let exhibitionId = this.$route.params.exhibitionId;
-      if (exhibitionId) {
-        let res = await getDisplayById({ exhibitionId });
-        if (res.code == 0) {
-          this.displayDetail = res.data;
-          // debugger
-          // 处理单元数据
       if (
         this.displayDetail.exhibitionUnits &&
         this.displayDetail.exhibitionUnits.length > 0
@@ -328,7 +297,6 @@ export default {
         this.curUnit = this.displayDetail.exhibitionUnits[0];
       }
       processUnit(this.displayDetail.exhibitionUnits);
-          // console.log(unit);
       function processUnit(list) {
         for (let o of list || []) {
           if (o.children) {
@@ -340,14 +308,10 @@ export default {
           }
         }
       }
-          // 获取关联文物
-          // this.loadCrRecommend();
       this.$nextTick(() => {
         // this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
         // this.$refs.AudioPlayer.play();
       });
-        }
-      }
     },
 
     handleBack() {
@@ -358,9 +322,9 @@ export default {
       this.imgViewerVisible = false;
     },
 
-    handelPreviewImages() {
+    handelPreviewImages(images) {
       this.imgViewerVisible = true;
-      this.imgList = this.displayDetail.imagesVo.map((item) => this.$getFullUrl(item.url));
+      this.imgList = images.map((item) => this.$getFullUrl(item.url));
     },
     handleToDetail(exhibitionId) {
       console.log(crId);
@@ -369,15 +333,37 @@ export default {
     handleOpenUnit(item) {
       this.curUnit = item;
     },
+    reload() {
+      this.$emit("reload");
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.mr-20 {
-  margin-right: 20px;
-}
 $label: #9f9c9a;
+
+/**公共样式 */
+.enlarge {
+  position: absolute;
+  bottom: 60px;
+  right: 40px;
+  display: flex;
+  z-index: 9;
+  background-color: #c1925b;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+  cursor: pointer;
+  img {
+    width: 24px;
+    height: 24px;
+  }
+}
 .search {
   width: 1200px;
   margin: auto;
@@ -388,14 +374,23 @@ $label: #9f9c9a;
   margin: 60px auto;
   background-color: #fff;
   padding: 60px;
+  // 返回按钮
   .back {
     font-size: 18px;
-    font-weight: bold;
-    margin-bottom: 40px;
-    .el-button {
+    display: flex;
+    align-items: center;
     color: $label;
+    cursor: pointer;
+    .svg-icon {
+      font-size: 28px;
+      margin-right: 10px;
     }
+    span {
+      font-size: 16px;
     }
+  }
+
+  // 描述框
   .detail-container {
     margin-bottom: 32px;
     // display: flex;
@@ -403,6 +398,7 @@ $label: #9f9c9a;
       max-width: 100%;
       height: auto;
     }
+
     .cr-images {
       width: 700px;
       // margin-right: 32px;
@@ -410,33 +406,19 @@ $label: #9f9c9a;
       .el-image {
         background-color: #f5f5f9;
       }
-      .enlarge {
-        position: absolute;
-        bottom: 60px;
-        right: 40px;
-        display: flex;
-        z-index: 9;
-        background-color: #c1925b;
-        width: 40px;
-        height: 40px;
-        border-radius: 12px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-right: 10px;
-        cursor: pointer;
-        img {
-          width: 24px;
-          height: 24px;
-        }
     }
-    }
-    .relic-info {
+    .relic-info.el-col {
+      padding-right: 0 !important;
       .info-title {
         display: flex;
         // align-items: center;
         flex-direction: column;
         margin-bottom: 40px;
+        .title {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
         .play {
           margin-left: 10px;
           font-size: 32px;
@@ -462,22 +444,6 @@ $label: #9f9c9a;
           }
         }
       }
-
-      .view-3d {
-        margin-top: 32px;
-        padding: 6px 10px;
-        width: 100%;
-        background-color: #c1925b;
-        border-radius: 48px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: white;
-        cursor: pointer;
-        img {
-          margin-right: 10px;
-        }
-      }
     }
 
     .title-container {
@@ -496,11 +462,38 @@ $label: #9f9c9a;
       text-indent: 32px;
     }
   }
+
+  // 展览介绍
+  .intro {
+    .intro_text {
+      line-height: 30px;
+    }
+  }
+  // 布展单元
+  .unit {
+    .unit-content {
+      line-height: 30px;
+      .unit-content_intro {
+        margin-bottom: 20px;
+      }
+      .unit-content_images {
+        .unit-content_images_container {
+          position: relative;
+        }
+        .unit-content_images_desc {
+          display: flex;
+          justify-content: center;
+        }
+      }
+    }
+  }
+  // 关联文献
   .relate-book {
     .book-item {
       margin-bottom: 10px;
     }
   }
+  // 关联文物
   .relate-cultual-relic {
     .display-group {
       margin-top: 24px;
@@ -539,7 +532,7 @@ $label: #9f9c9a;
       }
     }
   }
-
+  // 关联视频
   .relate-video {
     .video-container {
       display: flex;

src/views/display/components/RedStyle.vue

+<template>
+  <div class="display-detail">
+    <div class="content" id="content">
+      <!-- 展览图片 -->
+      <div
+        class="
+          content-item
+          display-detail_imgs
+          wow
+          animate__animated animate__fadeInDownBig
+        "
+        ref="imgs"
+        v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
+      >
+        <swiper :options="swiperOption" ref="mySwiper">
+          <swiper-slide
+            v-for="(item, index) in displayDetail.imagesVo"
+            :key="index"
+          >
+            <div class="img-container">
+              <img :src="item.url" alt="" srcset="" />
+            </div>
+          </swiper-slide>
+          <div class="swiper-pagination" slot="pagination"></div>
+          <div class="swiper-button-prev" slot="button-prev"></div>
+          <div class="swiper-button-next" slot="button-next"></div>
+        </swiper>
+      </div>
+      <!-- 展览基本信息 -->
+      <div
+        class="
+          content-item
+          display-detail_basic_info
+          wow
+          animate__animated animate__fadeInUp
+        "
+      >
+        <div class="wrapper">
+          <div class="top">
+            <div class="top-wrapper">
+              <div class="film-img-container">
+                <img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
+              </div>
+              <div class="film-img-container">
+                <img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
+              </div>
+            </div>
+          </div>
+          <div class="bottom">
+            <div class="bottom-wrapper">
+              <div class="film-img-container">
+                <img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
+              </div>
+              <div class="film-img-container">
+                <img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
+              </div>
+            </div>
+          </div>
+          <div class="info-container">
+            <div class="info-container-left">
+              <el-image
+                :src="$getFullUrl(displayDetail.faceImageUrl)"
+                fit="cover"
+                @click.native="
+                  handelPreviewImages([displayDetail.faceImageUrl])
+                "
+              ></el-image>
+            </div>
+            <div class="info-container-right">
+              <div class="info-title">
+                <div class="title">{{ displayDetail.title }}</div>
+                <div class="view-count">
+                  <svg-icon icon-class="view"></svg-icon>
+                  <span>{{ displayDetail.browseCount }}</span>
+                </div>
+              </div>
+              <el-row>
+                <el-col :span="14">
+                  <div class="basic-info">
+                    <div class="body-item">
+                      <span class="label">关键词</span>
+                      <span class="value">{{ displayDetail.keyword }}</span>
+                    </div>
+                    <div class="body-item">
+                      <span class="label">展览类型</span>
+                      <span class="value">{{
+                        dicts.display_type[displayDetail.type]
+                      }}</span>
+                    </div>
+                    <div class="body-item">
+                      <span class="label">展览性质</span>
+                      <span class="value">{{
+                        dicts.display_character[displayDetail.displayCharacter]
+                      }}</span>
+                    </div>
+                    <div class="body-item">
+                      <span class="label">展览单位</span>
+                      <span class="value">{{ displayDetail.deptName }}</span>
+                    </div>
+                    <div class="body-item">
+                      <span class="label">展览地区</span>
+                      <span class="value">{{ displayDetail.regionName }}</span>
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="10">
+                  <ReaderOperations
+                    :loveCount="displayDetail.loveCount"
+                    :loveCountStatus="Boolean(displayDetail.loveCountStatus)"
+                    :collectCount="displayDetail.collectCount"
+                    :collectCountStatus="
+                      Boolean(displayDetail.collectCountStatus)
+                    "
+                    :sourceId="displayDetail.exhibitionId"
+                    :title="displayDetail.title"
+                    :sourceType="'biz_exhibition'"
+                    @reload="reload"
+                    :selectColor="'#a30e0c'"
+                  />
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 展览简介 -->
+      <div
+        class="
+          content-item
+          display-detail_intro
+          wow
+          animate__animated animate__fadeInUp
+        "
+      >
+        <div class="wrapper">
+          <div class="custom-title">展览简介</div>
+          <div class="intro-content">
+            <div class="intro-content-container">{{ displayDetail.intro }}</div>
+          </div>
+          <div
+            class="intro-video"
+            v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
+          >
+            <el-carousel :interval="4000" type="card" height="260px">
+              <el-carousel-item
+                v-for="item in displayDetail.videosVo"
+                :key="item.fileId"
+              >
+                <Video :url="$getFullUrl(item.url)" />
+              </el-carousel-item>
+            </el-carousel>
+          </div>
+        </div>
+      </div>
+      <!--展览单元  -->
+      <div
+        class="
+          content-item
+          display-detail_units
+          wow
+          animate__animated animate__fadeInUp
+        "
+        ref="units"
+        v-if="displayDetail.exhibitionUnits.length > 0"
+      >
+        <div class="wrapper">
+          <div class="custom-title units">展览单元</div>
+          <div class="units-content">
+            <div class="left-menu">
+              <div
+                class="left-menu-item"
+                v-for="(item, index) in displayDetail.exhibitionUnits"
+                :key="index"
+                @click="handleClickUnitTitle(item)"
+              >
+                <!-- {{ item.imagesVo }} -->
+                <div
+                  :class="{ 'base-img': true, active: currentUnit == item }"
+                  :id="item.euId"
+                  v-if="item.imagesVo && item.imagesVo.length > 0"
+                >
+                  <img :src="item.imagesVo[0].pressUrl" alt="" />
+                </div>
+                <div class="text">{{ item.title }}</div>
+              </div>
+            </div>
+            <div class="right-content">
+              <el-row v-if="currentUnit && currentUnit.imagesVo.length > 0">
+                <el-col
+                  :span="i == 0 ? 24 : 8"
+                  v-for="(v, i) in currentUnit.imagesVo"
+                  :key="i"
+                >
+                  <div class="img-container">
+                    <img :src="v.pressUrl" alt="" />
+                  </div>
+                  <div class="unit-name-intro" v-if="i == 0">
+                    <div class="unit-name">{{ currentUnit.title }}</div>
+                    <div class="unit-intro">{{ currentUnit.intro }}</div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+          <!-- <div class="units-content">
+            <div
+              class="units-content-item"
+              v-for="(item, index) in displayDetail.exhibitionUnits"
+              :key="index"
+            >
+              <div class="units-content-container">
+                <div class="title">{{ item.title }}</div>
+                <div class="intro">{{ item.intro }}</div>
+                <div
+                  class="imgs"
+                  v-if="item.imagesVo && item.imagesVo.length > 0"
+                >
+                  <el-carousel
+                    :interval="4000"
+                    type="card"
+                    height="200px"
+                    v-if="item.imagesVo.length > 3"
+                  >
+                    <el-carousel-item
+                      v-for="(img, i) in item.imagesVo"
+                      :key="i"
+                    >
+                      <el-image
+                        :src="img.pressUrl"
+                        @click.native="handelPreviewImages(item.imagesVo)"
+                      ></el-image>
+                    </el-carousel-item>
+                  </el-carousel>
+                  <el-row :gutter="20" v-else>
+                    <el-col
+                      :span="10"
+                      v-for="(img, i) in item.imagesVo"
+                      :key="i"
+                    >
+                      <el-image
+                        :src="img.pressUrl"
+                        @click.native="handelPreviewImages(item.imagesVo)"
+                      ></el-image>
+                    </el-col>
+                  </el-row>
+                </div>
+                <div
+                  class="imgs"
+                  v-if="item.culturalRelicVo && item.culturalRelicVo.length > 0"
+                >
+                  <el-carousel :interval="4000" type="card" height="200px">
+                    <el-carousel-item
+                      v-for="item in displayDetail.culturalRelicVo"
+                      :key="item.fileId"
+                    >
+                      <el-image :src="img.faceImagePressUrl"></el-image>
+                    </el-carousel-item>
+                  </el-carousel>
+                  <div class="desc-title">相关文物</div>
+                </div>
+              </div>
+
+              <div
+                class="units-content-img"
+                :style="{
+                  backgroundImage: `url('${item.imagesVo[0].pressUrl}')`,
+                }"
+              ></div>
+            </div>
+          </div> -->
+        </div>
+      </div>
+      <!-- 相关文献 -->
+      <div
+        class="
+          content-item
+          display-detail_lts
+          wow
+          animate__animated animate__fadeInUp
+        "
+        v-if="
+          displayDetail.literatureVo && displayDetail.literatureVo.length > 0
+        "
+      >
+        <div class="wrapper">
+          <div class="custom-title">相关文献</div>
+          <div class="lts-content">
+            <el-table
+              :data="displayDetail.literatureVo"
+              :header-cell-style="{
+                background: '#eeeeee',
+                color: '#333',
+              }"
+              :row-style="tableRowStyle"
+            >
+              <el-table-column
+                prop="name"
+                label="名称"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="authors"
+                label="作者"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="date"
+                label="出版时间"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                prop="source"
+                label="出版所在刊物"
+              ></el-table-column>
+              <el-table-column label="阅读" align="center">
+                <template slot-scope="scope">
+                  <div class="pdf-img" @click="handleViewLt(scope.row)">
+                    <img src="@/assets/imgs/display/ch/pdf-icon.png" />
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image-viewer
+      v-if="imgViewerVisible"
+      :on-close="closeImgViewer"
+      :url-list="imgList"
+    />
+  </div>
+</template>
+
+<script>
+import AudioPlayer from "@/components/AudioPlayer";
+import ReaderOperations from "@/components/ReaderOperations";
+import Card from "@/views/personal/components/Card";
+import Video from "@/components/Video";
+import { debounce, previewFile } from "@/utils/index";
+import ChStyleUnit from "./ChStyleUnit.vue";
+import { swiper, swiperSlide } from "vue-awesome-swiper";
+import "swiper/dist/css/swiper.css";
+export default {
+  components: {
+    AudioPlayer,
+    ReaderOperations,
+    Video,
+    Card,
+    ChStyleUnit,
+    swiper,
+    swiperSlide,
+    "el-image-viewer": () =>
+      import("element-ui/packages/image/src/image-viewer"),
+  },
+  props: {
+    displayDetail: {
+      type: Object,
+      default: () => ({}),
+    },
+    dicts: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      imgViewerVisible: false,
+      relateRelics: [],
+      audioPlaying: true,
+      swiperOption: {
+        loop: true,
+        autoplay: {
+          delay: 3000,
+          stopOnLastSlide: false,
+          disableOnInteraction: false,
+        },
+        effect: "fade",
+        fadeEffect: {
+          crossFade: true,
+        },
+        grabCursor: true,
+        // 显示分页
+        pagination: {
+          el: ".swiper-pagination",
+          clickable: true, //允许分页点击跳转
+        },
+        // 设置点击箭头
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      },
+      currentUnit: null,
+    };
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.swiper;
+    },
+  },
+  async mounted() {
+    this.loadDetail();
+    // let units = this.$refs.
+  },
+  methods: {
+    async loadDetail() {
+      processUnit(this.displayDetail.exhibitionUnits);
+      this.currentUnit =
+        this.displayDetail.exhibitionUnits.length > 0
+          ? this.displayDetail.exhibitionUnits[0]
+          : null;
+      function processUnit(list) {
+        for (let o of list || []) {
+          if (o.children) {
+            if (o.children.length == 0) {
+              o.children = null;
+            } else {
+              processUnit(o.children);
+            }
+          }
+        }
+      }
+      this.$nextTick(() => {
+        // if (
+        //   this.displayDetail.videosVo &&
+        //   this.displayDetail.videosVo.length > 0
+        // ) {
+        //   this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
+        //   this.$refs.AudioPlayer.play();
+        // }
+      });
+    },
+
+    //节流函数
+    throttle(fn, gapTime) {
+      let _this = this;
+      return function () {
+        let _nowTime = +new Date();
+        if (_nowTime - _this._lastTime > gapTime || !_this._lastTime) {
+          fn(...arguments); // 函数可以带参数
+          _this._lastTime = _nowTime;
+        }
+      };
+    },
+
+    // 关联文献的行样式调整
+    tableRowStyle({ row, rowIndex }) {
+      if (rowIndex % 2 == 0) {
+        return {
+          background: "#f9f9f9 !important",
+        };
+      } else {
+        return {
+          background: "#fff !important",
+        };
+      }
+    },
+
+    // 预览关联文献
+    handleViewLt(item) {
+      previewFile(item.files[0].url, item.files[0].name);
+    },
+
+    // 点击音频
+    handleClickAudio() {
+      this.audioPlaying = !this.audioPlaying;
+      if (this.audioPlaying) {
+        this.$refs["AudioPlayer"].play();
+        // console.log(this.$refs['audioContainer']);
+      } else {
+        this.$refs["AudioPlayer"].pause();
+      }
+    },
+
+    reload() {
+      this.$emit("reload");
+    },
+
+    handelPreviewImages(images) {
+      this.imgViewerVisible = true;
+      this.imgList = images.map((item) => this.$getFullUrl(item.url));
+    },
+
+    closeImgViewer() {
+      this.imgViewerVisible = false;
+    },
+
+    handleClickUnitTitle(item) {
+      this.currentUnit = item;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// 中国风主题样式
+/**公共样式开始 */
+.wrapper {
+  width: 1200px;
+}
+.custom-title {
+  width: 50px;
+  background-color: #d72f3f;
+  min-height: 300px;
+  color: #fff;
+  font-size: 28px;
+  writing-mode: vertical-rl;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
+  letter-spacing: 10px;
+}
+.units {
+  background-image: linear-gradient(to bottom, #660d04, #520002);
+  min-height: 400px;
+}
+.content-item {
+  width: 100%;
+}
+/**公共样式结束 */
+
+/**样式开始 */
+.display-detail {
+  overflow: hidden;
+  .content {
+    width: 100%;
+    overflow: hidden;
+
+    /**轮播图 */
+    .display-detail_imgs {
+      .img-container {
+        height: 430px;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+
+    /**基本信息 */
+    .display-detail_basic_info {
+      margin: 80px 0;
+      display: flex;
+      justify-content: center;
+
+      .wrapper {
+        min-height: 200px;
+        border-left: 4px solid #ccc9cd;
+        border-right: 4px solid #ccc9cd;
+        position: relative;
+        overflow: hidden;
+        &:hover {
+          .top-list,
+          .bottom-list {
+            animation-play-state: paused;
+            -webkit-animation-play-state: paused;
+          }
+        }
+        .top {
+          position: absolute;
+          left: 0;
+          top: 0;
+          overflow: hidden;
+          display: flex;
+          width: 1200px;
+        }
+        .bottom {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          overflow: hidden;
+        }
+        .top-wrapper,
+        .bottom-wrapper {
+          display: flex;
+          width: 2400px;
+        }
+        .film-img-container {
+          width: 1200px;
+          animation: filmMoveLeft 60s ease infinite;
+          height: 40px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+
+      .info-container {
+        display: flex;
+        justify-content: space-between;
+        padding: 40px 20px 40px 0;
+        height: 100%;
+        .info-container-left {
+          min-height: 200px;
+          margin-right: 40px;
+          flex: 1;
+          .el-image {
+            height: 100%;
+            width: 100%;
+            background-color: #f5f5f9;
+          }
+        }
+        .info-container-right {
+          flex: 1;
+          min-height: 200px;
+          padding: 40px 0 10px;
+          .info-title {
+            padding-bottom: 20px;
+            margin-bottom: 20px;
+            border-bottom: 2px solid #f2f2f2;
+            display: flex;
+            justify-content: space-between;
+
+            .title {
+              font-size: 32px;
+              font-weight: 500;
+              color: #8b0000;
+            }
+            .view-count {
+              font-size: 18px;
+              margin-top: 10px;
+              color: #999;
+              font-weight: normal;
+              display: flex;
+              align-items: center;
+              .svg-icon {
+                margin-right: 10px;
+              }
+            }
+          }
+          .basic-info {
+            .body-item {
+              display: flex;
+              .label {
+                display: block;
+                width: 80px;
+                margin-right: 26px;
+                margin-bottom: 10px;
+                font-weight: bold;
+                color: #9f9c9a;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    /**简介和视频 */
+    .display-detail_intro {
+      display: flex;
+      justify-content: center;
+      .wrapper {
+        display: flex;
+        background-color: #fafafa;
+        border: 2px solid #cccccc;
+        border-left: none;
+        .intro-content,
+        .intro-video {
+          flex: 1;
+          padding: 40px 0;
+        }
+        .intro-content {
+          padding: 20px;
+          text-indent: 32px;
+          background-color: #f3f3f3;
+          margin: 20px;
+          line-height: 28px;
+        }
+        .intro-video {
+          padding: 20px;
+        }
+      }
+    }
+
+    /**展览单元 */
+    .display-detail_units {
+      display: flex;
+      justify-content: center;
+      margin-top: 100px;
+      // height: 750px;
+      // height: calc(100vh);
+      background-image: url("@/assets/imgs/display/red/unit-bg.jpg");
+      .wrapper {
+        // width;
+        display: flex;
+        border: 2px solid #cccccc;
+        border-left: none;
+        transition: width 0.5s ease-in-out;
+        .units-content {
+          flex: 1;
+          display: flex;
+          .left-menu {
+            width: 524px;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            .left-menu-item {
+              height: 54px;
+              width: 100%;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              position: relative;
+              padding: 0 22px;
+              display: flex;
+              align-items: center;
+              background: #520002;
+              &:hover {
+                .text {
+                  color: #fff;
+                }
+              }
+              .base-img {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                left: 0;
+                top: 0;
+                // background-position: center;
+                // background-size: cover;
+                transition: all 0.3s ease;
+                img {
+                  width: 100%;
+                  height: 100%;
+                  object-fit: cover;
+                  filter: brightness(0.4);
+                  transition: all 0.3s ease;
+                }
+                &:hover {
+                  background: #520002;
+                  img {
+                    display: none;
+                  }
+                }
+              }
+              .active {
+                background: #520002;
+                img {
+                  display: none;
+                }
+              }
+              .text {
+                font-size: 24px;
+                font-weight: 400;
+                color: #ccc;
+                position: relative;
+                z-index: 1;
+              }
+            }
+          }
+          .right-content {
+            flex: 1;
+
+            .el-col {
+              &:first-child {
+                position: relative;
+                .img-container {
+                  height: 420px;
+                }
+                .unit-name-intro {
+                  width: 100%;
+                  height: 100%;
+                  position: absolute;
+                  left: 0;
+                  top: 0;
+                  padding: 100px 28px 50px;
+                  background-image: linear-gradient(
+                    to top,
+                    rgba(0, 0, 0, 0.8),
+                    rgba(0, 0, 0, 0.1)
+                  );
+                  cursor: pointer;
+                  transition: all 0.5s ease;
+                  &:hover {
+                    background: rgba(0, 0, 0, 0.8);
+                    .unit-intro {
+                      color: #fff;
+                    }
+                  }
+                  .unit-name {
+                    font-size: 48px;
+                    font-weight: bold;
+                    color: #ffffff;
+                    text-align: center;
+                    margin-bottom: 40px;
+                  }
+                  .unit-intro {
+                    font-size: 16px;
+                    font-weight: 400;
+                    color: #ccc;
+                    text-indent: 32px;
+                    line-height: 40px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 5;
+                    -webkit-box-orient: vertical;
+                  }
+                }
+              }
+            }
+            .img-container {
+              width: 100%;
+              // height: 100%;
+              height: 162px;
+              overflow: hidden;
+              cursor: pointer;
+              &:hover {
+                img {
+                  transform: scale(1.1);
+                }
+              }
+              img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                transition: all ease 0.5s;
+              }
+            }
+          }
+        }
+
+        /**以下为手风琴样式（暂时弃用） */
+        // &:hover {
+        //   width: 100%;
+        //   .custom-title,
+        //   .units {
+        //     display: none;
+        //   }
+        // }
+        // .units-content {
+        //   display: flex;
+        //   // flex-wrap: wrap;
+        //   flex: 1;
+        //   &:hover {
+        //     .units-content-item {
+        //       width: 10vw;
+        //       justify-content: flex-start;
+        //       align-items: flex-start;
+        //       padding: 50px;
+        //       .title {
+        //         writing-mode: vertical-rl;
+        //         color: #ccc;
+        //       }
+        //     }
+        //   }
+        //   .units-content-item {
+        //     width: 25%;
+        //     // height: calc(100vh - 4px);
+        //     display: flex;
+        //     justify-content: center;
+        //     align-items: center;
+        //     position: relative;
+        //     transition: width 0.5s ease 0.1s;
+        //     padding: 50px;
+        //     overflow-x: hidden;
+        //     &:hover {
+        //       // width: 70%;
+        //       width: 70vw;
+        //       .units-content-img {
+        //         filter: none;
+        //         background-image: url("@/assets/imgs/display/red/unit-bg.jpg") !important;
+        //       }
+        //       .title {
+        //         writing-mode: horizontal-tb;
+        //         color: #666;
+        //         font-size: 40px !important;
+        //       }
+        //       .intro {
+        //         padding: 60px 0;
+        //       }
+        //       .intro,
+        //       .imgs,
+        //       .desc-title {
+        //         display: block !important;
+        //       }
+        //       .desc-title {
+        //         display: flex !important;
+        //       }
+        //     }
+        //     .units-content-container {
+        //       position: relative;
+        //       z-index: 1;
+        //       color: #fff;
+        //       display: flex;
+        //       flex-direction: column;
+        //       .title {
+        //         font-size: 32px;
+        //         font-family: "KaiTi";
+        //       }
+        //       .intro {
+        //         margin-top: 10px;
+        //         display: none;
+        //         font-family: "KaiTi";
+        //         color: #333;
+        //         text-indent: 32px;
+        //         font-size: 22px;
+        //         line-height: 36px;
+        //         width: calc(68vw - 40px);
+        //         margin-bottom: 10px;
+        //       }
+        //       .imgs {
+        //         display: none;
+
+        //         .el-image {
+        //           width: 100%;
+        //           height: 300px;
+        //         }
+        //       }
+        //       .desc-title {
+        //         display: none;
+        //         font-size: 14px;
+        //         color: #333;
+        //         display: flex;
+        //         justify-content: center;
+        //       }
+        //     }
+        //     .units-content-img {
+        //       position: absolute;
+        //       left: 0;
+        //       top: 0;
+        //       width: 100%;
+        //       height: 100%;
+        //       // z-index: -1;
+        //       -webkit-filter: brightness(0.3);
+        //       filter: brightness(0.3);
+        //       // transition: all 1s ease;
+        //       cursor: pointer;
+        //       background-size: cover;
+        //       background-repeat: no-repeat;
+        //     }
+        //   }
+        // }
+      }
+    }
+
+    /**关联文献 */
+    .display-detail_lts {
+      display: flex;
+      justify-content: center;
+      margin: 100px 0;
+
+      .wrapper {
+        display: flex;
+        background-color: #fafafa;
+        border: 2px solid #cccccc;
+        border-left: none;
+        .lts-content {
+          flex: 1;
+          padding: 10px;
+        }
+      }
+    }
+  }
+}
+::v-deep .el-carousel__item--card {
+  width: 100%;
+  height: 100%;
+  transform: translateX(0) scale(1) !important;
+}
+
+@keyframes filmMoveLeft {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-1200px);
+  }
+}
+@keyframes filmMoveRight {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(1200px);
+  }
+}
+
+@keyframes audioRotate {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@-webkit-keyframes audioRotate {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+.animation-play-paused {
+  animation-play-state: paused;
+  -webkit-animation-play-state: paused; /* Safari 和 Chrome */
+}
+</style>
\ No newline at end of file

src/views/display/index.vue

@@ -192,9 +192,9 @@ export default {
 
     handleClick(item) {
       console.log(item);
-      const { exhibitionId } = item;
+      const { themeType,exhibitionId } = item;
       this.$router.push({
-        path: "display/" + exhibitionId,
+        path: `display/${themeType}/${exhibitionId}` 
       });
     },
     defImg(e) {

src/views/museum/Detail.vue

@@ -2,13 +2,9 @@
 <template>
   <div class="display-detail">
     <div class="wrapper">
-      <div class="back">
-        <el-button
-          type="text"
-          icon="el-icon-arrow-left"
-          @click.native="handleBack"
-          >返回上页</el-button
-        >
+      <div class="back"  @click="handleBack"> 
+        <svg-icon icon-class="mz-fh"></svg-icon>
+        <span>返回上页 </span>
       </div>
       <el-row class="detail-container" :gutter="10">
         <el-col class="cr-images" :span="18">
@@ -166,10 +162,16 @@ $label: #9f9c9a;
   padding: 40px;
   .back {
     font-size: 18px;
-    font-weight: bold;
-    margin-bottom: 40px;
-    .el-button {
+    display: flex;
+    align-items: center;
     color: $label;
+    cursor: pointer;
+    .svg-icon {
+      font-size: 28px;
+      margin-right: 10px;
+    }
+    span {
+      font-size: 16px;
     }
   }
   .detail-container {
@@ -238,22 +240,6 @@ $label: #9f9c9a;
           }
         }
       }
-
-      .view-3d {
-        margin-top: 32px;
-        padding: 6px 10px;
-        width: 100%;
-        background-color: #c1925b;
-        border-radius: 48px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: white;
-        cursor: pointer;
-        img {
-          margin-right: 10px;
-        }
-      }
     }
 
     .title-container {