73 lines
1.3 KiB
Vue
73 lines
1.3 KiB
Vue
<template>
|
|
<view>
|
|
<view class="box-rds over">
|
|
<view class="top_title">
|
|
{{ overviewData.name }}
|
|
</view>
|
|
<view class="flx flx_sb tb_head" >
|
|
<view class="tb_val" v-for="(v,i) in overviewData.tb_head" :key="i">
|
|
{{v}}
|
|
</view>
|
|
</view>
|
|
<view class="flx flx_sb flx_ac tb_content" v-for="(v,i) in overviewData.data" :key="i" style="margin-top: 40rpx;">
|
|
<view class="tb_val" style="font-size: 30rpx;">
|
|
{{v.name}}
|
|
</view>
|
|
<view class="tb_val" :style="'border-radius: 40rpx;padding: 4rpx;font-size:30rpx;color:'+v.color + ';background-color:'+v.bgColor">
|
|
{{v.value}}
|
|
</view>
|
|
<view class="tb_val" :style="'font-size:30rpx;color:'+v.color">
|
|
{{v.average}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"overview",
|
|
props:{
|
|
overviewData:Object,
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.box-rds {
|
|
background-color: #fff;
|
|
border-radius: 40rpx;
|
|
padding: 30rpx;
|
|
margin: 20rpx 100rpx 100rpx 100rpx;
|
|
|
|
}
|
|
|
|
.top_title {
|
|
font-size: 36rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.over{
|
|
.tb_head{
|
|
margin-top: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
.tb_val:nth-child(1){
|
|
width: 40%;
|
|
}
|
|
.tb_val:nth-child(2){
|
|
width: 40%;
|
|
text-align: center;
|
|
}
|
|
.tb_val:nth-child(3){
|
|
width: 20%;
|
|
text-align: right;
|
|
}
|
|
}
|
|
</style> |