<template>
	<view class="page">
		<scroll-view class='u-pa1' @scrolltolower="scrollbottom" scroll-y="true"
					 @scroll="scrolltoupper">
			<view :class="flag||flag1?'cover':''" style="z-index:9"></view>
			<view style='width:100%;height:38rpx;background:#db384c'></view>
			<view style="background:#f7f7f7;position:relative">
				<view class="header">
					<view :class="member.IsEnabled?'header-top':'if_carh1'">
						<view style="width: 94%;margin: 0 auto;border-radius: 12px;"
							  :class="member.IsEnabled?'if_carh2':'if_carh3'">
							<view style="width: 100%;display: flex;" :class="member.IsEnabled?'':'if_carh'">
								<view class="message"
									  style="flex: 1;margin-top: 4%;width:140rpx;height:140rpx;border-radius:120rpx;border:1px solid #fff;vertical-align:middle;overflow:hidden;margin-left:4%;">
									<image lazy-load style="width:140rpx;height:140rpx;" :src="(UserInfo.user_avatar)"></image>
								</view>
								<view class="grade"
									  style="flex: 4;text-align:left;text-align:left;font-family:PingFangSC-Semibold;font-size:14px;color:#4A4A4A;font-weight:bold;">
									<view>{{message.user_nickname}}</view>
									<view style="margin: 2% 0 0 0;text-align: left;font-family: PingFangSC-Regular;font-size: 22rpx;color: #FF9F1A;">
										{{message.user_level_name||__('普通会员')}}
									</view>
								</view>
							</view>
							<view v-if="member.IsEnabled == true" class='card_vip' style="overflow: hidden;">
								<view class='show_card' data-index="index" style='position: relative;'>
									<view class='name_card' v-if="member.IsReceive == false"
										  style="position: absolute;top: 13%;left: 24%;font-family: PingFangSC-Semibold;color: #4A4A4A;letter-spacing: 0;width: 54%;text-align: center;">
										{{message.user_level_name}}{{__('会员卡')}}
									</view>
									<view class='name_card' v-if="member.IsReceive == true"
										  style="position: absolute;top: 23%;left: 5%;font-family: PingFangSC-Semibold;color: black;">
										{{message.user_level_name}}{{__('会员卡')}}
									</view>
									<view v-if="member.IsEnabled && member.IsReceive && member.ReciveStatus == 1 && member.IsToWeixin"
										  @tap='openCard'
										  style="position: absolute;top: 54%;left: 5%;font-size: 22rpx;color: #9B9B9B;font-family: PingFangSC-Semibold;"
										  class='num_card'>{{message.user_level_card}}
									</view>
									<view v-if="false && message.user_level_card != null && member.IsReceive&& member.IsToWeixin== false "
										  style="position: absolute;top: 54%;left: 5%;font-size: 22rpx;color: #9B9B9B;font-family: PingFangSC-Semibold;"
										  @tap='cardvip' class='num_card'>{{message.user_level_card}}
									</view>
									<view v-if="member.ReciveStatus == 2  && member.IsToWeixin &&message.user_level_card != null&& member.DrawMethod == 1"
										  style="position: absolute;top: 56%;left:-2%;font-size:22rpxcolor: #9B9B9B;font-family: PingFangSC-Semibold;"
										  class='num_card'>
										<button style="background: #fcf3f4;width:200rpx;text-align: center;position: absolute;top: 54%;border-radius: 49rpx;font-family: PingFangSC-Semibold;font-size:22rpx"
												class='num_card' open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
												hidden="showPhoneNumber">
											<view style=' color:#9B9B9B'>{{message.user_level_card}}</view>
										</button>
									</view>
									<view @click.stop="cardDetail"
										  v-if="member.ReciveStatus == 2  && member.IsToWeixin &&message.user_level_card != null&& member.DrawMethod == 2"
										  style="position: absolute;top: 56%;left:5%;font-size:22rpx;color: #9B9B9B;font-family: PingFangSC-Semibold;"
										  class='num_card'>{{message.user_level_card}}
									</view>
									<view v-if="member.IsEnabled && member.IsReceive && member.ReciveStatus == 1 && member.IsToWeixin "
										  @tap='openCard'
										  style="width: 120rpx;height: 120rpx;background: #F92C46;border-radius: 50%;position: absolute;top: 32%;right: 6%;">
										<image src='https://static.lancerdt.com/xcxfile/appicon/img/erweima.png'
											   style="border-radius: 0;width: 49%;height: 49%;position: absolute;top: 25%;left: 25%;"></image>
									</view>
									<view v-if="false && message.user_level_card != null && member.IsReceive&& member.IsToWeixin== false  "
										  @tap='cardvip'
										  style="width: 120rpx;height: 120rpx;background: #F92C46;border-radius: 50%;position: absolute;top: 32%;right: 6%;">
										<image src='https://static.lancerdt.com/xcxfile/appicon/img/erweima.png'
											   style="border-radius: 0;width: 49%;height: 49%;position: absolute;top: 25%;left: 25%;"></image>
									</view>
									<view v-if="member.ReciveStatus == 2  && member.IsToWeixin &&message.user_level_card != null "
										  @tap='getPhoneNumber'
										  style="width: 120rpx;height: 120rpx;background: #F92C46;border-radius: 50%;position: absolute;top: 32%;right: 6%;">
										<image src='https://static.lancerdt.com/xcxfile/appicon/img/erweima.png'
											   style="border-radius: 0;width: 49%;height: 49%;position: absolute;top: 25%;left: 25%;"></image>
									</view>
									<button style="background: #F92C46;width: 41%;/*padding-right: 47%*/text-align: center;position: absolute;top: 60%;right: 29%;border-radius: 27px;"
											class='num_card' v-if="member.DrawMethod == 1 && member.IsReceive == false"
											open-type="getPhoneNumber"
											@getphonenumber="getPhoneNumber" hidden="showPhoneNumber">
										<view>立即领取</view>
									</button>
									<view style="background: #F92C46;width: 48%;text-align:center;position: absolute;top: 60%;right: 24%;border-radius: 49rpx;"
										  @click.stop="cardDetail" v-if="member.DrawMethod == 2 && member.IsReceive == false"
										  class='num_card'>立即领取
									</view>
								</view>
							</view>
						</view>
						<view v-if="member.IsEnabled && member.IsReceive && member.ReciveStatus == 1 && member.IsToWeixin "
							  @tap='openCard' class='wx_kb grade'>
							<image style="width: 106px;height: 29px;border-radius: 0;" src='https://static.lancerdt.com/xcxfile/appicon/img/cardp-bg.png'></image>
						</view>
					</view>
				</view>
				<view :class="member.IsEnabled?'header-bottom':'if_carh4'">
					<navigator url="/member/member/growth" class="growth">
						<view class="num">{{message.user_growth}}</view>
						<view style='color:#9B9B9B;'>{{__('成长值')}}</view>
					</navigator>
					<navigator url="/member/cash/predeposit" class="growth">
						<view class="num">{{number_format(message.user_money, 2)}}</view>
						<view style='color:#9B9B9B;'>{{__('余额')}}</view>
					</navigator>
					<navigator url="/member/member/coupon" class="growth">
						<view class="num">{{message.voucher}}</view>
						<view style='color:#9B9B9B;'>{{__('优惠券')}}</view>
					</navigator>
					<navigator url="/integral/integral/integral" class="integral">
						<view class="num">{{number_format(message.user_points)}}</view>
						<view style='color:#9B9B9B;'>{{__('积分')}}</view>
					</navigator>
				</view>


				<view class="prerogative" style='padding:108rpx 0 20rpx 0;margin-top:0'>
					<view class="prerogative-top">
						<text style="margin-left: 5px;color: #DD233A;font-size: 32rpx;">会员权益</text>
					</view>
				</view>

				<view class="prerogative1" v-if="message.user_level_rate==100||message.user_level_rate==0">
					<view class="prerogative-bottom">尊敬的会员，您现在无会员折扣可以使用。
					</view>
				</view>
				<view class="prerogative1" v-else>
					<view class="prerogative-bottom">尊敬的会员，您在购物时可享受{{message.user_level_rate/10}}折优惠
					</view>
				</view>
				<view style='background:#fff'>
					<view class="prerogative">
						<view class="prerogative-top">
							<text style="margin-left: 5px;color: #DD233A;font-size: 32rpx;">任务中心</text>
						</view>
					</view>
					<view class="mission" style='padding:26rpx 0rpx'>
						<view class="draw">
							<image style='width:12px;height:12px' src="https://static.lancerdt.com/xcxfile/appicon/img/qiandao.png"></image>
							<text>签到领积分</text>
						</view>
						<button style="margin-right: 0px;padding-left: 9rpx; padding-right: 9rpx; "  @click="click" v-if="isSign ==false"
								:class="isSign?'color':'button'">签到
						</button>
						<view v-if="isSign ==true" :class="isSign?'color':'button'">已签到
						</view>
					</view>
					<view class="mission" style='padding:26rpx 0rpx'>
						<view class="draw">
							<image style='width:12px;height:10px' src="https://static.lancerdt.com/xcxfile/appicon/img/gouwu.png"></image>
							<text>购物领积分</text>
						</view>
						<navigator open-type="switchTab" class="button" url="/pages/index/index">去购物
						</navigator>
					</view>
					<view class="mission" style='padding:26rpx 0rpx'>
						<view class="draw">
							<image style='width:12px;height:12px' src="https://static.lancerdt.com/xcxfile/appicon/img/pinglun.png"></image>
							<text>评价领积分</text>
						</view>
						<navigator class="button" url="/member/order/list?type=2060&sl=4">去评价
						</navigator>
					</view>
					<view class="alert" v-if="flag" style="z-index:1000">
						<image style="width:50rpx;height:50rpx"
							   src="https://static.lancerdt.com/xcxfile/appicon/img/true.png"></image>
						<text style="margin-left:20rpx">{{signMsg}}</text>
					</view>
					<view class="alert1" v-if="(flag1)" style="z-index:1000">
						<view>{{__('抱歉！今日您已签到')}}</view>
						<view style="margin-top:20rpx">{{__('~明天再来哦~')}}</view>
					</view>
				</view>
			</view>

			<guess-you-like ref="guessYouLike" :titleText="__('——猜你喜欢——')"></guess-you-like>
		</scroll-view>
		<view class="u-top-default">
			<navigator url='../index/index' open-type="switchTab" class="u-back2">
				<image src='http://appicon-1253690476.file.myqcloud.com/endorsement/gohome.png'></image>
			</navigator>
		</view>
	</view>
