From 7b25210909b9a0cf47ffafbca76311acfe6fe4be Mon Sep 17 00:00:00 2001
From: liaoxinyu <liaoxinyu@xingtongworld.com>
Date: Tue, 9 Jun 2026 19:02:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=82=A1=E7=A5=A8=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommonHeader.vue         |   3 +
 src/i18n/de.json                        |  33 ++
 src/i18n/en.json                        |  33 ++
 src/i18n/fra.json                       |  33 ++
 src/i18n/he.json                        |  33 ++
 src/i18n/it.json                        |  33 ++
 src/i18n/jp.json                        |  33 ++
 src/i18n/kor.json                       |  33 ++
 src/i18n/pt.json                        |  33 ++
 src/i18n/spa.json                       |  33 ++
 src/i18n/tr.json                        |  33 ++
 src/i18n/tw.json                        |  33 ++
 src/router/index.js                     |   6 +
 src/views/ellasAlpha/index.vue          | 583 ++++++++++++++++++++++++
 src/views/exchangeStock/book-trades.vue |  11 +-
 15 files changed, 961 insertions(+), 5 deletions(-)
 create mode 100644 src/views/ellasAlpha/index.vue

diff --git a/src/components/CommonHeader.vue b/src/components/CommonHeader.vue
index cc7b8e8..971a12a 100644
--- a/src/components/CommonHeader.vue
+++ b/src/components/CommonHeader.vue
@@ -46,6 +46,9 @@
                     <li class="nav-item">
                         <router-link class="nav-link" :to="purchase.url">{{ purchase.label }}</router-link>
                     </li>
+					<li class="nav-item">
+					    <router-link class="nav-link" to="/ellasAlpha">Ellas Alpha</router-link>
+					</li>
 					<!-- 学院 -->
                     <!-- <li class="nav-item">
                         <router-link class="nav-link" :to="learn.url">{{ learn.label }}</router-link>
diff --git a/src/i18n/de.json b/src/i18n/de.json
index e249b06..98a8990 100644
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@@ -1157,5 +1157,38 @@
 		"hh41": "Muzkcoin, jederzeit und überall handeln",
 		"hh42": "Jetzt handeln",
 		"hh43": "Scannen Sie den QR-Code, um Muzkcoin APP herunterzuladen"
+	},
+	"automation": {
+		"a1":"Automatisierter EA-Handel",
+		"a2":"Kluge Entscheidungen, einfache Gewinne, Wohlstand in Reichweite",
+		"a3":"Aktien",
+		"a4":"Kryptowährungen",
+		"a5":"Gesamtvermögen",
+		"a6":"Transaktionshistorie",
+		"a7":"Verfügbar",
+		"a8":"Heutiger Gewinn",
+		"a9":"Gesamtgewinn",
+		"a10":"Guthaben einzahlen",
+		"a11":"Guthaben auszahlen",
+		"a12":"Orderhistorie",
+		"a13":"Währung",
+		"a14":"Kurs",
+		"a15":"Änderung",
+		"a16":"Name / Ticker",
+		"a17":"Kaufpreis",
+		"a18":"Verkaufspreis",
+		"a19":"Menge",
+		"a20":"Servicegebühr",
+		"a21":"Transaktionsbetrag",
+		"a22":"Gewinn",
+		"a23":"Richtung",
+		"a24":"Kaufzeitpunkt",
+		"a25":"Verkaufszeitpunkt",
+		"a26":"Keine Daten verfügbar",
+		"a27":"Transaktionsbetrag",
+		"a28":"Mindesteinzahlungsbetrag",
+		"a29":"Abbrechen",
+		"a30":"Bestätigen",
+		"a31":"Bitte Betrag eingeben"
 	}
 }
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 3968520..70de7ca 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1262,5 +1262,38 @@
 		"hh41": "Muzkcoin, trade anytime, anywhere",
 		"hh42": "Trade now",
 		"hh43": "Scan the QR code to download Muzkcoin APP"
+	},
+	"automation": {
+		"a1":"EA Automated Trading",
+		"a2":"Smart Decisions, Easy Profits, Wealth Within Reach",
+		"a3":"Stocks",
+		"a4":"Cryptocurrency",
+		"a5":"Total Assets",
+		"a6":"Transaction History",
+		"a7":"Available",
+		"a8":"Today's Profit",
+		"a9":"Total Profit",
+		"a10":"Deposit Funds",
+		"a11":"Withdraw Funds",
+		"a12":"Order History",
+		"a13":"Currency",
+		"a14":"Price",
+		"a15":"Change",
+		"a16":"Name / Ticker",
+		"a17":"Purchase Price",
+		"a18":"Selling Price",
+		"a19":"Quantity",
+		"a20":"Service Fee",
+		"a21":"Transaction Amount",
+		"a22":"Profit",
+		"a23":"Direction",
+		"a24":"Purchase Time",
+		"a25":"Sell Time",
+		"a26":"No Data Available",
+		"a27":"Transaction Amount",
+		"a28":"Minimum Deposit Amount",
+		"a29":"Cancel",
+		"a30":"Confirm",
+		"a31":"Please Enter Amount"
 	}
 }
