forked from integrated_whb/integrated_whb_vue
89 lines
2.1 KiB
Vue
89 lines
2.1 KiB
Vue
<template>
|
|
<div class="main_container p-20" id="main_container">
|
|
<header-view />
|
|
<div class="main_content">
|
|
<div class="left">
|
|
<risk-management />
|
|
<troubleshooting-type />
|
|
<user-usage />
|
|
<task-processing />
|
|
</div>
|
|
<div class="center">
|
|
<situation />
|
|
<div class="flex">
|
|
<assignment-type class="mr-5" />
|
|
<video-center class="ml-5" />
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<hidden-danger-situation />
|
|
<full-staff-training />
|
|
<exam-statistics />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onBeforeUnmount, onMounted } from "vue";
|
|
import autofit from "autofit.js";
|
|
import HeaderView from "./components/header.vue";
|
|
import RiskManagement from "./components/risk_management.vue";
|
|
import TroubleshootingType from "./components/troubleshooting_type.vue";
|
|
import UserUsage from "./components/user_usage.vue";
|
|
import TaskProcessing from "./components/task_processing.vue";
|
|
import Situation from "./components/situation.vue";
|
|
import AssignmentType from "./components/assignment_type.vue";
|
|
import VideoCenter from "./components/video_center.vue";
|
|
import HiddenDangerSituation from "./components/hidden_danger_situation.vue";
|
|
import FullStaffTraining from "./components/full_staff_training.vue";
|
|
import ExamStatistics from "./components/exam_statistics.vue";
|
|
|
|
onMounted(() => {
|
|
autofit.init({
|
|
dh: document.querySelector("#main_container").offsetHeight,
|
|
dw: 1920,
|
|
el: "#main_container",
|
|
resize: true,
|
|
});
|
|
});
|
|
onBeforeUnmount(() => {
|
|
autofit.off();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main_container {
|
|
background-image: url("/src/assets/images/bi/bg.jpg");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
height: 100vh;
|
|
font-size: 14px;
|
|
|
|
.main_content {
|
|
margin-top: -50px;
|
|
display: flex;
|
|
|
|
.left {
|
|
flex-basis: 25%;
|
|
}
|
|
|
|
.center {
|
|
flex-basis: 50%;
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
|
|
.flex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
flex-basis: 25%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|