fix:首页重构

pages/index/diy/components/latestGroupBuying.vue

@@ -1,105 +1,102 @@
 <template>
-	<view class="index-product-wrapper" :class="iSshowH ? 'on' : ''" :style="'margin-top:' + mbConfig * 2 + 'rpx;'"
-		v-show="!isSortType">
-<!-- 		<view v-if="iSshowH">
-			<u-tabs :list="navigationList2" @click="clickNav" lineColor="#EB4C63" :inactiveStyle="{ color: '#333' }"
-				:activeStyle="{ color: '#EB4C63', fontWeight: 'bold' }" keyName="title"></u-tabs>
-		</view> -->
+	<view class="index-product-wrapper" v-show="!isSortType">
+
 		<!-- 拼团列表 -->
 
 		<view class="list-box animated" v-for="(e, index) in grouponData" :key="index">
-			<view class="group_3 flex-col">
-				<view class="tag_1 flex-col"><text class="text_6">1/{{e.slideshowTotal}}</text></view>
-			</view>
-			<view class="group_4 flex-row justify-between">
-				<view class="list_2 flex-row">
-					<text class="text_7">共{{e.goodsTotal}}个</text>
-					<view class="text-wrapper_3 flex-col" :style="{background: `url(${item})` }" v-for="(item, index) in e.goodsImage"
-						:key="index">
-						<!-- <text v-if="item.slot1 === 1" class="text_7">共{{e.goodsTotal}}个</text> -->
-					</view>
+
+
+			<productConSwiperGroupbuying class="skeleton-rect" :imgUrls="e.slideshow" :videoline="e.video_link"
+				@videoPause="videoPause"></productConSwiperGroupbuying>
+
+			<view class="content">
+				<view class="home">
+					<view class="count">共{{ e.goodsTotal }}个</view>
+					<scroll-view scroll-x class="navscroll"> <!-- 设置滚动条方向为横向 -->
+						<view style="width: 108rpx;height: 108rpx; margin-right: 20rpx; padding: 0;" class="item"
+							v-for="item in e.goodsList">
+							<!-- 通过for循环生成view -->
+							<image style="width: 108rpx;height: 108rpx;" :src="item.goodsCover" mode="scaleToFill" />
+						</view>
+					</scroll-view>
 				</view>
-				<image class="icon_3" referrerpolicy="no-referrer"
-					src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng43c9bddd58dafb36d3ce5b36c34486c9694a6980d5e540a7cc44681e1dcdf27e" />
 			</view>
-			<view class="box_3 flex-row justify-between">
-				<view class="text-group_11 flex-col"  @click="goToDetail(e.id)">
-					<view class="text-wrapper_4">
-						<text class="text_8">¥</text>
-						<text class="text_9">{{e.minPrice}}</text>
-						<text class="text_10">&nbsp;~</text>
-						<text class="text_8">¥</text>
-						<text class="text_9">{{e.maxPrice}}</text>
+
+
+			<view class="wrapper">
+				<view class="price">
+					<view>
+						¥{{ e.minPrice || 0.00 }} ~ ¥ {{ e.minPrice || 0.00 }}
 					</view>
-					<text class="text_13">{{e.mainTitle}}</text>
 				</view>
