1

hot/src/views/Home.vue

@@ -9,23 +9,36 @@
           :src="urlToFitFu(audio)"
           controls
         ></audio>
-        <!-- 音频图标 -->
-        <div
-          class="audioIcon"
-          v-if="audio && !isOneAduio"
-          @click="audioSta = !audioSta"
-          :title="audioSta ? '关闭音频' : '打开音频'"
-        >
-          <img
-            :src="
-              require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)
-            "
-            alt=""
-          />
+        <!-- 音频图标 v-if="audio && !isOneAduio"-->
+        <div class="iconList">
+          <div
+            class="audioIcon"
+            @click="audioSta = !audioSta"
+            :title="audioSta ? '关闭音频' : '打开音频'"
+          >
+            <img
+              :src="
+                require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)
+              "
+              alt=""
+            />
+          </div>
+          <div
+            class="audioIcon"
+            @click="audioSta = !audioSta"
+            :title="audioSta ? '关闭音频' : '打开音频'"
+          >
+            <img
+              :src="
+                require(`@/assets/images/pc/yuyan.png`)
+              "
+              alt=""
+            />
+          </div>
         </div>
 
         <!-- 如果只有一个模块 -->
-        <div
+        <!-- <div
           class="oneTabNum"
           v-if="
             flooTab.length === 1 &&
@@ -35,10 +48,10 @@
           "
         >
           {{ myInd + 1 }} / {{ data[myType].length }}
-        </div>
+        </div> -->
 
         <!-- 底部的tab -->
-        <div class="flooTabBox" v-if="flooTab.length > 1">
+        <!-- <div class="flooTabBox" v-if="flooTab.length > 1">
           <div
             @click="myType = item.type"
             class="tabRow"
@@ -65,35 +78,36 @@
               }}{{ data[item.type].length }}</span
             >
           </div>
-        </div>
+        </div> -->
 
         <!-- 主要内容 -->
 
         <div class="contenBoxMain">
+          <img class="logo" src="../assets/logo.png" alt="" />
           <div
             class="contenBox"
             :class="{ contenBoxAc: index === myInd }"
-            v-for="(item, index) in data[myType]"
-            :key="myType === 'video' ? item.url : item"
+            v-for="(item, index) in activeObj.images"
+            :key="index"
           >
             <!-- 模型页面 -->
-            <div class="modelBox" v-if="myType === 'model'">
+            <!-- <div class="modelBox" v-if="myType === 'model'">
               <iframe
                 :src="urlToFitFu(item)"
                 frameborder="0"
                 v-if="index === myInd"
               ></iframe>
-            </div>
+            </div> -->
             <!-- 视频页面 -->
-            <div class="videoBox" v-else-if="myType === 'video'">
+            <!-- <div class="videoBox" v-else-if="myType === 'video'">
               <video
                 controls
                 :src="urlToFitFu(item.url)"
                 v-if="index === myInd"
               ></video>
-            </div>
-            <!-- 图片页面 -->
-            <div class="imgBox" v-else-if="myType === 'img'">
+            </div> -->
+            <!-- 图片页面  v-if="myType === 'img'"-->
+            <div class="imgBox">
               <div class="smImgBox" @click="lookImg(urlToFitFu(item))">
                 <img v-lazy="urlToFitFu(item)" alt="" />
               </div>
@@ -104,29 +118,30 @@
             @click="cutMyInd(-1, myInd === 0)"
             class="leftJJ awccJJ"
             :class="{ noClick: myInd === 0 }"
-            v-if="data[myType] && data[myType].length > 1"
+            v-if="activeObj.images && activeObj.images.length > 1"
           ></div>
           <div
-            @click="cutMyInd(1, myInd === data[myType].length - 1)"
+            @click="cutMyInd(1, myInd === activeObj.images.length - 1)"
             class="rightJJ awccJJ"
-            :class="{ noClick: myInd === data[myType].length - 1 }"
-            v-if="data[myType] && data[myType].length > 1"
+            :class="{ noClick: myInd === activeObj.images.length - 1 }"
+            v-if="activeObj.images && activeObj.images.length > 1"
           ></div>
         </div>
       </div>