</template>


<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	import guessYouLike from '@/components/guess-you-like.vue'
	import diy from "../../components/themes/diy";
	import statusBar from "../../components/status-bar";
	import coupon from "../../components/coupon/coupon";

	export default {
		data: function() {
			return {
				message: "",
				member: {IsEnabled:true, IsReceive:true, CardNum:111, CardName:"sss", ReciveStatus:2, IsToWeixin:false, DrawMethod:2},
				con: "",
				Info: "",
				UserInfo: "",
				flag: false,
				flag2: false,
				flag1: false,
				flag3: false,
				isSign: true,
				signMsg: '',
				screenHeight: 0,
				isquicknav: false,
			}
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		components: {
			guessYouLike
		},
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title:this.__('任务中心')
			});

			var that = this;


			this.forceUserInfo(function(user) {
				that.setData({
					UserInfo: user
				});
				that.load();
			});

		},
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo', 'reloadUserResource']),

			scrollbottom: function (a) {
				this.$refs.guessYouLike.scrollbottom();
			},
			scrolltoupper: function (a) {
				a.detail.scrollTop >= this.screenHeight ? this.setData({isquicknav: true}) : this.setData({isquicknav: false})
			},

			getPhoneNumber: function (a) {
				if (-1 < a.detail.errMsg.indexOf("ok"))
				{
					if (0 == (o = this).member.IsToWeixin)
					{
						var e = {
							userId: app.globalData.UserInfo.Id,
							vendorId: app.globalData.VendorInfo.Id,
							cardId: o.member.Id,
							phone: app.globalData.UserInfo.Phone
						};
						$.xsr($.makeUrl(user.AddMemberCard, e), function (a) {
							//console.log("buzhidao:", a), 0 == a.Code && $.alert(a.Info.Msg), o.onLoad()
						})
					}
					else
					{
						o.GetMemberCard();
						var o = this, t = {vendorId: app.globalData.VendorInfo.Id, cardInfo: o.member.WeixinId};
						$.xsr($.makeUrl(user.GetMemberCardPostInfo, t), function (a) {
							o.setData({
								id: a.Info.id,
								tsamp: a.Info.tsamp,
								nonstr: a.Info.nonstr,
								sign: a.Info.sign
							}), wx.addCard({
								cardList: [{
									cardId: o.id,
									cardExt: '{ "timestamp":' + o.tsamp + ', "signature":"' + o.sign + '","nonce_str":"' + o.nonstr + '"}'
								}], success: function (a) {
									o.onLoad();
									var e = {
										vendorId: app.globalData.VendorInfo.Id,
										userId: app.globalData.UserInfo.Id,
										cCode: a.cardList[0].code,
										cCard: a.cardList[0].cardId,
										cardId: o.member.Id
									};
									$.xsr($.makeUrl(user.GetMCardRelationInfo, e), function (a) {
										o.onLoad()
									});
									var t = {
										userId: app.globalData.UserInfo.Id,
										vendorId: app.globalData.VendorInfo.Id,
										cardId: o.member.Id,
										phone: app.globalData.UserInfo.Phone
									};
									$.xsr($.makeUrl(user.AddMemberCard, t), function (a) {
										0 == a.Code && ($.alert(a.Info.Msg), o.onLoad())
									})
								},
								fail: function (a) {
								}
							})
						})
					}
				}
			},

			openCard: function () {
			},

			load: function() {
				var that = this,
						params = {
							user_id: this.userInfo.user_id,
						};

				that.$.request({
					url: this.Config.URL.user.signState,
					data: params,
					success: function(data, status, msg, code) {
						that.setData({
							isSign: data.state == 250 ? 1 : 0
						})
					}
				});


				that.setData({
					message: this.userInfo
				})
			},

			click: function() {
				var that = this,
						param = {
							user_id: this.userInfo.user_id
						};

				that.$.request({
					url: this.Config.URL.user.signIn,
					data: param,
					success: function(data, status, msg, code) {
						that.reloadUserResource(function (user_info) {
						});
						that.setData({
							flag: !that.$.isNull(data)
						});
						that.setData({
							signMsg: msg
						});
						if (200 == status) {
							that.setData({
								flag: true
							});
							setTimeout(function() {
								that.setData({
									flag: false
								})
							}, 2e3)
						} else {
							that.setData({
								flag1: true
							});
							setTimeout(function() {
								that.setData({
									flag1: false
								})
							}, 2e3);
						}

						that.load()
					}
				});
			},
			cardDetail: function (a) {
				wx.navigateTo({url: "../vip_ind/vip_ind?cardid=" + this.member.Id})
			},
			cardvip: function (a) {
				wx.navigateTo({url: "/member/member/card"})
			}
		}
	};