diff --git a/src/i18n/fra.json b/src/i18n/fra.json
index b1a69ff..f1631b7 100644
--- a/src/i18n/fra.json
+++ b/src/i18n/fra.json
@@ -1157,5 +1157,38 @@
 		"hh41": "Muzkcoin, échangez à tout moment et n'importe où",
 		"hh42": "Négociez maintenant",
 		"hh43": "Scannez le code QR pour télécharger Muzkcoin APP"
+	},
+	"automation": {
+		"a1":"Trading automatisé par EA",
+		"a2":"Décisions avisées, profits faciles, la richesse à portée de main",
+		"a3":"Actions",
+		"a4":"Cryptomonnaies",
+		"a5":"Actifs totaux",
+		"a6":"Historique des transactions",
+		"a7":"Disponible",
+		"a8":"Profit du jour",
+		"a9":"Profit total",
+		"a10":"Déposer des fonds",
+		"a11":"Retirer des fonds",
+		"a12":"Historique des ordres",
+		"a13":"Devise",
+		"a14":"Prix",
+		"a15":"Variation",
+		"a16":"Nom / Symbole boursier",
+		"a17":"Prix d'achat",
+		"a18":"Prix de vente",
+		"a19":"Quantité",
+		"a20":"Frais de service",
+		"a21":"Montant de la transaction",
+		"a22":"Profit",
+		"a23":"Sens",
+		"a24":"Heure d'achat",
+		"a25":"Heure de vente",
+		"a26":"Aucune donnée disponible",
+		"a27":"Montant de la transaction",
+		"a28":"Montant minimum de dépôt",
+		"a29":"Annuler",
+		"a30":"Confirmer",
+		"a31":"Veuillez saisir le montant"
 	}
 }
diff --git a/src/i18n/he.json b/src/i18n/he.json
index 28b6223..05e7025 100644
--- a/src/i18n/he.json
+++ b/src/i18n/he.json
@@ -1174,5 +1174,38 @@
 		"hh41": "Muzkcoin, מסחר בכל זמן, בכל מקום",
 		"hh42": "סחור עכשיו",
 		"hh43": "APP Muzkcoin כדי להוריד את QR-סרוק את קוד ה"
+	},
+	"automation": {
+		"a1":"מסחר אוטומטי של EA",
+		"a2":"החלטות חכמות, רווחים קלים, עושר בהישג יד",
+		"a3":"מניות",
+		"a4":"מטבעות קריפטוגרפיים",
+		"a5":"סך הנכסים",
+		"a6":"היסטוריית עסקאות",
+		"a7":"זמין",
+		"a8":"רווח של היום",
+		"a9":"סך הרווח",
+		"a10":"הפקדת כספים",
+		"a11":"משיכת כספים",
+		"a12":"היסטוריית הזמנות",
+		"a13":"מטבע",
+		"a14":"מחיר",
+		"a15":"עודף",
+		"a16":"שם / טיקר",
+		"a17":"מחיר קנייה",
+		"a18":"מחיר מכירה",
+		"a19":"כמות",
+		"a20":"עמלת שירות",
+		"a21":"עסקה סכום",
+		"a22":"רווח",
+		"a23":"כיוון",
+		"a24":"זמן רכישה",
+		"a25":"זמן מכירה",
+		"a26":"אין נתונים זמינים",
+		"a27":"סכום עסקה",
+		"a28":"סכום הפקדה מינימלי",
+		"a29":"ביטול",
+		"a30":"אישור",
+		"a31":"אנא הזן סכום"
 	}
 }
\ No newline at end of file
diff --git a/src/i18n/it.json b/src/i18n/it.json
index eb63749..29e1292 100644
--- a/src/i18n/it.json
+++ b/src/i18n/it.json
@@ -1156,5 +1156,38 @@
 		"hh41": "Muzkcoin, fai trading sempre e ovunque",
 		"hh42": "Fai trading ora",
 		"hh43": "Scansiona il codice QR per scaricare Muzkcoin APP"
+	},
+	"automation": {
+		"a1":"Trading Automatizzato EA",
+		"a2":"Decisioni Intelligenti, Profitti Facili, Ricchezza a Portata di Mano",
+		"a3":"Azioni",
+		"a4":"Criptovalute",
+		"a5":"Patrimonio Totale",
+		"a6":"Cronologia Transazioni",
+		"a7":"Disponibile",
+		"a8":"Profitto di Oggi",
+		"a9":"Profitto Totale",
+		"a10":"Deposita Fondi",
+		"a11":"Preleva Fondi",
+		"a12":"Cronologia Ordini",
+		"a13":"Valuta",
+		"a14":"Prezzo",
+		"a15":"Variazione",
+		"a16":"Nome / Ticker",
+		"a17":"Prezzo di Acquisto",
+		"a18":"Prezzo di Vendita",
+		"a19":"Quantità",
+		"a20":"Commissione di Servizio",
+		"a21":"Importo della Transazione",
+		"a22":"Profitto",
+		"a23":"Direzione",
+		"a24":"Ora di Acquisto",
+		"a25":"Ora di Vendita",
+		"a26":"Nessun Dato Disponibile",
+		"a27":"Importo della Transazione",
+		"a28":"Importo Minimo di Deposito",
+		"a29":"Annulla",
+		"a30":"Conferma",
+		"a31":"Inserisci l'Importo"
 	}
 }
