首页文物替换；四渡赤水增加图片预览和文物点击跳转

4a26622c · 龙菲 · 5d2ccec2 · 4a26622c · 4a26622c · 4a26622c
--- a/src/components/Footer/index.vue
+++ b/src/components/Footer/index.vue
@@ -33,7 +33,7 @@
          </div>
        </el-popover>
      </div>
-      <div class="menu-item">关于我们</div>
+      <!-- <div class="menu-item">关于我们</div> -->
      <div class="menu-item">
        <span>

--- a/src/components/ImageViewer/index.vue
+++ b/src/components/ImageViewer/index.vue
+<!--
+ * @Date: 2022-02-28 21:26:54
+ * @Author: surewinT 840325271@qq.com
+ * @LastEditTime: 2022-05-16 11:00:18
+ * @LastEditors: surewinT 840325271@qq.com
+ * @Description: 图片预览组件
+-->
+<template>
+    <span
+        class="image-item"
+        :style="{
+            width: width,
+            height: height,
+        }"
+    >
+        <span class="warp" @click="showImage">
+            <span class="el-icon-view" style="margin-right:10px"></span>
+            查看大图
+        </span>
+        <el-image
+            ref="Image"
+            class="image"
+            :src="imgSrc"
+            :preview-src-list="previewSrc"
+            fit="contain"
+        ></el-image>
+    </span>
+</template>
+<script>
+export default {
+    components: {},
+    props: {
+        src: [Array, String],
+        width: {
+            typeof: String,
+            default: '100px',
+        },
+        height: {
+            typeof: String,
+            default: '100px',
+        },
+    },
+    data() {
+        return {
+            srcList: [],
+            baseurl: '',
+        };
+    },
+    mounted() {},
+    watch: {},
+    computed: {
+        imgSrc() {
+            if (typeof this.src == 'string') {
+                return this.src;
+            } else {
+                return this.src[0];
+            }
+        },
+        previewSrc() {
+            if (typeof this.src == 'string') {
+                return [this.src];
+            } else {
+                return this.src;
+            }
+        },
+    },
+    methods: {
+        // 显示图片
+        showImage() {
+            this.$refs.Image.clickHandler();
+            this.$emit('image-show', this.src);
+        },
+    },
+};
+</script>
+<style lang='scss' scoped>
+.image-item {
+    // width: 100px;
+    // height: 100px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    & + .image-item {
+        margin-left: 10px;
+    }
+    .image {
+        width: 100%;
+        height: 100%;
+    }
+    .warp {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+    }
+    &:hover {
+        .warp {
+            z-index: 1;
+            background-color: rgba(0, 0, 0, 0.7);
+        }
+    }
+}
+</style>
--- a/src/views/boutique/components/jyycc/index.vue
+++ b/src/views/boutique/components/jyycc/index.vue
@@ -165,14 +165,19 @@
                </div>
              </div>
              <div class="pic wow animate__animated animate__fadeInRight">
-                <img
+                <!-- <img
                  :src="
                    require(`@/assets/imgs/topic/jyycc/zt2/${
                      activeDetail.title
                    }/${i + 1}.png`)
                  "
                  alt=""
-                />
+                /> -->
+                <ImageViewer width="680px" height="450px" :src="
+                    require(`@/assets/imgs/topic/jyycc/zt2/${
+                      activeDetail.title
+                    }/${i + 1}.png`) 
+                  "/>
              </div>
            </div>
            <div
@@ -257,9 +262,11 @@
 import part1 from "./jyycc-nation.json";
 import part2 from "./jyycc-dmby.json";
 import videoPlayer from "@/components/VideoPlayer";
