zhsw_wechat/pages/homepage/homepage.wxml

<view class="container1">
  <!-- 顶部背景和Logo -->
  <view class="header">
    <image class="background" src="{{images.background}}" mode="widthFix" />
    <image class="logo" src="{{images.logo}}" mode="aspectFit" />
  </view>

  <!-- 卡片区域 -->
  <view class="cards-container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info-section">
        <view class="info-row">
          <text class="label">户名</text>
          <text class="value">{{userInfo.name}}</text>
          <view class="switch-btn" bindtap="handleSwitchMeter">切换水表</view>
        </view>

        <view class="info-row">
          <text class="label">户号信息</text>
          <text class="value">{{userInfo.accountNumber}}</text>
        </view>

        <view class="info-row">
          <text class="label">住址信息</text>
          <text class="value">{{userInfo.address}}</text>
        </view>
      </view>

    </view>
    
    <!-- 票据式分割线 -->
    <view class="card-divider"></view>
    
    <!-- 水费金额信息卡片 -->
    <view class="amount-card">
      
      <!-- 水费金额信息 -->
      <view class="amount-section">
        <!-- 左侧水滴背景图 -->
        <image class="water-drop" src="{{images.kapiantubiao}}" mode="aspectFit"></image>
        <!-- 中间金额显示 -->
        <view class="amount-display">
          <view class="total-amount">{{billInfo.totalAmount}}</view>
          <view class="amount-label">总计应缴(元)</view>

          <view class="amount-details">
            <view class="detail-item">
              <text class="number">{{billInfo.waterUsage}}</text>
              <text class="label">用水量(m³)</text>
            </view>
            
            <!-- 添加分隔线 -->
            <view class="detail-divider"></view>
            
            <view class="detail-item">
              <text class="number blue">{{billInfo.balance}}</text>
              <text class="label">账号余额(元)</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 充值缴费按钮 -->
      <button class="pay-btn" bindtap="handlePayment">充值缴费</button>
    </view>
  </view>

  <!-- 功能按钮区域 -->
  <view class="function-area">
    <view class="function-grid">
      <view class="function-item" wx:for="{{functionList}}" wx:key="text" bindtap="handleFunctionClick" data-index="{{index}}">
        <image src="{{item.icon}}" mode="aspectFit"></image>
        <text>{{item.text}}</text>
      </view>
    </view>
  </view>

  <!-- 活动区域 -->
  <view class="activity-area">
    <view class="area-header">
      <text class="title">精选活动</text>
      <text class="more" bindtap="handleMoreActivity">更多 ></text>
    </view>
    <view class="activity-item">
      <image class="activity-image" src="{{activity.imageUrl}}" mode="aspectFill"></image>
    </view>
  </view>
</view>