<div class="ios-container">
  <header class="ios-header">
    <button class="ios-back-btn" (click)="goBack()">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <path d="M19 12H5M12 19l-7-7 7-7"/>
      </svg>
    </button>
    <h1>成交详情</h1>
    <button class="ios-share-btn">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <circle cx="18" cy="5" r="3"/>
        <circle cx="6" cy="12" r="3"/>
        <circle cx="18" cy="19" r="3"/>
        <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
        <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
      </svg>
    </button>
  </header>

  <div class="ios-content">
    <div class="summary-card">
      <div class="amount">¥{{totalRevenue}}</div>
      <div class="period">今日总成交额</div>
      <div class="stats">
        <div class="stat-item">
          <div class="value">{{transactions.length}}</div>
          <div class="label">成交项目</div>
        </div>
        <div class="stat-item">
          <div class="value positive">+{{growthRate}}%</div>
          <div class="label">环比增长</div>
        </div>
      </div>
    </div>

    <div class="transaction-list">
      <div class="section-header">
        <h2>交易记录</h2>
        <button class="filter-btn">筛选</button>
      </div>

      <div class="transaction-item" *ngFor="let item of transactions">
        <div class="icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M12 1v3M12 20v3M5 12H2M22 12h-3M6.2 6.2l-1.4 1.4M19.2 19.2l-1.4 1.4M6.2 17.8l-1.4-1.4M19.2 4.8l-1.4-1.4"/>
          </svg>
        </div>
        <div class="details">
          <div class="project">{{item.project}}</div>
          <div class="customer">{{item.customer}}</div>
        </div>
        <div class="amount">¥{{item.amount}}</div>
      </div>
    </div>
  </div>
</div>