2025-09-09 16:23:08 +08:00

85 lines
3.2 KiB
Vue

<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>