</script>



<style lang="scss">
@import "../../styles/_variables";

.header {
	width: 100%;
	background: #db384c;
}

.header-top {
	width: 100%;
	height: 529rpx;
	background: #db384c;
	justify-content: left;
}

.cover {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	background: rgba(0, 0, 0, 0.4);
	overflow: hidden;
}

.butoo {
	background-color: #f7f7f7;
	width: 200px;
	color: red;
	text-align: left;
	padding-left: 5px;
	margin-top: 0px;
	margin-left: 15px;
}

/* .message { margin-top: 30rpx; } */
.grade {
	font-size: 28rpx;
	color: #fff;
	text-align: center;
	padding: 49rpx 0 0 20rpx
}

.header-top image {
	width: 118rpx;
	height: 118rpx;
	border-radius: 50%;
}

.header-bottom {
	width: 94%;
	height: 120rpx;
	background: #fff;
	padding: 20rpx 0;
	display: flex;
	margin: 0 auto;
	border-radius: 21rpx;
	position: absolute;
	top: 38%;
	left: 3%;
	box-shadow: 0 8px 8px rgba(0, 0, 0, 0.048)
}

.growth {
	width: 50%;
	font-size: 28rpx;
	color: #fff;
	text-align: center;
	margin-top: 4%;
}

