合并提交

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>
+<?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
\ 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/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/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>