-				<image class="icon_4" referrerpolicy="no-referrer"
-					src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng499c106363c358efd4037e2befc671bc45b9a692931f8fbeb07dd342f420f04b" />
-			</view>
-			<view class="group_6 flex-row">
-				<image class="avatar-group_1" referrerpolicy="no-referrer"
-					src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7e7f268c1ab4f8f9a61bfb41d7843a8514aedf1d4312678cfd24c9cb23c6cc6c" />
-				<text class="text_14">{{e.grouponUserTotal}}人</text>
-				<text class="text_15">正在参团中</text>
-				<view class="image-text_11 flex-row justify-between">
-					<image class="icon_5" referrerpolicy="no-referrer"
-						src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng706a577ce54d1457bbf9ef4cc7ce31fcb9c54a60410c9a945cae1617c3df7640" />
-					<text class="text-group_4">截止倒计时</text>
-					<!-- <text class="text_16">02时25分19秒</text> -->
-					<!-- <text class="text_16"> -->
-						<!-- <uni-countdown :show-day="false" :hour="{{e.h}}" :minute="{{e.m}}" :second="{{e.s}}" /> -->
-						<!-- <uni-countdown :show-day="false" :hour="12" :minute="12" :second="12" /> -->
+				<view class="introduce" v-text="e.goodsName || '测试名字'"> </view>
+
+				<view class="countdown flex-row">
+					<view class="countdown-l" hover-class="none" hover-stop-propagation="false">
+						<image class="avatar-group_1" referrerpolicy="no-referrer"
+							src="http://wine.gzzzyd.com/test/static/img/bg.a82f9752.jpg" />
+						<image class="avatar-group_1" referrerpolicy="no-referrer"
+							src="http://wine.gzzzyd.com/test/static/img/bg.a82f9752.jpg" />
+						<image class="avatar-group_1" referrerpolicy="no-referrer"
+							src="http://wine.gzzzyd.com/test/static/img/bg.a82f9752.jpg" />
+						<text class="red">{{ e.grouponUserTotal }}人</text>
+						<text class="yellow">正在参团中</text>
+					</view>
+					<view class="countdown-r">
+						<image src="http://www.gzzzyd.com/groupon/home_slices/倒计时@2x.png" mode="scaleToFill" />
+						<text class="yellow">截止倒计时</text>
+						<!-- <text class="red2">02时25分19秒</text> -->
 						<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12"></uni-countdown>
-					<!-- </text> -->
-				</view>
-			</view>
-			<view class="group_7 flex-row justify-between">
-				<view class="text-group_12 flex-col">
-					<text class="text_17">最近的自提网点：</text>
-					<text class="text_18">{{e.selfTake.name}}</text>
-				</view>
-				<view class="image-text_12 flex-col">
-					<image class="icon_6" referrerpolicy="no-referrer"
-						src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6c7bfe951de28c68cbf7532beec94d0a16e2ea6d81efa80933eed9ece8207578" />
-					<text class="text-group_6">距您{{e.selfTake.distanceDesc}}</text>
+					</view>
 				</view>
-			</view>
-			<view class="box_4 flex-row">
-				<view class="image-text_13 flex-row justify-between">
-					<image class="icon_7" referrerpolicy="no-referrer"
-						src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng716260d376f718135006e01ff6d283c78abdf5a5c88debf66a7f6aa59347d81c" />
-					<text class="text-group_7">发布于：</text>
+				<view class="self-pickup-point">
+					<view class="a-t">
+						最近的自提网点：
+					</view>
+					<view class="a-m">
+						<view class="am1">
+							<view class="am1-1">
+								上海市浦东新区秀浦路29号三层303室
+							</view>
+							<view class="am1-2">
+								距您1.8km
+								<image src="http://www.gzzzyd.com/groupon/order_details/距离@2x.png" mode="scaleToFill" />
+							</view>
+						</view>
+					</view>
 				</view>
-				<text class="text_19">{{e.publishTimeDesc}}</text>
-				<view class="image-text_14 flex-row justify-between">
-					<text class="text-group_8">{{e.views}}人浏览过</text>
-					<image class="icon_8" referrerpolicy="no-referrer"
-						src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngcb2a14d093472b69f7328957e43efe5af8e4e9d3bfdec5ebeaddd131fe2ce146" />
+				<view class='info-area'>
+					<view class='time '>
+						<image src="http://www.gzzzyd.com/groupon/home_slices/编辑@2x.png" mode="scaleToFill" />
+						发布于：
+						<text class="imp_info">
+							{{ e.publishTimeDesc }}
+						</text>
+					</view>
+					<view class='view-count '>
+						{{ e.views }}人浏览过
+						<image src="http://www.gzzzyd.com/groupon/home_slices/浏览@2x.png" mode="scaleToFill" />
+					</view>
 				</view>
 			</view>
-			<view class="box_5 flex-row justify-between">
-				<button style="margin-right: 10px;" class="button_1 flex-col" @click="onClick_1">
-					<view class="image-text_15 flex-row justify-between">
-						<image class="icon_9" referrerpolicy="no-referrer"
-							src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngeff379ed5981aae0768e31361dd255e6fd280a8e0444636ef6781a86700d6200" />
-						<text class="text-group_9">分享有礼</text>
-					</view>
+			<view class="btn-area">
+				<button class="share">
+					<image src="http://www.gzzzyd.com/groupon/home_slices/分享@2x.png" mode="scaleToFill" />
+					<text>分享有礼</text>
 				</button>
