jzhw_uni/pages/tabBar/ucenter/index/index.vue

<template>
	<view class="ucenter-page">
		<keep-alive>
			<MyTabBar @tab-switch="onTabSwitch" :actived="actived"></MyTabBar>
		</keep-alive>

		<view class="top">
			<view class="profile-info" @tap="goLogin">
				<image class="avatar"
					:src="userInfo.avatarUrl ? userInfo.avatarUrl : '/static/images/new/icon-user.png'"
					mode="aspectFit"></image>
				<view class="info">
					<view class="user-name-wrapper">
						<text class="name">{{ userInfo.nickName }}</text>
						<view class="jz-badge" v-if="hasLogin && isMember">J</view>
					</view>
					<view class="no-login" v-if="!hasLogin ">
						<text class="no-login-area">点击登录账号</text>
					</view>
					<text class="cert">{{ userInfo.mobile }}</text>
					<!-- <button v-if="!issign" @tap="wxLogin" class="plus">完善信息</button> -->
				</view>

			</view>
		</view>
		<view class="container">
			<!-- 我的订单 -->
			<view class="order-block">
				<view class="order-module">
					<view class="tool-item" @tap="goOrderIndex" data-index="1" data-route="/pages/ucenter/order/order">
						<image class="tool-img" mode="aspectFit" src="@/static/images/my/awaitPay.png"></image>
						<text class="tool-text">待付款</text>
					</view>
					<view class="tool-item" @tap="goOrderIndex" data-index="2" data-route="/pages/ucenter/order/order">
						<image class="tool-img" mode="aspectFit" src="@/static/images/my/service.png"></image>
						<text class="tool-text">服务中</text>
					</view>
					<view class="tool-item" @tap="goAftersaleList">
						<image class="tool-img" mode="aspectFit" src="@/static/images/my/refunds.png"></image>
						<text class="tool-text">退款售后</text>
					</view>
					<image class="devide-img" mode="aspectFit"
						src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/ui/icon-devide.png"></image>
					<view class="tool-item" @tap="goOrderIndex" data-index="0" data-route="/pages/ucenter/order/order">
						<image class="tool-img" mode="aspectFit" src="@/static/images/my/allOrder.png"></image>
						<text class="tool-text">全部订单</text>
					</view>
				</view>
			</view>
			<view class="middle-module-wrapper">
				<view class="middle-module">
					<view class="tool-item" @tap="goCollect">
						<image class="tool-img" mode="aspectFit"
							src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/ui/icon-star.png"></image>
						<view class="line-right">
							<text class="tool-text">收藏商品</text>
							<image class="arrow" mode="aspectFit"
								src="https://mall.zhaijieshi.cc/file/wx-dy/arrow-grey.png"></image>
						</view>
					</view>
					<view class="tool-item" @tap="goCoupon">
						<image class="tool-img" mode="aspectFit"
							src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/ui/icon-coupon.png"></image>
						<view class="line-right">
							<text class="tool-text">优惠券</text>
							<image class="arrow" mode="aspectFit"
								src="https://mall.zhaijieshi.cc/file/wx-dy/arrow-grey.png"></image>
						</view>
					</view>
					<view class="tool-item" @tap="goAddress">
						<image class="tool-img" mode="aspectFit"
							src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/ui/icon-address.png"></image>
						<view class="line-right">
							<text class="tool-text">服务地址</text>
							<image class="arrow" mode="aspectFit"
								src="https://mall.zhaijieshi.cc/file/wx-dy/arrow-grey.png"></image>
						</view>
					</view>
					<view class="tool-item" @tap="goIm">
						<image class="tool-img" mode="aspectFit"
							src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/ui/icon-kf.png"></image>
						<view class="line-right">
							<text class="tool-text">联系客服</text>
							<image class="arrow" mode="aspectFit"
								src="https://mall.zhaijieshi.cc/file/wx-dy/arrow-grey.png"></image>
						</view>
					</view>
					<view class="tool-item" @tap="goHelp">
						<image class="tool-img" mode="aspectFit"
							src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/ui/icon-info.png"></image>
						<view class="line-right">
							<text class="tool-text">常见问题</text>
							<image class="arrow" mode="aspectFit"
								src="https://mall.zhaijieshi.cc/file/wx-dy/arrow-grey.png"></image>
						</view>
					</view>
					<view class="tool-item" @tap="aboutUs">
						<image class="tool-img" mode="aspectFit"
							src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/ui/icon-about.png"></image>
						<view class="line-right">
							<text class="tool-text">关于我们</text>
							<image class="arrow" mode="aspectFit"
								src="https://mall.zhaijieshi.cc/file/wx-dy/arrow-grey.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="switchaccount" v-if="hasLogin" @tap="exitLogin" data-type="1">切换账号</view>
			<view class="logout" v-if="hasLogin" @tap="exitLogin" data-type="2">退出登录</view>
			<view class="kouhao">
				<!-- <image src="https://mall.zhaijieshi.cc/file/wx-huawang/db.png" mode="aspectFit"  /> -->
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('../../../../utils/util.js');
	var api = require('../../../../config/api.js');
	var user = require('../../../../utils/user.js');
	var app = getApp();
	export default {
		data() {
			return {
				actived: 2,
				userInfo: {
					nickName: '未登录',
					avatarUrl: '/static/images/new/icon-user.png',
					isDis: false,
					mobile: ''
				},

				order: {
					unpaid: 0,
					unship: 0,
					unrecv: 0,
					uncomment: 0
				},

				hasLogin: false,
				isdis: false,

				//是否分销员
				issign: true,

				//是否注册完成了信息,
				//是否是会员
				isMember: false,

				selected: 0,
				collectCount: '',
				couponCount: ''
			};
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			console.info('pages/tabBar/ucenter/index/index  onload');
		},
		onReady: function() {},
		onShow: function() {
			//获取用户的登录信息
			if (app.globalData.hasLogin) {
				let userInfo = uni.getStorageSync('userInfo');
				this.setData({
					userInfo: userInfo,
					hasLogin: true
				});
				app.globalData.userInfo = userInfo;
				let that = this;
				util.request(api.UserIndex).then(function(res) {
					if (res.errno === 0) {
						console.log(res);
						that.setData({
							collectCount: res.data.collectCount,
							couponCount: res.data.couponCount,
							order: res.data.order,
							isdis: res.data.isdis,
							issign: res.data.issign,
							isMember: res.data.level == '1' ? true : false
						});
						app.globalData.isMember = res.data.level == '1' ? true : false;
					}
				});
			}
		},
		onHide: function() {
			// 页面隐藏
		},
		onUnload: function() {
			// 页面关闭
		},
		methods: {
			onTabSwitch(index) {
				console.log('Switched to tab index:', index);
				// 根据索引进行页面跳转或逻辑处理
				if (index == 0) {
					uni.reLaunch({
						url: "/pages/index/index"
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: "/pages/oneToone/1to1"
					})
				} else {
					return
				}
			},
			goReferee() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages/referee/index'
					});
				} else {
					uni.navigateTo({
						url: '/pages/auth/login/login'
					});
				}
			},

			goAftersaleList() {
				// console.log('来了');
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages/ucenter/aftersaleList/aftersaleList'
					});
				} else {
					uni.navigateTo({
						url: '/pages/auth/login/login'
					});
				}
			},

			goLogin() {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/auth/login/login'
					});
				}
			},

			goOrder() {
				if (this.hasLogin) {
					try {
						uni.setStorageSync('tab', 0);
					} catch (e) {
						console.log('CatchClause', e);
						console.log('CatchClause', e);
					}
					uni.navigateTo({
						url: '/pages/ucenter/order/order'
					});
				} else {
					uni.navigateTo({
						url: '/pages/auth/login/login'
					});
				}
			},

			goOrderIndex(e) {
				if (this.hasLogin) {
					let tab = e.currentTarget.dataset.index;
					let route = e.currentTarget.dataset.route;
					uni.navigateTo({
						url: '/pages/ucenter/order/order?tab=' + tab
					});
				} else {
					uni.navigateTo({
						url: '/pages/auth/login/login'
					});
				}
			},

			goSign() {
				uni.navigateTo({
					url: '/pages/ucenter/parter/sign/index'
				});
			},

			goStar() {
				if (this.hasLogin) {
					if (this.isdis) {
						let url = '/pages/ucenter/parter/index';
						uni.navigateTo({
							url: url
						});
					} else {
						uni.navigateTo({
							url: '/pages/ucenter/parter/join/joinapply'
						});
					}
				} else {
					uni.navigateTo({
						url: '/pages/auth/login/login'
					});
				}
			},

			goCoupon() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages/ucenter/couponList/couponList'
					});
				} else {
					uni.navigateTo({
						url: '/pages/auth/login/login'
					});
				}
			},

			goGroupon() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages/groupon/myGroupon/myGroupon'
					});
				} else {
					uni.navigateTo({
						url: '/pages/auth/login/login'
					});
				}
			},

			goCollect() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages/ucenter/collect/collect'
					});
				} else {
					uni.navigateTo({
						url: '/pages/auth/login/login'
					});
				}
			},

			goFeedback(e) {
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages/ucenter/feedback/feedback'
					});
				} else {
					uni.navigateTo({
						url: '/pages/auth/login/login'
					});
				}
			},

			goRegistr() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages/auth/register/register'
					});
				} else {
					uni.navigateTo({
						url: '/pages/auth/login/login'
					});
				}
			},

			goFootprint() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages/ucenter/footprint/footprint'
					});
				} else {
					uni.navigateTo({
						url: '/pages/auth/login/login'
					});
				}
			},

			goAddress() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages/ucenter/address/address'
					});
				} else {
					uni.navigateTo({
						url: '/pages/auth/login/login'
					});
				}
			},

			wxLogin: function() {
				let that = this;
				console.log();
				uni.getUserProfile({
					desc: '用于完善会员资料',
					// 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						console.log(res);
						let e = res;
						if (e.userInfo == null) {
							uni.showToast({
								title: '未授权，无法完善信息',
								icon: 'success',
								duration: 3000
							});
							return;
						}
						e.userInfo.encryptedData = e.encryptedData;
						user.loginByWeixin(e.userInfo)
							.then(function(res) {
								app.globalData.userInfo = res.data.userInfo;
								uni.setStorageSync('userInfo', res.data.userInfo);
								that.setData({
									issign: true,
									userInfo: res.data.userInfo
								});
								uni.showToast({
									title: '信息完善成功',
									icon: 'success',
									duration: 3000
								});
							})
							.catch((err) => {
								console.info(err);
								uni.showToast({
									title: '请求失败，稍后再试',
									icon: 'success',
									duration: 3000
								});
							});
					}
				});
			},

			goAfterSale: function() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages/ucenter/aftersaleList/aftersaleList'
					});
				} else {
					uni.navigateTo({
						url: '/pages/auth/login/login'
					});
				}
			},

			aboutUs: function() {
				uni.navigateTo({
					url: '/pages/ucenter/about/about'
				});
			},

			goHelp: function() {
				uni.navigateTo({
					url: '/pages/ucenter/help/help'
				});
			},

			createQrcode: function() {
				//二维码生成
				util.request(
					api.QrCodeCreate, {
						path: '/pages/index/index'
					},
					'POST'
				).then(function(res) {
					console.log(res);
					uni.previewImage({
						current: res.data.imgUrl,
						// 当前显示图片的http链接
						urls: [res.data.imgUrl] // 需要预览的图片http链接列表
					});
				});
			},

			exitLogin: function(e) {
				let type = e.target.dataset.type;
				let msg = type == 1 ? '是否切换账号？' : '退出登录？';
				uni.showModal({
					title: '',
					confirmColor: '#D77958',
					content: msg,
					success: function(res) {
						if (!res.confirm) {
							return;
						}
						util.request(api.AuthLogout, {}, 'POST');
						app.globalData = {};
						uni.removeStorageSync('token');
						uni.removeStorageSync('userInfo');
						console.log(type);
						if (type == 1) {
							//切换账号
							uni.navigateTo({
								url: '/pages/auth/login/login?type=' + type
							});
						} else {
							uni.reLaunch({
								url: '/pages/tabBar/ucenter/index/index'
							});
						}
					}
				});
			},

			goMemberCenter() {
				uni.navigateTo({
					url: '/pages/member/memberCenter/memberCenter'
				});
			},

			goBuyMember() {
				uni.navigateTo({
					url: '/pages/member/buyMember/buyMember'
				});
			},

			goIm() {
				uni.navigateTo({
					url: '/pages/im/im'
				});
			}
		}
	};
