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

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/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,11 +411,11 @@
                   :src="item.faceImagePressUrl || item.faceImageUrl"
                   alt=""
                 />
+              </div>
               <div class="cr-name-intro">
                 <div class="cr-name">{{ item.name }}</div>
                 <!-- <div class="cr-intro" v-html="item.intro"></div> -->
               </div>
-              </div>
             </el-col>
           </el-row>
         </div>
@@ -1277,103 +1276,31 @@ $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 {
-              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: {