Delivery-merchant/components/BillInfo.vue

<template>
		<view class="con" :class="{ pay: billType === 'pay' }">
			<view>
				<view class="text1">
					{{Info.title}}
				</view>
				<view class="text2">
					{{Info.settleTime}}
				</view>
			</view>
			<view class="money">
				{{Info.amount}}
			</view>
		</view>
</template>

<script>
export default {
    name: 'Bill',
    props: {
        Info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        billType: {
            type: String,
            default: ''
        }
    },
    methods: {
        details() {
            this.$emit('detail');
        }
    }
};
</script>
<style lang="scss" scoped>
.con{
	height: 70px;
	background: #FFFFFF;
	margin: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom:1px solid #F5F7FA;
	.text1{
		font-size: 14px;
		font-weight: 400;
		color: #000000;
		line-height: 20px;
	}
	.text2{
		font-size: 12px;
		font-weight: 400;
		color: #969799;
		line-height: 17px;
	}
	.money{
		font-size: 16px;
		font-weight: bold;
		color: #F42202;
		line-height: 24px;
	}
}

.pay {
	color: #000000;
}
</style>