全景介绍的背景颜色

QJKK/src/framework/show/component/vrTxt.vue

@@ -1,62 +1,77 @@
 <template>
-  <div class='vrTxt'>
-    <audio v-if="vrTxtObj.code" :src="`data/${vrTxtObj.code}.mp3`" id="txtAudio"></audio>
+  <div class="vrTxt" :class="{ history: vrTxtObj.type === 'history' }">
+    <audio
+      v-if="vrTxtObj.code"
+      :src="`data/${vrTxtObj.code}.mp3`"
+      id="txtAudio"
+    ></audio>
     <div class="left" @click="aduioShow = !aduioShow">
       &nbsp;&nbsp;
-      <img :src="require(`@/assets/img/Goods/txtMusic${aduioShow ? 'Ac' : ''}.png`)" alt="">
+      <img
+        :src="
+          require(`@/assets/img/Goods/txtMusic${aduioShow ? 'Ac' : ''}.png`)
+        "
+        alt=""
+      />
       &nbsp;
-      <img src="../../../assets/img/Goods/Group.png" alt="">
+      <img src="../../../assets/img/Goods/Group.png" alt="" />
     </div>
     <div class="centen">{{ vrTxtObj.name }}</div>
     <div class="right" @click="txtDown = !txtDown">
-      <img src="../../../assets/img/Goods/Group.png" alt="">
+      <img src="../../../assets/img/Goods/Group.png" alt="" />
       &nbsp;
-      <img :src="require(`@/assets/img/Goods/txtDown${txtDown ? 'Ac' : ''}.png`)" alt="">
+      <img
+        :src="require(`@/assets/img/Goods/txtDown${txtDown ? 'Ac' : ''}.png`)"
+        alt=""
+      />
       &nbsp;&nbsp;
-
     </div>
 
     <!-- 点击箭头出来的文字详情 -->
-    <div class="txtBox" v-html="vrTxtObj.txt" :class="{ txtBoxShow: txtDown }"></div>
-
+    <div
+      class="txtBox"
+      v-html="vrTxtObj.txt"
+      :class="{ txtBoxShow: txtDown }"
+    ></div>
   </div>
 </template>
 
 <script>
-
 export default {
-  name: 'vrTxt',
+  name: "vrTxt",
   props: {
     vrTxtObj: {
       type: Object,
-      default: () => { }
-    }
+      default: () => {},
+    },
   },
   components: {},
   data() {
     return {
       aduioShow: false,
-      txtDown: false
+      txtDown: false,
     };
   },
   computed: {},
   watch: {
     aduioShow(val) {
       if (this.vrTxtObj.code) {
-        let dom = document.querySelector('#txtAudio')
+        let dom = document.querySelector("#txtAudio");
         if (val) {
-          dom.play()
-          this.$emit('closeBacMusic')
-          dom.addEventListener('ended', () => {
-            this.aduioShow = false
-          }, false);
-
+          dom.play();
+          this.$emit("closeBacMusic");
+          dom.addEventListener(
+            "ended",
+            () => {
+              this.aduioShow = false;
+            },
+            false
+          );
         } else dom.pause();
       }
-
     },
     vrTxtObj() {
-      this.aduioShow = false
+      this.aduioShow = false;
     },
     // vrTxtObj: {
     //   handler(val) {
@@ -67,23 +82,19 @@ export default {
   },
   methods: {
     closeMusic() {
-      this.aduioShow = false
-    }
-  },
-  created() {
-
-  },
-  mounted() {
-
+      this.aduioShow = false;
+    },
   },
-  beforeCreate() { }, //生命周期 - 创建之前
-  beforeMount() { }, //生命周期 - 挂载之前
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroyed() { }, //生命周期 - 销毁完成
-  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
-}
+  created() {},
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 <style lang='less' scoped>
 .vrTxt {
@@ -117,7 +128,7 @@ export default {
   .txtBox {
     opacity: 0;
     pointer-events: none;
-    transition: opacity .3s;
+    transition: opacity 0.3s;
     width: 600px;
     position: fixed;
     z-index: 97;
@@ -134,4 +145,10 @@ export default {
     opacity: 1;
   }
 }
+.history {
+  background-color: rgba(170, 130, 107, 0.8);
+  .txtBox {
+    background-color: rgba(170, 130, 107, 0.8);
+  }
+}
 </style>