This commit is contained in:
aaron 2026-02-15 14:20:11 +08:00
parent e97faa9416
commit f5c2051226

View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 自动交易 - Tradus</title>
<title>Tradus Auto Trading | Based on AI Agent</title>
<link rel="stylesheet" href="/static/css/style.css">
<style>
/* 覆盖全局 #app 样式 */
@ -549,6 +549,104 @@
font-size: 11px;
opacity: 0.8;
}
/* 响应式设计 */
@media (max-width: 768px) {
.trading-page {
padding: 10px;
}
.trading-container {
min-width: auto;
max-width: 100%;
}
.trading-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.trading-title {
font-size: 18px;
}
.trading-title span {
display: block;
font-size: 14px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.stat-card {
padding: 12px;
}
.stat-value {
font-size: 18px;
}
.tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tab {
padding: 10px 16px;
font-size: 13px;
white-space: nowrap;
}
/* 表格横向滚动 */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.orders-table {
min-width: 800px;
}
.orders-table th,
.orders-table td {
padding: 10px 12px;
font-size: 13px;
}
.position-summary {
flex-wrap: wrap;
gap: 16px;
}
.summary-item {
min-width: calc(50% - 8px);
}
.grade-stats {
grid-template-columns: 1fr;
}
.monitor-status span {
display: none;
}
}
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr;
}
.trading-title {
font-size: 16px;
}
.stat-value {
font-size: 16px;
}
}
</style>
</head>
<body>
@ -559,7 +657,7 @@
<div class="sticky-header">
<!-- 头部 -->
<div class="trading-header">
<h1 class="trading-title">AI 自动交易 <span>Auto Trading</span></h1>
<h1 class="trading-title">AI 自动交易 <span>| AI Agent Trading System</span></h1>
<div style="display: flex; align-items: center; gap: 12px;">
<div class="monitor-status">
<div class="monitor-dot" :class="{ running: monitorRunning }"></div>
@ -662,7 +760,8 @@
</svg>
<p>暂无活跃订单</p>
</div>
<table v-else class="orders-table">
<div v-else class="table-wrapper">
<table class="orders-table">
<thead>
<tr>
<th>订单ID</th>
@ -730,6 +829,7 @@
</tbody>
</table>
</div>
</div>
<!-- 历史订单 -->
<div v-if="activeTab === 'history'">
@ -740,7 +840,8 @@
</svg>
<p>暂无历史订单</p>
</div>
<table v-else class="orders-table">
<div v-else class="table-wrapper">
<table class="orders-table">
<thead>
<tr>
<th>订单ID</th>
@ -774,6 +875,7 @@
</tbody>
</table>
</div>
</div>
<!-- 详细统计 -->
<div v-if="activeTab === 'stats'">