h5-elab-open-ownerUnion/pages/homePage/homePage.vue

<template>
	<view class="content" >
		<view class="topSection">
			<image class="bg_top" src="https://dm.static.elab-plus.com/yezhu/h5/backgroundImg.png" mode=""></image>
			<view class="liveContent">
				<view class="backDiv"></view>
				<view class="title">分享好房 · 躺平赚钱</view>
				<view class="subTitle"></view>
				<view class="levelDiv"
					style="background: url('https://dm.static.elab-plus.com/yezhu/h5/icon_line_back.png') center/100% 100% no-repeat;">
					<view class="" v-if="userInfo.userId">
						<view class="level_top" v-if="userInfo.ownersUnion">
							<image class="level_icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_Level.png" mode="">
							</image>
							<view class="level_text">{{userInfo.curlevel?'Lv'+userInfo.curlevel:''}}</view>
							<view class="level_des" v-if="!userInfo.nextIncome">/当前已达到最高等级</view>
							<view class="level_des" v-else>/达到 {{userInfo.nextIncome}} 收益可升级</view>
							<view class="level_update" v-if="false">
								<text>升级攻略</text>
								<image class="level_right_icon"
									src="https://dm.static.elab-plus.com/yezhu/h5/icon_right.png" mode=""></image>
							</view>
						</view>
						<view class="level_top" v-else @click="toYezhu">
							<image class="level_icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_Level.png" mode="">
							</image>
							<view class="level_text_login">业主认证</view>
							<view class="level_des"></view>
							<view class="level_update">
								<text>立即认证</text>
								<image class="level_right_icon"
									src="https://dm.static.elab-plus.com/yezhu/h5/icon_right.png" mode=""></image>
							</view>
						</view>
					</view>
					
					<view class="level_top" v-else @click="toLogin">
						<image class="level_icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_Level.png" mode="">
						</image>
						<view class="level_text_login">登录</view>
						<view class="level_des"></view>
						<view class="level_update">
							<text>立即登录</text>
							<image class="level_right_icon"
								src="https://dm.static.elab-plus.com/yezhu/h5/icon_right.png" mode=""></image>
						</view>
					</view>
					<view class="" v-if="userInfo.userId">
						<view class="level_bottom" v-if="userInfo.ownersUnion">
							<levelView :currentLevel='userInfo.curIncome' :nextLevel='userInfo.nextIncome?userInfo.nextIncome:userInfo.curIncome' :currentLevelTxt='userInfo.curlevel' :nextLevelTxt='userInfo.nextIncome?userInfo.nextLevel:userInfo.curlevel'>
							</levelView>
						</view>
						<view class="level_bottom_login" v-else >
							点此进行业主认证，审核后实时等级升级
						</view>
					</view>
					
					<view class="level_bottom_login" v-else >
						点此进行登录注册，开始赚钱吧
					</view>
				</view>
			</view>
		</view>
		<view class="content_body" :style="{background:color4}">
			<view class="content_beginner_guide" v-if="showGuide">
				<view class="title">
					<text class="title_txt" :style="{color:contentColor}">- 新手引导 -</text>
					<view class="title_right">
						<text class="title_right_txt" :style="{color:contentColor}" @click="upLoadView(false)">收起</text>
						<image class="title_right_cion" src="https://dm.static.elab-plus.com/yezhu/icon_shouqi.png"
							mode=""></image>
					</view>

				</view>
				<view class="guide_content">
					<view class="item_guide">
						<image class="guide_img" src="https://dm.static.elab-plus.com/yezhu/icon_yezhu.png" mode="">
						</image>
						<text class="guide_title" :style="{color:titleColor}" @click="clearToken">业主认证</text>
						<text class="guide_desc" :style="{color:contentColor}">业主认证审核\n实时等级升级</text>
					</view>
					<image class="icon_guide" src="https://dm.static.elab-plus.com/yezhu/icon_to_guide.png" mode="">
					</image>
					<view class="item_guide">
						<image class="guide_img" style="width: 72rpx;height: 72rpx;margin-top: 5rpx;"
							src="https://dm.static.elab-plus.com/yezhu/icon_pyq.png" mode=""></image>
						<text class="guide_title" :style="{color:titleColor}">分享项目</text>
						<text class="guide_desc" :style="{color:contentColor}">分享到朋友圈\n自动计算收益</text>
					</view>
					<image class="icon_guide" src="https://dm.static.elab-plus.com/yezhu/icon_to_guide.png" mode="">
					</image>
					<view class="item_guide">
						<image class="guide_img" style="width: 58rpx;height: 68rpx;margin-top: 9rpx;"
							src="https://dm.static.elab-plus.com/yezhu/icon_yz_money.png" mode=""></image>
						<text class="guide_title" :style="{color:titleColor}">提现到微信</text>
						<text class="guide_desc" :style="{color:contentColor}">实时查看收益\n快速提现到账</text>
					</view>
				</view>

			</view>
			<view class="content_beginner_guide_" v-else @click="upLoadView(true)">
				<text class="title_txt" :style="{color:contentColor}">展开新手引导</text>
				<image class="title_right_cion" src="../../static/icons/icon_down_.png"
					mode=""></image>
			</view>
			<view class="content_tab">
				<view class="tab_item" @click="toYezhu">
					<image class="icon_tab"  src="../../static/icons/icon_zcyz_user.png" mode=""></image>
					<text class="txt_tab" :style="{color:titleColor}">业主认证</text>
				</view>
				<view class="tab_item" @click="toShouYiPage">
					<image class="icon_tab" src="../../static/icons/icon_shouyi_user.png" mode=""></image>
					<text class="txt_tab" :style="{color:titleColor}">收益排行榜</text>
				</view>
				<view class="tab_item" @click="goReportPage">
					<image class="icon_tab" src="../../static/icons/icon_report_user.png" mode=""></image>
					<text class="txt_tab" :style="{color:titleColor}">效果报表</text>
				</view>
				<view class="tab_item" @click="showMine">
					<image class="icon_tab" src="../../static/icons/icon_user_mine.png" mode=""></image>
					<text class="txt_tab" :style="{color:titleColor}">我的信息</text>
				</view>
			</view>
			<view class="content_tuiguang" v-if="userInfo.userId">
				<view class="content_tuiguang_city">
					<view class="city_num" :style="{color:titleColor}"><countTo :startVal='0' :endVal='Number(userInfo.taskCount)' :duration='3000'></countTo>个</view>
					<text class="city_num_desc" :style="{color:contentColor}">推广任务</text>
				</view>
				<view class="content_tuiguang_money"> 
					<view class="money_num" :style="{color:color2}"> ￥<countTo :startVal='0' :decimals='2' :endVal='Number(Number(userInfo.surplusTaskAmount).toFixed(2))' :duration='1000'></countTo></view>
					<text class="money_num_des" :style="{color:contentColor}">剩余任务金额</text>
				</view>
			</view>
			
			<view class="content_list">
				<view class="content_title" :style="{color:titleColor}">
					<view class="content_title_poi">
					</view>
					任务列表
				</view>
				<view class="content_hongbao" v-if="registAmount">
					<view class="hongbao_left">
						<image class="icon_hongbao" src="https://dm.static.elab-plus.com/yezhu/icon_hongbao.png"
							mode=""></image>
						<view class="hongbao_left_info">
							<text class="hongbao_title">邀请好友注册</text>
							<text class="hongbao_money">完成邀请，可获得 ¥{{registAmount}}/人</text>
						</view>
					</view>
					<view class="hongbao_right" @click="toShareCard('',1)">
						邀请好友
					</view>
				</view>
				
				<view class="content_tuiguang_new" style="height: auto;">
					<view class="content_tuiguang_city">
						<view class="city_list" style="margin-top: 30rpx;margin-bottom: 30rpx;" @click="showOptions(1)">
							<text class="city_name">{{city}}</text>
							<image class="city_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
								mode=""></image>
						</view>
					</view>
					<view class="content_tuiguang_money" >
						<view class="money_list" style="margin-top: 30rpx;margin-bottom: 30rpx;" @click="showOptions(2)">
							<text class="money_name" >{{typeName}}</text>
							<image class="money_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
								mode=""></image>
						</view>
					</view>
				</view>

				<view class="list_item" v-for="(item,index) in  houseList" :key='index'>
					<view class="list_item" @click="goDetailAction(item,1)">
						<image class="house_img" :src="item.image" mode="aspectFill"></image>
						<view class="item_content" >
							<text class="house_name" :style="{color:titleColor}">{{item.name}}</text>
							<view class="house_hk" :style="{color:color2}" v-if="item.taskCategory">
								<text class="house_hk_"  v-for="(item1,index1) in item.taskCategory" :key='index1'>{{item1.category}} ¥{{item1.unitPrice}}/人</text>
							</view>
							<text class="house_hk" v-else></text>
							<view class="house_address">
								<image src="https://dm.static.elab-plus.com/yezhu/icon_location.png" mode=""></image>
								<text style="width: 100%;" :style="{color:contentColor}">{{item.city}} {{item.minPrice?"· "+item.minPrice:""}}{{item.maxPrice?'-'+item.maxPrice:""}}{{(item.maxPrice||item.minPrice)?'元/m²':''}} {{item.bizFormat?'· '+item.bizFormat:''}}</text>
							</view>
							<view class="house_num">
								<image src="https://dm.static.elab-plus.com/yezhu/icon_home_house.png" mode=""></image>
								<text style="width: 100%;" :style="{color:contentColor}">{{item.projectLayout}}</text>
							</view>
							<text class="house_desc" :style="{color:contentColor}">{{item.taskEndTime}}</text>
						</view> 
					</view>
					
					<view class="item_share" :style="{background:color1}" @click="toShareCard(item.projectId,2)">
						<image class="icon_share" src="https://dm.static.elab-plus.com/yezhu/icon_small_share.png"
							mode=""></image>
						<text class="icon_text">分享</text>
					</view>
					<view class="item_bg"></view>
				</view>
				
				<view class="com_noMore_text" :style="{color:contentColor}" v-if="noMore && houseList.length > 0">没有更多了</view>
				
				<view class="empty" v-if="houseList.length == 0">
					<image class="emptyImg" src="https://dm.static.elab-plus.com/yezhu/h5/icon_empty.png" mode=""></image>
					<view class="text">暂无数据</view>
				</view>
			</view>


		</view>
		<login ref='login'></login>
		<login-notice ref='login_notice'></login-notice>
		<dmMine ref='mine' :userInfo='userInfo'></dmMine>
		<dmHomeChoose ref='chooseType' :option='optionType'  @chooiceType="chooiceType"></dmHomeChoose>
		<show-guide ref="showGuide" @registAction="toYezhu"></show-guide>
	</view>
