upp

H5场景/public/index.html

@@ -36,7 +36,7 @@
     </script>
 
 <!-- 提示使用 移动端 浏览 -->
-    <script>
+    <!-- <script>
             if (
             window.navigator.userAgent.match(
                 /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
@@ -44,7 +44,7 @@
         ) {
             // 移动端
         }else alert('请使用移动端设备浏览!')
-    </script>
+    </script> -->
 
 </head>
 

H5场景/src/assets/style/myBase.css

@@ -0,0 +1,53 @@
+.pinBottom-container {
+  bottom: 0 !important;
+}
+.pinBottom.left {
+  bottom: 0 !important;
+}
+#drawer-container {
+  overflow: visible;
+  max-width: 500px;
+}
+#drawer-container #drawer.open {
+  bottom: 88px;
+  height: 140px !important;
+}
+#drawer-container #drawer.open .darkGlass {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+#drawer-container #drawer.open .darkGlass .slidee {
+  margin: 0;
+  padding: 0 30px;
+}
+#drawer-container #drawer.playing {
+  bottom: 108px;
+}
+#playHead.playing {
+  bottom: 88px;
+}
+.frame .slidee li {
+  height: 100%;
+  position: relative;
+}
+.frame .slidee li .overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  transform: translate(0, 0);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+.frame .slidee li > img {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover;
+}
+#drawer-container {
+  transition: all 0.5s;
+}
+.thumbImg.hasHover.active {
+  border: 2px solid #fff;
+}
+.thumbImg.hasHover:hover {
+  border: 2px solid #fff;
+}

H5场景/src/assets/style/myBase.less

@@ -0,0 +1,67 @@
+.pinBottom-container {
+  bottom: 0 !important;
+}
+
+.pinBottom.left {
+  bottom: 0 !important;
+}
+
+#drawer-container {
+  overflow: visible;
+  max-width: 500px;
+
+  #drawer.open {
+    bottom: 88px;
+    height: 140px !important;
+
+    .darkGlass {
+      background-color: rgba(0, 0, 0, .8);
+
+      .slidee {
+        margin: 0;
+        padding: 0 30px;
+      }
+    }
+
+  }
+
+  #drawer.playing {
+    bottom: 108px;
+  }
+}
+
+#playHead.playing {
+  bottom: 88px;
+}
+
+.frame .slidee li {
+  height: 100%;
+  position: relative;
+
+  .overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    transform: translate(0, 0);
+    background-color: rgba(0, 0, 0, .8);
+  }
+
+  &>img {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover;
+  }
+}
+
+#drawer-container {
+  transition: all .5s;
+}
+
+.thumbImg.hasHover.active {
+  border: 2px solid #fff;
+}
+
+.thumbImg.hasHover:hover {
+  border: 2px solid #fff;
+}

H5场景/src/pages/Home.vue

@@ -12,7 +12,7 @@
     <div id="player"></div>
 
     <!-- 底部菜单 -->
-    <div id="gui-parent" :class="{ guiParent: pageFlag }">
+    <div id="gui-parent">
       <!-- 进度条加载 -->
       <gui-loading />
       <div id="hot"></div>
@@ -29,10 +29,10 @@
         <v-title />
 
         <!-- 底部菜单 -->
-        <v-menu @hndeMenu="hndeMenu" />
+        <v-menu />
 
         <!-- 导览 -->
-        <v-guide :pageFlag="pageFlag" />
+        <v-guide />
 
         <!-- logo -->
         <div
@@ -115,8 +115,6 @@ export default {
       showWelcome: true,
       hotspots: "",
       loading: true,
-      // 控制页面宽度（通过菜单的展开和隐藏）
-      pageFlag: false,
       // 控制背景音乐
       musicFlag: true,
     };
@@ -128,10 +126,7 @@ export default {
       this.musicFlag = false;
     },
     // 控制背景音乐播放👆
-    hndeMenu(val) {
-      this.pageFlag = val;
-    },
-    // 子组件菜单传递过来隐藏和展开事件 👆
+
     hideWelcome() {
       this.showWelcome = false;
       window.manage.switchBgmState(true);
@@ -189,7 +184,7 @@ export default {
           location.reload(true);
         }, 1000);
       }
-    } 
+    }
   },
 };
 </script>
@@ -218,15 +213,4 @@ export default {
     display: inline-block;
   }
 }
-
-#gui-parent {
-  width: calc(100% - 200px);
-}
-.guiParent {
-  width: 100% !important;
-}
-/deep/#drawer {
-  transition: all 0.3s;
-  width: calc(100% - 200px);
-}
 </style>

H5场景/src/views/gui/compomemt/antique.vue

