up

web/public/static/css/main.css

@@ -3397,7 +3397,7 @@ a.hasHover:hover, a:active {
 .pinBottom.left {
     z-index: 50;
     left: 0px;
-    bottom: 10px;
+    bottom: 20px;
 }
 
 
@@ -3409,7 +3409,6 @@ a.hasHover:hover, a:active {
 .viewContainer {
     float: left;
     position: relative;
-    background: rgba(0, 0, 0, 0.6);
     border-radius: 25px;
     margin:0 20px;
 }
@@ -7057,5 +7056,6 @@ a.hasHover.tag-link:hover {
 
 
 #model-title{
-    display: none!important;
+    color: #fff;
+    /* display: none!important; */
 }

web/public/static/js/main_2020_show.js

@@ -6719,7 +6719,7 @@ window.Modernizr = function(n, e, t) {
                     } 
                     h.attr("data-index", s)
                     
-                    je.highlight.visible && h.find("img").attr("src", 'https://super.4dage.com/'+thumbUrl)
+                    je.highlight.visible && h.find("img").attr("src", thumbUrl)
                     
                     
                     if (c.name) {

web/public/static/js/manage.js

@@ -3,7 +3,8 @@ var g_ProjectName=window.location.pathname.substring(window.location.pathname.in
 var g_Prefix="https://super.4dage.com/";
 
 // var g_Prefix=window.location.origin+'/';
-window.isLocal = true
+// 打开下面就是切换本地模式
+// window.isLocal = true
 
 var g_index=null;
 var g_modeldata=null;

web/src/assets/style/reset.css

@@ -0,0 +1,269 @@
+/* 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;
+}
+::-webkit-scrollbar {
+  width: 2px;
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  height: 50px;
+  background-color: #ddd;
+  -webkit-border-radius: 4px;
+  outline: 2px solid #fff;
+  outline-offset: -2px;
+}
+::-webkit-scrollbar-thumb:hover {
+  height: 50px;
+  background-color: #9f9f9f;
+  -webkit-border-radius: 4px;
+}
+.el-pagination button:disabled {
+  background-color: transparent;
+}
+.el-pagination .btn-next,
+.el-pagination .btn-prev {
+  background-color: transparent;
+}
+.el-dialog,
+.el-pager li {
+  background-color: transparent;
+  min-width: 30px;
+  border-radius: 15px;
+  margin-right: 5px;
+}
+.el-pagination {
+  color: #fff;
+}
+.el-pager li.active {
+  width: 30px;
+  height: 30px;
+  color: #fff;
+  background-color: #165491;
+}
+.el-pager li:hover {
+  background-color: #165491;
+}
+.el-pagination .btn-next,
+.el-pagination .btn-prev {
+  color: #fff;
+}
+.el-pagination__jump {
+  color: #fff;
+}
+.el-pagination__jump .el-input__inner {
+  width: 30px;
+  height: 30px;
+}
+.el-textarea__inner {
+  background-color: rgba(237, 211, 176, 0.3);
+  color: #f0af7c;
+  border: none;
+}
+.el-textarea__inner::-webkit-input-placeholder {
+  color: #EDD3B0;
+}
+.el-radio {
+  color: #f0af7c;
+}
+.el-radio__input.is-checked + .el-radio__label {
+  color: #f0af7c;
+}
+.el-radio__inner {
+  width: 24px;
+  height: 24px;
+}
+.el-radio__input.is-checked .el-radio__inner {
+  border-color: red;
+  background: #f0af7c;
+}
+.el-radio__inner:hover {
+  border-color: red;
+}
+.el-radio__input.is-checked .el-radio__inner::after {
+  transform: translate(-50%, -50%) scale(0);
+}
+.el-input__inner {
+  height: 30px;
+  border-radius: 15px;
+  color: #165491;
+  border: none;
+}
+input::-webkit-input-placeholder {
+  color: #165491 !important;
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background-color: rgba(237, 211, 176, 0.3);
+}
+.el-select-dropdown__item.selected {
+  color: #f0af7c;
+}
+.el-pagination {
+  display: flex;
+  justify-content: center;
+}
+.el-button {
+  background: transparent;
+  border: 1px solid #DCDFE6;
+  color: #fff;
+}
+.el-button--primary {
+  background-color: #165491;
+  border-color: #165491;
+}
+.el-button--primary:focus,
+.el-button--primary:hover {
+  background: #244d77;
+  border-color: #244d77;
+}

web/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,74 +192,126 @@ 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;
+  min-width: 30px;
+  border-radius: 15px;
+  margin-right: 5px;
 }
-.el-pagination{
-  color: #f0af7c;
+
+.el-pagination {
+  color: #fff;
 }
+
 .el-pager li.active {
-  color:black;
+  width: 30px;
+  height: 30px;
+  color: #fff;
+  background-color: #165491;
 }
-.el-pager li:hover{
-  color:black;
+
+.el-pager li:hover {
+  background-color: #165491;
 }
-.el-pagination .btn-next, .el-pagination .btn-prev{
-  color: #f0af7c;
+
+.el-pagination .btn-next,
+.el-pagination .btn-prev {
+  color: #fff;
 }
-.el-pagination button:hover{
-  color: black;
+.el-pagination__jump{
+  color: #fff;
+}
+.el-pagination__jump .el-input__inner{
+  width: 30px;
+  height: 30px;
 }
-.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);
 }
-.el-input__inner{
+
+.el-input__inner {
   height: 30px;
-  background-color: rgba(237, 211, 176, .3);
-  color: #f0af7c;
-  border:none;
+  border-radius: 15px;
+  color: #165491;
+  border: none;
 }
+
 input::-webkit-input-placeholder {
-  color: #EDD3B0 !important;
+  color: #165491 !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;
   justify-content: center;
+}
+.el-button{
+  background: transparent;
+    border: 1px solid #DCDFE6;
+    color: #fff;
+}
+.el-button--primary {
+  background-color: #165491;
+  border-color: #165491;
+}
+
+.el-button--primary:focus,
+.el-button--primary:hover {
+  background: #244d77;
+  border-color: #244d77;
 }

web/src/components/exhibition/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="palte" :class="{daolanactive:isShow}">
+  <div class="parimaryExhibtion" :class="{daolanactive:isShow}">
     <div class="p-title">
-      <img :src="require('@/assets/images/icon/location.png')">
-      <span>{{current.name}}</span>
+      <span>当前位置：{{current.name}}</span>
+    </div>
+    <div class="exh-con">
+      <img :src="require('@/assets/images/map.png')">
     </div>
-    <div class="cad-con"></div>
     <ul class="exhi-list">
       <li @click="handleItem(item)" v-for="(item,i) in list" :key="i">
         {{item.name}}
@@ -12,7 +13,7 @@
     </ul>
     <div class="daolan" @click="isShow = !isShow ">
       <img :src="require('@/assets/images/icon/daolan.png')">
-      <span>{{isShow?'收起':'展开'}}导览</span>
+      <span>{{isShow?'收起':'展开'}}导航</span>
     </div>
   </div>
 </template>
@@ -21,50 +22,110 @@
 export default {
   data(){
     return{
-      isShow:true,
+      isShow:false,
       list:[
         {
           id:1,
-          name:'第一展区  序厅',
-          pano:"a07c10e319da4914b24158a4baabe748"
+          name:'英雄广场',
+          pano:"56fa4a8ee09542e69e0e5e763cf3a4eb",
+          quaternion:{
+            w: 0.732101964384876,
+            x: -0.01689940520219317,
+            y: 0.6808040582684568,
+            z: 0.015715275089404925
+          }
         },
         {
           id:2,
-          name:'第二展区  历史沿革厅',
-          pano:"22fa6c2e5ed14c14b7f287a0a70b33ae"
+          name:'第一展区 序厅',
+          pano:"bd279aa2ee3445658d5949ccdc3d0dec",
+          quaternion:{
+            w: -0.6115252203661626,
+            x: -0.00202956708438099,
+            y: 0.7912137782061446,
+            z: -0.003695157689334756
+          }
         },
         {
           id:3,
-          name:'第三展区  亲切关怀厅',
-          pano:'f12d8cf609bb483a80a715a607a1082e'
+          name:'第二展区 发展历程厅',
+          pano:'b2431912b20d4df7b81f47821fca6d1a',
+          quaternion:{
+            w: 0.11635247170122785,
+            x: 0.00932045997324726,
+            y: 0.9899930039071927,
+            z: -0.07930377265884167
+          }
         },
         {
           id:4,
-          name:'第四展区  光辉历程厅',
-          pano:"8857354a3b0e4d748f8b7633be25188f"
+          name:'第三展区 建设成就厅',
+          pano:"353a5de969da46779551bd811a9f9249",
+          quaternion:{
+            w: 0.7058518315845261,
+            x: 0.017866627768183364,
+            y: 0.7079073967480722,
+            z: -0.017918657894228647
+          }
         },
         {
           id:5,
-          name:'第五展区  将星闪耀厅',
-          pano:"b023f9d4040d4afca849e504f190bef2"
+          name:'第四展区 经典战例厅',
+          pano:"2eb9d9d718c8416391993b7a9099ca25",
+          quaternion:{
+            w: 0.9947693640853533,
+            x: 0.09500869955101461,
+            y: 0.03734343676475115,
+            z: -0.003566606968767554
+          }
         },
         {
           id:6,
-          name:'第六展区  丰碑永铸厅',
-          pano:"ec42a909a05744da85fd0b5d0da6bb19"
+          name:'第五展区 英模荣誉厅',
+          pano:"2eb9d9d718c8416391993b7a9099ca25",
+          quaternion:{
+            w: 0.9947693640853533,
+            x: 0.09500869955101461,
+            y: 0.03734343676475115,
+            z: -0.003566606968767554
+          }
+        },
+        {
+          id:7,
+          name:'第六展区 辅展厅',
+          pano:"2eb9d9d718c8416391993b7a9099ca25",
+          quaternion:{
+            w: 0.9947693640853533,
+            x: 0.09500869955101461,
+            y: 0.03734343676475115,
+            z: -0.003566606968767554
+          }
         }
+        
       ],
-      current:{
-        id:1,
-        name:'第一展区  序厅',
-        pano:"a07c10e319da4914b24158a4baabe748"
-      }
+      current:  {
+          id:1,
+          name:'序厅',
+          pano:"56fa4a8ee09542e69e0e5e763cf3a4eb",
+          quaternion:{
+            w: 0.732101964384876,
+            x: -0.01689940520219317,
+            y: 0.6808040582684568,
+            z: 0.015715275089404925
+          }
+        },
     }
   },
   methods:{
     handleItem(item){
       this.current = item
-      item.pano && player.flyToPano({pano:player.model.panos.index[item.pano]})
+      let { x, y, z, w } = item.quaternion
+      console.log(x, y, z, w);
+      // item.pano && player.blackToPano({
+      //     pano:player.model.panos.index[item.pano],
+      //     quaternion: new THREE.Quaternion(x, y, z, w)
+      //   }
+      // )
     }
   },
   watch:{
@@ -77,66 +138,71 @@ export default {
 </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{
+
+  .parimaryExhibtion {
+    border: 2px solid #f18c06;
+    width: 300px;
+    background: rgba(0, 0, 0, 0.4);
+    transform: translateX(300px);
+    transition: all 0.3s ease;
+    color: #fff;
+    .daolan {
+      cursor: pointer;
       position: absolute;
-      z-index: 999;
-      top: -16px;
-      left: 10px;
-      width: 60px;
+      right: 298px;
+      background: rgba(0, 0, 0, 0.4);
+      border-radius: 5px 0px 0px 5px;
+      top: 24%;
+      padding: 10px;
+      > img {
+        width: 16px;
+        transform: rotate(180deg);
+        margin-bottom: 4px;
+      }
     }
-    >span{
-      padding-left: 80px;
-      line-height: 60px;
+    .p-title {
+      text-align: center;
+      background: #b9412e;
+      position: relative;
+      border-bottom: 2px solid #f18c06;
       height: 60px;
-      font-weight: bold;
-      font-size: 16px;
-      letter-spacing: 1px;
+      > span {
+        padding-left: 0;
+        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;
-
+    .exh-con {
+      width: 100%;
+      height: 200px;
+    }
+    .exhi-list {
+      border-top: 2px solid #f18c06;
+      width: 100%;
+      > li {
+        // text-align: center;
+        height: 40px;
+        line-height: 40px;
+        padding: 0 30px;
+        cursor: pointer;
+        &:hover {
+          background: #b9412e;
+        }
       }
     }
   }
+.exh-con{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  >img{
+    width: 80%;
+  }
 }
+
 .daolanactive{
   transform: translateX(0);
   .daolan{

web/src/pages/Home.vue

@@ -73,10 +73,13 @@
         <span>加载中...</span>
       </div>
     </div>
+    <!-- 小地图 -->
+    <exhibition class="exhibition" />
   </div>
 </template>
 
 <script>
+import exhibition from "@/components/exhibition";
 import popup from "@/views/popup";
 import guiLoading from "@/views/gui/loading";
 import hotspotList from "@/views/gui/hotspotlist";
@@ -105,6 +108,7 @@ export default {
     vrCon,
     vOther,
     welcome,
+    exhibition,
   },
 
   data() {
@@ -163,6 +167,12 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.exhibition {
+  position: absolute;
+  top: 150px;
+  right: 0;
+  z-index: 99;
+}
 .parent-body {
   width: 100%;
   height: 100%;
@@ -186,5 +196,4 @@ export default {
     display: inline-block;
   }
 }
-
 </style>

web/src/views/gui/component/browse.vue

@@ -0,0 +1,75 @@
+<template>
+<div class='browse'>
+  <div>
+    <img src="@/assets/img/logo.png" alt="">
+    <span class="line"></span>
+    <img src="@/assets/img/eye.png" alt="">
+    <span class="txt">{{myMoods}}访问量</span>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+name:'browse',
+components: {},
+data() {
+//这里存放数据
+return {
+  myMoods:0
+};
+},
+//监听属性 类似于data概念
+computed: {},
+//监控data中的数据变化
+watch: {},
+//方法集合
+methods: {
+
+},
+//生命周期 - 创建完成（可以访问当前this实例）
+created() {
+
+},
+//生命周期 - 挂载完成（可以访问DOM元素）
+mounted() {
+      fetch("http://47.112.166.173:8109/api/count/saveVisit/" + window.number)
+      .then((response) => response.json())
+      .then((data) => {
+        this.myMoods = data.data.visitSum;
+        // console.log(data)
+      });
+},
+beforeCreate() {}, //生命周期 - 创建之前
+beforeMount() {}, //生命周期 - 挂载之前
+beforeUpdate() {}, //生命周期 - 更新之前
+updated() {}, //生命周期 - 更新之后
+beforeDestroy() {}, //生命周期 - 销毁之前
+destroyed() {}, //生命周期 - 销毁完成
+activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.browse{
+  position: fixed;
+  top: 30px;
+  left: 40px;
+  z-index: 999;
+  &>div{
+    display: flex;
+    align-items: center;
+  }
+  .line{
+    margin: 0 15px;
+    display: inline-block;
+    width: 2px;
+    height: 30px;
+    background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255));
+  }
+  .txt{
+    color: #fff;
+    margin-left: 10px;
+  }
+}
+
+</style>

web/src/views/gui/component/issue.vue

@@ -0,0 +1,149 @@
+<!--  -->
+<template>
+  <div class="issue">
+    <div class="main">
+      <div class="top el-icon-close" @click="$emit('close')"></div>
+      <!-- 开始答题 -->
+      <div class="begin" v-show="flag === 'one'">
+        <div class="begin_left">
+          <div class="renwen"></div>
+        </div>
+        <div class="begin_right">
+          <p>欢迎来到</p>
+          <p>大理洱海科普教育中心趣味问答小游戏，</p>
+          <p>您将随机抽取十道题进行作答，</p>
+          <p>答对六题及以上为闯关成功！</p>
+          <div class="btnn" @click="flag = 'tow'">开始答题</div>
+        </div>
+      </div>
+      <!-- 答题页面 -->
+      <div class="topic" v-show="flag === 'tow'"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+//引入题目
+import { questions } from "@/assets/js/data.js";
+export default {
+  name: "issue",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      flag: "one",
+      // 题目组
+      topic: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let arr = [];
+    for (let i = 0; i < 200; i++) {
+      //一个从0到100的数组
+      arr.push(i);
+    }
+    arr.sort(function () {
+      //随机打乱这个数组
+      return Math.random() - 0.5;
+    });
+    arr.length = 10; //改写长度
+    arr.forEach((v) => {
+      this.topic.push(questions[v]);
+    });
+    console.log(999, this.topic); //控制台会输出10个不同的数
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.issue {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100vw;
+  height: 100vh;
+  .main {
+    padding: 20px;
+    border-radius: 3px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    width: 1100px;
+    height: 700px;
+    background: url("../../../assets/img/bg.png") no-repeat left bottom #b7cdd9;
+    .top {
+      color: #165491;
+      position: absolute;
+      right: 20px;
+      top: 20px;
+      cursor: pointer;
+      font-size: 30px;
+    }
+    .begin {
+      margin: 100px auto 0;
+      display: flex;
+      width: 750px;
+      height: 450px;
+      .begin_left {
+        position: relative;
+        width: 286px;
+        height: 470px;
+        background: url("../../../assets/img/issue.png");
+        background-size: 100% 100%;
+        .renwen {
+          position: absolute;
+          left: 10px;
+          bottom: 0;
+          width: 45px;
+          height: 88px;
+          background: url("../../../assets/img/renwen.png");
+          background-size: 100% 100%;
+        }
+      }
+      .begin_right {
+        padding-top: 80px;
+        flex: 1;
+        color: #fff;
+        & > p {
+          text-align: center;
+          margin-bottom: 20px;
+          font-size: 24px;
+          &:nth-of-type(1) {
+            width: 94%;
+          }
+        }
+        .btnn {
+          cursor: pointer;
+          margin: 100px auto 0;
+          width: 257px;
+          height: 75px;
+          background: url("../../../assets/img/btn.png");
+          background-size: 100% 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 24px;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/gui/component/quality.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="quality">
+    <div class="main">
+      <div class="top">
+        <h2>精品典藏</h2>
+        <i class="el-icon-close" @click="$emit('close')"></i>
+      </div>
+      <div class="conten">
+        <div class="search">
+          <el-input
+            v-model="input"
+            placeholder="请输入藏品名称..."
+            suffix-icon="el-icon-search"
+          ></el-input>
+          <el-button type="primary" size="small" style="margin-left: 15px"
+            >搜索</el-button
+          >
+          <el-button size="small">重置</el-button>
+        </div>
+        <!-- 内容 -->
+        <div class="rowAll">
+          <div class="row" v-for="i in 8" :key="i">
+            <img src="../../../assets/images/myModel.jpg" alt="" />
+            <p>藏品名称</p>
+          </div>
+        </div>
+        <!-- 分页 -->
+        <div class="pagination">
+          <el-pagination
+            layout="prev,pager,next,jumper"
+            :page-size="8"
+            :current-page="formData.pageNum"
+            @current-change="currentChange"
+            @size-change="sizeChange"
+            :total="50"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "quality",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      input: "",
+      formData:{
+        pageNum:1,
+        pageSize:8
+      }
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+        // 分页器方法
+    currentChange(val) {
+      // console.log('当前页改变了', val)
+      this.formData.pageNum = val;
+    },
+    sizeChange(val) {
+      // console.log('条数改变了', val)
+      this.formData.pageNum = 1;
+      this.formData.pageSize = val;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.quality {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100vw;
+  height: 100vh;
+  .main {
+    padding: 20px;
+    border-radius: 3px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    width: 1100px;
+    height: 700px;
+    background: url("../../../assets/img/bg.png") no-repeat left bottom #b7cdd9;
+  }
+  .top {
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #165491;
+    font-weight: 700;
+    font-size: 22px;
+    & > i {
+      cursor: pointer;
+      font-size: 30px;
+    }
+  }
+  .conten {
+    padding: 30px 20px;
+    border-radius: 3px;
+    width: 100%;
+    height: 610px;
+    background-color: rgba(22, 84, 145, 0.5);
+    .search {
+      display: flex;
+      width: 500px;
+      margin: 0 auto;
+      /deep/.el-input__icon {
+        line-height: 30px;
+        color: #165491;
+        font-size: 18px;
+      }
+    }
+    .rowAll {
+      margin-top: 40px;
+      display: flex;
+      flex-wrap: wrap;
+      .row {
+        margin-right: 10px;
+        margin-bottom: 20px;
+        overflow: hidden;
+        border-radius: 5px;
+        background-color: #fff;
+        width: 247px;
+        height: 190px;
+        & > img {
+          width: 247px;
+          height: 150px;
+          object-fit: cover;
+        }
+        & > p {
+          width: 95%;
+          background: url("../../../assets/img/come.png") no-repeat right center;
+          padding: 0 30px 0 10px;
+          height: 40px;
+          line-height: 40px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: #999999;
+          font-size: 16px;
+        }
+        &:nth-of-type(4n) {
+          margin-right: 0;
+        }
+        &:hover {
+          background-color: #165491;
+          & > p {
+            background: url("../../../assets/img/comeAc.png") no-repeat right
+              center;
+            color: #fff;
+          }
+        }
+      }
+    }
+    .pagination {
+      margin-top: 20px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+</style>

web/src/views/gui/component/share.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="share">
+    <div class="main">
+      <div class="top">
+        <h2>分享展览</h2>
+        <i class="el-icon-close" @click="$emit('close')"></i>
+      </div>
+      <div class="myInput">
+        https://lanhuapp.com/web/#/item/project/product?tid=de3e5e3
+      </div>
+      <div class="btn">
+        <el-button type="primary" style="width:165px;height:40px" @click="copy">复制链接</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "share",
+  components: {},
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    copy(){
+      // 存储传递过来的数据
+      let OrderNumber = "9999999999";
+      // 创建一个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的弹窗 不需要的自行删除就好
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.share {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100vw;
+  height: 100vh;
+  .main {
+    padding: 20px;
+    border-radius: 3px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    width: 500px;
+    height: 220px;
+    background: url("../../../assets/img/bg.png") no-repeat left bottom #b7cdd9;
+    .top {
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #165491;
+      font-weight: 700;
+      font-size: 22px;
+      & > i {
+        cursor: pointer;
+        font-size: 30px;
+      }
+    }
+    .myInput {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 0 10px;
+      width: 100%;
+      height: 60px;
+      line-height: 60px;
+      background-color: #fff;
+      border-radius: 5px;
+    }
+    .btn{
+      margin-top: 20px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      height: 40px;
+    }
+  }
+}
+</style>

web/src/views/gui/menu.vue

@@ -99,24 +99,7 @@
                 :src="require('@/assets/images/icon/inside_active.png')"
               />
             </div>
-            <div
-              title="迷你漫游"
-              data-original-title="迷你模型"
-              id="gui-modes-dollhouse"
-              rel="tooltip"
-            >
-              <img
-                title="迷你漫游"
-                class="icon icon-inside"
-                :src="require('@/assets/images/icon/dollhouse.png')"
-              />
-              <img
-                
-                class="icon icon-inside active"
-                :src="require('@/assets/images/icon/dollhouse_active.png')"
-                title="迷你漫游"
-              />
-            </div>
+
             <div
               data-original-title="俯视图"
               id="gui-modes-floorplan"
@@ -134,25 +117,69 @@
                 :src="require('@/assets/images/icon/floor_active.png')"
               />
             </div>
-            <!-- 音乐 -->
-            <!-- <div id="volume" @click="switchBGM" class="ui-icon bgandshare wide">
-          <div>
-            <img :src="require('@/assets/images/icon/musicon.png')" />
-          </div>
-          </div> -->
+
             <div
-              style="display: none"
-              @click="switchBGM"
-              id="myMoMu"
-              data-original-title="音乐"
+              title="迷你漫游"
+              data-original-title="迷你模型"
+              id="gui-modes-dollhouse"
+              rel="tooltip"
             >
               <img
+                title="迷你漫游"
+                class="icon icon-inside"
+                :src="require('@/assets/images/icon/dollhouse.png')"
+              />
+              <img
+                class="icon icon-inside active"
+                :src="require('@/assets/images/icon/dollhouse_active.png')"
+                title="迷你漫游"
+              />
+            </div>
+
+            <div @click="switchBGM" id="myMoMu" data-original-title="音乐">
+              <img
                 class="icon icon-inside"
-                :src="require('@/assets/images/icon/musicoff.png')"
-                title="关闭音乐"
+                :src="
+                  require(`@/assets/images/icon/${
+                    bgmPlay ? 'musicon' : 'musicoff'
+                  }.png`)
+                "
+                :title="bgmPlay ? '打开音乐' : '关闭音乐'"
               />
             </div>
 
+            <ul class="btn-list">
+              <!-- 精品典藏 -->
+              <li class="quality" title="精品典藏" @click="isQuality = true">
+                <img
+                  :src="
+                    require(`@/assets/img/${
+                      isQuality ? 'quality_active' : 'quality'
+                    }.png`)
+                  "
+                />
+              </li>
+              <!-- 点赞 -->
+              <li title="点赞" class="like" @click="handleLike">
+                <img
+                  :src="
+                    require(`@/assets/img/${
+                      isShowGood ? 'like_active' : 'like'
+                    }.png`)
+                  "
+                />
+                <span class="like_txt">{{ likeNum }}</span>
+                <transition name="likeAddAnimate">
+                  <div class="good" v-show="isShowGood">
+                    <div class="pic">
+                      <img src="../../assets/img/like_active.png" alt="" />
+                    </div>
+                    <div class="num">+1</div>
+                  </div>
+                </transition>
+              </li>
+            </ul>
+
             <div
               data-original-title="VR"
               id="vr"
@@ -210,11 +237,6 @@
           <div class="container"></div>
         </div>
 
-        <div id="volume" @click="switchBGM" class="ui-icon bgandshare wide">
-          <div>
-            <img :src="require('@/assets/images/icon/musicon.png')" />
-          </div>
-        </div>
         <div id="vr" class="ui-icon wide hidden" style="display: none">
           <a>
             <i
@@ -234,25 +256,21 @@
           </a>
         </div>
 
-        <!-- 点赞和玫瑰 -->
+        <!-- 游戏分享和切换语言 -->
         <ul class="btn-list">
-          <li title="点赞" class="like" @click="handleLike">
+          <li title="游戏" @click="isIssue=true">
             <img
               :src="
-                require(`@/assets/img/${
-                  isShowGood ? 'like_active' : 'like'
-                }.png`)
+                require(`@/assets/img/${isGame ? 'game_active' : 'game'}.png`)
               "
             />
-            <span class="like_txt">{{ likeNum }}</span>
-            <transition name="likeAddAnimate">
-              <div class="good" v-show="isShowGood">
-                <div class="pic">
-                  <img src="../../assets/img/like_active.png" alt="" />
-                </div>
-                <div class="num">+1</div>
-              </div>
-            </transition>
+          </li>
+          <!-- 分享 -->
+          <li title="分享" @click="isShare = true">
+            <img src="@/assets/img/share.png" />
+          </li>
+          <li title="英文">
+            <img src="@/assets/img/cn.png" />
           </li>
         </ul>
 
@@ -264,7 +282,10 @@
           title="全屏"
         >
           <a>
-            <img :src="require('@/assets/images/icon/fullscreen.png')" title="全屏"/>
+            <img
+              :src="require('@/assets/images/icon/fullscreen.png')"
+              title="全屏"
+            />
           </a>
         </div>
         <div
@@ -288,19 +309,39 @@
         </div>
       </div>
     </div>
+    <!-- 精品典藏的盒子 -->
+    <Quality v-if="isQuality" @close="isQuality = false" />
+    <!-- 分享的盒子 -->
+    <Share v-if="isShare" @close="isShare = false"/>
+    <!-- 顶部的名字还有浏览人数 -->
+    <Browse />
+    <!-- 答题 -->
+    <Issue v-if="isIssue" @close="isIssue = false"/>
   </div>
 </template>
 
 <script>
+import Share from './component/share'
+import Quality from "./component/quality"
+import Browse from "./component/browse"
+import Issue from "./component/issue"
 export default {
-  components: {},
+  components: { Quality, Share,Browse,Issue },
   data() {
     return {
       isGuide: true,
       // 点赞
       isShowGood: false,
       likeNum: 0,
-      bgmPlay:true
+      bgmPlay: false,
+      // 控制精品典藏
+      isQuality: false,
+      // 控制游戏
+      isGame: false,
+      // 控制分享
+      isShare: false,
+      // 控制答题
+      isIssue:false
     };
   },
   computed: {},
@@ -309,10 +350,10 @@ export default {
     switchBGM() {
       if (this.bgmPlay) {
         window.manage.switchBgmState(true);
-        this.bgmPlay=false
-      } else  {
+        this.bgmPlay = false;
+      } else {
         window.manage.switchBgmState(false);
-        this.bgmPlay=true
+        this.bgmPlay = true;
       }
     },
 
@@ -348,6 +389,15 @@ export default {
   transform: translateY(-80px) scale(0.8) rotate(-20deg);
   opacity: 0;
 }
+#myMoMu {
+  cursor: pointer;
+  width: 60px;
+  display: flex;
+  justify-content: center;
+  & > img {
+    width: 48px;
+  }
+}
 .good {
   position: absolute;
   bottom: 5px;
@@ -367,24 +417,23 @@ export default {
   }
 }
 .btn-list {
+  font-size: 14px;
   color: #fff;
   display: flex;
   justify-content: space-between;
   align-items: center;
   > li {
-    margin-right: 15px;
     border-radius: 50%;
-    background: rgba(0, 0, 0, 0.5);
     position: relative;
-    width: 48px;
+    width: 60px;
     height: 48px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     > img {
-      width: 38px;
-      height: 38px;
+      width: 48px;
+      height: 48px;
     }
     .like_txt {
       position: absolute;
@@ -407,7 +456,7 @@ export default {
 }
 
 // 右侧菜单栏
-@wh: 22px;
+@wh: 48px;
 @margin: 0px;
 #play,
 #pause {
@@ -448,31 +497,27 @@ export default {
 }
 
 #gui-fullscreen img {
-  width: 22px;
+  width: 48px;
 }
 #volume {
   width: 48px;
-  padding: 10px;
-  background-color: rgba(0, 0, 0, 0.5) !important;
   border-radius: 50%;
 }
 #gui-fullscreen {
-  background-color: rgba(0, 0, 0, 0.5) !important;
   border-radius: 50%;
 }
 #gui-fullscreen-exit {
   width: 48px;
-  background-color: rgba(0, 0, 0, 0.5) !important;
   border-radius: 50%;
 }
 #gui-fullscreen-exit img {
-  width: 22px !important;
+  width: 48px !important;
 }
 .bgandshare {
   background: none !important;
   // margin-right: 20px!important;
   > div {
-    width: 22px !important;
+    width: 48px !important;
     margin-left: 3px;
     cursor: pointer;
     img {
@@ -488,7 +533,6 @@ export default {
     margin-left: 12px;
   }
   .viewContainer {
-    background-color: rgba(0, 0, 0, 0.5);
     padding: 15px 0 10px;
     border-radius: 50px;
   }