改了一下界面样式

DAPlatform-front/src/App.vue

@@ -21,4 +21,10 @@ body{
   color: #2c3e50;
   margin:0;
 }
+html,body,#app{
+  height: 100%;
+  width: 100%;
+  margin: 0;
+}
+
 </style>

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

 <template>
-  <div class="layout">
+  <div class="layout" :style="{ height : height_res+'px'}">
 <!--    工具栏-->
     <div class="toolBar">
       <el-button-group id="start">
@@ -35,11 +35,14 @@
 <!--      工作台-->
       <el-main class="workbench">
         <img src="../../assets/logo.png">
+<!--        <div style="margin-top: 50px">-->
           <el-button-group id="buttonBar">
             <el-button class="tool-button"type="primary" >移动图层</el-button>
             <el-button class="tool-button"type="primary" >放大</el-button>
             <el-button class="tool-button"type="primary" >缩小</el-button>
           </el-button-group>
+<!--        </div>-->
+
       </el-main>
     </el-container>
   </div>
@@ -50,6 +53,7 @@ export default {
   name: 'imageAnnotation',
   data(){
     return{
+      height_res:0,
       activeIndex1:1,
       image_list: [{
         label: 'image1.jpg',
@@ -93,7 +97,18 @@ export default {
       }
     }
   },
+  mounted(){
+    this.get_height();
+    var _this = this;
+    window.onresize = function(){
+      // alert("??");
+      _this.height_res = document.body.clientHeight - 61;
+    }
+  },
   methods:{
+    get_height(){
+      this.height_res = document.body.clientHeight - 61;
+    },
     changeToolBar(val){
       this.activeIndex1=val
     },
@@ -120,28 +135,40 @@ export default {
 
 <style scoped>
 .layout {
+  display: flex;
+  flex-direction: column;
   height: 100%;
-  overflow: hidden;
+  /*overflow: hidden;*/
+  background-color: #d9ecff;
 }
 
 .toolBar{
   margin-top: 20px;
   margin-bottom: 20px;
+  /*background-color: #2c3e50;*/
 }
 .workbench {
-  border: 2px solid #409eff;
-  margin-left: 10px;
-  margin-right: 10px;
+  /*border: 2px solid #409eff;*/
+  margin-left: 20px;
+  margin-right: 40px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px #dbdbdb;
+  background-color: white;
+  height: 87%;
 }
 
 #buttonBar {
   position: fixed;
   left: 50%;
-  bottom: 50px;
+  bottom: 30px;
 }
 .sidebar {
+  height: 87%;
   margin-left: 50px;
-  border: 2px solid #409eff;
+  /*border: 2px solid #409eff;*/
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px #dbdbdb;
+  background-color: white;
 }
 .img-list-title{
   line-height: 40px;
@@ -150,8 +177,10 @@ export default {
   color: white;
 }
 .img-title-list-box{
-  height: 500px;
+  /*height: 800px;*/
+  height: 100%;
   overflow: auto;
+  background-color: white;
 }
 .add-file-btn-group >>> button{
   margin-top: 3px;

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

 <template>
-  <div class="layout">
+  <div class="layout" :style="{ height : height_res+'px'}">
     <!--    工具栏-->
     <div class="toolBar">
       <el-button-group id="start">
         <el-button class="tool-button" type="primary" >保存</el-button>
         <el-button class="tool-button" type="primary" >退出</el-button>
       </el-button-group>
-      <el-button-group style="margin-right: 10px ; ">
+      <el-button-group style="margin-right: 10px ; line-height: 40px;vertical-align: middle">
         <el-button class="tool-button"type="primary" style="margin-right: 10px">飞入坐标点</el-button>
         <a>X:</a>
         <input type="text" style="width: 30px">
@@ -56,6 +56,7 @@
     name: 'layerAnnotation',
     data(){
       return{
+        height_res:0,
         Xpoint: 0,
         Ypoint: 0,
         activeIndex1:1,
@@ -101,7 +102,18 @@
         }
       }
     },
+    mounted(){
+      this.get_height();
+      var _this = this;
+      window.onresize = function(){
+        // alert("??");
+        _this.height_res = document.body.clientHeight - 61;
+      }
+    },
     methods:{
+      get_height(){
+        this.height_res = document.body.clientHeight - 61;
+      },
       changeToolBar(val){
         this.activeIndex1=val
       },
@@ -128,8 +140,11 @@
 
 <style scoped>
   .layout {
+    display: flex;
+    flex-direction: column;
     height: 100%;
-    overflow: hidden;
+    /*overflow: hidden;*/
+    background-color: #d9ecff;
   }
 
   .toolBar{
@@ -137,19 +152,27 @@
     margin-bottom: 20px;
   }
   .workbench {
-    border: 2px solid #409eff;
-    margin-left: 10px;
-    margin-right: 10px;
+    /*border: 2px solid #409eff;*/
+    margin-left: 20px;
+    margin-right: 40px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #dbdbdb;
+    background-color: white;
+    height: 87%;
   }
 
   #buttonBar {
     position: fixed;
     left: 50%;
-    bottom: 50px;
+    bottom: 30px;
   }
   .sidebar {
+    height: 87%;
     margin-left: 50px;
-    border: 2px solid #409eff;
+    /*border: 2px solid #409eff;*/
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px #dbdbdb;
+    background-color: white;
   }
   .img-list-title{
     line-height: 40px;

DAPlatform-front/src/router/index.js

@@ -12,7 +12,7 @@ import ongoingtask from '../components/ongoingtask'
 import SelectText from '../components/textAnnotation/SelectText'
 import Table from '../components/textAnnotation/Table'
 import imageAnnotiation from '../components/imageAnnotation/imageAnnotiation'
-import layerAnnotation from "../components/imageAnnotation/layerAnnotation";
+import layerAnnotation from '../components/imageAnnotation/layerAnnotation';
 
 
 Vue.use(Router)