.integral {
	width: 50%;
	font-size: 28rpx;
	color: #fff;
	text-align: center;
	margin-top: 4%;
}

.num {
	margin-bottom: 10rpx;
	color: #DB384C;
	font-family: Tahoma-Bold;
	font-size: 26rpx;
}

.prerogative {
	margin-top: 20rpx;
	padding: 45rpx 0 20rpx 0;
	background: #fff;
}

.prerogative-top {
	border-left: 6rpx solid #fff;
	font-size: 28rpx;
	height: 28rpx;
	margin-left: 5%;
	line-height: 28rpx;
}

.prerogative1 {
	padding: 0 0 50rpx 0;
	background: #fff;
}

.prerogative-bottom {
	font-size: 26rpx;
	height: 28rpx;
	margin-left: 7%;
	color: #9B9B9B;
}

.color {
	width: 106rpx;
	height: 48rpx;
	display: flex;
	justify-content: center;
	line-height: 48rpx;
	font-size: 24rpx;
	background: rgb(160, 160, 160);
	color: #fff;
	border-radius: 10rpx;
}

/* .mission{ padding: 26rpx 0; border-top:1px solid #d9d9d9; position: relative; background: #fff; display: flex; justify-content: space-between; align-items: center } .mission::before{ content:" "; position:absolute; top:0; right:0; height:1px; border-top:1px solid #ebebe7; color:#ebebe7; -webkit-transform-origin:0 0; transform-origin:0 0; -webkit-transform:scaleY(0.5); transform:scaleY(0.5); } */
.mission {
	padding: 20rpx 0rpx;
	display: -webkit-box;
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	width: 85%;
	margin: 0 auto;
}

