<view class="page-container">
  <!-- 顶部背景 -->
  <view class="header">
    <image class="background" src="{{images.background}}" mode="widthFix" />
  </view>

  <view style="height: 200rpx; background-color: #4285f4;"></view>

  <!-- 用户信息 -->
  <view class="user-info-container">
    <view class="user-info">
      <view class="user-name">{{userInfo.name}}</view>
      <view class="user-id">
        <image src="/static_file/hh.png" class="id-icon"></image>
        <text>{{userInfo.id}}</text>
      </view>
      <view class="user-address">
        <image src="/static_file/location.png" class="address-icon"></image>
        <text style="flex: 0 1 100%">{{userInfo.address}}</text>
      </view>
    </view>
  </view>

  <!-- 功能选择框 -->
  <view class="function-content">
    <!-- 第一组：缴费记录和账单查询 -->
    <view class="function-group">
      <view class="function-item" bindtap="navigateTo" data-url="/pages/jiaofeiList/jiaofeiList">
        <text class="function-text">缴费记录</text>
        <image class="arrow-icon" src="/static_file/arrow.png"></image>
      </view>

      <view class="divider"></view>

      <view class="function-item" bindtap="navigateTo" data-url="/pages/zhangdanlist/zhangdanlist">
        <text class="function-text">账单查询</text>
        <image class="arrow-icon" src="/static_file/arrow.png"></image>
      </view>
    </view>

    <!-- 第二组：我的报修和我的建议 -->
    <view class="function-group">
      <view class="function-item" bindtap="navigateTo" data-url="/pages/baoxiuList/baoxiuList">
        <text class="function-text">我的报修</text>
        <image class="arrow-icon" src="/static_file/arrow.png"></image>
      </view>

      <view class="divider"></view>

      <view class="function-item" bindtap="navigateTo" data-url="/pages/tousujianyiList/tousujianyiList">
        <text class="function-text">我的建议</text>
        <image class="arrow-icon" src="/static_file/arrow.png"></image>
      </view>
    </view>
  </view>
</view>
