From c547081aa61be5c7b6d4c12853c675954c2156eb Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 10 Feb 2026 14:45:18 +0800
Subject: [PATCH] 1
---
src/views/quotes/List.vue | 137 +++++++++++++++++++++++++++++----------------
1 files changed, 89 insertions(+), 48 deletions(-)
diff --git a/src/views/quotes/List.vue b/src/views/quotes/List.vue
index e7fc0bd..deaf664 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,13 +124,6 @@
)
const listTab = ref([
{
- title: t('UsStocks'),
- type: 'UsStock',
- urlMatch: 'stock',
- symbolType: 'US-stocks',
- tabIndex: 3
- },
- {
title: t('加密货币'),
type: 'Cryptos',
urlMatch: 'crypto',
@@ -148,6 +143,13 @@
// urlMatch: 'INDIA-stocks',
// symbolType: 'INDIA-stocks',
// tabIndex: 0
+ // },
+ // {
+ // title: t('UsStocks'),
+ // type: 'UsStock',
+ // urlMatch: 'stock',
+ // symbolType: 'US-stocks',
+ // tabIndex: 3
// },
// {
// title: t('港股'),
@@ -273,6 +275,7 @@
return relUrl;
}
+
const closeSaveBox = () => {
setStorage(`${TITLE}addtoClosed`, 1)
showSave.value = false
@@ -305,23 +308,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 +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;
@@ -412,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 {
@@ -422,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);
+ }
}
}
@@ -434,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;
@@ -461,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));
}
}
}
--
Gitblit v1.9.3