assess-app/pages/statistics/module/stat_capital.vue

<template>
	<view class="page-box-bg-fff m-t20 r-30 p-30">
		<!-- 标题插槽 -->
		<StatisticsTitle :genre="genre" :leftText="leftText" :is_right="false" >	</StatisticsTitle>
		<view class="row-justify-sb center p-lr20">
			<view class="capital_item">
				<view class="row-c flex">
					<view class="wh-14 r-100 m-r10" :style="{background:bgColor[leftColor]}"></view>
					<text class="size-24 text-color-576">消金类产品4笔</text>
				</view>
				<view class="sys-weight-600 m-l20 m-tb10">
					<text class="size-32 text-color-081">50</text>
					<text class="size-28 text-color-081">万</text>
				</view>
				<text class="size-28 text-color-00B sys-weight-600 m-l20"
					:style="{color:bgColor[leftColor]}">29.4%</text>
			</view>
			<view class="chart_item column-c m-lr20">
				<CircleChart :bgColor="'#2B7DFA'"></CircleChart>
			</view>
			<view class="capital_item">
				<view class="row-c flex">
					<view class="wh-14 r-100 m-r10" :style="{background:bgColor[rightColor]}"></view>
					<text class="size-24 text-color-576">消金类产品4笔</text>
				</view>
				<view class="sys-weight-600 m-l20 m-tb10">
					<text class="size-32 text-color-081">50</text>
					<text class="size-28 text-color-081">万</text>
				</view>
				<text class="size-28 text-color-00B sys-weight-600 m-l20"
					:style="{color:bgColor[rightColor]}">29.4%</text>
			</view>
		</view>
	</view>
</template>

<script>
	import CircleChart from "@/common/chart/circle_chart.vue";
	import StatisticsTitle from "./statistics_title.vue";

	export default {
		name: 'capital_chart',
		components: {
			CircleChart,
			StatisticsTitle
		},
		props: {
			genre: {
				type: Number,
				default: 0
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: '同比环比'
			},
			leftColor: {
				type: Number,
				default: 0
			},
			rightColor: {
				type: Number,
				default: 0
			},
      tabulateData:{
        default: {}
      }
		},
		data() {
			return {
				bgColor: ['#00BF8A', '#2B7DFA', '#ED9A2C']
			};
		}
	}
</script>

<style lang="scss" scoped>
	.capital_item {
		width: 200rpx;
		text-align: left;
	}
</style>