首页布局

src/assets/style/main.css

@@ -9,5 +9,102 @@ body,
 .wrapper {
     width: 100%;
     height: 100%;
+    background-color: #000000;
     overflow: hidden;
-}
+}
+
+.problem-area {
+    position: relative;
+    height: 89vh;
+    background-color: #292929;
+    border-radius: 7px;
+    margin: 0px;
+    padding-top: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 10px;
+    box-sizing: border-box;
+}
+
+.gy-card-header {
+    position: relative;
+    height: 40px;
+    background-color: #292929;
+    color: white;
+    box-sizing: border-box;
+}
+
+.gy-card-content-89 {
+    position: relative;
+    height: calc(89vh - 50px);
+    background-color: #000000;
+    color: white;
+    box-sizing: border-box;
+    border-radius: 7px;
+}
+
+.gy-card-content-44 {
+    position: relative;
+    height: calc(44vh - 50px);
+    background-color: #000000;
+    color: white;
+    box-sizing: border-box;
+    border-radius: 7px;
+}
+.gy-card-content-37 {
+    position: relative;
+    height: calc(37vh - 50px);
+    background-color: #000000;
+    color: white;
+    box-sizing: border-box;
+    border-radius: 7px;
+}
+.gy-card-content-25 {
+    position: relative;
+    height: calc(25vh - 50px);
+    background-color: #000000;
+    color: white;
+    box-sizing: border-box;
+    border-radius: 7px;
+}
+
+.gy-card-circle-green {
+    position: relative;
+    top: 10px;
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    background-color: #008000;
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+}
+
+.gy-card-circle-yellow {
+    position: relative;
+    top: 10px;
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    background-color: #ffff00;
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+}
+
+.gy-card-title {
+    position: relative;
+    top: 10px;
+    left: 10px;
+}
+
+.gy-card-decoration01 {
+    position: absolute;
+    right: 80px;
+}
+
+.gy-card-decoration02 {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}

src/components/CenterPage.vue

@@ -1,57 +1,77 @@
 /* 中间页面 */
 <template>
-    <div class='status-bar'>
-        <el-row :gutter="20">
+    <div class='center-bar'>
+        <el-row :gutter="10">
             <el-col :span="8">
                 <ProblemArea/>
             </el-col>
             <el-col :span="8">
-                <el-row><el-col :span="24">
-                    <CheckArea/>
-                </el-col></el-row>
-                <el-row><el-col :span="24">
-                    <ControlArea/>
-                </el-col></el-row>
+                <el-row>
+                    <el-col :span="24">
+                        <CheckArea/>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="24">
+                        <ControlArea/>
+                    </el-col>
+                </el-row>
             </el-col>
             <el-col :span="8">
-                <div>
-                    <el-row><el-col :span="24">
+                <el-row>
+                    <el-col :span="24">
                         <RecommendedArea/>
-                    </el-col></el-row>
-                    <el-row><el-col :span="24">
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="24">
                         <LabelArea/>
-                    </el-col></el-row>
-                    <el-row><el-col :span="24">
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="24">
                         <AlarmArea/>
-                    </el-col></el-row>
-                </div>
+                    </el-col>
+                </el-row>
             </el-col>
         </el-row>
     </div>
 </template>
 <script>
-import AlarmArea from './area/AlarmArea.vue'
-import CheckArea from './area/CheckArea.vue'
-import ControlArea from './area/ControlArea.vue'
-import LabelArea from './area/LabelArea.vue'
-import ProblemArea from './area/ProblemArea.vue'
-import RecommendedArea from './area/RecommendedArea.vue'
+    import AlarmArea from './area/AlarmArea.vue'
+    import CheckArea from './area/CheckArea.vue'
+    import ControlArea from './area/ControlArea.vue'
+    import LabelArea from './area/LabelArea.vue'
+    import ProblemArea from './area/ProblemArea.vue'
+    import RecommendedArea from './area/RecommendedArea.vue'
 
