Situation-Awareness-Platform-Frontend/src/views/Jyh/Dashboard/billing.vue

<template>
  <d-content class="content-area">
    <div class="billing-container">

      <div class="billing-header">
        <span class="main-title">账单和发票</span>
        <d-button class="manage-subscription-btn" variant="outline">
          管理订阅 <i class="d-icon d-icon-link-external"></i>
        </d-button>
      </div>

      <div class="section-card on-demand-section">

        <div class="card-header">
          <span class="card-title">按需使用</span>
          <div class="cycle-selector">
            <span class="cycle-text">Cycle Starting 2025年12月2日</span>
            <i class="d-icon d-icon-arrow-down-filling"></i>
          </div>
        </div>

        <div class="summary-area">
          <div class="cycle-period">2025年12月2日 - 2026年1月2日</div>
          <div class="total-amount">0.00 <span class="currency">美元</span></div>
        </div>

        <div class="table-header">
          <span class="col-type">类型</span>
          <span class="col-token">代币</span>
          <span class="col-cost">成本</span>
          <span class="col-quantity">数量</span>
          <span class="col-total">全部的</span>
        </div>

        <div class="subtotal-row">
          <span class="subtotal-label">小计:</span>
          <span class="subtotal-value">0.00 <span class="currency">美元</span></span>
        </div>

      </div>

      <div class="invoices-section">
        <div class="section-title">发票</div>
        <p class="invoice-status">
          未找到发票。
        </p>
      </div>

    </div>
  </d-content>
</template>

<script setup lang="ts">
</script>

<style lang="scss" scoped>
$bg-primary: #1e1e1e; // 卡片/区块背景
$bg-secondary: #141414; // 页面背景
$text-primary: #eaeaea; // 主要文本色
$text-secondary: #aaaaaa; // 次要文本色，如日期
$text-light-gray: #c9c9c9; // 浅灰色文本，如表格头部
$border-color: #333333; // 分隔线颜色


.content-area {
  background-color: rgb(20, 18, 11);
  padding: 40px 60px;
  //overflow-y: auto;
}

.billing-container {
  //max-width: 900px;
  margin: 0 auto;
}

/* --- 头部样式 --- */
.billing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;

  .main-title {
    font-size: 20px; /* 标题字体略小，与图片匹配 */
    font-weight: 500;
    color: $text-primary;
  }

  .manage-subscription-btn {
    height: 32px;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: $text-secondary !important;
    border-color: $border-color !important;
    background: transparent !important;

    .d-icon-link-external {
      margin-left: 5px;
      font-size: 12px;
    }
  }
}

/* --- 按需使用卡片 --- */
.section-card {
  background-color: $bg-primary;
  border-radius: 8px;
  padding: 24px;
}

.on-demand-section {
  padding-bottom: 0; /* 小计行在卡片内部，所以不需要底部额外内边距 */
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .card-title {
    font-size: 16px;
    font-weight: 500;
    color: $text-primary;
  }
}

.cycle-selector {
  display: flex;
  align-items: center;
  color: $text-secondary;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;

  // 模拟深色下拉菜单样式
  &:hover {
    background-color: #2a2a2a;
  }

  .d-icon-arrow-down-filling {
    margin-left: 4px;
    font-size: 10px;
  }
}

.summary-area {
  margin-bottom: 24px;
}

.cycle-period {
  font-size: 13px;
  color: $text-secondary;
  margin-bottom: 4px;
}

.total-amount {
  font-size: 32px;
  font-weight: 400;
  color: $text-primary;

  .currency {
    font-size: 16px;
    margin-left: 4px;
    color: $text-secondary;
  }
}


/* --- 表格样式 (使用 Flex/Grid 模拟) --- */
.table-header {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid $border-color;
  font-size: 12px;
  font-weight: 500;
  color: $text-light-gray; /* 浅灰色字体 */
}

.col-type {
  flex: 3; /* 类型占比较大 */
}
.col-token {
  flex: 2;
}
.col-cost {
  flex: 2;
}
.col-quantity {
  flex: 2;
}
.col-total {
  flex: 1; /* 总计靠右对齐，占位较小 */
  text-align: right;
  padding-right: 24px; // 留出空间给小计的右侧对齐
}

/* --- 小计行 --- */
.subtotal-row {
  display: flex;
  justify-content: flex-end; /* 将小计行整体靠右 */
  padding: 16px 0;
  border-top: 1px solid $border-color;
  background-color: #242424; /* 模拟小计行的背景颜色比卡片背景稍亮 */
  margin-top: 1px; /* 避免表格与小计行的边框重叠 */

  // 确保小计行和卡片圆角自然衔接
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;

  // 调整外边距以覆盖卡片本身的内边距
  margin: 0 -24px;
  padding-right: 24px; // 保持右侧对齐的内边距
}

.subtotal-label {
  font-size: 14px;
  font-weight: 600;
  color: $text-primary;
  margin-right: 40px; /* 标签与值的间距 */
}

.subtotal-value {
  font-size: 14px;
  font-weight: 600;
  color: $text-primary;
  width: 10%; /* 保证与表格最后一列宽度大致对齐 */
  min-width: 80px;
  text-align: right;

  .currency {
    font-weight: 400;
    color: $text-secondary;
    margin-left: 4px;
  }
}

/* --- 发票部分 --- */
.invoices-section {
  margin-top: 40px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: $text-primary;
  margin-bottom: 10px;
}

.invoice-status {
  font-size: 14px;
  color: $text-secondary; /* 浅绿色文字 */
}

</style>