-
+      <div class="changeList">
+        <div class="list">
+          <div class="item" @click="activeObj = element;myInd = 0" v-for="element in list" :key="element.title" :class="{active: element.id == activeObj.id}">
+            {{ element.title }}
+          </div>
+        </div>
+      </div>
       <!-- 下面的文字介绍 -->
-      <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
+      <div class="flooTxt" v-if="activeObj.images[myInd]">
         <div class="flooTxtBox">
-          <div class="myTitle">{{ myTitle }}</div>
-          <!-- 视频的介绍 -->
-          <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]">
-            {{ videoTxt[myInd] }}
-          </div>
-          <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]">
-            {{ imgTxt[myInd] }}
+          <div class="myTitle">{{ activeObj.images[myInd].title_zh }}</div>
+          <div class="myTxt">
+            {{ activeObj.images[myInd].text_zh }}
           </div>
-          <div class="myTxt" v-html="myTxt"></div>
         </div>
       </div>
     </div>
@@ -139,6 +154,8 @@
 
 
 <script>
+import myData from "./data.json";
+
 export default {
   name: "Home",
   data() {
@@ -151,37 +168,15 @@ export default {
       isOneAduio: false,
       // 音频状态
       audioSta: false,
-
-      data: {
-        // 模型数组
-        model: [],
-        // 视频数组
-        video: [],
-        // 图片数组
-        img: [],
-      },
-      // 当前 type
-      myType: "",
-
-      // 底部的tab
-      flooTab: [],
-
-      // 当前索引
       myInd: 0,
-
+      // 当前 type
+      list: [],
       // 查看图片
       lookPics: [],
-
-      // 标题
-      myTitle: "",
-      // 内容
-      myTxt: "",
-      // 视频内容
-      videoTxt: [],
-      imgTxt: [],
-
-      // 只有标题和文字（没有视频，没有模型，没有图片）
-      oneTxt: false,
+      activeObj: {
+        id: 1,
+        images: [],
+      },
     };
   },
   watch: {
@@ -205,82 +200,46 @@ export default {
   methods: {
     // 本地化 url 适配
     urlToFitFu(url) {
-      return url
+      return url.url || url;
       // const resUrl = url;
       // if (url.includes("https://super.4dage.com")) {
       //   return url.replace("https://super.4dage.com", "");
       // } else if (url.includes("http://super.4dage.com")) {
       //   return url.replace("http://super.4dage.com", "");
-      // } else return resUrl;  
+      // } else return resUrl;
     },
 
     // 点击左右箭头
     cutMyInd(num, flag) {
       if (flag) return;
       this.myInd += num;
+      this.activeObj = this.data[this.myType][this.myInd];
+      console.log("----num", this.activeObj, "flag", flag, this.myInd);
     },
     // 点击查看大图
     lookImg(url) {
       let dom = this.$refs.viewer.$viewer;
-      this.lookPics = [url];
+      this.lookPics = [url.url || url];
       dom.show();
     },
     async getData() {
+      console.log("----myData", myData);
       // https://www.4dmodel.com/
 
-      let url = `https://super.4dage.com/data/${   // 线上数据
+      // let url = `https://super.4dage.com/data/${   // 线上数据
 
       // let url = `/data/${
-        //本地化部署
-        this.id
-      }/hot/js/data.js?time=${Math.random()}`;
-      let result = (await this.$http.get(url)).data;
-      const resData = result[this.m];
-      // console.log("----", resData);
-      if (resData) {
-        this.audio = resData.backgroundMusic;
-        // 只有单独的音频上传
-        if (
-          resData.backgroundMusic &&
-          !resData.model &&
-          !resData.video &&
-          !resData.images
-        ) {
-          this.isOneAduio = true;
-        }
-        // 底部的tab
-        const arr = [];
-        const obj = {};
-        if (resData.model) {
-          obj.model = resData.model;
-          arr.push({ id: 1, type: "model", name: "模型" });
-        }
-        if (resData.video) {
-          obj.video = resData.video;
-          arr.push({ id: 2, type: "video", name: "视频" });
-        }
-        if (resData.images) {
-          obj.img = resData.images;
-          arr.push({ id: 3, type: "img", name: "图片" });
-        }
-        this.flooTab = arr;
-        this.data = obj;
-
-        // 当前type的值 应该为
-        if (resData.model) this.myType = "model";
-        else if (resData.video) this.myType = "video";
-        else if (resData.images) this.myType = "img";
-
-        this.myTitle = resData.title || "";
-        this.myTxt = resData.content || "";
-        this.videoTxt = resData.videosDesc || [];
-        this.imgTxt = resData.imagesDesc || [];
-
-        // 只有 标题和 文字介绍（没有视频，没有模型，没有图片）
-        if (!obj.model && !obj.video && !obj.img && !resData.backgroundMusic) {
-          this.oneTxt = true;
-        }
-      }
+      //   //本地化部署
+      //   this.id
+      // }/hot/js/data.js?time=${Math.random()}`;
+      // let url = `/hot/js/data.js?time=${Math.random()}`;
+      // let result = (await this.$http.get(url)).data;
+      const resData = myData;
+      this.list = resData;
+      let showData = resData && resData[0];
+      this.activeObj = {
+        ...showData,
+      };
     },
   },
   mounted() {
@@ -309,22 +268,67 @@ export default {
     height: 60px;
   }
   .main {
-    width: 1200px;
+    width: 1350px;
     margin: 0 auto;
-    height: 100%;
-    padding-top: 40px;
+    height: 825px;
+    padding-top: 95px;
+    .changeList {
+      width: 630px;
+      height: 32px;
+      width: 630px;
+      height: 32px;
+      position: absolute;
+      left: calc(50% - 315px);
+      bottom: 286px;
+      .list {
+        display: flex;
+        align-items: center;
+        .active{
+          opacity: 1;
+          color: #02362C;
+        }
+        div {
+          height: 100%;
+          padding: 8px 7px 10px 7px;
+          min-width: 70px;
+          text-align: center;
+          background: #dde5e2;
+          border-radius: 7px;
+          font-family: Source Han Serif CN;
+          font-weight: 500;
+          font-size: 14px;
+          color: #02362c;
+          line-height: 14px;
+          opacity: 0.79;
+          margin-right: 20px;
+        }
+      }
+    }
     .mainCon {
+      background-image: url("../assets/bg.png");
+      background-size: 100% 100%;
       position: relative;
       border-radius: 6px;
       overflow: hidden;
       width: 100%;
-      height: calc(100% - 200px);
+      height: 100%;
+      
+      .iconList{
+        position: absolute;
+        bottom: 182px;
+        right: 237px;
+        display: flex;
+        }
       .audioIcon {
         z-index: 10;
         cursor: pointer;
-        position: absolute;
-        right: 20px;
-        bottom: 30px;
+        position: relative;
+        // right: 20px;
+        // bottom: 278px;
+        width: 62px;
+        img {
+          width: 100%;
+        }
       }
       .oneTabNum {
         z-index: 10;
@@ -365,13 +369,19 @@ export default {
         position: relative;
         width: 100%;
         height: 100%;
+        .logo {
+          position: absolute;
+          left: 52px;
+          top: 37px;
+          height: 60px;
+        }
       }
       .contenBox {
-        width: 100%;
-        height: 100%;
+        width: 630px;
+        height: 355px;
         position: absolute;
-        top: 0;
-        left: 0;
+        top: 123px;
+        left: calc(50% - 315px);
         opacity: 0;
         pointer-events: none;
         transition: all 0.5s;
@@ -381,6 +391,7 @@ export default {
         .imgBox {
           width: 100%;
           height: 100%;
+          object-fit: cover;
         }
         .modelBox {
           iframe {
@@ -389,14 +400,15 @@ export default {
           }
         }
         .videoBox {
-          padding: 100px 100px 120px;
+          // padding: 100px 100px 120px;
           video {
             width: 100%;
             height: 100%;
+            object-fit: cover;
           }
         }
         .imgBox {
-          padding: 100px 100px 120px;
+          // padding: 100px 100px 120px;
           .smImgBox {
             width: 100%;
             height: 100%;
@@ -405,7 +417,7 @@ export default {
               pointer-events: none;
               width: 100%;
               height: 100%;
-              object-fit: contain;
+              object-fit: cover;
             }
           }
         }
@@ -417,12 +429,12 @@ export default {
       .awccJJ {
         cursor: pointer;
         position: absolute;
-        top: 50%;
+        top: 42%;
         transform: translateY(-50%);
-        left: 10px;
-        width: 37px;
-        height: 37px;
-        background-image: url("../assets/images/pc/left.png");
+        left: 266px;
+        width: 48px;
+        height: 60px;
+        background-image: url("../assets/images/icon/left.png");
         background-size: 100% 100%;
         &:focus {
           outline: none;
@@ -430,8 +442,8 @@ export default {
       }
       .rightJJ {
         left: auto;
-        right: 10px;
-        background-image: url("../assets/images/pc/right.png");
+        right: 266px;
+        background-image: url("../assets/images/icon/right.png");
       }
       .noClick {
         cursor: default;
@@ -440,22 +452,27 @@ export default {
     }
     .flooTxt {
       margin-top: 20px;
-      width: 100%;
-      height: 160px;
+      width: 80%;
+      height: 135px;
+      margin: 0 auto;
+      position: relative;
+      top: -137px;
       .flooTxtBox {
         width: 100%;
         height: 100%;
         overflow-y: auto;
         .myTitle {
-          color: #b90c0c;
+          color: #DDE5E2;
           font-size: 22px;
           font-weight: 700;
           margin-bottom: 10px;
         }
         .myTxt {
-          font-size: 16px;
-          color: #333333;
-          line-height: 24px;
+          font-family: Adobe Heiti Std;
+          font-weight: normal;
+          font-size: 19px;
+          color: #DDE5E2;
+          line-height: 31px;
         }
         &::-webkit-scrollbar {
           /*滚动条整体样式*/
@@ -496,7 +513,6 @@ export default {
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-
       .mainCon {
         border-radius: 8px 8px 0 0;
         .audioIcon {

scene/public/static/css/css/sceen2.css

@@ -3924,7 +3924,7 @@ a.hasHover:hover,a:active {
 }
 
 #thumb-container .thumbImg {
-  cursor: pointer
+  cursor: pointer;
 }
 
 .playing #thumb-container .thumbImg {

scene/public/static/css/main.css

@@ -3473,7 +3473,7 @@ a.hasHover:hover, a:active {
 
 #gui-modes-map>div[rel] {
     float: left;
-    width: 70px;
+    width: 80px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -3958,7 +3958,8 @@ a.hasHover:hover, a:active {
     transition-property: height, bottom;
     transition-duration: .5s;
     pointer-events: all;
-    z-index: 50
+    z-index: 50;
+    border-radius: 20px 20px 0 0;
 }
 
 #drawer.open {
@@ -4006,7 +4007,7 @@ a.hasHover:hover, a:active {
 }
 
 #thumb-container .thumbImg {
-    cursor: pointer
+    cursor: pointer;
 }
 
 .playing #thumb-container .thumbImg {
@@ -4014,7 +4015,8 @@ a.hasHover:hover, a:active {
 }
 
 #thumb-container .thumbImg img {
-    height: 97px
+    height: 97px;
+    border-radius:  10px;
 }
 
 .frame-container {
@@ -4028,7 +4030,7 @@ a.hasHover:hover, a:active {
 }
 
 .frame {
-    padding-top: 8px;
+    padding-top: 12px;
     width: 100%;
     height: 132px;
     float: left;
@@ -4068,6 +4070,7 @@ a.hasHover:hover, a:active {
     bottom: -30px;
     left: 50%;
     transform: translateX(-50%);
+    opacity: 0;
 }
 
 .frame .slidee li .mark360View, .frame .slidee li .markInsideView {
@@ -4129,7 +4132,7 @@ a.hasHover:hover, a:active {
 .scrollbar .handle {
     width: 100px;
     height: 100%;
-    background: #fff;
+    background: #245839;
     border-radius: 5px
 }
 
@@ -7043,7 +7046,7 @@ a.hasHover.tag-link:hover {
         display: block !important;
     }
     .viewContainer{
-        padding: 10px 20px 10px 10px;
+        /* padding: 10px 20px 10px 10px; */
         display: flex !important;
         align-items: center;
         border-radius: 0 20px 20px 0;

scene/public/static/js/Hot.js

@@ -52,7 +52,8 @@ window.initHot = function(model){
 
     var hotGroup = new THREE.Object3D;  hotGroup.name = "hotGroup"
     model.add(hotGroup);   model.hotGroup = hotGroup
-    
+    console.log("createHotList", hotGroup)
+
     var animateTexSrcs = {}        
     
     var getLink = function(link){                                           
@@ -60,7 +61,7 @@ window.initHot = function(model){
         var r = link.substring(link.indexOf("html") + 4),
             o = "en" == manage.number("lang") ? "&lang=" + manage.number("lang") : ""; 
         -1 == r.indexOf("?") ? src = link + "?time=" + randomTime().getTime() + "&id=" + window.number + o : src = link + "&time=" + randomTime().getTime() + "&id=" + window.number + o
-        return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'hot')
+        return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', ' http://localhost:8082')
         // return src //打包   
        
     }
@@ -1765,7 +1766,7 @@ window.initHot = function(model){
         var docFragment = document.createDocumentFragment();
         var hots = hotGroup.children.filter(hot=>hot.info.actionType.openHot);
         hots = hots.sort((a,b)=>{return a.order - b.order});
-
+        console.log('createHotList', hotGroup.children)
         window.myHotList = hots
 
         hots.forEach((hot)=>{

scene/public/static/js/main_2020_show.js

@@ -6287,7 +6287,8 @@ window.Modernizr = function(n, e, t) {
             }
             function a() {
                 c(),
-                $(".pinBottom").toggleClass("open"),
+                // $(".pinBottom").toggleClass("open"),
+                $(".pinBottom-container").toggleClass("open"),
                 $("#drawer").toggleClass("open"),
                 $(".footer").toggleClass("open"),
                 $("#drawer").hasClass("open") ? ($("#pullTab .icon").attr("data-original-title", Re.CLOSE_HIGHLIGHTS),
@@ -7398,10 +7399,12 @@ window.Modernizr = function(n, e, t) {
                 $("#drawer").hasClass("open") ? (J.trackAlways("showcase_gui", {
                     gui_action: "hide_highlight_reel"
                 }),
-                $(this).addClass("open").children("img").attr("src","static/images/auto.png")) : (J.trackAlways("showcase_gui", {
+                // .addClass("open")
+                $(this).children("img").attr("src","static/images/auto.png")) : (J.trackAlways("showcase_gui", {
                     gui_action: "show_highlight_reel"
                 }),
-                $(this).removeClass("open").children("img").attr("src","static/images/auto-suspend.png"));
+                // .removeClass("open")
+                $(this).children("img").attr("src","static/images/auto-suspend.png"));
                 a()
             });
 

scene/src/assets/style/myBase.css

@@ -23,7 +23,10 @@
   border: 3px solid #D6B970;
 }
 #drawer {
+  /* background-color: rgba(185, 12, 12, 0.8); */
   background-color: rgba(185, 12, 12, 0.8);
+  background: url(../../assets/img/drawerBg.png) no-repeat center;
+  background-size: cover;
 }
 #drawer .darkGlass {
   background-color: transparent;

scene/src/components/welcome/index.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="welcome">
     <div class="mobileBg" v-if="isMobile"></div>
-    <iframe
+    <div class="pcBg" v-else></div>
+    <!-- <iframe
       v-else
       src="https://zzbbh.4dage.com/SWKK/show.html?id=WK1717474784264114176&vr=fd720_Y8cO1d7Fu&lang=zh"
       frameborder="0"
-    ></iframe>
+    ></iframe> -->
     <div class="btn" @click.stop="$emit('close')">
-      <img src="../../assets/img/home/homeBtn.png" alt="" />
-      <p>360环顾</p>
+      <img src="../../assets/img/but.png" alt="" />
+      <!-- <p>360环顾</p> -->
     </div>
   </div>
 </template>
@@ -43,7 +44,7 @@ export default {
   .btn {
     position: absolute;
     z-index: 10;
-    bottom: 10%;
+    bottom: 28%;
     left: 50%;
     transform: translateX(-50%);
     cursor: pointer;
@@ -64,7 +65,12 @@ export default {
       align-items: center;
     }
   }
-
+  .pcBg {
+    width: 100%;
+    height: 100%;
+    background-image: url('../../assets/img/pcBg.jpg');
+    background-size: 100% 100%;
+  }
   .mobileBg {
     width: 100%;
     height: 100%;

scene/src/pages/Home.vue

@@ -19,7 +19,7 @@
       <!-- 三维 标签 -->
       <div class="widgets-doll-labels"></div>
 
-      <div id="gui" style="display: none">
+      <div id="gui" v-show="loading">
         <!-- 退出VR模式按钮 -->
         <div id="vrOff">
           <img id="vrOffImg" src="images/vrOffImg.png" alt="" />

scene/src/views/gui/components/hotList.vue

@@ -44,6 +44,7 @@ export default {
   },
   created() {
     this.data = window.myHotList || [];
+    console.log('myHotList', this.data);
   },
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -63,7 +64,8 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-image: url("../../../assets/img/open/bg-list.png");
+  // background-image: url("../../../assets/img/open/bg-list.png");
+  background-image: url("../../../assets/img/bg.png");
   background-size: 100% 100%;
   padding: 60px 80px;
   .title {

scene/src/views/gui/guide.vue

@@ -26,14 +26,14 @@ export default {
 </script>
 <style lang="less" scoped>
 #status {
-  background-color: rgba(185, 12, 12, 0.80);
+  background-color: #0A6247;
   color: #fff;
 }
 #progressBar {
   height: 100%;
   display: flex;
   align-items: center;
-  background-color: rgba(185, 12, 12, 0.80);
+  background-color: #0A6247;
 }
 #playHead {
   background-color: transparent;

scene/src/views/gui/menu.vue

@@ -4,7 +4,7 @@
       <div id="view-controllers"></div>
     </div>
     <div class="pinBottom left">
-      <div v-if="isMobile" id='myClickBox' style="">
+      <div v-if="isMobile" id="myClickBox" style="">
         <div id="go" />
         <div id="back" />
       </div>
@@ -150,7 +150,7 @@
             <div v-show="!hideTools" id="myHotList" @click="openInd = 1">
               <!-- 鼠标移入的显示 -->
               <div class="hoverTit">热点列表</div>
-              <img src="../../assets/img/hot.png" alt="" />
+              <img src="../../assets/images/icon/hot.png" alt="" />
             </div>
 
             <div
@@ -215,19 +215,32 @@
         </div>
 
         <!-- 回到pc页面（首页） -->
-        <div class="toHomeBox" @click="toHomeFu">
-          <!-- 鼠标移入的显示 -->
+        <!-- 鼠标移入的显示 -->
+        <!-- <div class="toHomeBox" @click="toHomeFu">
           <div class="hoverTit">回到首页</div>
           <img src="../../assets/img/toHome.png" alt="" />
-        </div>
+        </div> -->
 
         <!-- vr -->
-        <div class="toHomeBox" @click="openVR">
-          <!-- 鼠标移入的显示 -->
+        <!-- 鼠标移入的显示 -->
+        <!-- <div class="toHomeBox" @click="openVR">
           <div class="hoverTit">VR</div>
           <img src="../../assets/img/openVR.png" alt="" />
+        </div> -->
+        <div class="fgx">
+          <img
+            style="
+              display: block;
+              width: 9px;
+              width: 9px;
+              position: relative;
+              left: -8px;
+              top: 10px;
+            "
+            src="../../assets/images/icon/border.png"
+            alt=""
+          />
         </div>
-
         <!-- 音乐 -->
         <div id="volume" class="ui-icon bgandshare wide">
           <!-- 鼠标移入的显示 -->
@@ -237,23 +250,46 @@
               id="openMusic"
               style="display: block"
               @click="switchBGM(true)"
-              src="../../assets/img/musicAc.png"
+              src="../../assets/images/icon/musicAc.png"
               alt=""
             />
             <img
               id="closeMusic"
               style="display: none"
               @click="switchBGM(false)"
-              src="../../assets/img/music.png"
+              src="../../assets/images/icon/music.png"
               alt=""
             />
           </div>
         </div>
         <!-- 分享 -->
-        <div class="toHomeBox" @click="openInd = 2">
-          <!-- 鼠标移入的显示 -->
+        <!-- 鼠标移入的显示 -->
+        <!-- <div class="toHomeBox" @click="openInd = 2">
           <div class="hoverTit">分享</div>
           <img src="../../assets/img/share.png" alt="" />
+        </div> -->
+        <div class="toHomeBox" @click="read = true">
+          <div class="yueduliang" v-if="read">
+            <div v-for="item in readList" :key="item" :class="{active: item==activeRead}" @click="readClick(item)">{{ item }}</div>
+            <div class="read">{{ readVlaue }}</div>
+            <img @click.stop="read = false" src="../../assets/images/icon/close.png" alt="">
+            <span class="triangle-down"></span>
+          </div>
+          <div class="hoverTit">阅读量</div>
+          <img src="../../assets/images/icon/red.png" alt="" />
+        </div>
+
+        <div class="toHomeBox">
+          <div class="hoverTit">全屏</div>
+          <img src="../../assets/images/icon/quanping.png" alt="" />
+        </div>
+
+        <div class="toHomeBox">
+          <div class="ppList">
+            <div v-for="item in languageList" :key="item" :style="{color: item==language?'#0F7562':'#00221C'}">{{item}}</div>
+          </div>
+          <div class="hoverTit">语言</div>
+          <img src="../../assets/images/icon/yuyan.png" alt="" />
         </div>
       </div>
     </div>
@@ -263,7 +299,6 @@
       <Share v-show="openInd === 2" @close="openInd = 0" :openInd="openInd" />
     </div>
     <!-- 手动触发导览 -->
-
   </div>
 </template>
 
@@ -274,7 +309,7 @@ import Share from "./components/share.vue";
 export default {
   components: { HotList, Share },
   props: {
-    hideTools: Boolean
+    hideTools: Boolean,
   },
   data() {
     return {
@@ -282,6 +317,12 @@ export default {
       musicState: false,
       // vr---热点列表---分享
       openInd: 0,
+      read: false,
+      readVlaue: 19990,
+      activeRead: '全部',
+      language: '简体中文',
+      languageList: ['简体中文', '繁体中文', 'English', 'Português'],
+      readList: ['全部', '本年', '本月', '本日'],
     };
   },
   watch: {},
@@ -296,8 +337,7 @@ export default {
         document.querySelector("#closeMusic").style.display = "block";
 
         // 手动停止自动导览
-        window.player.director.stopTour()
-
+        window.player.director.stopTour();
       } else {
         window.manage.switchBgmState(false);
         document.querySelector("#openMusic").style.display = "block";
@@ -313,6 +353,9 @@ export default {
       this.switchBGM(false);
       this.$emit("toHome");
     },
+    readClick(item) {
+      this.activeRead = item;
+    }
   },
 };
 </script>
@@ -341,23 +384,26 @@ export default {
 .hoverTit {
   pointer-events: none;
   transition: all 0.5s;
-  opacity: 0;
+  opacity: 1;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: -40px;
+  bottom: -26px;
   width: 80px;
   height: 37px;
   line-height: 30px;
   text-align: center;
-  background: url("../../assets/img/hoverTit.png");
-  background-size: 100% 100%;
-  font-size: 14px;
-  color: #fff;
+  // background: url("../../assets/img/hoverTit.png");
+  // background-size: 100% 100%;
+  font-family: Source Han Serif CN;
+  font-weight: 500;
+  font-size: 13px;
+  text-shadow: 0 0 black;
+  color: #0f7562;
 }
 #play:hover {
   .hoverTit {
-    opacity: 1;
+    // opacity: 1;
   }
 }
 #pause:hover {
@@ -388,7 +434,7 @@ export default {
 }
 
 // 右侧菜单栏
-@wh: 44px;
+@wh: 58px;
 @margin: 0px;
 #play,
 #pause {
@@ -432,7 +478,7 @@ export default {
   width: 44px;
 }
 #volume {
-  width: 44px;
+  width: 58px;
 }
 
 #gui-fullscreen-exit img {
@@ -454,22 +500,113 @@ export default {
   margin-right: 20px;
   cursor: pointer;
   position: relative;
-  width: 44px;
+  width: 58px;
+  height: 58px;
+  .yueduliang{
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: -50px;
+    background: #fff;
+    border-radius: 25px;
+    height: 27px;
+    color: #0F7562;
+    padding: 0 10px;
+    top: -35px;
+    left: -96px;
+    .triangle-down {
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 10px solid #fff;
+      position: absolute;
+      top: 24px;
+      left: 120px;
+    }
+    div {
+      padding: 0 7px;
+      height: 20px;
+      line-height: 20px;
+      text-align: center;
+      width: max-content;
+    }
+    .active{
+      background: #0F7562;
+      border-radius: 25px;
+      color: #fff;
+    }
+    img {
+      top: -5px;
+      width: 14px;
+    }
+  }
   img {
-    width: 44px;
+    width: 58px;
+    padding-top: 10px;
+    position: relative;
+    top: -10px;
+  }
+  .ppList{
+    padding: 8px 10px;
+    width: 99px;
+    position: absolute;
+    top: -145px;
+    left: -18px;
+    background: #fff;
+    opacity: 0.85;
+    border-radius: 8px;
+    display: none;
+    div{
+      height: 30px;
+      line-height: 30px;
+      font-family: Source Han Serif CN;
+      font-weight: 600;
+      font-size: 14px;
+      color: #00221C;
+      opacity: 0.85;
+      text-align: center;
+      border-bottom: 1px solid #D2C9C1;
+      &:last-child{
+        border: none;
+      }
+    }
   }
   &:hover {
     .hoverTit {
       opacity: 1;
     }
+    .ppList{
+      display: block;
+    }
+  }
+}
+#gui {
+  .open {
+    bottom: calc(118px + 20px);
+    // .pinBottom{
+    //   left: 85px;
+    // }
   }
 }
-
 .pinBottom-container {
+  background-image: url("../../assets/img/buttom.png");
+  background-size: 100% 100%;
+  background-position: 0% 0%;
+  background-repeat: no-repeat;
+  height: 100px;
+  width: 920px;
+  left: calc(50% - 460px);
+  .pinBottom.left {
+    left: 100px;
+  }
+  .pinBottom.right {
+    right: 25px;
+  }
   #myHotList {
     position: relative;
     float: left;
-    width: 70px;
+    width: 80px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -538,7 +675,7 @@ export default {
     }
   }
 }
-#myClickBox{
+#myClickBox {
   display: flex;
   flex-direction: column;
   position: fixed;
@@ -548,8 +685,8 @@ export default {
   width: 146px;
   height: 146px;
   transform: translateX(-50%);
-  background: url('../../assets/img/m_btn.png') no-repeat center / contain;
-  transition: .2s bottom linear;
+  background: url("../../assets/img/m_btn.png") no-repeat center / contain;
+  transition: 0.2s bottom linear;
 
   > div {
     flex: 1;