up

web/public/static/css/main.css

@@ -3405,7 +3405,7 @@ a.hasHover:hover, a:active {
     bottom: 0px;
     width: 100%;
     transition: all .5s;
-    z-index: 3;
+    z-index: 4;
     position: absolute;
 }
 
@@ -3473,7 +3473,7 @@ a.hasHover:hover, a:active {
 
 #gui-modes-map>div[rel] {
     float: left;
-    width: 50px;
+    width: 70px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -3869,7 +3869,7 @@ a.hasHover:hover, a:active {
 
 #play, #pause {
     position: relative;
-    width: 50px;
+    width: 70px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -7044,7 +7044,6 @@ a.hasHover.tag-link:hover {
         padding: 10px 20px 10px 0;
         display: flex !important;
         align-items: center;
-        background-color: rgba(0, 0, 0, .5);
         border-radius: 0 20px 20px 0;
     }
 }

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

@@ -0,0 +1,134 @@
+<template>
+  <div class="share" :class="{ full: smBtn }">
+    <!-- 毛玻璃 -->
+    <div class="meanPageMBL"></div>
+
+    <div class="main">
+      <h3>分享页面</h3>
+      <div class="code">
+        <img src="@/assets/img/code.png" alt="" />
+        <p>保存二维码，或点击复制链接</p>
+      </div>
+      <div class="btnn">复制分享链接</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 {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问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%;
+  // 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;
+    padding-top: 50px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    height: 550px;
+    background-image: linear-gradient(
+      rgba(204, 148, 109, 0.8),
+      rgba(119, 73, 38, 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>

web/src/views/gui/menu.vue

@@ -30,7 +30,7 @@
           >
             <a>
               <img
-                title="自动漫游"
+                title="自动导览"
                 :src="require('@/assets/images/icon/play.png')"
                 width="24"
                 height="24"
@@ -72,6 +72,7 @@
               title="场景导览"
             >
               <img
+                title="导览列表"
                 class="icon icon-inside"
                 :src="
                   require(`@/assets/images/icon/auto${
@@ -88,10 +89,12 @@
               rel="tooltip"
             >
               <img
+                title="自由漫游"
                 class="icon icon-inside"
                 :src="require('@/assets/images/icon/inside.png')"
               />
               <img
+                title="自由漫游"
                 class="icon icon-inside active"
                 :src="require('@/assets/images/icon/inside_active.png')"
               />
@@ -103,13 +106,14 @@
               rel="tooltip"
             >
               <img
+                title="三维视角"
                 class="icon icon-inside"
                 :src="require('@/assets/images/icon/dollhouse.png')"
               />
               <img
+                title="三维视角"
                 class="icon icon-inside active"
                 :src="require('@/assets/images/icon/dollhouse_active.png')"
-                title="navigation icon "
               />
             </div>
             <div
@@ -119,10 +123,12 @@
               title="顶部俯视"
             >
               <img
+                title="平面视角"
                 class="icon icon-inside"
                 :src="require('@/assets/images/icon/floor.png')"
               />
               <img
+                title="平面视角"
                 class="active icon icon-inside active"
                 :src="require('@/assets/images/icon/floor_active.png')"
               />
@@ -230,6 +236,7 @@
         <!-- 分享 -->
         <div class="share" @click="shareShow = true">
           <img
+            title="分享"
             :src="require(`@/assets/img/share${shareShow ? 'Ac' : ''}.png`)"
             alt=""
           />
@@ -253,7 +260,7 @@
           title="全屏"
         >
           <a>
-            <img :src="require('@/assets/img/full.png')" />
+            <img title="全屏" :src="require('@/assets/img/full.png')" />
           </a>
         </div>
         <div
@@ -266,6 +273,7 @@
         >
           <a>
             <img
+              title="关闭全屏"
               :src="require('@/assets/img/fullAc.png')"
               style="width: 50px"
             />
@@ -273,13 +281,16 @@
         </div>
       </div>
     </div>
+    <!-- 分享组件 -->
+    <Share v-if="shareShow" @close='shareShow=false' :smBtn='smBtn'/>
   </div>
 </template>
 
 <script>
-//引入题目
+//引入组件
+import Share from './compomemt/share.vue'
 export default {
-  components: {},
+  components: {Share},
   data() {
     return {
       isGuide: true,
@@ -345,7 +356,7 @@ export default {
   transition: all 0.3s;
   z-index: 999;
   height: 100%;
-  background-color: rgba(107, 65, 34, 0.8);
+  background-color: rgba(119,73,38,.8);
   text-align: center;
   .smBtn {
     text-align: center;
@@ -357,23 +368,30 @@ export default {
     left: -18px;
     width: 18px;
     height: 60px;
-    background-color: rgba(107, 65, 34, 0.8);
+    background-color: rgba(119,73,38,.8);
     border-radius: 5px 0 0 5px;
   }
   .logo {
     margin: 20px 0 30px;
     width: 180px;
   }
-  .rowBox{
+  .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%;
-      text-align: center;
       margin-bottom: 25px;
       & > img {
         max-width: 164px;
+        max-height: 164px;
         object-fit: cover;
         height: calc(100% - 30px);
       }
@@ -404,7 +422,7 @@ export default {
 }
 
 // 右侧菜单栏
-@wh: 22px;
+@wh: 44px;
 @margin: 0px;
 #play,
 #pause {