<template>
|
<div class="chongqing-layout">
|
<div class="top">
|
<div class="top-left">
|
<slot name="topBlock1"></slot>
|
</div>
|
<div class="top-middle">
|
<div class="chongqing-title">全景数据展示</div>
|
</div>
|
<div class="top-right">
|
<slot name="topBlock2"></slot>
|
</div>
|
</div>
|
<div class="bottom">
|
<div class="bottom-left">
|
<div class="left-top-Block">
|
<slot name="leftBlock1"></slot>
|
</div>
|
<div class="left-bottom-Block">
|
<slot name="leftBlock2"></slot>
|
</div>
|
</div>
|
<div class="bottom-middle">
|
<slot name="middleBlock1"></slot>
|
</div>
|
<div class="bottom-right">
|
<div class="right-top-Block">
|
<slot name="rightBlock1"></slot>
|
</div>
|
<div class="right-bottom-Block">
|
<slot name="rightBlock2"></slot>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script></script>
|
|
<style scoped lang="scss">
|
/** 上 */
|
// 上边固定高
|
$topBlockHeight: 60px;
|
// 上左区域宽
|
$topLeftWidth: 24%;
|
// 上中区域宽
|
$topMiddleWidth: 29%;
|
// 上右区域宽
|
$topRightWidth: 47%;
|
// 上 左右上边距
|
$topLeftMarginTop: 15px;
|
// 上 左右高度
|
$topLeftHeight: calc(100% - $topLeftMarginTop);
|
// 左右边距
|
$leftRightMargin: 40px;
|
// 左右内边距
|
$leftRightPadding: 30px;
|
// 下边距
|
$bottomMargin: 40px;
|
// 上下内边距
|
$topBottomPadding: 40px;
|
|
/** 下 */
|
// 下边固定高度
|
$bottomBlockHeight: calc(100vh - $topBlockHeight - $bottomMargin);
|
// 下左侧区域宽
|
$bottomLeftWidth: 29%;
|
// 中间区域宽
|
$bottomMiddleWidth: 42%;
|
// 右侧区域宽
|
$bottomRightWidth: 29%;
|
// 公共边距
|
$commonMargin: 40px;
|
// 下 左上高度
|
$leftTopBlockHeight: 30%;
|
// 下 左下高度
|
$leftBottomBlockHeight: calc(70% - $commonMargin);
|
// 下 中高度
|
$leftMiddleBlockHeight: calc(100% - $commonMargin);
|
// 下 右上高度
|
$rightTopBlockHeight: 48%;
|
// 下 右下高度
|
$rightBottomBlockHeight: calc(52% - $commonMargin);
|
|
$borderColor: #194871;
|
$borderWidth: 2px;
|
|
.chongqing-layout {
|
background-image: url("/chongqingPublicSecurity/chongqing_bg.png");
|
background-position-x: center;
|
background-repeat: no-repeat;
|
background-size: cover;
|
height: 100vh;
|
width: 100vw;
|
&.debug {
|
& > div {
|
border: 1px solid red;
|
& > div {
|
border: 1px solid red;
|
}
|
}
|
}
|
}
|
|
.top {
|
height: $topBlockHeight;
|
margin: 0 $leftRightMargin;
|
display: flex;
|
align-items: center;
|
background: rgba(3, 10, 14, 0.7);
|
.top-left {
|
width: $topLeftWidth;
|
height: $topLeftHeight;
|
margin-top: $topLeftMarginTop;
|
padding-left: $leftRightPadding;
|
border-top: $borderWidth solid $borderColor;
|
border-right: $borderWidth solid $borderColor;
|
}
|
.top-middle {
|
width: $topMiddleWidth;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-bottom: $borderWidth solid $borderColor;
|
.chongqing-title {
|
text-align: center;
|
font-size: 36px;
|
color: #e49d19;
|
font-weight: bold;
|
font-family: "Arial Negreta", "Arial Normal", "Arial";
|
background-clip: text;
|
-webkit-background-clip: text;
|
color: transparent;
|
background-image: linear-gradient(to top, #4ca0ee, #b5e7f3 70%);
|
}
|
}
|
|
.top-right {
|
width: $topRightWidth;
|
height: $topLeftHeight;
|
margin-top: $topLeftMarginTop;
|
border-top: $borderWidth solid $borderColor;
|
border-left: $borderWidth solid $borderColor;
|
padding-right: $leftRightPadding;
|
}
|
}
|
.bottom {
|
height: $bottomBlockHeight;
|
margin: 0 $leftRightMargin;
|
padding: $topBottomPadding $leftRightPadding;
|
display: flex;
|
.bottom-left {
|
width: $bottomLeftWidth;
|
}
|
.bottom-middle {
|
width: $bottomMiddleWidth;
|
height: $leftMiddleBlockHeight;
|
margin-right: $commonMargin;
|
}
|
.bottom-right {
|
width: $bottomRightWidth;
|
}
|
}
|
|
.left-top-Block {
|
height: $leftTopBlockHeight;
|
}
|
.left-bottom-Block {
|
height: $leftBottomBlockHeight;
|
}
|
|
.right-top-Block {
|
height: $rightTopBlockHeight;
|
}
|
.right-bottom-Block {
|
height: $rightBottomBlockHeight;
|
}
|
</style>
|
