duck/pages/product/common/groupTime.vue

<template>
	<view class="introduce-section seckill-box-title">
		<view class="title flex" style="width: 100%;">
			<view class="title-left ">
        <view class="price-info">
          <view class="all-price">￥<text class="now-price">{{ goodsObjact.price }}</text><text class="old-price">￥{{goodsObjact.product_price}}</text><text class="pt-num">{{ goodsObjact.people }}人团{{pinkingNum}}人中</text></view>
        </view>
        <view class="pt-title">
          拼中可得200积分，未拼中可得￥1.50元补贴
        </view>
<!-- 				<view class="title-box flex_item">
					<view class="title-o">
						<view class="price-tip flex">
							<view class="tip-info">¥</view>
							<text class="price" style="font-size: 24rpx;">{{ goodsObjact.price }}</text>
						</view>
					</view>
					<view class="title-t">
						<view class="peice-out"></view>
						<view class="num">{{ goodsObjact.people }}人团1人中</view>
					</view>
				</view> -->
				<!-- <view class="group flex">
					<image src="/static/img/img064.png"></image>
					<view class="text">{{goodsObjact.pink_type}}</view>
				</view> -->
			</view>
			<!-- <view class="timeStop">
				<view class="item">
					<view class="timeStop-name">距离结束</view>
					<uni-countdown
						class="timeBox"
						color="#ffffff"
						background-color="#5dbc7c"
						splitor-color="#000000"
						:show-day="false"
						:hour="seckillObj.stopTimeH+(seckillObj.stopTimeD*24)"
						:minute="seckillObj.stopTimeM"
						:second="seckillObj.stopTimeS"
					></uni-countdown>
				</view>
			</view> -->
      <button class="shop-share" open-type="share">
        <view class="share-icon"><image src="../../../static/icon/share.png" mode=""></image></view>
        <view class="share-title">拼团分享</view>
      </button>
		</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
				};
			}
		},
		pinkingNum: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss">
/* 标题简介 */
.introduce-section {
	position: relative;
	background: #fff;
  // outline: 1rpx red solid;
  box-shadow: 10rpx 10rpx 10rpx rgba(0,0,0,0.2);
  z-index: 998;
	.title {
    // background-color: #901b21;
		font-size: 32rpx;
		color: $font-color-dark;
    // background-color: #901b21;
    // box-shadow: 10px 10px 10px red !important;
		.tip-o {
			color: #ff3334;
			padding-left: 15rpx;
		}
		.title-left {
			// padding: 15rpx;
			width: 560rpx;
      background-color: #901b21;
      height: 121rpx;
      padding: 25rpx 0 0 25rpx;
      color: #fff;
      .price-info {
        
      }
		}
	}
	.title-box {
		color: #ffffff;
		.title-o {
			.price {
				font-size: 32rpx !important;
				position: relative;
				top: 8rpx;
			}
		}
		.title-t {
			font-size: 20rpx !important;
			position: relative;
			top: 0rpx;
			
			// top: 10rpx;
      // background-color: #c9969a;
      // border-radius: 3rpx 3rpx;
			.peice-out {
				text-decoration: line-through;
			}
			.num {
				// margin-top: 10rpx;
        padding:6rpx 8rpx 6rpx 130rpx;
        border: 6rpx solid #c9969a;
				background-color: #c9969a;
				color: #fff;
				border-radius: 20rpx 20rpx;
				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: #ddffdf;
		height: 120rpx;
		padding: 0 10rpx;
		position: relative;
		width: 0;
		flex-grow: 1;
		.timeStop-name {
			padding-top: 15rpx;
			text-align: center;
			// color: #ff3334;
			color:#5dbc7c;
			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;
	}
  .shop-share {
    border: none;
    
    width: 146rpx;
    height: 121rpx;
    background: #FFFFFF;
    display: felx;
    align-items: center;
    // border-radius: 0 2rpx 2rpx 0;
    padding: 25rpx 0 0 0;
    .share-icon {
      width: 42rpx;
      height: 42rpx;
      margin: 0 auto 15rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .share-title {
      font-size: 24rpx;
      font-weight: bold;
      color: #262A35;
      margin: 0 auto;
      text-align: center;
      line-height: 1;
    }
  }
}
.seckill-box-title {
	// background:linear-gradient(14deg,rgba(254,107,38,1),rgba(255,50,40,1)) !important;
	// background: linear-gradient(270deg, #5dbc7c 0%, #5dbc7c 100%) !important;
  // background: #901b21;
  overflow: hidden;
  width: 694rpx;
  height: 121rpx;
  border-radius: 10rpx 10rpx;
  top: -60.5rpx;
  left: 28rpx;
  margin-bottom: -60.5rpx;
	.price,
	.m-price {
		color: #ffffff !important;
	}
	.price-tip {
		font-size: $font-base;
		color: #ffffff !important;
	}
	.tip-info{
		position: relative;
		top:8rpx;
		font-size: 22rpx !important;
		padding-right: 4rpx;
    font-weight: bold;
   
    }
	}
  .price {
  	font-size: 80rpx !important;
  	font-weight: bold;
	
}
.all-price {
  font-size: 18rpx;
  font-weight: 500;
  .now-price {
    font-size: 32rpx;
    font-weight: bold;
  }
  .pt-num {
    
    display: inline-block;
    font-size: 20rpx;
    background-color: #c9969a;
    padding: 6rpx 6rpx 8rpx 13rpx;
    border-radius: 20rpx 20rpx;
    position: relative;
    bottom: 8rpx;
  }
  .old-price {
    // display: inline;
    margin: 0 7rpx;
    text-decoration: line-through;
  }
}
.pt-title {
  font-size: 24rpx;
  font-weight: 500;
}
</style>