提交代码

2025-04-12 14:54:02 +08:00
parent f7761e99a1
commit a2e89f5ea1
599 changed files with 194300 additions and 0 deletions
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -0,0 +1,129 @@
+<template>
+  <div class="homeBox">
+    <!-- 头部 -->
+    <Head></Head>
+    <!-- 内容 -->
+    <div class="home-contant">
+      <!-- 左边 -->
+      <div class="home-aside asideL">
+        <div class="asideL-top">
+          <div class="common-title">数据采集</div>
+          <div class="comom-cnt">
+            <Collection></Collection>
+          </div>
+        </div>
+        <div class="asideL-bottom">
+          <div class="common-title">预警信息</div>
+          <div class="comom-cnt">
+            <Warning></Warning>
+          </div>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <div class="home-middle">
+        <Mapecharts></Mapecharts>
+      </div>
+      <!-- 右边 -->
+      <div class="home-aside asideR">
+        <div class="asideL-top">
+          <div class="common-title">值班备勤</div>
+          <div class="comom-cnt">
+            <BeOnDuty></BeOnDuty>
+          </div>
+        </div>
+        <div class="asideL-bottom">
+          <div class="common-title">预警统计分析</div>
+          <div class="comom-cnt">
+            <WanringAnyse></WanringAnyse>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Head from './layout/head.vue'
+import Collection from './components/collection.vue'
+import Warning from './components/warning.vue'
+import BeOnDuty from './components/beonDuty.vue'
+import WanringAnyse from './components/wanringAnyse.vue'
+import Mapecharts from './components/mapecharts.vue'
+import { ref } from 'vue';
+</script>
+
+<style lang="scss" scoped>
+.homeBox{
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  .home-contant{
+    display: flex;
+    position: absolute;
+    top: 70px;
+    width: 100%;
+    height: calc(100vh - 72px);
+    overflow: hidden;
+    z-index: 2;
+    .home-aside{
+      width: 442px;
+      height: 100%;
+    }
+    .home-middle{
+      flex: 1 0 0;
+      height: 100%;
+      background: url("~@/assets/images/bg01.png") no-repeat center center;
+      background-size: 100% 100%;
+      margin: 0 22px;
+    }
+  }
+  // 左边
+  .asideL{
+    padding-left: 10px;
+    box-sizing: border-box;
+    .asideL-top{
+      height: 60%;
+      background: url("~@/assets/images/border_L_T.png") no-repeat center center;
+      background-size: 100% 100%;
+    }
+    .asideL-bottom{
+      height: 40%;
+      background: url("~@/assets/images/border_L_T.png") no-repeat center center;
+      background-size: 100% 100%;
+    }
+  }
+  // 右边
+  .asideR{
+    padding-right: 10px;
+    box-sizing: border-box;
+    .asideL-top{
+      height: 40%;
+      background: url("~@/assets/images/border_R_T.png") no-repeat center center;
+      background-size: 100% 100%;
+    }
+    .asideL-bottom{
+      height: 60%;
+      background: url("~@/assets/images/border_R_B.png") no-repeat center center;
+      background-size: 100% 100%;
+    }
+  }
+
+  // 公用
+  .common-title{
+    padding: 0 54px;
+    box-sizing: border-box;
+    font-size: 22px;
+    font-family: 'YSBTH';
+    background: linear-gradient(0deg, #59A6F4 0%,#ffffff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .comom-cnt{
+    height: calc(100% - 30px);
+    padding: 4px 20px;
+    box-sizing: border-box;
+  }
+}
+
+
+</style>