upp

public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport"
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <title>吴忠博物馆数字展厅</title>
+    <title>北川羌族民俗博物馆</title>
     <meta name="description" content="四维时代">
     <meta property="og:title" content="四维时代">
     <meta property="og:description" content="四维时代">

public/static/css/css/main.css

@@ -3805,7 +3805,7 @@ a.hasHover:hover, a:active {
 }
 
 #volume {
-    display: none;
+    /* display: none; */
 }
 
 #view-controllers {

public/static/css/main.css

@@ -3800,7 +3800,7 @@ a.hasHover:hover, a:active {
 }
 
 #volume {
-    display: none;
+    /* display: none; */
 }
 
 #view-controllers {

src/assets/style/reset.css

@@ -293,3 +293,45 @@ input::-webkit-input-placeholder {
 .el-pagination button:hover {
   color: #CC946D;
 }
+.frame-container {
+  background: url('../../assets/myData/tab.png');
+  background-size: 100% 100%;
+}
+.frame {
+  background: url('../../assets/myData/tab.png');
+  background-size: 100% 100%;
+}
+#playHead #status {
+  background-color: #d5cfbe;
+  color: #978163;
+}
+#playHead #progressBar {
+  background-color: #d5cfbe;
+}
+#playHead #progressBar .step::before {
+  background-color: #cebca3;
+}
+#playHead #progressBar .step.active::before {
+  background-color: #978163;
+}
+.scrollbar {
+  height: 4px;
+}
+.scrollbar .handle {
+  background-color: #978163;
+}
+.frame .slidee li .overlay {
+  color: rgba(0, 0, 0, 0.5);
+  line-height: 26px;
+}
+.frame .slidee li.thumbImg.active > .overlay,
+.frame .slidee li.thumbImg.hasHover.active > .overlay:hover {
+  color: #978163;
+}
+.frame .slidee li.thumbImg.active > img,
+.frame .slidee li.thumbImg.hasHover.active > img:hover {
+  border: 4px solid #978163;
+}
+.pinBottom .rightViewContainer {
+  display: none !important;
+}

src/assets/style/reset.less

@@ -1,25 +1,177 @@
 /* reset */
