feat: 保卫保密总览新建文件

src/views/security-confidentiality/overview/Overview.vue

@@ -1,7 +1,86 @@
 <template>
-  <div> overview </div>
+  <div class="security-confidentiality-overview">
+    <div class="left-container">
+      <div class="left-top">
+        <OuterPerson class="outer-person" />
+        <VehicleManagement class="vehicle-management" />
+      </div>
+      <ConfidentialityPosition class="confidentiality-position" />
+    </div>
+    <div class="right-container">
+      <RegulationAndNotice class="regulation-and-notice" />
+      <SecurityPosition class="security-position" />
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import OuterPerson from './components/OuterPerson.vue';
+  import VehicleManagement from './components/VehicleManagement.vue';
+  import RegulationAndNotice from './components/RegulationAndNotice.vue';
+  import ConfidentialityPosition from './components/ConfidentialityPosition.vue';
+  import SecurityPosition from './components/SecurityPosition.vue';
+</script>
 
-<style scoped></style>
+<style scoped lang="scss">
+  .security-confidentiality-overview {
+    width: 100%;
+    height: 100%;
+    display: flex;
+  }
+
+  .left-container {
+    width: 70%;
+    height: 100%;
+    margin-right: 10px;
+
+    .left-top {
+      width: 100%;
+      height: 254px;
+      margin-bottom: 10px;
+      display: flex;
+
+      .outer-person {
+        width: 50%;
+        height: 100%;
+        background-color: #fff;
+        border-radius: 4px;
+        margin-right: 10px;
+      }
+
+      .vehicle-management {
+        width: 50%;
+        height: 100%;
+        background-color: #fff;
+        border-radius: 4px;
+      }
+    }
+
+    .confidentiality-position {
+      width: 100%;
+      height: calc(100% - 254px - 10px);
+      background-color: #fff;
+      border-radius: 4px;
+    }
+  }
+
+  .right-container {
+    width: calc(100% - 70% - 10px);
+    height: 100%;
+
+    .regulation-and-notice {
+      width: 100%;
+      height: 254px;
+      background-color: #fff;
+      border-radius: 4px;
+      margin-bottom: 10px;
+    }
+
+    .security-position {
+      width: 100%;
+      height: calc(100% - 254px - 10px);
+      background-color: #fff;
+      border-radius: 4px;
+    }
+  }
+</style>

src/views/security-confidentiality/overview/components/ConfidentialityPosition.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="outer-person-container">
+    <div class="container-title">
+      <span class="line"></span>
+      <span class="title">保密要害部位监控</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+  .container-title {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: #000000;
+
+    .line {
+      width: 3px;
+      height: 16px;
+      background: #1777ff;
+      margin-right: 10px;
+    }
+
+    .title {
+      margin-right: 12px;
+    }
+  }
+
+  .outer-person-container {
+    width: 100%;
+    height: 100%;
+    padding-top: 14px;
+  }
+</style>

src/views/security-confidentiality/overview/components/OuterPerson.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="outer-person-container">
+    <div class="container-title">
+      <span class="line"></span>
+      <span class="title">外部人员管理</span>
+    </div>
+    <div class="chart-container"></div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+  .container-title {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: #000000;
+
+    .line {
+      width: 3px;
+      height: 16px;
+      background: #1777ff;
+      margin-right: 10px;
+    }
+
+    .title {
+      margin-right: 12px;
+    }
+  }
+
+  .outer-person-container {
+    width: 100%;
+    height: 100%;
+    padding-top: 14px;
+  }
+
+  .chart-container {
+    width: 100%;
+    height: calc(100% - 24px);
+  }
+</style>

src/views/security-confidentiality/overview/components/RegulationAndNotice.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="outer-person-container">
+    <div class="container-title">
+      <span class="line"></span>
+      <span class="title">管理规定与通知</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+  .container-title {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: #000000;
+
+    .line {
+      width: 3px;
+      height: 16px;
+      background: #1777ff;
+      margin-right: 10px;
+    }
+
+    .title {
+      margin-right: 12px;
+    }
+  }
+
+  .outer-person-container {
+    width: 100%;
+    height: 100%;
+    padding-top: 14px;
+  }
+</style>

src/views/security-confidentiality/overview/components/SecurityPosition.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="outer-person-container">
+    <div class="container-title">
+      <span class="line"></span>
+      <span class="title">治安重点部位监控</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+  .container-title {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: #000000;
+
+    .line {
+      width: 3px;
+      height: 16px;
+      background: #1777ff;
+      margin-right: 10px;
+    }
+
+    .title {
+      margin-right: 12px;
+    }
+  }
+
+  .outer-person-container {
+    width: 100%;
+    height: 100%;
+    padding-top: 14px;
+  }
+</style>

src/views/security-confidentiality/overview/components/VehicleManagement.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="outer-person-container">
+    <div class="container-title">
+      <span class="line"></span>
+      <span class="title">车辆进入管理</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+  .container-title {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: #000000;
+
+    .line {
+      width: 3px;
+      height: 16px;
+      background: #1777ff;
+      margin-right: 10px;
+    }
+
+    .title {
+      margin-right: 12px;
+    }
+  }
+
+  .outer-person-container {
+    width: 100%;
+    height: 100%;
+    padding-top: 14px;
+  }
+</style>