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>