128 lines
2.2 KiB
Vue
128 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div class="main">
|
||
|
|
<!-- 四个角的装饰 -->
|
||
|
|
<div class="corner corner-top-left"></div>
|
||
|
|
<div class="corner corner-top-right"></div>
|
||
|
|
<div class="corner corner-bottom-left"></div>
|
||
|
|
<div class="corner corner-bottom-right"></div>
|
||
|
|
|
||
|
|
<div class="left">
|
||
|
|
<left></left>
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
<right></right>
|
||
|
|
</div>
|
||
|
|
<!-- 地图中心 -->
|
||
|
|
<div class="center">
|
||
|
|
<MapCenter />
|
||
|
|
</div>
|
||
|
|
<div class="bottom">
|
||
|
|
<bottom></bottom>
|
||
|
|
</div>
|
||
|
|
<top class="top"></top>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import left from "./left.vue";
|
||
|
|
import right from "./right.vue";
|
||
|
|
import bottom from "./bottom.vue";
|
||
|
|
import top from "./top.vue";
|
||
|
|
import MapCenter from "../cockpit/components/MapCenter.vue";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.main {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-image: url("../../assets/RiskWarning_img/遮罩层.png");
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.left {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 30%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 30%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 10px;
|
||
|
|
left: 30%;
|
||
|
|
width: 40%;
|
||
|
|
height: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top {
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
left: 30%;
|
||
|
|
width: 40%;
|
||
|
|
height: 15%;
|
||
|
|
// background-color: #15293B;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
// left: 25%;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 四个角的装饰
|
||
|
|
.corner {
|
||
|
|
position: absolute;
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
border: 2px solid #40a9ff;
|
||
|
|
z-index: 100;
|
||
|
|
pointer-events: none;
|
||
|
|
|
||
|
|
&.corner-top-left {
|
||
|
|
top: 10px;
|
||
|
|
left: 10px;
|
||
|
|
border-right: none;
|
||
|
|
border-bottom: none;
|
||
|
|
border-top-left-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.corner-top-right {
|
||
|
|
top: 10px;
|
||
|
|
right: 10px;
|
||
|
|
border-left: none;
|
||
|
|
border-bottom: none;
|
||
|
|
border-top-right-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.corner-bottom-left {
|
||
|
|
bottom: 10px;
|
||
|
|
left: 10px;
|
||
|
|
border-right: none;
|
||
|
|
border-top: none;
|
||
|
|
border-bottom-left-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.corner-bottom-right {
|
||
|
|
bottom: 10px;
|
||
|
|
right: 10px;
|
||
|
|
border-left: none;
|
||
|
|
border-top: none;
|
||
|
|
border-bottom-right-radius: 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|