</template>

<script>
	import levelView from '@/components/leve-view/leve-view.vue';
	import dmMine from '@/components/subComponents/dmMine.vue'
	import dmHomeChoose from "@/components/subComponents/dmHomeChoose.vue"
	import showGuide from '@/components/subComponents/showGuide.vue'
	import countTo from 'vue-count-to';
	let app = getApp();
	export default {
		data() {
			return {
				color4: '#F5F5F7',
				color2:"",
				color1:"",
				contentColor:"",
				titleColor:"",
				houseList: [],
				userId: "",
				token: "",
				clickCount:8,
				userInfo: {
					"userId": "",
					"name": null,
					"head": null,
					"curlevel": null,
					"curIncome": null,
					"nextLevel": null,
					"nextIncome": null,
					"ownersUnion": false,
					"totalIncome": null,
					"taskCount": null,
					"surplusTaskAmount": null,
					"cardNo":"",
					"phone":"",
					"room":"",
					"sex":""
				},
				showGuide:true,
				total:0,
				pageNo:1,
				pageSize:10,
				noMore:false,
				city:"筛选城市",
				type:"",
				typeName:"任务类型",
				optionType:1,
				registAmount:null,
				shareToken:"",
				isVisiable:true,
				isPageHide:false,
			}
		},
		mounted() {
			window.addEventListener('pageshow', function(){        
			    if(this.isPageHide) {
			        window.location.reload();
			    }
			})
            window.addEventListener('pagehide',function(){
				this.isPageHide = true;
			})
			this.isFirst = true
			this.color4 = app.globalData.color4;
			this.color2 = app.globalData.color2;
			this.color1 = app.globalData.color1;
			this.contentColor = app.globalData.contentColor;
			this.titleColor = app.globalData.titleColor;
			this.getData();
			uni.$on("request",()=>{
				this.getData();
				this.$refs.login_notice.hide();
				this.$refs.login.hide();
			})
			let projectId = this.getQueryString('projectId');
			this.toPage(projectId);
		},
		onShow() {
			this.isVisiable = true;
			this.getSingle();
		},
		onHide() {
			this.isVisiable = false
		},
		onPullDownRefresh() {
			this.getData();
		},
		onReachBottom() {
			if(this.houseList.length<this.total){
				this.pageNo ++;
				this.getHomePage();
			}
			
		},
		methods: {
			toPage(projectId){
				if(projectId){
					let e = {
						projectId
					}
					this.goDetailAction(e,2)
				}
			},
			getQueryString(name){
				var reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(\\s|&|$)", "i");
				return reg.test(location.href) ? unescape(RegExp.$2.replace(/\+/g, " ")) : ""
			},
			clearToken(){
				
			},
			getData(){
				this.pageNo = 1;
				this.getUserInfo();
				this.getHomePage();
				this.getRegistTask(); 
				this.getSingle();
			},
			chooiceType(e){
				this.city = e.city==''?"筛选城市":(e.city).split('市')[0];
				this.type = e.type;
				this.typeName = e.typeName==''?'任务类型':e.typeName;
				this.pageNo = 1;
				this.getHomePage();
			},
			async getRegistTask(){
				if(app.globalData.userId){
					let res = await this.$myRequest({
						url: "/task/registTask",
						method:"GET",
						data: {
							"userId":app.globalData.userId,
						}
					})
					if(res.data.success){
						this.registAmount = res.data.single.amount||null
					}else{
						this.registAmount = null;
					}
				}
			},
			async getHomePage() {
				let ret = await this.$myRequest({
					url: "/project/homePage",
					data: {
						"city": this.city=='筛选城市'?'':this.city,
						"pageNo": this.pageNo,
						"pageSize": this.pageSize,
						"taskCategoryId": this.type,
						"userId":app.globalData.userId,
					}
				})
				if (ret.data.success) {
					let pageModel = ret.data.pageModel;
					let houseList = pageModel.resultSet || [];
					if(this.pageNo==1){
						this.houseList = [];
					}
					this.houseList = this.houseList.concat(houseList);
					this.total = pageModel.total||0;
					this.noMore = this.houseList.length==this.total
				}
			},
			async getUserInfo() {
				if(app.globalData.userId){
					let ret = await this.$myRequest({
						url: "/user/userInfo",
						data: {},
						method: "GET"
					});
					if (ret.data.success) {
						this.userInfo = ret.data.single || null;
						this.showGuide = this.userInfo.userId?this.userInfo.ownersUnion?false:true:true;
						if (this.showGuide) {
							this.$refs.showGuide.show()
						}else{
							this.$refs.showGuide.hide();
						}
					}
				}
			},
			// 调准项目详情
			goDetailAction(e,type) {
				if(type==1){
					if(this.userInfo.userId){
						uni.navigateTo({
							url: '../houseDetail/houseDetail?projectId='+e.projectId
						})
					}else{
						uni.$emit('unLogin')
					}
				}else{
					uni.navigateTo({
						url: '../houseDetail/houseDetail?projectId='+e.projectId
					})
				}
			},
			// 跳转至效果报表
			goReportPage() {
				if(this.userInfo.userId){
					uni.navigateTo({
						url: '../reportPage/reportPage'
					})
				}else{
					uni.$emit('unLogin')
				}
			},
			toShouYiPage() {
				if(this.userInfo.userId){
					uni.navigateTo({
						url: '../revenueRankingPage/revenueRankingPage'
					})
				}else{
					uni.$emit('unLogin')
				}
				
			},
			async toYezhu(){
				let ret = await this.$myRequest({
					url: "/user/regist/get",
					data: {
						"userId": app.globalData.userId,
					},
					method:"GET"
				})
				if (ret.data.success) {
				   let single = ret.data.single||null;//:0待审核1通过2拒绝
				   if(single){
					   if(single.approvalStatus==0||single.approvalStatus==1){
							uni.navigateTo({
								url: '../certificationResultPage/certificationResultPage'
							})
					   }else if(single.approvalStatus==2){
						   uni.navigateTo({
						   	url: '../ownerCertification/ownerCertification?mobile='+this.userInfo.phone
						   })
					   }
				   }else{
					   uni.navigateTo({
					   	url: '../ownerCertification/ownerCertification?mobile='+this.userInfo.phone
					   })
				   }
					
				}else{
					uni.showToast({
						icon:"none",
						title:ret.data.message
					})
				}
			},
			setEnv(){
				if (this.clickCount < 0) {
					this.clickCount = 8;
					uni.navigateTo({
						url:"../developSetting/developSetting"
					})
				} else {
					this.clickCount--;
				}
			},
			toShareCard(projectId,type){
				if(this.userInfo.userId){
					let href = location.origin+location.pathname;
					uni.navigateTo({
						url:'../shareCardPage/shareCardPage?page='+href+"&projectId="+projectId+"&type="+type
					})
				}else{
					uni.$emit('unLogin')
				}
			},
			toLogin(){
				uni.$emit('login')
			},
			upLoadView(isShow){
				this.showGuide = isShow;
			},
			showMine(){
				if(this.userInfo.userId){
					this.$refs.mine.show()
				}else{
					uni.$emit('unLogin')
				}
				
			},
			showOptions(option){
				this.$refs.chooseType.setOptionType(option);
				this.$forceUpdate();
				this.$refs.chooseType.show()
			},
			async getSingle(){
				let params = {
					"projectId": "",
					"userId": getApp().globalData.userId
				}
				let res = await this.$myRequest({
					url: '/share_token/generate',
					data: params
				});
				if(res.data.success){
					this.shareToken = res.data.single;
					this.queryProtocolConfigView();
				}
			},
			async queryProtocolConfigView(){
				let res = await this.$myRequest({
					url: "/project/queryProtocolConfigView",
					data: {},
				});
				if(res.data.success){
					let single = res.data.single;
					if(this.isVisiable){
						this.config(single.shareName,single.shareRemark,location.origin+location.pathname +"?shareToken="+this.shareToken,single.shareLogoImage)
					}
				}
			}
		},
		components: {
			levelView,
			dmMine,
			dmHomeChoose,
			showGuide,
			countTo
		}
	}
