| | |
|---|
| | | <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([]) |
|---|
| | |
|---|
| | | } |
|---|
| | | </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) { |
|---|
