From f66eee1d038afc05f1a727db256ba5c6818f6fb4 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 27 Jan 2026 15:35:51 +0800
Subject: [PATCH] 1
---
src/views/usStock/List.vue | 2
src/assets/image/exNav/more.png | 0
src/views/optional/index.vue | 16
src/assets/theme/dark/image/footer/quotes.png | 0
src/components/fx-kline/index.vue | 2
src/assets/theme/dark/image/footer/menu.png | 0
src/assets/theme/dark/image/footer/trade.png | 0
src/views/login/index.vue | 2
src/assets/image/exNav/合约交易.png | 0
src/components/fx-footer/index.vue | 18
src/views/quotes/components/EntrustItem.vue | 2
src/views/quotes/List.vue | 144 +++-
src/views/usStock/components/EntrustItem.vue | 2
src/views/optional/Search.vue | 2
src/assets/css/index.scss | 129 ++++
src/assets/theme/dark/image/footer/news.png | 0
src/assets/theme/dark/image/footer/funds.png | 0
src/views/quotes/components/Withdrawal.vue | 2
index.html | 2
src/config/index.js | 10
src/views/quotes/components/BuySellTradeTab.vue | 2
src/assets/image/exNav/SpotTrading.png | 0
src/assets/theme/dark/image/footer/menu-active.png | 0
vite.config.js | 4
src/views/quotes/components/Position.vue | 2
src/assets/theme/dark/image/footer/optional.png | 0
src/views/personal/index.vue | 98 ++
src/assets/theme/dark/image/footer/news-active.png | 0
src/views/optional/EditGroupList.vue | 24
src/views/my/index.vue | 112 ++-
src/assets/image/exNav/存入.png | 0
src/assets/theme/dark/image/footer/optional-active.png | 0
src/store/theme.js | 2
src/views/morePage/index.vue | 15
src/assets/image/exNav/提现.png | 0
src/assets/theme/dark/image/footer/trade-active.png | 0
src/views/quotes/components/Search.vue | 2
src/assets/theme/dark/image/footer/funds-active.png | 0
src/views/cryptos/Exchange/exchangePage.vue | 9
src/views/trade/index.vue | 229 +++++--
src/assets/theme/dark/image/footer/quotes-active.png | 0
src/components/Transform/mining-exchange-input/index.vue | 12
src/views/home/index.vue | 471 ++++++++++++-----
src/views/cryptos/index.vue | 6
src/assets/css/variable.scss | 86 +-
src/components/Transform/cry-nav/index.vue | 110 ++-
src/App.vue | 51 +
47 files changed, 1,042 insertions(+), 526 deletions(-)
diff --git a/index.html b/index.html
index 1c170e9..df0d987 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="en" theme="dark">
<head>
<meta charset="UTF-8" />
diff --git a/src/App.vue b/src/App.vue
index 9a76087..0e1990e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -35,10 +35,9 @@
if (usercode) {
setStorage("usercode", usercode);
}
-thStore[SET_THEME]("white", false); // dark white
-//设置主题
+//设置主题 - 默认使用黑夜模式
if (!getStorage("theme")) {
- thStore[SET_THEME]("dark", true);
+ thStore[SET_THEME]("dark", false); // 默认使用黑夜模式
} else {
thStore[SET_THEME](thStore.theme, false);
}
@@ -105,9 +104,6 @@
background-color: $active_line !important;
}
- .van-tabs__wrap {
- // height: 88px !important;
- }
.van-tab__text--ellipsis {
overflow: visible !important;
@@ -165,8 +161,7 @@
.popup-delivery {
.van-circle {
- // width: 300px !important;
- // height: 300px !important;
+ display: block;
}
.van-count-down {
@@ -276,6 +271,8 @@
.van-tabbar--fixed {
z-index: 10;
padding-bottom: constant(safe-area-inset-bottom);
+ box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
+ border-top: 1px solid rgba(118, 128, 143, 0.1);
}
#buy_nav {
@@ -297,15 +294,20 @@
}
.van-cell {
- padding: 0;
+ padding: 16px 20px;
color: $text_color1;
+ border-radius: 12px;
+ margin-bottom: 8px;
+ background: $main_background;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
&::after {
border: none;
}
.van-cell__value {
- color: $black;
+ color: $text_color;
+ font-weight: 500;
}
}
@@ -320,6 +322,9 @@
.van-dialog {
background: $main_background;
+ border-radius: 20px;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+ overflow: hidden;
}
.van-dialog__header {
@@ -332,12 +337,36 @@
.van-button--default {
background: $main_background;
- color: $dark-grey;
+ color: $text_color;
+ border: 1px solid rgba(118, 128, 143, 0.2);
+ border-radius: 12px;
+ transition: all 0.2s ease;
+
+ &:hover {
+ background: rgba(146, 209, 255, 0.05);
+ border-color: rgba(146, 209, 255, 0.3);
+ }
+ }
+
+ .van-button--primary {
+ background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+ border: none;
+ border-radius: 12px;
+ box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
+ box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
+ transform: translateY(-1px);
+ }
}
.van-nav-bar {
background: $main_background;
line-height: normal;
+ border-bottom: 1px solid rgba(118, 128, 143, 0.1);
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.van-dropdown-menu__title {
diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
index dc4d866..9d3afaf 100644
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -6,7 +6,7 @@
/* overwite default */
:root {
- font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
@@ -107,19 +107,43 @@
.inputBackground {
- background: #1B233B;
+ background: $input_background;
+ border-radius: 12px;
+ border: 1px solid rgba(118, 128, 143, 0.1);
+ transition: all 0.2s ease;
+
+ &:focus {
+ border-color: rgba(146, 209, 255, 0.3);
+ box-shadow: 0 0 0 3px rgba(146, 209, 255, 0.1);
+ }
}
.colorMain {
- color: #1194F7;
+ color: #92D1FF;
}
.btnMain {
- background: #1194F7;
+ background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+ border: none;
+ border-radius: 12px;
+ box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
+ box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
+ transform: translateY(-1px);
+ }
+
+ &:active {
+ transform: translateY(0);
+ box-shadow: 0 2px 8px rgba(146, 209, 255, 0.3);
+ }
}
#cryptos .btnMain {
- background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%)
+ background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+ box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
}
.leftReturn {
@@ -135,6 +159,37 @@
.text-blue {
color: $blue;
+}
+
+/* Crypto.com 风格辅助类 */
+.shadow-card {
+ box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+}
+
+.shadow-card-hover {
+ box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
+ transition: all 0.3s ease;
+
+ &:hover {
+ box-shadow: 0 6px 24px rgba(146, 209, 255, 0.16);
+ transform: translateY(-2px);
+ }
+}
+
+.gradient-primary {
+ background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+}
+
+.gradient-text {
+ background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.border-crypto {
+ border: 1px solid rgba(118, 128, 143, 0.1);
+ border-radius: 12px;
}
/***************** global use framework *****************/
@@ -257,35 +312,75 @@
outline: none;
}
-/* border radius */
+/* border radius - Crypto.com 风格 */
.rounded-sm {
- border-radius: 2px;
-}
-
-.rounded {
- border-radius: 4px;
-}
-
-.rounded-md {
border-radius: 6px;
}
-.rounded-lg {
+.rounded {
border-radius: 8px;
}
-.rounded-xl {
+.rounded-md {
+ border-radius: 10px;
+}
+
+.rounded-lg {
border-radius: 12px;
}
-.rounded-2xl {
+.rounded-xl {
border-radius: 16px;
+}
+
+.rounded-2xl {
+ border-radius: 20px;
}
.rounded-full {
border-radius: 9999px;
}
+/* 卡片样式 - Crypto.com 风格 */
+.card {
+ background: $main_background;
+ border-radius: 16px;
+ padding: 20px;
+ box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+ border: 1px solid rgba(118, 128, 143, 0.1);
+ transition: all 0.3s ease;
+
+ &:hover {
+ box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
+ transform: translateY(-2px);
+ }
+}
+
+/* 渐变按钮 */
+.btn-gradient {
+ background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+ color: #ffffff;
+ border: none;
+ border-radius: 12px;
+ padding: 12px 24px;
+ font-weight: 600;
+ font-size: 15px;
+ cursor: pointer;
+ box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
+ box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
+ transform: translateY(-1px);
+ }
+
+ &:active {
+ transform: translateY(0);
+ box-shadow: 0 2px 8px rgba(146, 209, 255, 0.3);
+ }
+}
+
/** box-sizing */
.box-border {
box-sizing: border-box;
diff --git a/src/assets/css/variable.scss b/src/assets/css/variable.scss
index 008299b..2a65afb 100644
--- a/src/assets/css/variable.scss
+++ b/src/assets/css/variable.scss
@@ -1,23 +1,23 @@
html[theme="white"]:root {
- //白色主题
- --mainBgColor: #fff;
- --mainTextColor: #333;
+ //白色主题 - Crypto.com 风格
+ --mainBgColor: #ffffff;
+ --mainTextColor: #0B1426;
--mainbgWhiteColor: #fff;
- --main_background: #fff;
- --main2_background: #fff;
+ --main_background: #ffffff;
+ --main2_background: #f8f9fa;
--main3_background: #F7F9F9;
- --text_color: #333;
- --text_color1: #868D9A;
- --text_color2: #333;
- --text_color3: #999;
- --text_color4: #333;
- --text_color5: #878A96;
- --text_color6: #666;
+ --text_color: #0B1426;
+ --text_color1: #76808F;
+ --text_color2: #0B1426;
+ --text_color3: #76808F;
+ --text_color4: #0B1426;
+ --text_color5: #76808F;
+ --text_color6: #76808F;
--tab_background: #F6F8F9;
- --active_line: #C42F2E;
- --footer_background: #252738;
- --btn_main: #C42F2E;
- --color_main: #C42F2E;
+ --active_line: #92D1FF;
+ --footer_background: #ffffff;
+ --btn_main: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+ --color_main: #92D1FF;
--btn_background: #474B62;
--input_background: #F5F5F5;
--cont_background1: #f5f5f5;
@@ -88,7 +88,7 @@
--tab_active: #EAEDF2;
--exchange-bg: #f5f5f5;
--f10-text: #868D9A;
- --quotes-btn-bg: #C42F2E;
+ --quotes-btn-bg: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
--quotes-btn-text: #ffffff;
--van-bg: #ffffff;
--ipo_card_bg: #F5F8FC;
@@ -106,25 +106,25 @@
}
html[theme="dark"]:root {
- //黑色主题
- --mainBgColor: #131A2E;
- --mainTextColor: #fff;
+ //黑色主题 - Crypto.com 风格
+ --mainBgColor: #0B1426;
+ --mainTextColor: #ffffff;
--mainbgWhiteColor: #fff;
- --main_background: #131a2e;
- --main2_background: #1F233D;
- --main3_background: #131a2e;
- --text_color: #fff;
- --text_color1: #868D9A;
- --text_color2: #fff;
- --text_color3: #CFD5EC;
- --text_color4: #333;
- --text_color5: #878A96;
- --text_color6: #B7BDD1;
- --tab_background: #27293B;
- --active_line: #1678FF;
- --footer_background: #252738;
- --btn_main: #1678FF;
- --color_main: #1678FF;
+ --main_background: #0B1426;
+ --main2_background: #1A2332;
+ --main3_background: #0B1426;
+ --text_color: #ffffff;
+ --text_color1: #76808F;
+ --text_color2: #ffffff;
+ --text_color3: #EAECEF;
+ --text_color4: #ffffff;
+ --text_color5: #76808F;
+ --text_color6: #EAECEF;
+ --tab_background: #1A2332;
+ --active_line: #ffffff;
+ --footer_background: #0B1426;
+ --btn_main: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+ --color_main: #92D1FF;
--btn_background: #474B62;
--input_background: #27293B;
--cont_background1: #27293B;
@@ -156,7 +156,7 @@
--pledgeLoan_background: #00E3FF;
--financialBackground: #1E2340;
--footer_bg: #131A2E;
- --footer_color: #BEC1D2;
+ --footer_color: #76808F;
--recommend_bg: #1A2136;
--tab_normal_text: #999;
--hot-item-bg: #1B2134;
@@ -195,8 +195,8 @@
--tab_active: #1F233D;
--exchange-bg: #0D1323;
--f10-text: #B6BDD4;
- --quotes-btn-bg: #112542;
- --quotes-btn-text: #1194F7;
+ --quotes-btn-bg: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+ --quotes-btn-text: #ffffff;
--van-bg: #121a2e;
--ipo_card_bg: #192137;
--ipo_normal_text: #B7BDD1;
@@ -321,8 +321,8 @@
$dark-grey: #868C9A;
$light-grey: #C8CAD2;
$border-grey: #E5E7ED;
-$blue: #1678FF;
-$light-blue: #1199FA;
+$blue: #92D1FF;
+$light-blue: #7BB8FF;
$red: #F43368;
$green: #06CDA5;
$purple: #9A4DFD;
@@ -752,5 +752,9 @@
}
:root {
- --theme-color: #1194F7;
+ --theme-color: #92D1FF;
+ --card-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+ --card-shadow-hover: 0 4px 20px rgba(146, 209, 255, 0.12);
+ --gradient-primary: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+ --gradient-primary-hover: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
}
\ No newline at end of file
diff --git a/src/assets/image/exNav/SpotTrading.png b/src/assets/image/exNav/SpotTrading.png
new file mode 100644
index 0000000..3121862
--- /dev/null
+++ b/src/assets/image/exNav/SpotTrading.png
Binary files differ
diff --git a/src/assets/image/exNav/more.png b/src/assets/image/exNav/more.png
new file mode 100644
index 0000000..881fc16
--- /dev/null
+++ b/src/assets/image/exNav/more.png
Binary files differ
diff --git "a/src/assets/image/exNav/\345\220\210\347\272\246\344\272\244\346\230\223.png" "b/src/assets/image/exNav/\345\220\210\347\272\246\344\272\244\346\230\223.png"
new file mode 100644
index 0000000..54eab60
--- /dev/null
+++ "b/src/assets/image/exNav/\345\220\210\347\272\246\344\272\244\346\230\223.png"
Binary files differ
diff --git "a/src/assets/image/exNav/\345\255\230\345\205\245.png" "b/src/assets/image/exNav/\345\255\230\345\205\245.png"
new file mode 100644
index 0000000..fb1034e
--- /dev/null
+++ "b/src/assets/image/exNav/\345\255\230\345\205\245.png"
Binary files differ
diff --git "a/src/assets/image/exNav/\346\217\220\347\216\260.png" "b/src/assets/image/exNav/\346\217\220\347\216\260.png"
new file mode 100644
index 0000000..2c33c84
--- /dev/null
+++ "b/src/assets/image/exNav/\346\217\220\347\216\260.png"
Binary files differ
diff --git a/src/assets/theme/dark/image/footer/funds-active.png b/src/assets/theme/dark/image/footer/funds-active.png
index f1fa923..4bbacd8 100644
--- a/src/assets/theme/dark/image/footer/funds-active.png
+++ b/src/assets/theme/dark/image/footer/funds-active.png
Binary files differ
diff --git a/src/assets/theme/dark/image/footer/funds.png b/src/assets/theme/dark/image/footer/funds.png
index 0beec31..1ac68d9 100644
--- a/src/assets/theme/dark/image/footer/funds.png
+++ b/src/assets/theme/dark/image/footer/funds.png
Binary files differ
diff --git a/src/assets/theme/dark/image/footer/menu-active.png b/src/assets/theme/dark/image/footer/menu-active.png
index 404c5c0..7194e58 100644
--- a/src/assets/theme/dark/image/footer/menu-active.png
+++ b/src/assets/theme/dark/image/footer/menu-active.png
Binary files differ
diff --git a/src/assets/theme/dark/image/footer/menu.png b/src/assets/theme/dark/image/footer/menu.png
index d76e93c..27e9f02 100644
--- a/src/assets/theme/dark/image/footer/menu.png
+++ b/src/assets/theme/dark/image/footer/menu.png
Binary files differ
diff --git a/src/assets/theme/dark/image/footer/news-active.png b/src/assets/theme/dark/image/footer/news-active.png
index 5a5702e..11fd155 100644
--- a/src/assets/theme/dark/image/footer/news-active.png
+++ b/src/assets/theme/dark/image/footer/news-active.png
Binary files differ
diff --git a/src/assets/theme/dark/image/footer/news.png b/src/assets/theme/dark/image/footer/news.png
index d0d2834..3ddb329 100644
--- a/src/assets/theme/dark/image/footer/news.png
+++ b/src/assets/theme/dark/image/footer/news.png
Binary files differ
diff --git a/src/assets/theme/dark/image/footer/optional-active.png b/src/assets/theme/dark/image/footer/optional-active.png
index 0322da8..8f426a5 100644
--- a/src/assets/theme/dark/image/footer/optional-active.png
+++ b/src/assets/theme/dark/image/footer/optional-active.png
Binary files differ
diff --git a/src/assets/theme/dark/image/footer/optional.png b/src/assets/theme/dark/image/footer/optional.png
index 2c6a3e8..2314293 100644
--- a/src/assets/theme/dark/image/footer/optional.png
+++ b/src/assets/theme/dark/image/footer/optional.png
Binary files differ
diff --git a/src/assets/theme/dark/image/footer/quotes-active.png b/src/assets/theme/dark/image/footer/quotes-active.png
index cda9988..b74613c 100644
--- a/src/assets/theme/dark/image/footer/quotes-active.png
+++ b/src/assets/theme/dark/image/footer/quotes-active.png
Binary files differ
diff --git a/src/assets/theme/dark/image/footer/quotes.png b/src/assets/theme/dark/image/footer/quotes.png
index 139da3f..143d5b1 100644
--- a/src/assets/theme/dark/image/footer/quotes.png
+++ b/src/assets/theme/dark/image/footer/quotes.png
Binary files differ
diff --git a/src/assets/theme/dark/image/footer/trade-active.png b/src/assets/theme/dark/image/footer/trade-active.png
index a58c8fd..0efc8f9 100644
--- a/src/assets/theme/dark/image/footer/trade-active.png
+++ b/src/assets/theme/dark/image/footer/trade-active.png
Binary files differ
diff --git a/src/assets/theme/dark/image/footer/trade.png b/src/assets/theme/dark/image/footer/trade.png
index 7175592..9f8cede 100644
--- a/src/assets/theme/dark/image/footer/trade.png
+++ b/src/assets/theme/dark/image/footer/trade.png
Binary files differ
diff --git a/src/components/Transform/cry-nav/index.vue b/src/components/Transform/cry-nav/index.vue
index a7c36a8..7bd6f37 100644
--- a/src/components/Transform/cry-nav/index.vue
+++ b/src/components/Transform/cry-nav/index.vue
@@ -32,57 +32,47 @@
data() {
return {
navList: [
- {
- name: this.$t('闪兑'),
- icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/exchange.png`, import.meta.url),
- path: '/cryptos/exchangePage',
- isLogin: true
- },
- {
- name: this.$t('账变记录'),
- icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/record.png`, import.meta.url),
- path: '/cryptos/accountChange?type=cryptos',
- isLogin: true
- },
+ // {
+ // name: this.$t('闪兑'),
+ // icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/exchange.png`, import.meta.url),
+ // path: '/cryptos/exchangePage',
+ // isLogin: true
+ // },
+ // {
+ // name: this.$t('账变记录'),
+ // icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/record.png`, import.meta.url),
+ // path: '/cryptos/accountChange?type=cryptos',
+ // isLogin: true
+ // },
// {
// name: this.$t('现货账户'),
// icon: `../../../assets/theme/dark/image/nav/account.png`,
// path: '/cryptos/funds'
// },
- {
- name: this.$t('SpotTrading'),
- icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/coin.png`, import.meta.url),
- path: '/cryptos/trade/btc'
- },
- {
- name: this.$t('永续合约'),
- icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/trading.png`, import.meta.url),
- path: '/cryptos/perpetualContract/btc?type=cryptos'
- },
- {
- name: this.$t('交割合约'),
- icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/delivery.png`, import.meta.url),
- path: '/cryptos/perpetualContract/btc?selectIndex=2&type=cryptos'
- },
+ // {
+ // name: this.$t('交割合约'),
+ // icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/delivery.png`, import.meta.url),
+ // path: '/cryptos/perpetualContract/btc?selectIndex=2&type=cryptos'
+ // },
],
navList1: [
- {
- name: this.$t('资金'),
- icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/asset.png`, import.meta.url),
- path: '/cryptos/funds?type=cryptos',
- isLogin: true
- },
- {
- name: this.$t('基金理财'),
- icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/financialmanagement.png`, import.meta.url),
- path: '/cryptos/fund'
- },
- {
- name: this.$t('智能矿池'),
- icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/SmartKuangchi.png`, import.meta.url),
- path: '/cryptos/machine'
- },
+ // {
+ // name: this.$t('资金'),
+ // icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/asset.png`, import.meta.url),
+ // path: '/cryptos/funds?type=cryptos',
+ // isLogin: true
+ // },
+ // {
+ // name: this.$t('基金理财'),
+ // icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/financialmanagement.png`, import.meta.url),
+ // path: '/cryptos/fund'
+ // },
+ // {
+ // name: this.$t('智能矿池'),
+ // icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/SmartKuangchi.png`, import.meta.url),
+ // path: '/cryptos/machine'
+ // },
// {
// name: this.$t('质押借币'),
// icon: new URL('@/assets/theme/dark/image/nav/PledgeLoan.png', import.meta.url),
@@ -93,14 +83,26 @@
// icon: new URL('@/assets/theme/dark/image/nav/Helpoan.png', import.meta.url),
// path: '/cryptos/loan'
// },
+ // {
+ // name: this.$t('C2C'),
+ // icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/c2c.png`, import.meta.url),
+ // path: '/cryptos/wantBuy'
+ // },
+ { name: this.$t('充值'), icon: new URL(`@/assets/image/exNav/存入.png`, import.meta.url), path: '/cryptos/recharge/rechargeList', isLogin: true },
+ { name: this.$t('提现'), icon: new URL(`@/assets/image/exNav/提现.png`, import.meta.url), path: '/cryptos/withdraw/withdrawPage', isLogin: true },
{
- name: this.$t('C2C'),
- icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/c2c.png`, import.meta.url),
- path: '/cryptos/wantBuy'
+ name: this.$t('SpotTrading'),
+ icon: new URL(`@/assets/image/exNav/SpotTrading.png`, import.meta.url),
+ path: '/cryptos/trade/btc'
+ },
+ {
+ name: this.$t('永续合约'),
+ icon: new URL(`@/assets/image/exNav/合约交易.png`, import.meta.url),
+ path: '/cryptos/perpetualContract/btc?type=cryptos'
},
{
name: this.$t('更多'),
- icon: new URL(`../../../assets/theme/${thStore.theme}/image/nav/more.png`, import.meta.url),
+ icon: new URL(`@/assets/image/exNav/more.png`, import.meta.url),
path: '/more'
}
]
@@ -140,9 +142,9 @@
display: flex;
flex-direction: column;
align-items: center;
- // margin-right: 50px;
width: 20%;
color: $text_color;
+
&:last-child {
margin-right: 0px;
@@ -159,12 +161,16 @@
}
.imgBox {
- width: 90px;
- height: 90px;
+ width: 120px;
+ height: 80px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #1099FB;
+ border-radius: 40px;
img {
- width: 100%;
- height: 100%;
+ height: 45%;
}
}
}
diff --git a/src/components/Transform/mining-exchange-input/index.vue b/src/components/Transform/mining-exchange-input/index.vue
index 7516d6e..6ba3c1d 100644
--- a/src/components/Transform/mining-exchange-input/index.vue
+++ b/src/components/Transform/mining-exchange-input/index.vue
@@ -10,7 +10,7 @@
<div style="box-sizing: border-box"
class="w-full rounded mt-5 px-3 flex items-center box-border py-3 inputBackground">
<div class="flex border-r-gray border-white items-center" @click="onShowActionSheet">
- <img :src="`${HOST_URL}/symbol/${type == 1 ? iconImg1 : iconImg2}.png`" alt="logo"
+ <img :src="`${IMG_PATH}/symbol/${type == 1 ? iconImg1 : iconImg2}.png`" alt="logo"
class="rounded-full mr-5 currency-icon" />
<span class="text-26 mr-5 w-16 textColor">{{ type == 1 ? coin.toUpperCase() : coin1.toUpperCase() }}</span>
<img src="./icon-arrow.png" alt="logo" class="icon-arrow" />
@@ -33,7 +33,7 @@
<div class="tab-item flex-1 textColor" :class="[activeIndex == 0 ? 'active' : '']" @click="checkActive(0)">
<div class="mt-5 text-30">{{ $t('从') }}</div>
<div class="flex items-center justify-center mt-5">
- <img :src="`${HOST_URL}/symbol/${iconImg1}.png`" alt="logo"
+ <img :src="`${IMG_PATH}/symbol/${iconImg1}.png`" alt="logo"
class="w-8 h-8 rounded-full mr-5 currency-icon" />
{{ coin.toUpperCase() }}
@@ -42,7 +42,7 @@
<div class="tab-item flex-1 textColor" :class="[activeIndex == 1 ? 'active' : '']" @click="checkActive(1)">
<div class="mt-5 text-30">{{ $t('至') }}</div>
<div class="flex items-center justify-center mt-5">
- <img :src="`${HOST_URL}/symbol/${iconImg2}.png`" alt="logo"
+ <img :src="`${IMG_PATH}/symbol/${iconImg2}.png`" alt="logo"
class="w-8 h-8 rounded-full mr-5 currency-icon" />
{{ coin1.toUpperCase() }}
</div>
@@ -62,7 +62,7 @@
<div class="flex-1 flex items-center">
<div>
- <img :src="`${HOST_URL}/symbol/${item.symbol.toLowerCase()}.png`" alt="logo"
+ <img :src="`${IMG_PATH}/symbol/${item.symbol.toLowerCase()}.png`" alt="logo"
class="w-8 h-9 rounded-full mr-5 currency-icon" />
</div>
<div>
@@ -82,7 +82,7 @@
<script>
import { ActionSheet, Popup, Field } from "vant";
-import { HOST_URL } from '@/config'
+import { IMG_PATH } from '@/config'
// import { mapGetters } from "vuex";
export default {
name: "MiningExchangeInput",
@@ -176,7 +176,7 @@
},
data() {
return {
- HOST_URL,
+ IMG_PATH,
show: false,
searchValue: '',
activeIndex: 0,
diff --git a/src/components/fx-footer/index.vue b/src/components/fx-footer/index.vue
index 0754278..40f1887 100644
--- a/src/components/fx-footer/index.vue
+++ b/src/components/fx-footer/index.vue
@@ -1,14 +1,14 @@
<template>
<div class="relative z-30 footer">
- <van-tabbar route v-model="active" active-color="#1194F7" @change="changeIndex" fixed safe-area-inset-bottom>
- <van-tabbar-item name="optional" to="/optional">
+ <van-tabbar route v-model="active" active-color="#92D1FF" @change="changeIndex" fixed safe-area-inset-bottom>
+ <!-- <van-tabbar-item name="optional" to="/optional">
<span :class="[active === 'optional' ? 'active' : '']">{{ $t("Optional") }}</span>
<template #icon="props">
<img :src="active == 'optional' ? icon.optional.active : icon.optional.inactive" alt="optional" />
</template>
- </van-tabbar-item>
- <van-tabbar-item name="quotes" to="/quotes/index?tabActive=0">
- <span :class="[active === 'quotes' ? 'active' : '']">{{ $t("quotes") }}</span>
+ </van-tabbar-item> -->
+ <van-tabbar-item name="quotes" to="/quotes/index?tabActive=1">
+ <span :class="[active === 'quotes' ? 'active' : '']">{{ $t("首页") }}</span>
<template #icon>
<img :src="active == 'quotes' ? icon.quotes.active : icon.quotes.inactive" alt="quotes" />
</template>
@@ -25,12 +25,12 @@
<!-- <img :src="props.active ? icon.funds.active : icon.funds.inactive" alt="funds" /> -->
<!-- </template> -->
<!-- </van-tabbar-item> -->
- <van-tabbar-item name="news" to="/news">
+ <!-- <van-tabbar-item name="news" to="/news">
<span :class="[active === 'news' ? 'active' : '']">{{ $t("news") }}</span>
<template #icon>
<img :src="active == 'news' ? icon.news.active : icon.news.inactive" alt="news" />
</template>
- </van-tabbar-item>
+ </van-tabbar-item> -->
<!-- <van-tabbar-item name="trade" to="/exchange">
<span>{{ $t('trade') }}</span>
<template #icon="props">
@@ -175,7 +175,9 @@
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background-color: $footer_bg;
- box-shadow: 5px 5px 5px 5px $footer-border;
+ box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
+ border-top: 1px solid rgba(118, 128, 143, 0.1);
+ backdrop-filter: blur(10px);
}
.van-hairline--top-bottom::after {
diff --git a/src/components/fx-kline/index.vue b/src/components/fx-kline/index.vue
index 9b9a04e..9e1c0dc 100644
--- a/src/components/fx-kline/index.vue
+++ b/src/components/fx-kline/index.vue
@@ -1,5 +1,5 @@
<template>
- <van-loading color="#1194F7" class="loading-box" v-if="isLoading" />
+ <van-loading color="#92D1FF" class="loading-box" v-if="isLoading" />
<div id="kline" class="boxDisplay" :style="{ height: `${props.height || defaultH}px`, position: 'relative' }"
v-if="defaultH">
</div>
diff --git a/src/config/index.js b/src/config/index.js
index 862fa88..ab753d0 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -43,12 +43,12 @@
// const ENV_DEV = '127.0.0.1' // dev
// const ENV_DEV = '127.0.0.1:8086' // dev
-const ENV_DEV = 'zhapi.datacme.com' // dev
+const ENV_DEV = 'api.crypt.mom' // dev
// const ENV_PRO = window.location.hostname // 接口域名跟随 H5
// const ENV_PRO = "127.0.0.1"
// const ENV_PRO = "127.0.0.1:8086"
-const ENV_PRO = "zhapi.datacme.com"
+const ENV_PRO = "api.crypt.mom"
// 避免打包出错务必把 app域名的注释要放在在本地ENV_PRO的下面
// const ENV_PRO = 'foilwm.com' // app域名
@@ -56,8 +56,8 @@
let ws_url = ''
let host_url = ''
if (import.meta.env.MODE === 'development') {
- host_url = 'http://' + ENV_DEV
- base_url = 'http://' + ENV_DEV
+ host_url = 'https://' + ENV_DEV
+ base_url = 'https://' + ENV_DEV
ws_url = 'wss://' + ENV_DEV + '/api/websocket'
} else {
host_url = 'https://' + ENV_PRO
@@ -66,7 +66,7 @@
}
export const BASE_URL = base_url
export const WS_URL = ws_url
-export const IMG_PATH = host_url
+export const IMG_PATH = 'https://img.crypt.mom'
export const HOST_URL = host_url
export default {
diff --git a/src/store/theme.js b/src/store/theme.js
index 1a688d6..1ba52c3 100644
--- a/src/store/theme.js
+++ b/src/store/theme.js
@@ -5,7 +5,7 @@
// state 持久化
persist: true,
state: () => ('theme', {
- theme: getStorage('theme') || 'drak'
+ theme: getStorage('theme') || 'dark' // 默认使用黑夜模式
}),
getters: {
},
diff --git a/src/views/cryptos/Exchange/exchangePage.vue b/src/views/cryptos/Exchange/exchangePage.vue
index e772f7b..2f38262 100644
--- a/src/views/cryptos/Exchange/exchangePage.vue
+++ b/src/views/cryptos/Exchange/exchangePage.vue
@@ -15,7 +15,6 @@
</van-nav-bar>
<div class="exchange-page">
-
<list-account show class="mt-24" type="exchange" @exchange="onPopup" ref="exchange" />
<van-popup class="tabBackground" v-model:show="show" position="bottom" :close-on-click-overlay="false"
@close="onClose">
@@ -27,7 +26,7 @@
<div class="px-8 flex items-center mt-8">
<div class="flex-1 textColor text-center">
<div class="text-center flex justify-center">
- <img v-if="detail.symbol" :src="`${HOST_URL}/symbol/${detail.iconImg1}.png`" alt="logo"
+ <img v-if="detail.symbol" :src="`${IMG_PATH}/symbol/${detail.iconImg1}.png`" alt="logo"
class="w-16 h-16 rounded-full" />
</div>
<div class="text-grey text-28 mt-5">{{ $t('从') }}</div>
@@ -37,7 +36,7 @@
<div class="flex-1 textColor text-center">
<div class="text-center flex justify-center">
- <img v-if="detail.symbol_to" :src="`${HOST_URL}/symbol/${detail.iconImg2}.png`" alt="logo"
+ <img v-if="detail.symbol_to" :src="`${IMG_PATH}/symbol/${detail.iconImg2}.png`" alt="logo"
class="w-16 h-16 rounded-full" />
</div>
<div class="text-grey text-28 mt-5">{{ $t('至') }}</div>
@@ -85,7 +84,7 @@
import ListAccount from '@/components/Transform/mining-account/index.vue'
import { _initExchange, _exchange } from "@/service/fund.api";
import { Popup, showToast } from "vant"
-import { HOST_URL } from '@/config'
+import { IMG_PATH } from '@/config'
export default {
components: {
assetsHead,
@@ -99,7 +98,7 @@
detail: {},
interval: null,
count: 10,
- HOST_URL,
+ IMG_PATH,
}
},
created() {
diff --git a/src/views/cryptos/index.vue b/src/views/cryptos/index.vue
index dc2e0a0..51415e4 100644
--- a/src/views/cryptos/index.vue
+++ b/src/views/cryptos/index.vue
@@ -34,7 +34,7 @@
</van-notice-bar>
</div>
<cry-nav />
- <div class="quickly">
+ <!-- <div class="quickly">
<div class="quickBox chongbi" :class="THEME == 'dark' ? 'dark' : 'white'"
@click="$router.push('/cryptos/recharge/rechargeList')">
<div class="left">
@@ -63,7 +63,7 @@
<img v-else src="@/assets/theme/white/image/goto.png" alt="">
</div>
</div>
- </div>
+ </div> -->
<ex-hot :listData="hList"></ex-hot>
<list-quatation :listData="qList" />
<van-popup v-model:show="item.showPopUp" style="border-radius:10px;" :close-on-click-overlay="false"
@@ -73,7 +73,7 @@
<div class="flex justify-center mt-30" v-if="item.imgUrl"><img :src="`${item.imgUrl}`" class="w-200 h-200"
alt="" /></div>
<div class="py-10 textColor content-title" v-html="item.content"></div>
- <van-button color="#1194F7" class="w-full h-40 rounded-full" type="info" @click="closePopNotice(item)">
+ <van-button color="#92D1FF" class="w-full h-40 rounded-full" type="info" @click="closePopNotice(item)">
{{ $t('我知道了') }}
</van-button>
</div>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index dcf33bf..c267f41 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -268,42 +268,58 @@
])
</script>
-<style scoped>
+<style lang="scss" scoped>
.home {
min-height: 100vh;
- background: #f7f7f7;
+ background: $main_background;
padding-bottom: 56px;
}
.header {
display: flex;
align-items: center;
- padding: 12px 16px;
- background: #fff;
+ padding: 16px 20px;
+ background: $main_background;
position: sticky;
top: 0;
z-index: 100;
+ border-bottom: 1px solid rgba(118, 128, 143, 0.1);
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.avatar {
- width: 32px;
- height: 32px;
- border-radius: 16px;
- background: #f5f5f5;
+ width: 40px;
+ height: 40px;
+ border-radius: 20px;
+ background: rgba(146, 209, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
+ cursor: pointer;
+ transition: all 0.2s ease;
+
+ &:hover {
+ background: rgba(146, 209, 255, 0.12);
+ transform: scale(1.05);
+ }
}
.search-box {
flex: 1;
display: flex;
align-items: center;
- background: #f5f5f5;
- border-radius: 16px;
+ background: $input_background;
+ border-radius: 12px;
margin: 0 12px;
- padding: 6px 12px;
- height: 32px;
+ padding: 10px 16px;
+ height: 40px;
+ border: 1px solid rgba(118, 128, 143, 0.1);
+ transition: all 0.2s ease;
+
+ &:focus-within {
+ border-color: rgba(146, 209, 255, 0.3);
+ box-shadow: 0 0 0 3px rgba(146, 209, 255, 0.1);
+ }
}
.search-box input {
@@ -312,122 +328,199 @@
margin-left: 8px;
width: 100%;
font-size: 14px;
- color: #333;
-}
-
-.search-box input::placeholder {
- color: #999;
+ color: $text_color;
+
+ &::placeholder {
+ color: $text_color1;
+ }
}
.header-right {
display: flex;
- gap: 16px;
- color: #666;
+ gap: 12px;
+ color: $text_color1;
+
+ svg {
+ cursor: pointer;
+ transition: all 0.2s ease;
+
+ &:hover {
+ color: $color_main;
+ transform: scale(1.1);
+ }
+ }
}
.gift-banner {
- margin: 12px;
- background: #fff;
- border-radius: 12px;
- padding: 16px;
+ margin: 16px 20px;
+ background: linear-gradient(135deg, rgba(146, 209, 255, 0.1) 0%, rgba(123, 184, 255, 0.05) 100%);
+ border-radius: 16px;
+ padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+ box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+ border: 1px solid rgba(146, 209, 255, 0.15);
+ transition: all 0.3s ease;
+
+ &:hover {
+ box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
+ transform: translateY(-2px);
+ }
}
.gift-left {
display: flex;
align-items: center;
- gap: 12px;
+ gap: 16px;
}
.gift-icon {
- color: #ff6b00;
+ width: 48px;
+ height: 48px;
+ border-radius: 12px;
+ background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
}
.gift-amount {
- font-size: 16px;
- font-weight: 600;
- color: #333;
+ font-size: 18px;
+ font-weight: 700;
+ color: $text_color;
+ letter-spacing: -0.3px;
}
.gift-desc {
- font-size: 12px;
- color: #999;
- margin-top: 4px;
+ font-size: 13px;
+ color: $text_color1;
+ margin-top: 6px;
}
.register-btn {
- background: #000;
+ background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
color: #fff;
border: none;
- padding: 8px 20px;
- border-radius: 4px;
+ padding: 10px 24px;
+ border-radius: 12px;
font-size: 14px;
- font-weight: 500;
+ font-weight: 600;
+ box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
+ box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
+ transform: translateY(-1px);
+ }
+
+ &:active {
+ transform: translateY(0);
+ }
}
.nav-section {
- background: #fff;
- padding: 20px 16px 12px;
+ background: $main_background;
+ padding: 24px 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
- gap: 16px 0;
+ gap: 20px 0;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
- gap: 6px;
+ gap: 8px;
+ cursor: pointer;
+ padding: 12px;
+ border-radius: 12px;
+ transition: all 0.2s ease;
+
+ &:hover {
+ background: rgba(146, 209, 255, 0.05);
+ transform: translateY(-2px);
+ }
+
+ svg {
+ transition: all 0.2s ease;
+ }
+
+ &:hover svg {
+ color: $color_main;
+ transform: scale(1.1);
+ }
}
.nav-name {
- font-size: 12px;
- color: #333;
+ font-size: 13px;
+ color: $text_color;
+ font-weight: 500;
}
.banner-section {
- margin: 12px;
+ margin: 0 20px 16px;
}
.banner-item {
- background: #fff;
- border-radius: 12px;
- padding: 20px;
+ background: $main_background;
+ border-radius: 16px;
+ padding: 24px;
display: flex;
justify-content: space-between;
align-items: center;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+ box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+ border: 1px solid rgba(118, 128, 143, 0.1);
+ transition: all 0.3s ease;
+
+ &:hover {
+ box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
+ transform: translateY(-2px);
+ }
}
.banner-tag {
display: inline-flex;
align-items: center;
- gap: 4px;
- background: #fff0e5;
+ gap: 6px;
+ background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(255, 107, 0, 0.08) 100%);
color: #ff6b00;
- padding: 4px 8px;
- border-radius: 4px;
+ padding: 6px 12px;
+ border-radius: 8px;
font-size: 12px;
+ font-weight: 600;
+ border: 1px solid rgba(255, 107, 0, 0.2);
}
.banner-title {
- margin: 12px 0;
- font-size: 16px;
- font-weight: 600;
- color: #333;
+ margin: 16px 0;
+ font-size: 18px;
+ font-weight: 700;
+ color: $text_color;
+ letter-spacing: -0.3px;
}
.join-btn {
border: none;
background: transparent;
- color: #666;
- padding: 4px 0;
+ color: $color_main;
+ padding: 6px 0;
display: flex;
align-items: center;
+ gap: 4px;
font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.2s ease;
+
+ &:hover {
+ color: #7BB8FF;
+ gap: 8px;
+ }
}
.banner-right img {
@@ -437,16 +530,22 @@
}
.market-section {
- background: #fff;
- margin-top: 12px;
+ background: $main_background;
+ margin-top: 0;
+ border-radius: 16px;
+ margin: 0 20px 16px;
+ box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+ border: 1px solid rgba(118, 128, 143, 0.1);
+ overflow: hidden;
}
.market-tabs {
display: flex;
- padding: 0 16px;
- border-bottom: 1px solid #f0f0f0;
+ padding: 0 20px;
+ border-bottom: 1px solid rgba(118, 128, 143, 0.1);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
+ background: $main_background;
}
.market-tabs::-webkit-scrollbar {
@@ -454,16 +553,19 @@
}
.tab-item {
- padding: 12px 16px;
+ padding: 16px 20px;
font-size: 14px;
- color: #666;
+ color: $text_color1;
position: relative;
white-space: nowrap;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ font-weight: 500;
}
.tab-item.active {
- color: #333;
- font-weight: 600;
+ color: $color_main;
+ font-weight: 700;
}
.tab-item.active::after {
@@ -472,50 +574,63 @@
bottom: 0;
left: 50%;
transform: translateX(-50%);
- width: 20px;
- height: 2px;
- background: #000;
- border-radius: 1px;
+ width: 24px;
+ height: 3px;
+ background: $color_main;
+ border-radius: 2px;
}
.market-item {
display: flex;
justify-content: space-between;
- padding: 16px;
- border-bottom: 1px solid #f0f0f0;
+ padding: 20px;
+ border-bottom: 1px solid rgba(118, 128, 143, 0.1);
+ transition: all 0.2s ease;
+ cursor: pointer;
+
+ &:hover {
+ background: rgba(146, 209, 255, 0.03);
+ }
+
+ &:last-child {
+ border-bottom: none;
+ }
}
.stock-name {
font-size: 16px;
- color: #333;
- font-weight: 500;
+ color: $text_color;
+ font-weight: 600;
+ letter-spacing: -0.2px;
}
.stock-code {
font-size: 12px;
- color: #999;
- margin-top: 4px;
+ color: $text_color1;
+ margin-top: 6px;
}
.current-price {
font-size: 16px;
text-align: right;
- color: #333;
- font-weight: 500;
+ color: $text_color;
+ font-weight: 600;
+ letter-spacing: -0.2px;
}
.price-change {
- font-size: 12px;
+ font-size: 13px;
text-align: right;
- margin-top: 4px;
+ margin-top: 6px;
+ font-weight: 600;
}
.up {
- color: #00c087;
+ color: $green;
}
.down {
- color: #ff6b6b;
+ color: $red;
}
.bottom-nav {
@@ -544,32 +659,44 @@
}
.section-block {
- background: #fff;
- margin-top: 12px;
- padding: 16px;
+ background: $main_background;
+ margin: 0 20px 16px;
+ padding: 20px;
+ border-radius: 16px;
+ box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+ border: 1px solid rgba(118, 128, 143, 0.1);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 16px;
+ margin-bottom: 20px;
}
.section-header h3 {
- font-size: 16px;
- font-weight: 600;
- color: #333;
+ font-size: 18px;
+ font-weight: 700;
+ color: $text_color;
+ letter-spacing: -0.3px;
}
.more-btn {
border: none;
background: transparent;
- color: #999;
+ color: $text_color1;
font-size: 14px;
display: flex;
align-items: center;
gap: 4px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ font-weight: 500;
+
+ &:hover {
+ color: $color_main;
+ gap: 6px;
+ }
}
/* 跟单样式 */
@@ -583,9 +710,18 @@
display: flex;
justify-content: space-between;
align-items: center;
- padding: 12px;
- background: #f8f9fa;
- border-radius: 8px;
+ padding: 16px;
+ background: $main2_background;
+ border-radius: 12px;
+ border: 1px solid rgba(118, 128, 143, 0.1);
+ transition: all 0.3s ease;
+ cursor: pointer;
+
+ &:hover {
+ box-shadow: 0 4px 12px rgba(146, 209, 255, 0.08);
+ transform: translateY(-2px);
+ border-color: rgba(146, 209, 255, 0.2);
+ }
}
.trader-info {
@@ -595,33 +731,53 @@
}
.trader-avatar {
- width: 40px;
- height: 40px;
- border-radius: 20px;
+ width: 48px;
+ height: 48px;
+ border-radius: 24px;
object-fit: cover;
+ border: 2px solid rgba(146, 209, 255, 0.1);
}
.trader-name {
- font-size: 15px;
- font-weight: 500;
- color: #333;
+ font-size: 16px;
+ font-weight: 600;
+ color: $text_color;
+ letter-spacing: -0.2px;
}
.trader-stats {
display: flex;
- gap: 12px;
- font-size: 12px;
- color: #666;
- margin-top: 4px;
+ gap: 16px;
+ font-size: 13px;
+ color: $text_color1;
+ margin-top: 6px;
+
+ b {
+ font-weight: 700;
+ }
}
.follow-btn {
- background: #f0f0f0;
+ background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
border: none;
- padding: 6px 16px;
- border-radius: 4px;
- color: #333;
+ padding: 8px 20px;
+ border-radius: 10px;
+ color: #fff;
font-size: 14px;
+ font-weight: 600;
+ box-shadow: 0 2px 8px rgba(146, 209, 255, 0.3);
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
+ box-shadow: 0 4px 12px rgba(146, 209, 255, 0.4);
+ transform: translateY(-1px);
+ }
+
+ &:active {
+ transform: translateY(0);
+ }
}
/* 理财样式 */
@@ -632,48 +788,77 @@
}
.finance-card {
- padding: 16px;
- background: #f8f9fa;
- border-radius: 8px;
+ padding: 20px;
+ background: $main2_background;
+ border-radius: 12px;
display: flex;
justify-content: space-between;
align-items: center;
+ border: 1px solid rgba(118, 128, 143, 0.1);
+ transition: all 0.3s ease;
+ cursor: pointer;
+
+ &:hover {
+ box-shadow: 0 4px 12px rgba(146, 209, 255, 0.08);
+ transform: translateY(-2px);
+ border-color: rgba(146, 209, 255, 0.2);
+ }
}
.finance-name {
- font-size: 15px;
- font-weight: 500;
- color: #333;
+ font-size: 16px;
+ font-weight: 600;
+ color: $text_color;
+ letter-spacing: -0.2px;
}
.finance-rate {
- margin: 8px 0;
+ margin: 12px 0;
}
.rate-num {
- font-size: 20px;
- font-weight: 600;
- color: #ff6b00;
+ font-size: 24px;
+ font-weight: 700;
+ background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ letter-spacing: -0.5px;
}
.rate-label {
- font-size: 12px;
- color: #999;
- margin-left: 4px;
+ font-size: 13px;
+ color: $text_color1;
+ margin-left: 6px;
}
.finance-desc {
- font-size: 12px;
- color: #666;
+ font-size: 13px;
+ color: $text_color1;
+ margin-top: 4px;
}
.invest-btn {
- background: #000;
+ background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
color: #fff;
border: none;
- padding: 8px 20px;
- border-radius: 4px;
+ padding: 10px 24px;
+ border-radius: 12px;
font-size: 14px;
+ font-weight: 600;
+ box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
+ box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
+ transform: translateY(-1px);
+ }
+
+ &:active {
+ transform: translateY(0);
+ }
}
/* 资讯样式 */
@@ -685,14 +870,19 @@
.news-item {
display: flex;
- gap: 12px;
- padding-bottom: 16px;
- border-bottom: 1px solid #f0f0f0;
-}
-
-.news-item:last-child {
- border-bottom: none;
- padding-bottom: 0;
+ gap: 16px;
+ padding: 16px;
+ border-radius: 12px;
+ background: $main2_background;
+ border: 1px solid rgba(118, 128, 143, 0.1);
+ transition: all 0.3s ease;
+ cursor: pointer;
+
+ &:hover {
+ box-shadow: 0 4px 12px rgba(146, 209, 255, 0.08);
+ transform: translateY(-2px);
+ border-color: rgba(146, 209, 255, 0.2);
+ }
}
.news-content {
@@ -700,27 +890,30 @@
}
.news-title {
- font-size: 15px;
- color: #333;
- line-height: 1.4;
+ font-size: 16px;
+ color: $text_color;
+ line-height: 1.5;
+ font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
+ letter-spacing: -0.2px;
}
.news-meta {
- margin-top: 8px;
+ margin-top: 10px;
font-size: 12px;
- color: #999;
+ color: $text_color1;
display: flex;
- gap: 12px;
+ gap: 16px;
}
.news-image {
width: 100px;
height: 70px;
- border-radius: 4px;
+ border-radius: 10px;
object-fit: cover;
+ border: 1px solid rgba(118, 128, 143, 0.1);
}
</style>
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index dc881b8..37e6a1a 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="login">
- <van-loading color="#1194F7" class="loading-box" v-if="isLoading"/>
+ <van-loading color="#92D1FF" class="loading-box" v-if="isLoading"/>
<div class="top" @click="onRoute('/my/index')"><img src="../../assets/image/icon-close.png" alt="" /></div>
<div class="title textColor">{{ $t('login') }}</div>
<div class="flex login-tab">
diff --git a/src/views/morePage/index.vue b/src/views/morePage/index.vue
index 9cbcd65..843842d 100644
--- a/src/views/morePage/index.vue
+++ b/src/views/morePage/index.vue
@@ -23,7 +23,7 @@
</van-grid-item>
</van-grid>
</div>
- <div class="line-div"></div>
+ <!-- <div class="line-div"></div>
<div class="nav-list ">
<div class="title px-5">{{ t('股票') }}</div>
<van-grid class="van-grid-main" :column-num="4" :border="false">
@@ -34,7 +34,7 @@
</template>
</van-grid-item>
</van-grid>
- </div>
+ </div> -->
<div class="line-div"></div>
<div class="nav-list ">
<div class="title px-5">{{ t('ETF') }}</div>
@@ -100,6 +100,17 @@
{ name: t('助力贷'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/Helpoan.png`, import.meta.url), path: '/cryptos/loan', isLogin: true },
{ name: t('news'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/Information.png`, import.meta.url), path: '/news', isLogin: false },
{ name: t('理财'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/financialmanagement.png`, import.meta.url), path: '/cryptos/fm-home', isLogin: false },
+
+ { name: t('闪兑'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/exchange.png`, import.meta.url), path: '/cryptos/exchangePage', isLogin: true },
+ { name: t('账变记录'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/record.png`, import.meta.url), path: '/cryptos/accountChange?type=cryptos', isLogin: true },
+ { name: t('SpotTrading'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/coin.png`, import.meta.url), path: '/cryptos/trade/btc', isLogin: false },
+ { name: t('永续合约'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/trading.png`, import.meta.url), path: '/cryptos/perpetualContract/btc?type=cryptos', isLogin: false },
+ { name: t('交割合约'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/delivery.png`, import.meta.url), path: '/cryptos/perpetualContract/btc?selectIndex=2&type=cryptos', isLogin: false },
+
+ { name: t('资金'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/asset.png`, import.meta.url), path: '/cryptos/funds?type=cryptos', isLogin: true },
+ { name: t('基金理财'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/financialmanagement.png`, import.meta.url), path: '/cryptos/fund', isLogin: false },
+ { name: t('智能矿池'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/SmartKuangchi.png`, import.meta.url), path: '/cryptos/machine', isLogin: false },
+ { name: t('C2C'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/c2c.png`, import.meta.url), path: '/cryptos/wantBuy', isLogin: false },
],
stock: [
{ name: t('美股指数'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/trade.png`, import.meta.url), path: '/quotes/openTrade?tabActive=0&symbol=AAPL&type=US-stocks', isLogin: false },
diff --git a/src/views/my/index.vue b/src/views/my/index.vue
index 9eccb10..d643daf 100644
--- a/src/views/my/index.vue
+++ b/src/views/my/index.vue
@@ -20,10 +20,10 @@
<p class="w-full flex mt-4 gap-x-4" v-if="!(userStore.userInfo && userStore.userInfo.token)">
<van-button class="flex-1" @click="onRoute('/register')">{{
$t("register")
- }}</van-button>
+ }}</van-button>
<van-button class="flex-1" type="primary" @click="onRoute('/login')">{{
$t("login")
- }}</van-button>
+ }}</van-button>
</p>
<div class="mt-4 flex" v-else>
<img class="w-24 h-24" src="@/assets/image/avatar.png" alt="avatar" />
@@ -64,16 +64,16 @@
yellow: status == 1,
green: status == 2,
}">{{
- status == 0
- ? $t("notCertified")
- : status == 1
- ? $t("reviewing")
- : status == 2
- ? $t("verified")
- : status == 3
- ? $t("noPassView")
- : ""
-}}</span>
+ status == 0
+ ? $t("notCertified")
+ : status == 1
+ ? $t("reviewing")
+ : status == 2
+ ? $t("verified")
+ : status == 3
+ ? $t("noPassView")
+ : ""
+ }}</span>
</div>
<div v-if="_item.path === '/advancedCtf' && _item.show === true">
<span :class="{
@@ -81,16 +81,16 @@
yellow: kycHighStatus == 1,
green: kycHighStatus == 2,
}">{{
- kycHighStatus == 0
- ? $t("notCertified")
- : kycHighStatus == 1
- ? $t("reviewing")
- : kycHighStatus == 2
- ? $t("verified")
- : kycHighStatus == 3
- ? $t("noPassView")
- : ""
-}}</span>
+ kycHighStatus == 0
+ ? $t("notCertified")
+ : kycHighStatus == 1
+ ? $t("reviewing")
+ : kycHighStatus == 2
+ ? $t("verified")
+ : kycHighStatus == 3
+ ? $t("noPassView")
+ : ""
+ }}</span>
</div>
</van-cell>
</van-cell-group>
@@ -99,7 +99,7 @@
<p class="w-full flex mt-4 gap-x-4">
<van-button type="primary" class="flex-1" @click="loginOut">{{
$t("loginOut")
- }}</van-button>
+ }}</van-button>
</p>
</div>
<!-- <button style="height: 200px;" @click="changeTheme">哈哈</button> -->
@@ -129,33 +129,33 @@
const status = ref(null);
const kycHighStatus = ref(null);
const unreadMsg = ref('');
-const state = reactive({
- cellList: [
- {
- title: t("safe"),
- list: [
- { icon: "shield-o", title: t("safe"), path: "/safety" },
- { icon: "setting-o", title: t("changePassword"), path: "/changePassword" },
- { icon: addBankIcon, title: t("AddPaymentMethod"), path: "/payMentMethod/list" },
- ],
- },
- {
- title: t("universal"),
- list: [
- { icon: "font-o", title: t("language"), path: "/language" },
- { icon: "service-o", title: t("onLineService"), path: "/customerService" },
- {
- icon: "idcard",
- title: t("authVerify"),
- path: "/certificationCenter",
- show: true,
- },
- { icon: "todo-list-o", title: t("账变记录"), path: "/cryptos/accountChange" },
- { icon: "gold-coin-o", title: t("计价方式"), path: "/cryptos/exchangeRate" },
- ],
- },
- ],
-});
+// const state = reactive({
+// cellList: [
+// {
+// title: t("safe"),
+// list: [
+// { icon: "shield-o", title: t("safe"), path: "/safety" },
+// { icon: "setting-o", title: t("changePassword"), path: "/changePassword" },
+// { icon: addBankIcon, title: t("AddPaymentMethod"), path: "/payMentMethod/list" },
+// ],
+// },
+// {
+// title: t("universal"),
+// list: [
+// { icon: "font-o", title: t("language"), path: "/language" },
+// { icon: "service-o", title: t("onLineService"), path: "/customerService" },
+// {
+// icon: "idcard",
+// title: t("authVerify"),
+// path: "/certificationCenter",
+// show: true,
+// },
+// { icon: "todo-list-o", title: t("账变记录"), path: "/cryptos/accountChange" },
+// { icon: "gold-coin-o", title: t("计价方式"), path: "/cryptos/exchangeRate" },
+// ],
+// },
+// ],
+// });
const quickList = reactive([
{
name: "安全",
@@ -274,6 +274,14 @@
),
title: t("AddPaymentMethod"),
path: "/payMentMethod/list",
+ },
+ {
+ icon: new URL(
+ "../../assets/theme/dark/image/footer/optional.png",
+ import.meta.url
+ ),
+ title: t("Optional"),
+ path: "/optional",
},
],
},
@@ -419,8 +427,8 @@
}
.my-index {
- padding-bottom: calc(80px + constant(safe-area-inset-bottom)) !important;
- padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
+ padding-bottom: calc(80px + constant(safe-area-inset-bottom)) !important;
+ padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}
h1.title {
diff --git a/src/views/optional/EditGroupList.vue b/src/views/optional/EditGroupList.vue
index 44403ad..3c58785 100644
--- a/src/views/optional/EditGroupList.vue
+++ b/src/views/optional/EditGroupList.vue
@@ -81,10 +81,10 @@
label: t('ETF'),
id: 1,
},
- {
- label: t('UsStocks'),
- id: 2,
- },
+ // {
+ // label: t('UsStocks'),
+ // id: 2,
+ // },
{
label: t('digitalCurrency'),
id: 3,
@@ -93,14 +93,14 @@
label: t('外汇'),
id: 4,
},
- {
- label: t('港股'),
- id: 5,
- },
- {
- label: t('台股'),
- id: 6,
- },
+ // {
+ // label: t('港股'),
+ // id: 5,
+ // },
+ // {
+ // label: t('台股'),
+ // id: 6,
+ // },
]);
onMounted(() => {
diff --git a/src/views/optional/Search.vue b/src/views/optional/Search.vue
index b4e8390..a13c8e4 100644
--- a/src/views/optional/Search.vue
+++ b/src/views/optional/Search.vue
@@ -2,7 +2,7 @@
<div class="pb-fix">
<div class="container-box">
<div class="search-container flex items-center">
- <van-search class="search-input" v-model="searchVal" @update:model-value="onClickButton" :placeholder="$t('searchKeys')"
+ <van-search class="search-input" v-model="searchVal" @update:model-value="onClickButton" :placeholder="$t('请输入')"
@clear="onClearSearch" @cancel="cancelBack()" shape="round" show-action :action-text="$t('Cancel')">
</van-search>
</div>
diff --git a/src/views/optional/index.vue b/src/views/optional/index.vue
index 18885d5..56f7600 100644
--- a/src/views/optional/index.vue
+++ b/src/views/optional/index.vue
@@ -69,7 +69,7 @@
<div class="add-icon icon">
<img src="@/assets/image/optional/add.png" alt="">
</div>
- <span @click="onRoute('/optional/search?symbolType=indices')">{{ t('addStock') }}</span>
+ <span @click="onRoute('/optional/search?symbolType=indices')">{{ t('add') }}</span>
</div>
</section>
</div>
@@ -86,23 +86,23 @@
<p>{{ t('myPortfolio') }}</p>
<div class="sidebar">
<van-sidebar v-model="activeSideBarIndex">
- <van-sidebar-item @click="openType('all', 'ETF')" :title="t('全部股票')" />
+ <van-sidebar-item @click="openType('all', 'ETF')" :title="t('all')" />
<van-sidebar-item :title="`${item.listName}(${item.symbolCount})`" @click="openId(item)"
v-for="(item, index) in optionalList" :key="index" />
<van-sidebar-item @click="openType('indices', 'ETF')" :title="`ETF(${fixedData.indices || 0})`" />
- <van-sidebar-item @click="openType('US-stocks', t('UsStocks'))"
+ <!-- <van-sidebar-item @click="openType('US-stocks', t('UsStocks'))"
:title="`${t('UsStocks')}(${fixedData['US-stocks'] || 0})`" />
<van-sidebar-item @click="openType('HK-stocks', t('HkStocks'))"
:title="`${t('HkStocks')}(${fixedData['HK-stocks'] || 0})`" />
<van-sidebar-item @click="openType('TW-stocks', t('TwStocks'))"
:title="`${t('台股')}(${fixedData['TW-stocks'] || 0})`" />
<van-sidebar-item @click="openType('A-stocks', t('AStocks'))"
- :title="`${t('A股')}(${fixedData['A-stocks'] || 0})`" />
+ :title="`${t('A股')}(${fixedData['A-stocks'] || 0})`" /> -->
<van-sidebar-item @click="openType('cryptos', t('digitalCurrency'))"
:title="`${t('digitalCurrency')}(${fixedData.cryptos || 0})`" />
<van-sidebar-item @click="openType('forex', t('外汇'))" :title="`${t('外汇')}(${fixedData.forex || 0})`" />
- <van-sidebar-item @click="openType('INDIA-stocks', t('印度股'))"
- :title="`${t('印度股')}(${fixedData['INDIA-stocks'] || 0})`" />
+ <!-- <van-sidebar-item @click="openType('INDIA-stocks', t('印度股'))"
+ :title="`${t('印度股')}(${fixedData['INDIA-stocks'] || 0})`" /> -->
</van-sidebar>
</div>
<footer class="footer-container">
@@ -210,7 +210,7 @@
optionalList.value = []
if (!useStore.userInfo.token) { //没登陆
optionalType.value = 3
- optionalName.value = t('全部股票')
+ optionalName.value = t('all')
let obj = [
{ symbol: 'AAPL' },
{ symbol: 'MSFT' },
@@ -283,7 +283,7 @@
show.value = false
if (val === 'all') {
optionalType.value = 3
- optionalName.value = t('全部股票')
+ optionalName.value = t('all')
let obj = [
{ symbol: 'AAPL' },
{ symbol: 'MSFT' },
diff --git a/src/views/personal/index.vue b/src/views/personal/index.vue
index 02d73c4..8d60071 100644
--- a/src/views/personal/index.vue
+++ b/src/views/personal/index.vue
@@ -164,7 +164,7 @@
}).catch((e) => {});
}
</script>
-<style>
+<style lang="scss">
.my-index {
background-color: var(--main3_background);
padding-bottom: calc(80px + constant(safe-area-inset-bottom)) !important;
@@ -183,18 +183,26 @@
}
.my-index .assets .top .title {
- font-size: 18px;
- font-weight: 600
+ font-size: 20px;
+ font-weight: 700;
+ color: var(--text_color);
+ letter-spacing: -0.3px;
}
.my-index .currentAssets {
background-color: var(--inverse);
- border-radius: 4px;
- margin-top: 5px;
- box-shadow: rgba(0, 0, 0, .06) 0 8px 24px;
- padding: 10px;
+ border-radius: 16px;
+ margin-top: 16px;
+ box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+ border: 1px solid rgba(118, 128, 143, 0.1);
+ padding: 24px;
display: flex;
- flex-direction: column
+ flex-direction: column;
+ transition: all 0.3s ease;
+ }
+
+ .my-index .currentAssets:hover {
+ box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
}
.my-index .currentAssets .top {
@@ -211,9 +219,10 @@
.my-index .currentAssets .top .amount .amountTop {
display: flex;
align-items: center;
- gap: 5px;
+ gap: 8px;
font-size: 16px;
- font-weight: 600
+ font-weight: 600;
+ color: var(--text_color);
}
.my-index .currentAssets .top .amount .amountTop .nation {
@@ -227,9 +236,12 @@
}
.my-index .currentAssets .top .amount .money {
- font-size: 28px;
- font-weight: 600;
- line-height: 42px
+ font-size: 32px;
+ font-weight: 700;
+ line-height: 48px;
+ color: var(--text_color);
+ letter-spacing: -0.5px;
+ margin-top: 8px;
}
.my-index .currentAssets .bottom {
@@ -249,15 +261,18 @@
}
.my-index .currentAssets .bottom>div .value {
- font-size: 15px;
- line-height: 22px
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 600;
+ color: var(--text_color);
+ margin-top: 4px;
}
.my-index .currentAssets .btnGroup {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 15px;
- margin: 10px 0
+ gap: 12px;
+ margin: 20px 0 0
}
.my-index .currentAssets .btnGroup div {
@@ -265,26 +280,59 @@
align-items: center;
justify-content: center;
color: #fff;
- box-shadow: 0 min(.8vw, 3.4px) min(.266667vw, 1.133333px) max(-.533333vw, -2.266667px) rgba(0, 0, 0, .2), 0 min(.533333vw, 2.266667px) min(.533333vw, 2.266667px) 0 rgba(0, 0, 0, .14), 0 min(.266667vw, 1.133333px) min(1.333333vw, 5.666667px) 0 rgba(0, 0, 0, .12);
font-size: 16px;
font-weight: 600;
- border-radius: 4px;
- height: 44px
+ border-radius: 12px;
+ height: 48px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ border: none;
}
.my-index .currentAssets .btnGroup div.recharge {
- background-color: #00ae8c
+ background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+ box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
+ }
+
+ .my-index .currentAssets .btnGroup div.recharge:hover {
+ background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
+ box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
+ transform: translateY(-1px);
+ }
+
+ .my-index .currentAssets .btnGroup div.recharge:active {
+ transform: translateY(0);
}
.my-index .currentAssets .btnGroup div.withdraw {
- background-color: #f2495e
+ background: linear-gradient(135deg, #F2495E 0%, #FF6B7A 100%);
+ box-shadow: 0 4px 12px rgba(242, 73, 94, 0.3);
+ }
+
+ .my-index .currentAssets .btnGroup div.withdraw:hover {
+ background: linear-gradient(135deg, #FF6B7A 0%, #FF8A95 100%);
+ box-shadow: 0 6px 16px rgba(242, 73, 94, 0.4);
+ transform: translateY(-1px);
+ }
+
+ .my-index .currentAssets .btnGroup div.withdraw:active {
+ transform: translateY(0);
}
.my-index .otherAssets {
- padding: 10px;
- border-bottom: 1px solid var(--sec-border);
+ padding: 20px;
+ margin-top: 16px;
+ border-radius: 16px;
+ background: var(--inverse);
+ border: 1px solid rgba(118, 128, 143, 0.1);
+ box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
display: flex;
- flex-direction: column
+ flex-direction: column;
+ transition: all 0.3s ease;
+ }
+
+ .my-index .otherAssets:hover {
+ box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
}
.my-index .otherAssets .amountTop {
diff --git a/src/views/quotes/List.vue b/src/views/quotes/List.vue
index 7c203da..deaf664 100644
--- a/src/views/quotes/List.vue
+++ b/src/views/quotes/List.vue
@@ -13,7 +13,7 @@
</header>
<section class="quotes-tab-container">
<van-tabs v-model:active="tabActive" shrink @click-tab="onClickTab">
- <van-tab v-for="(item, index) in listTab" :key="item.tabIndex" :name="item.tabIndex" :title="item.title">
+ <van-tab v-for="item in listTab" :key="item.tabIndex" :name="item.tabIndex" :title="item.title">
<component @changeLetMego="handleChangeLetMego" :index="item.tabIndex" :tabActive="tabActive"
:is="components.get(item.type)" :key="item.tabIndex" ref="tabRefs" />
</van-tab>
@@ -60,7 +60,7 @@
const router = useRouter()
const route = useRoute()
-const tabActive = ref(0)
+const tabActive = ref(1)
const TITLE = import.meta.env.VITE_APP__TITLE
const showSave = ref(false)
const searchSrc = new URL(`../../assets/theme/${thStore.theme}/image/search.png`, import.meta.url)
@@ -124,18 +124,18 @@
)
const listTab = ref([
{
- title: 'ETF',
- type: 'Etf',
- urlMatch: 'etf',
- symbolType: 'indices',
- tabIndex: 8
- },
- {
title: t('加密货币'),
type: 'Cryptos',
urlMatch: 'crypto',
symbolType: 'cryptos',
tabIndex: 1
+ },
+ {
+ title: 'ETF',
+ type: 'Etf',
+ urlMatch: 'etf',
+ symbolType: 'indices',
+ tabIndex: 8
},
// {
// title: t('印度股'),
@@ -144,20 +144,20 @@
// symbolType: 'INDIA-stocks',
// tabIndex: 0
// },
- {
- title: t('UsStocks'),
- type: 'UsStock',
- urlMatch: 'stock',
- symbolType: 'US-stocks',
- tabIndex: 3
- },
- {
- title: t('港股'),
- type: 'HkStock',
- urlMatch: 'HK-stocks',
- symbolType: 'HK-stocks',
- tabIndex: 4
- },
+ // {
+ // title: t('UsStocks'),
+ // type: 'UsStock',
+ // urlMatch: 'stock',
+ // symbolType: 'US-stocks',
+ // tabIndex: 3
+ // },
+ // {
+ // title: t('港股'),
+ // type: 'HkStock',
+ // urlMatch: 'HK-stocks',
+ // symbolType: 'HK-stocks',
+ // tabIndex: 4
+ // },
// {
// title: t('台股'),
// type: 'TWStock',
@@ -378,13 +378,17 @@
.header {
display: flex;
- height: 34px;
- padding: 0 12px;
+ height: 56px;
+ padding: 0 20px;
justify-content: space-between;
+ align-items: center;
+ background: $main_background;
+ border-bottom: 1px solid rgba(118, 128, 143, 0.1);
.flex-l {
flex: 1;
display: inline-flex;
+ align-items: center;
.icon {
display: inline-block;
@@ -401,9 +405,10 @@
.title {
font-weight: 700;
- font-size: 20px;
- line-height: 28px;
+ font-size: 24px;
+ line-height: 32px;
color: $mainTextColor;
+ letter-spacing: -0.5px;
}
.icon-group {
@@ -411,11 +416,20 @@
.icon {
display: flex;
- width: 28px;
- height: 28px;
- margin-left: 16px;
+ width: 40px;
+ height: 40px;
+ margin-left: 12px;
justify-content: center;
align-items: center;
+ background: rgba(146, 209, 255, 0.08);
+ border-radius: 12px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+
+ &:hover {
+ background: rgba(146, 209, 255, 0.12);
+ transform: scale(1.05);
+ }
}
}
@@ -423,26 +437,55 @@
}
.quotes-tab-container {
- margin-top: 18px;
+ margin-top: 0;
+ background: $main_background;
+
+ :deep(.van-tabs__nav) {
+ padding: 0 20px;
+ background: $main_background;
+ }
+
+ :deep(.van-tab) {
+ font-size: 15px;
+ font-weight: 500;
+ padding: 16px 20px;
+ color: $text_color1;
+ transition: all 0.2s ease;
+ }
+
+ :deep(.van-tab.van-tab--active) {
+ font-weight: 700;
+ color: $text_color;
+ }
+
+ :deep(.van-tabs__line) {
+ background: $color_main;
+ height: 3px;
+ border-radius: 2px;
+ width: 24px !important;
+ bottom: 7px;
+ }
}
}
.addBox {
- border-radius: 10px;
- width: 300px;
- height: 100px;
- font-size: 12px;
- background: $fina-border;
+ border-radius: 16px;
+ width: 320px;
+ min-height: 100px;
+ font-size: 13px;
+ background: $main_background;
position: fixed;
bottom: 70px;
left: 50%;
- margin-left: -150px;
+ margin-left: -160px;
z-index: 1000;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
+ border: 1px solid rgba(118, 128, 143, 0.1);
.add {
- padding: 16px;
+ padding: 20px;
box-sizing: border-box;
height: 100%;
position: relative;
@@ -450,20 +493,29 @@
.closeAdd {
position: absolute;
- right: 10px;
- top: 10px;
- width: 10px;
- height: 10px;
+ right: 12px;
+ top: 12px;
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+ opacity: 0.6;
+ transition: opacity 0.2s ease;
+
+ &:hover {
+ opacity: 1;
+ }
}
.angle {
position: absolute;
- bottom: -37px;
+ bottom: -12px;
width: 0;
height: 0;
- left: 131px;
- border: 20px solid transparent;
- border-top: 24px solid $fina-border;
+ left: 50%;
+ transform: translateX(-50%);
+ border: 12px solid transparent;
+ border-top: 12px solid $main_background;
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
}
}
diff --git a/src/views/quotes/components/BuySellTradeTab.vue b/src/views/quotes/components/BuySellTradeTab.vue
index 289551b..b996a4c 100644
--- a/src/views/quotes/components/BuySellTradeTab.vue
+++ b/src/views/quotes/components/BuySellTradeTab.vue
@@ -1,5 +1,5 @@
<template>
- <van-loading color="#1194F7" class="loading-box" v-if="isLoading" />
+ <van-loading color="#92D1FF" class="loading-box" v-if="isLoading" />
<section class="inner-tab-container">
<div class="line-first-container flex">
<div class="line-first flex">
diff --git a/src/views/quotes/components/EntrustItem.vue b/src/views/quotes/components/EntrustItem.vue
index ff0ab7d..5417572 100644
--- a/src/views/quotes/components/EntrustItem.vue
+++ b/src/views/quotes/components/EntrustItem.vue
@@ -18,7 +18,7 @@
<div class="w-100">
<van-circle v-if="state == 'created'" v-model:current-rate="finishRate"
:rate="(1 - entrust.volume / entrust.volume_open * 100)" :speed="100" :text="finishText" layer-color='#EAEBEF'
- :color="entrust.offset == 'open' ? 'red' : '#1194F7'" :stroke-width="60" :size="'50px'">
+ :color="entrust.offset == 'open' ? 'red' : '#92D1FF'" :stroke-width="60" :size="'50px'">
<div class="textColor circle-box flex items-center justify-center">100%</div>
</van-circle>
<van-circle v-else v-model:current-rate="currentRate" :rate="(1 - entrust.volume / entrust.volume_open * 100)"
diff --git a/src/views/quotes/components/Position.vue b/src/views/quotes/components/Position.vue
index c61cb4e..e71fddf 100644
--- a/src/views/quotes/components/Position.vue
+++ b/src/views/quotes/components/Position.vue
@@ -1,6 +1,6 @@
<template>
<section class="inner-tab-container">
- <van-loading color="#1194F7" class="loading-box" v-if="isLoading" />
+ <van-loading color="#92D1FF" class="loading-box" v-if="isLoading" />
<section class="banner-container">
<div class="banner-item" v-if="type === 'indices'">
<div class="swipe-container">
diff --git a/src/views/quotes/components/Search.vue b/src/views/quotes/components/Search.vue
index 84c48fc..bf65df9 100644
--- a/src/views/quotes/components/Search.vue
+++ b/src/views/quotes/components/Search.vue
@@ -1,7 +1,7 @@
<template>
<div id="cryptos">
<div class="tradeRecord">
- <van-loading color="#1194F7" class="loading-box" v-if="isLoading" />
+ <van-loading color="#92D1FF" class="loading-box" v-if="isLoading" />
<div class="content">
<van-tabs v-model:active="active" class="w-full px-2 box-border" sticky @click="changeType">
<van-tab :title="$t('当前委托')" class="text-30">
diff --git a/src/views/quotes/components/Withdrawal.vue b/src/views/quotes/components/Withdrawal.vue
index 3b074b8..40bdf2e 100644
--- a/src/views/quotes/components/Withdrawal.vue
+++ b/src/views/quotes/components/Withdrawal.vue
@@ -1,6 +1,6 @@
<template>
<section class="inner-tab-container">
- <van-loading color="#1194F7" class="loading-box" v-if="isLoading" />
+ <van-loading color="#92D1FF" class="loading-box" v-if="isLoading" />
<section class="etf-container">
<div class="all-etf-ranking">
<div class="etf-table">
diff --git a/src/views/trade/index.vue b/src/views/trade/index.vue
index 3f901bd..079c43a 100644
--- a/src/views/trade/index.vue
+++ b/src/views/trade/index.vue
@@ -1,6 +1,6 @@
<template>
<section class="pb-fix">
- <van-loading color="#1194F7" class="loading-box" v-if="isLoading" />
+ <van-loading color="#92D1FF" class="loading-box" v-if="isLoading" />
<div class="trade-container-box">
<header class="header">
<div class="flex-l">
@@ -9,7 +9,7 @@
</header>
<section class="trade-tab-container">
<van-tabs v-model:active="tabActive" shrink @click-tab="onClickTab">
- <van-tab v-for="(item, index) in listTab" :key="item.tabIndex" :name="item.tabIndex" :title="item.title">
+ <van-tab v-for="item in listTab" :key="item.tabIndex" :name="item.tabIndex" :title="item.title">
<div class="content-container">
<div class="user-info px-4 mt-4">
<div class="mt-8 flex">
@@ -546,7 +546,7 @@
const { toClipboard } = useClipboard();
const router = useRouter();
const route = useRoute();
-const defaultTabActive = +route.query.tabActive || 0;
+const defaultTabActive = +route.query.tabActive || 1;
const tabActive = ref(defaultTabActive);
const navActive = ref(0);
const userStore = useUserStore();
@@ -593,18 +593,18 @@
const listTab = ref([
{
- title: 'ETF',
- type: 'Etf',
- urlMatch: 'etf',
- symbolType: 'indices',
- tabIndex: 0
- },
- {
title: t('加密货币'),
type: 'Cryptos',
urlMatch: 'crypto',
symbolType: 'cryptos',
tabIndex: 1
+ },
+ {
+ title: 'ETF',
+ type: 'Etf',
+ urlMatch: 'etf',
+ symbolType: 'indices',
+ tabIndex: 0
},
{
title: t('外汇'),
@@ -627,20 +627,20 @@
// symbolType: 'INDIA-stocks',
// tabIndex: 8
// },
- {
- title: t('UsStocks'),
- type: 'UsStock',
- urlMatch: 'stock',
- symbolType: 'US-stocks',
- tabIndex: 3
- },
- {
- title: t('港股'),
- type: 'HkStock',
- urlMatch: 'HK-stocks',
- symbolType: 'HK-stocks',
- tabIndex: 4
- },
+ // {
+ // title: t('UsStocks'),
+ // type: 'UsStock',
+ // urlMatch: 'stock',
+ // symbolType: 'US-stocks',
+ // tabIndex: 3
+ // },
+ // {
+ // title: t('港股'),
+ // type: 'HkStock',
+ // urlMatch: 'HK-stocks',
+ // symbolType: 'HK-stocks',
+ // tabIndex: 4
+ // },
// {
// title: t('台股'),
// type: 'TWStock',
@@ -1196,12 +1196,17 @@
.header {
display: flex;
- height: 28px;
- padding: 0 12px;
+ height: 56px;
+ padding: 0 20px;
+ align-items: center;
+ background: $main_background;
+ border-bottom: 1px solid rgba(118, 128, 143, 0.1);
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
.flex-l {
flex: 1;
display: inline-flex;
+ align-items: center;
.icon {
display: inline-block;
@@ -1218,9 +1223,10 @@
.title {
font-weight: 700;
- font-size: 20px;
- line-height: 28px;
+ font-size: 24px;
+ line-height: 32px;
color: $mainTextColor;
+ letter-spacing: -0.5px;
}
}
@@ -1235,39 +1241,67 @@
}
.content-container {
- padding: 0 12px;
+ padding: 0 20px;
+
+ .user-info {
+ background: $main_background;
+ border-radius: 16px;
+ padding: 20px;
+ margin-bottom: 16px;
+ box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+ border: 1px solid rgba(118, 128, 143, 0.1);
+ }
.name {
- font-size: 14px;
+ font-size: 16px;
+ font-weight: 600;
+ color: $text_color;
}
.ID {
- font-size: 12px;
+ font-size: 13px;
+ color: $text_color1;
+ }
+
+ .asset {
+ background: $main_background;
+ border-radius: 16px;
+ padding: 20px;
+ margin-bottom: 16px;
+ box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+ border: 1px solid rgba(118, 128, 143, 0.1);
}
.line {
- padding: 14px 12px;
+ padding: 16px 0;
display: flex;
align-items: center;
- font-size: 12px;
- line-height: 18px;
+ font-size: 13px;
+ line-height: 20px;
+ border-bottom: 1px solid rgba(118, 128, 143, 0.1);
+
+ &:last-child {
+ border-bottom: none;
+ }
.gray-text {
- color: #bcbdc2;
+ color: $text_color1;
font-size: 12px;
}
.value {
- margin-top: 10px;
+ margin-top: 8px;
font-weight: 700;
- font-size: 20px;
- line-height: 24x;
+ font-size: 24px;
+ line-height: 32px;
color: $text_color;
+ letter-spacing: -0.5px;
}
.profit {
- margin-top: 10px;
- font-size: 14px;
+ margin-top: 8px;
+ font-size: 16px;
+ font-weight: 600;
}
.flex-l {
@@ -1318,17 +1352,21 @@
}
.active {
- background: $btn_main;
+ background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
color: $white;
+ box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
+ font-weight: 600;
}
}
.quickly {
width: 100%;
- height: 72px;
+ height: 80px;
display: flex;
justify-content: space-between;
- margin-bottom: 32px;
+ gap: 12px;
+ margin-bottom: 24px;
+ // padding: 0 20px;
.quickBox {
flex: 1;
@@ -1336,9 +1374,19 @@
display: flex;
justify-content: space-between;
align-items: center;
- padding: 8px;
- border-radius: 6px;
- border: 1px solid $color_main;
+ padding: 16px;
+ border-radius: 16px;
+ background: $main_background;
+ border: 1px solid rgba(146, 209, 255, 0.2);
+ box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ &:hover {
+ box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
+ transform: translateY(-2px);
+ border-color: rgba(146, 209, 255, 0.3);
+ }
.left {
display: flex;
@@ -1346,12 +1394,17 @@
flex: 1;
.leftBox {
- width: 3rem;
- height: 3rem;
+ width: 48px;
+ height: 48px;
+ border-radius: 12px;
+ background: rgba(146, 209, 255, 0.1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
img {
- width: 100%;
- height: 100%;
+ width: 32px;
+ height: 32px;
}
}
}
@@ -1360,43 +1413,38 @@
margin-left: 12px;
p {
- font-size: 12px;
+ font-size: 14px;
color: $text_color;
- line-height: 14px;
+ line-height: 20px;
+ font-weight: 600;
}
}
.right {
- width: 16px;
- height: 16px;
+ width: 20px;
+ height: 20px;
+ opacity: 0.6;
+ transition: all 0.2s ease;
img {
width: 100%;
height: 100%;
}
}
+
+ &:hover .right {
+ opacity: 1;
+ transform: translateX(2px);
+ }
}
.chongbi {
- background: url("@/assets/theme/white/image/chongb.png");
- background-size: cover;
-
- &.dark {
- background: url("@/assets/theme/dark/image/chongb.png");
- background-size: cover;
- }
+ background: linear-gradient(135deg, rgba(146, 209, 255, 0.1) 0%, rgba(123, 184, 255, 0.05) 100%);
}
.tibi {
- // background: url("@/assets/theme/white/image/tib.png");
- // background-size: cover;
- border: 1px solid var(--color_main);
- border-radius: .625rem;
-
- &.dark {
- background: url("@/assets/theme/dark/image/tib.png");
- background-size: cover;
- }
+ background: linear-gradient(135deg, rgba(242, 73, 94, 0.1) 0%, rgba(242, 73, 94, 0.05) 100%);
+ border-color: rgba(242, 73, 94, 0.2);
}
}
@@ -1513,11 +1561,21 @@
}
li {
- padding: 14px 12px;
+ padding: 16px 20px;
display: flex;
- font-size: 12px;
- line-height: 18px;
- border-bottom: 1px solid $border_color;
+ font-size: 13px;
+ line-height: 20px;
+ border-bottom: 1px solid rgba(118, 128, 143, 0.1);
+ transition: all 0.2s ease;
+ cursor: pointer;
+
+ &:hover {
+ background: rgba(146, 209, 255, 0.03);
+ }
+
+ &:last-child {
+ border-bottom: none;
+ }
.gray-text {
color: #bcbdc2;
@@ -1567,13 +1625,24 @@
margin-top: 10px;
.symbol-list-item {
- margin: 0 0 10px;
+ margin: 0 20px 16px;
justify-content: space-between;
- padding: 10px;
- font-size: 12px;
- color: #989899;
- font-weight: 600;
- border-bottom: 1px solid $border_color;
+ padding: 20px;
+ font-size: 13px;
+ color: $text_color1;
+ font-weight: 500;
+ background: $main_background;
+ border-radius: 16px;
+ box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+ border: 1px solid rgba(118, 128, 143, 0.1);
+ transition: all 0.3s ease;
+ cursor: pointer;
+
+ &:hover {
+ box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
+ transform: translateY(-2px);
+ border-color: rgba(146, 209, 255, 0.2);
+ }
}
.symbol-list-top {
diff --git a/src/views/usStock/List.vue b/src/views/usStock/List.vue
index ae12380..776fc44 100644
--- a/src/views/usStock/List.vue
+++ b/src/views/usStock/List.vue
@@ -1,7 +1,7 @@
<template>
<section class="pb-fix">
<div class="us-stocks-container-box">
- <van-loading color="#1194F7" class="loading-box-us" v-if="isLoading" />
+ <van-loading color="#92D1FF" class="loading-box-us" v-if="isLoading" />
<section class="tab-container">
<section class="etf-container">
<!-- <div class="kline-chart-container">
diff --git a/src/views/usStock/components/EntrustItem.vue b/src/views/usStock/components/EntrustItem.vue
index ea34e29..31b228c 100644
--- a/src/views/usStock/components/EntrustItem.vue
+++ b/src/views/usStock/components/EntrustItem.vue
@@ -18,7 +18,7 @@
<div class="w-100">
<van-circle v-if="state == 'created'" v-model:current-rate="finishRate"
:rate="(1 - entrust.volume / entrust.volume_open * 100)" :speed="100" :text="finishText" layer-color='#EAEBEF'
- :color="entrust.offset == 'open' ? 'red' : '#1194F7'" :stroke-width="60" :size="'50px'">
+ :color="entrust.offset == 'open' ? 'red' : '#92D1FF'" :stroke-width="60" :size="'50px'">
<div class="textColor circle-box flex items-center justify-center">100%</div>
</van-circle>
<van-circle v-else v-model:current-rate="currentRate" :rate="(1 - entrust.volume / entrust.volume_open * 100)"
diff --git a/vite.config.js b/vite.config.js
index bf32cd9..446976a 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -61,8 +61,8 @@
// 关键：用正则表达式匹配所有含/api的路径（忽略大小写）
'^/api.*': { // 匹配以/api开头的任何路径（如/api、/api/xxx、/api?xx等）
// target: 'http://154.23.189.28:8086',
- target:'https://zhapi.datacme.com',
- // target:'https://zhapi.datacme.com',
+ target:'https://api.crypt.mom',
+ // target:'https://api.crypt.mom',
// target: 'https://by2.cccxxx.cc',
changeOrigin: true,
secure: false,
--
Gitblit v1.9.3