129 lines
2.8 KiB
Vue
129 lines
2.8 KiB
Vue
<route lang="json5">
|
|
{
|
|
style: {
|
|
navigationBarTitleText: '风险预警',
|
|
navigationBarBackgroundColor: '#fff',
|
|
navigationBarTextStyle: 'black',
|
|
},
|
|
}
|
|
</route>
|
|
|
|
<template>
|
|
<view class="risk-page">
|
|
<view class="list-wrap">
|
|
<view v-for="item in riskList" :key="item.id" class="risk-card">
|
|
<view class="left-line" :class="item.level"></view>
|
|
<view class="content">
|
|
<view class="head">
|
|
<text class="title">{{ item.title }}</text>
|
|
<text class="time">{{ item.time }}</text>
|
|
</view>
|
|
<view class="desc">{{ item.desc }}</view>
|
|
<view class="foot">
|
|
<view class="tag-box">
|
|
<text class="bank">{{ item.bankName }}</text>
|
|
<text class="level-tag" :class="item.level">{{ item.levelText }}</text>
|
|
</view>
|
|
<wd-button size="small" type="primary" plain>处置</wd-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
|
|
const riskList = ref([
|
|
{
|
|
id: 1,
|
|
title: '信贷逾期率超标',
|
|
desc: '当前逾期率达2.5%，超过监管红线',
|
|
bankName: '某某农村信用社',
|
|
time: '10:30',
|
|
level: 'high',
|
|
levelText: '高风险'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '大额交易异常',
|
|
desc: '检测到单笔超大额资金流向敏感行业',
|
|
bankName: '某某商业银行',
|
|
time: '昨日',
|
|
level: 'medium',
|
|
levelText: '中风险'
|
|
},
|
|
])
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.risk-page {
|
|
min-height: 100vh;
|
|
background: #f5f7fa;
|
|
padding: 24rpx 32rpx;
|
|
}
|
|
|
|
.risk-card {
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02);
|
|
|
|
.left-line {
|
|
width: 8rpx;
|
|
background: #ccc;
|
|
|
|
&.high { background: #d32f2f; }
|
|
&.medium { background: #f57c00; }
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
|
|
.title { font-size: 30rpx; font-weight: 600; color: #333; }
|
|
.time { font-size: 24rpx; color: #999; }
|
|
}
|
|
|
|
.desc {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.foot {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-top: 1rpx solid #f5f5f5;
|
|
padding-top: 20rpx;
|
|
|
|
.tag-box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.bank { font-size: 24rpx; color: #666; margin-right: 16rpx; }
|
|
.level-tag {
|
|
font-size: 20rpx;
|
|
padding: 2rpx 8rpx;
|
|
border-radius: 4rpx;
|
|
|
|
&.high { background: #fce4ec; color: #d32f2f; }
|
|
&.medium { background: #FFF3E0; color: #f57c00; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|