+import ImageViewer from '@/components/ImageViewer'
 export default {
  components: {
    videoPlayer,
+    ImageViewer
  },
  data() {
    return {

--- a/src/views/boutique/components/sdcs/index.vue
+++ b/src/views/boutique/components/sdcs/index.vue
@@ -24,18 +24,12 @@
          </div>
          <div class="box">
            <div class="titles wow animate__animated animate__fadeInUp">
-              <div
+              <div class="item wow animate__animated animate__fadeInUp" v-for="(item, index) in unitsData[0].data"
-                class="item wow animate__animated animate__fadeInUp"
+                :key="index">
-                v-for="(item, index) in unitsData[0].data"
-                :key="index"
-              >
                <div class="img">
-                  <img
+                  <img :src="
-                    :src="
  require(`@/assets/imgs/boutique/sdcs/faceImage/${item.titleImg}`)
-                    "
+" alt="" />
-                    alt=""
-                  />
                </div>
                <div class="txt" v-html="item.txt"></div>
              </div>
@@ -56,13 +50,9 @@
          <div class="line"></div>
          <div class="units-title-group">
            <div class="container">
-              <div
+              <div :class="{ 'units-title': true, active: item == part1CurUnit }"
-                :class="{ 'units-title': true, active: item == part1CurUnit }"
+                v-for="(item, index) in unitsData[1].data" :key="index" v-html="item.title"
-                v-for="(item, index) in unitsData[1].data"
+                @click="handleClickUnit1(item)"></div>
-                :key="index"
-                v-html="item.title"
-                @click="handleClickUnit1(item)"
-              ></div>
            </div>
          </div>
        </div>
@@ -73,24 +63,17 @@
          </div>
          <div class="right-cr" v-if="part1CurUnit.imgs">
            <div class="cr-group">
-              <div
+              <div class="cr" v-for="(item, index) in part1CurUnit.imgs" :key="index">
-                class="cr"
-                v-for="(item, index) in part1CurUnit.imgs"
-                :key="index"
-              >
                <div class="name wow animate__animated animate__fadeIn">
                  {{ item.name }}
                </div>
-                <img
+                <img v-if="item.crId" @click="handleToCr(item)" :class="{ pointer: item.url }"
-                  class="cr-img wow animate__animated animate__fadeInRight"
+                  class="cr-img wow animate__animated animate__fadeInRight" :src="
-                  :src="
  require(`@/assets/imgs/boutique/sdcs/part1/${item.url}`)
-                  "
+" />
-                />
+                <ImageViewer :src="require(`@/assets/imgs/boutique/sdcs/part1/${item.url}`)" width="410px"
-                <div
+                  height="410px" v-else />
-                  class="line2 wow animate__animated animate__fadeInRight"
+                <div class="line2 wow animate__animated animate__fadeInRight" v-if="index == 0"></div>
-                  v-if="index == 0"
-                ></div>
                <div class="line3 animate__fadeInRight" v-if="index == 1"></div>
              </div>
            </div>
@@ -108,16 +91,10 @@
          <div class="line"></div>
          <div class="units-title-group">
            <div class="container">
-              <div
+              <div :class="{
-                :class="{
  'units-title': true,
  active: item == part2CurUnit,
-                }"
+}" v-for="(item, index) in unitsData[2].data" :key="index" v-html="item.title" @click="handleClickUnit2(item)"></div>
-                v-for="(item, index) in unitsData[2].data"
-                :key="index"
-                v-html="item.title"
-                @click="handleClickUnit2(item)"
-              ></div>
            </div>
          </div>
        </div>
@@ -126,16 +103,16 @@
            <div class="title" v-html="part2CurUnit.title"></div>
            <div class="intro" v-html="part2CurUnit.txt"></div>
          </div>
-          <div
+          <div class="right-cr wow animate__animated animate__fadeInRight" v-if="part2CurUnit.imgs">
-            class="right-cr wow animate__animated animate__fadeInRight"
-            v-if="part2CurUnit.imgs"
-          >
            <div class="cr-group">
              <div class="cr" v-for="(v, i) in part2CurUnit.imgs" :key="i">
-                <img
+                <!-- <img class="cr-img" :src="require(`@/assets/imgs/boutique/sdcs/part2/${v.url}`)" /> -->
-                  class="cr-img"
+                <img v-if="v.crId" @click="handleToCr(v)" :class="{ pointer: v.url }"
-                  :src="require(`@/assets/imgs/boutique/sdcs/part2/${v.url}`)"
+                  class="cr-img wow animate__animated animate__fadeInRight" :src="
-                />
+  require(`@/assets/imgs/boutique/sdcs/part2/${v.url}`)
+" />
+                <ImageViewer :src="require(`@/assets/imgs/boutique/sdcs/part2/${v.url}`)" width="510px" height="410px"
+                  v-else />
                <div class="name">{{ v.name }}</div>
              </div>
            </div>
@@ -165,37 +142,27 @@
          <div class="line"></div>
          <div class="units-title-group">
            <div class="container">
-              <div
+              <div :class="{
-                :class="{
  'units-title': true,
  active: item == part3CurUnit,
-                }"
+}" v-for="(item, index) in unitsData[3].data" :key="index" v-html="item.title" @click="handleClickUnit3(item)"></div>
-                v-for="(item, index) in unitsData[3].data"
-                :key="index"
-                v-html="item.title"
-                @click="handleClickUnit3(item)"
-              ></div>
            </div>
          </div>
        </div>
        <div class="content">