diff --git a/src/i18n/jp.json b/src/i18n/jp.json
index dac8d98..d8517e3 100644
--- a/src/i18n/jp.json
+++ b/src/i18n/jp.json
@@ -1155,5 +1155,38 @@
 		"hh41": "Muzkcoin、いつでもどこでも取引",
 		"hh42": "今すぐ取引",
 		"hh43": "QR コードをスキャンして Muzkcoin APP をダウンロードします"
+	},
+	"automation": {
+		"a1":"EA自動取引",
+		"a2":"賢い決断、手軽な利益、確実な資産形成",
+		"a3":"株式",
+		"a4":"暗号資産",
+		"a5":"総資産",
+		"a6":"取引履歴",
+		"a7":"利用可能額",
+		"a8":"本日の利益",
+		"a9":"総利益",
+		"a10":"入金",
+		"a11":"出金",
+		"a12":"注文履歴",
+		"a13":"通貨",
+		"a14":"価格",
+		"a15":"変動",
+		"a16":"名称 / ティッカー",
+		"a17":"購入価格",
+		"a18":"売却価格",
+		"a19":"数量",
+		"a20":"手数料",
+		"a21":"取引額",
+		"a22":"利益",
+		"a23":"方向",
+		"a24":"購入日時",
+		"a25":"売却日時",
+		"a26":"データなし",
+		"a27":"取引額",
+		"a28":"最低入金額",
+		"a29":"キャンセル",
+		"a30":"確定",
+		"a31":"金額を入力してください"
 	}
 }
diff --git a/src/i18n/kor.json b/src/i18n/kor.json
index 0c52553..12213d6 100644
--- a/src/i18n/kor.json
+++ b/src/i18n/kor.json
@@ -1155,5 +1155,38 @@
 		"hh41": "Muzkcoin, 언제 어디서나 거래하세요",
 		"hh42": "지금 거래하세요",
 		"hh43": "Muzkcoin APP을 다운로드하려면 QR 코드를 스캔하세요"
+	},
+	"automation": {
+		"a1":"EA 자동 매매",
+		"a2":"현명한 선택, 손쉬운 수익, 손에 잡히는 부",
+		"a3":"주식",
+		"a4":"암호화폐",
+		"a5":"총 자산",
+		"a6":"거래 내역",
+		"a7":"가용 잔액",
+		"a8":"오늘의 수익",
+		"a9":"총 수익",
+		"a10":"입금",
+		"a11":"출금",
+		"a12":"주문 내역",
+		"a13":"통화",
+		"a14":"가격",
+		"a15":"변동",
+		"a16":"종목명 / 티커",
+		"a17":"매수가",
+		"a18":"매도가",
+		"a19":"수량",
+		"a20":"수수료",
+		"a21":"거래 금액",
+		"a22":"수익",
+		"a23":"방향",
+		"a24":"매수 시간",
+		"a25":"매도 시간",
+		"a26":"데이터 없음",
+		"a27":"거래 금액",
+		"a28":"최소 입금액",
+		"a29":"취소",
+		"a30":"확인",
+		"a31":"금액을 입력해 주세요"
 	}
 }
diff --git a/src/i18n/pt.json b/src/i18n/pt.json
index ce18a04..dbdc8bc 100644
--- a/src/i18n/pt.json
+++ b/src/i18n/pt.json
@@ -1156,5 +1156,38 @@
 		"hh41": "Muzkcoin, negocie a qualquer hora, em qualquer lugar",
 		"hh42": "Negocie agora",
 		"hh43": "Digitalize o código QR para baixar Muzkcoin APP"
+	},
+	"automation": {
+		"a1":"Negociação Automatizada (EA)",
+		"a2":"Decisões Inteligentes, Lucros Fáceis, Riqueza ao Seu Alcance",
+		"a3":"Ações",
+		"a4":"Criptomoedas",
+		"a5":"Ativos Totais",
+		"a6":"Histórico de Transações",
+		"a7":"Disponível",
+		"a8":"Lucro de Hoje",
+		"a9":"Lucro Total",
+		"a10":"Depositar Fundos",
+		"a11":"Sacar Fundos",
+		"a12":"Histórico de Ordens",
+		"a13":"Moeda",
+		"a14":"Preço",
+		"a15":"Variação",
+		"a16":"Nome / Ticker",
+		"a17":"Preço de Compra",
+		"a18":"Preço de Venda",
+		"a19":"Quantidade",
+		"a20":"Taxa de Serviço",
+		"a21":"Valor da Transação",
+		"a22":"Lucro",
+		"a23":"Direção",
+		"a24":"Hora da Compra",
+		"a25":"Hora da Venda",
+		"a26":"Nenhum Dado Disponível",
+		"a27":"Valor da Transação",
+		"a28":"Valor Mínimo de Depósito",
+		"a29":"Cancelar",
+		"a30":"Confirmar",
+		"a31":"Por favor, insira o valor"
 	}
 }
