1

.favorites.json

@@ -0,0 +1,11 @@
+[
+    {
+        "type": "File",
+        "name": "d:\\projects\\安徽日报\\code-new-new\\public\\static\\css\\main.css",
+        "parent_id": null,
+        "fsPath": "d:\\projects\\安徽日报\\code-new-new\\public\\static\\css\\main.css",
+        "workspaceRoot": null,
+        "workspacePath": null,
+        "id": "FuIisPJBL3SZp2Na"
+    }
+]

public/static/css/main.css

@@ -4115,11 +4115,11 @@ a.hasHover:hover, a:active {
 
 .frame .slidee li.thumbImg.active>img, .frame .slidee li.thumbImg.hasHover.active>img:hover {
     opacity: 1;
-    border: 2px solid #FFF6D2;
+    border: 3px solid #FFF6D2;
 }
 
 .frame .slidee li.thumbImg.active>.overlay, .frame .slidee li.thumbImg.hasHover.active>.overlay:hover {
-    color: #fff6d2;
+    color: #fff;
 }
 
 .scrollbar {

src/App.vue

@@ -13,6 +13,7 @@
 <script>
 import '@/assets/style/reset.less'
 import '@/assets/style/public.less'
+
 export default {
     
 }

src/assets/style/globalVars.less

@@ -1 +0,0 @@
-@theme:#BC1915;

src/assets/style/public.less

@@ -8,8 +8,6 @@ img{
   -webkit-user-drag: none;
 }
 
-@theme:#BC1915;
-
 .ui-button {
   height: 50px;
   line-height: 1;
@@ -78,49 +76,21 @@ input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
 }
 
 .cad{
-  position: fixed;
-  right: 10px;
-  top: 130px;
-  width: 280px;
-  height: 150px;
+  top: 28px !important;
+  right: 20px !important;
+  width: 237px !important;
+  height: 149px !important;
+  border-radius: initial !important;
   z-index: 999;
-  transition: 0.3s ease all;
-  #cad{
-    width: 100%;
-    height: 100%;
-  }
 }
 
-@media only screen and (max-width: 487px), (max-height:487px) {
-  .cad{
-    position: fixed;
-    top: 38%;
-    left: 50%;
-    transform: translate(-150%,-50%);
-    width: 280px;
-    height: 150px;
-    z-index: 999;
-    transition: none;
-    #cad{
-      width: 100%;
-      height: 100%;
-    }
-  }
-  
-.ui-input{
-  padding: 0 14px;
-  color: #fff;
-  letter-spacing: 0;
-  height: 34px;
-  line-height: 34px;
-  width: 100%;
-  background: rgba(#000, 0.8);
-  border: 1px solid #FFB521;
-  border-radius: 17px;
-}
+// 小地图 当前位置标志
+// 位置圆圈。默认半径2.69，圆圈粗细1.076
+#ele1 circle {
+  fill: #165491;
+  r: 2;
 }
-
-.no-record{
-  text-align: center;
-  margin: 28vh auto;
+// 视野
+#ele1 path {
+  fill: #165491;
 }

src/components/MiniMapDecorator.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="mini-map-dec">
+    <img class="roof" src="@/assets/images/icon/mini-map-pc.png" alt="" draggable="false">
+  </div>
+</template>
+
+<style lang="less" scoped>
+.mini-map-dec {
+  .roof {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    width: 254px;
+    height: 18px;
+    transform: translate(-50%, -100%);
+    
+  }
+}
+</style>

src/components/collection.vue

@@ -87,7 +87,7 @@ export default {
     white-space: nowrap;
     text-overflow: ellipsis;
     .tag {
-      color: @theme;
+      color: #BC1915;
     }
     div{
       overflow: hidden;
@@ -133,5 +133,8 @@ export default {
   }
  
 }
-
+.no-record{
+  text-align: center;
+  margin: 28vh auto;
+}
 </style>

src/components/exhibition/index.vue

@@ -1,150 +0,0 @@
-<template>
-  <div class="palte" :class="{daolanactive:isShow}">
-    <div class="p-title">
-      <img :src="require('@/assets/images/icon/location.png')">
-      <span>{{current.name}}</span>
-    </div>
-    <div class="cad-con"></div>
-    <ul class="exhi-list">
-      <li @click="handleItem(item)" v-for="(item,i) in list" :key="i">
-        {{item.name}}
-      </li>
-    </ul>
-    <div class="daolan" @click="isShow = !isShow ">
-      <img :src="require('@/assets/images/icon/daolan.png')">
-      <span>{{isShow?'收起':'展开'}}导览</span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data(){
-    return{
-      isShow:true,
-      list:[
-        {
-          id:1,
-          name:'第一展区  序厅',
-          pano:"a07c10e319da4914b24158a4baabe748"
-        },
-        {
-          id:2,
-          name:'第二展区  历史沿革厅',
-          pano:"22fa6c2e5ed14c14b7f287a0a70b33ae"
-        },
-        {
-          id:3,
-          name:'第三展区  亲切关怀厅',
-          pano:'f12d8cf609bb483a80a715a607a1082e'
-        },
-        {
-          id:4,
-          name:'第四展区  光辉历程厅',
-          pano:"8857354a3b0e4d748f8b7633be25188f"
-        },
-        {
-          id:5,
-          name:'第五展区  将星闪耀厅',
-          pano:"b023f9d4040d4afca849e504f190bef2"
-        },
-        {
-          id:6,
-          name:'第六展区  丰碑永铸厅',
-          pano:"ec42a909a05744da85fd0b5d0da6bb19"
-        }
-      ],
-      current:{
-        id:1,
-        name:'第一展区  序厅',
-        pano:"a07c10e319da4914b24158a4baabe748"
-      }
-    }
-  },
-  methods:{
-    handleItem(item){
-      this.current = item
-      item.pano && player.flyToPano({pano:player.model.panos.index[item.pano]})
-    }
-  },
-  watch:{
-    isShow(newVal){
-      let css =newVal? '10px':'-310px'
-      $('.cad').css({right:css})
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.palte{
-  border: 2px solid #FFB521;
-  width: 300px;
-  background: rgba(0, 0, 0, 0.6);
-  transform: translateX(300px);
-  transition: all 0.3s ease;
-  .daolan{
-    cursor: pointer;
-    >img{
-      width: 16px;
-      transform: rotate(180deg);
-      margin-bottom: 4px;
-    }
-    position: absolute;
-    right: 300px;
-    background: rgba(0, 0, 0, 0.6);
-    border-radius: 5px 0px 0px 5px;
-    top: 60%;
-    padding: 10px;
-  }
-  .p-title{
-    background: @theme;
-    position: relative;
-    border-bottom: 2px solid #FFB521;
-    height: 60px;
-    >img{
-      position: absolute;
-      z-index: 999;
-      top: -16px;
-      left: 10px;
-      width: 60px;
-    }
-    >span{
-      padding-left: 80px;
-      line-height: 60px;
-      height: 60px;
-      font-weight: bold;
-      font-size: 16px;
-      letter-spacing: 1px;
-    }
-  }
-  .cad-con{
-    width: 100%;
-    height: 200px;
-  }
-  .exhi-list{
-    border-top: 2px solid #FFB521;
-    width: 100%;
-    >li{
-      height: 40px;
-      line-height: 40px;
-      padding: 0 30px;
-      cursor: pointer;
-      &:hover{
-        background: @theme;
-
-      }
-    }
-  }
-}
-.daolanactive{
-  transform: translateX(0);
-  .daolan{
-    >img{
-      width: 16px;
-      transform: rotate(0);
-      margin-bottom: 4px;
-    }
-  }
-}
-</style>

src/components/mb_exhibition/index.vue

@@ -96,7 +96,7 @@ export default {
   transform: translate(-50%,-50%);
   z-index: 99;
   .p-title{
-    background: @theme;
+    background: #BC1915;
     position: relative;
     border-bottom: 2px solid #FFB521;
     height: 60px;
@@ -135,7 +135,7 @@ export default {
       padding: 0 30px;
       cursor: pointer;
       &:hover{
-        background: @theme;
+        background: #BC1915;
       }
     }
   }

src/components/pagination/index.vue

@@ -132,7 +132,7 @@ export default {
     margin: 0 10px;
     padding: 0 6px;
     &.active {
-      background: @theme;
+      background: #BC1915;
     }
   }
   .pagejiantou{

src/components/popupLayout/Alert.vue

@@ -50,8 +50,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import "../../assets/style/globalVars.less";
-
 @liH: 50px;
 
 textarea::placeholder {
@@ -68,7 +66,7 @@ textarea::placeholder {
     text-align: center;
     margin: 0 auto;
     p {
-      color: @theme;
+      color: #BC1915;
       font-size: 20px;
       font-weight: bold;
     }

src/components/popupLayout/Message.vue

@@ -97,8 +97,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import "../../assets/style/globalVars.less";
-
 @liH: 50px;
 
 textarea::placeholder {
@@ -114,7 +112,7 @@ textarea::placeholder {
     text-align: center;
     margin: 0 auto;
     p {
-      color: @theme;
+      color: #BC1915;
       font-size: 30px;
       font-weight: bold;
     }

src/components/welcome/index.vue

@@ -1,50 +0,0 @@
-<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>
-</template>
-
-<script>
-export default {
-  data() {
-    return {};
-  },
-  methods: {},
-  mounted() {},
-};
-</script>
-
-<style lang="less">
-.welcome {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 9999;
-  font-size: 0;
-  transition: all ease 0.3s;
-  background-color: #146fb1;
-
-  .btn {
-    position: absolute;
-    bottom: 15%;
-    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;
-  }
-}
-</style>

src/pages/Home.vue

@@ -11,6 +11,8 @@
     <!-- 场景canvs主容器 -->
     <div id="player"></div>
 
+    <MiniMapDecorator class="mini-map-decorator"></MiniMapDecorator>
+
     <!-- 底部菜单 -->
     <div id="gui-parent" :class="{ guiParent: pageFlag }">
       <!-- 进度条加载 -->
@@ -60,9 +62,9 @@
       <web-vr />
 
       <!-- loading -->
-      <div id="gui-spinner">
+      <!-- <div id="gui-spinner">
         <div class="gui-spinner-icon"></div>
-      </div>
+      </div> -->
 
       <!-- guimsg -->
       <guimsg />
@@ -74,11 +76,6 @@
 
       <v-other />
 
-      <welcome @close="hideWelcome" v-if="showWelcome" />
-
-      <div class="loading" v-if="0">
-        <span>加载中...</span>
-      </div>
     </div>
   </div>
 </template>
@@ -95,7 +92,7 @@ import guimsg from "@/views/gui/guimsg";
 import vError from "@/views/gui/error";
 import vrCon from "@/views/gui/vrcon";
 import vOther from "@/views/gui/other";
-import welcome from "@/components/welcome";
+import MiniMapDecorator from "@/components/MiniMapDecorator.vue";
 
 export default {
   name: "Home",
@@ -111,12 +108,11 @@ export default {
     vError,
     vrCon,
     vOther,
-    welcome,
+    MiniMapDecorator,
   },
 
   data() {
     return {
-      showWelcome: true,
       hotspots: "",
       loading: true,
       // 控制页面宽度（通过菜单的展开和隐藏）
@@ -135,11 +131,6 @@ export default {
     hndeMenu(val) {
       this.pageFlag = val;
     },
-    // 子组件菜单传递过来隐藏和展开事件 👆
-    hideWelcome() {
-      this.showWelcome = false;
-      window.manage.switchBgmState(true);
-    },
     getHotSpotList() {
       $.ajax({
         url:
@@ -199,12 +190,21 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.mini-map-decorator {
+  position: fixed;
+  top: 28px;
+  right: 20px;
+  width: 237px !important;
+  height: 149px !important;
+  backdrop-filter: blur(10px);
+  z-index: 998;
+}
+
 .parent-body {
   position: relative;
   width: 100%;
   height: 100%;
   > #gui-parent {
-    width: calc(100% - 200px);
     > #gui {
       > h1 {
         position: absolute;
@@ -219,24 +219,6 @@ export default {
         padding: 9px 29px;
       }
     }
-    // .loading {
-    //   position: fixed;
-    //   left: 0;
-    //   top: 0;
-    //   width: 100%;
-    //   height: 100%;
-    //   z-index: 10000;
-    //   background: #000;
-    //   > span {
-    //     position: absolute;
-    //     top: 50%;
-    //     left: 50%;
-    //     transform: translate(-50%, -50%);
-    //     color: #fff;
-    //     font-size: 16px;
-    //     display: inline-block;
-    //   }
-    // }
   }
   > .guiParent {
     width: 100% !important;
@@ -245,6 +227,5 @@ export default {
 
 /deep/#drawer {
   transition: all 0.3s;
-  width: calc(100% - 200px);
 }
 </style>

src/views/gui/guide.vue

@@ -1,15 +1,24 @@
 <template>
   <div id="drawer-container">
+    
     <div id="drawer" class="fullWidth">
       <div class="frame-container darkGlass">
+
+        <!-- 场景列表 -->
         <div id="scrollFrame" class="frame">
           <ul id="thumb-container" class="slidee"></ul>
         </div>
+        
+        <!-- 滚动条 -->
         <div class="scrollbar" id="scroller">
+          <!-- thumb -->
           <div class="handle"></div>
         </div>
+        
       </div>
     </div>
+    
+    <!-- 自动导览时显示导览进度 -->
     <div id="playHead">
       <div id="status">
         <span class="curIdx">1</span>
@@ -17,6 +26,7 @@
       </div>
       <div id="progressBar" :class="{ full: pageFlag }"></div>
     </div>
+    
   </div>
 </template>
 <script>
@@ -30,22 +40,69 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-#status {
-  background-color: #A1653B;
-  color: #FFF6D2;
+#drawer-container {
+  #drawer {
+    font-size: 16px;
+    .frame-container {
+      background-color: rgba(133, 119, 69, 0.5);
+      backdrop-filter: blur(10px);
+      #scrollFrame.frame {
+        background-color: initial;
+        ul#thumb-container {
+          padding: 10px 20px;
+          li.thumbImg {
+            // 在这里写也没用
+          }
+        }
+      }
+      #scroller {
+        .handle {
+
+        }
+      }
+    }
+  }
 }
-#progressBar {
-  transition: all 0.3s;
-  width: calc(100% - 200px);
-  height: 100%;
-  display: flex;
-  align-items: center;
-  background-color: #A1653B;
+</style>
+
+<style lang="less">
+// 场景封面图
+// 平时
+#thumb-container .thumbImg img {
+  box-sizing: border-box;
+  border: none;
+  width: 100%;
+  object-fit: cover;
+}
+// hover时
+.frame .slidee li.thumbImg.hasHover>img:hover {
 }
-#playHead {
-  background-color: transparent;
+// 选中后
+.frame .slidee li.thumbImg.active>img {
+  border: 3px solid #A10E0C !important;
+}
+
+// 场景名称
+// 平时
+.frame .slidee li .overlay {
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  bottom: initial;
+  height: 100%;
+  line-height: 97px;
+  transform: initial;
+
+  color: #fff;
+  pointer-events: none;
+  background: rgba(0, 0, 0, 0.5);
 }
-.full {
-  width: 100% !important;
+// 选中后
+.frame .slidee li.thumbImg.active>.overlay {
+  top: initial;
+  bottom: 0;
+  height: 36px;
+  line-height: 36px;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
 }
 </style>

vue.config.js

@@ -9,7 +9,7 @@ module.exports = {
   css: {
     loaderOptions: {
       less: {
-        globalVars: getLessVariables(path.resolve(__dirname, './src/assets/style/globalVars.less'))
+        // globalVars: getLessVariables(path.resolve(__dirname, './src/assets/style/globalVars.less'))
       }
     }
   }