<!--
 * @Author: ch
 * @Date: 2022-04-12 17:33:42
 * @LastEditors: ch
 * @LastEditTime: 2022-04-12 18:12:45
 * @Description: file content
-->
<template>
	<view class="seckill">
		<view class="seckill--price-box">
			<text class="seckill--price-icon">￥</text>
			<text class="seckill--price">9.9</text>
			<text class="seckill--price-org">￥29</text>
		</view>
		<view class="seckill--timer">
			<view>00</view>
			<text>:</text>
			<view>00</view>
			<text>:</text>
			<view>00</view>
		</view>
	</view>
</template>
<script>
export default {
	props : {
		data : {
			type : Object,
			default : () => ({})
		}
	},
	data(){
		return {
			 secondNum : 0
		}
	},
	computed:{
		hours(){
			let hours = parseInt(this.secondNum / 3600);
			return hours > 9 ? hours : `0${hours}`;
		},
		minute(){
			let minute = parseInt((this.secondNum - hours * 3600) / 60);
			return minute > 9 ? hours : `0${minute}`;
		},
		second(){
			let second = parseInt(this.secondNum % 60);
			return second > 9 ? second : `0${second}`;
		}
	}
}
</script>
<style lang="scss" scoped>

.seckill{
	height: 100rpx;
	width: 690rpx;
	margin: 20rpx auto;
	background:linear-gradient(180deg, #FFF3EF 0%, #FFFFFF 100%);
	border-radius: 16rpx;
	position: relative;
	display: flex;
	justify-content: space-between;
	padding: 0 20rpx 0 234rpx;
	&::after{
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		content: '';
		width: 266rpx;
		height: 100rpx;
		background: url('@/static/goods/seckill.png') no-repeat -8rpx -16rpx;
		background-size: 290rpx;
	}
	&--price-box{
		padding-top: 30rpx;
	}
	&--price-icon{
		color: $color-yellow4;
	}
	&--price{
		color: $color-yellow4;
		font-size: 52rpx;
	}
	&--price-org{
		color: $color-grey4;
		text-decoration: line-through;
	}

	&--timer{
		display: flex;
		align-items: center;
		view{
			background: #000;
			width: 48rpx;
			height: 48rpx;
			line-height: 48rpx;
			color: #fff;
			text-align: center;
			border-radius: 8rpx;
			font-size: 24rpx;
		}
		text{
			margin: 0 5rpx;
		}
	}
}
</style>