From ef52095f5e9f0a9fe2da779bb1573947d77d75b6 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 22 May 2026 10:53:01 +0800
Subject: [PATCH] 1
---
src/views/quotes/List.vue | 70 ++++++++++++++++++++++++++++++++---
1 files changed, 64 insertions(+), 6 deletions(-)
diff --git a/src/views/quotes/List.vue b/src/views/quotes/List.vue
index 2e8010a..58d092a 100644
--- a/src/views/quotes/List.vue
+++ b/src/views/quotes/List.vue
@@ -1,20 +1,47 @@
<template>
- <div class="quotes-list pt-5 pb-60 pl-5 pr-5" id="cryptos">
-
- <Head @search="onSearch"></Head>
- <list-quatation :listData="qList" :tabActive="2" />
+ <div class="quotes-list-wrap">
+ <!-- 头部：All / Spot / Futures + 搜索图标 -->
+ <div class="quotes-header">
+ <div class="quotes-header-tabs">
+ <span
+ v-for="(tab, idx) in headerTabs"
+ :key="idx"
+ class="quotes-header-tab"
+ :class="{ 'quotes-header-tab--active': headerActive === idx }"
+ @click="headerActive = idx"
+ >
+ {{ tab }}
+ </span>
+ </div>
+ <div class="quotes-header-search" @click="onSearchClick">
+ <van-icon name="search" size="22" />
+ </div>
+ </div>
+ <div class="quotes-list pb-60 pl-5 pr-5" id="cryptos">
+ <list-quatation :listData="qList" :tabActive="2" :tabShow="false" />
+ </div>
</div>
</template>
<script setup>
import { ref, computed, onBeforeUnmount } from 'vue';
import { useStore } from "vuex";
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
import { _getHomeList } from '@/service/cryptos.api'
import { TIME_OUT } from "@/config";
import ListQuatation from "@/components/Transform/list-quotation/index.vue";
-import Head from './components/head.vue'
+const { t } = useI18n();
+const router = useRouter();
const store = useStore();
+
+const headerActive = ref(2);
+const headerTabs = computed(() => [t('全部'), t('现货'), t('永续')]);
+
+const onSearchClick = () => {
+ router.push('/optional/search');
+};
//#region 行情数据----------------------------------------
let qList = ref([])
@@ -72,8 +99,39 @@
}
</script>
<style lang="scss" scoped>
+.quotes-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 20px 16px 16px;
+ background: #f0f0f0;
+}
+
+.quotes-header-tabs {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+}
+
+.quotes-header-tab {
+ font-size: 16px;
+ color: #999;
+ cursor: pointer;
+ font-weight: 500;
+}
+
+.quotes-header-tab--active {
+ color: #5e2bc8;
+ font-weight: 600;
+}
+
+.quotes-header-search {
+ color: #999;
+ cursor: pointer;
+ padding: 4px;
+}
+
.quotes-list {
- background: $mainbgWhiteColor;
min-height: 100vh;
:deep(.active) {
--
Gitblit v1.9.3