-				<button class="button_2 flex-col" @click="onClick_2">
-					<view class="image-text_16 flex-row justify-between">
-						<image class="icon_10" referrerpolicy="no-referrer"
-							src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga2ee500afc9334850f677b98772ecc4d50879b30e30bf08525190662f767a78a" />
-						<text class="text-group_10">立即下单</text>
-					</view>
+				<button class="now">
+					<image src="http://www.gzzzyd.com/groupon/home_slices/购物@2x.png" mode="scaleToFill" />
+					<text>立即下单</text>
 				</button>
 			</view>
+
 		</view>
 	</view>
 </template>
 
 <script>
 import { getGoodsInfo, getCategoryTwo } from '@/api/home.js'
-import {latestGroupon, historyGroupon, detailGroupon, goodsDetail} from '@/api/groupon.js'
+import { latestGroupon, historyGroupon, detailGroupon, goodsDetail } from '@/api/groupon.js'
 export default {
 	name: 'promotionList',
 	props: {
@@ -149,20 +146,20 @@ export default {
 			fontColor: "rgba(253,80,47,1)",
 			labelColor: "rgba(29,176,252,1)",
 			typeId: '',
-			grouponData:[],
+			grouponData: [],
 		};
 	},
 	created () {
 		this.onLoadData(this.currentId);
 	},
 	methods: {
-		goToDetail(id){
+		goToDetail (id) {
 			uni.navigateTo({
-      url: `/pages/groupbuying_details/index?id=${id}`
+				url: `/pages/groupbuying_details/index?id=${id}`
 			})
 
 		},
-		onLoadData(currentId) {
+		onLoadData (currentId) {
 			// 最新团购
 			if (currentId == 0) {
 				this.getLatestGroupon()
@@ -172,7 +169,7 @@ export default {
 				this.getHistoryGroupon()
 			}
 		},
-		getLatestGroupon() {
+		getLatestGroupon () {
 			let that = this;
 			latestGroupon({
 				current: 1,
@@ -185,7 +182,7 @@ export default {
 				console.log(this.grouponData)
 			})
 		},
-		getHistoryGroupon() {
+		getHistoryGroupon () {
 			let that = this;
 			historyGroupon({
 				current: 1,
@@ -238,11 +235,12 @@ export default {
 </script>
 
 <style lang="scss">
-.list-box{
+.list-box {
 	background: white;
 
 	padding-bottom: 20px;
 }
+
 .index-product-wrapper {
 
 	&.on {
@@ -288,372 +286,295 @@ export default {
 }
 
 
-
-
-.block_3 {
-	background-color: rgba(255, 255, 255, 1);
-	margin-top: -1px;
-	padding-bottom: 12px;
-}
-
-.group_3 {
-	margin-bottom: 10px;
-	background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e4f54c9cff7742e682c0d3f8f3808993_mergeImage.png);
-	background-size: 100% 100%;
-	height: 190px;
+.content {
 	width: 100%;
-}
+	height: 108rpx;
+	margin-top: 10rpx;
 
-.tag_1 {
-	height: 18px;
-	margin: 10px;
-	background-color: rgba(0, 0, 0, 0.3);
-	border-radius: 6px;
-	padding: 1px 6px 1px 6px;
-}
+	.home {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		position: relative;
+		left: 0;
+		margin-top: 10rpx;
+
+		.count {
+			text-align: center;
+			width: 150rpx !important;
+			position: relative;
+			height: 108rpx;
+			line-height: 108rpx;
+			z-index: 999;
+			background-size: 100% 100%;
+			background: linear-gradient(90deg, #FFE9E9 0%, #FAFAFA 100%);
 
-.text_6 {
-	overflow-wrap: break-word;
-	color: rgba(255, 255, 255, 1);
-	font-size: 10px;
-	font-weight: NaN;
-	text-align: center;
-	white-space: nowrap;
-	line-height: 14px;
-}
+		}
 
-.group_4 {
-	overflow-wrap: break-word;
-	color: rgba(255, 150, 0, 1);
-	font-size: 10px;
-	font-weight: NaN;
-	text-align: left;
-	white-space: nowrap;
-	line-height: 14px;
+		.navscroll {
+			width: calc(100% - 150rpx);
+		}
+	}
 }
 
-.list_2 {
+.info-area {
+	margin: 23rpx 30rpx 0 30rpx;
+	justify-content: space-between;
+	display: flex;
 	width: 100%;
-	height: 62px;
-}
+	height: 84rpx;
+	font-size: 24rpx;
+	font-weight: 400;
+	color: #333333;
+	line-height: 44rpx;
+
+	image {
+		width: 40rpx;
+		height: 40rpx;
+		margin: 0 10rpx;
+		vertical-align: middle;
 
-.text-wrapper_3 {
-	height: 52px;
-	background-size: 100% 100%;
-	margin-right: 8px;
-	width: 49px;
-	background: linear-gradient(90deg, #FFE9E9 0%, #FAFAFA 100%);
-}
+	}
 
-.text_7 {
-	line-height: 62px;
-	overflow-wrap: break-word;
-	color: rgba(102, 102, 102, 1);
-	font-size: 10px;
-	text-align: left;
-	white-space: nowrap;
-}
+	.time {
+		height: 44rpx;
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #999999;
+		line-height: 44rpx;
+
+		.imp_info {
+			height: 44rpx;
+			font-size: 24rpx;
+			font-weight: 400;
+			color: #333333;
+			line-height: 44rpx;
+		}
+	}
 
-.icon_3 {
-	width: 12px;
-	height: 12px;
-	margin: 25px 0 25px 0;
+	.view-count {
+		height: 44rpx;
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #999999;
+		line-height: 44rpx;
+		margin-right: 60rpx;
+	}
 }
 
-.box_3 {
-	width: 100%;
+.countdown {
+	margin: 23rpx 30rpx 0 30rpx;
+	box-sizing: border-box;
+	background-color: rgba(255, 247, 248, 1.000000);
+	border-radius: 12rpx;
+	width: 95%;
+	height: 80rpx;
+	padding-top: 10rpx;
+	line-height: 80rpx;
 	align-self: center;
-	margin-top: 4px;
-	padding: 0 10px;
-}
-
-.text-group_11 {
-	flex-direction: column;
-}
-
-.text-wrapper_4 {
-	height: 24px;
-	margin-bottom: 10px;
-	overflow-wrap: break-word;
-	letter-spacing: 0.20000000298023224px;
-	font-family: PingFangSC-Medium;
-	font-weight: 500;
-	text-align: left;
-	line-height: 24px;
-}
-
-.text_8 {
-	overflow-wrap: break-word;
-	color: rgba(178, 35, 56, 1);
-	font-size: 12px;
-	font-family: PingFangSC-Medium;
-	font-weight: 500;
-	text-align: left;
-	line-height: 24px;
-}
-
-.text_9 {
-	overflow-wrap: break-word;
-	color: rgba(178, 35, 56, 1);
-	font-size: 18px;
-	font-family: DINAlternate-Bold;
-	font-weight: 700;
-	text-align: left;
-	white-space: nowrap;
-	line-height: 24px;
-}
-
-.text_10 {
-	overflow-wrap: break-word;
-	color: rgba(178, 35, 56, 1);
-	font-size: 17px;
-	font-family: DINAlternate-Bold;
-	font-weight: 700;
-	text-align: left;
-	white-space: nowrap;
-	line-height: 24px;
-}
-
-.text_11 {
-	width: 64px;
-	margin: 3px 0 3px 54px;
-}
+	display: flex;
+	border: 1px solid dashed;
+	display: flex;
+	justify-content: space-between;
 
-.text_12 {}
+	.countdown-l {
+		flex: 1;
+	}
 
-.text_13 {
-	width: 100%;
-}
+	.countdown-r {
+		flex: 1;
+	}
 
-.icon_4 {
-	width: 12px;
-	height: 12px;
-	margin: 33px 0 5px 0;
-}
+	.red {
+		height: 34rpx;
+		font-size: 24rpx;
+		font-weight: 600;
+		line-height: 34rpx;
+		color: #B22338;
+		vertical-align: super;
+		margin-left: 20rpx;
+	}
 
-.group_6 {
-	box-sizing: border-box;
-    background-color: rgba(255,247,248,1.000000);
-    border-radius: 6px;
-		width: 100%;
-		height: 25px;
-		line-height: 25px;
-    align-self: center;
-    margin-top: 8px;
-		padding: 0 10px;
-    flex-direction: row;
-    display: flex;
-	border:1px solid dashed;
-	margin-bottom: 5px;
-}
+	.red2 {
+		height: 40rpx;
+		font-size: 28rpx;
+		font-weight: 600;
+		color: #B22338;
+		line-height: 40rpx;
+		vertical-align: super;
+	}
 
-.avatar-group_1 {
-	width: 50px;
-	height: 20px;
-}
+	.yellow {
+		height: 34rpx;
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #FF9600;
+		line-height: 34rpx;
+		vertical-align: super;
+	}
 
-.text_14 {
+	image {
+		width: 40rpx;
+		height: 40rpx;
+		border: 2rpx solid #FFFFFF;
+	}
 }
 
-.text_15 {
+.price {
+	padding: 0 30rpx;
+	height: 48rpx;
+	font-size: 36rpx;
+	font-weight: bolder;
+	color: #B22338;
+	line-height: 48rpx;
+	margin: 20rpx 0;
 }
 
-.image-text_11 {
-	flex-grow: 1;
+.introduce {
+	padding: 0 30rpx;
+	height: 44rpx;
+	font-size: 36rpx;
+	font-weight: bolder;
+	color: #111111;
+	line-height: 44rpx;
+	margin: 20rpx 0;
 }
 
-.icon_5 {
-	width: 12px;
-	height: 12px;
-	margin: 1px 0 1px 0;
-}
+.wrapper {}
 
-.text-group_4 {
-	overflow-wrap: break-word;
-	color: rgba(255, 150, 0, 1);
+.a-t {
+	padding: 0 30rpx;
+	display: flex;
+	justify-content: space-between;
+	height: 44rpx;
+	margin-bottom: 20rpx;
 
 }
 
-.text_16 {
-}
+.a-m {
+	padding: 0 30rpx;
 
-.group_7 {
-	overflow-wrap: break-word;
-	color: rgba(153, 153, 153, 1);
-	font-size: 12px;
-	font-weight: NaN;
-	text-align: center;
-	white-space: nowrap;
-	line-height: 22px;
-	height: 55px;
-	padding:10px;
-	margin-bottom: 10px;
-	background: rgb(255,247,248);
-	border:1px solid dashed;
-}
+	.am1 {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 20rpx;
 
-.text-group_12 {
-	flex-direction: column;
-}
+		.am1-1 {
+			height: 40rpx;
+			font-size: 28rpx;
+			font-weight: 400;
+			color: #B22338;
+			line-height: 40rpx;
 
-.text_17 {
-	overflow-wrap: break-word;
-	color: rgba(102, 102, 102, 1);
-	font-size: 10px;
-	font-weight: NaN;
-	text-align: left;
-	white-space: nowrap;
-	line-height: 18px;
-	margin: 0 89px 0 1px;
-}
+		}
 
-.text_18 {
-	overflow-wrap: break-word;
-	color: rgba(178, 35, 56, 1);
-	font-size: 10px;
-	font-family: PingFangSC-Medium;
-	font-weight: 500;
-	text-align: left;
-	white-space: nowrap;
-	line-height: 16px;
-	margin-top: 2px;
-}
+		.am1-2 {
+			height: 36rpx;
+			font-size: 20rpx;
+			font-weight: 400;
+			color: #666666;
+			line-height: 36rpx;
+
+			image {
+				margin-left: 30rpx;
+				vertical-align: middle;
+				height: 34rpx;
+				width: 34rpx;
+			}
+		}
+	}
 
-.image-text_12 {}
+	.am2 {
+		margin-bottom: 20rpx;
+		height: 34rpx;
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #999999;
+		line-height: 34rpx;
+	}
 
-.icon_6 {
-	width: 14px;
-	height: 14px;
-	margin: 0 16px 0 17px;
-}
 
-.text-group_6 {
-	overflow-wrap: break-word;
-	color: rgba(102, 102, 102, 1);
-	font-size: 10px;
-	font-weight: NaN;
-	text-align: left;
-	white-space: nowrap;
-	line-height: 18px;
-	margin-top: 4px;
 }
 
-.box_4 {
+.a-b {
+	padding: 0 30rpx;
 	width: 100%;
-	align-self: center;
-	margin-top: 8px;
-	padding: 0 10px;
-}
-
-.image-text_13 {
-}
-
-.icon_7 {
-	width: 14px;
-	height: 14px;
-	margin: 4px 0 4px 0;
-}
-
-.text-group_7 {
-	overflow-wrap: break-word;
-	color: rgba(153, 153, 153, 1);
-	font-size: 12px;
-	font-weight: NaN;
-	text-align: center;
-	white-space: nowrap;
-	line-height: 22px;
-}
+	background: #FFF7F8;
+	border: 1px solid dashed #333333;
+	height: 60rpx;
+	line-height: 60rpx;
+	display: flex;
+	justify-content: space-between;
 
-.text_19 {
-	overflow-wrap: break-word;
-	color: rgba(51, 51, 51, 1);
-	font-size: 12px;
-	font-weight: NaN;
-	text-align: left;
-	white-space: nowrap;
-	line-height: 22px;
-}
+	.a-b1 {
+		font-size: 20rpx;
+		font-weight: 400;
+		color: #666666;
 
-.image-text_14 {
-	margin-left: 20px;
-}
-
-.text-group_8 {
-	overflow-wrap: break-word;
-	color: rgba(153, 153, 153, 1);
-	font-size: 12px;
-	font-weight: NaN;
-	text-align: center;
-	white-space: nowrap;
-	line-height: 22px;
-}
+		.red {
+			font-size: 20rpx;
+			font-weight: 500;
+			color: #B22338;
+		}
+	}
 
-.icon_8 {
-	width: 14px;
-	height: 14px;
-	margin: 4px 0 4px 0;
+	.a-b2 {
+		image {
+			vertical-align: middle;
+			margin-right: 30rpx;
+			margin-left: 30rpx;
+			height: 34rpx;
+			width: 34rpx;
+		}
+	}
 }
 
-.box_5 {
-	width: 100%;
-	align-self: center;
-	margin-top: 12px;
-	padding: 0 10px;
+.self-pickup-point {
+	margin-top: 20rpx;
+	background: #FFF7F8;
+	padding-top: 20rpx;
+	margin: 0 30rpx;
 }
 
-.button_1 {
-	background-color: rgba(241, 248, 229, 1);
-	border-radius: 4px;
-	padding: 6px 47px 6px 47px;
-}
+.btn-area {
+	padding: 30rpx;
+	display: flex;
+	justify-content: center;
+	height: 80rpx;
 
-.image-text_15 {
-	width: 70px;
-}
+	image {
+		width: 28rpx;
+		height: 28rpx;
+		margin-right: 10rpx;
+	}
 
-.icon_9 {
-	width: 14px;
-	height: 14px;
-	margin: 2px 0 2px 0;
-}
+	button {
+		flex:1;
+		
+		text-align: center;
+		margin: auto;
 
-.text-group_9 {
-	overflow-wrap: break-word;
-	color: rgba(117, 190, 0, 1);
-	font-size: 12px;
-	font-weight: NaN;
-	text-align: center;
-	white-space: nowrap;
-	line-height: 18px;
-}
+		height: 64rpx;
+		border-radius: 8rpx;
+		line-height: 64rpx;
+	}
 
-.button_2 {
-	background-color: rgba(247, 233, 235, 1);
-	border-radius: 4px;
-	padding: 6px 47px 6px 47px;
-}
+	.share {
+		margin-right: 20rpx;
+		background: #F1F8E5;
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #75BE00;
 
-.image-text_16 {    color: rgba(178,35,56,1);
-}
+	}
 
-.icon_10 {
-	width: 14px;
-	height: 14px;
-	margin: 2px 0 2px 0;
-}
+	.now {
 
-.text-group_10 {
-	overflow-wrap: break-word;
-	color: rgba(178, 35, 56, 1);
-	font-size: 12px;
-	font-weight: NaN;
-	text-align: center;
-	white-space: nowrap;
-	line-height: 18px;
-}
 
+		background: #F7E9EB;
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #B22338;
 
-.flex-row,
-.flex-col {
-	display: flex;
+	}
 }</style>