78 lines
1.5 KiB
Vue
78 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 {
|
||
h2 {
|
||
margin: 20rpx 0;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.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>
|