shop4.3.57/plugins/pt/components/app-pt-time.vue

<template>
	<view class="app-pt-time dir-left-nowrap" :class="theme === 'a' ? 'default-back' : theme + '-m-back ' + theme">
		<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-time-content" style="background-color: #FAC4D1;">
			<view class="app-name"  v-if="!start_time">距离活动开始还有</view>
			<view class="app-name" style="color: #F95C87;" v-else-if="end_time !== '0000-00-00 00:00:00'">距离结束仅剩</view>
			<view class="app-time-info dir-left-nowrap cross-center" v-if="end_time !== '0000-00-00 00:00:00' || !start_time">
				<text class="app-value">{{time_str.day}}</text>
				<text class="app-degree">天</text>
				<text class="app-value">{{time_str.hou}}</text>
				<text class="app-degree">时</text>
				<text class="app-value">{{time_str.min}}</text>
				<text class="app-degree">分</text>
				<text class="app-value">{{time_str.sec}}</text>
				<text class="app-degree">秒</text>
			</view>
		</view>
	</view>
</template>

<script>
    export default {
        name: 'app-pt-time',
	    props: {
			theme: String,
			end_time: {
				type: String,
				default() {
					return '00';
				}
			},
			start_time: {
            	type: Boolean,
				default() {
            		return true;
				}
			},

			time_str: {
            	type: Object,
				default() {
            		return {}
				}
			},
			item: {
				type: Object,
				default() {
					return {}
				}
			}
	    }
    }
</script>

<style scoped lang="scss">
	.default-back {
		background: linear-gradient(to right, #FB3B62, #FF3E7A,#FF478D);
	}
	.app-pt-time {
		height: #{100rpx};
		width: #{750rpx};
		position: relative;
		display: flex;
		.app-image {
			width: #{148rpx};
			height: #{100rpx};
		}
		.app-title {
			width: #{430rpx};
			color: white;
			font-size: #{22rpx};
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			flex: 1;
			position: relative;
			overflow: hidden;
			&:after{
				content: '';
				position: absolute;
				width: 70rpx;
				height: 70rpx;
				bottom: 0;
				right: -10rpx;
				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-time-content {
			background: #FAC4D1;
			height: #{100rpx};
			.app-name {
				width: #{322rpx};
				height: #{30rpx};
				font-size: #{26rpx};
				color: white;
				margin: #{5rpx} 0;
				text-align: center;
			}
			.app-time-info {
				height: #{48rpx};
				width: #{322rpx};
				text-align: center;
				justify-content: center;
				.app-degree {
					font-size: #{23rpx};
					// color: #ffffff;
					color: #FF3A67;
					margin: 0 #{6rpx};
				}
				.app-value {
					display: inline-block;
					min-width: #{34rpx};
					height: #{28rpx};
					line-height: #{30rpx};
					border-radius: #{4rpx};
					// background-color: white;
					background-color: #FF3A67;
					text-align: center;
					font-size: #{19rpx};
					color: #fff;
				}
			}
		}
	}
</style>