更新示例右侧布局调整

congcongshang · Apr 5, 2020 · 5099543 · 5099543
1 parent 0092e09
commit 5099543
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 9 deletions.
diff --git a/src/views/index.less b/src/views/index.less
@@ -69,14 +69,25 @@ body {
       width: 100%;
     }
   }
+  // 右侧部分（属性栏 + 缩略图）
+  .right-part{
+    height: @pageHeight;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
   // 属性栏
   #detailpannel {
-    height: calc(@pageHeight - 200px);
+    flex-grow: 1;
+
     background-color: @backgroundColor;
     border-left: 1px solid @borderColor;
     overflow-y: scroll;
     #nodeAttributeBar,
-    #edgeAttributeBar {
+    #edgeAttributeBar,
+    #groupAttributeBar,
+    #canvasAttributeBar,
+    #multiAttributeBar {
       .title {
         height: 34px;
         line-height: 34px;
@@ -95,7 +106,20 @@ body {
   }
   // 缩略图
   #minimap {
-    border: 1px solid #ccc;
+    background-color: @backgroundColor;
+    border-top: 1px solid #ccc;
+    border-left: 1px solid #ccc;
+    .title {
+      height: 34px;
+      line-height: 34px;
+      text-align: center;
+      box-sizing: border-box;
+      font-weight: bold;
+      font-size: 13px;
+      border-width: 0 0 1px 0;
+      border-style: solid;
+      border-color: @borderColor;
+    }
   }
   // 右键菜单
   #contextmenu {

diff --git a/src/views/index.vue b/src/views/index.vue
@@ -99,6 +99,7 @@
       </el-col>
       <!-- 属性栏 -->
       <el-col :span="4">
+        <section class="right-part">
         <div id="detailpannel">
           <!-- 节点属性栏 -->
           <div id="nodeAttributeBar" class="pannel" data-status="node-selected">
@@ -153,12 +154,21 @@
               </el-form>
             </div>
           </div>
-          <!-- <div data-status="group-selected">群组属性栏</div>
-          <div data-status="canvas-selected">画布属性栏</div>
-          <div data-status="multi-selected">多选时属性栏</div>-->
+          <div id="groupAttributeBar" class="pannel" data-status="group-selected">
+            <div class="title">群组属性栏</div>
+          </div>
+          <div id="canvasAttributeBar" class="pannel" data-status="canvas-selected">
+            <div class="title">画布属性栏</div>
+          </div>
+          <div id="multiAttributeBar" class="pannel" data-status="multi-selected">
+            <div class="title">多选时属性栏</div>
+          </div>
         </div>
         <!-- 缩略图 -->
-        <div id="minimap"></div>
+        <div id="minimap">
+          <div class="title">缩略图</div>
+        </div>
+        </section>
       </el-col>
     </el-row>
     <!-- 弹窗 -->
@@ -369,8 +379,7 @@ export default {
         }
       });
       // 监听（删除后）事件
-      currentPage.on("afterdelete", (ev) => {
-      });
+      currentPage.on("afterdelete", (ev) => {});
     },
     // 打开保存为图片弹窗
     openSaveAsImageDialog() {