CNCEC_APP/pages/index/board/qms/starLevelCard.vue

139 lines
3.1 KiB
Vue
Raw Permalink Normal View History

2026-03-25 14:54:15 +08:00
<template>
<ChartCard margin="30rpx 0 0 0" title="星级标准化工地建设">
<view class="star-level">
<view class="star-level-box u-flex">
<view class="star-level-tit">五星</view>
<view class="u-flex star-level-box_inner" style="width: calc(100% - 48rpx);">
<view class="star-level-row">
<view class="star-level_lab">
创建数
</view>
<view class="star-level_num">
59
</view>
</view>
<view class="star-level-row">
<view class="star-level_lab">
企业自评价达标数
</view>
<view class="star-level_num">
59
</view>
</view>
<view class="star-level-row">
<view class="star-level_lab">
集团验收达标数
</view>
<view class="star-level_num">
59
</view>
</view>
</view>
</view>
<view class="star-level-box u-flex u-margin-top-30 u-margin-bottom-30">
<view class="star-level-tit">四星</view>
<view class="u-flex star-level-box_inner" style="width: calc(100% - 48rpx);">
<view class="star-level-row">
<view class="star-level_lab">
创建数
</view>
<view class="star-level_num">
59
</view>
</view>
<view class="star-level-row">
<view class="star-level_lab">
企业自评价达标数
</view>
<view class="star-level_num">
59
</view>
</view>
<view class="star-level-row">
<view class="star-level_lab">
集团验收达标数
</view>
<view class="star-level_num">
59
</view>
</view>
</view>
</view>
<view class="star-level-box u-flex">
<view class="star-level-tit">三星</view>
<view class="u-flex star-level-box_inner" style="width: calc(100% - 48rpx);">
<view class="star-level-row">
<view class="star-level_lab">
创建数
</view>
<view class="star-level_num">
59
</view>
</view>
<view class="star-level-row">
<view class="star-level_lab">
企业自评价达标数
</view>
<view class="star-level_num">
59
</view>
</view>
<view class="star-level-row">
<view class="star-level_lab">
集团验收达标数
</view>
<view class="star-level_num">
59
</view>
</view>
</view>
</view>
</view>
</ChartCard>
</template>
<script setup>
import ChartCard from '@/components/chartCard.vue'
</script>
<style lang="scss">
.star-level{
&-box{
&_inner{
padding: 0 30rpx;
display: grid;
grid-template-columns: 100rpx 1fr 1fr;
column-gap: 20rpx;
}
}
&-tit{
padding: 12rpx;
width: 48rpx;
height: 82rpx;
text-align: center;
line-height: 30rpx;
font-size: 24rpx;
background: linear-gradient(to right, #1e5ca3, #3094ff);
color: #ffffff;
border-radius: 6rpx;
}
&_lab{
font-size: 20rpx;
color: #999999;
}
&_num{
font-size: 28rpx;
color: #333333;
}
&-row{
height: 100rpx;
padding: 10rpx;
flex: 1;
background-color: #F7FBFE;
display: flex;flex-direction: column;
justify-content: space-between;
align-items: center;
}
}
</style>