diff --git a/src/i18n/spa.json b/src/i18n/spa.json
index 12b6304..ad5d6ba 100644
--- a/src/i18n/spa.json
+++ b/src/i18n/spa.json
@@ -1156,5 +1156,38 @@
 		"hh41": "Muzkcoin, opera en cualquier momento y en cualquier lugar",
 		"hh42": "Negociar ahora",
 		"hh43": "Escanea el código QR para descargar Muzkcoin APP"
+	},
+	"automation": {
+		"a1":"Trading automatizado con EA",
+		"a2":"Decisiones inteligentes, ganancias fáciles, riqueza al alcance",
+		"a3":"Acciones",
+		"a4":"Criptomonedas",
+		"a5":"Activos totales",
+		"a6":"Historial de transacciones",
+		"a7":"Disponible",
+		"a8":"Ganancia de hoy",
+		"a9":"Ganancia total",
+		"a10":"Depositar fondos",
+		"a11":"Retirar fondos",
+		"a12":"Historial de órdenes",
+		"a13":"Divisa",
+		"a14":"Precio",
+		"a15":"Variación",
+		"a16":"Nombre / Símbolo",
+		"a17":"Precio de compra",
+		"a18":"Precio de venta",
+		"a19":"Cantidad",
+		"a20":"Comisión de servicio",
+		"a21":"Importe de la transacción",
+		"a22":"Ganancia",
+		"a23":"Dirección",
+		"a24":"Hora de compra",
+		"a25":"Hora de venta",
+		"a26":"Sin datos disponibles",
+		"a27":"Importe de la transacción",
+		"a28":"Importe mínimo de depósito",
+		"a29":"Cancelar",
+		"a30":"Confirmar",
+		"a31":"Por favor, introduzca el importe"
 	}
 }
diff --git a/src/i18n/tr.json b/src/i18n/tr.json
index 496e578..ea650b9 100644
--- a/src/i18n/tr.json
+++ b/src/i18n/tr.json
@@ -1156,5 +1156,38 @@
 		"hh41": "Muzkcoin, her zaman, her yerde işlem yapın",
 		"hh42": "Şimdi işlem yap",
 		"hh43": "Muzkcoin APP'i indirmek için QR kodunu tarayın"
+	},
+	"automation": {
+		"a1":"EA Otomatik İşlem",
+		"a2":"Akıllı Kararlar, Kolay Kazançlar, Erişilebilir Servet",
+		"a3":"Hisseler",
+		"a4":"Kripto Para",
+		"a5":"Toplam Varlıklar",
+		"a6":"İşlem Geçmişi",
+		"a7":"Kullanılabilir",
+		"a8":"Bugünkü Kazanç",
+		"a9":"Toplam Kazanç",
+		"a10":"Para Yatır",
+		"a11":"Para Çek",
+		"a12":"Emir Geçmişi",
+		"a13":"Para Birimi",
+		"a14":"Fiyat",
+		"a15":"Değişim",
+		"a16":"İsim / Sembol",
+		"a17":"Alış Fiyatı",
+		"a18":"Satış Fiyatı",
+		"a19":"Miktar",
+		"a20":"Hizmet Ücreti",
+		"a21":"İşlem Tutarı",
+		"a22":"Kazanç",
+		"a23":"Yön",
+		"a24":"Alış Zamanı",
+		"a25":"Satış Zamanı",
+		"a26":"Veri Bulunmuyor",
+		"a27":"İşlem Tutarı",
+		"a28":"Minimum Yatırma Tutarı",
+		"a29":"İptal",
+		"a30":"Onayla",
+		"a31":"Lütfen Tutar Girin"
 	}
 }
diff --git a/src/i18n/tw.json b/src/i18n/tw.json
index 77496f4..f275ba4 100644
--- a/src/i18n/tw.json
+++ b/src/i18n/tw.json
@@ -1192,5 +1192,38 @@
 		"hh41": "Muzkcoin，随时随地交易",
 		"hh42": "立即交易",
 		"hh43": "扫码下载Muzkcoin APP"
