改了image&layer布局，加了标注描述

DAPlatform-front/src/components/imageAnnotation/imageAnnotiation.vue

@@ -32,15 +32,15 @@
               <el-radio-button label="矩形标注"></el-radio-button>
               <el-radio-button label="多边形标注"></el-radio-button>
             </el-radio-group>
-            <el-button @click="save()">保存</el-button>
+            <el-button @click="save()"  style="font-size: 12px;padding: 10px 20px;">保存</el-button>
           </div>
         </div>
       </el-aside>
 
-      <el-aside class="sidebar2" style="position: absolute;margin-top: 60px" :style="{ height : 185 +'px'}">
+      <el-aside class="sidebar2" style="position: absolute;margin-top: 55px" :style="{ height : 185 +'px'}">
         <div class="sidebar-box">
           <div>
-            <div class="img-list-title" style="height: 30px;line-height: 30px;font-size: 15px">标注描述</div>
+            <div class="img-list-title" style="height: 30px;line-height: 30px;font-size: 14px">标注描述</div>
               <div style="margin: 5px;text-align: left">{{this.description}}</div>
 <!--              <div class="img-title-list-box">-->
 <!--                <div v-for="(item, index) in data" :key="item.id" style="text-align: left"  class="listLeft" @click="jumpToImage(index)">-->
@@ -55,7 +55,7 @@
       <el-aside class="sidebar3" style="position: absolute;margin-top: 260px" >
         <div class="sidebar-box">
           <div>
-            <div class="img-list-title" style="height: 30px;line-height: 30px;font-size: 15px">标注列表</div>
+            <div class="img-list-title" style="height: 30px;line-height: 30px;font-size: 14px">标注列表</div>
             <div class="img-title-list-box">
               <div id="img-title-list" style="user-select:none">
 
@@ -1204,7 +1204,7 @@ export default {
   height: 97%;
   margin-left: 50px;
   /*border: 2px solid #409eff;*/
-  /*border-radius: 5px;*/
+  border-radius: 5px;
   box-shadow: 0px 0px 10px #dbdbdb;
   background-color: white;
 }
@@ -1212,7 +1212,7 @@ export default {
   height: 97%;
   margin-left: 50px;
   /*border: 2px solid #409eff;*/
-  /*border-radius: 5px;*/
+  border-radius: 5px;
   box-shadow: 0px 0px 10px #dbdbdb;
   background-color: white;
 }
@@ -1221,7 +1221,7 @@ export default {
   height: calc(100vh - 81px - 300px);
   margin-left: 50px;
   /*border: 2px solid #409eff;*/
-  /*border-radius: 5px;*/
+  border-radius: 5px;
   box-shadow: 0px 0px 10px #dbdbdb;
   background-color: white;
 }
@@ -1241,4 +1241,9 @@ export default {
   margin-top: 3px;
   margin-bottom: 3px;
 }
+
+  /deep/ .el-radio-button__inner{
+    font-size: 12px;
+    padding: 10px 20px;
+  }
 </style>

DAPlatform-front/src/components/imageAnnotation/layerAnnotation.vue

@@ -47,52 +47,71 @@
       <!--      侧边栏-->
       <el-aside class="sidebar"  style="height: 130px;background-color: rgba(255,255,255,0);box-shadow: 0px 0px 0px rgba(255,255,255,0);padding: 0px">
         <div class="sidebar-box">
-          <div class="tool-button-left">
-<!--            <div style="margin-top: 5px"></div>-->
-<!--            // 改变中心点-->
-<!--            <el-button-group style="margin-right: 10px ; line-height: 40px;vertical-align: middle">-->
-<!--              <el-button class="tool-button" type="primary" style="margin-right: 10px" @click="setCenter()">改变中心点</el-button>-->
-<!--              <a>X:</a>-->
-<!--              <input type="text" style="width: 30px" v-model="centerX">-->
-<!--              <a>Y:</a>-->
-<!--              <input type="text" style="width: 30px" v-model="centerY">-->
-<!--            </el-button-group>-->
+          <div class="tool-button-left" style="text-align: left">
             <div style="margin-top: 5px"></div>
-
-            <el-radio-group v-model="radio1">
+<!--            // 改变中心点-->
+            <el-button-group style="margin-right: 10px ; line-height: 30px;vertical-align: middle">
+              <el-button class="tool-button" type="primary" style="margin-right: 10px;font-size: 12px;padding: 10px 20px;" @click="setCenter()">改变中心点</el-button>
+              <a>X:</a>
+              <el-input type="text" style="width: 50px;" v-model="centerX"></el-input>
+              <a>Y:</a>
+              <el-input type="text" style="width: 50px" v-model="centerY"></el-input>
+            </el-button-group>
+            <div style="margin-top: 10px"></div>
+
+            <el-radio-group v-model="radio1" >
               <el-radio-button label="地标"></el-radio-button>
               <el-radio-button label="矩形"></el-radio-button>
               <el-radio-button label="多边形"></el-radio-button>
             </el-radio-group>
-            <el-button @click="save()">保存</el-button>
+            <el-button @click="save()" style="font-size: 12px;padding: 10px 20px;">保存</el-button>
 
           </div>
         </div>
       </el-aside>
 
