fangtanhua/pages/index/pk-info.vue

<template>
	<view class="pk-info">
		<scroll-view scroll-y="true" scroll-x="true" class="pk-scroll-w">
			<view class="pk-scroll-w-box">
				<view class="pk-header u-flex-col u-col-center">
					<view class="pk-left-w">
						<view class="pk-left">
							<image src="../../static/images/pk.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="pk-item" v-for="(item,index) in list" :key="index">
						<image :src="item.logo" class="pk-item-img" mode=""></image>
						<view class="pk-item-box">
							<view class="item-name u-line-2">
								{{item.name}}
							</view>
							<view class="label-box u-flex">
								<text v-for="(a,b) in item.trait" :key="b" v-if="b < 2">{{a}}</text>
							</view>
							<view class="price-box u-flex">
								<text>参考均价</text>
								<text>{{item.avg_price}}/㎡</text>
							</view>
						</view>
					</view>
				</view>
				<view class="pk-title u-flex">
					<text>基本情况</text>
				</view>
				<view class="pk-table">
					<view class="pk-table-row u-flex" v-for="(item,index) in jibenlist" :key="index">
						<view class="row-left u-flex">
							<text>{{item.title}}</text>
						</view>
						<text class="row-text" v-for="(a,b) in list" :key="b" :style="{width:b == 0 ? '276rpx' : '264rpx'}">{{list[b][item.value]}}</text>
					</view>
				</view>
				<view class="pk-title u-flex">
					<text>总体情况</text>
				</view>
				<view class="pk-table">
					<view class="pk-table-row u-flex" v-for="(item,index) in zongtilist" :key="index">
						<view class="row-left u-flex">
							<text>{{item.title}}</text>
						</view>
						<text class="row-text" v-for="(a,b) in list" :key="b" :style="{width:b == 0 ? '276rpx' : '264rpx'}">{{list[b][item.value]}}</text>
					</view>
				</view>
				<view class="pk-title u-flex">
					<text>项目介绍</text>
				</view>
				<view class="pk-table">
					<view class="pk-table-row u-flex">
						<view class="row-left u-flex">
							<text>项目简介</text>
						</view>
						<text class="row-text" v-for="(a,b) in list" :key="b" :style="{width:b == 0 ? '276rpx' : '264rpx'}">{{a.project_synopsis}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				jibenlist: [{
						title: '备案名',
						value: 'record_name'
					},
					{
						title: '销售状态',
						value: 'sale_state'
					},
					{
						title: '开盘时间',
						value: 'sale_time'
					},
					{
						title: '物业类别',
						value: 'property_class'
					},
					{
						title: '产权年限',
						value: 'property_deadline'
					},
					{
						title: '装修状况',
						value: 'fitment_state'
					},
					{
						title: '物业公司',
						value: 'property_company'
					},
					{
						title: '交房时间',
						value: 'delivery_time'
					},
					{
						title: '项目地址',
						value: 'project_address'
					}
				],
				zongtilist: [{
						title: '占地面积（㎡）',
						value: 'floor_area'
					},
					{
						title: '总占地面积(㎡)',
						value: 'covered_area'
					},
					{
						title: '容积率',
						value: 'plot_ratio'
					},
					{
						title: '绿化率(%)',
						value: 'greening_rate'
					},
					{
						title: '总栋数',
						value: 'tower_num'
					},
					{
						title: '总户数',
						value: 'resident_num'
					},
					{
						title: '层高',
						value: 'floor_height'
					},
					{
						title: '户型面积',
						value: 'house_type_area'
					},
					{
						title: '总车位数',
						value: 'stall_num'
					},
					{
						title: '车位配比',
						value: 'stall_ratio'
					},
					{
						title: '人车分流',
						value: 'car_shunt'
					},
					{
						title: '物业费用',
						value: 'property_cost'
					},
					{
						title: '学校',
						value: 'school'
					},
					{
						title: '小区内配套',
						value: 'plot_mating'
					},
					{
						title: '外立面',
						value: 'external_wall'
					},
					{
						title: '楼层状况',
						value: 'floor_case'
					},
					{
						title: '预售许可证',
						value: 'permit_presale'
					},
					{
						title: '开发商',
						value: 'developers'
					},
					{
						title: '售楼中心地址',
						value: 'sales_office'
					}
				],
				ids: []
			}
		},
		onLoad(option) {
			this.ids = JSON.parse(option.ids)
			this.getdata()
		},
		methods: {
			getdata() {
				this.$u.post('/api/Property/property_comparison',{
					id_info:this.ids.join(",")
				}).then(res => {
					this.list = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.pk-info {
		.pk-scroll-w {
			width: 750rpx;
			height: 100vh;

			.pk-scroll-w-box {
				padding: 0 24rpx 24rpx 0;

				.pk-table {
					margin-bottom: 24rpx;

					.pk-table-row {
						align-items: stretch;
						white-space: nowrap;

						.row-text {
							min-height: 82rpx;
							padding: 24rpx 40rpx;
							width: 264rpx;
							border-left: 2rpx solid #fff;
							border-bottom: 2rpx solid #fff;
							background-color: #F5F5F5;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							display: inline-block;
							flex-shrink: 0;
							white-space: pre-wrap;
						}

						.row-left {
							padding-left: 24rpx;
							background-color: #fff;
							border-bottom: 2rpx solid #fff;
							min-height: 82rpx;
							display: inline-flex;
							flex-shrink: 0;
							position: sticky;
							left: 0;

							text {
								width: 124rpx;
								background: #CCCCCC;
								padding: 24rpx 14rpx;
								height: 100%;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
								text-align: center;
								white-space: pre-wrap;
							}
						}
					}
				}

				.pk-title {
					padding: 0 0 20rpx 0;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;

					text {
						padding: 0 24rpx;
						position: sticky;
						left: 0;
					}
				}

				.pk-header {
					white-space: nowrap;
					position: sticky;
					top: 0;
					z-index: 100;
					background-color: #fff;
					// padding: 24rpx 0 24rpx 24rpx;
					writing-mode: vertical-lr;

					.pk-item {
						display: inline-block;
						width: 240rpx;
						height: 320rpx;
						background: #FFFFFF;
						box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.1);
						border-radius: 8rpx;
						margin-left: 24rpx;
						flex-shrink: 0;
						writing-mode: horizontal-tb;

						.pk-item-img {
							width: 240rpx;
							height: 160rpx;
						}

						.pk-item-box {
							padding: 0 12rpx;

							.price-box {
								margin-bottom: 8rpx;

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

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

							.label-box {
								margin-bottom: 8rpx;

								text {
									line-height: 32rpx;
									background: #F5F5F5;
									border-radius: 8rpx;
									padding: 0 12rpx;
									font-size: 18rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #999999;
									margin-right: 10rpx;
									max-width: 50%;
									overflow: hidden;
									text-overflow:ellipsis;
									white-space: nowrap;
								}
							}

							.item-name {
								height: 68rpx;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #131415;
								margin-bottom: 8rpx;
								white-space: pre-wrap;
							}
						}
					}

					.pk-left-w {
						position: sticky;
						left: 0;
						background-color: #fff;
						padding: 24rpx 0 24rpx 24rpx;
						width: 124rpx;
						box-sizing: content-box;

						.pk-left {

							width: 124rpx;
							height: 320rpx;
							background: linear-gradient(132deg, #FFDD7B 0%, #FFA120 100%);
							box-shadow: 0px 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
							border-radius: 8px;
							display: inline-block;

							image {
								width: 124rpx;
								height: 320rpx;
							}
						}
					}

				}

				.u-flex-stretch {
					align-items: stretch;
				}

				.pk-scroll-w-left {
					width: 124rpx;
					height: 100%;
					background-color: red;
				}
			}
		}
	}
</style>