deming/components/shop/seckill/index.vue

<template>
    <view class="seckill">
        <view class="top">
            <view class="title">
                <view class="name">全部秒杀</view>
                <view class="time">
                    <text class="num">{{ time.littleHour }}</text>
                    <text class="mah">:</text>
                    <text class="num">00</text>
                    <text class="mah">:</text>
                    <text class="num">00</text>
					<text class="heng">-</text>
					<text class="num">{{ time.bigHour }}</text>
                    <text class="mah">:</text>
                    <text class="num">00</text>
                    <text class="mah">:</text>
                    <text class="num">00</text>
                </view>
            </view>
			<view class="next" @click="viewMore">
				<text>查看更多</text>
				<u-icon name="arrow-right" color="#999" size="22"></u-icon>
			</view>
        </view>
        <view class="list">
            <sitem v-for="(item, index) in list.slice(0, 3)" :key="index" :item="item"></sitem>
        </view>
    </view>
</template>
<script>
import sitem from "./item"
export default {
    name:"seckill",
    components:{
        sitem
	},
	props: ['list', 'time'],
	methods: {
		viewMore() {
			this.$u.route({
				url: '/pageC/spike/index',
			})
		},
	}
}
</script>
<style lang="scss" scoped>
.seckill{
	background-color: #fff;
	padding: 0 30rpx 30rpx;
	margin-bottom: 20rpx;
    .top{
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title{
            display: flex;
            align-items: center;
            .name{
                font-size: 30rpx;
                color: #333;
            }
            .time{
                margin-left: 20rpx;
                display: flex;
                align-items: center;
                font-size: 20rpx;
                .heng {
                    margin: 0 6rpx;
                }
                .num{
                    width: 25rpx;
                    height: 25rpx;
					padding: 2rpx 4rpx;
                    margin: 0 6rpx;
                    color: #fff;
                    text-align: center;
                    line-height: 25rpx;
                    border-radius: 4rpx;
					box-sizing: content-box;
                    background-color: #000;
                }
                .mah {
                   color: #999999;
                }
            }
        }
        .next{
			font-size: 20rpx;
        	display: flex;
			align-items: center;
			color: #999;
        }
    }
    .list{
        display: flex;
        // justify-content: space-between;
    }
}
</style>