<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="联系物业" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
		</uni-nav-bar>
		

		<!-- 表单区域 -->
		<scroll-view class="page" scroll-y="true">
			<view class="property-card" v-for="item,index in dataList" :key="index">
				<view class="topBox">
					<!-- 左侧头像 -->
					<image class="avatar" :src="item.src" mode="aspectFill"></image>
					<!-- 右侧信息区 -->
					<view class="info-content">
						<!-- 物业名称 -->
						<view class="property-name">{{item.propertyName}}</view>
						<!-- 物业地址 -->
						<view class="property-address">{{item.propertyAddress}}</view>


					</view>
				</view>
				<!-- 值班电话 -->
				<view class="phone-item" v-for="phoneItems,phoneIndex in item.phoneList" :key="phoneIndex">
					<text class="phone-label">值班电话：</text>
					<text class="phone-num">{{phoneItems.phoneNum}}</text>
					<!-- <text class="phone-icon"></text> -->
					<uni-icons type="phone" size="16" color="#2F77FD"></uni-icons>
				</view>
			</view>

		</scroll-view>
	</view>



</template>

<script>
	export default {
		onReady: function(e) {},
		components: {

		},

		computed: {

			 


		},
		created() {
			 
		},
		onShow() {

		},

		mounted() {},

		onReady() {
			this.$nextTick(() => {

			})
		},
		data() {
			return {
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				dataList: [{
					src: '/static/propertyImgs/community1.png',
					propertyName: '北境碧桂园小区物业中心',
					propertyAddress: 'A栋3单元1801',
					phoneList: [{
							phoneNum: '080-12312312312',

						},
						{
							phoneNum: '080-12312312312',

						}
					],
				}],


			}
		},


		methods: {
			// 电话点击拨号
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone.replace(/-/g, "")
				});
			},
			goBack() {
				uni.switchTab({
					url: '/pages/serviceIndex/serviceIndex',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
		},
	}
</script>
<style lang="scss">
	page {
		background: #f9f9f9;
	}
</style>

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		/* background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%); */
	}
	
	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 20px;
		box-sizing: border-box;
		/* background-color: #fff; */
	}

	/* 卡片容器 */
	.property-card {
		padding: 15px;
		/* margin: 0px 20px 20px 20px; */
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.topBox {
		display: flex;
		align-items: flex-start;
		margin-bottom: 10px;
	}

	/* 头像 */
	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 8rpx;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	/* 信息内容区 */
	.info-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	/* 物业名称 */
	.property-name {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
		line-height: 35px;
	}

	/* 物业地址 */
	.property-address {
		font-size: 14px;
		color: #666666;
		line-height: 12px;
	}

	/* 电话行 */
	.phone-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
		line-height: 30px;
	}

	/* 电话标签 */
	.phone-label {
		font-size: 14px;
		color: #999999;
	}

	/* 电话号码 */
	.phone-num {
		font-size: 14px;
		color: #666666;
	}

	/* 电话图标 */
	.phone-icon {
		font-size: 12px;
		color: #409eff !important;
		/* 蓝色，和原图一致 */
		margin-left: 8rpx;
	}
	.status-bar{
		width: 100vw;
		height: 46px;
	}
</style>