<template>
	<view class="activityCard">
		<view class="img">
			<image src="https://simlove-ma.oss-cn-shenzhen.aliyuncs.com/simlove/admin2022/07/19/202207191843214JnbDkFwzCseRnT.jpg" mode="widthFix"></image>
		</view>
		<view class="content">
			<view class="time">
				<slCounDown :endTime="endTime"/>
			</view>
			<view class="operation">
				<view class="left">
					<view class="price">99</view>
					<view class="company">/箱</view>
				</view>
				<view class="btns">
					<view class="btn">
						立即抢购
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import slCounDown from "@/sdk/sl-countDown/index.vue"
export default{
	components:{
		slCounDown
	},
	props:{
		
	},
	data(){
		return {
			endTime:1637656175000
		}
	}
}
</script>

<style lang="scss" scoped>
.activityCard{
	width: 710rpx;
	margin: 20rpx;
	border-radius: 20rpx;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	-webkit-appearance: none;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	.img{
		width: 100%;
		height: 315rpx;
		overflow: hidden;
	}
	.content{
		padding: 20rpx;
		width: 100%;
	}
	.operation{
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin-top: 10rpx;
		.left{
			display: flex;
			width: 50%;
			font-size: 30rpx;
			color: #999;
			.price{
				color: #fa717f;
			}
			.price:before{
				content: "¥";
				font-size: 26rpx;
			}
			.company::after{
				content: "起";
				font-size: 22rpx;
				margin-left: 4rpx;
			}
		}
		.btns{
			width: 50%;
			display: flex;
			justify-content: flex-end;
			.btn{
				background: #fa717f;
				color: #fff;
				font-size: 24rpx;
				border-radius: 25rpx;
				line-height: 50rpx;
				padding: 0rpx 25rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
</style>