修改文物布局、增加图片轮播组件

package-lock.json

@@ -1983,29 +1983,6 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
-      },
-      "dependencies": {
-        "@vue/vue-loader-v15": {
-          "version": "npm:vue-loader@15.10.0",
-          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.0.tgz",
-          "integrity": "sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==",
-          "dev": true,
-          "requires": {
-            "@vue/component-compiler-utils": "^3.1.0",
-            "hash-sum": "^1.0.2",
-            "loader-utils": "^1.1.0",
-            "vue-hot-reload-api": "^2.3.0",
-            "vue-style-loader": "^4.1.0"
-          },
-          "dependencies": {
-            "hash-sum": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
-              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-              "dev": true
-            }
-          }
-        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2156,6 +2133,27 @@
         "eslint-import-resolver-webpack": "^0.13.1"
       }
     },
+    "@vue/vue-loader-v15": {
+      "version": "npm:vue-loader@15.10.0",
+      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.0.tgz",
+      "integrity": "sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==",
+      "dev": true,
+      "requires": {
+        "@vue/component-compiler-utils": "^3.1.0",
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.1.0",
+        "vue-hot-reload-api": "^2.3.0",
+        "vue-style-loader": "^4.1.0"
+      },
+      "dependencies": {
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+          "dev": true
+        }
+      }
+    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@@ -4106,20 +4104,11 @@
       "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
     },
     "dom7": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
-      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
-      "dev": true,
+      "version": "4.0.4",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-4.0.4.tgz",
+      "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
       "requires": {
-        "ssr-window": "^2.0.0"
-      },
-      "dependencies": {
-        "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==",
-          "dev": true
-        }
+        "ssr-window": "^4.0.0"
       }
     },
     "domelementtype": {
@@ -9966,10 +9955,9 @@
       }
     },
     "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==",
-      "dev": true
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
     },
     "ssri": {
       "version": "8.0.1",
@@ -10482,13 +10470,12 @@
       }
     },
     "swiper": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-4.5.1.tgz",
-      "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
-      "dev": true,
+      "version": "7.4.1",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-7.4.1.tgz",
+      "integrity": "sha512-dhbL4tpYFvHug1J7GnKElfTi6EYhlZy/vNZRhHkWFyUsWZ1Vovipxj3la5gqllMogygXJMe3zvVv+f6eppvWiA==",
       "requires": {
-        "dom7": "^2.1.3",
-        "ssr-window": "^1.0.1"
+        "dom7": "^4.0.2",
+        "ssr-window": "^4.0.2"
       }
     },
     "table": {
@@ -11195,6 +11182,41 @@
       "requires": {
         "object-assign": "^4.1.1",
         "swiper": "^4.0.7"
+      },
+      "dependencies": {
+        "dom7": {
+          "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"
+          },
+          "dependencies": {
+            "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==",
+              "dev": true
+            }
+          }
+        },
+        "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==",
+          "dev": true
+        },
+        "swiper": {
+          "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"
+          }
+        }
       }
     },
     "vue-eslint-parser": {

package.json

@@ -23,6 +23,7 @@
     "qrcodejs2": "^0.0.2",
     "sass-loader": "^13.0.2",
     "svgo": "^2.8.0",
+    "swiper": "^7.4.1",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vue-video-player": "^5.0.2",

src/assets/styles/index.scss

@@ -12,7 +12,8 @@
 }
 
 #app {
-  font-family: "Alibaba-PuHuiTi",Avenir, Helvetica, Arial, sans-serif;
+  // font-family: "Alibaba-PuHuiTi",Avenir, Helvetica, Arial, sans-serif;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/components/ListBanner/index.vue

@@ -44,7 +44,7 @@ export default {
     }
     .text {
       font-size: 28px;
-      font-family: "Alibaba-PuHuiTi";
+      // font-family: "Alibaba-PuHuiTi";
       font-weight: 400;
       color: #2069c4;
     }

src/components/NavBar/index.vue

