<template>
|
<div class="dashboard-layout">
|
<div class="dashboard-title">智能驾驶舱</div>
|
<div class="left">
|
<div class="left-header-block">
|
<slot name="leftBlock1"></slot>
|
</div>
|
<div class="left-bottom-block">
|
<div class="left-bottom-left-block">
|
<div class="left-bottom-top-block">
|
<slot name="leftBlock2"></slot>
|
</div>
|
<div class="left-bottom-middle-block">
|
<slot name="leftBlock3"></slot>
|
</div>
|
<div class="left-bottom-bottom-block">
|
<slot name="leftBlock4"></slot>
|
</div>
|
</div>
|
<div class="left-bottom-right-block">
|
<div class="right-bottom-top-block">
|
<slot name="leftBlock5"></slot>
|
</div>
|
<div class="right-bottom-bottom-block">
|
<slot name="leftBlock6"></slot>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right">
|
<div class="right-bg">
|
<div class="right-top-block">
|
<slot name="rightBlock1"></slot>
|
</div>
|
<div class="right-middle-block">
|
<slot name="rightBlock2"></slot>
|
</div>
|
<div class="right-bottom-block">
|
<slot name="rightBlock3"></slot>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script></script>
|
|
<style scoped lang="scss">
|
// 左侧区域宽
|
$leftWidth: 73%;
|
// 右侧区域宽
|
$rightWidth: 27%;
|
// 整体内边距
|
$layoutPadding: 12px;
|
// 上边固定高
|
$topBlockHeight: 100px;
|
// 左侧头部数据高度
|
$leftHeaderHeight: 8%;
|
// 左侧公共右边距
|
$leftMarginRight: 25px;
|
// 整体内容左边距
|
$leftMargin: 80px;
|
// 整体内容右边距
|
$rightMargin: 65px;
|
// 左侧布局块高度
|
$leftBlockHeight: calc(100vh - 245px);
|
// 右侧布局块高度
|
$rightBlockHeight: calc(100vh - 120px);
|
// 左下上边距
|
$leftBottomMarginTop: 40px;
|
// 左下左侧区域宽
|
$leftBottomLeftWidth: 37%;
|
// 左下右侧区域宽
|
$leftBottomRightWidth: 63%;
|
|
.dashboard-layout {
|
background-image: url("/cockpit-bg.jpg");
|
background-position-x: center;
|
background-repeat: no-repeat;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 100vh;
|
width: 100vw;
|
.dashboard-title {
|
width: 100%;
|
text-align: center;
|
position: absolute;
|
top: 10px;
|
font-size: 32px;
|
color: #01f5fe;
|
font-weight: 700;
|
font-family: "Arial Negreta", "Arial Normal", "Arial";
|
}
|
&.debug {
|
& > div {
|
border: 1px solid red;
|
& > div {
|
border: 1px solid red;
|
}
|
}
|
}
|
}
|
|
.left {
|
width: $leftWidth;
|
margin-left: $leftMargin;
|
}
|
.right {
|
width: $rightWidth;
|
margin-right: $rightMargin;
|
}
|
|
.left,
|
.right {
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.left-header-block {
|
height: $leftHeaderHeight;
|
margin-top: $topBlockHeight;
|
padding-right: $leftMarginRight;
|
}
|
.left-bottom-block {
|
margin-top: $leftBottomMarginTop;
|
height: $leftBlockHeight;
|
display: flex;
|
.left-bottom-left-block {
|
width: $leftBottomLeftWidth;
|
height: 100%;
|
.left-bottom-top-block {
|
height: 41%;
|
}
|
.left-bottom-middle-block {
|
height: 25%;
|
}
|
.left-bottom-bottom-block {
|
height: 34%;
|
}
|
}
|
.left-bottom-right-block {
|
width: $leftBottomRightWidth;
|
height: 100%;
|
padding-right:20px;
|
.right-bottom-top-block {
|
height: 60%;
|
}
|
.right-bottom-bottom-block {
|
height: 40%;
|
}
|
}
|
}
|
|
.right-bg {
|
margin-top: $topBlockHeight;
|
height: $rightBlockHeight;
|
}
|
.right-top-block {
|
height: 30%;
|
}
|
.right-middle-block {
|
height: 35%;
|
}
|
.right-bottom-block {
|
height: 35%;
|
}
|
</style>
|
