caimei-applets-store/components/views/cm-cart-expired-area/cm-cart-expired-area.vue

<template>
    <view class="cart-supplier-area">
        <view class="area-top">
            <view class="expired">失效商品{{ expiredList.length }}件</view>
            <view class="clear" hover-class="hover-class" hover-stay-time="100" @click="$emit('clear')">
                清空失效商品
            </view>
        </view>
        <!-- 失效商品列表 -->
        <view class="checkbox">
            <view class="tip">失效</view>
            <template v-for="item in expiredList">
                <cm-cart-product
                    class="product"
                    :isExpired="true"
                    :key="item.productId"
                    :productInfo="item"
                ></cm-cart-product>
            </template>
        </view>
    </view>
</template>

<script>
export default {
    name: 'cm-cart-expired-area',
    props: {
        expiredList: {
            type: Array,
            default: () => []
        }
    }
}
</script>

<style lang="scss" scoped>
.cart-supplier-area {
    padding: 24rpx;
    background: #fff;

    .tip {
        margin-right: 8rpx;
    }

    .area-top {
        @extend .cm-flex-between;

        margin-bottom: 24rpx;

        .hover-class {
            background: #ffeff0 !important;
            border-color: #ff457b;
        }

        .expired {
            font-size: 30rpx;
            color: #333333;
        }

        .clear {
            @extend .cm-flex-center;
            width: 184rpx;
            height: 42rpx;
            background: #fff8fd;
            border: 1rpx solid #ff457b;
            border-radius: 28rpx;
            font-size: 26rpx;
            color: #ff457b;
        }
    }

    .checkbox {
        @extend .cm-flex-between;
        .product {
            flex: 1;
        }
        .tip {
            width: 72rpx;
            height: 36rpx;
            line-height: 36rpx;
            text-align: center;
            background: rgba(51, 51, 51, 0.3);
            border-radius: 24rpx;
            font-size: 24rpx;
            color: #ffffff;
        }
    }
}
</style>