259 lines
5.5 KiB
Vue
259 lines
5.5 KiB
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>
|