编辑器-导航-分组管理：调整dom结构与样式，以保证tooltip和bfc不矛盾。

src/assets/style/style.pc.edit.less

@@ -19,7 +19,7 @@
   background: #47484A;
   border-radius: 3px;
 }
-::-webkit-scrollbar-button { background-color: none; height: 0; }
+::-webkit-scrollbar-button { background-color: transparent; height: 0; }
 ::-webkit-scrollbar-track { background: transparent; border-radius: 6px; }
 ::-webkit-scrollbar-corner { background: transparent; border-radius: 6px; }
 ::-webkit-scrollbar-resizer { background: transparent;}

src/views/navigation/groupSettings.vue

@@ -14,123 +14,127 @@
       新增分组
     </button>
 
-    <SceneGroupInEditor
-      v-for="(item) of catalogTopology"
-      :key=item.id
-      :groupNode="item"
-      :level="1"
-      @renameScene="onRenameScene"
-      @deleteScene="onDeleteScene"
-    />
+    <div class="obstructor"></div>
 
-    <div class="pano-con">
-      <tabList
-        :deviation="-35"
-        :list="info.catalogRoot"
-        @clickItem="
-          (item) => {
-            taboneActive = item;
-          }
-        "
-        :active="taboneActive"
-        :id="'rand'"
-        @addGroup="hadnleAddGroup"
-        :subId="'rand1'"
-      >
-        <template slot="hover" slot-scope="{ item }">
-          <ul>
-            <li @click="$emit('addGroup', { type: 1, oper: 'edit', item })">
-              重命名
-            </li>
-            <li
-              @click="
-                $emit('addGroup', {
-                  type: 2,
-                  oper: 'add',
-                  item: { parentId: item.id },
-                })
-              "
-            >
-              创建二级分组
-            </li>
-            <li @click="del(item, 'one')">删除</li>
-          </ul>
-        </template>
-      </tabList>
+    <div class="scene-group-wrap">
+      <SceneGroupInEditor
+        v-for="(item) of catalogTopology"
+        :key=item.id
+        :groupNode="item"
+        :level="1"
+        @renameScene="onRenameScene"
+        @deleteScene="onDeleteScene"
+      />
 
-      <tabList
-        :deviation="-35"
-        v-if="childTab.length > 1"
-        :list="childTab"
-        @clickItem="
-          (item) => {
-            tabtowActive = item;
-          }
-        "
-        :active="tabtowActive"
-        :id="'subrand'"
-        @addGroup="
-          $emit('addGroup', {
-            type: 2,
-            oper: 'add',
-            item: { parentId: taboneActive.id },
-          })
-        "
-        :subId="'subrand1'"
-      >
-        <template slot="hover" slot-scope="{ item }">
-          <ul @mouseover.prevent @mouseleave.prevent>
-            <li @click="$emit('addGroup', { type: 2, oper: 'edit', item })">
-              重命名
-            </li>
-            <li @click="del(item, 'two')">删除</li>
-          </ul>
-        </template>
-      </tabList>
+          <div class="pano-con">
+        <tabList
+          :deviation="-35"
+          :list="info.catalogRoot"
+          @clickItem="
+            (item) => {
+              taboneActive = item;
+            }
+          "
+          :active="taboneActive"
+          :id="'rand'"
+          @addGroup="hadnleAddGroup"
+          :subId="'rand1'"
+        >
+          <template slot="hover" slot-scope="{ item }">
+            <ul>
+              <li @click="$emit('addGroup', { type: 1, oper: 'edit', item })">
+                重命名
+              </li>
+              <li
+                @click="
+                  $emit('addGroup', {
+                    type: 2,
+                    oper: 'add',
+                    item: { parentId: item.id },
+                  })
+                "
+              >
+                创建二级分组
+              </li>
+              <li @click="del(item, 'one')">删除</li>
+            </ul>
+          </template>
+        </tabList>
 
-      <template v-if="scenes.length > 0">
-        <draggable
-          tag="ul"
-          v-model="scenes"
-          animation="300"
-          @sort="uploadListSort"
+        <tabList
+          :deviation="-35"
+          v-if="childTab.length > 1"
+          :list="childTab"
+          @clickItem="
+            (item) => {
+              tabtowActive = item;
+            }
+          "
+          :active="tabtowActive"
+          :id="'subrand'"
+          @addGroup="
+            $emit('addGroup', {
+              type: 2,
+              oper: 'add',
+              item: { parentId: taboneActive.id },
+            })
+          "
+          :subId="'subrand1'"
         >
