<template>
    <view class="community-list-container">
        <!-- <view class="search-bar">
            <view class="search-input">
                <image
                    src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
                    mode="aspectFill" class="search-icon"></image>
                <input type="text" placeholder="搜索社区" />
            </view>
        </view> -->

        <view class="community-list">
            <view class="community-item" v-for="(item, index) in communityList" :key="index">
                <view class="community-image">
                    <image :src="item.image" mode="aspectFill"></image>
                </view>
                <view class="community-info">
                    <view class="community-name">{{ item.name }}</view>
                    <view class="community-address">{{ item.address }}</view>
                    <view class="community-distance">{{ item.distance }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>

export default {
    name: 'CommunityList',
    data() {
        return {
            communityList: [
                {
                    id: 1,
                    name: '凯旋城东区',
                    address: '衡水市,桃城-衡水市人民路与育才街交叉口西行100米路南',
                    distance: '0 m',
                    image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test_community.png'

                },
                {
                    id: 2,
                    name: '岸芷庭蓝（一区）',
                    address: '衡水市,河阳西路与中华南大街交叉口东220米',
                    distance: '1000 m',
                    image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test_community.png'
                },
                {
                    id: 3,
                    name: '滏阳锦苑',
                    address: '衡水市,滏阳苑',
                    distance: '2 km',
                    image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test_community.png'
                },
                {
                    id: 4,
                    name: '隆兴小区',
                    address: '衡水市,河北省衡水市高新区隆兴西路隆兴小区',
                    distance: '5 km',
                    image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test_community.png'
                },
                {
                    id: 5,
                    name: '紫金广场',
                    address: '衡水市,衡水市桃城区人民西路与庆丰南街交叉口',
                    distance: '894 km',
                    image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test_community.png'
                },
                {
                    id: 6,
                    name: '万和瑞景',
                    address: '衡水市,政通街46号',
                    distance: '12249 km',
                    image: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test_community.png'
                }
            ]
        };
    }
};
</script>

<style>
@import url("./index.css");
</style>