首页布局

src/components/area/AlarmArea.vue

@@ -0,0 +1,23 @@
+/* 告警区 */
+<template>
+    <div class='alarm-area'>
+        <el-card class="box-card" style="height: 30vh">
+            <template #header>
+                <div class="card-header">
+                    <span>告警区</span>
+                    <el-button class="button" type="text">操作按钮</el-button>
+                </div>
+            </template>
+            <div v-for="o in 4" :key="o" class="text item">
+                {{'列表内容 ' + o }}
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<style scoped>
+    .alarm-area {
+        height: 30vh;
+        background-color: blue;
+    }
+</style>

src/components/area/CheckArea.vue

@@ -0,0 +1,23 @@
+/* 校验区 */
+<template>
+    <div class='check-area'>
+        <el-card class="box-card" style="height: 45vh">
+            <template #header>
+                <div class="card-header">
+                    <span>校验区</span>
+                    <el-button class="button" type="text">操作按钮</el-button>
+                </div>
+            </template>
+            <div v-for="o in 4" :key="o" class="text item">
+                {{'列表内容 ' + o }}
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<style scoped>
+    .check-area {
+        height: 45vh;
+        background-color: blue;
+    }
+</style>

src/components/area/ControlArea.vue

@@ -0,0 +1,23 @@
+/* 控制区 */
+<template>
+    <div class='control-area'>
+        <el-card class="box-card" style="height: 45vh">
+            <template #header>
+                <div class="card-header">
+                    <span>控制区</span>
+                    <el-button class="button" type="text">操作按钮</el-button>
+                </div>
+            </template>
+            <div v-for="o in 4" :key="o" class="text item">
+                {{'列表内容 ' + o }}
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<style scoped>
+    .control-area {
+        height: 45vh;
+        background-color: blue;
+    }
+</style>

src/components/area/LabelArea.vue

@@ -0,0 +1,23 @@
+/* 标注区 */
+<template>
+    <div class='label-area'>
+        <el-card class="box-card" style="height: 30vh">
+            <template #header>
+                <div class="card-header">
+                    <span>标注区</span>
+                    <el-button class="button" type="text">操作按钮</el-button>
+                </div>
+            </template>
+            <div v-for="o in 4" :key="o" class="text item">
+                {{'列表内容 ' + o }}
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<style scoped>
+    .label-area {
+        height: 30vh;
+        background-color: blue;
+    }
+</style>

src/components/area/ProblemArea.vue

@@ -0,0 +1,23 @@
+/* 问题区 */
+<template>
+    <div class='problem-area'>
+        <el-card class="box-card" style="height: 91vh">
+            <template #header>
+                <div class="card-header">
+                    <span>问题区</span>
+                    <el-button class="button" type="text">操作按钮</el-button>
+                </div>
+            </template>
+            <div v-for="o in 4" :key="o" class="text item">
+                {{'列表内容 ' + o }}
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<style scoped>
+    .problem-area {
+        height: 91vh;
+        background-color: blue;
+    }
+</style>

src/components/area/RecommendedArea.vue

@@ -0,0 +1,23 @@
+/* 推荐区 */
+<template>
+    <div class='recommended-area'>
+        <el-card class="box-card" style="height: 30vh">
+            <template #header>
+                <div class="card-header">
+                    <span>推荐区</span>
+                    <el-button class="button" type="text">操作按钮</el-button>
+                </div>
+            </template>
+            <div v-for="o in 4" :key="o" class="text item">
+                {{'列表内容 ' + o }}
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<style scoped>
+    .recommended-area {
+        height: 30vh;
+        background-color: blue;
+    }
+</style>