assess-app/pages/loan/components/column-item.vue

<template>
	<view class="" :class="is_center?'column-center':'column-box'">
		<view class="m-t30">
			<text class="center-text">8万</text>
			<view class="text">贷款金额</view>
		</view>
		<view class="m-t30">
			<text class="center-text">23.76%</text>
			<view class="text">年利率</view>
		</view>
		<view class="m-t30">
			<text class="center-text">8万</text>
			<view class="text">贷款期数</view>
		</view>
		<view class="m-t30">
			<text class="center-text">8万</text>
			<view class="text">每期还款金额</view>
		</view>
		<view class="m-t30">
			<text class="center-text">8万</text>
			<view class="text">总利息</view>
		</view>
		<view class="m-t30">
			<text class="center-text">8万</text>
			<view class="text">总还款金额</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			is_center: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		}
	}
</script>

<style lang="scss" scoped>
	.column-box {
		color: #333;
		font-size: 28rpx;

		.text {
			color: #666;
			font-size: 24rpx;
			padding-top: 6rpx;
		}
	}

	.column-center {
		color: #333;
		font-size: 28rpx;

		.center-text {
			color: #F91517;
			font-weight: 600;
		}

		.text {
			color: #666;
			font-size: 24rpx;
			padding-top: 6rpx;
		}
	}
</style>