|
|
@@ -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>
|