-      <el-aside class="sidebar"  style="position: absolute;margin-top: 60px;height: 185px">
-        <div class="sidebar-box" style="height: 185px">
+      <el-aside class="sidebar"  style="position: absolute;margin-top: 100px;height: 235px">
+        <div class="sidebar-box" style="height: 235px">
           <div>
-            <div class="img-list-title">点标注</div>
-            <div class="img-title-list-box" style="height: 145px">
-              <div v-for="(item, index) in landmarkData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="markInfo(index)" @mouseenter="markEnter(index)" @mouseleave="restore()">
-                {{index+1}}. &nbsp; {{item.landmarkName}}
-              </div>
-            </div>
+            <div class="img-list-title" style="font-size: 14px;height: 30px;line-height: 30px">标注描述</div>
+            <div>{{this.description}}</div>
+
           </div>
         </div>
       </el-aside>
 
-      <el-aside class="sidebar" style="position: absolute;margin-top: 260px;height: calc(100vh - 81px - 300px);">
+      <el-aside class="sidebar" style="position: absolute;margin-top: 350px;height: calc(100vh - 71px - 400px);">
         <div class="sidebar-box">
-          <div>
-            <div class="img-list-title">区域标注</div>
-            <div class="img-title-list-box">
-              <div v-for="(item, index) in layerData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="areaInfo(index)" @mouseenter="areaEnter(index)" @mouseleave="restore()">
-                {{index+1}}. &nbsp; {{item.labelName}}
+          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+            <el-tab-pane label="点标注" name="first">
+              <div class="img-title-list-box" style="height: 205px">
+                <div v-for="(item, index) in landmarkData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="markInfo(index)" @mouseenter="markEnter(index)" @mouseleave="restore()">
+                  {{index+1}}. &nbsp; {{item.landmarkName}}
+                </div>
               </div>
-            </div>
-          </div>
+            </el-tab-pane>
+            <el-tab-pane label="区域标注" name="second">
+              <div class="img-title-list-box">
+                <div v-for="(item, index) in layerData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="areaInfo(index)" @mouseenter="areaEnter(index)" @mouseleave="restore()">
+                  {{index+1}}. &nbsp; {{item.labelName}}
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+<!--          <div>-->
+<!--            <div class="img-list-title"  style="display:inline-block;font-size: 14px;height: 30px;line-height: 30px;width: 100px">点标注</div>-->
+<!--            <div class="img-list-title">区域标注</div>-->
+<!--            <div v-show="isPoint" class="img-title-list-box" style="height: 205px">-->
+<!--              <div v-for="(item, index) in landmarkData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="markInfo(index)" @mouseenter="markEnter(index)" @mouseleave="restore()">-->
+<!--                {{index+1}}. &nbsp; {{item.landmarkName}}-->
+<!--              </div>-->
+<!--            </div>-->
+<!--            <div v-show="!isPoint" class="img-title-list-box">-->
+<!--              <div v-for="(item, index) in layerData" :key="item.id" class="listLeft" style="text-align: left" @dblclick="areaInfo(index)" @mouseenter="areaEnter(index)" @mouseleave="restore()">-->
+<!--                {{index+1}}. &nbsp; {{item.labelName}}-->
+<!--              </div>-->
+<!--            </div>-->
+<!--          </div>-->
         </div>
       </el-aside>
       <!--      工作台-->
@@ -123,6 +142,8 @@
     name: 'layerAnnotation',
     data(){
       return{
+        activeName: 'first',
+        isPoint: true,
         centerX: 0,
         centerY: 0,
         labelNow: 0,
@@ -263,6 +284,10 @@
           }
         })
       },
+      // 点标注&区域标注跳转
+      handleClick(tab, event) {
+        console.log(tab, event);
+      },
       // 删除标注
       deleteLabelInList () {
         if(this.isMark) {
@@ -811,4 +836,42 @@
   .listLeft:hover{
     background-color: #cbd8ea;
   }
+
+  /deep/ .el-radio-button__inner{
+    font-size: 12px;
+    padding: 10px 20px;
+  }
+  /deep/ .el-input__inner{
+    font-size: 12px;
+    height: 34px;
+    line-height: 34px;
+    padding: 0px 3px;
+  }
+  /deep/ .el-tabs__header{
+    margin: 0px 0px 5px;
+  }
+  /deep/ .el-tabs__item{
+    height: 35px;
+    line-height: 35px;
+    font-size: 14px;
+  }
+  /deep/ .el-tabs__nav-scroll{
+    background-color: #409EFF;
+  }
+  /deep/ .el-tabs__item.is-active{
+    background-color: white;
+    color: black;
+  }
+  /deep/ .el-tabs__item{
+    background-color: #409EFF;
+    color: white;
+    border-right: 1px solid white;
+  }
+  /deep/ .el-tabs--card>.el-tabs__header .el-tabs__item{
+    transition: color 0s ease;
+    -webkit-transition: color 0s ease;
+  }
+  /deep/ .el-tabs--card>.el-tabs__header .el-tabs__nav{
+    border: 0;
+  }
 </style>