chelvc-custom/src/pages/client/clientUser/cart/CartList.vue

<template>
  <view>
    <view class="cart_list" v-for="item in 5">
      <view class="chelvc-flex-item store">
        <u-radio-group>
          <u-radio>
            顺风租车
            <u-icon name="arrow-right" />
          </u-radio>
        </u-radio-group>
        <view class="">领券</view>
      </view>
      <view class="cartList chelvc-flex">
        <u-radio-group>
          <u-radio>
            <image src="@/static/logo.png" mode="scaleToFill" />
          </u-radio>
        </u-radio-group>
        <view>
          <view class="text-title">23款大众捷达VS5(越野)+市区免费+市区免车</view>
          <view class="chelvc-flex-item">
            <view class="chelvc-flex">
              <view>
                <text class="text-22">￥</text>
                <text style="font-size: 30rpx; font-weight: 800">450</text>
              </view>
              <view class="price chelvc-flex-item">
                <text>预计到手价</text>
                <text class="text-22">￥</text>
                <text style="font-size: 26rpx; font-weight: 800">196</text>
              </view>
            </view>
            <view class="addStyle">x 1</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      style: Array,
      default: [],
    },
  },
};
</script>

<style lang="scss" scoped>
.cart_list {
  height: 310rpx;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  .store {
    height: 50rpx;
  }
  .cartList {
    margin-top: 15rpx;
    image {
      width: 200rpx;
      height: 200rpx;
      margin-right: 20rpx;
      border-radius: 10rpx;
    }
  }

  .text-title {
    font-size: 32rpx;
    font-weight: 800;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 20rpx 0 60rpx;
  }

  .price {
    width: 185rpx;
    height: 30rpx;
    padding: 10rpx;
    font-size: 24rpx;
    color: #f66e0d;
    margin-left: 10rpx;
    margin-bottom: 10rpx;
    border-radius: 30rpx;
    background-color: rgba(0, 0, 0, 0.1);
  }

  .addStyle {
    height: 40rpx;
    width: 75rpx;
    border-radius: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    text-align: center;
    color: #7f7f7f;
    border: 1rpx solid #7f7f7f;
  }
}
</style>