hyshop/pages/product/common/groupTime.vue

<template>
	<view class="introduce-section seckill-box-title">
		<view class="title flex" style="width: 100%;">
			<view class="title-left flex">
				<view class="title-box flex_item">
					<view class="title-o">
						<view class="price-tip flex">
							<view class="tip-info">¥</view>
							<text class="price">{{ goodsObjact.price }}</text>
						</view>
					</view>
					<view class="title-t">
						<view class="peice-out"></view>
						<view class="num">{{ goodsObjact.people }}人起团</view>
					</view>
				</view>
				<view class="group flex">
					<image src="/https://hy.liuniu946.com/app/img/img064.png"></image>
					<view class="text">{{goodsObjact.pink_type}}</view>
				</view>
			</view>
			<view class="timeStop">
				<view class="item">
					<view class="timeStop-name">距离结束</view><!-- #FF3334 -->
					<uni-countdown
						class="timeBox"
						color="#ffffff"
						background-color="#f75022"
						splitor-color="#000000"
						:show-day="false"
						:hour="seckillObj.stopTimeH+(seckillObj.stopTimeD*24)"
						:minute="seckillObj.stopTimeM"
						:second="seckillObj.stopTimeS"
					></uni-countdown>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
export default {
	components: {
		uniCountdown
	},
	props: {
		goodsObjact: {
			type: Object,
			default: function() {
				return {
					price: 0,
					product_price: 0,
					people: 0
				};
			}
		},
		seckillObj: {
			type: Object,
			default: function() {
				return {
					stopTime: 0, //结束时间
					stop: false, //是否结束
					stopTimeH: 0, //小时
					stopTimeM: 0, //分钟
					stopTimeS: 0, //秒钟
					stopTimeD: 0, //秒钟
					upTime: 0
				};
			}
		}
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss">
/* 标题简介 */
.introduce-section {
	position: relative;
	background: #fff;
	.title {
		font-size: 32rpx;
		color: $font-color-dark;
		.tip-o {
			color: #ff3334;
			padding-left: 15rpx;
		}
		.title-left {
			padding: 15rpx;
			width: 560rpx;
		}
	}
	.title-box {
		color: #ffffff;
		.title-o {
			.price {
				font-size: 65rpx !important;
				position: relative;
				top: 8rpx;
			}
		}
		.title-t {
			font-size: 24rpx !important;
			position: relative;
			bottom: 10rpx;
			padding-left: 10rpx;
			top: 10rpx;
			.peice-out {
				text-decoration: line-through;
			}
			.num {
				margin-top: 10rpx;
				background-color: #ffffff;
				color: #ff3a56;
				border-radius: 8rpx;
				padding: 0 5rpx ;
				float: left;
			}
		}
	}
	.group {
		color: #ffffff;
		position: relative;
		top: 8rpx;
		image {
			width: 55rpx;
			height: 45rpx;
		}
		.text {
			font-size: 40rpx !important;
			padding-left: 10rpx;
		}
	}
	.timeStop {
		// background-color: #feeeee;
		background: linear-gradient(90deg, #f9dcdd, #feeeee);
		// background: #ffa13f;
		height: 120rpx;
		padding: 0 10rpx;
		position: relative;
		width: 0;
		flex-grow: 1;
		.timeStop-name {
			padding-top: 15rpx;
			text-align: center;
			// color: #ff3334;
			color:#f75022;
			font-size: 20rpx;
		}
		.timeBox {
			// margin-left: -10rpx;
			position: absolute;
			top: 50rpx;
		}
		.item{
			height: 120rpx;
			width: 0;
			min-width: 100%;
			position: relative;
		}
	}
	.share-img {
		width: 30rpx;
		height: 30rpx;
		position: relative;
		top: 5rpx;
		left: 0;
		margin-right: 10rpx;
	}
}
.seckill-box-title {
	// background:linear-gradient(14deg,rgba(254,107,38,1),rgba(255,50,40,1)) !important;
	background: linear-gradient(270deg, #f75022 0%, #f75022 100%) !important;
	.price,
	.m-price {
		color: #ffffff !important;
	}
	.price-tip {
		font-size: $font-base;
		color: #ffffff !important;
	}
	.tip-info{
		position: relative;
		top:18rpx;
		font-size: 32rpx !important;
		padding-right: 8rpx;
	}
	.price {
		font-size: 45rpx !important;
		font-weight: bold;
	}
}
</style>