leromro-mini/pages_classify/pages/details/Card1.vue

<template>
    <view class="order-card">
        <view class="order-header flex_c_s">
            <view class="header-left flex_c_l">
                <view class="order-icon"></view>
                <view class="order-text font-30-333">
                    总订单编号: <text style="font-weight: bold;">123456789</text>
                </view>
            </view>
            <view class="font-28-cb">
                复制
            </view>
        </view>

        <view class="hr-dashed"></view>

        <view class="order-content flex_s_c">
            <view class="content-img"></view>
            <view class="content-rigth">
                <view class="content-item flex_c_s">
                    <view class="font-30-333">金邻助家</view>
                    <view class="font-30-333" style="font-weight: bold;">140</view>
                </view>
                <view class="font-28-grey flex_c_s">
                    <view>(次)</view>
                    <view>x5</view>
                </view>
            </view>
        </view>


    </view>

</template>

<script setup>

</script>
<style lang="scss" scoped>
.order-card {
    border-radius: 20rpx;
    background: #FFFFFF;
    padding: 28rpx 26rpx;
    margin-bottom: 20rpx;

    .order-header {

        .header-left {
            flex: 1;


            .order-text {
                margin-left: 18rpx;
            }

        }
    }

    .order-content {
        padding: 38rpx 0 10rpx;
    }
}

.hr-dashed {
    margin-top: 10rpx;
}

.content-img {
    width: 144rpx;
    height: 144rpx;
    margin-right: 20rpx;
    background: red;
}

.content-rigth {
    flex: 1;
    padding-top: 38rpx 0 10rpx;
}
</style>