-html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
-header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
-table{border-collapse:collapse;border-spacing:0;}
-caption,th{text-align:left;font-weight:normal;}
-html,body,fieldset,img,iframe,abbr{border:0;}
-i,cite,em,var,address,dfn{font-style:normal;}
-[hidefocus],summary{outline:0;}
-li{list-style:none;}
-h1,h2,h3,h4,h5,h6,small{font-size:100%;}
-sup,sub{font-size:83%;}
-pre,code,kbd,samp{font-family:inherit;}
-q:before,q:after{content:none;}
-textarea{overflow:auto;resize:none;}
-label,summary{cursor:default;}
-a,button{cursor:pointer;}
-h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
-del,ins,u,s,a,a:hover{text-decoration:none;}
-body,textarea,input,button,select,keygen,legend{font:14px/1.14;outline:0;}
-body{background:#fff;}
-*{box-sizing: border-box}
-a{text-decoration: none;}
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+p,
+blockquote,
+pre,
+hr,
+figure,
+table,
+caption,
+th,
+td,
+form,
+fieldset,
+legend,
+input,
+button,
+textarea,
+menu {
+  margin: 0;
+  padding: 0;
+}
+
+header,
+footer,
+section,
+article,
+aside,
+nav,
+hgroup,
+address,
+figure,
+figcaption,
+menu,
+details {
+  display: block;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+caption,
+th {
+  text-align: left;
+  font-weight: normal;
+}
+
+html,
+body,
+fieldset,
+img,
+iframe,
+abbr {
+  border: 0;
+}
+
+i,
+cite,
+em,
+var,
+address,
+dfn {
+  font-style: normal;
+}
+
+[hidefocus],
+summary {
+  outline: 0;
+}
+
+li {
+  list-style: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+small {
+  font-size: 100%;
+}
+
+sup,
+sub {
+  font-size: 83%;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: inherit;
+}
+
+q:before,
+q:after {
+  content: none;
+}
+
+textarea {
+  overflow: auto;
+  resize: none;
+}
+
+label,
+summary {
+  cursor: default;
+}
+
+a,
+button {
+  cursor: pointer;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+em,
+strong,
+b {
+  font-weight: bold;
+}
+
+del,
+ins,
+u,
+s,
+a,
+a:hover {
+  text-decoration: none;
+}
+
+body,
+textarea,
+input,
+button,
+select,
+keygen,
+legend {
+  font: 14px/1.14;
+  outline: 0;
+}
+
+body {
+  background: #fff;
+}
+
+* {
+  box-sizing: border-box
+}
+
+a {
+  text-decoration: none;
+}
 
 
 ::-webkit-scrollbar {
@@ -40,100 +192,131 @@ a{text-decoration: none;}
   background-color: #9f9f9f;
   -webkit-border-radius: 4px;
 }
-.el-pagination button:disabled{
+
+.el-pagination button:disabled {
   background-color: transparent;
 }
-.el-pagination .btn-next, .el-pagination .btn-prev{
+
+.el-pagination .btn-next,
+.el-pagination .btn-prev {
   background-color: transparent;
 }
-.el-dialog, .el-pager li{
+
+.el-dialog,
+.el-pager li {
   background-color: transparent;
 }
-.el-pagination{
+
+.el-pagination {
   color: #f0af7c;
 }
+
 .el-pager li.active {
-  color:black;
+  color: black;
 }
-.el-pager li:hover{
-  color:black;
+
+.el-pager li:hover {
+  color: black;
 }
-.el-pagination .btn-next, .el-pagination .btn-prev{
+
+.el-pagination .btn-next,
+.el-pagination .btn-prev {
   color: #f0af7c;
 }
-.el-pagination button:hover{
+
+.el-pagination button:hover {
   color: black;
 }
-.el-textarea__inner{
+
+.el-textarea__inner {
   background-color: rgba(237, 211, 176, .3);
   color: #f0af7c;
-  border:none;
+  border: none;
 }
-.el-textarea__inner::-webkit-input-placeholder{
+
+.el-textarea__inner::-webkit-input-placeholder {
   color: #EDD3B0;
 }
+
 .el-radio {
   color: #f0af7c;
 }
-.el-radio__input.is-checked+.el-radio__label{
+
+.el-radio__input.is-checked+.el-radio__label {
   color: #f0af7c;
 }
-.el-radio__inner{
+
+.el-radio__inner {
   width: 24px;
   height: 24px;
 }
-.el-radio__input.is-checked .el-radio__inner{
+
+.el-radio__input.is-checked .el-radio__inner {
   border-color: red;
   background: #f0af7c;
 }
-.el-radio__inner:hover{
+
+.el-radio__inner:hover {
   border-color: red;
 }
-.el-radio__input.is-checked .el-radio__inner::after{
-  transform: translate(-50%,-50%) scale(0);
+
+.el-radio__input.is-checked .el-radio__inner::after {
+  transform: translate(-50%, -50%) scale(0);
 }
-.search .el-input__inner{
+
+.search .el-input__inner {
   width: 340px;
   height: 36px;
   background-color: transparent;
   color: #774926;
-  border:1px solid #774926;
+  border: 1px solid #774926;
   border-radius: 18px;
 }
-.el-input__inner{
+
+.el-input__inner {
   background-color: transparent;
   color: #774926;
-  border:1px solid #774926;
+  border: 1px solid #774926;
   border-radius: 13px;
 }
-.el-input.is-active .el-input__inner, .el-input__inner:focus{
-  border:1px solid #cc946d;
+
+.el-input.is-active .el-input__inner,
+.el-input__inner:focus {
+  border: 1px solid #cc946d;
 }
-.el-pagination__editor.el-input{
+
+.el-pagination__editor.el-input {
   width: 28px;
   height: 28px;
   margin-right: 4px;
 }
-.el-pagination__editor.el-input .el-input__inner{
+
+.el-pagination__editor.el-input .el-input__inner {
   width: 26px;
   height: 26px;
 }
+
 input::-webkit-input-placeholder {
   color: #cc946d !important;
 }
-.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
-  background-color: rgba(237, 211, 176, .3);;
+
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background-color: rgba(237, 211, 176, .3);
+  ;
 }
-.el-select-dropdown__item.selected{
+
+.el-select-dropdown__item.selected {
   color: #f0af7c;
 }
 
 /* 分页 */
-.el-pagination{
+.el-pagination {
   display: flex;
   align-items: center;
 }
-.el-pager li{
+
+.el-pager li {
   font-weight: 400;
   min-width: 24px;
   width: 24px;
@@ -144,20 +327,87 @@ input::-webkit-input-placeholder {
   background-color: transparent;
   border-radius: 50%;
 }
-.el-pager li:hover{
+
+.el-pager li:hover {
   color: #CC946D;
 }
-.el-pager li.active{
+
+.el-pager li.active {
   width: 26px;
   height: 26px;
   background-color: #CC946D;
   border-radius: 50%;
   color: #fff;
 }
-.el-pager li.active+li{
+
+.el-pager li.active+li {
   border: none;
   background-color: transparent;
 }
-.el-pagination button:hover{
+
+.el-pagination button:hover {
   color: #CC946D;
 }
+
+
+// 底部导航的样式
+.frame-container {
+  background: url('../../assets/myData/tab.png');
+  background-size: 100% 100%;
+}
+
+.frame {
+  background: url('../../assets/myData/tab.png');
+  background-size: 100% 100%;
+}
+
+#playHead {
+
+  // 底部进度条
+  #status {
+    background-color: #d5cfbe;
+    color: #978163;
+  }
+
+  #progressBar {
+    background-color: #d5cfbe;
+  }
+
+  #progressBar .step::before {
+    background-color: #cebca3;
+  }
+
+  #progressBar .step.active::before {
+    background-color: #978163;
+  }
+}
+
+// 滚动条
+.scrollbar {
+  height: 4px;
+
+  .handle {
+    background-color: #978163;
+  }
+}
+
+// 导览列表
+.frame .slidee li .overlay {
+  color: rgba(0,0,0,.5);
+  line-height: 26px;
+}
+
+.frame .slidee li.thumbImg.active>.overlay,
+.frame .slidee li.thumbImg.hasHover.active>.overlay:hover {
+  color: #978163;
+}
+
+.frame .slidee li.thumbImg.active>img,
+.frame .slidee li.thumbImg.hasHover.active>img:hover {
+  border: 4px solid #978163;
+}
+
+// 隐藏楼层
+.pinBottom .rightViewContainer{
+  display: none !important;
+}

src/components/welcome/index.vue

@@ -1,22 +1,44 @@
 <template>
-  <div class="welcome" v-if="0">
-    <div
-      class="btn"
-      @click.stop="$emit('close')"
-      :style="{
-        backgroundImage: `url(${require('@/assets/images/project/btn.png')})`,
-      }"
-    ></div>
+  <div class="welcome">
+    <div class="videoBox" v-if="videoShow">
+      <video
+        ref="myVideo"
+        src="../../assets/myData/play.mp4"
+        autoplay
+        muted
+      ></video>
+      <div class="button" v-if="time" @click="videoShow = false">
+        <img src="../../assets/myData/btn1.png" alt="" />
+      </div>
+    </div>
+
+    <div class="imgBox" v-else>
+      <div class="button" @click.stop="$emit('close')">
+        <img src="../../assets/myData/btn2.png" alt="" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {};
+    return {
+      videoShow: true,
+      time: false,
+    };
   },
   methods: {},
-  mounted() {},
+  mounted() {
+    // 监听视频播放完毕
+    this.$refs.myVideo.addEventListener("ended", () => {
+      this.videoShow = false;
+    });
+
+    setTimeout(() => {
+      this.time = true;
+    }, 1000);
+  },
 };
 </script>
 
@@ -30,21 +52,39 @@ export default {
   z-index: 9999;
   font-size: 0;
   transition: all ease 0.3s;
-  background-color: #146fb1;
-
-  .btn {
+  background-color: black;
+  .videoBox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    video {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .imgBox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url("../../assets/myData/bg.jpg");
+    background-size: 100% 100%;
+  }
+  .button {
     position: absolute;
-    bottom: 15%;
+    bottom: 100px;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 9999;
-    font-size: 0;
-    display: inline-block;
     cursor: pointer;
-    width: 316px;
-    height: 104px;
-    background-size: cover;
-    background-color: none;
+    & > img {
+      width: 260px;
+    }
   }
 }
 </style>

src/pages/Home.vue

@@ -116,7 +116,7 @@ export default {
       hotspots: "",
       loading: true,
       // 控制页面宽度（通过菜单的展开和隐藏）
-      pageFlag: false,
+      pageFlag: true,
       // 控制背景音乐
       musicFlag: true,
     };
@@ -129,7 +129,8 @@ export default {
     },
     // 控制背景音乐播放👆
     hndeMenu(val) {
-      this.pageFlag = val;
+      console.log(123, val);
+      // this.pageFlag = val;
     },
     // 子组件菜单传递过来隐藏和展开事件 👆
     hideWelcome() {
@@ -189,7 +190,7 @@ export default {
           location.reload(true);
         }, 1000);
       }
-    } 
+    }
   },
 };
 </script>
@@ -220,13 +221,15 @@ export default {
 }
 
 #gui-parent {
-  width: calc(100% - 200px);
+  // width: calc(100% - 200px);
+  width: 100%;
 }
 .guiParent {
   width: 100% !important;
 }
 /deep/#drawer {
-  transition: all 0.3s;
-  width: calc(100% - 200px);
+  width: 100%;
+  // transition: all 0.3s;
+  // width: calc(100% - 200px);
 }
 </style>

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>

src/views/gui/compomemt/hotspot.vue

@@ -79,7 +79,7 @@ export default {
     width: 100%;
     height: 100px;
     line-height: 100px;
-    background-color: #cc946d;
+    background-color: #978163;
     color: #fff6d2;
     font-size: 16px;
     text-align: center;
@@ -88,7 +88,8 @@ export default {
   .main {
     width: 100%;
     height: calc(100% - 100px);
-    background-color: rgba(255, 246, 210, 1);
+    // background-color: rgba(255, 246, 210, 1);
+    background-color: #d2cebc;
     .txtNone {
       height: 90%;
       color: #7e522f;

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>

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>

src/views/gui/menu.vue

@@ -140,6 +140,7 @@
                 :src="require('@/assets/images/icon/floor_active.png')"
               />
             </div>
+
             <div
               data-original-title="VR"
               id="vr"
@@ -180,11 +181,22 @@
               />
             </div>
           </div>
+          <!-- 热点列表 -->
+          <div class="hotInco" @click="smBtn = !smBtn">
+            <!-- 鼠标移入的显示 -->
+            <div class="hoverTit">热点列表</div>
+            <img
+              :src="require(`@/assets/img/hotspot${smBtn ? 'Ac' : ''}.png`)"
+              alt=""
+            />
+          </div>
         </div>
       </div>
     </div>
 
+    <!-- 右边的按钮 -->
     <div class="pinBottom right hideTarget">
+      <!-- 楼层 -->
       <div class="rightViewContainer clearfix">
         <div class="gui-floor">
           <div class="gui-floor-title"></div>
@@ -216,118 +228,76 @@
           <a>{[{ TERMS }]}</a>
         </div>
       </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"
-        >
+      <!-- 音乐 -->
+      <div id="volume" class="ui-icon bgandshare wide">
+        <div>
+          <!-- 鼠标移入的显示 -->
+          <div class="hoverTit">{{ musicState ? "关闭音乐" : "打开音乐" }}</div>
           <img
-            :src="
-              require(`@/assets/img/${item.img}${
-                meanInd === item.id ? 'Ac' : ''
-              }.png`)
-            "
+            id="openMusic"
+            style="display: block"
+            @click="switchBGM(true)"
+            src="../../assets/img/musicAc.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`)
-            "
+            id="closeMusic"
+            style="display: none"
+            @click="switchBGM(false)"
+            src="../../assets/img/music.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
+        id="gui-fullscreen"
+        class="ui-icon wide"
+        data-placement="top"
+        rel="tooltip"
+        title="全屏"
+      >
+        <!-- 鼠标移入的显示 -->
+        <div class="hoverTit">全屏</div>
+
+        <a>
+          <img :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"
+      >
+        <!-- 鼠标移入的显示 -->
+        <div class="hoverTit">关闭全屏</div>
+
+        <a>
+          <img :src="require('@/assets/img/fullAc.png')" style="width: 50px" />
+        </a>
       </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="smBtn" @close="smBtn = false" :smBtn="smBtn" />
   </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 {
+      musicState: true,
+
       isGuide: true,
       // 右侧菜单数据
       smBtn: false,
-      meanInd: null,
       rightList: [
         { id: 1, name: "展厅列表", img: "navigation" },
         { id: 2, name: "精品文物", img: "antique" },
@@ -354,9 +324,11 @@ export default {
     switchBGM(flag) {
       if (flag) {
         window.manage.switchBgmState(true);
+        this.musicState = true;
         document.querySelector("#openMusic").style.display = "none";
         document.querySelector("#closeMusic").style.display = "block";
       } else {
+        this.musicState = false;
         window.manage.switchBgmState(false);
         document.querySelector("#openMusic").style.display = "block";
         document.querySelector("#closeMusic").style.display = "none";
@@ -422,93 +394,49 @@ export default {
     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;
+
+// 全屏鼠标移入文字提示
+#gui-fullscreen {
+  position: relative;
+  &:hover {
+    .hoverTit {
+      opacity: 1;
+    }
   }
-  .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;
-      }
+}
+
+#gui-fullscreen-exit {
+  position: relative;
+  &:hover {
+    .hoverTit {
+      opacity: 1;
     }
   }
-  .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;
+}
+#volume {
+  top: 2px;
+  position: relative;
+  &:hover {
+    .hoverTit {
+      opacity: 1;
     }
   }
 }
-.hideMenu {
-  transform: translateX(200px);
+
+// 热点列表
+.hotInco {
+  position: relative;
+  cursor: pointer;
+  width: 70px;
+  text-align: center;
+  & > img {
+    width: 44px;
+  }
+  &:hover {
+    .hoverTit {
+      opacity: 1;
+    }
+  }
 }
 
 // 右侧菜单栏
@@ -522,10 +450,10 @@ export default {
     height: @wh;
   }
 }
-.rightViewContainer {
-  display: flex !important;
-  align-items: center !important;
-}
+// .rightViewContainer {
+//   display: flex !important;
+//   align-items: center !important;
+// }
 #gui-modes-map {
   > div {
     margin-right: @margin;
@@ -552,16 +480,25 @@ export default {
   background: none;
 }
 
-#gui-fullscreen img {
-  width: 40px;
-}
+// 音乐
 #volume {
-  width: 40px;
+  width: 44px;
+}
+// 全屏
+#volume > a,
+#gui-fullscreen > a,
+#gui-fullscreen-exit > a {
+  width: 44px;
+}
+#gui-fullscreen img {
+  width: 44px;
 }
 
 #gui-fullscreen-exit img {
   width: 40px !important;
 }
+
+//
 .bgandshare {
   background: none !important;
   // margin-right: 20px!important;