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 class="address-container" bindtap="showAddressPopup" data-address="{{enterPriseAddress}}">
      <image src="/static_file/location.png" class="address-icon"></image>
      <text class="address-text">{{enterPriseAddress}}</text>
    </view>
  </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 address-row">
          <text class="label">住址</text>
          <text class="value address-value">{{userInfo.address}}</text>
        </view>

        <!-- 通知轮播区域 -->
      <view class="notice-bar" wx:if="{{noticeList && noticeList.length > 0}}">
        <view class="notice-icon">
          <image src="/static_file/speaker.png" mode="aspectFit"></image>
        </view>
        <view class="notice-swiper-container">
          <view class="notice-content {{isScrolling ? 'scrolling' : ''}}" bindanimationend="onScrollComplete" bindtap="goToNoticeDetail" style="animation-duration: {{scrollDuration}}s;">
            <text class="notice-title">{{noticeList[currentIndex].noticetitle}}:</text>
            <text>{{noticeList[currentIndex].scrollingcontent}}</text>
          </view>
        </view>
      </view>
      </view>
    </view>

    <!-- 票据式分割线 -->
    <view class="card-divider"></view>

    <!-- 水费金额信息卡片 -->
    <view class="amount-card">
      <!-- 添加背景图片 -->
      <image class="section-background" src="{{images.kapiantubiao}}" mode="aspectFill"></image>
      <!-- 水费金额信息 -->
      <view class="amount-section">
        <!-- 中间金额显示 -->
        <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" hover-class="pay-btn-hover" hover-stay-time="100" bindtap="goToPayment">立即缴费</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>
        <view class="notice-badge {{unreadCount > 99 ? 'notice-badge-large' : ''}}" wx:if="{{item.text === '消息通知' && unreadCount > 0}}">{{unreadCount > 99 ? '99+' : unreadCount}}</view>
        <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>