From dce10d37ad35efe8ed1d39d6e5fcf7e4904381df Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Fri, 12 Jun 2026 13:19:53 +0800
Subject: [PATCH] 1
---
src/views/quotes/List.vue | 219 +++++++++++++++++++++---------------------------------
1 files changed, 86 insertions(+), 133 deletions(-)
diff --git a/src/views/quotes/List.vue b/src/views/quotes/List.vue
index e7fc0bd..e5f2e48 100644
--- a/src/views/quotes/List.vue
+++ b/src/views/quotes/List.vue
@@ -13,8 +13,8 @@
</header>
<section class="quotes-tab-container">
<van-tabs v-model:active="tabActive" shrink @click-tab="onClickTab">
- <van-tab v-for="(item) in listTab" :key="item.tabIndex" :name="item.tabIndex" :title="item.title">
- <component v-if="item.tabIndex == tabActive" @changeLetMego="handleChangeLetMego" :index="item.tabIndex" :tabActive="tabActive"
+ <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>
</van-tabs>
@@ -54,11 +54,13 @@
const thStore = themeStore()
+
const { t } = useI18n()
+
const router = useRouter()
const route = useRoute()
-const tabActive = ref(8)
+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)
@@ -122,103 +124,12 @@
)
const listTab = ref([
{
- title: t('UsStocks'),
- type: 'UsStock',
- urlMatch: 'stock',
- symbolType: 'US-stocks',
- tabIndex: 3
- },
- {
title: t('加密货币'),
type: 'Cryptos',
urlMatch: 'crypto',
symbolType: 'cryptos',
tabIndex: 1
},
- {
- title: 'ETF',
- type: 'Etf',
- urlMatch: 'etf',
- symbolType: 'indices',
- tabIndex: 8
- },
- // {
- // title: t('印度股'),
- // type: 'INDIAStock',
- // urlMatch: 'INDIA-stocks',
- // symbolType: 'INDIA-stocks',
- // tabIndex: 0
- // },
- // {
- // 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: 'MYStock',
- // urlMatch: 'MY-stocks',
- // symbolType: 'MY-stocks',
- // tabIndex: 8
- // },
- {
- title: t('外汇'),
- type: 'Foreign',
- urlMatch: 'for',
- symbolType: 'forex',
- tabIndex: 2
- },
- // {
- // title: t('印度股'),
- // type: 'INDIAStock',
- // urlMatch: 'INDIA-stocks',
- // symbolType: 'INDIA-stocks',
- // tabIndex: 0
- // },
- // {
- // 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
- // },
])
@@ -234,7 +145,10 @@
let obj = listTab.value.find(item => {
return item.tabIndex == tabActive.value
})
- symbolType.value = obj?.symbolType
+ symbolType.value = obj?.symbolType || 'cryptos'
+ if (!obj) {
+ tabActive.value = 1
+ }
return
}
let urlPath = GetUrlRelativePath()
@@ -273,6 +187,7 @@
return relUrl;
}
+
const closeSaveBox = () => {
setStorage(`${TITLE}addtoClosed`, 1)
showSave.value = false
@@ -305,23 +220,9 @@
}, TIME_OUT)
const onClickTab = ({ name, title }) => {
- // console.log('name', name)
+ console.log('name', name)
if (tabActive.value !== name) {
letMeGo.value = () => { }
- }
- // 如果切换到 name 是 3，停止 timer 轮询
- if (name === 3) {
- if (timer) {
- clearInterval(timer)
- timer = null
- }
- } else {
- // 如果不是 3 并且 timer 没有轮询，则继续轮询
- if (!timer) {
- timer = setInterval(() => {
- letMeGo.value()
- }, TIME_OUT)
- }
}
tabActive.value = name
router.push('/quotes/index?tabActive=' + tabActive.value)
@@ -389,13 +290,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;
@@ -412,9 +317,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 {
@@ -422,11 +328,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);
+ }
}
}
@@ -434,26 +349,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;
@@ -461,20 +405,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));
}
}
}
--
Gitblit v1.9.3