shop4.3.57/plugins/miaosha/components/app-goods-time.vue

<template>
	<view class="app-goods-time">
		<view class="app-title">
			<text class="icon-text">限时秒杀</text>
			<view class="price">
				<view class="current">
					￥{{item.price}}
					<text>感恩回馈</text>
				</view>
				<view class="original">￥{{item.original_price}}</view>
			</view>
		</view>
		<view class="app-content dir-top-nowrap" style="background-color: #FAC4D1;">
			<view class="app-text" style="color: #F95C87;" v-if="miaosha_status === 1">距离结束仅剩</view>
			<view class="app-text" v-if="miaosha_status === 2">距离开始仅剩</view>
			<view class="app-text over-text" v-if="miaosha_status === 0">活动已结束</view>
			<view class="app-time cross-center main-around" v-if="miaosha_status !== 0">
				<text class="app-num app-right" v-if="day > 0">{{day}}</text>
				<text style="color: #FF3A67;" v-if="day > 0">天</text>
				<text class="app-num app-right">{{hour}}</text>
				<text style="color: #FF3A67;">时</text>
				<text class="app-num app-right">{{minute}}</text>
				<text style="color: #FF3A67;">分</text>
				<text class="app-num app-right">{{second}}</text>
				<text style="color: #FF3A67;">秒</text>
			</view>
		</view>
	</view>
</template>

<script>
    export default {
        name: 'app-goods-time',
	    props: {
            miaosha_status: {
                type: Number,
            },
            hour: {
                type: Number,
                default() {
                    return 0;
                }
            },
            minute: {
                type: Number,
                default() {
                    return 0;
                }
            },
            second: {
                type: Number,
                default() {
                    return 0;
                }
            },
            day: {
                type: Number,
                default() {
                    return 0;
                }
            },
			theme: String,
			item: {
				type: Object,
				default() {
					return {}
				}
			}
        },
    }
</script>

<style scoped lang="scss">
	.app-goods-time {
		width: #{750rpx};
		height: #{100rpx};
		position: relative;
		display: flex;
		.app-image {
			width: #{750rpx};
			height: #{100rpx};
			background-image: url('../image/miaosha-bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.app-title {
			width: #{430rpx};
			color: white;
			font-size: #{22rpx};
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			flex: 1;
			position: relative;
			overflow: hidden;
			background: linear-gradient(to right, #FB3B62, #FF3E7A,#FF478D);
			&:after{
				content: '';
				position: absolute;
				width: 70rpx;
				height: 70rpx;
				bottom: 0;
				right: 230rpx;
				background: url("../image/icon-clock.png") no-repeat;
				transform: rotate(-45deg);
				z-index: 0;
				opacity: .85;
			}
			.icon-text{
				background: #d73155;
				width: 100rpx;
				height: 85%;
				font-size: 30rpx;
				display: block;
				border-radius: 10rpx;
				text-align: center;
				padding: 0 10rpx;
			}
			.price{
				display: flex;
				flex-direction: column;
				color: #ffffff;
				margin-left: 10rpx;
				.current{
					font-size: 36rpx;
					text{
						background: #d73155;
						border-radius: 10rpx;
						padding: 5rpx 10rpx;
						margin-left: 10rpx;
						font-size: 24rpx;
					}
				}
				.original{
					font-size: 22rpx;
					text-decoration: line-through;
				}
			}
		}
		.app-content {
			background: #FAC4D1;
			position: absolute;
			right: 0;
			top: 0;
			height: #{100rpx};
			width: #{230rpx};
			.app-text {
				font-size: #{22rpx};
				color: #ffffff;
				text-align: center;
				margin-top: #{6rpx};
			}
			.over-text {
				font-size: #{32rpx};
				line-height: #{100rpx};
				margin-top: 0;
			}
			.app-time {
				color: white;
				height: #{40rpx};
				font-size: #{26rpx};
				margin-top: #{6rpx};
				.app-num {
					display: inline-block;
					width: #{44rpx};
					height: #{40rpx};
					line-height: #{40rpx};
					// background-color:white;
					background-color: #FF3A67;
					border-radius: #{8rpx};
					// color: #353535;
					color: #fff;
					text-align: center;
				}
				.app-right {
					margin: 0 #{4rpx};
				}
			}
		}
	}
</style>