+	},
+	"automation": {
+		"a1":"EA自動化交易",
+		"a2":"智能決策 輕鬆獲利 財富觸手可及",
+		"a3":"股票",
+		"a4":"加密貨幣",
+		"a5":"總資產",
+		"a6":"資金紀錄",
+		"a7":"可用",
+		"a8":"今日收益",
+		"a9":"總收益",
+		"a10":"存入資金",
+		"a11":"提取資金",
+		"a12":"歷史訂單",
+		"a13":"幣種",
+		"a14":"價格",
+		"a15":"漲跌",
+		"a16":"名稱 / 代碼",
+		"a17":"購買價格",
+		"a18":"售價",
+		"a19":"數量",
+		"a20":"服務費",
+		"a21":"成交額",
+		"a22":"收益",
+		"a23":"方向",
+		"a24":"購買時間",
+		"a25":"賣出時間",
+		"a26":"暫無資料",
+		"a27":"成交額",
+		"a28":"最低存款金額",
+		"a29":"取消",
+		"a30":"確認",
+		"a31":"請輸入金額"
 	}
 }
diff --git a/src/router/index.js b/src/router/index.js
index 1ff561f..fc7f004 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -47,6 +47,7 @@ import NoticeDetail from '@/views/notice/detail'
 import MarketTrends from '@/views/mineview/MarketTrends'
 
 import ExchangeStock from '@/views/exchangeStock'
+import EllasAlpha from '@/views/ellasAlpha'
 
 Vue.use(VueRouter);
 
@@ -163,6 +164,11 @@ const routes = [{
 	    name: "exchangeStock",
 	    path: "/exchangestock/:symbol?",
 	    component: ExchangeStock
+	},
+	{
+	    name: "ellasAlpha",
+	    path: "/ellasAlpha",
+	    component: EllasAlpha
 	}
 ]
 
