<template>
|
<el-row style="align-items: end; gap: 8px">
|
<div class="tag">
|
<div>
|
<span class="num-big">10</span>
|
<span class="num-small red">
|
24%
|
<el-icon>
|
<CaretTop />
|
</el-icon>
|
</span>
|
</div>
|
<div class="statistic-footer red">
|
<span>高风险</span>
|
</div>
|
</div>
|
<div class="tag">
|
<div>
|
<span style="font-size: 20px">12</span>
|
<span class="num-small yellow">
|
24%
|
<el-icon>
|
<CaretTop />
|
</el-icon>
|
</span>
|
</div>
|
<div class="statistic-footer yellow">
|
<span>中风险</span>
|
</div>
|
</div>
|
<div class="tag">
|
<div>
|
<span style="font-size: 20px">5</span>
|
<span class="num-small green">
|
48%
|
<el-icon>
|
<CaretTop />
|
</el-icon>
|
</span>
|
</div>
|
<div class="statistic-footer green">
|
<span>低风险</span>
|
</div>
|
</div>
|
</el-row>
|
</template>
|
<script></script>
|
<style scoped>
|
.tag {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.num-big {
|
font-size: 36px;
|
}
|
|
.num-small {
|
font-size: 12px;
|
}
|
|
.statistic-footer {
|
/* background-color: #ffd100; */
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
flex-wrap: wrap;
|
font-size: 12px;
|
color: var(--el-text-color-regular);
|
/* margin-top: 16px; */
|
}
|
|
.green {
|
color: #67c23a;
|
}
|
|
.red {
|
color: #f56c6c;
|
}
|
|
.yellow {
|
color: #e6a23c;
|
}
|
</style>
|