.mission::before {
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 1px;
	border-top: 1px solid #f1f1f1;
	color: #d9d9d9;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.button {
	width: 106rpx;
	height: 48rpx; /* text-align: center; */
	display: flex;
	justify-content: center;
	line-height: 48rpx;
	font-size: 24rpx;
	background: #db384c;
	color: #fff;
	border-radius: 10rpx;
}

.draw {
	font-size: 28rpx;
	height: 40rpx;
	line-height: 40rpx;
	display: flex;
	align-items: center;
}

.draw image {
	width: 40rpx;
	height: 40rpx;
}

.draw text {
	margin-left: 20rpx;
}

.alert {
	font-size: 32rpx;
	width: 70%;
	height: 200rpx;
	position: absolute;
	left: 15%;
	top: 40%;
	background: #fff;
	border-radius: 10rpx;
	justify-content: center;
	display: flex;
	align-items: center;
}

.alert1 {
	font-size: 32rpx;
	width: 70%;
	height: 200rpx;
	position: absolute;
	left: 15%;
	top: 40%;
	background: #fff;
	border-radius: 10rpx;
	justify-content: center;
	display: flex;
	flex-flow: column;
	align-items: center;
}

.u-back2 image {
	border-radius: 100%;
	width: 77rpx;
	height: 77rpx;
	border: 1px solid #eee;
	font-size: 20rpx;
	text-align: center;
	background-color: #fff;
	box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.35);
	z-index: 999;
	opacity: 0.8;
	line-height: 77rpx;
	margin-bottom: 20rpx;
}

