<template>
|
<div class="nuclearMiningCount">
|
<div class="label-box">一标三实核采</div>
|
<div class="total-box">
|
<div class="data-total">
|
<div class="common-title commonColor">数据总量:</div>
|
<div class="common-value totalColor">{{ dataObj.total }}</div>
|
</div>
|
<div class="disposeOf disposeOfColor">
|
<div class="common-title">已处置:</div>
|
<div class="common-value">{{ dataObj.disposeOf }}</div>
|
</div>
|
<div class="no-disposeOf no-disposeOfColor">
|
<div class="common-title">未处置:</div>
|
<div class="common-value">{{ dataObj.noDisposeOf }}</div>
|
</div>
|
</div>
|
<div class="count-box">
|
<div class="count-view">
|
<div class="common-left">
|
<div class="left">
|
<div class="top-label commonColor">疑似迁入数</div>
|
<div class="bottom-value commonVlueColor">256</div>
|
</div>
|
<div class="right">
|
<el-image :src="src"></el-image>
|
</div>
|
</div>
|
<div class="common-right">
|
<div class="left">
|
<div class="top-label commonColor">疑似迁出数</div>
|
<div class="bottom-value commonVlueColor">3</div>
|
</div>
|
<div class="right">
|
<el-image :src="src"></el-image>
|
</div>
|
</div>
|
</div>
|
<div class="count-view">
|
<div class="common-left">
|
<div class="left">
|
<div class="top-label commonColor">频繁夜归数</div>
|
<div class="bottom-value commonVlueColor">92</div>
|
</div>
|
<div class="right">
|
<el-image :src="src"></el-image>
|
</div>
|
</div>
|
<div class="common-right">
|
<div class="left">
|
<div class="top-label commonColor">昼伏夜出数</div>
|
<div class="bottom-value commonVlueColor">56</div>
|
</div>
|
<div class="right">
|
<el-image :src="src"></el-image>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
components: {},
|
props: {},
|
data() {
|
return {
|
dataObj: {
|
total: 256,
|
disposeOf: 254,
|
noDisposeOf: 2,
|
},
|
src: "/chongqingPublicSecurity/left-top-bg.png",
|
};
|
},
|
mounted() {},
|
watch: {},
|
methods: {},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.nuclearMiningCount {
|
width: 100%;
|
height: 100%;
|
background: rgba(3, 10, 14, 0.7);
|
border: 1px solid #194871;
|
.label-box {
|
height: 40px;
|
line-height: 40px;
|
padding: 0 30px;
|
font-size: 20px;
|
color: #01c2ff;
|
background: #20426a;
|
}
|
.total-box {
|
height: 50px;
|
display: flex;
|
align-items: center;
|
.data-total,
|
.disposeOf,
|
.no-disposeOf {
|
width: 33.3%;
|
margin-left: 30px;
|
display: flex;
|
align-items: center;
|
.common-title {
|
height: 50px;
|
line-height: 50px;
|
}
|
.common-value {
|
font-size: 22px;
|
margin-left: 10px;
|
font-weight: 700;
|
}
|
}
|
}
|
.count-box {
|
margin-left: 30px;
|
height: calc(100% - 140px);
|
.count-view {
|
margin-top: 15px;
|
margin-right: 30px;
|
height: 50%;
|
display: flex;
|
.common-left,
|
.common-right {
|
width: 100%;
|
height: 100%;
|
background: linear-gradient(to top, #00344b, #001d2f 30%);
|
border: 1px solid #0e9cff;
|
margin-right: 20px;
|
padding-left: 20px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
overflow: hidden;
|
.left {
|
.top-label {
|
margin-top: 10px;
|
font-size: 13px;
|
}
|
.bottom-value {
|
font-size: 30px;
|
font-weight: 700;
|
}
|
}
|
}
|
}
|
}
|
}
|
.commonColor {
|
color: #a8d6ff;
|
}
|
.totalColor {
|
color: #f0a205;
|
}
|
.disposeOfColor {
|
color: #1dd4ff;
|
}
|
.no-disposeOfColor {
|
color: #fa2808;
|
}
|
.commonVlueColor {
|
color: #21e8e1;
|
}
|
</style>
|