-          <div
+          <div class="right-cr wow animate__animated animate__fadeInLeft" v-if="part3CurUnit.imgs">
-            class="right-cr wow animate__animated animate__fadeInLeft"
-            v-if="part3CurUnit.imgs"
-          >
            <div class="cr-group">
-              <div
+              <div class="cr" v-for="(item, index) in part3CurUnit.imgs" :key="index">
-                class="cr"
-                v-for="(item, index) in part3CurUnit.imgs"
-                :key="index"
-              >
                <div class="name">{{ item.name }}</div>
-                <img
+                <!-- <img class="cr-img" :src="
-                  class="cr-img"
-                  :src="
  require(`@/assets/imgs/boutique/sdcs/part3/${item.url}`)
-                  "
+" /> -->
-                />
+                <img v-if="item.crId" @click="handleToCr(item)" :class="{ pointer: item.url }"
+                  class="cr-img wow animate__animated animate__fadeInRight" :src="
+  require(`@/assets/imgs/boutique/sdcs/part3/${item.url}`)
+" />
+                <ImageViewer :src="require(`@/assets/imgs/boutique/sdcs/part3/${item.url}`)" width="510px"
+                  height="410px" v-else />
              </div>
              <div class="line2"></div>
            </div>
@@ -206,6 +173,8 @@
          </div>
        </div>
      </div>
      <div class="part4">
        <div class="title wow animate__animated animate__fadeInDown">
          <img src="@/assets/imgs/boutique/sdcs/part4/title.png" />
@@ -217,13 +186,9 @@
          <div class="line"></div>
          <div class="units-title-group">
            <div class="container">
-              <div
+              <div :class="{ 'units-title': true, active: item == part4CurUnit }"
-                :class="{ 'units-title': true, active: item == part4CurUnit }"
+                v-for="(item, index) in unitsData[4].data" :key="index" v-html="item.title"
-                v-for="(item, index) in unitsData[4].data"
+                @click="handleClickUnit4(item)"></div>
-                :key="index"
-                v-html="item.title"
-                @click="handleClickUnit4(item)"
-              ></div>
            </div>
          </div>
        </div>
@@ -232,23 +197,19 @@
            <div class="intro" v-html="part4CurUnit.txt"></div>
            <div class="title" v-html="part4CurUnit.title"></div>
          </div>
-          <div
+          <div class="right-cr wow animate__animated animate__fadeInRight" v-if="part4CurUnit.imgs">
-            class="right-cr wow animate__animated animate__fadeInRight"
-            v-if="part4CurUnit.imgs"
-          >
            <div class="cr-group">
-              <div
+              <div class="cr" v-for="(item, index) in part4CurUnit.imgs" :key="index">
-                class="cr"
-                v-for="(item, index) in part4CurUnit.imgs"
-                :key="index"
-              >
                <div class="name">{{ item.name }}</div>
-                <img
+                <!-- <img class="cr-img" :src="
-                  class="cr-img"
+  require(`@/assets/imgs/boutique/sdcs/part4/${item.url}`)
-                  :src="
+" /> -->
+                <img v-if="item.crId" @click="handleToCr(item)" :class="{ pointer: item.url }"
+                  class="cr-img wow animate__animated animate__fadeInRight" :src="
  require(`@/assets/imgs/boutique/sdcs/part4/${item.url}`)
-                  "
+" />
-                />
+                <ImageViewer :src="require(`@/assets/imgs/boutique/sdcs/part4/${item.url}`)" width="510px"
+                  height="410px" v-else />
                <div class="line2" v-if="index == 0"></div>
                <div class="line3" v-if="index == 1"></div>
              </div>
