shop-app/pages/index/components/Sekill.vue

<!--
 * @Author: ch
 * @Date: 2022-03-23 10:07:48
 * @LastEditors: ch
 * @LastEditTime: 2022-04-09 17:46:32
 * @Description: file content
-->
<template>
	<view class="sekill">
		<view class="sekill-title">
			<view class="sekill-title--left">
				<text class="sekill-title--text">限时秒杀</text>
				<view class="sekill-title--time">
					<text class="sekill-title--time-name">14点场</text>
					<image class="sekill-title--time-icon" src="@/static/index/time.png"></image>
					<text class="sekill-title--time-time">14:20:30</text>
				</view>
			</view>
			<view class="sekill-title--more" @click="$Router.push('/pages/sekill/index')">
				<text>查看更多</text>
				<image class="sekill-title--more-icon" src="@/static/common/arrow.png"></image>
			</view>
		</view>
		<view class="sekill--group">
			<view>
				<image class="sekill--item-img"></image>
				<view class="sekill--item-pirce-box">
					<text class="sekill--item-pirce-title">秒杀价</text>
					<text class="sekill--item-pirce">￥29</text>
				</view>
				<text class="sekill--item-original-pirce">￥50</text>
			</view>
			<view>
				<image class="sekill--item-img"></image>
				<view class="sekill--item-pirce-box">
					<text class="sekill--item-pirce-title">秒杀价</text>
					<text class="sekill--item-pirce">￥29</text>
				</view>
				<text class="sekill--item-original-pirce">￥50</text>
			</view>
			<view>
				<image class="sekill--item-img"></image>
				<view class="sekill--item-pirce-box">
					<text class="sekill--item-pirce-title">秒杀价</text>
					<text class="sekill--item-pirce">￥29</text>
				</view>
				<text class="sekill--item-original-pirce">￥50</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	props : {
		data : {
			type : Array,
			default : []
		}
	},
	computed:{}
}
</script>
<style lang="scss" scoped>
.sekill{
	height: 424rpx;
	width: 690rpx;
	margin: 0 auto;
	padding: 30rpx;
	background: #fff;
	border-radius: 20rpx;
	&-title{
		height: 36rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&--text{
			font-size: 36rpx;
		}
		&--left{
			display: flex;
		}
		&--time{
			display: flex;
			height: 38rpx;
			line-height: 36rpx;
			border-radius: 18rpx;
			margin-left: 36rpx;
			background: #FFEDE9;
			overflow: hidden;
			align-items: center;
		}
		&--time-name{
			height: 100%;
			padding: 0 22rpx 0 15rpx;
			background: #FF512B;
			font-size: 22rpx;
			color: #fff;
			position: relative;
			&::after{
				display: block;
				content: '';
				width: 16rpx;
				height: 36rpx;
				background: #FF512B;
				transform: rotate(40deg);
				position: absolute;
				right: -10rpx;
				top: -12rpx;
			}
			
		}
		&--time-time{
			margin-right: 15rpx;
			font-size: 22rpx;
			color: #FF512B;
			position: relative;
			&::before{
				display: block;
				content: '';
				width: 14rpx;
				height: 36rpx;
				background: #FFEDE9;
				transform: rotate(40deg);
				position: absolute;
				left: -52rpx;
				top: 8rpx;
				z-index: 0;
			}
		}
		&--time-icon{
			width: 22rpx;
			height: 22rpx;
			padding-left: 20rpx;
			margin-right: 8rpx;
		}
		&--more{
			display: inline-block;
			font-size: 24rpx;
			color: #999;
		}
		&--more-icon{
			width: 10rpx;
			height: 20rpx;
			margin-left: 10rpx;
		}
	}
	&--group{
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	&--item{
		&-img{
			width: 200rpx;
			height: 200rpx;
			border-radius: 8rpx;
			background: #F8F8F8;
		}
		&-pirce-box{
			width: 180rpx;
			height: 44rpx;
			line-height: 44rpx;
			background: linear-gradient(90deg, #FFE7DE 0%, #FFFFFF 100%);
			border-radius: 20rpx;
			padding-left:20rpx;
			margin: 20rpx 0 10rpx 0;
		}
		&-pirce-title{
			font-size: 22rpx;
			color: $color-grey5;
		}
		&-pirce{
			color: #FF512B;
			font-size: 32rpx;
		}
		&-original-pirce{
			display: block;
			font-size: 22rpx;
			color: #999;
			text-decoration: line-through;
			text-align: center;
			
		}
	}


	
}

</style>