基本框架搭建

src/App.vue

@@ -1,29 +1,36 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
   <TitleBar/>
+  <CenterPage/>
+  <StatusBar/>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
 import TitleBar from './components/TitleBar.vue'
+import CenterPage from './components/CenterPage.vue'
+import StatusBar from './components/StatusBar.vue'
 
 export default {
   name: 'App',
   components: {
-    HelloWorld,
-    TitleBar
+    TitleBar,
+    CenterPage,
+    StatusBar
   }
 }
 </script>
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+<style scoped>
+@import './assets/style/main.css';
+ /*#app {
+   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
-}
+  margin-top: 60px; 
+  background-color: coral;
+  padding: 0;
+  margin: 0;
+  border: none;
+} */
 </style>

src/assets/style/main.css

@@ -0,0 +1,13 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body,
+#app,
+.wrapper {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}

src/components/CenterPage.vue

@@ -1,4 +1,13 @@
 /* 中间页面 */
 <template>
-    
-</template>
+<div class='status-bar'>
+
+</div>
+</template>
+
+<style scoped>
+.status-bar{
+    height: 91vh;
+    background-color:blue;
+}
+</style>

src/components/StatusBar.vue

@@ -1,4 +1,17 @@
 /* 状态栏 */
 <template>
+<div class='status-bar'>
+
+</div>
+</template>
+
+<style scoped>
+.status-bar{
+    height: 4vh;
+    background-color:black;
     
-</template>
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
+}
+</style>

src/components/TitleBar.vue

@@ -1,4 +1,14 @@
 /* 标题栏 */
 <template>
-    <h1>你好，我是标题栏</h1>
-</template>
+<div class='title-bar'>
+
+</div>
+</template>
+
+<style scoped>
+.title-bar{
+    height: 5vh;
+    background-color: aqua;
+    margin: 0;
+}
+</style>

src/components/Views/ControlCenter/CalibrationArea.vue

@@ -0,0 +1,4 @@
+/* 校验区 */
+<template>
+    
+</template>

src/components/Views/ControlCenter/ControlArea.vue

@@ -0,0 +1,4 @@
+/* 控制区 */
+<template>
+    
+</template>

src/components/Views/ControlCenter/MarkingArea.vue

@@ -0,0 +1,4 @@
+/* 标注区 */
+<template>
+    
+</template>

src/components/Views/ControlCenter/ProblemArea.vue

@@ -0,0 +1,4 @@
+/* 问题区 */
+<template>
+    
+</template>

src/components/Views/ControlCenter/RecommendedArea.vue

@@ -0,0 +1,4 @@
+/* 推荐区 */
+<template>
+    
+</template>

src/components/Views/ControlCenter/WarningArea.vue

@@ -0,0 +1,4 @@
+/* 告警区 */
+<template>
+    
+</template>