mdapp/pages/index/index.vue

<template>
	<view class="page u-skeleton">
		<wm-watermark :text="userInfo.phone" :num="50"></wm-watermark>
		<!-- 经纪人信息卡片 -->
		<view class="userinfo-wrap u-skeleton-fillet box-shadow">
			<!-- 个人信息 -->
			<view class="userinfo">
				<view class="user">
					<view class="avatar-wrap" @click="pageTo('/pages/user/setting/avatar')">
						<u-avatar
							class="u-skeleton-circle"
							:src="userInfo.avatar"
							size="100"
							mode="circle"
						></u-avatar>
						<!-- :show-level="true" -->
						<view class="avatar-bg box-shadow"></view>
					</view>
					<view class="info">
						<view class="nickname u-skeleton-rect">
							{{userInfo.user_id ? userInfo.nickname ? `${userInfo.nickname}(${userInfo.dept_code || '暂无'})` : '未设置用户名'  : '未登录'}}
						</view>
					</view>
					<image v-if="userInfo.estate_govern && userInfo.estate_govern.length > 0" src="/static/index/i_c_1.png" class="scoped-scan-img" @click="scanHandle"></image>
				</view>
				<u-button
					v-if="!userInfo.user_id"
					class="u-skeleton-fillet"
					size="mini"
					type="primary"
					@click="pageTo('/pages/user/login/login')"
					:customStyle="{ margin: 0 }"
				>
					立即登录
				</u-button>
				<view
					style="padding-top: 16rpx;"
					v-if="userInfo.user_id" @click="pageTo('/pages/user/setting/setting')">
					<u-icon name="/static/index/i_c_2.png" size="40" style="display: inline-block;vertical-align: top;"></u-icon>
					<text style="display: inline-block;vertical-align: top;padding-left: 10rpx;">设置认证</text>
				</view>
			</view>
			<u-line length="650rpx" margin="30rpx 0 0"></u-line>
			<!-- 数据信息 -->
			<view class="datainfo">
				<view class="data-item" @click="pageTo('/pages/agent/recommend/list?filterStepStatus=1')">
					<view class="data u-skeleton-fillet">{{reportStepCountObj['1'] || 0}}</view>
					<view class="item u-skeleton-fillet">未到访</view>
				</view>
				<view class="data-item" @click="pageTo('/pages/agent/recommend/list?filterStepStatus=2')">
					<view class="data u-skeleton-fillet">{{reportStepCountObj['2'] || 0}}</view>
					<view class="item u-skeleton-fillet">已到访</view>
				</view>
				<view class="data-item" @click="pageTo('/pages/agent/recommend/list?filterStepStatus=3')">
					<view class="data u-skeleton-fillet">{{reportStepCountObj['3'] || 0}}</view>
					<view class="item u-skeleton-fillet">已认购</view>
				</view>
				<view class="data-item" @click="pageTo('/pages/agent/recommend/list?filterStepStatus=4')">
					<view class="data u-skeleton-fillet">
						{{reportStepCountObj['4'] || 0}}
					</view>
					<view class="item u-skeleton-fillet">已签约</view>
				</view>
				<view class="data-item" @click="pageTo('/pages/agent/recommend/list?filterStepStatus=5')">
					<view class="data u-skeleton-fillet">{{reportStepCountObj['5'] || 0}}</view>
					<view class="item u-skeleton-fillet">已结佣</view>
				</view>
			</view>
		</view>

		<!-- 功能卡片 -->
		<view class="scoped-entry">
			<view class="op" @click="pageTo('/pages/agent/recommend/create')">
				<u-image src="/static/index/i_e_1.png" mode="heightFix" height="146rpx" class="icon"></u-image>
			</view>
			<view class="op" @click="pageTo('/pages/agent/recommend/list')">
				<u-image src="/static/index/i_e_2.png" mode="heightFix" height="146rpx" class="icon"></u-image>
			</view>
			<view class="op" @click="pageTo('/pages/cust/list')">
				<u-image src="/static/index/i_e_3.png" mode="heightFix" height="146rpx" class="icon"></u-image>
			</view>
			<view v-if="userInfo.estate_govern && userInfo.estate_govern.length > 0" class="op" @click="pageTo('/pages/agent/recommend/estate')">
				<u-image src="/static/index/i_e_5.png" mode="heightFix" height="146rpx" class="icon"></u-image>
			</view>
			<view v-else class="op" @click="commonRulesShow = true">
				<u-image src="/static/index/i_e_4.png" mode="heightFix" height="146rpx" class="icon"></u-image>
			</view>
			<view v-if="curRoles == 1 || curRoles == 5 || curRoles == 6" class="op" @click="pageTo('/pages/saler/check')">
				<u-image src="/static/index/i_e_4c.png" mode="heightFix" height="146rpx" class="icon"></u-image>
			</view>
			<view v-if="GT == 1" class="op" @click="pageTo('/pages/saler/list')">
				<u-image src="/static/index/i_e_4s.png" mode="heightFix" height="146rpx" class="icon"></u-image>
			</view>
			<!-- <view v-if="curRoles == 1 || curRoles == 5 || curRoles == 7" class="op" @click="pageTo('/pages/agent/report/buycheck')">
				<u-image src="/static/index/i_e_6.png" mode="heightFix" height="146rpx" class="icon"></u-image>
			</view> -->
		</view>
		<!-- <view class="function-card-wrap">
			<view class="col-card-wrap">
				<view class="function-card box-shadow u-skeleton-fillet" @click="pageTo('/pages/agent/recommend/create')">
					<view class="title-wrap">
						<view class="main-title">
							<u-icon class="u-m-r-5" name="/static/icon/thump-up.png" size="32"></u-icon>
							️我要推荐
						</view>
						<view class="sub-title u-line-1">Recommend</view>
					</view>
					<u-image src="/static/icon/wenli1.png" mode="heightFix" height="144rpx" class="icon"></u-image>
				</view>
				<view class="function-card box-shadow u-skeleton-fillet"  @click="pageTo('/pages/agent/recommend/list')">
					<view class="title-wrap">
						<view class="main-title">
							<u-icon class="u-m-r-5" name="/static/icon/money.png" size="32"></u-icon>
							报备管理
						</view>
						<view class="sub-title u-line-1">Filing</view>
					</view>
					<u-image src="/static/icon/wenli2.png" mode="heightFix" height="144rpx" class="icon"></u-image>
				</view>
			</view>
			<view class="col-card-wrap">
				<view class="function-card box-shadow u-skeleton-fillet" @click="pageTo('/pages/cust/list')">
					<view class="title-wrap">
						<view class="main-title">
							<u-icon class="u-m-r-5" name="/static/icon/customer.png" size="32"></u-icon>
							客户管理
						</view>
						<view class="sub-title u-line-1">Customer</view>
					</view>
					<u-image src="/static/icon/wenli3.png" mode="heightFix" height="144rpx" class="icon"></u-image>
				</view>
				<view class="function-card box-shadow u-skeleton-fillet" @click="commonRulesShow = true">
					<view class="title-wrap">
						<view class="main-title">
							<u-icon class="u-m-r-5" name="/static/icon/book.png" size="32"></u-icon>
							奖励政策
						</view>
						<view class="sub-title u-line-1">Rules</view>
					</view>
					<u-image src="/static/icon/wenli4.png" mode="heightFix" height="144rpx" class="icon"></u-image>
				</view>
			</view>
		</view> -->

		<!-- 项目卡片 -->
		<view class="card-list-wrap box-shadow u-m-b-20">
			<view class="header-title-warp">
				<view class="title u-skeleton-rect">
					<u-icon class="u-m-r-10" name="/static/index/i_c_3.png" size="36"></u-icon>
					热销推荐
				</view>
				<!-- <view v-show="propertyList.length > 5" class="more u-skeleton-rect">
					更多
					<u-icon name="arrow-right"></u-icon>
				</view> -->
				<view class="more u-skeleton-rect" @click="this.isOneRow = !this.isOneRow">{{isOneRow ? '切换至双行' : '切换至单行'}}</view>
			</view>
			<view v-if="propertyList.length == 0" class="u-m-t-40 u-m-b-40"><u-empty mode="list" text="暂无在售房源"></u-empty></view>
			
			<view class="scoped-list-one" v-for="(item, one) in twoObj" :key="one">
				<view class="slo-title">{{item.str}}</view>
				<view :class="isOneRow ? 'property-row-wrap' : 'property-col-wrap'">
					<view class="property-body u-skeleton-fillet box-shadow" v-for="(item, index) in item.list" :key="index" @click="showDetail(index, item)">
						<view class="image-wrap">
							<text class="tag u-skeleton-rect">{{ item.estate_tag }}</text>
							<image class="u-skeleton-rect" :src="item.pri_image" mode="aspectFill"></image>
						</view>
						<view class="property-info-wrap">
							<view class="title u-skeleton-rect">{{ item.estate_name }}
								<text class="s">{{areaTypeObj[item.area_type]}}</text>
							</view>
							<view class="commission u-skeleton-rect" v-if="userInfo.auth_state == 1">预计奖励：{{ item.brokerage }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 平台佣金政策弹窗 -->
		<u-popup v-model="commonRulesShow" mode="center" width="80%" height="800rpx" border-radius="20" closeable>
			<view class="bwin-popup">
				<view class="popup-header">平台佣金政策</view>
				<view class="popup-body">需上传身份证进行实名认证（认证时，身份选择：有营业执照选'渠道/店东'，其余选'中介/员工'填写渠道的4位数推荐码）。认证通过后方可报备客户和获得佣金，各楼盘相关带看规则和佣金政策点击下方对应楼盘<!-- <u-parse :html="xxxxxxxxxx"></u-parse> --></view>
			</view>
		</u-popup>

		<!-- 项目佣金政策信息弹窗 -->
		<u-popup v-model="propertyPopupShow" mode="center" width="80%" height="90%" border-radius="20" closeable>
			<view class="bwin-popup">
				<view class="popup-header">{{ currentPropertyObj.estate_name + '介绍' }}</view>
				<view class="popup-body">
					<view class="scoped-popup-more" @click="oneImgHandle(currentPropertyObj)">
						<u-image src="/static/index/popup_bg_more.png" mode="heightFix" height="118rpx" class="icon"></u-image>
					</view>
					<u-parse :html="currentPropertyObj.introduce"></u-parse>
					<u-divider marginTop="20" marginBottom="20">详情</u-divider>
					<view class="property-info">
						<!-- <view class="item">
							<view class="item-title">基本情况：</view>
							<view class="item-info" style="text-decoration: underline;color: #2080f0;">点击查看楼盘一页纸</view>
						</view> -->
						<view class="item" v-if="userInfo.auth_state == 1">
							<view class="item-title">预计奖励：</view>
							<view class="item-info" style="color: red;font-weight: bold;">{{ currentPropertyObj.brokerage }}</view>
						</view>
						<view class="item">
							<view class="item-title">营销中心：</view>
							<view class="item-info">{{ currentPropertyObj.address }}</view>
						</view>
						<view class="item">
							<view class="item-title">销售热线：</view>
							<view class="item-info">{{ currentPropertyObj.marketing_phone || '00000000' }}</view>
						</view>
						<view class="item">
							<view class="item-title">带看需收集：</view>
							<view class="item-info">{{ currentPropertyObj.report_visit }}</view>
						</view>
						<view class="item">
							<view class="item-title">报备保护期：</view>
							<view class="item-info">{{ currentPropertyObj.report_lock + '天' }}</view>
						</view>
						<view class="item">
							<view class="item-title">带看保护期：</view>
							<view class="item-info">{{ currentPropertyObj.lead_lock + '天' }}</view>
						</view>
					</view>
					<u-divider marginTop="20" marginBottom="20">滚动查看更多</u-divider>
					<view class="scoped-estate-desc">
						<!-- <view v-html="curHtml"></view> -->
						<rich-text :nodes="curHtml | filtersRichText"></rich-text>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 骨架屏 -->
		<u-skeleton :loading="skeletonLoading" animation></u-skeleton>

		<backTop :src="backTop.src"  :scrollTop="backTop.scrollTop"></backTop>
	</view>
</template>

<script>
var that;
import { arrToObj } from '@/utils'
import backTop from '@/components/back-top/back-top.vue'
import wmWatermark from '@/components/wm-watermark/wm-watermark.vue'
export default {
	components: {
		backTop,
		wmWatermark
	},
	filters: {
		filtersRichText(html) { //控制小程序中图片大小
			let newContent = html.replace(/<img[^>]*>/gi, (match, capture)=>{
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, (match, capture)=>{
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/\<img/gi,
				'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			return newContent;
		}
	},
	data() {
		// 页面数据变量
		return {
			curRoles: '',
			isOneRow: false,
			curHtml: '',
			backTop: {
				src: '../../static/back-top/top.png',
				scrollTop: 0
			},
			userInfo: {},
			skeletonLoading: true,
			agentTypeList: ['', '自由经纪人', '渠道经纪人', '老业主'],
			propertyList: [
				{
					estate_name: '在售项目1',
					pri_image: 'https://zdcdn.2bwin.cn/uploads/20220501/af6eb9c2a5d462be10a15c2302e5e6b5.jpg',
					sale_tag: '刚需好盘',
					rulesInfo: {
						des: '内容加载中1....',
						des_content: '内容加载中2....'
					}
				},
			],
			commonRulesShow: false,
			propertyPopupShow: false,
			currentPropertyIndex: 0,
			currentPropertyObj: {},
			// init请求返回的数据
			data: {},
			// 表单请求数据
			form1: {},
			scrollTop: 0,
			reportStepCountObj: {},
			areaTypeObj: {},
			twoObj: {},
			GT: '',
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		this.backTop.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		// that = this;
		// this.options = options;
		// this.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {
		
	},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {
		this.init()
		this.checkUpdate()
		// const dictObj = uni.getStorageSync('MD_dict')
		// this.areaTypeObj = arrToObj(dictObj.area_type)
	},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 页面触底部
	onReachBottom() {},
	// 监听 - 窗口尺寸变化(仅限:App、微信小程序)
	onResize() {},
	// 监听 - 点击右上角转发时
	onShareAppMessage(options) {},
	// 监听 - 页面创建时
	created() {},
	// 函数
	methods: {
		checkUpdate() {
			const updateManager = uni.getUpdateManager();
			updateManager.onUpdateReady(function(res) {
				uni.showModal({
					title: '更新提示',
					content: '新版本已经准备好，是否重启应用？',
					success(res) {
						if (res.confirm) {
							// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
							updateManager.applyUpdate()
						}
					}
				})
			})
		},
		oneImgHandle (item) {
			uni.navigateTo({
				url: `/pages/estate/dtl?id=${item.id}`
			})
			return
			uni.api.estate.apiestateinfodetail({id: item.id}).then(res => {
				const curImgUrl = res.info_img || ''
				if (!curImgUrl) {
					uni.$msg('该楼盘暂未设置一页纸楼盘简介~')
					return
				}
				uni.previewImage({
					current: curImgUrl,
					urls: [curImgUrl],
				})
			})
		},
		scanHandle () {
			uni.scanCode({
				success: function (res) {
					uni.navigateTo({
						url: `/pages/agent/recommend/detail2?id=${res.result}`
					})
				}
			})
		},
		// 页面数据初始化函数
		init(options) {
			const userInfo2 = uni.getStorageSync('MD_userInfo2')
			this.curRoles = userInfo2 ? userInfo2.roles : ''
			this.GT = userInfo2 ? userInfo2.group_type : ''
			this.userInfo = userInfo2 || {}
			uni.api.estate.apireportcount().then(res => {
				const reportStepCount = res.report_step_count || []
				let reportStepCountObj = {}
				reportStepCount.forEach(item => {
					reportStepCountObj[item.report_step] = item.total || 0
				})
				this.reportStepCountObj = {...reportStepCountObj}
			})
			uni.api.estate.apiestatelist({page_size: 100}).then(res => {
				const list = res.list || []
				
				const dictObj = uni.getStorageSync('MD_dict')
				const areaTypeObj = arrToObj(dictObj.area_type)
				let twoObj = {}
				list.forEach(item => {
					if (twoObj[item.area_type]) {
						twoObj[item.area_type].list.push(item)
					} else {
						twoObj[item.area_type] = {
							list: [item],
							str: areaTypeObj[item.area_type],
						}
					}
				})
				this.twoObj = {...twoObj}
				// console.log(twoObj)
				// let oneObj = list[0] || {}
				this.propertyList = [...list]
				// this.propertyList = [list[0], list[1], list[2]]
			})
			
			// let currentTime = Date.parse(new Date()) / 1000; // 秒级
			// // 初始化平台数据
			// let systemConfig = vk.vuex.get('$app.systemConfig');

			// if (!systemConfig.use_skeleton) {
				this.skeletonLoading = false;
			// }

			// if (vk.pubfn.isNull(systemConfig._id)) {
			// 	// 不存在则直接初始化
			// 	vk.callFunction({
			// 		url: 'client/agent/pub/getConfigInfo',
			// 		needAlert: false
			// 	}).then(res => {
			// 		vk.vuex.set('$app.systemConfig', res.config);
			// 		vk.vuex.set('$app.systemConfig.lastGetTime', currentTime);
			// 	});
			// } else {
			// 	let mathTime = ((currentTime - systemConfig.lastGetTime) / 3600).toFixed(2);
			// 	if (mathTime > systemConfig.cache_time) {
			// 		vk.callFunction({
			// 			url: 'client/agent/pub/getConfigInfo',
			// 			needAlert: false
			// 		}).then(res => {
			// 			vk.vuex.set('$app.systemConfig', res.config);
			// 			vk.vuex.set('$app.systemConfig.lastGetTime', currentTime);
			// 		});
			// 	}
			// }

			// // 请求经纪人个人数据
			// let lastInitAgentDataTime = vk.vuex.get('$user.history.lastInitAgentDataTime');
			// if (currentTime - lastInitAgentDataTime >= 60 && vk.checkToken()) {
			// 	// 个人数据1分钟主动更新1次
			// 	vk.callFunction({
			// 		url: 'client/agent/kh/getAgentData',
			// 		data: {
			// 			agentId: vk.vuex.get('$user.agentInfo._id')
			// 		},
			// 		needAlert: false
			// 	}).then(res => {
			// 		vk.vuex.set('$user.dataInfo.recommendNum', res.data.recommendNum);
			// 		vk.vuex.set('$user.dataInfo.visitedNum', res.data.visitedNum);
			// 		vk.vuex.set('$user.dataInfo.buyNum', res.data.buyNum);
			// 		vk.vuex.set('$user.dataInfo.totalCommission', res.data.totalCommission);
			// 		vk.vuex.set('$user.history.lastInitAgentDataTime', currentTime);
			// 	});
			// }

			// // 请求未读消息数量
			// // 最快1分钟请求一次
			// let lastGetUnreadMsgTime = vk.vuex.get('$user.history.lastGetUnreadMsgTime');
			// if (currentTime - lastGetUnreadMsgTime > 60 && vk.checkToken()) {
			// 	vk.callFunction({
			// 		url: 'client/agent/kh/getUnreadMsgNum'
			// 	}).then(res => {
			// 		vk.vuex.set('$user.dataInfo.unreadMsgNum', res.num);
			// 		vk.vuex.set('$user.history.lastGetUnreadMsgTime', currentTime);
			// 	});
			// }

			// // 请求在售项目列表
			// vk.callFunction({
			// 	url: 'client/agent/pub/getPropertyList',
			// 	needAlert: false
			// }).then(res => {
			// 	that.propertyList = res.list;

			// 	// 存储到vuex，方便其他页面调用
			// 	if (res.list.length < 5) {
			// 		// 若大于等于5则可能有更多项目，则不缓存
			// 		let list = res.list.map(function(val, index) {
			// 			return { value: val._id, label: val.name };
			// 		});
			// 		vk.vuex.set('$app.propertyList', list);
			// 	}

			// 	// 拼接佣金政策
			// 	// 非经纪人身份时显示佣金政策简介
			// 	// 否则显示最高可获得的佣金额度
			// 	let i;
			// 	for (i = 0; i < res.list.length; i++) {
			// 		let agentType = vk.vuex.get('$user.agentInfo.type');
			// 		if (vk.pubfn.isNull(agentType)) {
			// 			// 还未注册为经纪人
			// 			that.propertyList[i].commissionText = that.propertyList[i].rulesInfo.des;
			// 		} else {
			// 			let commissionInfo = that.propertyList[i].rulesInfo.commission_info;
			// 			let item = vk.pubfn.getListItem(commissionInfo, 'type', agentType);
			// 			that.propertyList[i].commissionText = '您最高可获得佣金' + item.amount + '元';
			// 		}
			// 	}

			// 	that.skeletonLoading = false;
			// });
		},
		pageTo(path) {
			if (path === 'dev') {
				uni.$msg('开发中~')
				return
			}
			uni.navigateTo({
				url: path
			})
		},
		// 弹窗展示项目佣金详情
		showDetail(index, item) {
			this.curHtml = ''
			if (this.userInfo && this.userInfo.auth_state == 1) {
				uni.navigateTo({
					url: `/pages/estate/dtl?id=${item.id}`
				})
				return
				// this.currentPropertyIndex = index;
				// this.currentPropertyObj = item
				// this.propertyPopupShow = true;
				// uni.api.estate.apiestatecontentdetail({id: item.id}).then(res => {
				// 	this.curHtml = res.content || ''
				// })
			} else {
				uni.$msgConfirm('请点击首页右上角设置，进行实名认证，实名认证后可查看详细信息')
			}
		}
	},
	// 监听器
	watch: {},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
.page {
	min-height: calc(100vh - 44px);
}
.userinfo-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: #fff;
	padding: 10rpx 26rpx 26rpx;
	width: 100%;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	position: relative;

	.userinfo {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.user {
			display: flex;
			align-items: center;
			padding-top: 10rpx;
			.avatar-wrap {
				position: relative;
				.avatar-bg {
					position: absolute;
					left: 0;
					top: 0;
					border-radius: 50%;
					width: 100rpx;
					height: 100rpx;
				}
			}

			.info {
				margin-left: 32rpx;

				.nickname {
					font-size: $u-p;
					font-weight: bold;
					color: $u-main-color;
					margin-bottom: 5rpx;
				}

				.mobile {
					font-size: $u-p1;
					color: $u-tips-color;
				}
			}
		}
	}
	.datainfo {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 20rpx 0 0;

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

			.data {
				font-weight: bold;
				font-size: $u-h2;
				line-height: $u-h2;
				margin-bottom: 10rpx;
			}

			.item {
				font-size: $u-p2;
				color: $u-content-color;
			}
		}
	}
}

.function-card-wrap {
	.col-card-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.function-card {
		background-color: #fff;
		padding: 32rpx 20rpx;
		width: 345rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		position: relative;
		overflow: hidden;

		.title-wrap {
			text-align: left;

			.main-title {
				display: flex;
				align-items: center;
				font-size: $u-p;
				font-weight: bold;
			}

			.sub-title {
				font-size: $u-p2;
				color: $u-content-color;
			}
		}

		.icon {
			text-align: right;
			position: absolute;
			top: 0;
			right: 0;
		}
	}
}

// 项目列表
.card-list-wrap {
	background-color: #fff;
	// margin: 0rpx -20rpx 20rpx;
	padding: 20rpx 20rpx 0 20rpx;
	display: flex;
	flex-direction: column;
	border-radius: 10rpx;

	.header-title-warp {
		width: 100%;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			display: flex;
			align-items: center;
			color: $u-main-color;
			font-weight: bold;
			font-size: $u-p;
		}

		.more {
			font-size: $u-sub;
			color: $u-tips-color;
		}
	}

	// 行版
	.property-row-wrap {
		.property-body {
			width: 100%;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			// background-color: #fff;
			.image-wrap {
				position: relative;

				image {
					width: 100%;
					height: 300rpx;
					display: block;
					border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;
				}

				.tag {
					color: #ffffff;
					// background-color: $u-theme-color;
					background: #8BC34A;
					font-size: $u-p2;
					position: absolute;
					z-index: 1;
					left: 0;
					padding: 8rpx 20rpx;
					border-top-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
				}
			}

			.property-info-wrap {
				padding: 20rpx;

				.title {
					font-weight: bold;
					color: $u-main-color;
					font-size: $u-p;
					.s {
						font-weight: normal;
						padding-left: 10rpx;
					}
				}

				.commission {
					margin-top: 10rpx;
					font-size: $u-p2;
					color: $u-content-color;
				}
			}
		}
	}

	// 两列版
	.property-col-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;

		.property-body {
			width: 325rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			// background-color: #fff;
			.image-wrap {
				position: relative;

				image {
					width: 100%;
					height: 210rpx;
					display: block;
					border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;
				}

				.tag {
					color: #ffffff;
					// background-color: $u-theme-color;
					background: #8BC34A;
					font-size: $u-sub;
					position: absolute;
					z-index: 1;
					left: 0;
					padding: 8rpx 20rpx;
					border-top-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
				}
			}

			.property-info-wrap {
				padding: 20rpx;

				.title {
					font-weight: bold;
					color: $u-main-color;
					font-size: $u-p2;
					.s {
						font-weight: normal;
						padding-left: 10rpx;
					}
				}

				.commission {
					margin-top: 10rpx;
					font-size: $u-sub;
					color: $u-content-color;
				}
			}
		}
	}
}

.popup-body {
	.property-info {
		font-size: $u-p1;
		.item {
			display: flex;
			margin-bottom: 10rpx;
			text-align: left;
			.item-title {
				font-weight: bold;
				width: 170rpx;
			}
			.item-info {
				flex: 1;
			}
		}
	}
}



.scoped-scan-img {
	padding-left: 20px;
	width:  40rpx;
	height: 40rpx;
}


.scoped-estate-desc {
	padding: 10rpx;
	iamge, img {
		width: 100%;
	}
}

.scoped-popup-more {
	width: 100%;
	height: 118rpx;
	margin-left: -20rpx;
	margin-top: -20rpx;
	margin-bottom: 20rpx;
}

.scoped-entry {
	display: flex;
	flex-wrap: wrap;
	.op {
		flex: 1;
		margin-bottom: 20rpx;
		&:nth-child(2n) {
			text-align: right;
		}
	}
}



.scoped-list-one {
	.slo-title {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		color: #2080f0;
		font-weight: bold;
		border-left: 2PX solid #2080f0;
		padding-left: 10rpx;
		font-size: 32rpx;
	}
}
</style>