73 lines
1.5 KiB
Vue
73 lines
1.5 KiB
Vue
|
<template>
|
|||
|
|
<view class="day-risk">
|
|||
|
|
<h2>日风险概况</h2>
|
|||
|
|
<view class="data-container">
|
|||
|
|
<view class="left-content">
|
|||
|
|
<text>本月风险数</text>
|
|||
|
|
<text>{{ monthNum }}</text>
|
|||
|
|
<text>累计总数： {{ monthAmount }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="left-right">
|
|||
|
|
<text>本周风险数</text>
|
|||
|
|
<text>{{ weekNum }}</text>
|
|||
|
|
<text>累计总数： {{ weekAmount }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
monthNum: 1420,
|
|||
|
|
monthAmount: 9520,
|
|||
|
|
weekNum: 320,
|
|||
|
|
weekAmount: 9820
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getRiskNumData() {}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.getRiskNumData()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.day-risk {
|
|||
|
|
.data-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
view {
|
|||
|
|
width: 49%;
|
|||
|
|
height: 180rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
text-align: left;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
text:nth-child(2) {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.left-content {
|
|||
|
|
background: url('../../../../static/images/workPlan/month_img.png') no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
}
|
|||
|
|
.left-right {
|
|||
|
|
background: url('../../../../static/images/workPlan/week_img.png') no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|