101 lines
2.6 KiB
Vue
101 lines
2.6 KiB
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="18"></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 {
|
|
vertical-align: text-top;
|
|
}
|
|
}
|
|
}
|
|
.next{
|
|
font-size: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #999;
|
|
}
|
|
}
|
|
.list{
|
|
display: flex;
|
|
// justify-content: space-between;
|
|
}
|
|
}
|
|
</style> |