@@ -532,7 +532,7 @@ export default {
           color: #fff;
           display: flex;
           align-items: center;
-          font-family: "Alibaba-PuHuiTi";
+          // font-family: "Alibaba-PuHuiTi";
           position: relative;
           height: 100%;
           text-align: center;

src/components/ReaderOperations/collect.vue

+<template>
+    <span>
+      <span class="operations">
+        <span class="operation-item" @click="handleCollect" >
+          <svg-icon
+            icon-class="collect-s"
+            :style="{
+              fontSize: iconSize + 'px',
+              color: collectCountStatus ? selectColor : '#61666d',
+            }"
+          ></svg-icon>
+          <span>{{
+            formatNum(collectCount) == 0 ? "收藏" : formatNum(collectCount)
+          }}</span>
+        </span>
+      </span>
+      <el-dialog
+        title="登录提示"
+        :visible.sync="loginDialogVisible"
+        width="30%"
+        :before-close="handleLoginClose"
+        append-to-body
+      >
+        <span>读者功能需登录进行使用，是否去登录？</span>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="loginDialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click.native="handleToLogin"
+            >确 定</el-button
+          >
+        </span>
+      </el-dialog>
+    </span>
+  </template>
+  
+  <script>
+  import { mapGetters } from "vuex";
+  import { debounce, formatNum } from "@/utils/index";
+  export default {
+    name: "ReaderOperations",
+    props: {
+      // 是否需要收藏，默认需要
+      collect: {
+        type: Boolean,
+        default: true,
+      },
+      // 收藏数量
+      collectCount: {
+        type: String,
+        default: "0",
+      },
+      // 收藏状态
+      collectCountStatus: {
+        type: Boolean,
+        default: false,
+      },
+      sourceId: {
+        type: String,
+        default: "",
+      },
+      // 来源类型 biz_cultural_relic-文物；biz_exhibition-布展；biz_elite_exhibition-精品展
+      sourceType: {
+        type: String,
+        default: "",
+      },
+      title: {
+        type: String,
+        default: "",
+      },
+      iconSize: {
+        type: [Number, String],
+        default: 22,
+      },
+      selectColor: {
+        type: String,
+        default: "#2069c4",
+      },
+    },
+    data() {
+      return {
+        loginDialogVisible: false,
+      };
+    },
+    computed: {
+      ...mapGetters(["token", "showLoginDialog"]),
+    },
+    methods: {
+      handleCollect: debounce(function () {
+        if (this.token) {
+          const params = {
+            sourceId: this.sourceId,
+            sourceType: this.sourceType,
+            title: this.title,
+          };
+          this.$store.dispatch("user/toggleCollect", params).then(() => {
+            if (!this.collectCountStatus) {
+              // 点赞
+              this.$message.success("已收藏！");
+            } else {
+              this.$message.success("已取消收藏！");
+            }
+            this.$emit("reload");
+          });
+        } else {
+          this.loginDialogVisible = true;
+        }
+      }),
+  
+      handleLoginClose() {
+        this.loginDialogVisible = false;
+      },
+  
+      handleToLogin() {
+        this.loginDialogVisible = false;
+        if (!this.showLoginDialog) {
+          this.$store.commit("app/OPEN_LOGIN_DIALOG", true);
+        }
+        // this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+      },
+      formatNum(num) {
+        return formatNum(num);
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .operations {
+    // margin-top: 22px;
+    display: flex;
+    justify-content: space-between;
+    .operation-item {
+      display: flex;
+      align-items: center;
+      // margin-right: 32px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    .svg-icon {
+      margin-right: 10px;
+      font-size: 24px;
+      color: #61666d;
+    }
+    .collect {
+      color: #831122;
+    }
+  }
+  
+  .el-button--text {
+    color: #2069c4;
+  }
+
+  ::v-deep .el-input-group__append {
+    padding: 0 40px;
+  }
+  
+  ::v-deep .dialog-footer {
+    .el-button {
+      border-radius: 0;
+    }
+    .el-button--primary {
+      border: none;
+      background-color: #2069c4;
+    }
+  }
+  </style>
\ No newline at end of file

src/components/ReaderOperations/index.vue

 <template>
-  <div>
-    <div class="operations">
+  <div class="reader-operations">
+    <span class="operations">
       <span class="operation-item" v-if="like">
         <svg-icon
           @click="handleLike"
-          :icon-class="loveCountStatus ? 'mz-like-s' : 'mz-like'"
+          icon-class="like-s"
           :style="{
             fontSize: iconSize + 'px',
             color: loveCountStatus ? selectColor : '#61666d',
@@ -16,7 +16,7 @@
       </span>
       <span class="operation-item" @click="handleCollect" v-if="collect">
         <svg-icon
-          :icon-class="collectCountStatus ? 'collect-s' : 'collect'"
+          icon-class="collect-s-2"
           :style="{
             fontSize: iconSize + 'px',
             color: collectCountStatus ? selectColor : '#61666d',
@@ -28,16 +28,14 @@
       </span>
       <span v-if="share" class="operation-item" @click="handleShare">
         <svg-icon
-          icon-class="mz-fx"
-          class="collect"
+          icon-class="share2"
           :style="{
             fontSize: iconSize + 'px',
-            color: selectColor,
           }"
         ></svg-icon>
         <span>分享</span>
       </span>
-    </div>
+    </span>
     <el-dialog
       title="登录提示"
       :visible.sync="loginDialogVisible"
@@ -134,7 +132,7 @@ export default {
     },
     iconSize: {
       type: [Number, String],
-      default: 22,
+      default: 28,
     },
     selectColor: {
       type: String,
@@ -232,8 +230,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.reader-operations{
+  width: 100%;
+  max-width: 300px;
+}
 .operations {
   // margin-top: 22px;
+  width: 100%;
   display: flex;
   justify-content: space-between;
   .operation-item {

src/components/ReaderOperations/like.vue

+<template>
+    <span>
+      <span class="operations">
+        <span class="operation-item">
+          <svg-icon
+            @click="handleLike"
+            :icon-class="loveCountStatus ? 'like-s' : 'like'"
+            :style="{
+              fontSize: iconSize + 'px',
+              color: loveCountStatus ? selectColor : '#61666d',
+            }"
+          ></svg-icon>
+          <span>{{
+            formatNum(loveCount) == 0 ? "点赞" : formatNum(loveCount)
+          }}</span>
+        </span>
+      </span>
+      <el-dialog
+        title="登录提示"
+        :visible.sync="loginDialogVisible"
+        width="30%"
+        :before-close="handleLoginClose"
+        append-to-body
+      >
+        <span>读者功能需登录进行使用，是否去登录？</span>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="loginDialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click.native="handleToLogin"
+            >确 定</el-button
+          >
+        </span>
+      </el-dialog>
+  
+    </span>
+  </template>
+  
+  <script>
+  import { mapGetters } from "vuex";
+  import { debounce, formatNum } from "@/utils/index";
+  export default {
+    name: "Like",
+    props: {
+
+      // 点赞数量
+      loveCount: {
+        type: String,
+        default: "0",
+      },
+      // 点赞状态
+      loveCountStatus: {
+        type: Boolean,
+        default: false,
+      },
+      sourceId: {
+        type: String,
+        default: "",
+      },
+      // 来源类型 biz_cultural_relic-文物；biz_exhibition-布展；biz_elite_exhibition-精品展
+      sourceType: {
+        type: String,
+        default: "",
+      },
+      title: {
+        type: String,
+        default: "",
+      },
+      iconSize: {
+        type: [Number, String],
+        default: 22,
+      },
+      selectColor: {
+        type: String,
+        default: "#2069c4",
+      },
+    },
+    data() {
+      return {
+        loginDialogVisible: false,
+      };
+    },
+    computed: {
+      ...mapGetters(["token", "showLoginDialog"]),
+    },
+    methods: {
+      // 点赞
+      handleLike: debounce(function () {
+        if (this.token) {
+          const params = {
+            sourceId: this.sourceId,
+            sourceType: this.sourceType,
+            title: this.title,
+          };
+          this.$store.dispatch("user/toggleLike", params).then(() => {
+            if (!this.loveCountStatus) {
+              // 点赞
+              this.$message.success("已点赞！");
+            } else {
+              this.$message.success("已取消点赞！");
+            }
+            this.$emit("reload");
+          });
+        } else {
+          this.loginDialogVisible = true;
+        }
+      }, 500),
+  
+      handleShare() {
+        this.curLink = window.location.href.toString();
+        this.shareDialogVisible = true;
+      },
+  
+      handleLoginClose() {
+        this.loginDialogVisible = false;
+      },
+  
+      handleToLogin() {
+        this.loginDialogVisible = false;
+        if (!this.showLoginDialog) {
+          this.$store.commit("app/OPEN_LOGIN_DIALOG", true);
+        }
+        // this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+      },
+      formatNum(num) {
+        return formatNum(num);
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .operations {
+    // margin-top: 22px;
+    display: flex;
+    justify-content: space-between;
+    .operation-item {
+      display: flex;
+      align-items: center;
+      // margin-right: 32px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    .svg-icon {
+      margin-right: 10px;
+      font-size: 24px;
+      color: #61666d;
+    }
+    .like {
+      color: #831122;
+    }
+    .collect {
+      color: #831122;
+    }
+  }
+  
+  .el-button--text {
+    color: #2069c4;
+  }
+  ::v-deep .el-input-group__append {
+    padding: 0 40px;
+  }
+  
+  ::v-deep .dialog-footer {
+    .el-button {
+      border-radius: 0;
+    }
+    .el-button--primary {
+      border: none;
+      background-color: #2069c4;
+    }
+  }
+  </style>
\ No newline at end of file

src/components/ReaderOperations/share.vue

+<template>
+  <span>
+    <span class="operations">
+      <span class="operation-item" @click="handleShare">
+        <svg-icon
+          icon-class="share2"
+          class="collect"
+          :style="{
+            fontSize: iconSize + 'px',
+            color: selectColor,
+          }"
+        ></svg-icon>
+        <span>分享</span>
+      </span>
+    </span>
+
+    <el-dialog
+      title="分享给朋友"
+      :visible.sync="shareDialogVisible"
+      width="40%"
+      :before-close="handleShareClose"
+      append-to-body
+    >
+      <!-- <div class="qrcode">
+        </div> -->
+      <div class="copy">
+        <!-- <div class="link">{{ curLink }}</div> -->
+        <el-input v-model="curLink" style="width: 100%">
+          <template slot="append">
+            <el-button type="text" @click.native="copyUrl">
+              <svg-icon icon-class="copy"></svg-icon>
+              复制链接</el-button
+            ></template
+          >
+        </el-input>
+      </div>
+    </el-dialog>
+  </span>
+</template>
+  
+  <script>
+import { mapGetters } from "vuex";
+import { debounce, formatNum } from "@/utils/index";
+export default {
+  name: "Share",
+  props: {
+    sourceId: {
+      type: String,
+      default: "",
+    },
+    // 来源类型 biz_cultural_relic-文物；biz_exhibition-布展；biz_elite_exhibition-精品展
+    sourceType: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    iconSize: {
+      type: [Number, String],
+      default: 22,
+    },
+    selectColor: {
+      type: String,
+      default: "#2069c4",
+    },
+  },
+  data() {
+    return {
+      shareDialogVisible: false,
+      curLink: "", //当前地址栏的链接
+    };
+  },
+  computed: {
+    ...mapGetters(["token", "showLoginDialog"]),
+  },
+  methods: {
+    handleShare() {
+      this.curLink = window.location.href.toString();
+      this.shareDialogVisible = true;
+    },
+
+    handleLoginClose() {
+      this.loginDialogVisible = false;
+    },
+    handleShareClose() {
+      this.shareDialogVisible = false;
+    },
+
+    handleToLogin() {
+      this.loginDialogVisible = false;
+      if (!this.showLoginDialog) {
+        this.$store.commit("app/OPEN_LOGIN_DIALOG", true);
+      }
+      // this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+    },
+
+    copyUrl() {
+      let inputElement = document.createElement("input");
+      inputElement.value = this.curLink;
+      document.body.appendChild(inputElement);
+      inputElement.select();
+      document.execCommand("Copy");
+      inputElement.remove();
+      this.$message.success("已复制到剪贴板！赶快去分享吧~");
+    },
+
+    formatNum(num) {
+      return formatNum(num);
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.operations {
+  // margin-top: 22px;
+  display: flex;
+  justify-content: space-between;
+  .operation-item {
+    display: flex;
+    align-items: center;
+    // margin-right: 32px;
+    cursor: pointer;
+    font-size: 14px;
+  }
+  .svg-icon {
+    margin-right: 10px;
+    font-size: 24px;
+    color: #61666d;
+  }
+}
+
+.el-button--text {
+  color: #2069c4;
+}
+
+.copy {
+  display: flex;
+  align-items: center;
+  height: 180px;
+}
+
+.qrcode {
+  .img-container {
+    width: 200px;
+    height: 200px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+::v-deep .el-input-group__append {
+  padding: 0 40px;
+}
+
+::v-deep .dialog-footer {
+  .el-button {
+    border-radius: 0;
+  }
+  .el-button--primary {
+    border: none;
+    background-color: #2069c4;
+  }
+}
+</style>
\ No newline at end of file

src/components/SlideImage/index.vue

+<template>
+  <div class="firstDiv">
+    <div class="centerDiv">
+      <div class="thumb-example">
+        <!-- 大轮播图 -->
+        <swiper
+          class="swiper gallery-top"
+          :options="swiperOptionTop"
+          ref="swiperTop"
+        >
+          <swiper-slide
+            class="slide-item"
+            v-for="(item, index) in imgList"
+            :key="index"
+          >
+            <img :src="item.pressUrl" alt="" />
+            <div class="enlarge" @click="handelPreviewImages(imgList)">
+              <img src="@/assets/imgs/enlarge-s.png" alt="" />
+            </div>
+          </swiper-slide>
+
+          <!-- <div
+            class="swiper-button-next swiper-button-white"
+            slot="button-next"
+          ></div>
+          <div
+            class="swiper-button-prev swiper-button-white"
+            slot="button-prev"
+          ></div> -->
+        </swiper>
+        <!-- 小缩略图 -->
+        <swiper
+          class="swiper gallery-thumbs"
+          :options="swiperOptionThumbs"
+          ref="swiperThumbs"
+        >
+          <swiper-slide
+            class="slide-item"
+            v-for="(item, index) in imgList"
+            :key="index"
+          >
+            <img :src="item.pressUrl" alt="" />
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+    <el-image-viewer
+      v-if="imgViewerVisible"
+      :on-close="closeImgViewer"
+      :url-list="previewList"
+    />
+  </div>
+</template>
+   
+  <script>
+import { swiper, swiperSlide } from "vue-awesome-swiper";
+//import 'swiper/css/swiper.css'
+//   import 'swiper/swiper-bundle.css'
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/thumbs";
+export default {
+  name: "SlideImage",
+  components: {
+    swiper,
+    swiperSlide,
+    "el-image-viewer": () =>
+      import("element-ui/packages/image/src/image-viewer"),
+  },
+  props: {
+    imgKey: {
+      type: String,
+      default: "pressUrl",
+    },
+    imgList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      swiperOptionTop: {
+        loop: false,
+        loopedSlides: 8, // looped slides should be the same
+        spaceBetween: 10,
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      },
+      swiperOptionThumbs: {
+        loop: false,
+        loopedSlides: 8, // looped slides should be the same
+        spaceBetween: 10,
+        centeredSlides: true,
+        slidesPerView: "auto",
+        touchRatio: 0.2,
+        slideToClickedSlide: true,
+      },
+      imgViewerVisible: false,
+    };
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      const swiperTop = this.$refs.swiperTop.swiper;
+      const swiperThumbs = this.$refs.swiperThumbs.swiper;
+      console.log(this.$refs);
+      swiperTop.controller.control = swiperThumbs;
+      swiperThumbs.controller.control = swiperTop;
+    });
+  },
+  methods: {
+    handelPreviewImages(items) {
+      this.imgViewerVisible = true;
+      this.previewList = items.map((item) => this.$getFullUrl(item.url));
+    },
+    closeImgViewer() {
+      this.imgViewerVisible = false;
+    },
+  },
+};
+</script>
+   
+  <style scoped lang="scss">
+.firstDiv {
+  /* width: 1920px; */
+  /* height: 1080px; */
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.centerDiv {
+  width: 100%;
+  height: 100%;
+  background-color: #f5f5f9;
+  /* width: 900px; */
+  /* height: 800px; */
+  /* position: absolute; */
+  /* left: 510px; */
+  /* top: 200px; */
+}
+
+.thumb-example {
+  height: 100%;
+  background-color: transparent;
+}
+
+.swiper-slide {
+  background-size: cover;
+  background-position: center;
+}
+
+.slide-item {
+  background: #f5f5f9;
+  position: relative;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.enlarge {
+  position: absolute;
+  bottom: 30px;
+  right: 30px;
+  display: flex;
+  z-index: 9;
+  background-color: #c1925b;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+  cursor: pointer;
+  img {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.slide-1 {
+  background-color: #ccc;
+  /* background-image: url('../../../../static/img/dandan/g1.jpg'); */
+}
+.slide-2 {
+  background-color: #333;
+  /* background-image: url('../../../../static/img/dandan/g2.jpg'); */
+}
+.slide-3 {
+  background-color: #666;
+
+  /* background-image: url('../../../../static/img/dandan/g3.jpg'); */
+}
+.slide-4 {
+  background-color: #999;
+
+  /* background-image: url('../../../../static/img/dandan/g4.jpg'); */
+}
+.slide-5 {
+  background-color: #444;
+
+  /* background-image: url('../../../../static/img/dandan/g5.jpg'); */
+}
+.slide-6 {
+  background-color: #222;
+
+  /* background-image: url('../../../../static/img/dandan/g6.jpg'); */
+}
+.slide-7 {
+  background-color: #777;
+
+  /* background-image: url('../../../../static/img/dandan/g7.jpg'); */
+}
+.slide-8 {
+  background-color: #888;
+
+  /* background-image: url('../../../../static/img/dandan/g8.jpg'); */
+}
+
+.gallery-top {
+  height: 80%;
+  width: 100%;
+}
+.gallery-thumbs {
+  height: 20%;
+  box-sizing: border-box;
+  padding: 10px 0;
+}
+.gallery-thumbs .swiper-slide {
+  width: 20%;
+  height: 100%;
+  opacity: 0.4;
+}
+.gallery-thumbs .swiper-slide-active {
+  opacity: 1;
+}
+</style>
+   
+   
+   
+   
\ No newline at end of file

src/icons/svg/collect-s-2.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="1667543993617" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4363" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M284.458667 941.397333c-36.437333 15.637333-68.48-7.68-64.896-47.168l22.613333-248.917333-164.394667-188.053333c-26.069333-29.824-13.653333-67.562667 24.789334-76.309334l243.370666-55.381333 127.786667-214.677333c20.288-34.090667 59.946667-34.069333 80.213333 0l127.786667 214.677333 243.370667 55.381333c38.656 8.789333 50.858667 46.485333 24.789333 76.309334l-164.394667 188.053333 22.741334 249.002667c3.605333 39.509333-28.458667 62.805333-64.896 47.146666l-229.504-98.517333-229.376 98.453333z" p-id="4364"></path></svg>
\ No newline at end of file

src/icons/svg/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="1667525117325" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4149" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M736.048379 127.978498c-65.881404 0-128.494541 24.942046-176.314463 70.525785-4.644381 4.300353-28.726356 28.726356-47.30388 47.647909l-47.30388-47.131866c-47.819923-45.755753-110.605073-71.041828-177.00252-71.041828-141.223585 0-255.956996 114.905426-255.956996 255.956996 0 82.394759 41.111372 144.319839 76.546279 182.506971l316.849992 320.11826c25.11406 25.11406 52.980346 41.455401 86.695112 41.455401 33.714766 0 61.581052-16.341341 86.695112-41.455401l316.677977-319.946246 2.236183-2.408198c38.187133-47.647909 74.310096-92.715606 74.310096-180.098774C992.005375 242.883924 877.09995 127.978498 736.048379 127.978498z" p-id="4150"></path></svg>
\ No newline at end of file

src/icons/svg/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="1657871883846" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13919" 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="M669.781333 130.752c71.637333-11.093333 138.901333 11.477333 193.344 64.533333 55.317333 53.930667 81.834667 124.992 74.282667 199.530667-7.466667 73.642667-46.549333 146.368-112.32 210.474667-18.346667 17.898667-67.669333 66.218667-138.453333 135.637333-31.829333 31.232-65.706667 64.448-99.84 97.984L553.6 871.466667l-13.184 12.949333a40.554667 40.554667 0 0 1-56.832 0l-114.602667-112.64-24.213333-23.722667a677626.346667 677626.346667 0 0 0-145.856-142.762666C133.141333 541.184 94.08 468.48 86.613333 394.816c-7.552-74.538667 18.944-145.6 74.282667-199.530667 54.442667-53.056 121.706667-75.605333 193.344-64.533333 53.162667 8.213333 107.093333 34.688 157.781333 76.949333 50.709333-42.24 104.618667-68.736 157.781334-76.949333z" p-id="13920"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667525114151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3995" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M881.344 249.536a268.586667 268.586667 0 0 0-369.408-8.170667 268.586667 268.586667 0 0 0-369.429333 8.170667c-103.701333 102.784-104.810667 270.549333-2.474667 374.72l311.957333 310.506667a83.776 83.776 0 0 0 118.826667 1.066666l1.066667-1.066666 309.461333-307.733334c103.786667-102.72 105.024-270.506667 2.773333-374.72a227.178667 227.178667 0 0 0-2.773333-2.773333z m-40.064 337.536L531.84 895.082667c-10.88 11.029333-28.629333 11.093333-39.616 0.170666l-0.170667-0.170666L182.272 587.093333c-81.898667-81.194667-82.752-213.696-1.92-295.957333l1.92-1.92a211.904 211.904 0 0 1 291.562667-4.778667l38.101333 32.896 37.802667-32.896a211.904 211.904 0 0 1 291.541333 6.186667c81.536 81.578667 81.749333 214.101333 0.533333 295.957333l-0.533333 0.512z" p-id="3996"></path></svg>
\ No newline at end of file

src/icons/svg/share3.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="1667525513368" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4055" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M972.8 549.9136v294.7584A128.0768 128.0768 0 0 1 844.8 972.8H179.2a128 128 0 0 1-128-128V179.2c0-70.7328 57.1904-128 127.872-128h202.3168a25.6 25.6 0 0 0 0-51.2H179.072A179.072 179.072 0 0 0 0 179.2v665.6a179.2 179.2 0 0 0 179.2 179.2h665.6c98.944 0 179.2-80.2816 179.2-179.328V549.9136a25.6 25.6 0 0 0-51.2 0z" p-id="4056"></path><path d="M960 128c-353.4592 0-640 286.5408-640 640a25.6 25.6 0 0 0 51.2 0c0-325.1968 263.6032-588.8 588.8-588.8a25.6 25.6 0 0 0 0-51.2z" p-id="4057"></path><path d="M720.1024 62.1568l256 102.4a25.6 25.6 0 0 0 18.9952-47.5136l-256-102.4a25.6 25.6 0 0 0-18.9952 47.5136z" p-id="4058"></path><path d="M808.8064 348.4672l194.6368-189.312a25.6 25.6 0 1 0-35.6864-36.7104L773.12 311.7568a25.6 25.6 0 1 0 35.6864 36.7104z" p-id="4059"></path></svg>
\ No newline at end of file

src/views/boutique/components/SMGZ.vue

@@ -320,7 +320,11 @@
 
 <script>
 import { swiper, swiperSlide } from "vue-awesome-swiper";
-import "swiper/dist/css/swiper.css";
+// import "swiper/dist/css/swiper.css";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/thumbs";
 import MDialog from "@/components/MDialog";
 import videoPlayer from "@/components/VideoPlayer";
 import { crPics } from "../data";
@@ -414,7 +418,6 @@ export default {
         },
         on: {
           sildeChage: function () {
-            console.log(this.$refs.mySwiper.swiper);
             //滑块改变时
             //this.$refs.mySwiper.swiper里是有一个realIndex
             //不确定的可以console.log(this.$refs.mySwiper.swiper)
@@ -450,8 +453,6 @@ export default {
     handleChangeUnit(item) {
       this.curentUnitPicIndex = item.index;
       this.$refs.mySwiper.swiper.realIndex = 0;
-      console.log("this.$refs.mySwiper.", this.$refs.mySwiper.swiper);
-      // this.$refs.mySwiper.swiper.slideTo(0)
     },
     handleChangeCr(item) {
       this.curentUnitCrIndex = item.index;

src/views/boutique/data.js

 export var crPics = [
     [
-        {
-            name: "梁氏关岭鱼龙（怀孕）",
-            crId: "e9ce56605b774c0385473cdb08edcee7",
-            index: "1",
-            url: "http://222.85.214.245:9604/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/21/low/20.梁氏关岭鱼龙（怀孕）.jpg",
-        },
         {
             name: "邓氏贵州鱼龙（模式标本）",
             crId: "dac1984d5ca74f48b6183ff4525f180c",
             index: "2",
             url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/1/low/2.%E9%82%93%E6%B0%8F%E8%B4%B5%E5%B7%9E%E9%B1%BC%E9%BE%99%EF%BC%88%E6%A8%A1%E5%BC%8F%E6%A0%87%E6%9C%AC%EF%BC%89.jpg",
         },
+        {
+            name: "梁氏关岭鱼龙（怀孕）",
+            crId: "6737746fb5af4324b5f8c0017837c5d1",
+            index: "1",
+            url: "http://222.85.214.245:9604/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/21/low/20.梁氏关岭鱼龙（怀孕）.jpg",
+        },
+
         {
             name: "美丽瓦窑龙（模式标本）",
             crId: "adabb46a077e48a98d57135f6c640d65",

src/views/culturalRelic/Detail.vue

 <template>
   <div class="content">
     <!-- 文物图片 -->
-    <div class="content-item display-detail_imgs" ref="imgs">
+    <!-- <div class="content-item display-detail_imgs" ref="imgs">
       <img
         class="animate__animated animate__fadeInDownBig"
         v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
@@ -14,7 +14,7 @@
         class="animate__animated animate__fadeInDownBig"
         :src="CRDetail.faceImagePressUrl"
       />
-    </div>
+    </div> -->
 
     <div class="wrapper wow animate__animated animate__fadeInUpBig">
       <div class="inner">
@@ -27,52 +27,17 @@
                 wow
                 animate__animated animate__fadeInLeft
               "
-              v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
-            >
-              <el-carousel>
-                <el-carousel-item
-                  v-for="(item, index) in CRDetail.imagesVo"
-                  :key="index"
-                  class="imagesVo-image-container"
-                >
-                  <div class="img-container">
-                    <img
-                      :src="$getFullUrl(item.pressUrl)"
-                      alt="点击查看大图"
-                      srcset=""
-                    />
-                  </div>
-                  <div
-                    class="enlarge"
-                    @click="handelPreviewImages(CRDetail.imagesVo, true)"
-                  >
-                    <img src="@/assets/imgs/enlarge-s.png" alt="" />
-                  </div>
-                </el-carousel-item>
-              </el-carousel>
-            </div>
-            <div
-              class="
-                info-container-left
-                wow
-                animate__animated animate__fadeInLeft
-              "
-              v-else-if="CRDetail.faceImagePressUrl"
             >
-              <div class="img-container">
-                <img
-                  :src="$getFullUrl(CRDetail.faceImagePressUrl)"
-                  alt="点击查看大图"
-                  srcset=""
-                />
-              </div>
-              <div
-                class="enlarge"
-                @click="handelPreviewImages([CRDetail.faceImageUrl])"
-              >
-                <img src="@/assets/imgs/enlarge-s.png" alt="" />
-              </div>
+              <SlideImage
+                :imgList="CRDetail.imagesVo"
+                v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
+              />
+              <SlideImage
+                :imgList="[{ pressUrl: CRDetail.faceImagePressUrl }]"
+                v-else-if="CRDetail.faceImagePressUrl"
+              />
             </div>
+
             <div
               class="
                 info-container-right
@@ -87,99 +52,78 @@
                   <span>{{ CRDetail.browseCount }}</span>
                 </div>
               </div>
+              <div class="basic-info">
+                <div class="body-item">
+                  <span class="label">
+                    <!-- <svg-icon icon-class="keyword"></svg-icon> -->
+                    年代</span
+                  >
+                  <span class="value">{{ CRDetail.yearsLabel || "暂无" }}</span>
+                </div>
+                <div class="body-item">
+                  <span class="label">
+                    <!-- <svg-icon icon-class="glww"></svg-icon> -->
+                    来源</span
+                  >
+                  <span class="value">{{ CRDetail.sourceWay || "暂无" }}</span>
+                </div>
+                <div class="body-item">
+                  <span class="label">
+                    <!-- <svg-icon icon-class="zllx"></svg-icon> -->
+                    类别</span
+                  >
+                  <span class="value">{{ CRDetail.typeLabel || "暂无" }}</span>
+                </div>
+                <div class="body-item">
+                  <span class="label">
+                    <!-- <svg-icon icon-class="zlxz"></svg-icon> -->
+                    级别</span
+                  >
+                  <span class="value">{{ CRDetail.levelLabel || "暂无" }}</span>
+                </div>
+                <div class="body-item">
+                  <span class="label">
+                    <!-- <svg-icon icon-class="wwzd"></svg-icon> -->
+                    质地</span
+                  >
+                  <span class="value">{{
+                    CRDetail.textureTypeLabel || "暂无"
+                  }}</span>
+                </div>
+                <div class="body-item">
+                  <span class="label">
+                    <!-- <svg-icon icon-class="wwcc"></svg-icon> -->
+                    尺寸
+                  </span>
+                  <span class="value">{{ CRDetail.detailSize || "暂无" }}</span>
+                </div>
+                <div class="body-item">
+                  <span class="label">
+                    <!-- <svg-icon icon-class="zldq"></svg-icon> -->
 
-              <el-row :span="20">
-                <el-col :span="24" class="left">
-                  <div class="basic-info">
-                    <div class="body-item">
-                      <span class="label">
-                        <svg-icon icon-class="keyword"></svg-icon>
-                        年代：</span
-                      >
-                      <span class="value">{{
-                        CRDetail.yearsLabel || "暂无"
-                      }}</span>
-                    </div>
-                    <div class="body-item">
-                      <span class="label">
-                        <svg-icon icon-class="glww"></svg-icon>
-                        来源：</span
-                      >
-                      <span class="value">{{
-                        CRDetail.sourceWay || "暂无"
-                      }}</span>
-                    </div>
-                    <div class="body-item">
-                      <span class="label">
-                        <svg-icon icon-class="zllx"></svg-icon>类别：</span
-                      >
-                      <span class="value">{{
-                        CRDetail.typeLabel || "暂无"
-                      }}</span>
-                    </div>
-                    <div class="body-item">
-                      <span class="label">
-                        <svg-icon icon-class="zlxz"></svg-icon>级别：</span
-                      >
-                      <span class="value">{{
-                        CRDetail.levelLabel || "暂无"
-                      }}</span>
-                    </div>
-                    <div class="body-item">
-                      <span class="label"
-                        ><svg-icon icon-class="wwzd"></svg-icon>质地：</span
-                      >
-                      <span class="value">{{
-                        CRDetail.textureTypeLabel || "暂无"
-                      }}</span>
-                    </div>
-                    <div class="body-item">
-                      <span class="label"
-                        ><svg-icon icon-class="wwcc"></svg-icon>尺寸：</span
-                      >
-                      <span class="value">{{
-                        CRDetail.detailSize || "暂无"
-                      }}</span>
-                    </div>
-                    <div class="body-item">
-                      <span class="label"
-                        ><svg-icon icon-class="zldq"></svg-icon>馆藏单位：</span
-                      >
-                      <span class="value">{{
-                        CRDetail.deptName || "暂无"
-                      }}</span>
-                    </div>
-                  </div>
-                </el-col>
-                <el-col :span="16" class="right">
-                  <div class="qrcode">
-                    <!-- <img
-                        src="@/assets/imgs/display/normal/test-qrcode.png"
-                        alt=""
-                      /> -->
-                  </div>
-                  <div
-                    class="showIcon"
-                    v-if="CRDetail.url3d"
-                    @click="handleTo3D"
+                    馆藏单位</span
                   >
-                    <svg-icon icon-class="3d" class="icon"></svg-icon
-                    >查看文物3D模型
-                  </div>
-                  <div class="tools">
-                    <ReaderOperations
-                      :loveCount="CRDetail.loveCount"
-                      :loveCountStatus="Boolean(CRDetail.loveCountStatus)"
-                      :collectCount="CRDetail.collectCount"
-                      :collectCountStatus="Boolean(CRDetail.collectCountStatus)"
-                      :sourceId="CRDetail.exhibitionId"
-                      :title="CRDetail.title"
-                      :sourceType="'biz_exhibition'"
-                      @reload="loadDetail"
-                    />
-                  </div>
-                </el-col>
-              </el-row>
+                  <span class="value">{{ CRDetail.deptName || "暂无" }}</span>
+                </div>
+              </div>
+              <div class="bottom">
+                <div class="tools">
+                  <ReaderOperations
+                    :loveCount="CRDetail.loveCount"
+                    :loveCountStatus="Boolean(CRDetail.loveCountStatus)"
+                    :collectCount="CRDetail.collectCount"
+                    :collectCountStatus="Boolean(CRDetail.collectCountStatus)"
+                    :sourceId="CRDetail.crId"
+                    :title="CRDetail.name"
+                    :sourceType="'biz_cultural_relic'"
+                    @reload="loadDetail"
+                  />
+                </div>
+                <div class="showIcon" v-if="CRDetail.url3d" @click="handleTo3D">
+                  <svg-icon icon-class="3d" class="icon"></svg-icon
+                  >查看文物3D模型
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -188,8 +132,8 @@
             @click="handleClickAudio"
             v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
           >
-            <img src="@/assets/imgs/display/normal/music.png" alt="" />
-            <!-- <svg-icon icon-class="music"></svg-icon> -->
+            <!-- <img src="@/assets/imgs/display/normal/music.png" alt="" /> -->
+            <svg-icon icon-class="music"></svg-icon>
             <AudioPlayer
               style="display: none"
               :url="$getFullUrl(CRDetail.audiosVo[0].url)"
@@ -197,9 +141,45 @@
             />
           </div>
         </div>
+
+        <div
+          class="content-item display-detail_tabbar"
+          id="tabbar"
+          :class="{ isFixed: isFixed }"
+        >
+          <span
+            v-if="CRDetail.intro"
+            @click="handleClickTabItem('intro')"
+            :class="['tab-item', currentTab == 'intro' ? 'active' : '']"
+            >文物简介</span
+          >
+          <span
+            v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
+            @click="handleClickTabItem('videos')"
+            :class="['tab-item', currentTab == 'videos' ? 'active' : '']"
+            >相关视频</span
+          >
+          <span
+            v-if="relateRelics"
+            @click="handleClickTabItem('relateRelics')"
+            :class="['tab-item', currentTab == 'relateRelics' ? 'active' : '']"
+            >相关文物</span
+          >
+          <span
+            v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
+            @click="handleClickTabItem('literature')"
+            :class="['tab-item', currentTab == 'literature' ? 'active' : '']"
+            >相关文献</span
+          >
+        </div>
+
         <!-- 文物简介 -->
-        <div class="content-item display-detail_intro" v-if="CRDetail.intro">
-          <div class="intro-content wow animate__animated animate__fadeInLeft">
+        <div
+          class="content-item display-detail_intro"
+          v-if="CRDetail.intro"
+          id="intro"
+        >
+          <div class="intro-content">
             <div class="intro-title">
               <!-- <svg-icon icon-class="jianjie"></svg-icon> -->
               <i class="el-icon-tickets" style="margin-right: 10px"></i>
@@ -222,14 +202,15 @@
           </div> -->
         </div>
 
-        <!-- 展览视频 -->
+        <!-- 文物视频 -->
         <div
-          class="content-item videos wow animate__animated animate__fadeInRight"
+          class="content-item display-detail_videos"
           v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
+          id="videos"
         >
           <div class="video-title">
             <i class="el-icon-video-camera"></i>
-            展览视频
+            相关视频
           </div>
           <div class="video-names">
             <div
@@ -259,50 +240,44 @@
 
         <!--相关文物  -->
         <div
-          class="content-item display-detail_relateRc"
+          class="content-item display-detail_relate_rc"
           ref="units"
+          id="relateRelics"
         >
           <div class="intro-title">
-            <!-- <svg-icon icon-class="glww" style="font-size: 44px"></svg-icon> -->
             <i class="el-icon-menu" style="margin-right: 10px"></i>
             <span>相关文物推荐</span>
-            <div class="recommend-type">
-              <el-radio-group v-model="currentRcKey" size="small">
-                <el-radio :label="'type'" v-if="CRDetail.type"
-                  >按文物类别推荐</el-radio
-                >
-                <el-radio :label="'years'" v-if="CRDetail.years"
-                  >按文物年代推荐</el-radio
-                >
-                <el-radio :label="'deptId'" v-if="CRDetail.deptId"
-                  >按馆藏单位推荐</el-radio
-                >
-              </el-radio-group>
-            </div>
           </div>
-          <el-row :gutter="26"  v-if="relateRelics.length > 0">
+          <div class="recommend-type">
+            <el-radio-group v-model="currentRcKey" size="small">
+              <el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio>
+              <el-radio :label="'years'" v-if="CRDetail.years">同年代</el-radio>
+              <el-radio :label="'deptId'" v-if="CRDetail.deptId"
+                >同馆藏</el-radio
+              >
+            </el-radio-group>
+          </div>
+          <el-row :gutter="8" v-if="relateRelics.length > 0">
             <el-col
-              :span="index == 0 ? 12 : 4"
+              :span="6"
               v-for="(item, index) in relateRelics"
               :key="index"
             >
-              <div
-                class="img-container wow animate__animated animate__fadeInUp"
-                @click="handleToCr(item)"
-              >
+              <div class="img-container" @click="handleToCr(item)">
                 <img :src="item.faceImagePressUrl" alt="" />
-                <div class="cr-name-intro">
-                  <div class="cr-name">{{ item.name }}</div>
-                  <!-- <div class="cr-intro" v-html="item.intro"></div> -->
-                </div>
               </div>
+              <div class="cr-name">{{ item.name }}</div>
             </el-col>
           </el-row>
-          <el-empty v-else description="暂无相关推荐，去看看其他的吧~"></el-empty>
+          <el-empty
+            v-else
+            description="暂无相关推荐，去看看其他的吧~"
+          ></el-empty>
         </div>
         <!-- 相关文献 -->
         <div
           class="content-item display-detail_lts"
+          id="literature"
           v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
         >
           <!-- <div class="wrapper"> -->
@@ -379,14 +354,15 @@
   
   <script>
 // import SearchBar from "@/components/SearchBar";
+// import CustomTitle from "@/components/CustomTitle";
+// import QRCode from "qrcodejs2";
 import AudioPlayer from "@/components/AudioPlayer";
 import Video from "@/components/Video";
-// import CustomTitle from "@/components/CustomTitle";
 import ReaderOperations from "@/components/ReaderOperations";
-// import QRCode from "qrcodejs2";
 import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic";
 import { previewFile } from "@/utils/index";
 import videoPlayer from "@/components/VideoPlayer";
+import SlideImage from "@/components/SlideImage";
 
 export default {
   components: {
@@ -394,6 +370,7 @@ export default {
     ReaderOperations,
     Video,
     videoPlayer,
+    SlideImage,
     "el-image-viewer": () =>
       import("element-ui/packages/image/src/image-viewer"),
   },
@@ -409,12 +386,14 @@ export default {
       page: null,
       currentRcKey: "type",
       currentVideo: null,
-      
+      currentTab: "intro",
+      isFixed: false,
+      // tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"],
     };
   },
   watch: {
-    "$route.params.crId"(cur) {
-      this.loadDetail(cur);
+    "$route.params.crId"(value) {
+      this.loadDetail(value);
     },
     currentRcKey(key) {
       this.loadCrRecommend();
@@ -423,6 +402,11 @@ export default {
   async mounted() {
     let crId = this.$route.params.crId;
     this.loadDetail(crId);
+
+    window.addEventListener("scroll", this.initHeight);
+    this.$nextTick(() => {
+      this.offsetTop = document.querySelector("#tabbar").offsetTop;
+    });
   },
   methods: {
     async loadDetail(crId) {
@@ -437,7 +421,7 @@ export default {
           // 获取关联文物
           this.loadCrRecommend();
           this.$nextTick(() => {
-            this.replaceFaceImage();
+            // this.replaceFaceImage();
             if (this.CRDetail.audiosVo && this.CRDetail.audiosVo.length > 0) {
               this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
               this.$refs.AudioPlayer.play();
@@ -452,7 +436,7 @@ export default {
       const params = {
         crId,
         page: 1,
-        limit: 5,
+        limit: 4,
       };
       if (this.currentRcKey == "type") {
         params.type = this.CRDetail.type;
@@ -557,6 +541,21 @@ export default {
     handleChangeCurrentVideo(video) {
       this.currentVideo = video;
     },
+
+    handleClickTabItem(item) {
+      console.log(item);
+      this.currentTab = item;
+      let el = document.getElementById(item);
+      el.scrollIntoView({ block: "center", behavior: "smooth" });
+    },
+
+    initHeight() {
+      let scrollTop =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop;
+      this.isFixed = scrollTop > this.offsetTop  ? true : false;
+    },
   },
 };
 </script>
@@ -577,6 +576,7 @@ export default {
 // 中国风主题样式
 /**公共样式开始 */
 $themeColor: #2069c4;
+$titleFontFamily: SourceHanSerifCN-Bold;
 .custom-title {
   width: 50px;
   background-color: #d72f3f;
@@ -595,7 +595,8 @@ $themeColor: #2069c4;
   min-height: 400px;
 }
 .content {
-  background: url("@/assets/imgs/display/normal/bg1.png");
+  // background: url("@/assets/imgs/display/normal/bg1.png");
+  background-color: #f3f3f3;
 }
 .content-item {
   width: 100%;
@@ -678,6 +679,13 @@ $themeColor: #2069c4;
     font-size: 36px;
   }
 }
+
+.isFixed {
+  position: fixed;
+  left: 0;
+  top: 100px;
+  z-index: 99;
+}
 /**公共样式结束 */
 
 /**样式开始 */
@@ -698,34 +706,34 @@ $themeColor: #2069c4;
     }
   }
   .wrapper {
-    // width: 1200px;
+    width: 1200px;
     // padding: 0 13%;
     // width: 100%;
-    width: 78%;
+    // width: 78%;
     display: flex;
     justify-content: center;
     .inner {
       width: 100%;
-      box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
+      // box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       min-height: 200px;
       position: relative;
-      margin: 36px 0 70px;
+      // margin: 36px 0 70px;
       /**基本信息 */
       .display-detail_basic_info {
         position: relative;
         .info-container {
           display: flex;
           justify-content: space-between;
-          padding: 60px 36px;
+          padding: 40px 36px;
           height: 100%;
           background-color: #fff;
           .info-container-left {
             min-height: 200px;
-            max-height: 400px;
+            max-height: 460px;
             margin-right: 50px;
             flex: 1;
             overflow: hidden;
@@ -748,7 +756,9 @@ $themeColor: #2069c4;
           .info-container-right {
             flex: 1;
             min-height: 200px;
-
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
             .info-title {
               font-size: 28px;
               font-weight: bold;
@@ -771,30 +781,33 @@ $themeColor: #2069c4;
                 display: flex;
                 align-items: flex-start;
                 margin-bottom: 10px;
+                font-size: 18px;
                 .label {
                   display: flex;
                   align-items: center;
-                  width: 140px;
+                  width: 120px;
                   // margin-right: 26px;
                   // margin-bottom: 10px;
                   font-weight: bold;
-                  color: #858585;
+                  color: #999;
                   .svg-icon {
                     width: 24px;
                     height: 24px;
                     margin-right: 16px;
                   }
                 }
+                .value {
+                  color: #666;
+                  // font-weight: bold;
+                }
               }
             }
 
-            .right {
+            .bottom {
               display: flex;
               flex-direction: column;
-              align-items: center;
-              justify-content: center;
+              justify-content: flex-end;
               .qrcode {
-                // margin-bottom: 28px;
                 display: flex;
                 justify-content: center;
                 img {
@@ -814,7 +827,8 @@ $themeColor: #2069c4;
                 cursor: pointer;
                 transition: all 0.3s ease;
                 &:hover {
-                  box-shadow: 2px 6px 6px 2px rgb(0 0 0 / 40%);
+                  // box-shadow: 2px 6px 6px 2px rgb(0 0 0 / 40%);
+                  opacity: 0.8;
                 }
                 .svg-icon {
                   margin-right: 8px;
@@ -874,31 +888,69 @@ $themeColor: #2069c4;
         }
       }
 
+      .display-detail_tabbar {
+        background-color: #fff;
+        display: flex;
+        justify-content: center;
+        padding: 10px;
+        border-bottom: 1px solid #f2f2f2;
+        .tab-item {
+          height: 100%;
+          margin-right: 20px;
+          color: #666;
+          font-size: 24px;
+          font-family: $titleFontFamily;
+          cursor: pointer;
+          position: relative;
+
+          &:hover {
+            color: $themeColor;
+            &::after {
+              display: inline-block;
+            }
+          }
+          &::after {
+            display: none;
+          }
+        }
+        .active {
+          color: $themeColor;
+          &::after {
+            display: inline-block;
+          }
+        }
+        .tab-item::after,
+        .active::after {
+          position: absolute;
+          content: "";
+          height: 4px;
+          width: 100%;
+          bottom: -10px;
+          left: 0;
+          background-color: $themeColor;
+        }
+      }
       /**简介和视频 */
       .display-detail_intro {
-        background-image: url("@/assets/imgs/display/normal/bg.png");
+        // background-image: url("@/assets/imgs/display/normal/bg.png");
+        background-color: #fff;
         background-size: 1%;
         display: flex;
-        min-height: 265px;
-        .intro-content,
-        // .intro-video {
-        //   flex: 1;
-        // }
+        min-height: 200px;
         .intro-content {
-          padding: 20px;
-          margin: 20px;
+          padding: 20px 46px;
           line-height: 28px;
-
           .intro-content-container {
             text-indent: 34px;
+            font-size: 18px;
           }
         }
       }
 
-      .videos {
+      .display-detail_videos {
         display: flex;
         flex-direction: column;
-        margin-bottom: 40px;
+        background-color: #fff;
         .video-title {
           display: flex;
           // justify-content: center;
@@ -907,7 +959,7 @@ $themeColor: #2069c4;
           color: $themeColor;
           margin: 80px 0 40px;
           font-family: SourceHanSerifCN-Bold;
-          padding-left: 40px;
+          padding-left: 46px;
           i {
             font-size: 28px;
             margin-right: 10px;
@@ -976,153 +1028,46 @@ $themeColor: #2069c4;
       }
 
       // 关联文物
-      .display-detail_relateRc {
+      .display-detail_relate_rc {
         min-height: 560px;
-        background-image: url("@/assets/imgs/display/normal/bg.png");
+        // background-image: url("@/assets/imgs/display/normal/bg.png");
+        background-color: #fff;
         background-size: 1%;
-        padding: 50px 0;
+        padding: 50px 46px;
         .intro-title {
-          padding-left: 46px;
           display: flex;
           align-items: center;
           font-family: SourceHanSerifCN-Bold;
-          .recommend-type {
-            margin-left: 20px;
-          }
-          // .recommend{
-          //   .recommend-item{
-          //     display: flex;
-          //     align-items: center;
-          //     font-size: 14px;
-          //     .box{
-          //       border: 1px solid #2069c4;
-          //       width: 20px;
-          //       height: 20px;
-          //       position: relative;
-          //       i{
-          //         position: absolute;
-          //         left: 0;
-          //         top: 0;
-          //       }
-          //     }
-          //   }
-          // }
         }
-        .el-col {
-          .img-container {
-            width: 100%;
-            height: 460px;
-            position: relative;
 
-            .cr-name-intro {
-              width: 100%;
-              height: 100%;
-              position: absolute;
-              left: 0;
-              top: 0;
-              // padding: 100px 28px 50px;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              transition: all ease 0.5s;
-              // background-image: linear-gradient(
-              //   to top,
-              //   rgba(0, 0, 0, 0.8),
-              //   rgba(0, 0, 0, 0.1)
-              // );
-              .cr-name {
-                font-size: 48px;
-                font-weight: bold;
-                color: #ffffff;
-                text-align: center;
-                margin-bottom: 40px;
-                transition: all 0.5s ease;
-                opacity: 0;
-              }
-              .cr-intro {
-                font-size: 16px;
-                font-weight: 400;
-                color: #ccc;
-                text-indent: 32px;
-                line-height: 40px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                display: -webkit-box;
-                -webkit-line-clamp: 5;
-                -webkit-box-orient: vertical;
-              }
-            }
-            img {
+        .recommend-type {
+          margin-bottom: 20px;
+          border-bottom: 1px solid #f2f2f2;
+          padding-bottom: 8px;
+        }
+        .el-row {
+          .el-col {
+            .img-container {
               width: 100%;
-              height: 100%;
-            }
-          }
-          &:first-child {
-            .cr-name-intro {
-              &:hover {
-                background-image: linear-gradient(
-                  to top,
-                  rgba(0, 0, 0, 0.8),
-                  rgba(0, 0, 0, 0.1)
-                );
-                .cr-name {
-                  opacity: 1;
-                }
-              }
-            }
-          }
-          &:not(&:first-child) {
-            margin-bottom: 30px;
-            &:hover {
-              .cr-name {
-                opacity: 1;
-              }
-              .cr-name-intro {
-                background-image: linear-gradient(
-                  to top,
-                  rgba(0, 0, 0, 0.8),
-                  rgba(0, 0, 0, 0.1)
-                );
+              height: 214px;
+              position: relative;
+              cursor: pointer;
+              img {
+                width: 100%;
+                height: 100%;
+                object-fit: fill;
               }
             }
             .cr-name {
               font-size: 18px;
-              opacity: 0;
-            }
-            .cr-intro {
-              display: none;
-            }
-
-            .img-container {
-              height: 214px;
-            }
-            .cr-name-intro {
-              background-image: linear-gradient(
-                to top,
-                rgba(0, 0, 0, 0),
-                rgba(0, 0, 0, 0)
-              );
+              // font-weight: bold;
+              color: #666;
+              text-align: left;
+              margin: 20px 0;
+              text-indent: 2px;
             }
           }
         }
-        .img-container {
-          width: 100%;
-          height: 100%;
-          cursor: pointer;
-          overflow: hidden;
-          &:hover {
-            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
-            img {
-              transform: scale(1.1);
-            }
-          }
-          img {
-            width: 100%;
-            height: 214px;
-            object-fit: cover;
-            transition: all 0.5s ease;
-          }
-        }
       }
 
       /**关联文献 */
@@ -1160,6 +1105,12 @@ $themeColor: #2069c4;
 ::v-deep .el-radio__input {
   display: none;
 }
+
+::v-deep .el-radio__label {
+  font-size: 18px;
+  padding-left: 0;
+  font-family: SourceHanSerifCN-Bold;
+}
 ::v-deep .el-radio__input.is-checked + .el-radio__label {
   color: #2069c4;
 }

src/views/display/components/BlueStyle.vue

 <template>
   <div class="content">
     <!-- 展览图片 -->
-    <div class="content-item display-detail_imgs" ref="imgs">
+    <!-- <div class="content-item display-detail_imgs" ref="imgs">
       <img
         class="animate__animated animate__fadeInDownBig"
         v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
@@ -14,8 +14,8 @@
         class="animate__animated animate__fadeInDownBig"
         :src="displayDetail.faceImagePressUrl"
       />
-    </div>
-    <div class="wrapper wow animate__animated animate__fadeInUpBig">
+    </div> -->
+    <div class="wrapper wow animate__animated animate__fadeInUp">
       <div class="inner">
         <!-- 展览基本信息 -->
         <div class="content-item display-detail_basic_info">
@@ -25,7 +25,7 @@
               class="
                 info-container-left
                 wow
-                animate__animated animate__fadeInLeft
+                animate__animated animate__fadeInUp
               "
             >
               <el-carousel>
@@ -57,7 +57,7 @@
               class="
                 info-container-right
                 wow
-                animate__animated animate__fadeInRight
+                animate__animated animate__fadeInUp
               "
             >
               <div class="info-title">
@@ -142,7 +142,7 @@
             </div>
           </div>
           <div
-            class="audio wow animate__animated animate__fadeInRight"
+            class="audio wow animate__animated animate__fadeInUp"
             :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
             @click="handleClickAudio"
             v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
@@ -158,7 +158,7 @@
         </div>
         <!-- 展览简介 -->
         <div class="content-item display-detail_intro">
-          <div class="intro-content wow animate__animated animate__fadeInLeft">
+          <div class="intro-content wow animate__animated animate__fadeInUp">
             <div class="intro-title">
               <!-- <svg-icon icon-class="jianjie"></svg-icon> -->
               <i class="el-icon-tickets"></i>
@@ -172,7 +172,7 @@
         </div>
         <!-- 展览视频 -->
         <div
-          class="content-item videos wow animate__animated animate__fadeInRight"
+          class="content-item videos wow animate__animated animate__fadeInUp"
           v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
         >
           <div class="video-title">
@@ -255,7 +255,7 @@
               class="
                 unit-content-menu
                 wow
-                animate__animated animate__fadeInLeft
+                animate__animated animate__fadeInUp
               "
             >
               <!-- 只能单开 unique-opened -->
@@ -281,7 +281,7 @@
               </el-tree>
             </div>
             <div
-              class="unit-content wow animate__animated animate__fadeInRight"
+              class="unit-content wow animate__animated animate__fadeInUp"
             >
               <div class="unit-content-title">
                 {{ curUnit.title }}
@@ -395,12 +395,11 @@
           "
         >
           <div class="cr-title">
-            <i class="el-icon-orange"></i>
             展览相关文物
           </div>
-          <el-row :gutter="26">
+          <el-row :gutter="10">
             <el-col
-              :span="index == 0 ? 12 : 4"
+              :span="6"
               v-for="(item, index) in displayDetail.culturalRelicVo"
               :key="index"
             >
@@ -412,10 +411,10 @@
                   :src="item.faceImagePressUrl || item.faceImageUrl"
                   alt=""
                 />
-                <div class="cr-name-intro">
-                  <div class="cr-name">{{ item.name }}</div>
-                  <!-- <div class="cr-intro" v-html="item.intro"></div> -->
-                </div>
+              </div>
+              <div class="cr-name-intro">
+                <div class="cr-name">{{ item.name }}</div>
+                <!-- <div class="cr-intro" v-html="item.intro"></div> -->
               </div>
             </el-col>
           </el-row>
@@ -1277,104 +1276,32 @@ $themeColor: #2069c4;
           }
         }
         .el-col {
+          margin-bottom: 20px;
           .img-container {
             width: 100%;
             height: 460px;
             position: relative;
             background-color: #f5f5f9;
-            .cr-name-intro {
-              width: 100%;
-              height: 100%;
-              position: absolute;
-              left: 0;
-              top: 0;
-              padding: 100px 28px 50px;
-              // background-image: linear-gradient(
-              //   to top,
-              //   rgba(0, 0, 0, 0.8),
-              //   rgba(0, 0, 0, 0.1)
-              // );
-              .cr-name {
-                font-size: 38px;
-                font-weight: bold;
-                color: #ffffff;
-                text-align: center;
-                margin-bottom: 40px;
-                transition: all 0.5s ease;
-              }
-              .cr-intro {
-                font-size: 16px;
-                font-weight: 400;
-                color: #ccc;
-                text-indent: 32px;
-                line-height: 40px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                display: -webkit-box;
-                -webkit-line-clamp: 5;
-                -webkit-box-orient: vertical;
-              }
-            }
+            margin-bottom: 10px;
+            height: 214px;
+
             img {
               width: 100%;
               height: 100%;
+              object-fit: fill;
             }
           }
-          &:first-child {
-            .cr-name-intro {
-              background-image: linear-gradient(
-                to top,
-                rgba(0, 0, 0, 0.8),
-                rgba(0, 0, 0, 0.1)
-              );
-            }
-          }
-          &:not(&:first-child) {
-            margin-bottom: 30px;
-            &:hover {
-              .cr-name {
-                opacity: 1;
-              }
-              .cr-name-intro {
-                background-image: linear-gradient(
-                  to top,
-                  rgba(0, 0, 0, 0.8),
-                  rgba(0, 0, 0, 0.1)
-                );
-              }
-            }
+
+          .cr-name-intro {
             .cr-name {
-              font-size: 18px;
-              opacity: 0;
-            }
-            .cr-intro {
-              display: none;
-            }
-            // .cr-name-intro {
-            //   background-image: none;
-            // }
-            .img-container {
-              height: 214px;
-            }
-          }
-        }
-        .img-container {
-          width: 100%;
-          height: 100%;
-          cursor: pointer;
-          overflow: hidden;
-          &:hover {
-            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
-            img {
-              transform: scale(1.1);
+              // font-size: 38px;
+              font-weight: bold;
+              color: #333;
+              text-align: left;
+              margin-bottom: 40px;
+              text-indent: 4px;
             }
           }
-          img {
-            width: 100%;
-            height: 214px;
-            object-fit: cover;
-            transition: all 0.5s ease;
-          }
         }
       }
 

src/views/display/components/RedStyle.vue

@@ -512,7 +512,11 @@ import Video from "@/components/Video";
 import { debounce, previewFile } from "@/utils/index";
 import ChStyleUnit from "./ChStyleUnit.vue";
 import { swiper, swiperSlide } from "vue-awesome-swiper";
-import "swiper/dist/css/swiper.css";
+// import "swiper/dist/css/swiper.css";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/thumbs";
 import videoPlayer from "@/components/VideoPlayer";
 export default {
   components: {