85 lines
3.0 KiB
Vue
85 lines
3.0 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: 'http://localhost:8080/test_community.png'
|
|
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '岸芷庭蓝（一区）',
|
|
address: '衡水市,河阳西路与中华南大街交叉口东220米',
|
|
distance: '1000 m',
|
|
image: 'http://localhost:8080/test_community.png'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '滏阳锦苑',
|
|
address: '衡水市,滏阳苑',
|
|
distance: '2 km',
|
|
image: 'http://localhost:8080/test_community.png'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '隆兴小区',
|
|
address: '衡水市,河北省衡水市高新区隆兴西路隆兴小区',
|
|
distance: '5 km',
|
|
image: 'http://localhost:8080/test_community.png'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '紫金广场',
|
|
address: '衡水市,衡水市桃城区人民西路与庆丰南街交叉口',
|
|
distance: '894 km',
|
|
image: 'http://localhost:8080/test_community.png'
|
|
},
|
|
{
|
|
id: 6,
|
|
name: '万和瑞景',
|
|
address: '衡水市,政通街46号',
|
|
distance: '12249 km',
|
|
image: 'http://localhost:8080/test_community.png'
|
|
}
|
|
]
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
@import url("./index.css");
|
|
</style> |