.wx_kb {
	width: 100%;
	text-align: right;
	position: absolute;
	top: 1%;
	right: 3%;
}

.if_carh {
	height: 205rpx;
}

.if_carh1 {
	width: 100%;
	height: 223rpx;
	background: #db384c;
	justify-content: left;
}

.if_carh2 {
	background: #fcf3f4;
}

.if_carh3 {
	background: #fff;
}

.if_carh4 {
	position: absolute;
	top: 17%;
	left: 3%;
	width: 94%;
	height: 153rpx;
	background: #fff;
	padding: 20rpx 0;
	display: flex;
	margin: 0 auto;
	border-radius: 21rpx;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1)
}

.if_carh5 {
	background: #fff;
}

.card_vip {
	width: 100%;
	height: 253rpx;
}

.show_card {
	width: 91%;
	height: 192rpx;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin: 0 auto
}

.name_card {
	float: left;
	color: white;
	line-height: 102rpx;
	font-size: 24rpx;
}

.num_card {
	color: white;
	line-height: 75rpx;
	font-size: 32rpx;
}

.overbalance {
	width: 100%;
	margin: 22rpx auto;
	box-sizing: border-box;
	background: #fff;
}

.overbalanceTitle {
	width: 100%;
	height: 88rpx;
	font-family: PingFangSC-Medium;
	font-size: 26rpx;
	color: #000;
	font-weight: 500;
	line-height: 37rpx;
	padding-top: 27rpx;
	padding-bottom: 24rpx;
	box-sizing: border-box; /* letter-spacing: 0; */
	background: #fff;
	box-shadow: 0 2rpx 0 0 #efefef;
	padding-right: 24rpx;
}

.overbalanceTitle image {
	width: 23rpx;
	height: 26rpx;
	margin-right: 15rpx;
}

.overbalanceConversion {
	width: 100%;
	height: 469rpx;
	padding: 30rpx;
	box-sizing: border-box;
	white-space: nowrap;
	display: flex;
}

.everyConversion {
	display: inline-block;
	width: 300rpx;
	height: 430rpx;
	margin-right: 20rpx;
	padding: 20rpx 25rpx 34rpx;
	box-sizing: border-box;
	background: #fff;
	box-shadow: 0 5rpx 10rpx 0 rgba(0, 0, 0, 0.06);
	border-radius: 8rpx;
}

.everyConversion .moreCoupon {
	width: 250rpx;
	height: 250rpx;
	background-image: linear-gradient(-225deg, #f87c5e 0%, #db384c 100%);
	margin-bottom: 24rpx;
	border-radius: 8rpx;
	text-align: center;
	box-sizing: border-box;
	font-size: 24rpx;
	line-height: 33rpx;
	padding-top: 55rpx;
	color: #fff;
}

.moreCoupon view:first-child {
	width: 100%;
	height: 90rpx;
	margin: 0 auto;
	text-align: center;
	font-size: 40rpx;
}

.moreCoupon view:first-child text {
	font-size: 64rpx;
	line-height: 90rpx;
}

.moreCoupon view:last-child {
	width: 100%;
	text-align: center;
	padding: 0 10rpx;
	box-sizing: border-box;
	word-wrap: break-word;
	white-space: pre-wrap;
}

.everyConversion image {
	display: block;
	width: 250rpx;
	height: 250rpx;
	margin-bottom: 24rpx;
}

.everyConversion .titel {
	display: block;
	width: 100%;
	font-family: PingFangSC-Regular;
	font-size: 24rpx;
	line-height: 33rpx;
	color: #000; /* letter-spacing: 0; */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 19rpx;
}

.everyConversion .integralBtn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0;
}

