From 2eb4dd6f50b75c9ec844d08eded5365cd79e4207 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Wed, 09 Jul 2025 15:59:00 +0800
Subject: [PATCH] style
---
src/components/Transform/contract-header/index.vue | 47 ++++++++++++++++++++++++++++++++++-------------
1 files changed, 34 insertions(+), 13 deletions(-)
diff --git a/src/components/Transform/contract-header/index.vue b/src/components/Transform/contract-header/index.vue
index 02ee085..28d2b42 100644
--- a/src/components/Transform/contract-header/index.vue
+++ b/src/components/Transform/contract-header/index.vue
@@ -11,9 +11,9 @@
<div class="font-35">{{ symbolName.toUpperCase() || '--' }}</div>
<div class="ml-15 font-28">{{ title }}</div>
</div>
- <div class="pl-10 w-160 font-28" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range > 0 ?
- '+' : '' }}{{ range || '--' }}%</div>
- <!-- <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="klineJump()"> -->
+ <div class="pl-10 w-160 font-28" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range || '--' }}%</div>
+ <!-- 右上角小图标 -->
+ <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="klineJump()">
</div>
<!-- <div class="flex items-center">
<img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35"
@@ -60,7 +60,7 @@
</div>
<div class="text-right">
<div class="textColor font-28">{{ item.close }}</div>
- <div class="mt-10 font-28" :class="item.change_ratio > 0 ? 'text-green' : 'text-red'">{{ item.change_ratio
+ <div class="mt-10 font-28" :class="item.change_ratio_str > 0 ? 'text-green' : 'text-red'">{{ item.change_ratio_str
}}%</div>
</div>
</div>
@@ -75,7 +75,8 @@
import { _getHomeList } from "@/service/home.api";
import { useQuotesStore } from '@/store/quotes.store';
import { THEME } from '@/config/theme'
-import { setStorage } from '@/utils/utis'
+import { setStorage, getStorage } from '@/utils/utis'
+import { _getCoinList } from '@/service/quotes.api';
export default {
name: "contractHeader",
props: {
@@ -145,7 +146,7 @@
methods: {
onRoute(item) {
if (this.$route.params.symbol !== item.symbol) {
- // this.$router.push(`/cryptos/perpetualContract/${item.symbol}?selectIndex=${this.selectIndex}`)
+ this.$router.push(`/cryptos/perpetualContract/${item.symbol}?selectIndex=${this.selectIndex}`)
// debugger
this.$emit('update-coin', item.symbol)
setStorage('symbol', item.symbol)
@@ -153,15 +154,35 @@
}
this.show = false
},
- onSidebar() { // 侧边栏打开
+ async onSidebar() { // 侧边栏打开
// console.log('侧边栏打开: ', this.selectIndex)
- if (this.selectIndex == 2) {
- const quotesData = JSON.parse(localStorage.getItem('qoutes'));
- this.coins = quotesData.coins || [];
- this.coins = quotesData.coins.map(item => item.symbol)
+ // if (this.selectIndex == 2) {
+ // 优先用本地缓存的 coins
+ let arr = getStorage('qoutes')
+ let coninArr = ''
+ console.log('arr:', arr)
+
+ if (arr && arr.length) {
+ // 如果本地有 coins，优先用本地
+ arr.forEach(item => {
+ coninArr += item.symbol + ','
+ })
} else {
- this.coins = this.coinList.map(item => item.symbol);
+ // 如果本地没有 coins，拉取接口
+ const quotesData = await _getCoinList()
+ console.log('quotesData:', quotesData)
+ quotesData.forEach(item => {
+ coninArr += item.symbol + ','
+ })
+ setStorage('qoutes', { coins: quotesData }) // 存到本地
}
+ this.coins = coninArr
+ // const quotesData = JSON.parse(localStorage.getItem('qoutes'));
+ // this.coins = quotesData.coins || [];
+ // this.coins = quotesData.coins.map(item => item.symbol)
+ // } else {
+ // this.coins = this.coinList.map(item => item.symbol);
+ // }
// quotesStore.coins
@@ -170,7 +191,7 @@
this.fetchList()
},
fetchList() { // 获取行情
- _getHomeList(this.coins.join(',')).then(list => {
+ _getHomeList(this.coins).then(list => {
// console.log(list)
this.list = list
if (this.timeout) {
--
Gitblit v1.9.3