style

lxf

2025-07-04 5ef5f50d09b49795c4cc9ca017294cbb74083cae

 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)