@@ -267,20 +228,9 @@
      <div class="cultural-relics">
        <div class="container">
-          <div
+          <div :class="['item', `cr-${index + 1}`]" v-for="(item, index) in culturalRelic" :key="index" @click="handleToCr(item)">
-            :class="['item', `cr-${index + 1}`]"
+            <div class="cr-img wow animate__animated animate__bounceInDown" v-for="(v, i) in item.imgs" :key="i">
-            v-for="(item, index) in culturalRelic"
+              <img :src="require(`@/assets/imgs/boutique/sdcs/culturalRelic/${v}`)" alt="" />
-            :key="index"
-          >
-            <div
-              class="cr-img wow animate__animated animate__bounceInDown"
-              v-for="(v, i) in item.imgs"
-              :key="i"
-            >
-              <img
-                :src="require(`@/assets/imgs/boutique/sdcs/culturalRelic/${v}`)"
-                alt=""
-              />
            </div>
            <div class="name wow animate__animated animate__bounceInUp">
              {{ item.name }}
@@ -296,7 +246,7 @@
              <img src="@/assets/imgs/boutique/sdcs/vr/zhanting.png" alt="" />
            </div>
            <div class="text">详细介绍四渡赤水纪念馆</div>
-            <div class="video-button">观看视频</div>
+            <div class="video-button" @click="handleShowVideo">观看视频</div>
          </div>
          <div class="center wow animate__animated animate__fadeInDown">
            <div class="img-container">
@@ -307,7 +257,7 @@
                <img src="@/assets/imgs/boutique/sdcs/vr/360deg.png" alt="" />
              </div>
              <div class="text-middle">足不出户，体验展管一切</div>
-              <div class="button">
+              <div class="button" @click="handleShowVr">
                <div class="outter">
                  <div class="inner">
                    <i class="el-icon-arrow-right"></i>
@@ -321,7 +271,7 @@
              <img src="@/assets/imgs/boutique/sdcs/vr/yuyin.png" alt="" />
            </div>
            <div class="text">策划人讲解四渡赤水纪念馆</div>
-            <div class="video-button">观看视频</div>
+            <div class="video-button"  @click="handleShowVideo">观看视频</div>
          </div>
        </div>
      </div>
@@ -332,10 +282,12 @@
 <script>
 import { swiper, swiperSlide } from "vue-awesome-swiper";
 import units from "./sdcs.json";