diff --git a/src/views/ellasAlpha/index.vue b/src/views/ellasAlpha/index.vue
new file mode 100644
index 0000000..c762c85
--- /dev/null
+++ b/src/views/ellasAlpha/index.vue
@@ -0,0 +1,583 @@
+<template>
+  <div class="ea-trading-container">
+    <!-- ================= 顶部黑色区域 ================= -->
+    <div class="header-section">
+      <div class="header-content">
+        <!-- 左侧标题与切换按钮 -->
+        <div class="header-left">
+          <h1 class="title">{{$t('automation.a1')}}</h1>
+          <p class="subtitle">{{$t('automation.a2')}}</p>
+          <div class="toggle-btns">
+            <button 
+              :class="['btn-toggle', mainTab === 'stock' ? 'active' : '']" 
+              @click="switchMainTab('stock')"
+            >{{$t('automation.a3')}}</button>
+            <button 
+              :class="['btn-toggle', mainTab === 'crypto' ? 'active' : '']" 
+              @click="switchMainTab('crypto')"
+            >{{$t('automation.a4')}}</button>
+          </div>
+        </div>
+
+        <!-- 右侧资产信息 -->
+        <div class="header-right">
+          <div>
+            <div style="display: flex;justify-content: space-between;margin-bottom: 20px;">
+				<div class="asset-item">
+				  <span class="label">{{$t('automation.a5')}}</span>
+				  <span class="value">{{ currentAccount.total }} {{ currencyUnit }}</span>
+				</div>
+				<div class="asset-item text-right">
+				  <span class="link-text">{{$t('automation.a6')}} ></span>
+				</div>
+			</div>
+            <div class="asset-grid">
+				<div class="asset-item">
+				  <span class="label">{{$t('automation.a7')}}</span>
+				  <span class="value">{{ currentAccount.usable }} {{ currencyUnit }}</span>
+				</div>
+				<div class="asset-item">
+				  <span class="label">{{$t('automation.a8')}}</span>
+				  <span class="value">{{ currentAccount.todayProfit }} {{ currencyUnit }}</span>
+				</div>
+				<div class="asset-item">
+				  <span class="label">{{$t('automation.a9')}}</span>
+				  <span class="value">{{ currentAccount.totalProfit }} {{ currencyUnit }}</span>
+				</div>
+			</div>
+          </div>
+          <div class="action-links">
+            <span class="link-text" @click="showModal('deposit')">{{$t('automation.a10')}} ></span>
+            <span class="link-text" @click="showModal('withdraw')">{{$t('automation.a11')}} ></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ================= 底部白色区域 ================= -->
+    <div class="body-section">
+      <!-- 内部 Tab 切换 -->
+      <div class="tabs">
+        <div 
+          :class="['tab-item', subTab === 'list' ? 'active' : '']" 
+          @click="subTab = 'list'"
+        >
+          {{ mainTab === 'stock' ? $t('automation.a3') : $t('automation.a4') }}
+        </div>
+        <div 
+          :class="['tab-item', subTab === 'history' ? 'active' : '']" 
+          @click="subTab = 'history'"
+        >
+          {{$t('automation.a12')}}
+        </div>
+      </div>
+
+      <!-- 内容区: 列表 (股票或加密货币双列布局) -->
+      <div v-if="subTab === 'list'" class="list-view">
+        <div class="list-header-container">
+          <!-- 左边标题 -->
+          <div class="header-half">
+            <span class="w-name">{{ mainTab === 'stock' ? $t('automation.a3') : $t('automation.a13') }}</span>
+            <span class="w-price">{{$t('automation.a14')}}</span>
+            <span class="w-change">{{$t('automation.a15')}}</span>
+          </div>
+          <!-- 右边标题 -->
+          <div class="header-half">
+            <span class="w-name">{{ mainTab === 'stock' ? $t('automation.a3') : $t('automation.a13') }}</span>
+            <span class="w-price">{{$t('automation.a14')}}</span>
+            <span class="w-change">{{$t('automation.a15')}}</span>
+          </div>
+        </div>
+        <div class="grid-container">
+          <div class="grid-card" v-for="(item, index) in currentList" :key="index">
+            <div class="coin-info">
+              <!-- 占位图标 -->
+              <div class="icon-placeholder">{{ item.symbol.charAt(0) }}</div>
+              <div class="name-box">
+                <div class="name">{{ item.name }}</div>
+                <div class="symbol">{{ item.symbol }}</div>
+              </div>
+            </div>
+            <div class="price">{{ item.price }}</div>
+            <div :class="['change', item.change > 0 ? 'text-green' : 'text-red']">
+              {{ item.change > 0 ? '+' : '' }}{{ item.change }}%
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 内容区: 历史订单 -->
+      <div v-if="subTab === 'history'" class="history-view">
+        <table class="history-table">
+          <thead>
+            <tr>
+              <th>{{$t('automation.a16')}}</th>
+              <th>{{$t('automation.a17')}}</th>
+              <th>{{$t('automation.a18')}}</th>
+              <th>{{$t('automation.a19')}}</th>
+              <th>{{$t('automation.a20')}}</th>
+              <th>{{$t('automation.a21')}}</th>
+              <th>{{$t('automation.a22')}}</th>
+              <th>{{$t('automation.a23')}}</th>
+              <th>{{$t('automation.a24')}}</th>
+              <th class="text-right">{{$t('automation.a25')}}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="currentHistory.length === 0">
+              <td colspan="10" class="empty-text">{{$t('automation.a26')}}</td>
+            </tr>
+            <!-- 这里可以写 v-for 渲染历史数据 -->
+          </tbody>
+        </table>
+        <!-- 分页占位 -->
+        <div class="pagination">
+          <span class="arrow">&lt;</span>
+          <span class="page-num">1</span>
+          <span class="arrow">&gt;</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- ================= 弹窗 (存入资金) ================= -->
+    <div class="modal-overlay" v-if="modalType === 'deposit'">
+      <div class="modal-box">
+        <div class="modal-header">
+          <h3>{{$t('automation.a10')}}</h3>
+          <span class="close-btn" @click="closeModal">×</span>
+        </div>
+        <div class="modal-body">
+          <label>{{$t('automation.a27')}}</label>
+          <input type="number" :placeholder="$t('automation.a31')" v-model="formAmount">
+          <div class="modal-tips">
+            <p>{{$t('automation.a5')}}: {{ currentAccount.total }} {{ currencyUnit }}</p>
+            <p>{{$t('automation.a28')}}: 0.00 {{ currencyUnit }}</p>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn-cancel" @click="closeModal">{{$t('automation.a29')}}</button>
+          <button class="btn-confirm" @click="confirmAction">{{$t('automation.a30')}}</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ================= 弹窗 (提取资金) ================= -->
+    <div class="modal-overlay" v-if="modalType === 'withdraw'">
+      <div class="modal-box">
+        <div class="modal-header">
+          <h3>{{$t('automation.a11')}}</h3>
+          <span class="close-btn" @click="closeModal">×</span>
+        </div>
+        <div class="modal-body">
+          <label>{{$t('automation.a21')}}</label>
+          <input type="number" :placeholder="$t('automation.a31')" v-model="formAmount">
+          <div class="modal-tips">
+            <p>{{$t('automation.a7')}}: {{ currentAccount.usable }} {{ currencyUnit }}</p>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn-cancel" @click="closeModal">{{$t('automation.a29')}}</button>
+          <button class="btn-confirm" @click="confirmAction">{{$t('automation.a30')}}</button>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EaTrading',
+  data() {
+    return {
+      mainTab: 'stock', // 'stock' | 'crypto'
+      subTab: 'list', // 'list' | 'history'
+      modalType: '', // '' | 'deposit' | 'withdraw'
+      formAmount: '',
+
+      // 账户数据 mock
+      accountData: {
+        stock: {
+          total: '0.00',
+          usable: '0.00',
+          todayProfit: '0.00',
+          totalProfit: '0.00'
+        },
+        crypto: {
+          total: '209,000.00',
+          usable: '90,000.00',
+          todayProfit: '0.00',
+          totalProfit: '0.00'
+        }
+      },
+
+      // 列表数据 mock
+      stockList: [
+        { name: 'Micron Technology,...', symbol: 'MU', price: '996.00000', change: -7.74 },
+        { name: 'MINISO Group Hold...', symbol: 'MNSO', price: '13.31000', change: 0.30 },
+        { name: 'Nvidia Corp', symbol: 'NVDA', price: '218.66000', change: 1.82 },
+        { name: 'Invesco LTD', symbol: 'IVZ', price: '28.17000', change: 4.57 },
+        { name: 'Broadcom Inc. Com...', symbol: 'AVGO', price: '418.91000', change: -12.59 },
+        { name: 'Robert Half Inc.', symbol: 'RHI', price: '31.60000', change: 6.90 },
+      ],
+      cryptoList: [
+        { name: 'SOL/USDC', symbol: 'SOL', price: '65.89', change: -5.04 },
+        { name: 'BTC/USDC', symbol: 'BTC', price: '62,872.47', change: -1.55 },
+        { name: 'GALA/USDC', symbol: 'GALA', price: '0.00256', change: -5.17 },
+        { name: 'FIL/USDC', symbol: 'FIL', price: '0.802', change: -6.64 },
+        { name: 'GRT/USDC', symbol: 'GRT', price: '0.0205', change: -5.94 },
+        { name: 'HBAR/USDC', symbol: 'HBAR', price: '0.0815', change: -5.08 },
+      ],
+
+      // 历史订单 mock (默认空数组体现截图效果)
+      stockHistory: [],
+      cryptoHistory: []
+    }
+  },
+  computed: {
+    currencyUnit() {
+      return this.mainTab === 'stock' ? 'USDT' : 'USDC';
+    },
+    currentAccount() {
+      return this.accountData[this.mainTab];
+    },
+    currentList() {
+      return this.mainTab === 'stock' ? this.stockList : this.cryptoList;
+    },
+    currentHistory() {
+      return this.mainTab === 'stock' ? this.stockHistory : this.cryptoHistory;
+    }
+  },
+  methods: {
+    switchMainTab(tab) {
+      this.mainTab = tab;
+      // 切换主分类时，可以根据需求决定是否重置子菜单，这里默认保持原样
+    },
+    showModal(type) {
+      this.modalType = type;
+      this.formAmount = '';
+    },
+    closeModal() {
+      this.modalType = '';
+    },
+    confirmAction() {
+      if (!this.formAmount) {
+        // alert('請輸入金額');
+        return;
+      }
+      console.log(`${this.modalType} amount:`, this.formAmount);
+      // 调用你的后端接口逻辑...
+      this.closeModal();
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 基础重置与变量 */
+.ea-trading-container {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  color: #333;
+  /* background-color: #f5f5f5; */
+  min-height: 100vh;
+}
+
+/* ================= 顶部黑色区域 ================= */
+.header-section {
+  background-color: #000;
+  color: #fff;
+  padding: 100px 0;
+}
+.header-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
+}
+.title {
+  font-size: 28px;
+  margin: 0 0 10px 0;
+}
+.subtitle {
+  font-size: 14px;
+  color: #aaa;
+  margin: 0 0 30px 0;
+}
+.toggle-btns {
+  display: flex;
+  gap: 10px;
+}
+.btn-toggle {
+  background-color: #2c2d31;
+  color: #aaa;
+  border: none;
+  padding: 10px 24px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s;
+}
+.btn-toggle.active {
+  background-color: #fff;
+  color: #000;
+  font-weight: bold;
+}
+
+.header-right {
+  width: 500px;
+}
+.asset-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  row-gap: 20px;
+  margin-bottom: 20px;
+}
+.asset-item {
+  display: flex;
+  flex-direction: column;
+}
+.asset-item.text-right {
+  align-items: flex-end;
+}
+.asset-item .label {
+  font-size: 12px;
+  color: #aaa;
+  margin-bottom: 5px;
+}
+.asset-item .value {
+  font-size: 16px;
+  font-weight: 500;
+}
+.link-text {
+  font-size: 13px;
+  color: #aaa;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+.link-text:hover {
+  color: #fff;
+}
+.action-links {
+  display: flex;
+  gap: 40px;
+}
+
+/* ================= 底部白色区域 ================= */
+.body-section {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 30px 20px;
+  background-color: #fff;
+  min-height: 500px;
+}
+.tabs {
+  display: flex;
+  border-bottom: 1px solid #eee;
+  margin-bottom: 20px;
+}
+.tab-item {
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 16px;
+  color: #888;
+  border-bottom: 2px solid transparent;
+}
+.tab-item.active {
+  color: #000;
+  font-weight: bold;
+  border-bottom: 2px solid #000;
+}
+
+/* 列表视图布局 */
+.list-header-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr; /* 和数据列表一样的双列 */
+  gap: 20px; /* 保持中间有间距 */
+  margin-bottom: 10px;
+}
+.header-half {
+  display: flex;
+  padding: 10px;
+  color: #999;
+  font-size: 13px;
+  background: #f9f9f9;
+}
+.w-name { flex: 2; }
+.w-price { flex: 1; text-align: right; }
+.w-change { flex: 1; text-align: right; }
+
+.grid-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr; /* 双列布局 */
+  gap: 20px;
+}
+.grid-card {
+  display: flex;
+  align-items: center;
+  padding: 15px 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.coin-info {
+  flex: 2;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.icon-placeholder {
+  width: 30px;
+  height: 30px;
+  background-color: #2962ff;
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: bold;
+}
+.name-box .name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+.name-box .symbol {
+  font-size: 12px;
+  color: #999;
+}
+.price {
+  flex: 1;
+  text-align: right;
+  font-size: 14px;
+}
+.change {
+  flex: 1;
+  text-align: right;
+  font-size: 14px;
+}
+.text-green { color: #0ecb81; }
+.text-red { color: #f6465d; }
+
+/* 历史记录表格 */
+.history-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.history-table th {
+  background: #f9f9f9;
+  color: #999;
+  font-weight: normal;
+  padding: 12px;
+  text-align: left;
+}
+.history-table td {
+  padding: 15px 12px;
+  border-bottom: 1px solid #eee;
+}
+.text-right {
+  text-align: right !important;
+}
+.empty-text {
+  text-align: center !important;
+  color: #999;
+  padding: 40px !important;
+}
+
+/* 分页 */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 30px;
+  gap: 15px;
+}
+.pagination .page-num {
+  padding: 5px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+.pagination .arrow {
+  cursor: pointer;
+  color: #666;
+}
+
+/* ================= 弹窗样式 ================= */
+.modal-overlay {
+  position: fixed;
+  top: 0; left: 0; width: 100%; height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+}
+.modal-box {
+  background: #fff;
+  width: 400px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+}
+.modal-header h3 {
+  margin: 0;
+  font-size: 16px;
+}
+.close-btn {
+  font-size: 24px;
+  color: #999;
+  cursor: pointer;
+}
+.modal-body {
+  padding: 0 20px;
+}
+.modal-body label {
+  display: block;
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 8px;
+}
+.modal-body input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+.modal-tips {
+  margin-top: 15px;
+  font-size: 12px;
+  color: #999;
+  line-height: 1.8;
+}
+.modal-tips p { margin: 0; }
+.modal-footer {
+  display: flex;
+  gap: 10px;
+  padding: 20px;
+  margin-top: 10px;
+}
+.btn-cancel, .btn-confirm {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.btn-cancel {
+  background: #f5f5f5;
+  color: #333;
+}
+.btn-confirm {
+  background: #000;
+  color: #fff;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/exchangeStock/book-trades.vue b/src/views/exchangeStock/book-trades.vue
index f55cd13..a839aab 100644
--- a/src/views/exchangeStock/book-trades.vue
+++ b/src/views/exchangeStock/book-trades.vue
@@ -19,7 +19,7 @@
 
             <tbody class="sell-orders" v-if="symbol!='gitpusdt'">
                 <div class="order-item" v-for="item in sellList" :key="item.id">
-                    <el-progress class="progress" type="line" :stroke-width="39" :percentage="getValue(item.amount)" :show-text="false" color="rgba(216,43,43,0.15)" define-back-color="#121212">
+                    <el-progress class="progress" type="line" :stroke-width="39" :percentage="getValue(item.amount)" :show-text="false" color="rgba(216,43,43,0.15)">
                     </el-progress>
                     <!-- 卖单 使用弹性盒子倒序排列 -->
                     <tr style="display:block;" class="tb-cells" @click.stop="handleOrder(item.price)">
@@ -61,7 +61,7 @@
             <tbody class="buy-orders"  :style="[{'height':symbol!='gitpusdt'?'':'470px!important'}]">
                 <!-- 买单 反序数值 -->
                 <div class="order-item" v-for="item in reversed" :key="item.id">
-                    <el-progress class="progress" type="line" :stroke-width="39" :percentage="getValue(item.amount)" :show-text="false" color="rgba(37, 188, 103, 0.15)" define-back-color="#121212">
+                    <el-progress class="progress" type="line" :stroke-width="39" :percentage="getValue(item.amount)" :show-text="false" color="rgba(37, 188, 103, 0.15)">
                     </el-progress>
                     <!-- 卖单 使用弹性盒子倒序排列 -->
                     <tr style="display:block;" class="tb-cells" @click.stop="handleOrder(item.price)">
@@ -322,13 +322,13 @@ export default {
 
     // 给外边框添加不同的底色
     &:nth-child(even) .progress .el-progress-bar__outer {
-        background: #F8F8FF;
+        background: #ffffff !important;
         // background: #f6f8f9;
 
     }
 
     &:nth-child(odd) .progress .el-progress-bar__outer {
-        background: #ffffff;
+        background: #ffffff !important;
     }
 }
 
@@ -379,6 +379,7 @@ export default {
 #lightDepthChart {
     height: 305px;
 }
+
 </style>
 <style lang="scss" scoped>
 .ob-heading {
@@ -388,4 +389,4 @@ export default {
 .textcolor{
 	color: #007bff;
 }
-</style>
+</style>
\ No newline at end of file