book-hi/pages-mine/components/service-promise.vue

<template>
    <!-- 服务承诺栏 -->
    <view class="service-promise">
        <view class="promise-item">
            <u-icon name="gift-fill" color="#FFFFFF" size="32"></u-icon>
            <text>免费退回</text>
        </view>
        <view class="promise-item">
            <u-icon name="clock-fill" color="#FFFFFF" size="32"></u-icon>
            <text>24小时验</text>
        </view>
        <view class="promise-item">
            <u-icon name="yuan-circle-fill" color="#FFFFFF" size="32"></u-icon>
            <text>极速打款</text>
        </view>
        <view class="promise-item">
            <u-icon name="rmb-circle-fill" color="#FFFFFF" size="32"></u-icon>
            <text>卖亏必赔</text>
        </view>
    </view>
</template>


<style lang="scss" scoped>
.service-promise {
    background: #1F1303;
    padding: 10rpx 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40rpx;
    width: calc(100% + 60rpx);
    margin-left: -30rpx;

    .promise-item {
        display: flex;
        align-items: center;
        color: #FFFFFF;
        font-size: 24rpx;

        .u-icon {
            margin-right: 10rpx;
        }
    }
}
</style>