From 4f9044ae2a9f2db03bbb916bc5f6dfd12916361d Mon Sep 17 00:00:00 2001
From: 李 <344137771@qq.com>
Date: Wed, 03 Jun 2026 16:10:01 +0800
Subject: [PATCH] 1
---
src/views/trade/index.vue | 280 +++++++++++++++++++++++++------------------------------
1 files changed, 129 insertions(+), 151 deletions(-)
diff --git a/src/views/trade/index.vue b/src/views/trade/index.vue
index 3f901bd..8a5615c 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,11 +546,11 @@
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();
-const symbolType = ref("indices"); //默认etf
+const symbolType = ref("cryptos");
const etfList = ref([]);
const symbolList = ref([]);
const currency = ref({});
@@ -593,103 +593,12 @@
const listTab = ref([
{
- title: 'ETF',
- type: 'Etf',
- urlMatch: 'etf',
- symbolType: 'indices',
- tabIndex: 0
- },
- {
title: t('加密货币'),
type: 'Cryptos',
urlMatch: 'crypto',
symbolType: 'cryptos',
tabIndex: 1
},
- {
- title: t('外汇'),
- type: 'Foreign',
- urlMatch: 'for',
- symbolType: 'forex',
- tabIndex: 2
- },
- // {
- // title: t('马股'),
- // type: 'MyStock',
- // urlMatch: 'stock',
- // symbolType: 'MY-stocks',
- // tabIndex: 12
- // },
- // {
- // title: t('印度股'),
- // type: 'INDIAStock',
- // urlMatch: 'INDIA-stocks',
- // 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('台股'),
- // type: 'TWStock',
- // urlMatch: 'TW-stocks',
- // symbolType: 'TW-stocks',
- // tabIndex: 5
- // },
- // {
- // title: t('日股'),
- // type: 'JPStock',
- // urlMatch: 'JP-stocks',
- // symbolType: 'JP-stocks',
- // tabIndex: 6
- // },
- // {
- // title: t('A股'),
- // type: 'AStock',
- // urlMatch: 'A-stocks',
- // symbolType: 'A-stocks',
- // tabIndex: 7
- // },
- // {
- // title: t('印度股'),
- // type: 'INDIAStock',
- // urlMatch: 'INDIA-stocks',
- // symbolType: 'INDIA-stocks',
- // tabIndex: 8
- // },
- // {
- // title: t('英股'),
- // type: 'UKStock',
- // urlMatch: 'UK-stocks',
- // symbolType: 'UK-stocks',
- // tabIndex: 9
- // },
- // {
- // title: t('德股'),
- // type: 'DEStock',
- // urlMatch: 'DE-stocks',
- // symbolType: 'DE-stocks',
- // tabIndex: 10
- // },
- // {
- // title: t('巴股'),
- // type: 'BZStock',
- // urlMatch: 'BZ-stocks',
- // symbolType: 'BZ-stocks',
- // tabIndex: 11
- // },
])
const navTabList = computed(() => {
@@ -1196,12 +1105,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 +1132,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 +1150,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 +1261,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 +1283,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 +1303,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 +1322,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 +1470,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 +1534,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