pco/app/pages/choose-business/choose-business.vue

<template>
	<view>
		<view class="box">
			<view class="top">
				<text class="title">选择业务</text>
			</view>
			<view v-for="(yewuItem,index) in yewuItemList" :key="index">
				<label class="c-item">
					<view class="l">
						<checkbox class="cb" color="#0080ff" />
					</view>
					<view class="c">{{yewuItem.text1}}</view>
					<view class="r">{{yewuItem.text2}}</view>
				</label>
			</view>
		</view>
		<view class="common-btn">录入确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yewuItemList: [{
						text1: '入场管理费用',
						text2: '34元'
					},
					{
						text1: '定车费用',
						text2: '10元'
					},
					{
						text1: '装卸费用',
						text2: '52元'
					},
					{
						text1: '核算费用',
						text2: '42元'
					},
					{
						text1: '吊装费用',
						text2: '124元'
					},
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.c-item {
		display: flex;
		align-items: center;
		margin: 15rpx 30rpx;
		padding: 40rpx 30rpx;
		border-radius: 10rpx;
		background-color: #fff;
		border: 1rpx solid #f5f5f5;

		.l {}

		.c {
			font-size: 30rpx;
			color: #191919;
			font-weight: bold;
			margin-left: 20rpx;
		}

		.r {
			font-size: 30rpx;
			color: #ff4200;
			font-weight: bold;
			margin-left: auto;
		}
	}

	@import '@/common/common.scss'
</style>