You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
1.8 KiB
81 lines
1.8 KiB
<template>
|
|
<div class="topLeft">
|
|
<dv-border-box-13>
|
|
<div class="box">
|
|
<dv-border-box-2 class="item">
|
|
<p class="active numFont">80%</p>
|
|
<p>首台准点率</p>
|
|
</dv-border-box-2>
|
|
<dv-border-box-2 class="item">
|
|
<p class="active numFont">86%</p>
|
|
<p>手术间利用率</p>
|
|
</dv-border-box-2>
|
|
<dv-border-box-2 class="item">
|
|
<p>总人数 <span class="numFont">400</span></p>
|
|
<p>进行中 <span class="numFont">180</span></p>
|
|
<p>待进行 <span class="numFont">220</span></p>
|
|
</dv-border-box-2>
|
|
<dv-border-box-2 class="item">
|
|
<p class="active numFont">80个</p>
|
|
<p>急诊患者</p>
|
|
</dv-border-box-2>
|
|
</div>
|
|
</dv-border-box-13>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.topLeft {
|
|
flex-basis: 32%;
|
|
.box {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
align-content: space-evenly;
|
|
padding: 2vh;
|
|
box-sizing: border-box;
|
|
.item {
|
|
flex-basis: 45%;
|
|
flex-shrink: 0;
|
|
height: 40%;
|
|
box-sizing: border-box;
|
|
padding: 3%;
|
|
:deep(.border-box-content) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
font-size: 2.3vh;
|
|
p {
|
|
height: 30%;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: 0.1vh;
|
|
font-size: 2.4vh;
|
|
span {
|
|
margin-left: 1vh;
|
|
color: aquamarine;
|
|
font-size: 2.6vh;
|
|
}
|
|
}
|
|
.active {
|
|
color: aquamarine;
|
|
font-size: 3.8vh;
|
|
letter-spacing: 0.3vh;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|