@@ -1,511 +0,0 @@
-<template>
-  <div class="antique" :class="{ full: smBtn }">
-    <!-- 毛玻璃 -->
-    <div class="meanPageMBL"></div>
-
-    <div class="main">
-      <div class="top">
-        <div class="row">类型：</div>
-        <div
-          class="row"
-          v-for="item in topData"
-          @click="cutType(item.type)"
-          :key="item.name"
-          :class="{ active: item.type === formData.type }"
-        >
-          {{ item.name }}
-        </div>
-        <div class="search" @keyup.enter="mySearch">
-          <el-input
-            prefix-icon="el-icon-search"
-            type="text"
-            placeholder="搜索"
-            v-model="formData.searchKey"
-            maxlength="10"
-          />
-          <span class="btnn" @click="mySearch"></span>
-        </div>
-      </div>
-      <!-- 没有数据的时候 -->
-      <div class="hint" v-if="myArr.length === 0">
-        <img src="@/assets/img/serachNull.png" alt="" />
-        <p>暂时没有数据</p>
-        <p>请试一下其他关键字</p>
-      </div>
-      <!-- 渲染的内容 -->
-      <div class="infoBox" v-else>
-        <div
-          @click="lookInfo(item)"
-          class="infoRow"
-          :title="item.name"
-          v-for="item in myArr"
-          :key="item.id"
-        >
-          <img :src="baseURL + item.thumb" alt="" />
-          <p>{{ item.name }}</p>
-        </div>
-      </div>
-      <!-- 分页 -->
-      <div class="paging" v-show="myArr.length !== 0">
-        <el-pagination
-          layout="prev,pager,next,jumper"
-          :total="total"
-          :current-page="formData.pageNum"
-          @current-change="currentChange"
-          @size-change="sizeChange"
-        >
-        </el-pagination>
-      </div>
-      <!-- 关闭按钮 -->
-      <div class="close el-icon-close" @click="$emit('close')"></div>
-    </div>
-    <!-- 模型和图片 -->
-    <div class="model" v-if="modelShow">
-      <div class="ifrCon" ref="ifrCon">
-        <img
-          :src="baseURL + txtInfo.thumb"
-          alt=""
-          v-if="txtInfo.type === 'img'"
-        />
-        <div class="iframeBox" v-else>
-          <!-- 全屏的底部名字和右上角logo -->
-          <div class="fullLogo" v-if="fullscreen"></div>
-          <div class="fullName" v-if="fullscreen">{{txtInfo.name}}</div>
-        <iframe :src="mySrc" frameborder="0"></iframe>
-        </div>
-        <!-- 全屏按钮 -->
-        <div class="full" @click="screen">
-          <img src="@/assets/img/tab3FullX.png" alt="" v-if="fullscreen" />
-          <img src="@/assets/img/tab3Full.png" alt="" v-else />
-        </div>
-      </div>
-      <div class="rightTxt">
-        <h3>{{ txtInfo.name }}</h3>
-        <p class="ppov" v-html="txtInfo.description"></p>
-      </div>
-      <!-- 返回按钮 -->
-      <div class="close el-icon-arrow-left" @click="modelShow = false"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "@/utils/request";
-import { goodList } from "@/utils/api";
-export default {
-  name: "antique",
-  props: {
-    smBtn: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      total: 0,
-      baseURL: "",
-      topData: [
-        { name: "全部", type: "" },
-        { name: "精品图片", type: "img" },
-        { name: "三维模型", type: "model" },
-      ],
-      formData: {
-        pageNum: 1,
-        pageSize: 10,
-        searchKey: "",
-        type: "",
-      },
-      myArr: [],
-      // 有关三维模型的数据
-      mySrc: "",
-      modelShow: false,
-      fullscreen: false,
-      txtInfo: {},
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    // 点击模型全屏
-    screen() {
-      const element = this.$refs.ifrCon; // 获取容器
-      if (this.fullscreen) {
-        // 如果已经全屏了就退出全屏
-
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if (document.webkitCancelFullScreen) {
-          document.webkitCancelFullScreen();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.msExitFullscreen) {
-          document.msExitFullscreen();
-        }
-      } else {
-        // 如果不是全屏就变成全屏
-        if (element.requestFullscreen) {
-          element.requestFullscreen();
-        } else if (element.webkitRequestFullScreen) {
-          element.webkitRequestFullScreen();
-        } else if (element.mozRequestFullScreen) {
-          element.mozRequestFullScreen();
-        } else if (element.msRequestFullscreen) {
-          // IE11
-          element.msRequestFullscreen();
-        }
-      }
-
-      this.fullscreen = !this.fullscreen;
-    },
-    lookInfo(item) {
-      this.txtInfo = item;
-      // 三维模型
-      this.mySrc = "4dage/Model.html?m=" + item.filePath;
-      this.modelShow = true;
-    },
-    mySearch() {
-      this.formData.pageNum = 1;
-      this.goodList(this.formData);
-    },
-    cutType(type) {
-      this.formData.type = type;
-      this.formData.pageNum = 1;
-      this.goodList(this.formData);
-    },
-    // 分页器方法
-    currentChange(val) {
-      // console.log('当前页改变了', val)
-      this.formData.pageNum = val;
-      this.goodList(this.formData);
-    },
-    sizeChange(val) {
-      // console.log('条数改变了', val)
-      this.formData.pageNum = 1;
-      this.formData.pageSize = val;
-      this.goodList(this.formData);
-    },
-    // 封装获取列表函数
-    async goodList(data) {
-      const res = await goodList(data);
-      this.total = res.data.total;
-      this.myArr = res.data.records;
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL;
-    this.goodList(this.formData);
-    // 设置一个全局变量控制空格建的监听
-    window.myKeyBlank = true;
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    // 监听esc事件
-    document.addEventListener("webkitfullscreenchange", (e) => {
-      if (!e.currentTarget.webkitIsFullScreen) {
-        // console.log('退出啊webkitIsFullScreen11111111111')
-        setTimeout(() => {
-          this.fullscreen = false;
-        }, 100);
-      } else {
-        // console.log('进入webkitIsFullScreen')
-      }
-    });
-
-    document.addEventListener("fullscreenchange", () => {
-      if (!document.fullscreenElement) {
-        // console.log('退出啊fullscreenchange1111111111')
-        setTimeout(() => {
-          this.fullscreen = false;
-        }, 100);
-      } else {
-        // console.log('进入fullscreenchange')
-      }
-    });
-
-    document.addEventListener("MSFullscreenChange", () => {
-      if (!document.msFullscreenElement) {
-        // console.log('IE退出111111')
-        setTimeout(() => {
-          this.fullscreen = false;
-        }, 100);
-      } else {
-        // console.log('IE进')
-      }
-    });
-    document.addEventListener("mozfullscreenchange", () => {
-      if (!document.mozFullScreenElement) {
-        // console.log('火狐退出1111111111111')
-        this.$nextTick(() => {
-          setTimeout(() => {
-            this.fullscreen = false;
-          }, 100);
-        });
-      } else {
-        // console.log('火狐进')
-      }
-    });
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {
-    window.myKeyBlank = false;
-  }, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.antique {
-  transition: width 0.3s;
-  color: #fff6d2;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 998;
-  width: calc(100% - 200px);
-  height: 100%;
-  // m毛玻璃
-  .meanPageMBL {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(161, 101, 59, 0.8);
-    backdrop-filter: blur(4px);
-    z-index: -1;
-  }
-  .close {
-    color: #cc946d;
-    font-size: 34px;
-    cursor: pointer;
-    position: absolute;
-    right: 40px;
-    top: 55px;
-  }
-  .main {
-    color: #774926;
-    padding: 55px 26px 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 1200px;
-    height: 700px;
-    background: url("../../../assets/img/goodBg.png");
-    background-size: 100% 100%;
-    .top {
-      height: 36px;
-      display: flex;
-      align-items: center;
-      font-size: 16px;
-      .row {
-        cursor: pointer;
-        height: 36px;
-        line-height: 36px;
-        padding: 0 20px;
-        border-radius: 18px;
-        margin-right: 15px;
-        &:nth-of-type(1) {
-          pointer-events: none;
-          margin-right: 0;
-        }
-      }
-      .active {
-        background-color: #cc946d;
-        color: #fff6d2;
-      }
-      .search {
-        position: relative;
-        /deep/.el-icon-search {
-          color: #774926;
-          font-size: 20px;
-          margin-top: -1px;
-        }
-        .btnn {
-          z-index: 10;
-          cursor: pointer;
-          position: absolute;
-          left: 0;
-          top: 0;
-          height: 36px;
-          width: 36px;
-          border-radius: 50%;
-          background-color: transparent;
-        }
-      }
-    }
-    .hint {
-      text-align: center;
-      margin-top: 100px;
-      width: 100%;
-      height: 380px;
-      & > p {
-        color: #cc946d;
-        font-size: 20px;
-        margin-top: 20px;
-      }
-    }
-    .infoBox {
-      display: flex;
-      flex-wrap: wrap;
-      margin-top: 55px;
-      width: 100%;
-      height: 410px;
-      .infoRow {
-        margin-right: 12px;
-        margin-bottom: 26px;
-        cursor: pointer;
-        overflow: hidden;
-        width: 220px;
-        height: 192px;
-        border-radius: 6px;
-        background-color: #fff;
-        & > img {
-          width: 100%;
-          height: 154px;
-          object-fit: cover;
-        }
-        & > p {
-          padding: 0 10px;
-          width: 100%;
-          height: 38px;
-          line-height: 38px;
-          font-size: 14px;
-          text-align: center;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        &:nth-of-type(5n) {
-          margin-right: 0;
-        }
-        &:hover {
-          & > p {
-            color: #cc946d;
-          }
-        }
-      }
-    }
-    .paging {
-      position: absolute;
-      bottom: 70px;
-      left: 0;
-      width: 100%;
-      display: flex;
-      justify-content: center;
-    }
-  }
-  // 模型
-  .model {
-    color: #774926;
-    padding: 110px 26px 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 1200px;
-    height: 700px;
-    background: url("../../../assets/img/goodBg.png");
-    background-size: 100% 100%;
-    display: flex;
-    .ifrCon {
-      background-color: #fff6d2;
-      position: relative;
-      width: 558px;
-      height: 478px;
-      .iframeBox{
-        position: relative;
-        width: 100%;
-        height: 100%;
-        .fullLogo{
-          position: absolute;
-          z-index: 10;
-          right: 10px;
-          top: 10px;
-          width: 166px;
-          height: 43px;
-          background: url('../../../assets/img/logo.png');
-          background-size: 100% 100%;
-        }
-        .fullName{
-          position: absolute;
-          left: 50%;
-          bottom: 20px;
-          transform: translateX(-50%);
-          color: #774926;
-          font-size: 24px;
-        }
-        iframe {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      & > img {
-        max-width: 100%;
-        max-height: 100%;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-      }
-      .full {
-        width: 30px;
-        height: 30px;
-        cursor: pointer;
-        position: absolute;
-        right: 10px;
-        bottom: 10px;
-        color: #fff;
-        & > img {
-          width: 30px;
-          height: 30px;
-        }
-      }
-    }
-    .rightTxt {
-      padding-right: 20px;
-      height: 478px;
-      flex: 1;
-      margin-left: 110px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      & > h3 {
-        width: 100%;
-        word-break: break-all;
-        font-size: 30px;
-        margin-bottom: 20px;
-      }
-      & > P {
-        padding-right: 15px;
-        max-height: calc(100% - 60px);
-        overflow-y: auto;
-        line-height: 24px;
-        width: 100%;
-        word-break: break-all;
-        color: #cc946d;
-        font-size: 16px;
-      }
-
-      .ppov::-webkit-scrollbar-thumb {
-        outline: 2px solid #cc946d;
-      }
-    }
-  }
-}
-
-.full {
-  width: 100%;
-}
-</style>

H5场景/src/views/gui/compomemt/hotspot.vue

@@ -1,19 +1,25 @@
 <template>
-  <div class="hotspot" :class="{ full: smBtn }">
-    <div class="top">热点列表</div>
-    <div class="main">
-      <div class="txtNone" v-if="data.length === 0">暂无热点</div>
-      <div class="txt" v-else>
-        <span
-          :class="{ active: hotInd === index }"
-          @click="openHot(item, index)"
-          v-for="(item, index) in data"
-          :key="index"
-          >{{ item.info.title ? item.info.title : "热点" }}</span
-        >
-      </div>
+  <div class="hotspot">
+    <div class="hotMain">
       <!-- 关闭按钮 -->
-      <div class="close" @click="$emit('close')"></div>
+      <div class="closeX" @click="$emit('close')">
+        <img src="../../../assets/img/closeX.png" alt="" />
+      </div>
+      <div class="top">
+        <img src="../../../assets/img/hotTop.png" alt="" />
+      </div>
+      <div class="main">
+        <div class="txtNone" v-if="data.length === 0">暂无热点</div>
+        <div class="txt" v-else>
+          <span
+            :class="{ active: hotInd === index }"
+            @click="openHot(item, index)"
+            v-for="(item, index) in data"
+            :key="index"
+            >{{ item.info.title ? item.info.title : "热点" }}</span
+          >
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -21,12 +27,7 @@
 <script>
 export default {
   name: "hotspot",
-  props: {
-    smBtn: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  props: {},
   components: {},
   data() {
     //这里存放数据
@@ -67,76 +68,79 @@ export default {
 </script>
 <style lang='less' scoped>
 .hotspot {
-  width: 340px;
+  width: 100%;
   height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
   position: fixed;
   top: 0;
   right: 0;
-  transition: all 0.3s;
-  transform: translateX(-200px);
   z-index: 998;
-  .top {
-    width: 100%;
-    height: 100px;
-    line-height: 100px;
-    background-color: #cc946d;
-    color: #fff6d2;
-    font-size: 16px;
-    text-align: center;
-    align-items: center;
-  }
-  .main {
+  .hotMain {
     width: 100%;
-    height: calc(100% - 100px);
-    background-color: rgba(255, 246, 210, 1);
-    .txtNone {
-      height: 90%;
-      color: #7e522f;
-      font-size: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .txt {
-      padding: 20px;
-      height: 90%;
-      overflow-y: auto;
-      color: #7e522f;
-      font-size: 16px;
-      & > span {
-        margin-top: 20px;
-        cursor: pointer;
-        display: block;
-        width: 100%;
-        text-align: center;
-      }
-      :hover {
-        color: #d4a781;
+    height: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+    padding-top: 72px;
+    .closeX {
+      cursor: pointer;
+      position: absolute;
+      right: 15px;
+      top: 15px;
+      & > img {
+        width: 40px;
       }
     }
-    .active {
-      color: #d4a781;
-    }
-    .txt::-webkit-scrollbar-thumb {
-      outline: 2px solid #cc946d;
-    }
-    .txt::-webkit-scrollbar {
-      width: 4px;
+    .top {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      transform: translateX(-50%);
+      & > img {
+        width: 70px;
+      }
     }
-    .close {
-      cursor: pointer;
+    .main {
       width: 100%;
-      height: 10%;
-      background: url("../../../assets/img/closeT.png") no-repeat center center;
-      background-size: 44px 44px;
-      &:hover {
-        background: url("../../../assets/img/close.png") no-repeat center center;
-        background-size: 44px 44px;
+      height: calc(100% - 40px);
+      border: 1px solid #144a80;
+      border-radius: 30px;
+      background-color: rgba(0, 0, 0, 0.8);
+      .txtNone {
+        height: 90%;
+        color: #7e522f;
+        font-size: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .txt {
+        margin-top: 10%;
+        padding: 0 20px;
+        height: 90%;
+        overflow-y: auto;
+        color: #fff;
+        font-size: 16px;
+        & > span {
+          margin-top: 20px;
+          cursor: pointer;
+          display: block;
+          width: 100%;
+          text-align: center;
+        }
+        :hover {
+          color: #00c7d5;
+        }
+      }
+      .active {
+        color: #00c7d5;
+      }
+      .txt::-webkit-scrollbar-thumb {
+        outline: 2px solid #00c7d5;
+      }
+      .txt::-webkit-scrollbar {
+        width: 2px;
       }
     }
   }
 }
-.full {
-  transform: translateX(0);
-}
 </style>

H5场景/src/views/gui/compomemt/mapNav.vue

@@ -1,233 +0,0 @@
-<template>
-  <div class="mapNav" :class="{ full: smBtn }">
-    <!-- 毛玻璃 -->
-    <div class="meanPageMBL"></div>
-
-    <div class="main">
-      <div
-        class="row"
-        :class="{ noneAc: refer.includes(item.url) }"
-        v-for="item in data"
-        :key="item.id"
-      >
-        <div class="rowtxt">
-          <div class="one">{{ item.name }}</div>
-          <div class="tow" v-if="item.num">{{ item.num }}</div>
-          <div class="three" v-html="item.txt" v-if="item.txt"></div>
-        </div>
-        <img :src="require(`@/assets/img/${item.url}.jpg`)" alt="" />
-        <p class="bs">·</p>
-        <p>{{item.name+(item.num?item.num:'')}}</p>
-        <!-- 背景遮造 -->
-        <div class="smak" @click="cutScene(item.url)">
-          <div>点击<br />浏览</div>
-        </div>
-      </div>
-    </div>
-    <!-- 关闭按钮 -->
-    <div class="close el-icon-close" @click="$emit('close')"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "mapNav",
-  props: {
-    smBtn: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      data: [
-        { name: "序厅", url: "1185" },
-        {
-          name: "吴忠溯源",
-          num: "（一）",
-          txt: "远古印记<br/>魏晋南北朝时期",
-          url: "1186",
-        },
-        {
-          name: "吴忠溯源",
-          num: "（二）",
-          txt: "隋唐时期<br/>元明清时期",
-          url: "1187",
-        },
-        {
-          name: "红色吴忠展厅",
-          txt:'革命战争时期',
-          url: "1188",
-        },
-      ],
-      refer: "",
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    // 点击切换场景
-    cutScene(url) {
-      window.location.href =
-        window.location.origin + window.location.pathname + `#/?m=${url}`;
-      location.reload(true);
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 获取当前地址栏参数
-    this.refer = window.location.hash;
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.mapNav {
-  transition: width 0.3s;
-  color: #fff6d2;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 998;
-  width: calc(100% - 200px);
-  height: 100%;
-  // m毛玻璃
-  .meanPageMBL {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(161, 101, 59, 0.8);
-    backdrop-filter: blur(4px);
-    z-index: -1;
-  }
-  .main {
-    border-radius: 10px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 1400px;
-    height: 660px;
-    display: flex;
-    justify-content: space-between;
-    .row {
-      position: relative;
-      cursor: pointer;
-      width: 230px;
-      height: 620px;
-      .rowtxt {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        color: #774926;
-        position: absolute;
-        top: 55px;
-        left: 50%;
-        transform: translateX(-50%);
-        .one {
-          font-size: 22px;
-          font-weight: 700;
-          letter-spacing: 4px;
-          writing-mode: vertical-lr;
-        }
-        .tow{
-          font-weight: 700;
-          font-size: 18px;
-        }
-        .three{
-          margin-top: 25px;
-          font-size: 16px;
-          letter-spacing: 4px;
-          writing-mode: vertical-lr;
-        }
-      }
-      &:nth-of-type(1) .rowtxt {
-        top: 150px;
-        .one {
-          font-size: 24px;
-          letter-spacing: 40px;
-        }
-      }
-
-      & > img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-      .bs {
-        font-size: 80px;
-        margin: 10px 0;
-      }
-      & > p {
-        text-align: center;
-        line-height: 30px;
-        font-size: 16px;
-        color: #fff6d2;
-      }
-      .smak {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-        transition: opacity 1s;
-        background: url("../../../assets/img/mapAc.png") rgba(116, 72, 38, 0.9);
-        background-size: 100% 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        & > div {
-          padding-top: 22px;
-          text-align: center;
-          color: #fff6d2;
-          font-size: 20px;
-          width: 100px;
-          height: 100px;
-          background: url("../../../assets/img/mapBS.png");
-          background-size: 100% 100%;
-        }
-      }
-      &:hover {
-        & > p {
-          color: #3f1e05;
-        }
-        .smak {
-          opacity: 1;
-        }
-      }
-    }
-    .noneAc {
-      pointer-events: none;
-      opacity: 0.5;
-    }
-  }
-  .close {
-    cursor: pointer;
-    position: absolute;
-    right: 20px;
-    top: 20px;
-    font-size: 40px;
-    color: #fff;
-  }
-}
-.full {
-  width: 100%;
-}
-</style>

H5场景/src/views/gui/compomemt/share.vue

@@ -1,157 +0,0 @@
-<template>
-  <div class="share" :class="{ full: smBtn }">
-    <div class="main">
-      <h3>分享页面</h3>
-      <div class="code">
-        <img :src="require(`@/assets/img/code${urlNum}.png`)" alt="" />
-        <p>保存二维码，或点击复制链接</p>
-      </div>
-      <div class="btnn" @click="copyPcTxt">复制分享链接</div>
-      <!-- 关闭按钮 -->
-      <div class="close" @click="$emit('close')"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "share",
-  props: {
-    smBtn: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      urlNum: "1185",
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    //点击复制链接
-    copyPcTxt() {
-      // 存储传递过来的数据
-      let OrderNumber = window.location.href;
-      // 创建一个input 元素
-      // createElement() 方法通过指定名称创建一个元素
-      let newInput = document.createElement("input");
-      // 讲存储的数据赋值给input的value值
-      newInput.value = OrderNumber;
-      // appendChild() 方法向节点添加最后一个子节点。
-      document.body.appendChild(newInput);
-      // 选中input元素中的文本
-      // select() 方法用于选择该元素中的文本。
-      newInput.select();
-      // 执行浏览器复制命令
-      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
-      document.execCommand("Copy");
-      // 清空输入框
-      newInput.remove();
-      // 下面是element的弹窗 不需要的自行删除就好
-      alert("复制成功");
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    let temp = window.location.hash;
-    if (temp.includes("1186")) this.urlNum = "1186";
-    else if (temp.includes("1187")) this.urlNum = "1187";
-    else if (temp.includes("1188")) this.urlNum = "1188";
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.share {
-  transition: width 0.3s;
-  color: #fff6d2;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 998;
-  width: calc(100% - 200px);
-  height: 100%;
-  &::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    backdrop-filter: blur(10px);
-    z-index: -1;
-  }
-  .main {
-    border-radius: 10px;
-    padding-top: 50px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 400px;
-    height: 550px;
-    background-color: rgba(161, 101, 59, 0.8);
-    & > h3 {
-      font-size: 30px;
-      text-align: center;
-    }
-    .code {
-      padding-top: 15px;
-      background-color: #fff6d2;
-      border-radius: 5px;
-      width: 260px;
-      height: 300px;
-      margin: 30px auto;
-      text-align: center;
-      & > img {
-        width: 240px;
-      }
-      & > p {
-        color: #774926;
-        margin-top: 15px;
-        font-size: 12px;
-      }
-    }
-    .btnn {
-      cursor: pointer;
-      margin: 0 auto;
-      width: 260px;
-      height: 60px;
-      border-radius: 30px;
-      border: 2px solid #fff6d2;
-      font-size: 20px;
-      color: #fff6d2;
-      text-align: center;
-      line-height: 56px;
-    }
-    .close {
-      cursor: pointer;
-      position: absolute;
-      right: -18px;
-      top: -18px;
-      width: 44px;
-      height: 44px;
-      background: url("../../../assets/img/close.png");
-      background-size: 100% 100%;
-    }
-  }
-}
-.full {
-  width: 100%;
-}
-</style>

H5场景/src/views/gui/guide.vue

@@ -15,37 +15,30 @@
         <span class="curIdx">1</span>
         of <span class="totalSteps"></span>
       </div>
-      <div id="progressBar" :class="{ full: pageFlag }"></div>
+      <div id="progressBar"></div>
     </div>
   </div>
 </template>
 <script>
 export default {
-  props: {
-    pageFlag: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  props: {},
 };
 </script>
 <style lang="less" scoped>
 #status {
-  background-color: #A1653B;
-  color: #FFF6D2;
+  background-color: rgba(0,0,0,.8);
+  color: #fff;
 }
 #progressBar {
   transition: all 0.3s;
-  width: calc(100% - 200px);
+  width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
-  background-color: #A1653B;
+  background-color: rgba(0,0,0,.8);
 }
 #playHead {
   background-color: transparent;
 }
-.full {
-  width: 100% !important;
-}
+
 </style>

H5场景/src/views/gui/menu.vue

@@ -3,9 +3,50 @@
     <div class="pinBottom center">
       <div id="view-controllers"></div>
     </div>
-    <div class="pinBottom left">
+
+    <!-- 展开按钮 -->
+    <div
+      class="myViewShowBox"
+      @click="viewShow = true"
+      :class="{ myViewShowBoxAc: !viewShow }"
+    >
+      <img :src="require(`@/assets/img/show.png`)" />
+    </div>
+
+    <!-- 音乐按钮 -->
+    <div class="myMusicBox" id="volume">
+      <div>
+        <img
+          id="openMusic"
+          style="display: block"
+          @click="switchBGM(true)"
+          src="../../assets/img/openM.png"
+          alt=""
+          title="打开音乐"
+        />
+        <img
+          id="closeMusic"
+          style="display: none"
+          @click="switchBGM(false)"
+          src="../../assets/img/closeM.png"
+          alt=""
+          title="关闭音乐"
+        />
+      </div>
+    </div>
+
+    <div class="pinBottom left" :class="{ viewShowAc: !viewShow }">
       <div>
         <div class="viewContainer">
+          <div class="viewXian">
+            <!-- 线段 -->
+            <img src="../../assets/img/xian.png" alt="" />
+            <!-- 收起按钮 -->
+            <div class="viewShowIcon" @click="viewShow = false">
+              <img :src="require(`@/assets/img/hide.png`)" />
+            </div>
+          </div>
+
           <div
             id="previous"
             class="previous desktop-only ui-icon"
@@ -28,8 +69,8 @@
             rel="tooltip"
             data-original-title="播放"
           >
-            <!-- 鼠标移入的显示 -->
-            <div class="hoverTit">自动导览</div>
+            <!-- icon文字 -->
+            <div class="iconTxt">自动漫游</div>
             <a>
               <img
                 :src="require('@/assets/images/icon/play.png')"
@@ -39,9 +80,8 @@
             </a>
           </div>
           <div id="pause" class="ui-icon" style="display: none">
-            <!-- 鼠标移入的显示 -->
-            <div class="hoverTit">自动导览</div>
-
+            <!-- icon文字 -->
+            <div class="iconTxt iconTxtAc">自动漫游</div>
             <a>
               <img
                 rel="tooltip"
@@ -75,9 +115,10 @@
               rel="tooltip"
               title="场景导览"
             >
-              <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">导览列表</div>
-
+              <!-- icon文字 -->
+              <div class="iconTxt" :class="{ iconTxtAc: !isGuide }">
+                导览列表
+              </div>
               <img
                 title=""
                 class="icon icon-inside"
@@ -89,14 +130,25 @@
               />
             </div>
 
+            <!-- 热点列表 -->
+            <div class="hotListBox" @click="meanInd = true">
+              <div class="iconTxt">热点列表</div>
+              <div class="hotListSon">
+                <img
+                  :src="
+                    require(`@/assets/images/icon/${
+                      meanInd ? 'hotAc' : 'hot'
+                    }.png`)
+                  "
+                />
+              </div>
+            </div>
+
             <div
               data-original-title="全景漫游"
               id="gui-modes-inside"
               rel="tooltip"
             >
-              <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">自由漫游</div>
-
               <img
                 class="icon icon-inside"
                 :src="require('@/assets/images/icon/inside.png')"
@@ -112,8 +164,8 @@
               id="gui-modes-dollhouse"
               rel="tooltip"
             >
-              <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">三维视觉</div>
+              <!-- icon文字 -->
+              <div class="iconTxt">迷你模型</div>
               <img
                 class="icon icon-inside"
                 :src="require('@/assets/images/icon/dollhouse.png')"
@@ -129,8 +181,8 @@
               rel="tooltip"
               title="顶部俯视"
             >
-              <!-- 鼠标移入的显示 -->
-              <div class="hoverTit">平面视觉</div>
+              <!-- icon文字 -->
+              <div class="iconTxt">顶部俯视</div>
               <img
                 class="icon icon-inside"
                 :src="require('@/assets/images/icon/floor.png')"
@@ -218,134 +270,34 @@
       </div>
     </div>
 
-    <!-- 右侧菜单 -->
-    <div class="rightMenu" :class="{ hideMenu: smBtn }">
-      <div class="smBtn" @click="smBtn = !smBtn">{{ smBtn ? "◀" : "▶" }}</div>
-      <!-- 左侧按钮 -->
-      <img class="logo" src="@/assets/img/logo.png" alt="" />
-      <div class="rowBox">
-        <div
-          class="row"
-          @click="meanInd = item.id"
-          v-for="item in rightList"
-          :key="item.id"
-        >
-          <img
-            :src="
-              require(`@/assets/img/${item.img}${
-                meanInd === item.id ? 'Ac' : ''
-              }.png`)
-            "
-            alt=""
-          />
-          <p :class="{ acTxt: meanInd === item.id }">{{ item.name }}</p>
-        </div>
-      </div>
-      <div class="bottBtn">
-        <!-- 分享 -->
-        <div class="share" @click="meanInd = -1">
-          <img
-            title="分享"
-            :src="
-              require(`@/assets/img/share${meanInd === -1 ? 'Ac' : ''}.png`)
-            "
-            alt=""
-          />
-        </div>
-        <!-- 音乐 -->
-        <div id="volume" class="ui-icon bgandshare wide">
-          <div>
-            <img
-              id="openMusic"
-              style="display: block"
-              @click="switchBGM(true)"
-              src="../../assets/img/musicAc.png"
-              alt=""
-              title="打开音乐"
-            />
-            <img
-              id="closeMusic"
-              style="display: none"
-              @click="switchBGM(false)"
-              src="../../assets/img/music.png"
-              alt=""
-              title="关闭音乐"
-            />
-          </div>
-        </div>
-        <!-- 全屏 -->
-        <div
-          id="gui-fullscreen"
-          class="ui-icon wide"
-          data-placement="top"
-          rel="tooltip"
-          title="全屏"
-        >
-          <a>
-            <img title="全屏" :src="require('@/assets/img/full.png')" />
-          </a>
-        </div>
-        <div
-          id="gui-fullscreen-exit"
-          class="ui-icon wide"
-          data-placement="top"
-          rel="tooltip"
-          title="关闭全屏"
-          style="display: none"
-        >
-          <a>
-            <img
-              title="关闭全屏"
-              :src="require('@/assets/img/fullAc.png')"
-              style="width: 50px"
-            />
-          </a>
-        </div>
-      </div>
-    </div>
-    <!-- 分享组件 -->
-    <Share v-if="meanInd === -1" @close="meanInd = null" :smBtn="smBtn" />
-    <!-- 地图导航组件 -->
-    <MapNav v-else-if="meanInd === 1" @close="meanInd = null" :smBtn="smBtn" />
-    <!-- 精品文物组件 -->
-    <Antique v-else-if="meanInd === 2" @close="meanInd = null" :smBtn="smBtn" />
     <!-- 热点列表组件 -->
-    <Hotspot v-else-if="meanInd === 3" @close="meanInd = null" :smBtn="smBtn" />
+    <Hotspot v-if="meanInd" @close="meanInd = false" />
   </div>
 </template>
 
 <script>
 //引入组件
-import Share from "./compomemt/share.vue";
-import MapNav from "./compomemt/mapNav";
-import Antique from "./compomemt/antique.vue";
 import Hotspot from "./compomemt/hotspot";
 export default {
-  components: { Share, MapNav, Antique, Hotspot },
+  components: { Hotspot },
   data() {
     return {
+      // 自动导览切换
       isGuide: true,
-      // 右侧菜单数据
-      smBtn: false,
-      meanInd: null,
-      rightList: [
-        { id: 1, name: "展厅列表", img: "navigation" },
-        { id: 2, name: "精品文物", img: "antique" },
-        { id: 3, name: "热点列表", img: "hotspot" },
-      ],
+      // 热点列表的显示和隐藏
+      meanInd: false,
+      // 整个导览的收起和展开
+      viewShow: true,
     };
   },
   watch: {
-    smBtn(val) {
-      // 收起菜单和展开，传递给父组件
-      this.$emit("hndeMenu", val);
-      this.$nextTick(() => {
-        setTimeout(() => {
-          let dom = document.querySelector("#drawer");
-          if (val) dom.style.width = "100%";
-          else dom.style.width = "";
-        }, 1);
-      });
+    viewShow(val) {
+      const dom = document.querySelector("#drawer-container");
+      if (val) {
+        dom.style.transform = "translateX(0px)";
+      } else {
+        dom.style.transform = "translateX(-500px)";
+      }
     },
   },
   computed: {},
@@ -380,9 +332,9 @@ export default {
   color: #edd3b0;
   outline: none;
 }
-// 鼠标移入显示的文字和图片
 #gui-modes-inside {
   position: relative;
+  display: none !important;
 }
 #gui-modes-dollhouse {
   position: relative;
@@ -390,126 +342,6 @@ export default {
 #gui-modes-floorplan {
   position: relative;
 }
-.hoverTit {
-  pointer-events: none;
-  transition: all 0.5s;
-  opacity: 0;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: -40px;
-  width: 80px;
-  height: 37px;
-  line-height: 30px;
-  text-align: center;
-  background: url("../../assets/img/hoverTit.png");
-  background-size: 100% 100%;
-  font-size: 14px;
-  color: #fff6d2;
-}
-#play:hover {
-  .hoverTit {
-    opacity: 1;
-  }
-}
-#pause:hover {
-  .hoverTit {
-    opacity: 1;
-  }
-}
-#gui-modes-map > div:hover {
-  .hoverTit {
-    opacity: 1;
-  }
-}
-// -------------
-.rightMenu {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 200px;
-  transition: all 0.3s;
-  z-index: 999;
-  height: 100%;
-  background-color: #774926;
-  text-align: center;
-  ::before {
-    opacity: 0.06;
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -10;
-    background-image: url("../../assets/img/tabBac.png");
-    background-size: 100% 100%;
-  }
-  .smBtn {
-    text-align: center;
-    line-height: 60px;
-    font-size: 12px;
-    cursor: pointer;
-    position: absolute;
-    top: 50%;
-    left: -18px;
-    width: 18px;
-    height: 60px;
-    background-color: #774926;
-    border-radius: 5px 0 0 5px;
-  }
-  .logo {
-    margin: 20px 0 30px;
-    width: 166px;
-  }
-  .rowBox {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: calc(100vh - 180px);
-    .row {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      width: 100%;
-      height: 30%;
-      margin-bottom: 25px;
-      & > img {
-        max-width: 140px;
-        max-height: 140px;
-        object-fit: cover;
-        height: calc(100% - 30px);
-      }
-      & > p {
-        margin-top: 15px;
-        font-size: 18px;
-        color: #fff6d2;
-      }
-      .acTxt {
-        color: #cc946d;
-      }
-    }
-  }
-  .bottBtn {
-    padding: 0 10px;
-    overflow: hidden;
-    position: absolute;
-    bottom: 15px;
-    left: 0;
-    width: 100%;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    .share {
-      cursor: pointer;
-    }
-  }
-}
-.hideMenu {
-  transform: translateX(200px);
-}
 
 // 右侧菜单栏
 @wh: 44px;
@@ -573,68 +405,134 @@ export default {
     }
   }
 }
-@media only screen and (max-width: 487px) {
-  #myMoMu {
-    display: block !important;
+
+// --------------------
+
+.pinBottom-container {
+  .iconTxt {
+    font-size: 12px;
+    color: #fff;
+    position: absolute;
+    bottom: -18px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    text-align: center;
   }
-  #myMoMu img {
-    margin-left: 12px;
+  .iconTxtAc {
+    color: #0a93cd;
   }
-  .viewContainer {
-    background-color: rgba(0, 0, 0, 0.5);
-    padding: 15px 0 10px;
-    border-radius: 50px;
+  // .active{
+  //   .iconTxt{
+  //     color: #13709e;
+  //   }
+  // }
+  #gui-modes-dollhouse.active {
+    .iconTxt {
+      color: #0a93cd;
+    }
   }
-
-  @wh: 22px;
-  @margin: 10px;
-  #play,
-  #pause {
-    margin-bottom: @margin;
-    img {
-      width: @wh;
-      height: @wh;
+  #gui-modes-floorplan.active {
+    .iconTxt {
+      color: #0a93cd;
     }
   }
-  #gui-modes-map {
-    > div {
-      margin-bottom: @margin;
-      > img {
-        width: @wh;
-        height: @wh;
-        display: block;
-      }
-      .active {
-        display: none;
+  .hotListBox {
+    cursor: pointer;
+    float: left;
+    width: 70px;
+    height: 44px;
+    position: relative;
+    z-index: 100;
+    .hotListSon {
+      text-align: center;
+      & > img {
+        width: 44px !important;
+        height: 44px !important;
       }
     }
-    .active {
-      > img {
-        display: none;
+    .iconTxt {
+      font-size: 12px;
+      color: #fff;
+      position: absolute;
+      bottom: -18px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 100%;
+      text-align: center;
+    }
+    .iconTxtAc {
+      color: #0a93cd;
+    }
+  }
+
+  .viewContainer {
+    padding: 10px 40px 34px 30px;
+    background-color: #171c1f;
+    border-radius: 0;
+    width: 100vw;
+    max-width: 500px;
+    justify-content: center;
+    position: relative;
+    .viewXian {
+      padding: 10px 40px 50px 30px;
+      position: absolute;
+      width: 100%;
+      max-width: 500px;
+      height: 100%;
+      left: 0;
+      top: 0;
+      & > img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
       }
-      .active {
-        display: block;
+      .viewShowIcon {
+        cursor: pointer;
+        position: absolute;
+        right: 37px;
+        top: 2px;
+        & > img {
+          width: 30px;
+        }
       }
     }
   }
+  .myViewShowBox {
+    cursor: pointer;
+    position: fixed;
+    z-index: 99;
+    bottom: 36px;
+    left: 30px;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.5s;
+    & > img {
+      width: 30px;
+    }
+  }
+  .myViewShowBoxAc {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .viewShowAc {
+    transform: translateX(-500px);
+  }
 
-  .bgandshare {
-    display: none !important;
-    display: flex;
+  // 音乐
+  .myMusicBox {
+    cursor: pointer;
     position: fixed;
-    left: 50px;
-    bottom: 25px;
-    flex-direction: column;
-    margin-right: 10px !important;
-    > div {
-      width: @wh!important;
-      img {
-        width: 100%;
+    z-index: 99;
+    right: 20px;
+    top: 36%;
+    width: 40px;
+    & > div {
+      width: 40px;
+      & > img {
+        width: 40px;
       }
     }
   }
-  #volume {
-    background-color: transparent !important;
-  }
 }
 </style>