106 lines
3.6 KiB
Vue
106 lines
3.6 KiB
Vue
<template>
|
|
<view class="ywjg_list">
|
|
<view>
|
|
<view style="margin: 25rpx 20rpx; color: #2B2B2B; font-size: 28rpx; font-weight: bold;">业务结构分析</view>
|
|
<view v-for="(item, index) in businessStructureList" :key="index" class="ywjg_item_1">
|
|
<view style="display: flex; align-items: center;">
|
|
<view style="font-size: 28rpx; font-weight: bold; margin-right: 10rpx;">
|
|
{{item.business_name}}
|
|
</view>
|
|
<view v-if="item.is_hexin"
|
|
style="background-color: #F2C369; border-radius: 5rpx; font-size: 20rpx; padding: 0 5rpx;">
|
|
核心业务</view>
|
|
</view>
|
|
<view class="flex between" style="font-weight: 500;">
|
|
<view class="flex" style="color: #F2C369; font-size: 20rpx;">
|
|
<view style="border: 1rpx solid #F2C369; border-radius: 5rpx; padding: 0 10rpx;">
|
|
营收占比:{{item.financial_metrics.revenue_ratio}}%</view>
|
|
<view v-if="item.financial_metrics.gross_margin"
|
|
style="border: 1rpx solid #F2C369; border-radius: 5rpx; padding: 0 10rpx; margin-left: 10rpx;">
|
|
毛利率:{{item.financial_metrics.gross_margin}}%</view>
|
|
<view v-else
|
|
style="border: 1rpx solid #F2C369; border-radius: 5rpx; padding: 0 10rpx; margin-left: 10rpx;">
|
|
毛利率:-</view>
|
|
</view>
|
|
<view>
|
|
<view style="color: #999999; font-size: 24rpx;">营业收入</view>
|
|
<view style="font-weight: bold; font-size: 30rpx; color: #BB8520; margin-top: 10rpx;">{{item.revenue}}{{item.revenue_unit}}</view>
|
|
</view>
|
|
</view>
|
|
<view style="display: flex;">
|
|
<view v-if="item.growth_metrics.revenue_growth" :class="'growthRate '+(getRateUpOrDown(item.growth_metrics.revenue_growth)?'down':'up')">
|
|
增长:{{item.growth_metrics.revenue_growth}}%
|
|
</view>
|
|
<view v-else class="growthRate down">增长:-</view>
|
|
</view>
|
|
</view>
|
|
<view style="margin: 25rpx 20rpx; color: #2B2B2B; font-size: 28rpx; font-weight: bold;">业务板块详情</view>
|
|
<view style="font-weight: 500;">
|
|
<view v-for="(item,index) in businessSegmentList" :key="index"
|
|
style="background-color: #FAFAFC; color: #2B2B2B; font-size: 22rpx; margin: 20rpx; background-color: #FAFAFC; border-radius: 10rpx; padding: 25rpx 20rpx;">
|
|
<view style="font-size: 24rpx;">{{item.segment_name}}</view>
|
|
<view style="color: #BB8520; font-weight: bold; margin: 10rpx 0;">业务描述</view>
|
|
<view style="color: #71675D;">{{item.segment_description}}</view>
|
|
<view style="color: #BB8520; font-weight: bold; margin: 10rpx 0;">竞争地位</view>
|
|
<view style="color: #71675D;">{{item.competitive_position}}</view>
|
|
<view style="color: #BB8520; font-weight: bold; margin: 10rpx 0;">未来潜力</view>
|
|
<view style="color: #71675D;">{{item.future_potential}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getRateUpOrDown } from '@/utils/util';
|
|
|
|
export default {
|
|
name: "ywjg-view",
|
|
data() {
|
|
return {
|
|
getRateUpOrDown:getRateUpOrDown
|
|
};
|
|
|
|
},
|
|
props:{
|
|
businessStructureList:Array, //业务结构分析
|
|
businessSegmentList:Array ,//业务板块详情
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.ywjg_list {
|
|
color: #2B2B2B;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ywjg_item_1 {
|
|
font-weight: 500;
|
|
margin: 20rpx;
|
|
background-color: #FAFAFC;
|
|
border-radius: 10rpx;
|
|
padding: 25rpx 20rpx;
|
|
.growthRate
|
|
{
|
|
padding: 0 10rpx;
|
|
line-height: 30rpx;
|
|
border-radius: 5rpx;
|
|
font-size: 20rpx;
|
|
color: white;
|
|
}
|
|
.growthRate.up
|
|
{
|
|
background-color: #EC3440;
|
|
}
|
|
.growthRate.down
|
|
{
|
|
background-color: #345423;
|
|
}
|
|
}
|
|
}
|
|
</style> |