yihuo/pages/spike/cell.vue

<template>
    <view class="mall-cell marginB10 relative" @click="showDetail">
        <image :src="data.mallGoodsVO.cover" mode="widthFix" class="image" />
        <view class="paddingX8 paddingT8 font1 pre-wrap bold relative">
            {{ data.mallGoodsVO.name }}
        </view>
        <view class="flex-align-between paddingX8 paddingT5 paddingB7 width100">
            <view v-if="data.mallGoodsVO.residue === 0" class="presell_over">已售罄</view>
            <view v-else class="presell">限时秒杀价</view>
            <view class="flex-baseline">
                <view class="font4">¥</view>
                <view class="bold paddingL1 spike_price">{{ data.subjectPrice }}</view>
            </view>
        </view>
        <view class="spike_total">
            <view class="flex goods">
                <view class="goods_lave">
                    {{ data.mallGoodsVO.residue }}
                </view>
                <view class="goods_slash marginX4">/</view>
                <view class="goods_total">
                    {{ data.mallGoodsVO.inventoryQuantity }}
                </view>
            </view>
            <image class="img" :src="resource.spike_num" />
        </view>
    </view>
</template>
<script>
import resource from '@/utils/resource'
export default {
    props: {
        data: Object,
        skipeType: String,
        startTime: String
    },
    data() {
        return {
            resource
        }
    },
    computed: {},
    methods: {
        showDetail() {
            if (this.data.mallGoodsVO.residue === 0) return
            this.$router.push('product', {
                id: this.data.mallGoodsVO.id,
                subjectId: this.data.subjectId,
                skipeType: this.skipeType,
                startTime: this.startTime
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.mall-cell {
    color: #fff;
    overflow: hidden;
    border-radius: 16rpx;
    background: #000;
    display: inline-block;
    width: 100%;
    box-shadow: 0px 0px 4px 0px rgba(167, 110, 244, 0.25);
    .image {
        height: 0;
        width: 100%;
    }
    .presell {
        float: left;
        background: $color-theme;
        width: 144rpx;
        height: 46rpx;
        line-height: 46rpx;
        font-size: 24rpx;
        border-radius: 5rpx;
        color: #fff;
        text-align: center;
        margin-right: 10rpx;
        text-shadow: none;
    }
    .presell_over {
        float: left;
        background: linear-gradient(#f5cdd4, #fbf0d5);
        width: 144rpx;
        height: 46rpx;
        line-height: 46rpx;
        font-size: 24rpx;
        border-radius: 5rpx;
        color: #bc3737;
        text-align: center;
        margin-right: 10rpx;
        text-shadow: none;
    }
    .spike_price {
        font-size: 40rpx;
    }
    .spike_total {
        position: absolute;
        top: 0;
        right: 0;
        width: 152rpx;
        height: 64rpx;
        line-height: 64rpx;
        font-size: 30rpx;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 0rpx 16rpx 0rpx 16rpx;
        z-index: 2;
        .goods {
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: center;
            .goods_lave {
                color: $color-theme;
                font-size: 46rpx;
                text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
            }
            .goods_slash {
                font-size: 46rpx;
                text-shadow: none;
            }
            .goods_total {
                text-shadow: none;
            }
        }

        .img {
            position: absolute;
            top: 14rpx;
            left: 20rpx;
            width: 116rpx;
            height: 40rpx;
            z-index: 1;
        }
    }
}
</style>