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/trade/index.vue | 229 +++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 149 insertions(+), 80 deletions(-)
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 {
--
Gitblit v1.9.3