-          <li v-for="(item, i) in scenes" :key="i">
-            <div class="typeli">
-              <i
-                class="iconfont iconedit_type_3d"
-                :class="{iconedit_type_panorama: item.type !== '4dkk' }"
-              ></i>
-            </div>
-            <div class="img">
-              <img :src="item.icon+`?${Math.random()}`" alt="" />
-            </div>
-            <div class="oper">
-              <i class="iconfont iconmore"></i>
-              <ul>
-                <li @click="$emit('rename', item)">重命名</li>
-                <li @click="delPano(item)">删除</li>
-              </ul>
-            </div>
-            <div class="ui-title">
-              <span>{{
-                item.type == "house" ? item.roomName : item.sceneTitle
-              }}</span>
-            </div>
-          </li>
-        </draggable>
-      </template>
-      <div class="no-record" v-else>
-        <i class="iconfont iconedit_list_default"></i>
-        <p>暂无全景图或三维场景，可点击下方按钮进行添加</p>
-      </div>
-      <div class="add-btn">
-        <button class="ui-button submit" @click="$emit('addPano')">
-          选择全景图
-        </button>
-        <button class="ui-button submit" @click="$emit('addScene')">
-          选择三维场景
-        </button>
+          <template slot="hover" slot-scope="{ item }">
+            <ul @mouseover.prevent @mouseleave.prevent>
+              <li @click="$emit('addGroup', { type: 2, oper: 'edit', item })">
+                重命名
+              </li>
+              <li @click="del(item, 'two')">删除</li>
+            </ul>
+          </template>
+        </tabList>
+
+        <template v-if="scenes.length > 0">
+          <draggable
+            tag="ul"
+            v-model="scenes"
+            animation="300"
+            @sort="uploadListSort"
+          >
+            <li v-for="(item, i) in scenes" :key="i">
+              <div class="typeli">
+                <i
+                  class="iconfont iconedit_type_3d"
+                  :class="{iconedit_type_panorama: item.type !== '4dkk' }"
+                ></i>
+              </div>
+              <div class="img">
+                <img :src="item.icon+`?${Math.random()}`" alt="" />
+              </div>
+              <div class="oper">
+                <i class="iconfont iconmore"></i>
+                <ul>
+                  <li @click="$emit('rename', item)">重命名</li>
+                  <li @click="delPano(item)">删除</li>
+                </ul>
+              </div>
+              <div class="ui-title">
+                <span>{{
+                  item.type == "house" ? item.roomName : item.sceneTitle
+                }}</span>
+              </div>
+            </li>
+          </draggable>
+        </template>
+        <div class="no-record" v-else>
+          <i class="iconfont iconedit_list_default"></i>
+          <p>暂无全景图或三维场景，可点击下方按钮进行添加</p>
+        </div>
+        <div class="add-btn">
+          <button class="ui-button submit" @click="$emit('addPano')">
+            选择全景图
+          </button>
+          <button class="ui-button submit" @click="$emit('addScene')">
+            选择三维场景
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -385,10 +389,16 @@ export default {
 </script>
 <style lang="less" scoped>
 .group-settings {
-  padding: 24px 20px;
-  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  background: #252526;
+  position: relative;
   > .ui-title-big {
+    margin-top: 24px;
+    margin-left: 20px;
+    margin-right: 20px;
     margin-bottom: 0;
+    flex: 0 0 auto;
     > .tool-tip-for-editor {
       font-size: 12px;
       cursor: default;
@@ -398,89 +408,112 @@ export default {
     }
   }
   > .create-group-btn {
-    width: 100%;
     margin-top: 24px;
+    margin-left: 20px;
+    margin-right: 20px;
+    flex: 0 0 auto;
     > i {
       font-size: 14px;
     }
   }
-  .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);
+  > .obstructor {
+    position: absolute;
+    top: 108px;
+    left: 0px;
+    right: 0px;
+    height: 37px;
+    // background: red;
+    background: #252526;
+    z-index: 1;
+  }
+  > .scene-group-wrap {
+    flex: 1 1 auto;
+    height: 1px;
+    overflow: auto;
+    padding-top: 32px;
+    padding-bottom: 38px;
+    padding-left: 20px;
+    padding-right: 20px;
+    &::-webkit-scrollbar-button {
+      background-color: transparent; height: 38px;
+    }
+    .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;
-      }
-    }
-    .add-btn {
-      z-index: 20;
-      .ui-button {
-        margin: 0 5px;
+      > ul {
+        max-height: calc(100% - 82px);
+        overflow-y: auto;
+        position: relative;
+        left: -2px;
+        > li {
+          margin: 10px 20px 30px 0;
+        }
       }
-    }
-    .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;
+      .add-btn {
+        z-index: 20;
+        .ui-button {
+          margin: 0 5px;
+        }
       }
-      > 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;
+        }
       }
     }
   }
-  
 }
 </style>