.everyConversion .integralBtn text {
	font-family: PingFangSC-Semibold;
	font-size: 28rpx;
	line-height: 40rpx;
	color: #db384c; /* letter-spacing: 0; */
}

.everyConversion .integralBtn button {
	width: 100rpx;
	height: 50rpx;
	background: #db384c;
	border-radius: 10rpx;
	font-family: PingFangSC-Regular;
	font-size: 24rpx;
	color: #fff; /* letter-spacing: 0; */
	padding: 0;
	margin: 0;
	line-height: 50rpx;
}

.m-listv {
	margin-top: 20rpx;
	background: #f8f8f8;
	padding: 0 4rpx 0 16rpx;
	overflow: hidden;
}

.recommend {
	text-align: center;
	padding: 20rpx 0;
	color: #DB384c;
	font-size: 30rpx;
	font-weight: bold
}

.m-listv .m-product-item {
	margin: 10rpx;
	width: 345rpx;
	height: 520rpx;
	overflow: hidden;
	float: left;
	border-radius: 8rpx;
	background-color: #fff;
}

.m-listv .m-product-img {
	width: 345rpx;
	height: 345rpx;
	float: left;
	text-align: center;
}

.m-product-img image {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 20rpx;
}

.m-product-info {
	height: 210rpx;
	width: 538rpx;
	float: left;
	box-sizing: border-box;
	padding: 20rpx 0;
	position: relative;
}

.m-listv .m-product-name {
	width: 345rpx;
	height: 100rpx;
	box-sizing: border-box;
	padding: 10rpx 20rpx;
	font-size: 28rpx;
	line-height: 40rpx;
	position: relative;
}

.m-product-name label {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.m-listv .m-product-price {
	padding: 0 20rpx;
	font-size: 32rpx;
	line-height: 40rpx;
	color: #DB384C;
}

.m-product-price label {
	font-size: 24rpx;
}

.msk2 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
}

.m-coupon-box {
	background-color: #db384c;
	padding: 10rpx 25rpx 35rpx 25rpx;
	border-radius: 35rpx;
	width: 62%;
	margin: 25% auto;
}

.coupon_title {
	font-size: 52rpx;
	color: #fff;
	margin: 30rpx auto;
	text-align: center;
	letter-spacing: 3rpx;
}

.coupon_back {
	width: 468rpx;
	height: 450rpx;
}

.shopbox {
	display: flex;
	align-items: center;
	padding: 28rpx 48rpx 22rpx 38rpx;
}

.shop_name {
	font-size: 28rpx;
}

.context_box {
	margin: 10rpx auto 0;
	display: flex;
	align-items: center;
	color: #db384c;
}

.left {
	margin-right: 20rpx;
	text-align: center;
	width: 30%;
	max-width: 45%;
	overflow: hidden;
}

.left2 {
	margin-right: 20rpx;
	text-align: center;
	width: 35%;
	max-width: 50%;
	overflow: hidden;
	line-height: 53px;
	font-size: 38rpx;
}

.right {
	margin: auto 0;
	overflow: hidden;
}

.youhuiquan {
	border-bottom: 1rpx solid #db384c;
	overflow: hidden;
	height: 47rpx;
	max-width: 280rpx;
	line-height: 43rpx;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.manjian {
	max-width: 306rpx;
	line-height: 50rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.youxiaoqi {
	font-size: 24rpx;
	color: #999;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-top: 22rpx; /* text-align: center; */
	padding-left: 38rpx;
}

.lijishiyong_box {
	width: 100%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lijishiyong {
	width: 250rpx;
	height: 60rpx;
	background-color: #db384c;
	color: #fff;
	border-radius: 35rpx;
	letter-spacing: 4rpx;
	text-align: center;
	font-size: 28rpx;
	line-height: 60rpx;
	margin-top: 32rpx;
}

.close_msk1 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 124rpx;
}

</style>
