goufangtong3/pages/index/houses-info.vue

<template>
	<view class="houses-info">
		<view class="index-bg"></view>
		<view class="swiper-box">
			<u-swiper :list="swiperlisi" height="367" border-radius="20"></u-swiper>
		</view>
		<view class="houses-tabs u-flex u-row-between">
			<view class="tabs-item u-flex-col u-col-center" @click="opendijia">
				<image src="../../static/images/tabs1.png" mode=""></image>
				<text>底价详情</text>
			</view>
			<view class="tabs-item u-flex-col u-col-center" @click="torizhao">
				<image src="../../static/images/tabs2.png" mode=""></image>
				<text>日照测评</text>
			</view>
			<view class="tabs-item u-flex-col u-col-center" @click="toyifang">
				<image src="../../static/images/tabs3.png" mode=""></image>
				<text>一房一价</text>
			</view>
			<view class="tabs-item u-flex-col u-col-center" @click="tovideo">
				<image src="../../static/images/tabs4.png" mode=""></image>
				<text>抖音视频</text>
			</view>
		</view>
		<view class="houses-box">
			<view class="box-header u-flex u-row-between">
				<text>{{detail.name}}</text>
				<text @click="toinfo()">详情>></text>
			</view>
			<view class="box-tips">
				备案名：{{detail.record_name}}
			</view>
			<view class="u-flex price">
				<text>参考均价</text>
				<text>{{detail.avg_price}}元/㎡</text>
			</view>
			<view class="houses-data u-flex u-flex-wrap u-row-between">
				<view class="data-item u-flex-col u-col-center">
					<text>{{detail.floor_area}}</text>
					<text>占地面积</text>
				</view>
				<view class="data-item u-flex-col u-col-center">
					<text>{{detail.covered_area}}</text>
					<text>总建筑面积</text>
				</view>
				<view class="data-item u-flex-col u-col-center">
					<text>{{detail.house_min_area}}㎡-{{detail.house_max_area}}㎡</text>
					<text>户型面积</text>
				</view>
				<view class="data-item u-flex-col u-col-center">
					<text>{{detail.greening_rate}}</text>
					<text>绿化率</text>
				</view>
				<view class="data-item u-flex-col u-col-center">
					<text>{{detail.plot_ratio}}</text>
					<text>容积率</text>
				</view>
			</view>
			<view class="houses-label u-flex u-flex-wrap">
				<text v-for="(item,index) in detail.trait" :key="index"
					:style="{color:color[index % 5],border:`2rpx solid ${color[index % 4]}`}">{{item}}</text>
			</view>
			<view class="kaifa-box">
				<view style="margin-bottom: 24rpx;">开盘日期: {{detail.sale_time}}</view>
				<view>开发商: {{detail.developers}}</view>
			</view>
		</view>
		<view class="address-box u-flex">
			<u-icon name="map-fill" color="#131415"></u-icon>
			<text class="text">{{detail.project_address}}</text>
		</view>
		<view class="fangchan-wenda" v-if="detail.comment_switch == 1">
			<view class="wenda-title u-flex u-row-between">
				<text>房产问答</text>
				<text @click="tomore" v-if="pinglundata.id">更多问答>></text>
			</view>
			<view v-if="pinglundata.id" @click="topingluninfo">
				<view class="wenda-box">
					<view class="box-top u-flex u-row-between">
						<text class="text1">问</text>
						<image class="img" :src="pinglundata.user_headimg" mode=""></image>
						<text class="text2 u-flex-1">{{pinglundata.user_name}}</text>
						<text class="text3">{{pinglundata.create_time}}</text>
					</view>
					<view class="table-header u-flex u-row-center" v-if="pinglundata.quiz_type == 2">
						<input type="text" placeholder="请输入" class="u-flex-1"
							:value="JSON.parse(pinglundata.content).title" :disabled="true">
					</view>
					<scroll-view v-if="pinglundata.quiz_type == 2" scroll-y="true" scroll-x="true" class="wenda-table">
						<view class="table-row" v-for="(a,b) in JSON.parse(pinglundata.content).list" :key="b">
							<view class="table-col u-line-1" v-for="(c,d) in a" :key="d">{{c.value}}</view>
						</view>
					</scroll-view>
					<view v-if="pinglundata.quiz_type == 1" class="wenda-text">
						{{pinglundata.content}}
					</view>
				</view>
				<view class="wenda-box" v-if="pinglundata.apply_info">
					<view class="box-top u-flex u-row-between">
						<text class="text1" style="background-color: #04B578;">答</text>
						<image class="img" :src="pinglundata.apply_info.user_headimg" mode=""></image>
						<text class="text2 u-flex-1">{{pinglundata.apply_info.user_name}}</text>
						<text class="text3">{{pinglundata.apply_info.create_time}}</text>
					</view>
					<view class="wenda-text">
						{{pinglundata.apply_info.content}}
					</view>
				</view>
				<view class="wenda-more">
					{{pinglundata.apply_num}}人参与回复
				</view>
			</view>
			<view v-else class="not-wenda u-flex-col u-col-center u-row-center">
				<image class="img" src="../../static/images/not-wenda.png" mode=""></image>
				<text class="text1">当前楼房还没有问答？</text>
				<text class="text2" @click="tomore">前往发布提问 >></text>
			</view>
		</view>
		<view class="map-box" v-if="detail.latitude && detail.longitude">
			<view class="map-title">
				区域地图
			</view>
			<map @click="tomap" style="width: 100%;height: 376rpx;" :latitude="latitude" :longitude="longitude"
				:markers="[{id:1,latitude:latitude,longitude:longitude,width:20,height:30}]"></map>
		</view>
		<view class="huxing-box" v-if="detail.house_type.length > 0">
			<view class="huixng-title">
				在售户型
			</view>
			<view class="scroll-box1" style="position: relative;">
				<u-icon name="arrow-left" style="position: absolute;top: 100rpx;left: -20rpx;z-index: 1;"></u-icon>
				<scroll-view scroll-x="true" class="huxing-list">
					<view class="huxing-item" v-for="(item,index) in detail.house_type" :key="index">
						<image :src="item.logo" @click="openimg(item)" class="huxing-img" mode=""></image>
						<view class="name">
							{{item.house_type_name}}
						</view>
						<view class="jianyi">
							建面：约{{item.area}}㎡
						</view>
					</view>
				</scroll-view>
				<u-icon name="arrow-right" style="position: absolute;top: 100rpx;right: -20rpx;z-index: 1;"></u-icon>
			</view>

		</view>
		<view class="" style="height: 170rpx;"></view>
		<view class="houses-btn u-flex u-row-between">
			<text @click="opentel" :style="{'width':(preempt_switch != 1 ? '328rpx':'218rpx')}" v-if="online_consultant_switch==1">隐私电话</text>
			<text @click="baobei" v-if="preempt_switch == 1">客户报备</text>
			<text @click="tochat" :style="{'width':(preempt_switch != 1 ? '328rpx':'218rpx')}" v-if="online_consultant_switch==1">在线咨询</text>
		</view>
		<u-popup v-model="showdijia" mode="center" background="rgba(0,0,0,0)">
			<view class="dijia-box u-flex-col u-col-center">
				<image class="dijia-img" src="../../static/images/dijia-bg.png" mode=""></image>
				<view class="u-flex-col u-col-center dijia-text">
					<text>{{detail.discounts_policy}}</text>
				</view>
				<u-icon name="close-circle-fill" color="#fff" size="100" @click="showdijia = false"></u-icon>
			</view>
		</u-popup>
		<u-popup v-model="showtocall" mode="center" background="rgba(0,0,0,0)">
			<view class="tocall-box u-flex-col u-col-center">
				<image class="tocall-img" src="../../static/images/popup1-1.png" mode=""></image>
				<view class="u-flex-col u-col-center tocall-text">您是否进行呼叫？</view>
				<view class="u-flex u-row-between tocall-btn">
					<text @click="showtocall = false">取消</text>
					<text @click="totel">确定</text>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showlogin" mode="center" background="rgba(0,0,0,0)">
			<view class="tocall-box u-flex-col u-col-center">
				<image class="tocall-img" src="../../static/images/popup1-1.png" mode=""></image>
				<view class="u-flex-col u-col-center tocall-text">你目前处于未登录状态请前往登录</view>
				<view class="u-flex u-row-between tocall-btn">
					<text @click="showlogin = false">取消</text>
					<text @click="tologin">确定</text>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="shownotkaifang" mode="center" background="rgba(0,0,0,0)" :closeable="true" closeTop="80rpx"
			closeIconColor="#fff">
			<view class="tocall-box u-flex-col u-col-center">
				<image class="tocall-img" src="../../static/images/popup1-1.png" mode=""></image>
				<view class="u-flex-col u-col-center tocall-text" style="margin-top: 50rpx;">
					<text>此板块暂未开放</text>
					<text>敬请期待</text>
				</view>
			</view>
		</u-popup>
		<gf-chat ref="chatlist" @over="getuser"></gf-chat>
		<gf-tel ref="tellist" @over="getuser"></gf-tel>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		//分享
		onShareAppMessage(res) {
			this.$u.get('/api/Member/transmit').then(res => {

			})
			return {
				title: this.detail.name,
				path: "pages/index/houses-info?id="+this.id ,
				imageUrl: this.swiperlisi[0],
			}
		},
		//分享朋友圈
		onShareTimeline(res) {
			this.$u.get('/api/Member/transmit').then(res => {

			})
			return {
				title: this.detail.name,
				path: "pages/index/houses-info?id="+this.id,
				imageUrl: this.swiperlisi[0],
			}
		},
		data() {
			return {
				swiperlisi: [],
				online_consultant_switch:"",
				showdijia: false,
				showtocall: false,
				id: '',
				detail: {
					house_type: []
				},
				showlogin: false,
				pinglundata: {},
				worker_id: 0,
				worker_phone: '',
				worker_hx_username: '',
				sunshine_info: 0,
				build_info: 0,
				video_list: 0,
				configs: {},
				shownotkaifang: false,
				detailName: "",
				preempt_switch:0
			}
		},
		onLoad(option) {
			this.id = option.id
			this.detailName = option.name
			this.getdata()
			this.getpinglun()
			this.configs = uni.getStorageSync("config")
			this.platform_config()
		},
		onReady() {

		},
		onShow() {
			if (uni.getStorageSync("token")) {
				this.getuser()
			}
		},
		computed: {
			...mapState(['config', 'defaultcity']),
			latitude() {
				return Number(this.detail.latitude) > Number(this.detail.longitude) ? this.detail.longitude : this.detail
					.latitude
			},
			longitude() {
				return Number(this.detail.latitude) > Number(this.detail.longitude) ? this.detail.latitude : this.detail
					.longitude
			},
			color() {
				return this.$color
			},

		},
		methods: {
			opendijia() {
				if (!this.detail.discounts_policy) {
					// this.$u.toast("此板块暂未开放，敬请期待")
					this.shownotkaifang = true
					return
				}
				if (!uni.getStorageSync("token")) {
					if (this.configs.floor_price_switch == 1) {
						if (this.configs.floor_price_num > 0) {
							this.configs.floor_price_num = this.configs.floor_price_num - 1
							this.showdijia = true
							uni.setStorageSync("config", this.configs)
							this.$u.post('/api/Property/click_discounts_policy', {
								id: this.id
							})
						} else {
							this.showlogin = true
						}
					} else {
						this.showlogin = true
					}
					return
				}
				this.$u.post('/api/Property/click_discounts_policy', {
					id: this.id
				})
				this.showdijia = true
			},
			getuser() {
				this.$u.post('/api/Member/member_info').then(res => {
					this.worker_id = res.data.worker_id
					this.worker_phone = res.data.worker_phone
					this.worker_hx_username = res.data.worker_hx_username
				})
			},
			platform_config() {
				this.$u.post('/api/Index/platform_config').then(res => {
					this.online_consultant_switch = res.data.online_consultant_switch
				})
			},
			topingluninfo() {
				uni.navigateTo({
					url: "/pagesA/index/wenda-info?id=" + this.pinglundata.id + "&louid=" + this.id
				})
			},
			getpinglun() {
				this.$u.post('/api/Comment/consult_comment_list', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.pinglundata = res.data[0] || {}
					}
				})
			},
			tomore() {
				uni.navigateTo({
					url: "/pagesA/index/wenda-list?id=" + this.id
				})
			},
			tomap() {
				uni.openLocation({
					latitude: Number(this.latitude),
					longitude: Number(this.longitude)
				})
			},
			openimg(item) {
				uni.previewImage({
					urls: [item.logo]
				})
			},
			tologin() {
				this.showlogin = false
				uni.navigateTo({
					url: "/pages/mine/login"
				})
			},
			opentel() {
				if (uni.getStorageSync("token")) {
					this.showtocall = true
				} else {
					this.showlogin = true
				}
			},
			getdata() {
				this.$u.post('/api/Property/property_detail', {
					id: this.id
				}).then(res => {
					this.swiperlisi = res.data.banner
					this.detail = res.data
					this.detailName = res.data.name
					this.preempt_switch = res.data.preempt_switch
				})

				this.$u.get('/api/Property/sunshine_info', {
					id: this.id
				}).then(res => {
					this.sunshine_info = res.data.build_info.length
				})

				this.$u.post('/api/Property/build_info', {
					id: this.id
				}).then(res => {
					this.build_info = res.data.length
				})

				this.$u.post('/api/Property/video_list', {
					id: this.id,
					page: 1,
					page_num: 20
				}).then(res => {
					this.video_list = res.data.length
				})
			},
			tovideo() {
				if (this.video_list == 0) {
					// this.$u.toast("此板块暂未开放，敬请期待")
					this.shownotkaifang = true
					return
				}
				uni.navigateTo({
					url: "./video?id=" + this.id
				})
			},
			toinfo() {
				uni.navigateTo({
					url: "./info?id=" + this.id
				})
			},
			tochat() {
				if (uni.getStorageSync("token")) {
					if (this.worker_id == 0) {
						this.$refs.chatlist.open(this.id)
					} else {
						this.$u.post('/api/Member/consult_record', {
							type: 2
						})
						uni.navigateTo({
							url: "/pages/index/chat?hx_username=" + this.worker_hx_username + "&worker_id=" + this
								.worker_id
						})
					}
				} else {
					this.showlogin = true
				}
			},
			baobei() {
				uni.setStorageSync('detailName', this.detail.name);
				if (uni.getStorageSync("token")) {
					uni.navigateTo({
						url: "/pages/index/report?id=" + this.id
					})
				} else {
					this.showlogin = true
				}
			},
			toyifang() {

				if (this.build_info == 0) {
					// this.$u.toast("此板块暂未开放，敬请期待")
					this.shownotkaifang = true
					return
				}
				if (!uni.getStorageSync("token")) {
					if (this.configs.room_price_switch == 1) {
						if (this.configs.room_price_num > 0) {
							this.configs.room_price_num = this.configs.room_price_num - 1
							uni.navigateTo({
								url: "/pagesA/index/yifang?id=" + this.id
							})
							uni.setStorageSync("config", this.configs)
						} else {
							this.showlogin = true
						}
					} else {
						this.showlogin = true
					}
					return
				}
				uni.navigateTo({
					url: "/pagesA/index/yifang?id=" + this.id
				})
			},
			torizhao() {
				if (this.sunshine_info == 0) {
					// this.$u.toast("此板块暂未开放，敬请期待")
					this.shownotkaifang = true
					return
				}
				if (!uni.getStorageSync("token")) {
					if (this.configs.sunlight_appraisal_switch == 1) {
						if (this.configs.sunlight_appraisal_num > 0) {
							this.configs.sunlight_appraisal_num = this.configs.sunlight_appraisal_num - 1
							uni.navigateTo({
								url: "/pagesA/index/rizhao?id=" + this.id
							})
							uni.setStorageSync("config", this.configs)
						} else {
							this.showlogin = true
						}
					} else {
						this.showlogin = true
					}
					return
				}
				uni.navigateTo({
					url: "/pagesA/index/rizhao?id=" + this.id
				})
			},
			totel() {
				if (uni.getStorageSync("token")) {
					this.showtocall = false
					if (this.worker_id == 0) {
						this.$refs.tellist.open(this.id)
					} else {
						this.$u.post('/api/Member/consult_record', {
							type: 1
						})
						uni.makePhoneCall({
							phoneNumber: this.worker_phone
						})
					}
				} else {
					this.showlogin = true
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.houses-info {
		position: relative;
		padding: 1rpx 0;

		.fangchan-wenda {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 24rpx 20rpx 24rpx;

			.wenda-more {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				padding: 0 20rpx;
			}

			.not-wenda {
				height: 280rpx;

				.img {
					width: 142rpx;
					height: 142rpx;
				}

				.text1 {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #CCCCCC;
					margin-bottom: 8rpx;
				}

				.text2 {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1677FF;
				}
			}

			.wenda-box {
				padding: 0 20rpx;

				.table-header {
					width: 620rpx;
					height: 94rpx;
					border: 2rpx solid #F0F0F0;

					input {
						text-align: center;
						color: red;
					}
				}

				.wenda-table {
					width: 620rpx;
					max-height: 378rpx;
					border-radius: 16rpx;
					margin-bottom: 20rpx;

					.table-row {
						white-space: nowrap;
						height: 94rpx;

						.table-col {
							width: 155rpx;
							line-height: 94rpx;
							height: 94rpx;
							border-bottom: 2rpx solid #F0F0F0;
							border-left: 2rpx solid #F0F0F0;
							padding: 0 16rpx;
							display: inline-block;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(102, 102, 102, 0.88);
						}

						.table-col:last-child {
							border-right: 2rpx solid #F0F0F0;

						}
					}

					.table-row:last-child {
						.table-col {
							border-bottom: 2rpx solid #F0F0F0;
						}
					}
				}

				.wenda-text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-bottom: 20rpx;
				}

				.box-top {
					margin-bottom: 20rpx;

					.text2 {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-right: 20rpx;
					}

					.text3 {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					.img {
						width: 36rpx;
						height: 36rpx;
						border-radius: 100rpx;
						margin: 0 20rpx;
					}

					.text1 {
						width: 36rpx;
						line-height: 36rpx;
						background: #1677FF;
						border-radius: 8rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
					}
				}
			}

			.wenda-title {
				padding: 20rpx 0 30rpx 0;

				text:first-child {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #131415;
				}

				text:last-child {
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1677FF;
				}
			}
		}

		.tocall-box {
			position: relative;

			.tocall-img {
				width: 650rpx;
				height: 476rpx;
			}

			.tocall-btn {
				position: absolute;
				bottom: 70rpx;
				left: 0;
				width: 100%;
				padding: 0 48rpx;

				text:first-child {
					width: 254rpx;
					line-height: 80rpx;
					background: #FFA120;
					border-radius: 20rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				text:last-child {
					width: 254rpx;
					line-height: 80rpx;
					background: #1F7EFF;
					border-radius: 20rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.tocall-text {
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				position: absolute;
				top: 244rpx;
				left: 0;
				z-index: 10;
				width: 100%;
			}
		}

		.dijia-box {
			position: relative;

			.dijia-text {
				position: absolute;
				z-index: 10;
				top: 120rpx;
				left: 0;
				width: 100%;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #EC9234;
				padding: 0 150rpx;
			}

			.dijia-img {
				width: 650rpx;
				height: 520rpx;
				margin-bottom: 52rpx;
			}
		}

		.houses-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			padding: 0 24rpx 54rpx 24rpx;
			z-index: 1;

			text:first-child {
				width: 218rpx;
				line-height: 84rpx;
				background: #FFA120;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
			
			text:nth-child(2) {
				width: 218rpx;
				line-height: 84rpx;
				background: #5BC22A;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			text:last-child {
				width: 218rpx;
				line-height: 84rpx;
				background: #1F7EFF;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.huxing-box {
			width: 702rpx;
			// height: 450rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 20rpx 30rpx 20rpx;

			.huxing-list {
				white-space: nowrap;

				.huxing-item {
					margin-right: 20rpx;
					display: inline-block;

					.jianyi {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					.name {
						margin: 24rpx 0 10rpx 0;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
					}

					.huxing-img {
						width: 206rpx;
						height: 206rpx;
					}
				}
			}

			.huixng-title {
				padding: 24rpx 0;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #131415;
			}
		}

		.map-box {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 20rpx 24rpx 20rpx;

			.map-title {
				padding: 24rpx 0;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #131415;
			}
		}

		.address-box {
			width: 702rpx;
			height: 82rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 22rpx;

			.text {
				flex: 1;
				margin-left: 10rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #131415;
			}
		}

		.houses-box {
			width: 702rpx;
			height: 594rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 20rpx;

			.kaifa-box {
				padding: 24rpx 20rpx;
				background: #F5F5F5;
				border-radius: 20rpx;

				view {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.houses-label {
				padding: 24rpx 0 14rpx 0;

				text {
					line-height: 40rpx;
					background: #fff;
					border-radius: 8rpx;
					padding: 0 10rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
				}
			}

			.houses-data {
				padding: 20rpx 0;
				// height: 126rpx;
				border-bottom: 2rpx solid #F5F5F5;

				.data-item {
					// width: 134rpx;
					// flex: 1;
					// margin-right: 22rpx;

					// margin-right: 10rpx;
					text:first-child {
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #131415;
						margin-bottom: 8rpx;
						white-space: nowrap;
					}

					text:last-child {
						font-size: 18rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.data-item:last-child {
					margin-right: 0;
				}
			}

			.price {
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #F5F5F5;

				text:first-child {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-right: 8rpx;
				}

				text:last-child {
					font-size: 32rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #FF3B30;
				}
			}

			.box-tips {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
				margin-bottom: 20rpx;
			}

			.box-header {
				padding: 24rpx 0 12rpx 0;

				text:first-child {
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #131415;
				}

				text:last-child {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1F7EFF;
				}
			}
		}

		.houses-tabs {
			width: 702rpx;
			height: 218rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;

			.tabs-item {
				flex: 1;

				image {
					width: 84rpx;
					height: 84rpx;
					margin-bottom: 20rpx;
				}

				text {
					// margin-top: -34rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #131415;
				}
			}
		}

		.swiper-box {
			width: 702rpx;
			margin: 20rpx auto;
		}

		.index-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 556rpx;
			background: linear-gradient(180deg, #1E7DFF 0%, #F6F6F6 100%);
			z-index: -1;
		}
	}
</style>