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> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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"> <link rel="stylesheet" href="/static/css/style.css">
<style> <style>
/* 覆盖全局 #app 样式 */ /* 覆盖全局 #app 样式 */
@ -549,6 +549,104 @@
font-size: 11px; font-size: 11px;
opacity: 0.8; 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> </style>
</head> </head>
<body> <body>
@ -559,7 +657,7 @@
<div class="sticky-header"> <div class="sticky-header">
<!-- 头部 --> <!-- 头部 -->
<div class="trading-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 style="display: flex; align-items: center; gap: 12px;">
<div class="monitor-status"> <div class="monitor-status">
<div class="monitor-dot" :class="{ running: monitorRunning }"></div> <div class="monitor-dot" :class="{ running: monitorRunning }"></div>
@ -662,7 +760,8 @@
</svg> </svg>
<p>暂无活跃订单</p> <p>暂无活跃订单</p>
</div> </div>
<table v-else class="orders-table"> <div v-else class="table-wrapper">
<table class="orders-table">
<thead> <thead>
<tr> <tr>
<th>订单ID</th> <th>订单ID</th>
@ -729,6 +828,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
<!-- 历史订单 --> <!-- 历史订单 -->
@ -740,7 +840,8 @@
</svg> </svg>
<p>暂无历史订单</p> <p>暂无历史订单</p>
</div> </div>
<table v-else class="orders-table"> <div v-else class="table-wrapper">
<table class="orders-table">
<thead> <thead>
<tr> <tr>
<th>订单ID</th> <th>订单ID</th>
@ -773,6 +874,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
<!-- 详细统计 --> <!-- 详细统计 -->