+import ImageViewer from '@/components/ImageViewer'
 export default {
  components: {
    swiper,
    swiperSlide,
+    ImageViewer
  },
  data() {
    let that = this;
@@ -367,14 +319,17 @@ export default {
        {
          name: "红军渡河用来搭浮桥的纤绳",
          imgs: ["1.png"],
+          crId:"84c45a4c43c142138e2c6ff4dd8fdad7"
        },
        {
          name: "区乡苏维埃怎样工作",
          imgs: ["2.png"],
+          crId:"0371643832454660984eff8d49c90dac"
        },
        {
          name: "两个铜板和碎陶罐",
          imgs: ["3-1.png", "3-2.png", "3-3.png"],
+          crId:"752f5dbcb6a54d12b82ec00b1068cfa4"
        },
        {
          name: "木板",
@@ -400,11 +355,32 @@ export default {
    handleClickUnit4(item) {
      this.part4CurUnit = item;
    },
+    handleToCr(item) {
+      if (item.crId) {
+        const newPage = this.$router.resolve({
+          path: "/culturalRelic/" + item.crId,
+        });
+        window.open(newPage.href, "_blank");
+      }else{
+        this.$message.info('当前文物暂无详情介绍，看看别的吧~')
+      }
+    },
+    handleShowVideo(){
+      this.$message.info('视频尚未上架，敬请期待~')
+    },
+    handleShowVr(){
+      this.$message.info('虚拟展厅尚未上架，敬请期待~')
+    }
  },
 };
 </script>
 <style lang="scss" scoped>
+.pointer {
+  cursor: pointer;
+}
 .sdcs {
  .face-image {
    background-image: url("@/assets/imgs/boutique/sdcs/faceImage/bg.png");
@@ -575,7 +551,7 @@ export default {
        }
      }
-      & > .intro {
+      &>.intro {
        display: flex;
        justify-content: center;
        margin-top: 52px;
@@ -614,6 +590,7 @@ export default {
            .units-title {
              font-weight: bold;
              font-size: 22px;
              &:hover {
                color: #ca8724;
                cursor: pointer;
@@ -653,7 +630,7 @@ export default {
          color: #fff;
          padding-left: 100px;
-          & > .title {
+          &>.title {
            font-size: 22px;
            margin-bottom: 16px;
            font-weight: bold;
@@ -661,7 +638,7 @@ export default {
            justify-content: flex-start;
          }
-          & > .intro {
+          &>.intro {
            font-size: 18px;
            line-height: 2.5;
          }
@@ -677,7 +654,7 @@ export default {
            justify-content: flex-end;
            align-items: center;
-            & > img {
+            &>img {
              width: 600px;
            }
          }
@@ -709,7 +686,7 @@ export default {
    .part2 {
      margin-bottom: 100px;
-      & > .title {
+      &>.title {
        height: 60px;
        display: flex;
        justify-content: center;
@@ -719,7 +696,7 @@ export default {
        }
      }
-      & > .intro {
+      &>.intro {
        display: flex;
        justify-content: center;
        margin-top: 52px;
@@ -758,6 +735,7 @@ export default {
            .units-title {
              font-weight: bold;
              font-size: 22px;
              &:hover {
                color: #ca8724;
                cursor: pointer;
@@ -815,7 +793,7 @@ export default {
          display: flex;
          height: 400px;
-          & > .title {
+          &>.title {
            font-size: 26px;
            margin-bottom: 16px;
            font-weight: bold;
@@ -823,7 +801,7 @@ export default {
            margin-right: 24px;
          }
-          & > .intro {
+          &>.intro {
            font-size: 18px;
            line-height: 2.5;
            writing-mode: vertical-rl;
@@ -843,7 +821,7 @@ export default {
            align-items: center;
            flex-direction: column;
-            & > img {
+            &>img {
              width: 600px;
            }
          }
@@ -878,19 +856,20 @@ export default {
    .part3 {
      margin-bottom: 100px;
-      & > .title {
+      &>.title {
        height: 60px;
        display: flex;
        justify-content: center;
        color: #fff;
        font-size: 40px;
        font-family: "KaiTi";
        img {
          height: 100%;
        }
      }
-      & > .intro {
+      &>.intro {
        display: flex;
        justify-content: center;
        margin-top: 52px;
@@ -929,6 +908,7 @@ export default {
            .units-title {
              font-weight: bold;
              font-size: 22px;
              &:hover {
                color: #ca8724;
                cursor: pointer;
@@ -955,6 +935,7 @@ export default {
        display: flex;
        justify-content: space-between;
        padding-left: 100px;
        .left-txt {
          width: 30%;
          color: #fff;
@@ -962,7 +943,7 @@ export default {
          display: flex;
          height: 400px;
-          & > .title {
+          &>.title {
            font-size: 26px;
            margin-bottom: 16px;
            font-weight: bold;
@@ -970,7 +951,7 @@ export default {
            margin-right: 24px;
          }
-          & > .intro {
+          &>.intro {
            font-size: 18px;
            line-height: 2.5;
            writing-mode: vertical-rl;
@@ -982,7 +963,8 @@ export default {
            display: flex;
            align-items: flex-start;
            padding-left: 100px;
-            & > img {
+            &>img {
              width: 600px;
            }
          }
@@ -1022,7 +1004,7 @@ export default {
    .part5 {
      margin-bottom: 100px;
-      & > .title {
+      &>.title {
        height: 60px;
        display: flex;
        justify-content: center;
@@ -1032,7 +1014,7 @@ export default {
        }
      }
-      & > .intro {
+      &>.intro {
        display: flex;
        justify-content: center;
        margin-top: 52px;
@@ -1071,6 +1053,7 @@ export default {
            .units-title {
              font-weight: bold;
              font-size: 22px;
              &:hover {
                color: #ca8724;
                cursor: pointer;
@@ -1113,7 +1096,8 @@ export default {
          color: #fff;
          padding-left: 100px;
          display: flex;
-          & > .title {
+          &>.title {
            font-size: 22px;
            margin-bottom: 16px;
            font-weight: bold;
@@ -1123,7 +1107,7 @@ export default {
            margin-left: 32px;
          }
-          & > .intro {
+          &>.intro {
            font-size: 18px;
            line-height: 2.5;
            writing-mode: vertical-rl;
@@ -1141,7 +1125,7 @@ export default {
            justify-content: flex-end;
            align-items: center;
-            & > img {
+            &>img {
              width: 600px;
            }
          }
@@ -1169,41 +1153,48 @@ export default {
        }
      }
    }
    .part5 {
      margin-bottom: 0;
    }
    .cultural-relics {
      padding: 0 80px;
-      & > .container {
+      &>.container {
        width: 100%;
        height: 1900px;
        background-image: url("@/assets/imgs/boutique/sdcs/culturalRelic/bg1.png");
        background-size: 100% 100%;
        display: flex;
-        & > .item {
+        &>.item {
          position: relative;
          padding-top: 64%;
          margin-right: 55px;
-          & > .cr-img {
+          cursor: pointer;
+          &>.cr-img {
            // width: 350px;
            width: 410px;
            display: flex;
            justify-content: center;
-            & > img {
+            &>img {
              width: 350px;
              transform: scale(1.4);
            }
          }
          &:nth-child(2n) {
            padding-top: 50%;
          }
        }
-        & > .cr-1,
+        &>.cr-1,
        .cr-3 {
          position: relative;
-          & > .name {
+          &>.name {
            position: absolute;
            writing-mode: vertical-lr;
            color: #fff;
@@ -1217,10 +1208,12 @@ export default {
            right: 10%;
          }
        }
-        & > .cr-2,
+        &>.cr-2,
        .cr-4 {
          position: relative;
-          & > .name {
+          &>.name {
            position: absolute;
            writing-mode: vertical-lr;
            color: #fff;
@@ -1234,41 +1227,49 @@ export default {
            left: 10%;
          }
        }
-        & > .cr-3 {
-          & > .cr-img {
+        &>.cr-3 {
+          &>.cr-img {
            width: 350px;
            display: flex;
            justify-content: flex-end;
            &:nth-child(2) {
              justify-content: flex-start;
            }
-            & > img {
+            &>img {
              width: 150px;
            }
          }
        }
-        & > .cr-1 {
-          & > .name {
+        &>.cr-1 {
+          &>.name {
            background-color: #8d601c;
          }
        }
-        & > .cr-2 {
-          & > .name {
+        &>.cr-2 {
+          &>.name {
            background-color: #811414;
          }
        }
-        & > .cr-3 {
-          & > .name {
+        &>.cr-3 {
+          &>.name {
            background-color: #811414;
          }
        }
-        & > .cr-4 {
-          & > .cr-img {
+        &>.cr-4 {
-            & > img {
+          &>.cr-img {
+            &>img {
              transform: scale(1.2);
            }
          }
-          & > .name {
+          &>.name {
            background-color: #1c275e;
          }
        }
@@ -1277,6 +1278,7 @@ export default {
    .vr {
      height: 900px;
      .vr-content {
        width: 100%;
        // height: 100%;
@@ -1287,6 +1289,7 @@ export default {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .text {
          font-size: 20px;
          padding: 20px 0;
@@ -1296,6 +1299,7 @@ export default {
          line-height: 65px;
          letter-spacing: 4px;
        }
        .video-button {
          color: #fff;
          font-size: 22px;
@@ -1309,11 +1313,14 @@ export default {
          letter-spacing: 2px;
          cursor: pointer;
        }
        .left,
        .right {
          width: 20%;
          .img-container {
            width: 100%;
            img {
              width: 100%;
              // height: 100%;
@@ -1323,9 +1330,11 @@ export default {
        .center {
          position: relative;
          .img-container {
            animation: changeright 4s linear infinite;
          }
          .text-content {
            width: 100%;
            height: 100%;
@@ -1337,6 +1346,7 @@ export default {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .center-text {
              /* font-size: 40px;
              font-weight: 500;
@@ -1344,10 +1354,12 @@ export default {
              line-height: 50px; */
              width: 334px;
              height: 53px;
-              > img {
+              >img {
                width: 100%;
              }
            }
            .text-middle {
              font-family: PingFang SC;
              color: #fff;
@@ -1356,9 +1368,11 @@ export default {
              font-size: 32px;
            }
          }
          .button {
            margin-top: 60px;
            cursor: pointer;
            .outter {
              width: 90px;
              height: 90px;
@@ -1369,6 +1383,7 @@ export default {
              border: 2px dashed#e9b76f;
              animation: likes 2.5s ease-in infinite;
              transition: all ease-in 0.5s;
              .inner {
                width: 65px;
                height: 65px;
@@ -1379,7 +1394,8 @@ export default {
                align-items: center;
                color: #fff;
                font-weight: bold;
-                > i {
+                >i {
                  font-size: 32px;
                }
              }

--- a/src/views/boutique/components/sdcs/sdcs.json
+++ b/src/views/boutique/components/sdcs/sdcs.json
@@ -30,11 +30,13 @@
        "imgs": [
          {
            "url": "1.png",
-            "name": "罗有容将军笔记本"
+            "name": "罗有容将军笔记本",
+            "crId":"21849c1bdce2463aaab1eba7011cc675"
          },
          {
            "url": "2.png",
-            "name": "红五星手雷"
+            "name": "红五星手雷",
+            "crId":"e39c4daf4b6c4516bcf12fcd08f1ecac"
          }
        ]
      },
@@ -75,7 +77,8 @@
        "imgs": [
          {
            "url": "1.png",
-            "name": "宽翼短尾蓑衣"
+            "name": "宽翼短尾蓑衣",
+            "crId":"c814d40ec07948d8931c36518b621847"
          }
        ]
      },
@@ -131,7 +134,7 @@
        "imgs": [
          {
            "url": "1.png",
-            "name": "鲁班场战斗遗址"
+            "name": "油灯"
          }
        ]
      },

--- a/src/views/home/tempCr.json
+++ b/src/views/home/tempCr.json
-[{
+[
+    {
        "crId": "80f7c57c768749fbad359e0ce9bce4a1",
        "deptName": "贵州省博物馆",
        "faceImageMiddleUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/54螭首金杯、金盘/middle/54.1螭首金杯.png",
@@ -8,12 +9,14 @@
        "name": "螭首金杯、金盘"
    },
    {
-        "crId": "4df7d6c888524cac89a2095be5a1d305",
+        "crId": "07e98f7318ce43ceb9142c4c5a0a6963",
-        "faceImageMiddleUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/21鎏金三足铜鍪/middle/21.鎏金三足铜鍪.png",
+        "deptName": "贵州省博物馆",
-        "faceImagePressUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/21鎏金三足铜鍪/low/21.鎏金三足铜鍪.png",
+        "faceImage": "751f5614ad96445dbef549391bf50557",
-        "faceImageUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/21鎏金三足铜鍪/21.鎏金三足铜鍪.png",
+        "faceImageMiddleUrl": "https://www.gzswbsy.com/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/51雀绕花枝铜镜/middle/51.雀绕花枝铜镜.png",
-        "intro": "侈口束颈，圆鼓腹，圜底，腹上部一侧有一环形耳，腹下接三矮蹄足，器表鎏金。其原型为巴文化器物中的铜鍪，在赫章可乐地域中，将其增加三足并鎏金。",
+        "faceImagePressUrl": "https://www.gzswbsy.com/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/51雀绕花枝铜镜/low/51.雀绕花枝铜镜.png",
-        "name": "鎏金三足铜鍪"
+        "faceImageUrl": "https://www.gzswbsy.com/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/51雀绕花枝铜镜/51.雀绕花枝铜镜.png",
+        "intro": "葵花形，圆钮。圆形镜分区，内区为四禽鸟同向排列绕钮，其间配以花枝，外区为蜂蝶、花枝各四组。内、外区相映成趣，可谓一副花鸟小景。唐代诗人王勃《上皇甫常伯启》“鹊镜临春，妍媸自远”、薛逢《追昔行》“嫁时宝镜依然在，鹊影菱花满光彩”、刘元淑《妾薄命》“飞鹊镜前妆梳断”等诗句都可能指的是这类镜子。特别是“鹊影菱花满光彩”一句，形象的描述了这种镜子的形状和纹饰。贵州古墓中出土的唐镜，是这几座唐墓断代的最直接证据，展现了唐文化对贵州地域的影响。",
+        "name": "雀绕花枝铜镜"
    },
    {
        "crId": "7ccbc32192e5486ca944a12f9002edc2",
@@ -23,7 +26,8 @@
        "faceImageUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/59平播鼎/59.平播鼎.png",
        "intro": "器身圆形，深腹，弧形底，附兽首柱状三足。口沿处饰两道弦纹，中间饰云雷纹，下面横列篆书“平播安黔之鼎”，6字环钟一圈，腹部满铸篆体铭文，计56行，每行5字，起首行多一字。铭文之下也是两道弦纹夹一圈云雷纹。",
        "name": "平播鼎"
-    }, {
+    },
+    {
        "crId": "07e32dbd6db9478d904c48e024f0adb1",
        "deptName": "贵州省博物馆",
        "faceImageMiddleUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/31铜车马/middle/31.铜车马.png",
@@ -31,7 +35,8 @@
        "faceImageUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/31铜车马/31.铜车马.png",
        "intro": "铜车马属于辎车，马由首、尾、颈、足、躯、耳等11段装配，除双耳外，其余9段钧用砂模空心浇铸，铜壳菲薄，铸技高超，马的神态逼真，昂首翘尾，鬃毛平整，竖耳咧嘴作嘶鸣状，十分矫健。车属双曲辕车，双轮十二幅。卷曲成U形覆瓦状的车棚厚度仅1毫米，轻柔如纸，是迄今为止国内出土的汉墓中的车马里最完整的一个，这对了解汉代车制、冶炼工艺具有相当重要的价值。",
        "name": "铜车马"
-    }, {
+    },
+    {
        "crId": "2f670d1ebf8e4297b1c89f3299a6187a",
        "faceImageMiddleUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/71青釉陶兽水盂/middle/71.青釉陶兽水盂.png",
        "faceImagePressUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/71青釉陶兽水盂/low/71.青釉陶兽水盂.png",
@@ -40,12 +45,12 @@
        "name": "青釉陶兽水盂"
    },
    {
-        "crId": "056c729a98cc47de852de5a499f95d19",
+        "crId": "b426539086f2474586d7a77d67d0c961",
        "deptName": "贵州省博物馆",
-        "faceImageMiddleUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/46漆盘/middle/46.漆盘.png",
+        "faceImageMiddleUrl": "https://www.gzswbsy.com/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/55金凤冠/middle/55.金凤冠.png",
-        "faceImagePressUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/46漆盘/low/46.漆盘.png",
+        "faceImagePressUrl": "https://www.gzswbsy.com/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/55金凤冠/low/55.金凤冠.png",
-        "faceImageUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/46漆盘/46.漆盘.png",
+        "faceImageUrl": "https://www.gzswbsy.com/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/55金凤冠/55.金凤冠.png",
-        "intro": "麻胎，黑地，朱绘兼有鎏金的色彩搭配，形如满月，敞口折唇，上大下小，浅平底，唇边铜扣鎏金。盘身内壁绘夔纹图案，外壁绘海潮纹图案。平底中央线描凤鸟纹样。折唇背面针刻隶书铭文共61字，详细记载该器制作时间、地点、工序、工匠及管理人员姓氏等。",
+        "intro": "保存基本完整，现存20个配件，组成完整的一件凤冠。据分析，金凤冠的主人可能是播州杨氏土司杨纲的夫人，其规制僭越了明代礼仪。此金凤冠系播州杨氏自行制作，其工艺体现出典型的明代特点，一是打胎、累丝、錾刻、宝石镶嵌、锻造，皆为典型的明代金银细金工艺。二是符合明代金银累丝、錾刻与宝石镶嵌结合的金银器首饰的主要工艺特点。三是体现出明代开始盛行红、蓝宝石搭配于金饰上的典型做法，而其所用宝石数量巨大。",
-        "name": "漆盘"
+        "name": "金凤冠"
    }
 ]
\ No newline at end of file