-export default {
-    components: {
-        AlarmArea,
-        CheckArea,
-        ControlArea,
-        LabelArea,
-        ProblemArea,
-        RecommendedArea
+    export default {
+        components: {
+            AlarmArea,
+            CheckArea,
+            ControlArea,
+            LabelArea,
+            ProblemArea,
+            RecommendedArea
+        }
     }
-}
 </script>
 
 <style scoped>
-    .status-bar {
+    .center-bar {
+        position: relative;
+        box-sizing: border-box;
         height: 91vh;
-        background-color: blue;
+        background-color: #000000;
+        padding-top: 10px;
+        padding-left: 5px;
+        padding-right: 5px;
+        padding-bottom: 5px;
+        margin-top: 0;
+        margin-right: 0;
+        margin-bottom: 3px;
+        margin-left: 0;
+        display: flex;
+        flex-direction: column;
     }
 </style>

src/components/StatusBar.vue

@@ -8,10 +8,10 @@
 <style scoped>
 .status-bar{
     height: 4vh;
-    background-color:black;
-    
+    background-color:#191919;
+
     margin-bottom: 0;
     margin-left: 0;
     margin-right: 0;
 }
-</style>
+</style>

src/components/TitleBar.vue

@@ -8,7 +8,9 @@
 <style scoped>
 .title-bar{
     height: 5vh;
-    background-color: aqua;
-    margin: 0;
+    background-color: #000000;
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 0;
 }
-</style>
+</style>

src/components/area/AlarmArea.vue

@@ -1,23 +1,28 @@
 /* 告警区 */
 <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 class="gy-card-header">
+            <div class="gy-card-circle-green"></div>
+            <span class="gy-card-title">告警区</span>
+            <img class="gy-card-decoration01" src="../../assets/img/controlcenter/decoration01.png">
+            <img class="gy-card-decoration02" src="../../assets/img/controlcenter/decoration02.png">
+        </div>
+        <div class="gy-card-content-25">
+            动态内容
+        </div>
     </div>
 </template>
 
 <style scoped>
     .alarm-area {
-        height: 30vh;
-        background-color: blue;
+        position: relative;
+        height: 25vh;
+        margin-top: 10px;
+        background-color: #292929;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
     }
 </style>

src/components/area/CheckArea.vue

@@ -1,23 +1,29 @@
 /* 校验区 */
 <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 class="gy-card-header">
+            <div class="gy-card-circle-green"></div>
+            <span class="gy-card-title">校验区</span>
+            <img class="gy-card-decoration01" src="../../assets/img/controlcenter/decoration01.png">
+            <img class="gy-card-decoration02" src="../../assets/img/controlcenter/decoration02.png">
+        </div>
+        <div class="gy-card-content-44">
+            动态内容
+        </div>
     </div>
 </template>
 
 <style scoped>
     .check-area {
-        height: 45vh;
-        background-color: blue;
+        position: relative;
+        height: 44vh;
+        background-color: #292929;
+        border-radius: 7px;
+        margin: 0px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
     }
 </style>

src/components/area/ControlArea.vue

@@ -1,23 +1,30 @@
 /* 控制区 */
 <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 class="gy-card-header">
+            <div class="gy-card-circle-green"></div>
+            <span class="gy-card-title">控制区</span>
+            <img class="gy-card-decoration01" src="../../assets/img/controlcenter/decoration01.png">
+            <img class="gy-card-decoration02" src="../../assets/img/controlcenter/decoration02.png">
+        </div>
+        <div class="gy-card-content-44">
+            动态内容
+        </div>
     </div>
 </template>
 
 <style scoped>
     .control-area {
-        height: 45vh;
-        background-color: blue;
+        position: relative;
+        width: 100%;
+        height: 44vh;
+        background-color: #292929;
+        border-radius: 7px;
+        margin-top: 10px;
+        padding-top: 0;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
     }
 </style>

src/components/area/LabelArea.vue

@@ -1,23 +1,28 @@
 /* 标注区 */
 <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 class="gy-card-header">
+            <div class="gy-card-circle-yellow"></div>
+            <span class="gy-card-title">标注区</span>
+            <img class="gy-card-decoration01" src="../../assets/img/controlcenter/decoration01.png">
+            <img class="gy-card-decoration02" src="../../assets/img/controlcenter/decoration02.png">
+        </div>
+        <div class="gy-card-content-25">
+            动态内容
+        </div>
     </div>
 </template>
 
 <style scoped>
     .label-area {
-        height: 30vh;
-        background-color: blue;
+        position: relative;
+        height: 25vh;
+        margin-top: 10px;
+        background-color: #292929;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
     }
 </style>

src/components/area/ProblemArea.vue

@@ -1,23 +1,15 @@
 /* 问题区 */
 <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 class="gy-card-header">
+            <div class="gy-card-circle-green"></div>
+            <span class="gy-card-title">问题区</span>
+            <img class="gy-card-decoration01" src="../../assets/img/controlcenter/decoration01.png">
+            <img class="gy-card-decoration02" src="../../assets/img/controlcenter/decoration02.png">
+        </div>
+        <div class="gy-card-content-89">
+            动态内容
+        </div>
     </div>
 </template>
 
-<style scoped>
-    .problem-area {
-        height: 91vh;
-        background-color: blue;
-    }
-</style>

src/components/area/RecommendedArea.vue

@@ -1,23 +1,27 @@
 /* 推荐区 */
 <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 class="gy-card-header">
+            <div class="gy-card-circle-green"></div>
+            <span class="gy-card-title">推荐区</span>
+            <img class="gy-card-decoration01" src="../../assets/img/controlcenter/decoration01.png">
+            <img class="gy-card-decoration02" src="../../assets/img/controlcenter/decoration02.png">
+        </div>
+        <div class="gy-card-content-37">
+            动态内容
+        </div>
     </div>
 </template>
 
 <style scoped>
     .recommended-area {
-        height: 30vh;
-        background-color: blue;
+        position: relative;
+        height: 37vh;
+        background-color: #292929;
+        border-radius: 7px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+        box-sizing: border-box;
     }
 </style>

src/components/area/gy-card.vue

@@ -0,0 +1,71 @@
+/* 自定义tabs */
+<template>
+    <transition>
+        <div class="gy-tab" :class="typeClass">
+            <div class="gy-tab-success" @click="showDoThing()">{{title}}</div>
+            <div>
+                <slot></slot>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+    /**
+     * todo 鼠标的焦点事件
+     * 放大,拖动
+     */
+    export default {
+        name: 'gy-card',
+        props: {
+            // 标题
+            title: {
+                type: String,
+                default: '',
+                required: true
+            },
+            // type 会有 success warning error 三种类型,用来控制显示样式
+            type: {
+                type: String,
+                default: 'success'
+            }
+        },
+        data() {
+            return {
+                visible: true
+            };
+        },
+        methods: {
+            showDoThing() {
+                this.visible = false;
+            }
+        },
+        computed: {
+            //通过调用的type 来计算需要显示的class
+            typeClass() {
+                return `gy-tab--${this.type}`;
+            }
+        }
+    }
+</script>
+
+<style scoped="scoped">
+    .gy-tab {
+        margin: auto;
+    }
+
+    .gy-tab--success {
+        background: #f0f9eb;
+        color: cadetblue;
+    }
+
+    .gy-tab--warning {
+        background: #fdf6ec;
+        color: #e6a28b;
+    }
+
+    .gy-tab--error {
+        background: #fef0f0;
+        color: #f681b0;
+    }
+</style>

src/components/area/index.js

@@ -0,0 +1,6 @@
+import gyCard from './gy-card'
+
+gyCard.install = function (Vue) {
+    Vue.component(gyCard.name, gyCard)
+}
+export default gyCard

src/main.js

@@ -2,7 +2,9 @@ import { createApp } from 'vue'
 import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
 import App from './App.vue';
+import gyCard from './components/area';
 
 const app = createApp(App)
 app.use(ElementPlus)
+app.use(gyCard)
 app.mount('#app')