1.
This commit is contained in:
zw199166
128
components/fzlc-view/fzlc-view.vue
Normal file
128
components/fzlc-view/fzlc-view.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<view style="padding: 25rpx 20rpx; box-sizing: border-box;">
|
||||
<view style="display: flex; align-items: center; font-size: 28rpx;"><text>关键因素</text><text
|
||||
style="font-size: 24rpx; color: #070707; padding: 0rpx 10rpx; border-radius: 3rpx; background-color: #F2C369; margin-left: 10rpx;">19</text>
|
||||
</view>
|
||||
<view v-for="(item, index) in gj_list" :key="index" @click="item.show = !item.show"
|
||||
style="margin: 20rpx 0; background-color: #FAFAFC; border-radius: 10rpx; padding: 25rpx 20rpx; color: #2B2B2B;">
|
||||
<view style="display: flex; align-items: center; justify-content: space-between;">
|
||||
<view style="flex: 1; font-size: 26rpx;"><text>{{item.title}}</text><text
|
||||
style="font-size: 24rpx; color: #070707; padding: 0rpx 10rpx; border-radius: 3rpx; background-color: #F2C369; margin-left: 10rpx;">{{item.count}}</text>
|
||||
</view>
|
||||
<image v-if="item.show" style="width: 20rpx; height: 12rpx;"
|
||||
src="/pagesStock/static/icon/shangJiantou.png" mode="widthFix"></image>
|
||||
<image v-else style="width: 20rpx; height: 12rpx;" src="/pagesStock/static/icon/xiaJiantou.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<template v-if="item.show">
|
||||
<view v-for="child in item.count"
|
||||
style="margin: 20rpx 0; padding: 20rpx; box-sizing: border-box; background-color: white; border-radius: 10rpx; border: 1rpx solid #E7E7E7; color: #2B2B2B; font-weight: 500; font-size: 26rpx;">
|
||||
<view style="display: flex; align-items: center; justify-content: space-between;">
|
||||
<view>净息差</view>
|
||||
<view
|
||||
style="background-color: #345423; border-radius: 5rpx; color: white; padding: 0 10rpx; text-align: center; font-size: 20rpx;">
|
||||
负面</view>
|
||||
</view>
|
||||
<view style="display: flex;align-items: center; margin-top: 10rpx;">
|
||||
<view style="color: #345423; font-weight: bold; font-size: 30rpx; margin-right: 10rpx;">1.79亿元
|
||||
</view>
|
||||
<view
|
||||
style="display: flex; align-items: center; border: 1rpx solid #345423; padding: 0 10rpx; text-align: center; font-size: 20rpx; color: #345423; border-radius: 5rpx;">
|
||||
<image style="width: 11rpx; height: 15rpx; margin-right: 5rpx;"
|
||||
src="/pagesStock/static/icon/upArrow.png" mode="widthFix"></image>0.51%
|
||||
</view>
|
||||
</view>
|
||||
<view style="margin-top: 10rpx; color: #999999; font-size: 22rpx;">银行核心盈利能力指标，反映存贷利差水平</view>
|
||||
<view style="margin-top: 10rpx; color: #999999; font-size: 22rpx;">影响权重: 90</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<view style="display: flex; align-items: center; font-size: 28rpx;"><text>发展时间线</text>
|
||||
<text
|
||||
style="font-size: 24rpx; color: white; padding: 0rpx 10rpx; border-radius: 3rpx; background-color: #EC3440; margin-left: 10rpx;">正面
|
||||
19</text>
|
||||
<text
|
||||
style="font-size: 24rpx; color: white; padding: 0rpx 10rpx; border-radius: 3rpx; background-color: #345423; margin-left: 10rpx;">负面
|
||||
1</text>
|
||||
</view>
|
||||
<view v-for="item in 3" @click="clickAction"
|
||||
style="display: flex; margin: 20rpx 0; border-radius: 10rpx; box-sizing: border-box; color: #2B2B2B;">
|
||||
<view style="display: flex; flex-direction: column; align-items: center;">
|
||||
<image style="width: 30rpx; height: 30rpx; margin-top: 20rpx;"
|
||||
src="/pagesStock/static/icon/yuan_shang.png" mode="widthFix"></image>
|
||||
<view
|
||||
style="flex: 1; width: 1rpx; border-left: 1rpx dashed #EC3440; margin-top: 10rpx; margin-bottom: -30rpx;">
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
style="flex: 1; margin-left: 10rpx; background-color: #FAFAFC; padding: 24rpx 15rpx; border-radius: 10rpx; font-weight: 500;">
|
||||
<view>
|
||||
<text style="color: #2A2A2A; font-weight: bold; font-size: 24rpx; margin-right: 10rpx;">不良贷款率连续四年低于1.1%</text>
|
||||
<text
|
||||
style="background-color: #FFE7E9; color: #EC3440; padding: 5rpx 10rpx; border-radius: 5rpx; font-size: 20rpx; ">Achievement</text>
|
||||
</view>
|
||||
<view style="color: #999999; font-size: 20rpx; margin: 15rpx 0;">2025-06-30</view>
|
||||
<view style="color: #71675D; font-size: 22rpx;">2025年中报不良率1.06%，拨备覆盖率290%，资产质量保持股份行领先。</view>
|
||||
<view style="display: flex; align-items: center; margin-top: 30rpx;">
|
||||
<view style="color: #71675D; font-size: 22rpx; font-weight: 500;">影响度</view>
|
||||
<view
|
||||
style="width: 200rpx; height: 10rpx; background-color: #EFEFEF; border-radius: 5rpx; margin: 0 15rpx; overflow: hidden;">
|
||||
<view
|
||||
style="height: 100%; border-radius: 5rpx; background:linear-gradient(to right, #FF525D, #EC3440)"
|
||||
:style="{width: `${95}%`}">
|
||||
</view>
|
||||
</view>
|
||||
<view style="color: #71675D; font-size: 24rpx; font-weight: 500;">95</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "fzlc-view",
|
||||
data() {
|
||||
return {
|
||||
gj_list: [{
|
||||
title: '产量与销量指标',
|
||||
count: 8,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '价格与成本驱动',
|
||||
count: 3,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '市场与客户指标',
|
||||
count: 2,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '行业特定指标',
|
||||
count: 4,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '风险与异常指标',
|
||||
count: 2,
|
||||
show: false
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clickAction() {
|
||||
this.$emit('detail')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user