</script>
<style>
	page {
		height: 100%;
		width: 100%;
		background: #f4f4f4;
	}

	.container {
		background: transparent;
		height: auto;
		width: 100%;
		padding: 0 30rpx 40rpx;
	}

	.tabbar.data-v-56e9c485 {
		border: none !important;
	}

	.top {
		height: 274rpx;
		background: url('@/static/images/my/rectangle6.png') no-repeat center bottom;
		background-size: 750rpx 274rpx;
	}

	.profile-info {
		display: flex;
		align-items: center;

		padding: 30rpx 0 0 42rpx;
		font-size: 28rpx;
	}

	.profile-info-backimg {
		width: 100%;
		height: 180rpx;
		/* z-index: -1; */
		position: absolute;
	}

	.profile-info .avatar {
		height: 108rpx;
		width: 108rpx;
		border-radius: 50%;
		border: 2rpx solid #fff;
	}

	.profile-info .info {
		flex: 1;
		height: 108rpx;
		padding: 16rpx 0 0 48rpx;
		color: #fff;
		margin: 0 20rpx 0 0;
	}

	.user-name-wrapper {
		height: 36rpx;
		margin: 0 0 20rpx 0;
		display: flex;
		align-items: center;
		color: #000;
	}

	.profile-info .name {
		font-size: 34rpx;
		margin-bottom: 5rpx;
		max-width: 340rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.profile-info .cert {
		display: flex;
		height: 26rpx;
		line-height: 26rpx;
		font-size: 26rpx;
		color: #d77958;
	}

	.profile-info .plus {
		font-size: 21.5rpx;
		width: 120rpx;
		padding-left: 2rpx;
		padding-right: 2rpx;
		line-height: 40rpx;
		margin: 4rpx;
	}

	.profile-info-img-star {
		width: 10rpx;
		height: 10rpx;
	}

	.profile-info .level {
		display: block;
		height: 30rpx;
		line-height: 30rpx;
		margin-bottom: 10rpx;
		color: #7f7f7f;
		font-size: 30rpx;
	}

	.profile-info-qr-image {
		width: 80rpx;
		height: 80rpx;
		margin-top: 30rpx;
		margin-left: 150rpx;
	}

	.process {
		border-radius: 2rpx;
	}

	.user_tool {
		height: 250rpx;
		background: #fff;
		border-radius: 10rpx;
		margin: 15rpx 0;
	}

	.user_tool_row {
		height: 86rpx;
		line-height: 86rpx;
	}

	.user_tool_row_title {
		height: 86rpx;
		font-weight: 550;
		line-height: 86rpx;
		margin-left: 35rpx;
		font-size: 32rpx;
		color: #000;
	}

	.user_tool_row_title_left {
		float: left;
	}

	.user_tool_column {
		height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.user_tool_column_item {
		width: 25%;
		height: 100rpx;
		background: #fff;
		text-align: center;
		position: relative;
		margin-top: 5rpx;
	}

	.user_tool_column_item_text {
		margin-top: 5rpx;
		font-size: 26rpx;
		color: #555;
	}

	.user_tool_column_item_image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 5rpx;
	}

	.user_area {
		width: 100%;
		height: 226rpx;
		/* margin: 0 auto; */
		margin-top: -8rpx;
		background: #fff;
	}

	.user_row {
		height: 86rpx;
		line-height: 86rpx;
		border-bottom: 1px solid #fafafa;
	}

	.user_row_left {
		float: left;
		height: 86rpx;
		font-weight: 550;
		line-height: 86rpx;
		margin-left: 35rpx;
		font-size: 26rpx;
		letter-spacing: 1rpx;
		color: #000;
		font-size: 32rpx;
	}

	.user_row_right {
		/* border: 1px solid #757575; */
		float: right;
		height: 40rpx;
		width: 40rpx;
		font-weight: 550;
		line-height: 86rpx;
		margin-right: 30rpx;
		margin-top: 24rpx;
	}

	.user_column {
		/* border: 1px solid black; */
		height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.user_column_item {
		width: 30%;
		height: 140rpx;
		background: #fff;
		text-align: center;
		position: relative;
	}

	.user_column_item_badge {
		height: 30rpx;
		width: 30rpx;
		position: absolute;
		background: #b4282d;
		color: #fff;
		border-radius: 50%;
		margin-top: 20rpx;
		margin-left: 40rpx;
		font-size: 20rpx;
	}

	.user_column_item_image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 30rpx;
	}

	.user_column_item_text {
		/* border: 1px solid black; */
		margin-top: 5rpx;
		font-size: 24rpx;
		color: #555;
		/*color: #252a48;*/
	}

	.separate {
		background: #e0e3da;
		width: 100%;
		height: 6rpx;
	}

	.user_column_item_phone {
		width: 30%;
		height: 140rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		float: left;
		background: #fff;
		border-radius: 0;
	}

	.user_column_item_phone::after {
		border: none;
		border-radius: 0;
	}

	.logout {
		margin-top: 28rpx;
		height: 84rpx;
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		background: #fff;
		font-size: 28rpx;
		border-radius: 10rpx;
	}

	.switchaccount {
		margin-top: 28rpx;
		height: 84rpx;
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		background: #fff;
		font-size: 28rpx;
		color: #d77958;
		border-radius: 10rpx;
	}

	/* 新版页面 */
	.main-module {
		border-radius: 10rpx;
		background: #fff;
		height: 106rpx;
		margin: 28rpx 0;
		padding: 24rpx 40rpx 16rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.coupon-block,
	.favor-good {
		display: flex;
		flex-direction: column;
		height: 66rpx;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		line-height: 24rpx;
	}

	.devide-line {
		height: 80rpx;
		width: 2rpx;
		background: #bbb;
	}

	.main-module .num {
		font-weight: bold;
		font-size: 24rpx;
	}

	.main-module .module-text {
		color: #000;
		font-size: 24rpx;
	}

	.order-block {
		height: 180rpx;
		border-radius: 14rpx;
		background: #fff;
		margin: -80rpx 0 30rpx;
		width: 690rpx;
	}

	.my-order-title {
		height: 28rpx;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 0 40rpx 0;
	}

	.my-order-title>view:first-child {
		font-weight: bold;
	}

	.whole-order {
		color: #85868a;
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}

	.order-module {
		height: 180rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
	}

	.order-module .devide-img {
		width: 12rpx;
		height: 134rpx;
		margin: 0 -24rpx 0 -20rpx;
	}

	.tool-module {
		height: 80rpx;
		/* padding:24rpx 22rpx; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* margin:28rpx 0; */
	}

	.middle-module-wrapper {
		padding: 10rpx 30rpx 8rpx 26rpx;
		border-radius: 14rpx;
		background: #fff;
	}

	.middle-module .tool-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		width: 644rpx;
		height: 84rpx;
	}

	.middle-module .tool-item:last-child .line-right {
		border: none;
	}

	.line-right {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #efefef;
		height: 84rpx;
	}

	.middle-module .tool-img {
		width: 28rpx;
		height: 28rpx;
		margin: 0 18rpx 0 0;
	}

	.line-right .arrow {
		width: 28rpx;
		height: 20rpx;
		opacity: 0.8;
	}

	.tool-img {
		width: 72rpx;
		height: 58rpx;
		margin-bottom: 20rpx;
	}

	.tool-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
		/* flex:1; */
		width: 100rpx;
	}

	.tool-item .tool-text {
		font-size: 28rpx;
		line-height: 28rpx;
		color: #1e1e1e;
	}

	.order-block .tool-item .tool-text {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.middle-module .tool-item .tool-text {
		color: #343333;
	}

	.tool-item .middle-module {}

	.tool-module.bottom-module {
		margin: 40rpx 0 0;
	}

	.member-crown {
		width: 48rpx;
		height: 48rpx;
		z-index: 999;
	}

	.jz-badge {
		width: 34rpx;
		height: 34rpx;
		background: linear-gradient(0deg, #f1e3c8 0%, #e6c162 100%);
		border-radius: 50%;
		margin: 0 0 14rpx 0;
		font-size: 32rpx;
		color: #5d3a11;
		line-height: 32rpx;
		text-align: center;
		margin: 0 0 0 14rpx;
	}

	.jz-member-wrappe {
		max-width: 210rpx;
	}

	.not-member {
		width: 210rpx;
		height: 42rpx;
		background: linear-gradient(78deg, #f1e3c8, #e6c162);
		border-radius: 22rpx 0 0 22rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 24rpx;
		color: #5d3a11;
	}

	.is-member {
		width: 200rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #5d3a11;
	}

	.is-member .is-member-right {
		background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/member/member-star1.png') no-repeat center center;
		background-size: 100% 100%;
		height: 48rpx;
		display: flex;
		align-items: center;
		width: 200rpx;
		padding-left: 52rpx;
	}

	.is-member .is-member-right text {
		font-size: 24rpx;
	}

	.recommend-module {
		height: 750rpx;
		height: 148rpx;
		padding: 0 28rpx;
		margin: -28rpx 0 0;
		background: #09afff;
	}

	.recommend-main {
		width: 696rpx;
		height: 148rpx;
		padding: 0 28rpx;
		background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/member/recommend-bg.png') no-repeat center top;
		background-size: 100% 100%;
		color: #fff;
	}

	.recommend-top {
		height: 84rpx;
		display: flex;
		font-size: 30rpx;
		font-weight: bold;
		align-items: center;
		justify-content: space-between;
	}

	.recommend-top image {
		width: 42rpx;
		height: 42rpx;
		margin: 0 30rpx 0 0;
	}

	.recommend-top>text {
		flex: 1;
	}

	.recomend-center {
		width: 168rpx;
		height: 44rpx;
		background: #efd671;
		border-radius: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #2a2a2a;
	}

	.adv-text {
		height: 64rpx;
		line-height: 64rpx;
		font-size: 24rpx;
	}

	.no-login {
		width: 158rpx;
		height: 45rpx;
		background: #E9C9AF;
		border-radius: 23rpx;
		opacity: 0.7;
		line-height: 45rpx;
		padding: 0 15rpx;
	}

	.no-login-area {
		width: 126rpx;
		height: 21rpx;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		font-size: 21rpx;
		color: #333333;
	}

	.kouhao {
		margin: 30rpx 145rpx 200rpx;
		width: 451rpx;
		height: 135rpx;
		background-image: url('https://mall.zhaijieshi.cc/file/wx-huawang/db.png');
		background-size: cover;
		background-position: center;

	}
</style>