shop4.3.57/plugins/advance/components/detail-ad.vue

<template>
	<view class="detail-ad dir-left-nowrap main-between" :class="theme === 'a' ? 'default' : theme + '-m-back ' + theme">
		<view class="app-title">
			<text class="icon-text">限时预售</text>
			<view class="price">
				<view class="current">
					￥{{detail.price_min === detail.price_max?detail.price_min:`${detail.price_min}~${detail.price_max}`}}
					<text>历史最低</text>
				</view>
				<view class="original">￥{{detail.original_price}}</view>
			</view>
		</view>
		<view class="app-content dir-top-nowrap" style="background-color: #FAC4D1;padding-left: 24rpx;">
			<text class="app-text" style="color: #F95C87;">距离结束仅剩</text>
			<view class="app-time cross-center main-around">
				<text class="app-num app-right" v-if="day > 0">{{d}}</text>
				<text style="color: #FF3A67;" v-if="day > 0">天</text>
				<text class="app-num app-right">{{h}}</text>
				<text style="color: #FF3A67;">时</text>
				<text class="app-num app-right">{{m}}</text>
				<text style="color: #FF3A67;">分</text>
				<text class="app-num app-right">{{s}}</text>
				<text style="color: #FF3A67;">秒</text>
			</view>
		</view>
	</view>
</template>

<script>
    export default {
        name: "detail-ad",
	    props: {
            sales: {
                type: Number,
	            default() {
                    return 0;
                }
            },
            d: {
                type: Number,
	            default() {
                    return 0;
                }
            },
            h: {
                type: Number,
	            default() {
                    return 0;
	            }
            },
            m: {
                type: Number,
                default() {
                    return 0;
                }
            },
            s: {
                type: Number,
                default() {
                    return 0;
                }
            },
			theme: String,
			detail: Object,
	    }
    }
</script>

<style scoped lang="scss">
	.detail-ad {
		width: #{750rpx};
		height: #{100rpx};
		position: relative;
		display: flex;
		.app-image {
			width: #{750rpx};
			height: #{100rpx};
			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("../../../plugins/miaosha/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};
				}
			}
		}
	}

	.default {
		background:linear-gradient(to right, #ff5527, #ff2755);
	}
</style>