</script>

<style lang="scss" scoped>
	
	.content {
		width: 100%;
		height: 100%;
		position: relative;

		.topSection {
			position: relative;
			z-index: 100;
		}

		.bg_top {
			width: 100%;
			height: 470rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 100;
		}

		.liveContent {
			width: 100%;
			height: 470rpx;
			z-index: 100;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.backDiv {
				top: 0;
				left: 0;
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: rgba($color: #000000, $alpha: 0.1);
				z-index: 1;
			}

			.title {
				margin-top: 96rpx;
				font-size: 44rpx;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				z-index: 2;
			}

			.subTitle {
				font-size: 28rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: left;
				color: #ffffff;
				margin-top: 20rpx;
				height: 40rpx;
				z-index: 2;
			}

			.levelDiv {
				margin-top: 82rpx;
				width: calc(100% - 60rpx);
				height: 152rpx;
				z-index: 2;
				display: flex;
				flex-direction: column;
				padding: 25rpx 30rpx;
				box-sizing: border-box;

				.level_top {
					width: 100%;
					display: flex;
					justify-content: space-between;
					flex-wrap: nowrap;
					align-items: center;
					margin-top: 5rpx;
					

					.level_icon {
						width: 37rpx;
						min-width: 37rpx;
						max-width: 37rpx;
						height: 35rpx;
						margin-right: 13rpx;
						margin-top: -5rpx;
					}

					.level_text {
						font-size: 48rpx;
						font-family: FontName, FontName-Regular;
						font-weight: 500;
						text-align: left;
						font-style: oblique;
						color: #f5c8a8;
						line-height: 40rpx;
						letter-spacing: 1.92rpx;
						margin-right: 8rpx;
						margin-top: -7rpx;
					}
					
					.level_text_login{
						font-size: 40rpx;
						font-family: FontName, FontName-Regular;
						font-weight: 400;
						text-align: left;
						color: #f5c8a8;
					}

					.level_des {
						font-size: 22rpx;
						font-family: Verdana, Verdana-Regular;
						font-weight: 400;
						text-align: left;
						color: #f5c8a8;
						white-space: nowrap;
						flex-grow: 1;
					}

					.level_update {
						font-size: 24rpx;
						font-family: Verdana, Verdana-Bold;
						font-weight: 700;
						text-align: right;
						color: #f5c8a8;
						letter-spacing: 0.96rpx;
						display: flex;
						align-items: center;

						.level_right_icon {
							margin-left: 8rpx;
							width: 6rpx;
							height: 7rpx;
						}
					}
				}

                 .level_bottom_login{
                 	font-size: 22rpx;
                 	font-family: Verdana, Verdana-Regular;
                 	font-weight: 400;
                 	text-align: left;
                 	color: #f5c8a8;
                 	margin-top: 20rpx;
                 }
			}

		}

		.content_body {
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			height: calc(100% - 470rpx);
			margin-top: -24rpx;
			z-index: 102;
			position: relative;
			padding: 1rpx;
			
			

			.content_beginner_guide {
				height: 354rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				margin-top: 40rpx;
				background: #ffffff;
				border-radius: 16rpx;
				box-sizing: border-box;

				.title {
					width: 100%;
					position: relative;
					height: 110rpx;

					.title_txt {
						font-size: 32rpx;
						font-family: FontName, FontName-Regular;
						font-weight: 400;
						text-align: left;
						position: absolute;
						left: 50%;
						top: 30rpx;
						transform: translateX(-50%);
					}

					.title_right {
						position: absolute;
						right: 20rpx;
						top: 40rpx;
						display: flex;
						align-items: center;

						.title_right_txt {
							font-size: 24rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: right;
							color: #b1b1b1;
						}

						.title_right_cion {
							width: 10rpx;
							height: 6rpx;
							margin-left: 10rpx;
						}
					}


				}

				.guide_content {
					display: flex;
					padding-left: 40rpx;
					padding-right: 40rpx;
					box-sizing: border-box;
					justify-content: space-between;

					.item_guide {
						display: flex;
						flex-direction: column;
						align-items: center;

						.guide_img {
							width: 58rpx;
							height: 74rpx;
							margin-bottom: 17rpx;
						}

						.guide_title {
							font-size: 26rpx;
							font-family: Verdana, Verdana-Bold;
							font-weight: 700;
							text-align: center;
							color: #2c2c2c;
							margin-bottom: 8rpx;
						}

						.guide_desc {
							font-size: 22rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: center;
							color: #b1b1b1;
						}
					}

					.icon_guide {
						width: 48rpx;
						height: 32rpx;
						margin-top: 20rpx;
					}
				}

			}

            .content_beginner_guide_{
				width: 100%;
				position: relative;
				margin-top: 20rpx;
				margin-bottom: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			
				.title_txt {
					font-size: 32rpx;
					font-family: FontName, FontName-Regular;
					font-weight: 400;
					text-align: left;
					color: #b1b1b1;
					
				}
			
				.title_right_cion {
					width: 10rpx;
					height: 6rpx;
					margin-left: 10rpx;
				}
				
			}
			.content_tab {
				display: flex;
				box-sizing: border-box;
				height: 180rpx;
				background: #ffffff;
				border-radius: 16rpx;
				margin-top: 14rpx;
				padding-left: 40rpx;
				padding-right: 40rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				justify-content: space-between;

				.tab_item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.icon_tab {
						width: 96rpx;
						height: 96rpx;
					}

					.txt_tab {
						font-size: 24rpx;
						font-family: Verdana, Verdana-Regular;
						font-weight: 400;
						text-align: center;
						color: #262626;
						margin-top: 2rpx;
					}
				}
			}

			.content_tuiguang {
				height: 140rpx;
				display: flex;
				box-sizing: border-box;
				background: #ffffff;
				border-radius: 16rpx;
				margin-top: 14rpx;
				padding-left: 40rpx;
				padding-right: 40rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				justify-content: space-between;
				position: relative;

				.content_tuiguang_city {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 50%;

					.city_num {
						font-size: 40rpx;
						font-family: DIN Alternate, DIN Alternate-Bold;
						font-weight: 700;
						text-align: center;
						color: #262626;

					}

					.city_num_desc {
						font-size: 24rpx;
						font-family: Verdana, Verdana-Regular;
						font-weight: 400;
						text-align: center;
						color: #b1b1b1;
					}

					.city_list {
						display: flex;
						justify-content: center;
						margin-top: 52rpx;
						align-items: center;

						.city_name {
							font-size: 26rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							color: #262626;
						}

						.city_more {
							width: 26rpx;
							height: 26rpx;
							margin-left: 8rpx;
						}
					}
				}

				.content_tuiguang_money {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 50%;

					.money_num {
						font-size: 40rpx;
						font-family: DIN Alternate, DIN Alternate-Bold;
						font-weight: 700;
						text-align: center;
						color: #fd8f3c;
					}

					.money_num_des {
						font-size: 24rpx;
						font-family: Verdana, Verdana-Regular;
						font-weight: 400;
						text-align: center;
						color: #b1b1b1;
					}

					.money_list {
						display: flex;
						justify-content: center;
						margin-top: 52rpx;
						align-items: center;
						z-index: 11;

						.money_name {
							font-size: 26rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							color: #262626;
						}

						.money_more {
							width: 26rpx;
							height: 26rpx;
							margin-left: 8rpx;
						}
					}

					.money_bg {
						position: absolute;
						right: 0rpx;
						top: 0;
						width: 220rpx;
						height: 220rpx;
					}
				}
			}

			.content_list {
				margin-top: 60rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				padding-bottom: 50rpx;
				
				.content_tuiguang_new{
					display: flex;
					box-sizing: border-box;
					background: #ffffff;
					border-radius: 16rpx;
					margin-top: 20rpx;
					padding-left: 40rpx;
					padding-right: 40rpx;
					justify-content: space-between;
					position: relative;
					.content_tuiguang_city {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 50%;
					
						.city_num {
							font-size: 40rpx;
							font-family: DIN Alternate, DIN Alternate-Bold;
							font-weight: 700;
							text-align: center;
							color: #262626;
					
						}
					
						.city_num_desc {
							font-size: 24rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: center;
							color: #b1b1b1;
						}
					
						.city_list {
							display: flex;
							justify-content: center;
							margin-top: 52rpx;
							align-items: center;
					
							.city_name {
								font-size: 26rpx;
								font-family: Verdana, Verdana-Regular;
								font-weight: 400;
								text-align: left;
								color: #262626;
							}
					
							.city_more {
								width: 26rpx;
								height: 26rpx;
								margin-left: 8rpx;
							}
						}
					}
					
					.content_tuiguang_money {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 50%;
					
						.money_num {
							font-size: 40rpx;
							font-family: DIN Alternate, DIN Alternate-Bold;
							font-weight: 700;
							text-align: center;
							color: #fd8f3c;
						}
					
						.money_num_des {
							font-size: 24rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: center;
							color: #b1b1b1;
						}
					
						.money_list {
							display: flex;
							justify-content: center;
							margin-top: 52rpx;
							align-items: center;
							z-index: 11;
					
							.money_name {
								font-size: 26rpx;
								font-family: Verdana, Verdana-Regular;
								font-weight: 400;
								text-align: left;
								color: #262626;
							}
					
							.money_more {
								width: 26rpx;
								height: 26rpx;
								margin-left: 8rpx;
							}
						}
					
						.money_bg {
							position: absolute;
							right: 0rpx;
							top: 0;
							width: 220rpx;
							height: 220rpx;
						}
					}
				}

				.content_title {
					display: flex;
					font-size: 32rpx;
					font-family: Verdana, Verdana-Bold;
					font-weight: 700;
					text-align: left;
					color: #262626;
					align-items: center;

					.content_title_poi {
						width: 8rpx;
						height: 12rpx;
						background: #f07423;
						border-radius: 2rpx;
						margin-right: 8rpx;
					}
				}

				.content_hongbao {
					margin-top: 20rpx;
					height: 140rpx;
					background: linear-gradient(108deg, #ffb55f 9%, #f87523 96%);
					border-radius: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.hongbao_left {
						display: flex;
						margin-left: 26rpx;

						.icon_hongbao {
							width: 60rpx;
							height: 80rpx;
							margin-right: 20rpx;
						}

						.hongbao_left_info {
							display: flex;
							flex-direction: column;

							.hongbao_title {
								font-size: 30rpx;
								font-family: Verdana, Verdana-Bold;
								font-weight: 700;
								text-align: left;
								color: #ffffff;
							}

							.hongbao_money {
								font-size: 24rpx;
								font-family: Verdana, Verdana-Regular;
								font-weight: 400;
								text-align: left;
								color: #ffead8;
							}
						}

					}

					.hongbao_right {
						width: 140rpx;
						height: 56rpx;
						line-height: 56rpx;
						background: #ffffff;
						border-radius: 12rpx;
						font-size: 24rpx;
						font-family: Verdana, Verdana-Bold;
						font-weight: 700;
						text-align: center;
						color: #f07423;
						margin-right: 20rpx;
					}
				}

				.list_item {
					width: 100%;
					min-height: 280rpx;
					border-radius: 16rpx;
					display: flex;
					position: relative;
					margin-top: 20rpx;

					.house_img {
						width: 200rpx;
						height: 240rpx;
						min-width: 200rpx;
						z-index: 11;
						margin-top: 20rpx;
						margin-left: 20rpx;
						border-radius: 10rpx;
					}

					.item_content {
						display: flex;
						flex-direction: column;
						margin-left: 50rpx;
						z-index: 11;
						max-width: 51%;

						.house_name {
							width: 100%;
							font-size: 30rpx;
							font-family: Verdana, Verdana-Bold;
							font-weight: 700;
							text-align: left;
							margin-top: 20rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						.house_hk {
							width: 100%;
							font-size: 26rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							margin-top: 8rpx;
							.house_hk_{
								margin-right: 10rpx;
							}
						}

						.house_address {
							width: 100%;
							display: flex;
							font-size: 24rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							color: #b1b1b1;
							margin-top: 16rpx;

							image {
								width: 20rpx;
								height: 28rpx;
								margin-right: 8rpx;
								margin-top: 6rpx;
							}

							text {
								  width: 80%;
								  text-overflow: -o-ellipsis-lastline;
								  overflow: hidden;
								  text-overflow: ellipsis;
								  display: -webkit-box;
								  -webkit-line-clamp: 2;
								  line-clamp: 2;
								  -webkit-box-orient: vertical;
							}
						}

						.house_num {
							display: flex;
							font-size: 24rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							color: #b1b1b1;
							margin-top: 12rpx;

							image {
								width: 32rpx;
								height: 30rpx;
								margin-right: 8rpx;
							}

							text {
								  width: 80%;
								  text-overflow: -o-ellipsis-lastline;
								  overflow: hidden;
								  text-overflow: ellipsis;
								  display: -webkit-box;
								  -webkit-line-clamp: 2;
								  line-clamp: 2;
								  -webkit-box-orient: vertical;
							}
						}

						.house_desc {
							margin-top: 24rpx;
							font-size: 24rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							text-align: left;
							margin-bottom: 20rpx;
							word-break:break-all;
						}
					}

					.item_share {
						z-index: 11;
						display: flex;
						flex-direction: column;
						width: 70rpx;
						height: 100rpx;
						border-radius: 12rpx;
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						justify-content: center;
						align-items: center;

						.icon_share {
							width: 32rpx;
							height: 32rpx;
							margin-bottom: 6rpx;
						}

						.icon_text {
							font-size: 24rpx;
							font-family: Verdana, Verdana-Bold;
							font-weight: 700;
							text-align: center;
							color: #ffffff;
						}
					}

					.item_bg {
						position: absolute;
						left: 0;
						top: 0;
						width: 95%;
						height: 100%;
						background-color: #FFFFFF;
						border-radius: 16rpx;
						z-index: 10;
					}
				}
			}
		}
		
		.com_noMore_text{
			margin-top: 40rpx;
			font-size: 24rpx;
			font-family: Verdana, Verdana-Regular;
			font-weight: 400;
			text-align: center;
			color: #999999;
		}
		
		.empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			
			.emptyImg {
				width: 283rpx;
				height: 227rpx;
				margin-top: 100rpx;
			}
			.text {
				margin-top: -20rpx;
				font-size: 28rpx;
				margin-bottom: 50rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: center;
				color: #b1b3ba;
			}
		}
		
	}
</style>