From 5ef5f50d09b49795c4cc9ca017294cbb74083cae Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Fri, 04 Jul 2025 17:16:07 +0800
Subject: [PATCH] style
---
src/views/foreign/foreignPerpetualContract/deliveryContract.vue | 70 ++++++++++++++++++++++++++--------
1 files changed, 53 insertions(+), 17 deletions(-)
diff --git a/src/views/foreign/foreignPerpetualContract/deliveryContract.vue b/src/views/foreign/foreignPerpetualContract/deliveryContract.vue
index 19fb26c..0f98ad4 100644
--- a/src/views/foreign/foreignPerpetualContract/deliveryContract.vue
+++ b/src/views/foreign/foreignPerpetualContract/deliveryContract.vue
@@ -1,27 +1,53 @@
<template>
<div :key="currentSymbol" class="pb-108 ">
- <!-- 头部区 -->
- <ContractHeader :symbol="currentSymbol" :range="range" :selectIndex="selectIndex"
- :balance="userStore.userInfo.balance" @update-coin="onUpdate" page="perpetualContract">
- </ContractHeader>
- <div>
- <div class="mainBackground rounded-view">
- <PerpetualOpen class="pl-15 pr-15" :key="keyIndex + 'c'" :selectIndex="selectIndex" :symbol="currentSymbol"
- :green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-futrue="initFutrue"
- @ordered="onOrdered" :currentType="currentType" @changeCurrentType="changeCurrentType">
- </PerpetualOpen>
- <div class="line"></div>
- <PerpetualOrder class="pl-15 pr-15" :key="keyIndex + 'd'" :symbol="currentSymbol" :order-cur="orderCur"
- :order-hold="orderHold" :price="price" :topIndex="selectIndex" :futrue-hold="futrueHold"
- :futrue-histroy="futrueHistroy" @tab="onTab" @recall="onRecall">
- </PerpetualOrder>
+ <dev class="status_bar fixed w-full top-0 left-0 h-44 flex items-center justify-between bg-white z-99">
+ <dev class="status_bar absolute top-0 left-0 w-full h-44 flex items-center justify-center z--1">
+ <dev class="p-3 bg-#EEE rounded-full flex text-12 font-medium">
+ <span
+ :class="['block h-24 w-84.5 text-center leading-24 rounded-full', currentTab === 'spot' ? 'bg-#3640f0 text-white' : '']"
+ @click="goToTab('spot')"
+ style="cursor:pointer;">
+ <span>{{ t('现货') }}</span>
+ </span>
+ <span
+ :class="['block h-24 w-84.5 text-center leading-24 rounded-full', currentTab === 'delivery' ? 'bg-#3640f0 text-white' : '']"
+ @click="goToTab('delivery')"
+ style="cursor:pointer;"
+ >
+ <span>{{ t('交割') }}</span>
+ </span>
+ </dev>
+ </dev>
+ </dev>
+ <div v-show="currentTab === 'delivery'">
+ <!-- 头部区 -->
+ <ContractHeader :symbol="currentSymbol" :range="range" :selectIndex="selectIndex"
+ :balance="userStore.userInfo.balance" @update-coin="onUpdate" page="perpetualContract">
+ </ContractHeader>
+ <JGKline></JGKline>
+ <div>
+ <div class="mainBackground rounded-view">
+ <PerpetualOpen class="pl-15 pr-15" :key="keyIndex + 'c'" :selectIndex="selectIndex" :symbol="currentSymbol"
+ :green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-futrue="initFutrue"
+ @ordered="onOrdered" :currentType="currentType" @changeCurrentType="changeCurrentType">
+ </PerpetualOpen>
+ <div class="line"></div>
+ <PerpetualOrder class="pl-15 pr-15" :key="keyIndex + 'd'" :symbol="currentSymbol" :order-cur="orderCur"
+ :order-hold="orderHold" :price="price" :topIndex="selectIndex" :futrue-hold="futrueHold"
+ :futrue-histroy="futrueHistroy" @tab="onTab" @recall="onRecall">
+ </PerpetualOrder>
+ </div>
</div>
</div>
-
+ <div v-show="currentTab === 'spot'">
+ <CoinChart></CoinChart>
+ </div>
</div>
</template>
<script setup>
+import CoinChart from '@/views/foreign/CoinChart.vue';
+import JGKline from './jg_kline.vue';
import PerpetualOpen from '@/components/foreign/foreign-perpetual-open/index.vue'
import PerpetualOrder from '@/components/foreign/foreign-perpetual-order/index.vue'
import { ref, onMounted, onActivated, onDeactivated, onBeforeUnmount } from 'vue';
@@ -29,14 +55,22 @@
import { _getRealtime } from '@/service/quotes.api'
import { useUserStore } from '@/store/user';
import { useQuotesStore } from '@/store/quotes.store';
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
import { WS_URL } from '@/config'
import { SET_COIN_LIST, SET_USERINFO } from '@/store/types.store'
import { _getBalance, _c2cPaymentMethodList } from '@/service/user.api.js'
import { _futrueOrderInit, _futrueOrderList, _getDeepData, contractOrder } from "@/service/trade.api.js";
+import { useI18n } from 'vue-i18n';
const userStore = useUserStore()
const quotesStore = useQuotesStore()
+const router = useRouter()
const route = useRoute()
+const { t } = useI18n()
+
+const currentTab = ref('delivery')
+const goToTab = (val) => {
+ currentTab.value = val
+}
const initTimer = ref(null)
@@ -286,6 +320,8 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/css/deepseek_css_20250625_30ff932.css';
+
//.list-enter-active, .list-leave-active {
// transition: all .5s;
// transform: translateY(30px)
--
Gitblit v1.9.3