Browse Source

style(community): 调整小区列表样式

- 修改表头背景色为浅灰色- 调整小区名称列为左对齐并增加左侧内边距- 增加小区名称列宽度为其他列的两倍
- 更新表头文字"等级"为"服务等级"- 统一列表项文字大小为14px
master
科技小王子 6 days ago
parent
commit
6de1086701
  1. 18
      pages/community/index.vue

18
pages/community/index.vue

@ -4,18 +4,18 @@
<u-list> <u-list>
<!-- 表头 --> <!-- 表头 -->
<u-list-item class="table-header"> <u-list-item class="table-header">
<view class="table-row">
<view class="table-cell header-cell">小区名称</view>
<view class="table-row bg-gray-light">
<view class="table-cell header-cell name-cell">小区名称</view>
<view class="table-cell header-cell">联系电话</view> <view class="table-cell header-cell">联系电话</view>
<view class="table-cell header-cell">等级</view>
<view class="table-cell header-cell">服务等级</view>
<view class="table-cell header-cell">物业费单价</view> <view class="table-cell header-cell">物业费单价</view>
</view> </view>
</u-list-item> </u-list-item>
<!-- 列表项 --> <!-- 列表项 -->
<u-list-item v-for="(item, index) in list" :key="index" @click="goToDetail(item)"> <u-list-item v-for="(item, index) in list" :key="index" @click="goToDetail(item)">
<view class="table-row"> <view class="table-row">
<view class="table-cell">{{ item.name }}</view>
<view class="table-cell">{{ item.tel || '暂无' }}</view>
<view class="table-cell name-cell">{{ item.name }}</view>
<view class="table-cell">{{ item.tel || '暂无' }}</view>
<view class="table-cell">{{ ['一级', '二级', '三级', '四级', '五级'][item.level] || '暂无' }}</view> <view class="table-cell">{{ ['一级', '二级', '三级', '四级', '五级'][item.level] || '暂无' }}</view>
<view class="table-cell">{{ item.feeItem ? item.feeItem + '元/㎡' : '暂无' }}</view> <view class="table-cell">{{ item.feeItem ? item.feeItem + '元/㎡' : '暂无' }}</view>
</view> </view>
@ -82,7 +82,13 @@ export default {
flex: 1; flex: 1;
text-align: center; text-align: center;
padding: 5px; padding: 5px;
font-size: 12px;
font-size: 14px;
}
.name-cell {
flex: 2; /* 小区名称列宽度是其他列的两倍 */
text-align: left;
padding-left: 15px;
} }
.header-cell { .header-cell {

Loading…
Cancel
Save