编辑器合并版本 暂存

SWKK/src/components/Hot.vue

@@ -17,32 +17,19 @@
             <div
               class="infoTxt"
               :class="{ videoAc: type === 'video' }"
-              v-if="item.title"
+              v-if="item.title || hotIdOrName.name"
             >
-              <h3>{{ item.title.split("&")[0] }}</h3>
+              <h3>{{ hotIdOrName.name }}</h3>
               <div v-html="item.content" v-show="type !== 'video'"></div>
             </div>
 
             <!-- 图片 -->
-            <template v-if="type === 'image'">
+            <template v-if="type === 'img' || type === '2d'">
               <img
-                @click="
-                  lookImg(
-                    `https://4dkk.4dage.com/scene_edit_data/${KKNum}/user/${item.media.image[0].src}`
-                  )
-                "
-                v-if="item.media && item.media.image[0]"
-                v-lazy="
-                  `https://4dkk.4dage.com/scene_edit_data/${KKNum}/user/${item.media.image[0].src}`
-                "
+                @click="lookImg(`hotData/${hotIdOrName.id}/${type}/${item.id}`)"
+                v-lazy="`hotData/${hotIdOrName.id}/${type}/${item.id}`"
                 alt=""
               />
-              <img
-                src="../assets/img/IMGerror.png"
-                style="pointer-events: none"
-                alt=""
-                v-else
-              />
             </template>
             <!-- 视频 -->
             <template v-else-if="type === 'video'">
@@ -92,6 +79,28 @@
       </div>
     </div>
 
+    <!-- 查看图片的详细名称 -->
+    <div
+      class="imgNameBox"
+      v-show="type === 'img'"
+      :class="{ hideImgNameBox: !imgNameBox }"
+    >
+      <div
+        @click="Swiper.slideTo(index)"
+        class="row"
+        :class="{ rowAc: index === imgInd }"
+        :title="item.name"
+        v-for="(item, index) in data"
+        :key="item.id"
+      >
+        {{ item.name }}
+      </div>
+      <!-- 收起按钮 -->
+      <div class="hideName" @click="imgNameBox = false">
+        <i class="el-icon-caret-right"></i>
+      </div>
+    </div>
+
     <!-- 右下角的按钮 -->
     <div class="mainrr">
       <div
@@ -111,13 +120,26 @@
           alt=""
         />
 
-        <p>{{ item.name }}{{ info[item.type] && info[item.type].length }}</p>
+        <!-- 图片类型才有的展开按钮 -->
+        <div
+          class="showName"
+          v-show="item.type === 'img' && !imgNameBox"
+          @click="imgNameBox = true"
+        >
+          <i class="el-icon-caret-top"></i>
+        </div>
+
+        <p>
+          {{ item.name }}{{ info[item.type] && info[item.type].length
+          }}{{ myinfo[item.type] && myinfo[item.type].length }}
+        </p>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { hotData } from "./data";
 import Audio from "./Audio.vue";
 import Swiper from "./swiper.js";
 export default {
@@ -126,6 +148,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    hotIdOrName: {
+      type: Object,
+      default: () => {},
+    },
   },
   name: "Hot",
   components: { Audio },
@@ -141,11 +167,16 @@ export default {
         { name: "视频", id: 1, show: false, type: "video" },
         { name: "模型", id: 2, show: false, type: "link" },
         { name: "音频", id: 3, show: false, type: "audio" },
-        { name: "图片", id: 4, show: false, type: "image" },
+        // 定制化
+        { name: "图片", id: 4, show: false, type: "img" },
+        { name: "二维", id: 5, show: false, type: "2d" },
       ],
       Swiper: null,
       KKNum: window.KKNum,
       audioIndex: 0,
+      myinfo: {},
+      imgInd: 0,
+      imgNameBox: true,
     };
   },
   //监听属性 类似于data概念
