编辑器：调整布局；场景导航tooltip开发

src/components/TooltipInEditor.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="tooltip-wrapper" :style="{left: framePosLeft}">
-    <div class="arrow" :style="{left: arrowPosLeft}"></div>
+  <div class="tooltip-wrapper" :style="{left: frameCenterPos}">
+    <div class="arrow" :style="{left: arrowCenterPos}"></div>
     <div class="remark">{{text}}</div>
   </div>
 </template>
@@ -12,11 +12,11 @@ export default {
       type: String,
       default: '测试test测试test',
     },
-    framePosLeft: {
+    frameCenterPos: {
       type: String,
       default: '50%',
     },
-    arrowPosLeft: {
+    arrowCenterPos: {
       type: String,
       default: '50%',
     }

src/components/tableSelect2.vue

@@ -180,8 +180,8 @@
               currentMaterialType === 'pano' ? '请上传2:1、120MB以内、jpg格式的图片' :
               ''
             "
-            :framePosLeft="'30px'"
-            :arrowPosLeft="'calc(50% - 24px)'"
+            :frameCenterPos="'30px'"
+            :arrowCenterPos="'calc(50% - 24px)'"
           ></TooltipInEditor>
         </i>
       </button>

src/framework/EditorMain.vue

@@ -2,15 +2,18 @@
   <!-- 编辑器顶部栏以下部分 -->
   <main class="app-main">
     <!-- 左侧菜单栏 -->
-    <app-menu></app-menu>
+    <app-menu class="app-menu"></app-menu>
     <!-- 其余 -->
     <div class="app-content">
+      <!-- 内嵌的全景场景预览区域 -->
       <div
         class="app-player"
         ref="layer"
+        v-show="$route.meta.loadScene"
       >
-        <Core v-show="$route.meta.loadScene"/>
+        <Core/>
       </div>
+      <!-- 初始和热点 底部的 全景场景列表 -->
       <toolbar v-show="$route.meta.loadScene"></toolbar>
       <div class="app-view">
         <keep-alive>
@@ -44,37 +47,28 @@ export default {
   flex: 1;
   height: 100%;
   width: 100%;
-  overflow: hidden;
-}
-.app-content {
-  position: relative;
-  display: flex;
-  flex: 1;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  
-  .app-player {
-    padding: 10px;
-    position: relative;
-    display: flex;
-    flex: 1;
-    height: calc(100% - 260px);
-    flex-direction: column;
-    &.page-guide {
-      height: calc(100% - 210px);
-    }
+  > .app-menu {
+    flex: 0 0 auto;
   }
-
-  .app-view {
-    display: flex;
-    width: 100%;
+  > .app-content {
+    position: relative;
+    flex: 1 0 auto;
     height: 100%;
-    > div {
+    display: flex;
+    .app-player {
+      padding: 10px;
+      position: relative;
       display: flex;
+      flex: 0 0 auto;
+      height: calc(100% - 260px); // 260: 底部toolbar的高度
+      flex-direction: column;
+      &.page-guide {
+        height: calc(100% - 210px);
+      }
+    }
+    .app-view {
       width: 100%;
       height: 100%;
-      white-space: nowrap;
     }
   }
 }

src/views/base/Setting.vue

@@ -2,3 +2,9 @@
   <!-- 编辑器-基础-右侧栏 -->
   <ul class="view-setting" app-border dir-left></ul>  
 </template>
+
+<script>
+export default {
+  name: "baseSetting"
+}
+</script>

src/views/navigation/groupSettings.vue

@@ -3,9 +3,9 @@
     <div class="ui-title-big">场景导航
       <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tool-tip-wrapper>
         <TooltipInEditor
-          :text="'开场提示仅适用于全景图。若初始场景为三维模\n型，以下开场提示不适用。'"
-          :framePosLeft="'30px'"
-          :arrowPosLeft="'calc(50% - 24px)'"
+          :text="'1、请自定义分组并添加全景素材或四维看看相机拍摄的场景素材；\n2、全景图可进行编辑，四维看看场景仅支持导航展示和热点关联。'"
+          :frameCenterPos="'172px'"
+          :arrowCenterPos="'20px'"
         ></TooltipInEditor>
       </i>
     </div>
@@ -364,94 +364,101 @@ export default {
 </script>
 <style lang="less" scoped>
 .group-settings {
-  .ui-title-big {
-    margin-top: 24px;
-    margin-left: 20px;
-  }
-}
-.tips {
-  width: 100%;
-  .ui-remark {
-    margin-bottom: 10px;
+  padding: 24px 20px;
+  > .ui-title-big {
+    > .tool-tip-for-editor {
+      font-size: 12px;
+      cursor: default;
+      position: relative;
+      top: -1px;
+      font-weight: normal;
+    }
   }
-}
-.no-record {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-  color: rgba(255, 255, 255, 0.5);
-  > i {
-    font-size: 40px;
+  .tips {
+    width: 100%;
+    .ui-remark {
+      margin-bottom: 10px;
+    }
   }
-  > p {
-    margin-top: 10px;
+  .no-record {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: rgba(255, 255, 255, 0.5);
+    > i {
+      font-size: 40px;
+    }
+    > p {
+      margin-top: 10px;
+    }
   }
-}
-.pano-label {
-  .pano-con {
-    padding: 20px 30px;
-    height: calc(100vh - 250px);
-    .menu-con {
-      position: relative;
-      > .iconfont {
-        left: -20px;
-        top: 8px;
-        position: absolute;
-        cursor: pointer;
-      }
-      > .icon_forward {
-        right: 40px;
-        left: auto;
-      }
-      .sub-menu {
-        max-width: calc(100% - 70px);
+  .pano-label {
+    .pano-con {
+      padding: 20px 30px;
+      height: calc(100vh - 250px);
+      .menu-con {
         position: relative;
-        overflow: hidden;
-        height: 40px;
-
-        > ul {
-          max-width: unset;
-          overflow: unset;
+        > .iconfont {
+          left: -20px;
+          top: 8px;
           position: absolute;
-          left: 0;
-          transition: 0.3s ease all;
-          .fixed {
+          cursor: pointer;
+        }
+        > .icon_forward {
+          right: 40px;
+          left: auto;
+        }
+        .sub-menu {
+          max-width: calc(100% - 70px);
+          position: relative;
+          overflow: hidden;
+          height: 40px;
+
+          > ul {
+            max-width: unset;
+            overflow: unset;
             position: absolute;
-            right: 0;
+            left: 0;
+            transition: 0.3s ease all;
+            .fixed {
+              position: absolute;
+              right: 0;
+            }
+            // &::before{
+            //   width: calc(100% - 70px);
+            //   height: calc(100% - 10px);
+            //   pointer-events: none;
+            //   content: '';
+            //   background: linear-gradient(to right,rgba(#fff,0) 0%,rgba(#fff,0) 98%,rgba(#000,1) 100%);
+            //   position: absolute;
+            //   top: 0;
+            //   left: 0;
+            //   z-index: 999;
+            //   display: inline-block;
+            // }
           }
-          // &::before{
-          //   width: calc(100% - 70px);
-          //   height: calc(100% - 10px);
-          //   pointer-events: none;
-          //   content: '';
-          //   background: linear-gradient(to right,rgba(#fff,0) 0%,rgba(#fff,0) 98%,rgba(#000,1) 100%);
-          //   position: absolute;
-          //   top: 0;
-          //   left: 0;
-          //   z-index: 999;
-          //   display: inline-block;
-          // }
         }
       }
-    }
 
-    > ul {
-      max-height: calc(100% - 82px);
-      overflow-y: auto;
-      position: relative;
-      left: -2px;
-      > li {
-        margin: 10px 20px 30px 0;
+      > ul {
+        max-height: calc(100% - 82px);
+        overflow-y: auto;
+        position: relative;
+        left: -2px;
+        > li {
+          margin: 10px 20px 30px 0;
+        }
       }
-    }
-    .add-btn {
-      z-index: 20;
-      .ui-button {
-        margin: 0 5px;
+      .add-btn {
+        z-index: 20;
+        .ui-button {
+          margin: 0 5px;
+        }
       }
     }
   }
+  
 }
 </style>

src/views/navigation/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="editor-navigation">
     <GroupSettings
       class="group-settings-area"
       @catalog="data=>activeCataLog = data"
@@ -7,7 +7,8 @@
       @addGroup="onAddGroup"
       @addScene="onAddScene"
       @rename="onRename"
-    ></GroupSettings>
+    />
+    <div class="preview-area"></div>
     <InitialSceneSettings class="initial-scene-settings-area" @select="handleInitScene"></InitialSceneSettings>
     <popup v-show="showAddGroup" :can-close="false">
       <div class="ui-message ui-message-confirm dark" style="width: 400px">
@@ -364,42 +365,53 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.group-settings-area {
-  width: calc(100% - 236px);
-}
-.initial-scene-settings-area {
-  width: 236px;
-}
-.dialog {
-  position: fixed;
-  z-index: 30;
-  left: 0;
-  top: 0;
-  width: 100%;
+.editor-navigation {
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-.pano-con {
-  height: auto;
-  background: none;
-  padding: 10px 0;
-  .ui-remark {
-    padding-left: 10px;
+  white-space: nowrap;
+  display: flex;
+  .group-settings-area {
+    width: 300px;
+    flex: 0 0 auto;
+  }
+  .preview-area {
+    background: red;
+    flex: 1 0 auto;
+  }
+  .initial-scene-settings-area {
+    width: 274px;
+    flex: 0 0 auto;
+  }
+  .dialog {
+    position: fixed;
+    z-index: 30;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
   }
-  > ul {
-    > li {
-      cursor: pointer;
+  .pano-con {
+    height: auto;
+    background: none;
+    padding: 10px 0;
+    .ui-remark {
+      padding-left: 10px;
+    }
+    > ul {
+      > li {
+        cursor: pointer;
+      }
     }
   }
-}
-.re-name {
-  width: 80%;
-  margin: 40px auto;
-}
-.add-vr {
-  text-align: left;
-  .ui-remark {
-    margin: 10px 0;
+  .re-name {
+    width: 80%;
+    margin: 40px auto;
+  }
+  .add-vr {
+    text-align: left;
+    .ui-remark {
+      margin: 10px 0;
+    }
   }
 }
 </style>