<template>
	<view class="center">
		<view>
			<u-navbar @leftClick="" bgColor="transparent" placeholder="true" :titleStyle="{color: '#E5BA00'}">
				<view style="display: flex;align-items: center;font-size: 36rpx;color: #333333;" slot="left">
					<image src="https://zhongqian.xnszz.com/1-images/home/20250213002.png"
						style="width: 40rpx;height: 40rpx;margin-right: 10rpx;" mode=""></image>
					<text>利达物业中心</text>
					<image src="https://zhongqian.xnszz.com/1-images/home/20250213003.png"
						style="width: 30rpx;height: 8.5rpx;margin-left: 8rpx;" mode="widthFix"></image>
				</view>
			</u-navbar>
		</view>
		<view>
			<u-swiper height="200" :list="list1" @change="change" @click="click"></u-swiper>
		</view>
		<view class="mar-20 br-16" style="background-color: white;">
			<view class="grid-container">
				<view @click="onClick(index)" class="grid-item" v-for="(item, index) in listService" :key="index">
					<image style="width: 100rpx;height: 100rpx;" :src="item.img"></image>
					<text>{{item.title}}</text>
					<text>{{item.describe}}</text>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" @close="close" @open="open" round="20">
			<view class="flex-column mlr-50" style="width:600rpx;">
				<text>选择小区</text>
				<view v-for="(item, index) in listService" :key="index">
					<text>西城小区</text>
				</view>
				<view>
					<text class="plr-50 ptb-10 br-16" style="background: blue;">下一步</text>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list1: [
					"https://zhongqian.xnszz.com/1-images/home/20250213002.png",
					"https://zhongqian.xnszz.com/1-images/home/20250213002.png",
					"https://zhongqian.xnszz.com/1-images/home/20250213002.png",
				],
				listService: [{
						img: "https://zhongqian.xnszz.com/1-images/home/20250213002.png",
						title: "访客",
						describe: "请点击输入访客信息"
					},
					{
						img: "https://zhongqian.xnszz.com/1-images/home/20250213002.png",
						title: "报修报事",
						describe: "保修报事一键即发"
					},
					{
						img: "https://zhongqian.xnszz.com/1-images/home/20250213002.png",
						title: "生活缴费",
						describe: "水费电费在线缴纳"
					},
					{
						img: "https://zhongqian.xnszz.com/1-images/home/20250213002.png",
						title: "常用电话",
						describe: "随时查找常用电话"
					},
					{
						img: "https://zhongqian.xnszz.com/1-images/home/20250213002.png",
						title: "停车缴费",
						describe: "输入车牌在线缴费"
					},
					{
						img: "https://zhongqian.xnszz.com/1-images/home/20250213002.png",
						title: "投诉表扬",
						describe: "投诉表扬线上发布"
					}

				],
			};
		},
		onLoad(options) {

		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			onClick(index) {
				console.log(index);
			}
		}
	};
</script>

<style>
	.center {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f5f5f5;
	}

	.grid-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around; // 可以根据需求调整元素的水平排列方式，这里是均匀分布
		align-items: center; // 垂直方向居中对齐
	}

	.grid-item {
		width: 46%; // 可以根据设计需求调整宫格宽度
		height: 300rpx; // 宫格高度
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>