@@ -153,6 +184,7 @@ export default {
   //监控data中的数据变化
   watch: {
     type(val) {
+      // console.log('-----------',val);
       if (val === "video") {
         this.$nextTick(() => {
           setTimeout(() => {
@@ -163,7 +195,14 @@ export default {
       } else if (val === "audio") this.audioIndex = 0;
 
       this.Swiper = null;
-      this.data = this.info[val];
+
+      // 定制化
+      this.imgInd = 0;
+      this.imgNameBox = true;
+      const flag = ["img", "2d"];
+      if (flag.includes(val)) {
+        this.data = this.myinfo[val];
+      } else this.data = this.info[val];
       this.$nextTick(() => {
         setTimeout(() => {
           this.Swiper = new Swiper(".Hot .swiper-container", {
@@ -200,6 +239,9 @@ export default {
                   });
                 }
                 if (val === "audio") this.audioIndex = this.Swiper.activeIndex;
+                if (flag.includes(val)) {
+                  this.imgInd = this.Swiper.activeIndex;
+                }
               },
             },
           });
@@ -209,6 +251,9 @@ export default {
 
     info: {
       handler(val) {
+        // 通过id获取配置化信息
+        // console.log("------------------------", this.hotIdOrName);
+        const myinfo = hotData.find((v) => v.hotId === this.hotIdOrName.id);
         this.info = val;
         let obj = {
           video: 0,
@@ -219,7 +264,17 @@ export default {
         for (const k in val) {
           if (val[k].length) this.rightList[obj[k]].show = true;
         }
-        if (val["image"] && val["image"].length) this.type = "image";
+        // 定制化
+        if (myinfo) {
+          this.myinfo = myinfo;
+          if (myinfo.img && myinfo.img.length) this.rightList[3].show = true;
+          if (myinfo["2d"] && myinfo["2d"].length)
+            this.rightList[4].show = true;
+        }
+        if (myinfo && myinfo.img && myinfo.img.length) this.type = "img";
+        else if (myinfo && myinfo["2d"] && myinfo["2d"].length)
+          this.type = "2d";
+        // if (val["image"] && val["image"].length) this.type = "image";
         else if (val["video"] && val["video"].length) this.type = "video";
         else if (val["link"] && val["link"].length) this.type = "link";
         else if (val["audio"] && val["audio"].length) this.type = "audio";
@@ -334,6 +389,17 @@ export default {
         font-size: 12px;
       }
     }
+    .showName {
+      position: absolute;
+      z-index: 998;
+      top: -20px;
+      left: 5px;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      cursor: pointer;
+    }
   }
 
   .swBox {
@@ -456,6 +522,79 @@ export default {
       }
     }
   }
+  .imgNameBox {
+    opacity: 1;
+    transition: all 0.3s;
+    position: absolute;
+    z-index: 998;
+    width: 400px;
+    padding: 10px 20px 20px;
+    right: 0;
+    bottom: 100px;
+    background-image: url("../assets/img/Hot/nameBac.png");
+    background-size: 100% 100%;
+    border-radius: 6px;
+    max-height: 700px;
+    &::-webkit-scrollbar {
+      /*滚动条整体样式*/
+      width: 5px;
+      /*高宽分别对应横竖滚动条的尺寸*/
+      height: 1px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      /*滚动条里面小方块*/
+      border-radius: 1px;
+      -webkit-box-shadow: inset 0 0 5px transparent;
+      background: #d8b275;
+    }
+
+    &::-webkit-scrollbar-track {
+      /*滚动条里面轨道*/
+      -webkit-box-shadow: inset 0 0 5px transparent;
+      border-radius: 10px;
+      background: transparent;
+    }
+
+    .row {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #fff;
+      height: 50px;
+      line-height: 49px;
+      cursor: pointer;
+      border-bottom: 1px solid #fff;
+      &:hover {
+        color: #d8b275;
+      }
+    }
+    .rowAc {
+      color: #d8b275;
+      pointer-events: none;
+    }
+    .hideName {
+      position: absolute;
+      cursor: pointer;
+      top: 50%;
+      left: -20px;
+      transform: translateY(-50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      font-size: 20px;
+      color: #930909;
+    }
+  }
+  .hideImgNameBox {
+    opacity: 0;
+    right: -400px;
+    .hideName {
+    }
+  }
 }
 .active {
   opacity: 1;

SWKK/src/components/Hot编辑器合并版本.vue

@@ -0,0 +1,464 @@
+<template>
+  <div class="Hot" :class="{ active: show }" @click.stop="">
+    <div class="close" @click="$emit('hotClose')">
+      <img src="../assets/img/hotClose.png" alt="" />
+    </div>
+
+    <!-- 查看图片 -->
+    <viewer class="viewerCla" ref="viewer" :images="lookPics">
+      <img :src="lookPics[0]" alt="" />
+    </viewer>
+
+    <!-- 轮播图 -->
+    <div class="swBox">
+      <div class="swiper-container" ref="mySwiper" :key="type">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide" v-for="(item, index) in data" :key="index">
+            <div
+              class="infoTxt"
+              :class="{ videoAc: type === 'video' }"
+              v-if="item.title"
+            >
+              <h3>{{ item.title.split("&")[0] }}</h3>
+              <div v-html="item.content" v-show="type !== 'video'"></div>
+            </div>
+
+            <!-- 图片 -->
+            <template v-if="type === 'image'">
+              <img
+                @click="
+                  lookImg(
+                    `https://4dkk.4dage.com/scene_edit_data/${KKNum}/user/${item.media.image[0].src}`
+                  )
+                "
+                v-if="item.media && item.media.image[0]"
+                v-lazy="
+                  `https://4dkk.4dage.com/scene_edit_data/${KKNum}/user/${item.media.image[0].src}`
+                "
+                alt=""
+              />
+              <img
+                src="../assets/img/IMGerror.png"
+                style="pointer-events: none"
+                alt=""
+                v-else
+              />
+            </template>
+            <!-- 视频 -->
+            <template v-else-if="type === 'video'">
+              <div class="videoBox">
+                <div>
+                  <video
+                    v-if="item.media && item.media.video[0]"
+                    controls
+                    :src="`https://4dkk.4dage.com/scene_edit_data/${KKNum}/user/${item.media.video[0].src}`"
+                  ></video>
+                </div>
+              </div>
+            </template>
+            <!-- 模型 -->
+            <template v-else-if="type === 'link'">
+              <div class="ifrBox">
+                <iframe
+                  v-if="item.media && item.media.link[0]"
+                  :src="`${item.media.link[0].src}`"
+                  frameborder="0"
+                ></iframe>
+              </div>
+            </template>
+            <!-- 音乐 -->
+            <template v-else>
+              <Audio
+                :Aid="item.media.audio[0].src"
+                v-if="item.media && item.media.audio[0] && audioIndex === index"
+                :audioSrc="`https://4dkk.4dage.com/scene_edit_data/${KKNum}/user/${item.media.audio[0].src}`"
+              />
+            </template>
+          </div>
+        </div>
+
+        <div class="swiper-pagination" v-show="data.length > 1"></div>
+
+        <div
+          class="swiper-button-prev swiper-button-white"
+          v-show="data.length > 1"
+          :class="{ noneAc: true }"
+        ></div>
+        <div
+          class="swiper-button-next swiper-button-white"
+          v-show="data.length > 1"
+          :class="{ noneAc: true }"
+        ></div>
+      </div>
+    </div>
+
+    <!-- 右下角的按钮 -->
+    <div class="mainrr">
+      <div
+        class="row"
+        v-show="item.show"
+        v-for="item in rightList"
+        :key="item.id"
+        @click="type = item.type"
+        :class="{ active: item.type === type }"
+      >
+        <img
+          :src="
+            require(`@/assets/img/Hot/inco${item.id}${
+              item.type === type ? 'Ac' : ''
+            }.png`)
+          "
+          alt=""
+        />
+
+        <p>{{ item.name }}{{ info[item.type] && info[item.type].length }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Audio from "./Audio.vue";
+import Swiper from "./swiper.js";
+export default {
+  props: {
+    info: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  name: "Hot",
+  components: { Audio },
+  data() {
+    //这里存放数据
+    return {
+      lookPics: [],
+
+      show: false,
+      data: [],
+      type: "",
+      rightList: [
+        { name: "视频", id: 1, show: false, type: "video" },
+        { name: "模型", id: 2, show: false, type: "link" },
+        { name: "音频", id: 3, show: false, type: "audio" },
+        { name: "图片", id: 4, show: false, type: "image" },
+      ],
+      Swiper: null,
+      KKNum: window.KKNum,
+      audioIndex: 0,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    type(val) {
+      if (val === "video") {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            let videoDoms = document.querySelectorAll(".Hot video");
+            videoDoms[0].play();
+          }, 200);
+        });
+      } else if (val === "audio") this.audioIndex = 0;
+
+      this.Swiper = null;
+      this.data = this.info[val];
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.Swiper = new Swiper(".Hot .swiper-container", {
+            slidesPerView: 1,
+            // 如果需要前进后退按钮
+            navigation: {
+              nextEl: ".swiper-button-next",
+              prevEl: ".swiper-button-prev",
+            },
+            pagination: {
+              el: ".swiper-pagination",
+              type: "fraction",
+            },
+            on: {
+              slideChange: () => {
+                if (val === "video") {
+                  let dom = document.querySelectorAll(
+                    ".Hot .swiper-pagination-bullet"
+                  );
+                  let index;
+                  dom.forEach((v, i) => {
+                    if (v.className.includes("swiper-pagination-bullet-active"))
+                      index = i;
+                  });
+
+                  this.$nextTick(() => {
+                    setTimeout(() => {
+                      let videoDoms = document.querySelectorAll(".Hot video");
+                      videoDoms.forEach((v, i) => {
+                        if (i === index) v.play();
+                        else v.pause();
+                      });
+                    }, 200);
+                  });
+                }
+                if (val === "audio") this.audioIndex = this.Swiper.activeIndex;
+              },
+            },
+          });
+        }, 100);
+      });
+    },
+
+    info: {
+      handler(val) {
+        this.info = val;
+        let obj = {
+          video: 0,
+          link: 1,
+          audio: 2,
+          image: 3,
+        };
+        for (const k in val) {
+          if (val[k].length) this.rightList[obj[k]].show = true;
+        }
+        if (val["image"] && val["image"].length) this.type = "image";
+        else if (val["video"] && val["video"].length) this.type = "video";
+        else if (val["link"] && val["link"].length) this.type = "link";
+        else if (val["audio"] && val["audio"].length) this.type = "audio";
+      },
+      immediate: true,
+    },
+  },
+  //方法集合
+  methods: {
+    // 点击查看大图
+    lookImg(url) {
+      let dom = this.$refs.viewer.$viewer;
+      this.lookPics = [url];
+      dom.show();
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    setTimeout(() => {
+      this.show = true;
+    }, 300);
+
+    // 如果有对应的点位音频，删除
+    this.$nextTick(() => {
+      let time = -1;
+      let num = 0;
+      time = window.setInterval(() => {
+        const dotAudioDomId = document.querySelector("#dotAudioDomId");
+        num++;
+        // console.log("xxxxxxxxxxxx", dotAudioDomId);
+
+        if (dotAudioDomId) {
+          clearInterval(time);
+          document.body.removeChild(dotAudioDomId);
+        }
+        if (num >= 5) clearInterval(time);
+      }, 800);
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+@import "./swiper.css";
+.viewerCla img {
+  display: none;
+}
+.Hot {
+  opacity: 0.3;
+  pointer-events: none;
+  transition: opacity 0.3s;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 251, 245, 0.9);
+  backdrop-filter: blur(4px);
+  .close {
+    cursor: pointer;
+    width: 60px;
+    position: absolute;
+    z-index: 10;
+    top: 45px;
+    right: 45px;
+    img {
+      width: 60px;
+    }
+  }
+
+  .mainrr {
+    display: flex;
+    position: absolute;
+    bottom: 15px;
+    right: 20px;
+    z-index: 10;
+    .row {
+      position: relative;
+      cursor: pointer;
+      width: 50px;
+      text-align: center;
+      margin-left: 15px;
+      color: #666666;
+
+      & > img {
+        width: 50px;
+      }
+      p {
+        font-size: 12px;
+      }
+      .likeMove {
+        color: #930909;
+        position: absolute;
+        top: 10px;
+        width: 100%;
+        text-align: center;
+      }
+    }
+    .active {
+      color: #930909;
+      font-weight: 700;
+      p {
+        font-size: 12px;
+      }
+    }
+  }
+
+  .swBox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    .swiper-container {
+      cursor: grab;
+      height: 100%;
+      .swiper-slide {
+        position: relative;
+        .infoTxt {
+          z-index: 10;
+          position: absolute;
+          top: 40px;
+          left: 40px;
+          width: 310px;
+          & > h3 {
+            font-size: 20px;
+            color: #930909;
+            font-weight: 700;
+            line-height: 28px;
+            margin-bottom: 15px;
+          }
+          & > div {
+            color: #666666;
+            font-size: 16px;
+          }
+        }
+        .videoAc {
+          pointer-events: none;
+          width: 1200px;
+          height: 680px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          padding: 74px 0 0 140px;
+          z-index: 30;
+          h3 {
+            color: #ffffff;
+          }
+        }
+        .videoBox {
+          width: 1200px;
+          height: 680px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          background-image: url("../assets/img/Hot/videoBac.png");
+          background-size: 100% 100%;
+          padding: 135px 90px 0 140px;
+          & > div {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            video {
+              height: 100%;
+            }
+          }
+        }
+        .ifrBox {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+          iframe {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        img {
+          cursor: pointer;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          max-width: 900px;
+          max-height: 700px;
+          object-fit: cover;
+        }
+      }
+      .swiper-pagination {
+        bottom: 50px;
+      }
+      .swiper-button-next {
+        // opacity: 1;
+        // pointer-events: auto;
+        width: 40px;
+        height: 60px;
+        right: 60px;
+        background-image: url("../assets/img/Hot/right.png");
+        background-size: 100% 100%;
+        color: transparent;
+      }
+      .swiper-button-prev {
+        // opacity: 1;
+        // pointer-events: auto;
+        width: 40px;
+        height: 60px;
+        left: 60px;
+        background-image: url("../assets/img/Hot/left.png");
+        background-size: 100% 100%;
+        color: transparent;
+      }
+      /deep/.swiper-pagination-bullet {
+        width: 70px;
+        height: 4px;
+        border-radius: 1px;
+        opacity: 1;
+        background-color: #999999;
+      }
+      /deep/.swiper-pagination-bullet-active {
+        background-color: #930909;
+      }
+    }
+  }
+}
+.active {
+  opacity: 1;
+  pointer-events: auto;
+}
+</style>

SWKK/src/components/data.js

@@ -0,0 +1,128 @@
+export const baseUrl = process.env.NODE_ENV === "development" ? 'http://192.168.20.48:8081/hotData/' : 'hotData/'
+
+export const hotData = [{
+    hotId: 'K8DvRh0144677',
+    img: [{
+        id: '1.jpg',
+        name: '党的创建和大革命时期江苏省党组织系统表水水水水水水水水水水水',
+        content: '中国共产党成立后，中国革命的面貌为之一新。依据党的一大通过的纲领和决议，全国各地党组织迅速开展各项工作。在党的初创时期和大革命时期，江苏是党活动的重要区域。图为党的创建和大革命时期中共中央直属组织分布情况<br/>图为党的创建和大革命时期江苏省党组织系统表'
+      },
+      {
+        id: '2.jpg',
+        name: '党的创建和大革命时期江苏省党组织系统表',
+        content: '中国共产党成立后，中国革命的面貌为之一新。依据党的一大通过的纲领和决议，全国各地党组织迅速开展各项工作。在党的初创时期和大革命时期，江苏是党活动的重要区域。图为党的创建和大革命时期中共中央直属组织分布情况<br/>图为党的创建和大革命时期江苏省党组织系统表'
+      },
+    ]
+  },
+  {
+    hotId: 'ijElNj696011',
+    img: [{
+        id: '1.png',
+        name: '金佛庄的毕业证书',
+        content: '1922年，金佛庄毕业于保定陆军军官学校。这是该校颁发的毕业证书'
+      },
+      {
+        id: '2.jpg',
+        name: '中国共产党第三次代表大会',
+        content: '1923年6月，中国共产党第三次代表大会在广州召开，会议决定采取共产党员以个人身份加入国民党的方式实现国共合作。金佛庄作为浙江代表出席了党的三大。图为位于广州东山新河浦的春园，党的三大期间许多重要活动在此举行'
+      },
+      {
+        id: '3.jpg',
+        name: '金佛庄的任命壮',
+        content: '1924年6月，金佛庄被任命为黄埔军校第一期学生队第三队队长。这是当时的任命状'
+      },
+      {
+        id: '4.jpg',
+        name: '金佛庄发表的文章《军官的心理》',
+        content: '1924年，金佛庄在第一次国共合作时期的理论刊物《新建设》杂志上发表文章《军官的心理》，提出建设新型革命军队的想法'
+      },
+      {
+        id: '5.png',
+        name: '金佛庄所佩的黄埔军校“学”字证章',
+        content: '金佛庄所佩的黄埔军校“学”字证章'
+      },
+      {
+        id: '6.jpg',
+        name: '黄埔军校颁发给金佛庄的任命书',
+        content: '黄埔军校颁发给金佛庄的任命书'
+      },
+      {
+        id: '7.jpg',
+        name: '黄埔军校颁发给金佛庄的委任状',
+        content: '黄埔军校颁发给金佛庄的委任状'
+      },
+      {
+        id: '8.jpg',
+        name: '合影',
+        content: '金佛庄（左）任国民革命军第一军一师二团团长时与该团党代表、共产党员郭俊的合影'
+      },
+      {
+        id: '9.jpg',
+        name: '金佛庄率部东征时写下的《传略自述》1',
+        content: '1926年，金佛庄率部东征时写下的《传略自述》'
+      },
+      {
+        id: '10.jpg',
+        name: '金佛庄率部东征时写下的《传略自述》2',
+        content: '1926年，金佛庄率部东征时写下的《传略自述》'
+      },
+      {
+        id: '11.jpg',
+        name: '金佛庄率部东征时写下的《传略自述》3',
+        content: '1926年，金佛庄率部东征时写下的《传略自述》'
+      },
+    ]
+  },
+
+  {
+    hotId: 'GPhhx263937',
+    img: [{
+        id: '1.jpg',
+        name: '四川泸州的川南师范学校旧址',
+        content: '1921年春，张霁帆考入位于四川泸州的川南师范学校读书，在老师恽代英的影响下，走上革命道路。图为该校旧址'
+      },
+      {
+        id: '2.jpg',
+        name: '张霁帆（左）和友人的合影',
+        content: '张霁帆（左）和友人的合影'
+      },
+      {
+        id: '3.jpg',
+        name: '《一个改造社会可能的办法》',
+        content: '1923年，张霁帆在成都组织宜宾留省学会，探究改造社会之法。他在该会第一期会刊上发表文章《一个改造社会可能的办法》，阐明救国主张。'
+      },
+      {
+        id: '4.jpg',
+        name: '《一个改造社会可能的办法》',
+        content: '1923年，张霁帆在成都组织宜宾留省学会，探究改造社会之法。他在该会第一期会刊上发表文章《一个改造社会可能的办法》，阐明救国主张。'
+      },
+      {
+        id: '5.jpg',
+        name: '《一个改造社会可能的办法》',
+        content: '1923年，张霁帆在成都组织宜宾留省学会，探究改造社会之法。他在该会第一期会刊上发表文章《一个改造社会可能的办法》，阐明救国主张。'
+      },
+      {
+        id: '6.jpg',
+        name: '《一个改造社会可能的办法》',
+        content: '1923年，张霁帆在成都组织宜宾留省学会，探究改造社会之法。他在该会第一期会刊上发表文章《一个改造社会可能的办法》，阐明救国主张。'
+      },
+    ],
+    '2d': [{
+        id: '1.jpg',
+        name: '张霁帆烈士写给十哥的信',
+        content: '1925年正月初四张霁帆烈士写给十哥的信'
+      },
+      {
+        id: '2.jpg',
+        name: '张霁帆烈士写给十哥的信',
+        content: '1925年正月初四张霁帆烈士写给十哥的信'
+      },
+      {
+        id: '3.jpg',
+        name: '张霁帆烈士写给十哥的信',
+        content: '1925年正月初四张霁帆烈士写给十哥的信'
+      },
+
+    ]
+  }
+]

SWKK/src/views/Home.vue

@@ -48,7 +48,12 @@
     </div>
 
     <!-- 点击热点出来的界面 -->
-    <Hot v-if="sonInfo" :info="sonInfo" @hotClose="hotClose" />
+    <Hot
+      v-if="sonInfo"
+      :info="sonInfo"
+      :hotIdOrName="hotIdOrName"
+      @hotClose="hotClose"
+    />
 
     <!-- 新手指引页面 -->
     <Guide />
@@ -79,6 +84,7 @@ export default {
       disable: false,
       playing: false,
       sonInfo: null,
+      hotIdOrName: null,
       clickBottomAc: false,
 
       // 点位背景音乐的状态
@@ -173,6 +179,7 @@ export default {
     },
     // 封装点击热点的函数
     openHotFu(data) {
+      // console.log('-------',data);
       // 点击热点的时候当前背景音乐的播放状态
       let dom = document.querySelector("#bacMusic");
       window.bacMusic = !dom.paused;
@@ -201,7 +208,7 @@ export default {
           video: [],
         };
         temp.forEach((v) => {
-          obj[v.type].push(v);
+          if (obj[v.type]) obj[v.type].push(v);
         });
         for (const k in obj) {
           if (k === "audio") {
@@ -209,8 +216,16 @@ export default {
           }
         }
 
+        this.hotIdOrName = {
+          id: data.sid,
+          name: data.title.split("&")[0],
+        };
         this.sonInfo = obj;
       } else {
+        this.hotIdOrName = {
+          id: data.sid,
+          name: data.title,
+        };
         // 单个热点
         this.sonInfo = { [data.type]: [data] };
       }