From 3f3e2d5977787b0c6e09cd5cba7b41e5fb7d3fd0 Mon Sep 17 00:00:00 2001
From: zzzz <690498789@qq.com>
Date: Sun, 21 Apr 2024 15:59:28 +0800
Subject: [PATCH] first
---
src/page/TtrendDetails/index.vue | 1553 ++++++++++++++++++++++++++++++++---------------------------
1 files changed, 848 insertions(+), 705 deletions(-)
diff --git a/src/page/TtrendDetails/index.vue b/src/page/TtrendDetails/index.vue
index 55879fd..33f570c 100644
--- a/src/page/TtrendDetails/index.vue
+++ b/src/page/TtrendDetails/index.vue
@@ -1,7 +1,7 @@
<template>
- <div class="trend-detail pb-90 mainBackground">
- <!-- 头部 -->
- <!-- <div class="w-full h-88 flex items-center justify-between px-32 box-border">
+ <div class="trend-detail pb-90 mainBackground">
+ <!-- 头部 -->
+ <!-- <div class="w-full h-88 flex items-center justify-between px-32 box-border">
<div class="flex items-center w-full" @click="onRoute('/quotes?active=3')">
<img src="@/assets/image/assets-center/convert.png" class="w-38 h-38" />
<p class="font-38 font-600 ml-10">{{quote.name}}</p>
@@ -13,138 +13,228 @@
@click="goHistory" />
</div>
</div> -->
- <trade-head @openRecord="openRecord" :backFunc="() => $router.push('/')" :symbol="symbol" :islevel="true"
- @update-coin="onUpdate" @data="quote = $event" :title="$t('永续')" @changeLine="onChangeLine" :isReturn="isReturn"
- :kineType="kineType" :tabIndex="tab" />
- <div class="flex justify-between px-32 pt-40" v-if="!kineType">
- <div class="w-368 h-80 mr-32 flex justify-center items-center rounded box-border tabBtn"
- :class="tab === '1' ? 'activeBtn' : ''" @click="onTab('1')">{{ $t('永续合约') }}</div>
- <div class="w-368 h-80 flex justify-center items-center rounded box-border tabBtn"
- :class="tab === '2' ? 'activeBtn' : ''" @click="onTab('2')">{{ $t('交割合约') }}</div>
+ <trade-head
+ @openRecord="openRecord"
+ :backFunc="() => $router.push('/')"
+ :symbol="symbol"
+ :islevel="true"
+ @update-coin="onUpdate"
+ @data="quote = $event"
+ :title="$t('永续')"
+ @changeLine="onChangeLine"
+ :isReturn="isReturn"
+ :kineType="kineType"
+ :tabIndex="tab"
+ />
+ <div class="flex justify-between px-32 pt-40" v-if="!kineType">
+ <div
+ class="w-368 h-80 mr-32 flex justify-center items-center rounded box-border tabBtn"
+ :class="tab === '1' ? 'activeBtn' : ''"
+ @click="onTab('1')"
+ >
+ {{ $t("永续合约") }}
+ </div>
+ <div
+ class="w-368 h-80 flex justify-center items-center rounded box-border tabBtn"
+ :class="tab === '2' ? 'activeBtn' : ''"
+ @click="onTab('2')"
+ >
+ {{ $t("交割合约") }}
+ </div>
+ </div>
+ <!-- 数据区 -->
+ <div :class="{ slide2: animated1, slide1: animated2 }">
+ <div>
+ <div class="flex flex-1 px-32 mt-40">
+ <div class="flex flex-col font-22">
+ <p
+ class="font-70 font-600"
+ :class="quote.change_ratio > 0 ? 'text-green' : 'text-red'"
+ >
+ {{ quote.close || "--" }}
+ </p>
+ <p class="font-22 mt-10 textColor">
+ ≈ {{ currency.currency_symbol
+ }}{{
+ quote.close
+ ? (quote.close * currency.rate).toFixed(
+ quote.close.toString().split(".")[1]
+ ? quote.close.toString().split(".")[1].length
+ : 2
+ )
+ : "--"
+ }}
+ <span :class="quote.change_ratio > 0 ? 'text-green' : 'text-red'"
+ >{{
+ quote.change_ratio || (quote.change_ratio === 0 ? 0 : "--")
+ }}%</span
+ >
+ </p>
+ <p class="text-grey mt-10">
+ {{ $t("标记价格") }} {{ quote.open || "--" }}
+ </p>
+ </div>
+ <div class="flex flex-wrap flex-1 justify-end font-22">
+ <div class="flex w-1/2 flex-col justify-between w-177">
+ <p class="text-grey">{{ $t("24h最高价") }}</p>
+ <p class="textColor">{{ quote.high || "--" }}</p>
+ </div>
+ <div class="flex w-1/2 flex-col justify-between w-177">
+ <p class="text-grey">
+ {{ $t("24h成交量") }}( {{ symbol | _symbolName() }})
+ </p>
+ <p class="textColor">
+ {{ fixDate(quote.amount * 1, $i18n) || "--" }}
+ </p>
+ </div>
+ <div class="flex w-1/2 flex-col justify-between w-177 mt-20">
+ <p class="text-grey">{{ $t("24h最低价") }}</p>
+ <p class="textColor">{{ quote.low || "--" }}</p>
+ </div>
+ <div class="flex w-1/2 flex-col justify-between w-177 mt-20">
+ <p class="text-grey">{{ $t("24h成交额(USDT)") }}</p>
+ <p class="textColor">
+ {{ (quote.volume * 1).toFixed(2) || "--" }}
+ </p>
+ </div>
+ </div>
</div>
- <!-- 数据区 -->
- <div :class="{ slide2: animated1, slide1: animated2 }">
- <div>
- <div class="flex flex-1 px-32 mt-40">
- <div class="flex flex-col font-22">
- <p class="font-70 font-600" :class="quote.change_ratio > 0 ? 'text-green' : 'text-red'">
- {{ quote.close || '--' }}</p>
- <p class="font-22 mt-10 textColor">≈ {{ currency.currency_symbol }}{{ quote.close ? (quote.close *
- currency.rate).toFixed(quote.close.toString().split('.')[1] ?
- quote.close.toString().split('.')[1].length : 2) : '--' }}
- <span :class="quote.change_ratio > 0 ? 'text-green' : 'text-red'">{{ quote.change_ratio
- || (quote.change_ratio === 0 ? 0 : '--') }}%</span>
- </p>
- <p class="text-grey mt-10">{{ $t('标记价格') }} {{ quote.open || '--' }}</p>
- </div>
- <div class="flex flex-wrap flex-1 justify-end font-22">
- <div class="flex w-1/2 flex-col justify-between w-177">
- <p class="text-grey">{{ $t('24h最高价') }}</p>
- <p class="textColor">{{ quote.high || '--' }}</p>
- </div>
- <div class="flex w-1/2 flex-col justify-between w-177">
- <p class="text-grey">{{ $t('24h成交量') }}({{ symbol && symbol.toUpperCase() || '--' }})</p>
- <p class="textColor">{{ fixDate(quote.amount * 1, $i18n) || '--' }}</p>
- </div>
- <div class="flex w-1/2 flex-col justify-between w-177 mt-20">
- <p class="text-grey">{{ $t('24h最低价') }}</p>
- <p class="textColor">{{ quote.low || '--' }}</p>
- </div>
- <div class="flex w-1/2 flex-col justify-between w-177 mt-20">
- <p class="text-grey">{{ $t('24h成交额(USDT)') }}</p>
- <p class="textColor">{{ (quote.volume * 1).toFixed(2) || '--' }}</p>
- </div>
- </div>
- </div>
+ </div>
+ <!-- k line-->
+ <div class="mt-35 h-482-px">
+ <kline-charts
+ :update-key="updateKey"
+ :update-data="quote"
+ :isChangeLine="isChangeLine"
+ :symbol="symbol"
+ v-if="symbol"
+ @updataLine="isChangeLine = false"
+ />
+ </div>
+ <div class="w-full h-20 greyBg"></div>
+ <!-- tab 区域-->
+ <div class="pb-180 tabContent">
+ <van-tabs v-model="active">
+ <van-tab :title="$t('委托订单')" name="1">
+ <div class="flex px-32 justify-between px-32">
+ <ul class="flex flex-col flex-1 mr-20">
+ <li class="font-28 text-grey mt-30 mb-15 w-full">
+ <p>{{ $t("买入") }}</p>
+ <p class="flex justify-between items-cener font-22">
+ <span style="margin-right: -10px"
+ >{{ $t("价格") }}(USDT)</span
+ >
+ <span>{{ $t("数量") }}({{ symbol | _symbolName(1) }})</span>
+ </p>
+ </li>
+ <li
+ v-for="(item, index) in bids"
+ :key="index"
+ class="flex justify-between font-26 py-15"
+ :style="{
+ background:
+ `linear-gradient(to left,${
+ theme == 'dark' ? '#121212' : '#ffffff'
+ } 0% ` +
+ (item.amount / bids[bids.length - 1].amount) * 100 +
+ '%,rgba(94,186,137,.1) ' +
+ (item.amount / bids[bids.length - 1].amount) * 100 +
+ '%,rgba(94,186,137,.1) 100%)',
+ }"
+ >
+ <span class="textColor">{{ item.price || "--" }}</span>
+ <span v-if="symbol == 'shib'" class="text-green">{{
+ fixDate(item.amount, $i18n) || "--"
+ }}</span>
+ <span v-else class="text-green">{{
+ item.amount || "--"
+ }}</span>
+ </li>
+ </ul>
+ <ul class="flex-1 flex flex-col ml-20">
+ <li class="font-28 text-grey mt-30 mb-15 w-full">
+ <p>{{ $t("卖出") }}</p>
+ <p class="flex justify-between items-center font-22">
+ <span class="-ml-5">{{ $t("价格") }}(USDT)</span>
+ <span>{{ $t("数量") }}({{ symbol | _symbolName() }})</span>
+ </p>
+ </li>
+ <li
+ v-for="(item, index) in asks"
+ :key="index"
+ class="flex justify-between font-26 py-15"
+ :style="{
+ background:
+ `linear-gradient(to left,${
+ theme == 'dark' ? '#121212' : '#ffffff'
+ } 0% ` +
+ (item.amount / asks[asks.length - 1].amount) * 100 +
+ '%,rgba(246,70,93,.1) ' +
+ (item.amount / asks[asks.length - 1].amount) * 100 +
+ '%,rgba(246,70,93,.1) 100%)',
+ }"
+ >
+ <span class="textColor">{{ item.price || "--" }}</span>
+ <span v-if="symbol == 'shib'" class="text-red">{{
+ fixDate(item.amount, $i18n) || "--"
+ }}</span>
+ <span v-else class="text-red">{{ item.amount || "--" }}</span>
+ </li>
+ </ul>
</div>
- <!-- k line-->
- <div class="mt-35 h-482-px">
- <kline-charts :update-key="updateKey" :update-data="quote" :isChangeLine="isChangeLine" :symbol="symbol"
- v-if="symbol" @updataLine="isChangeLine = false" />
+ </van-tab>
+ <van-tab :title="$t('最新交易')" name="2">
+ <ul class="px-32 font-28 text-grey">
+ <li class="flex justify-between mt-30">
+ <span class="flex-1">{{ $t("时间") }}</span>
+ <span class="flex-1">{{ $t("方向") }}</span>
+ <span class="flex-1">{{ $t("价格") }}(USDT)</span>
+ <span class="flex-1 flex justify-center"
+ >{{ $t("数量") }}({{ symbol.toUpperCase() }})</span
+ >
+ </li>
+ <li
+ v-for="(item, index) in deals"
+ :key="item.ts + item.price + item.amount || index"
+ class="flex justify-between mt-30"
+ >
+ <span class="flex-1">{{
+ item.current_time ? item.current_time : "--"
+ }}</span>
+ <span
+ :class="item.direction === 'buy' ? 'text-green' : 'text-red'"
+ class="flex-1"
+ >{{
+ item.direction === "buy" ? $t("买入") : $t("卖出")
+ }}</span
+ >
+ <span
+ :class="item.direction === 'buy' ? 'text-green' : 'text-red'"
+ class="flex-1 flex-justify-center"
+ >{{ item.price || "--" }}</span
+ >
+ <span class="flex-1 flex justify-center">{{
+ item.amount || "--"
+ }}</span>
+ </li>
+ </ul>
+ </van-tab>
+ <van-tab :title="$t('深度图')" name="3">
+ <div class="buy-sell-box">
+ <div class="buy-item">
+ <div class="bg-line"></div>
+ {{ $t("买盘") }}
+ </div>
+ <div class="sell-item">
+ <div class="bg-line"></div>
+ {{ $t("卖盘") }}
+ </div>
</div>
- <div class="w-full h-20 greyBg"></div>
- <!-- tab 区域-->
- <div class="pb-180 tabContent">
- <van-tabs v-model="active">
- <van-tab :title="$t('委托订单')" name="1">
- <div class="flex px-32 justify-between px-32">
- <ul class="flex flex-col flex-1 mr-20">
- <li class="font-28 text-grey mt-30 mb-15 w-full">
- <p>{{ $t('买入') }}</p>
- <p class="flex justify-between items-cener font-22">
- <span style="margin-right: -10px;">{{ $t('价格') }}(USDT)</span>
- <span>{{ $t('数量') }}({{ symbol.toUpperCase() }})</span>
- </p>
- </li>
- <li v-for="(item, index) in bids" :key="index" class="flex justify-between font-26 py-15"
- :style="{
- 'background': `linear-gradient(to left,${theme == 'dark' ? '#121212' : '#ffffff'} 0% ` +
- (item.amount / bids[bids.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) ' +
- (item.amount / bids[bids.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) 100%)'
- }">
- <span class="textColor">{{ item.price || '--' }}</span>
- <span v-if="symbol == 'shib'" class="text-green">{{ fixDate(item.amount, $i18n) ||
- '--' }}</span>
- <span v-else class="text-green">{{ item.amount || '--' }}</span>
- </li>
- </ul>
- <ul class="flex-1 flex flex-col ml-20">
- <li class="font-28 text-grey mt-30 mb-15 w-full">
- <p>{{ $t('卖出') }}</p>
- <p class="flex justify-between items-center font-22">
- <span class="-ml-5">{{ $t('价格') }}(USDT)</span>
- <span>{{ $t('数量') }}({{ symbol.toUpperCase() }})</span>
- </p>
- </li>
- <li v-for="(item, index) in asks" :key="index" class="flex justify-between font-26 py-15"
- :style="{
- 'background': `linear-gradient(to left,${theme == 'dark' ? '#121212' : '#ffffff'} 0% ` +
- (item.amount / asks[asks.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) ' +
- (item.amount / asks[asks.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) 100%)'
- }">
- <span class="textColor">{{ item.price || '--' }}</span>
- <span v-if="symbol == 'shib'" class="text-red">{{ fixDate(item.amount, $i18n) ||
- '--' }}</span>
- <span v-else class="text-red">{{ item.amount || '--' }}</span>
- </li>
- </ul>
- </div>
- </van-tab>
- <van-tab :title="$t('最新交易')" name="2">
- <ul class="px-32 font-28 text-grey">
- <li class="flex justify-between mt-30">
- <span class="flex-1">{{ $t('时间') }}</span>
- <span class="flex-1">{{ $t('方向') }}</span>
- <span class="flex-1">{{ $t('价格') }}(USDT)</span>
- <span class="flex-1 flex justify-center">{{ $t('数量') }}({{ symbol.toUpperCase() }})</span>
- </li>
- <li v-for="(item, index) in deals" :key="item.ts + item.price + item.amount || index"
- class="flex justify-between mt-30">
- <span class="flex-1">{{ item.current_time ? item.current_time : '--' }}</span>
- <span :class="item.direction === 'buy' ? 'text-green' : 'text-red'" class="flex-1">{{
- item.direction === 'buy' ? $t('买入') : $t('卖出') }}</span>
- <span :class="item.direction === 'buy' ? 'text-green' : 'text-red'"
- class="flex-1 flex-justify-center">{{ item.price || '--' }}</span>
- <span class="flex-1 flex justify-center">{{ item.amount || '--' }}</span>
- </li>
- </ul>
- </van-tab>
- <van-tab :title="$t('深度图')" name="3">
- <div class="buy-sell-box">
- <div class="buy-item">
- <div class="bg-line"></div>
- {{ $t('买盘') }}
- </div>
- <div class="sell-item">
- <div class="bg-line"></div>
- {{ $t('卖盘') }}
- </div>
- </div>
- <div class="deep-chart-box">
- <deep-chart :deepBuy="deepBuy" :deepSell="deepSell"></deep-chart>
- </div>
- </van-tab>
- <!-- <van-tab :title="$t('数据分析')" name="4">
+ <div class="deep-chart-box">
+ <deep-chart :deepBuy="deepBuy" :deepSell="deepSell"></deep-chart>
+ </div>
+ </van-tab>
+ <!-- <van-tab :title="$t('数据分析')" name="4">
<div class="capital-box">
<div class="capital-flows">
<span class="title">资金流向分析</span><van-icon name="warning-o" />
@@ -187,7 +277,7 @@
</div>
</div>
</van-tab> -->
- <!-- <van-tab :title="$t('币种简介')" name="3" class="border-t-color" v-if="this.$te(`${symbol}简介`)">
+ <!-- <van-tab :title="$t('币种简介')" name="3" class="border-t-color" v-if="this.$te(`${symbol}简介`)">
<div class="px-20 py-20 font-40 text-grey">
{{ $t('关于名称', { 'symbol': symbol.toUpperCase() }) }}
</div>
@@ -195,662 +285,715 @@
{{ $t(`${symbol}简介`, { 'symbol': symbol.toUpperCase() }) }}
</div>
</van-tab> -->
- </van-tabs>
- </div>
- <!-- 按钮区 -->
- <div class="flex pl-40 pt-11 pb-11 pr-32 text-white justify-between fixed bottom-108 w-full box-border h-90-px z-10 buttonSafe"
- v-if="!kineType" :class="theme == 'dark' ? 'bg-night1' : 'bg-grey'">
- <div class="flex flex-col mx-30 items-center" @click="onRoute('/exchangeRate')">
- <img src="@/assets/image/icon-rate.png" class="w-38 h-38" />
- <p class="font-25 text-grey mt-8 text-center">{{ $t('汇率') }}</p>
- </div>
- <div ref="toBuy" class="w-270 h-88 bg-green flex justify-center items-center rounded-lg"
- @click="onSubmit('buy')">
- {{ tab == 1 ? $t('开多') : $t('买多') }}
- </div>
- <div ref="toSell" class="w-270 h-88 bg-red flex justify-center items-center rounded-lg"
- @click="onSubmit('sell')">
- {{ tab == 1 ? $t('开空') : $t('买空') }}</div>
- </div>
+ </van-tabs>
+ </div>
+ <!-- 按钮区 -->
+ <div
+ class="flex pl-40 pt-11 pb-11 pr-32 text-white justify-between fixed bottom-108 w-full box-border h-90-px z-10 buttonSafe"
+ v-if="!kineType"
+ :class="theme == 'dark' ? 'bg-night1' : 'bg-grey'"
+ >
+ <div
+ class="flex flex-col mx-30 items-center"
+ @click="onRoute('/exchangeRate')"
+ >
+ <img src="@/assets/image/icon-rate.png" class="w-38 h-38" />
+ <p class="font-25 text-grey mt-8 text-center">{{ $t("汇率") }}</p>
</div>
- <van-popup v-model="show" class="rounded-2xl" :key="initFutrue.session_token">
- <popup-confirm-order :paras="initFutrue.para" :symbol="symbol" :direction="direction"
- :balance="initFutrue.amount" :price="quote.close" @close="onClose" @confirm="onOrderConfirm"
- v-if="popType === 'confirm'" />
- <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
- @continueToBuy="order()" @timeEnd="handleTimeEnd" :price="quote.close" v-else />
- </van-popup>
+ <div
+ ref="toBuy"
+ class="w-270 h-88 bg-green flex justify-center items-center rounded-lg"
+ @click="onSubmit('buy')"
+ >
+ {{ tab == 1 ? $t("开多") : $t("买多") }}
+ </div>
+ <div
+ ref="toSell"
+ class="w-270 h-88 bg-red flex justify-center items-center rounded-lg"
+ @click="onSubmit('sell')"
+ >
+ {{ tab == 1 ? $t("开空") : $t("买空") }}
+ </div>
+ </div>
</div>
+ <van-popup
+ v-model="show"
+ class="rounded-2xl"
+ :key="initFutrue.session_token"
+ >
+ <popup-confirm-order
+ :paras="initFutrue.para"
+ :symbol="symbol"
+ :direction="direction"
+ :balance="initFutrue.amount"
+ :price="quote.close"
+ @close="onClose"
+ @confirm="onOrderConfirm"
+ v-if="popType === 'confirm'"
+ />
+ <popup-delivery
+ showBtns
+ :detailData="detailData"
+ :key="detailData.order_no"
+ @close="onClose"
+ @continueToBuy="order()"
+ @timeEnd="handleTimeEnd"
+ :price="quote.close"
+ v-else
+ />
+ </van-popup>
+ </div>
</template>
<script>
-import { Tab, Tabs, Popup } from 'vant';
-import TradeHead from '@/components/trade-head/index.vue'
-import KlineCharts from '@/components/kline-charts'
-import deepChart from '@/components/deepChart'
-import pieChart from '@/components/pieChart'
-import inflowKline from '@/components/inflow-kline'
-import cylinderChart from '@/components/cylinderChart'
-import { _getHomeList, _collect, _deleteCollect } from '@/API/home.api'
-import { _getBalance, _futrueOrder, _futrueOrderInit, _futrueOrderDetail } from '@/API/trade.api'
-import { mapGetters } from 'vuex';
+import { Tab, Tabs, Popup } from "vant";
+import TradeHead from "@/components/trade-head/index.vue";
+import KlineCharts from "@/components/kline-charts";
+import deepChart from "@/components/deepChart";
+import pieChart from "@/components/pieChart";
+import inflowKline from "@/components/inflow-kline";
+import cylinderChart from "@/components/cylinderChart";
+import { _getHomeList, _collect, _deleteCollect } from "@/API/home.api";
+import {
+ _getBalance,
+ _futrueOrder,
+ _futrueOrderInit,
+ _futrueOrderDetail,
+} from "@/API/trade.api";
+import { mapGetters } from "vuex";
import { fixDate } from "@/utils/utis";
-import { WS_URL } from '@/config';
+import { WS_URL } from "@/config";
import PopupDelivery from "@/components/popup-delivery";
-import PopupConfirmOrder from '@/components/popup-confirm-order'
+import PopupConfirmOrder from "@/components/popup-confirm-order";
export default {
- name: 'TrendDetails',
- components: {
- [Tabs.name]: Tabs,
- [Tab.name]: Tab,
- [Popup.name]: Popup,
- KlineCharts,
- PopupDelivery,
- PopupConfirmOrder,
- TradeHead,
- deepChart,
- pieChart,
- inflowKline,
- cylinderChart
- },
- data() {
- const arr = []
- for (let i = 0; i < 17; i++) {
- arr.push({
- id: i
- })
- }
- return {
- show: false,
- direction: 'buy',
- initFutrue: {},
- detailData: {},
- price: '',
- popType: 'confirm', // confirm / counting
- fixDate,
- tab: '1', // 顶部标签
- symbol: '',
- quoteData: [],
- quote: {},
- active: 1,
- asks: arr, // 卖
- bids: arr, // 买
- deals: arr, // 交易
- sockets: {
- quote: null,
- deals: null,
- askBid: null
- },
- animated1: false,
- animated2: false,
- updateKey: 1,
- collected: '0', // 是否自选
- maxSell: 0, // 卖单最大
- maxBuy: 0, // 买单最大
- order_no: '',
- timer: null,
- isChangeLine: false,
- isReturn: true, //是否有返回
- kineType: '',
- // updateData: {}
- deepBuy: [],
- deepSell: [],
- fromPath: ''
- }
- },
- computed: {
- ...mapGetters({
- currency: 'home/currency',
- userInfo: 'user/userInfo',
- theme: 'home/theme'
- })
- },
- mounted() {
- //this.continueOrder()
- this.kineType = this.$route.query.kineType;
-
- },
- created() {
-
- },
- watch: {
- active(val) { // tab切换
- if (val / 1 === 1 || val / 1 === 3) {
- this.sockets.deals && this.sockets.deals.close()
- this.sockets.deals = null
- if (this.symbol) { // 刚进来可能是null
- this.startAskBidSocket()
- }
- } else {
- this.sockets.askBid && this.sockets.askBid.close()
- this.sockets.askBid = null
- this.startDealsSocket()
- }
- },
- symbol() {
- this.closeSocket()
- }
-
-
- },
- methods: {
- onChangeLine() {
- this.isChangeLine = true
- },
- continueOrder() {
- let direction = this.$route.query.direction
- if (direction) {
- this.symbol = this.$route.params.symbol
- this.tab = '2'
- console.log(this.tab)
- this.onSubmit(direction);
- }
- },
- order() {
- this.onSubmit(this.direction);
- },
- onTab(e) {
- this.tab = e
- // this.$router.go()
- if (e == 1) {
- this.animated1 = true
- this.timer = setTimeout(() => {
- this.animated1 = false
- clearTimeout(this.timer)
- }, 200)
- } else {
- this.animated2 = true
- this.timer = setTimeout(() => {
- this.animated2 = false
- clearTimeout(this.timer)
- }, 200)
- }
- },
-
- onCollect() { // 收藏，取消收藏
- let _api = _collect
- if (this.collected === '1') {
- _api = _deleteCollect
- }
- _api(this.symbol).then(() => {
- this.collected = this.collected === '1' ? '0' : '1'
- if (this.collected === '1') {
- this.$toast.success(this.$t('收藏成功'))
- } else {
- this.$toast.success(this.$t('取消收藏'))
- }
- })
- },
- goHistory() {
- const url = this.topIndex / 1 === 1 ? 'perpetualHistory' : 'deliveryContractHistory'
- this.$router.push({
- path: `/${url}?symbol=${this.symbol}`
- });
- },
- fetchData() {
- this.closeSocket()
- _getHomeList(this.symbol).then(data => {
- // console.log(data[0])
- this.quote = data[0]
- this.$nextTick(() => {
- if (!this.sockets.quote && this.symbol) {
- this.startQuoteScoket()
- }
-
- if ((this.tab === '1' || this.tab === '3') && !this.sockets.askBid && this.symbol) {
- this.startAskBidSocket()
- }
- })
- // this.startDealsSocket()
- })
- },
- startQuoteScoket() {
- this.sockets.quote = new WebSocket(`${WS_URL}/1/${this.symbol}`)
- this.sockets.quote.onmessage = (evt) => {
- const { data } = evt
- const { code, data: _data } = JSON.parse(data)
- if (code / 1 === 0) {
- this.quote = _data[0]
- let str = _data[0] ? _data[0].close.toString() : ''
- if (str.indexOf('.') != -1) {
- this.coinLength = str.split('.')[1].length
- }
- this.updateKey++
- }
- }
- },
- startAskBidSocket() { // 委托
- this.sockets.askBid = new WebSocket(`${WS_URL}/3/${this.symbol}`)
- this.sockets.askBid.onmessage = (evt) => {
- const { data } = evt
- const { code, data: _data } = JSON.parse(data)
- if (code / 1 === 0) {
- let { asks, bids } = _data
- this.deepBuy = bids
- this.deepSell = asks
- asks = asks.sort((prev, next) => prev.price - next.price)
- bids = bids.sort((prev, next) => prev.price - next.price)
- this.asks = asks.slice(0, 17)
- this.bids = bids.reverse().slice(0, 17)
- }
- }
- },
- startDealsSocket() { // 交易
- this.sockets.deals = new WebSocket(`${WS_URL}/2/${this.symbol}`)
- this.sockets.deals.onmessage = (evt) => {
- const { data } = evt
- const { code, data: _data } = JSON.parse(data)
- if (code / 1 === 0) {
- this.deals = _data.data.slice(0, 17)
- }
- }
- },
- onRoute(path) { // 跳转汇率页面
- this.$router.push(path)
- },
- onSubmit(direction) { // TODO: 返回
- if (this.tab === '2') {
- this.popType = 'confirm'
- this.direction = direction
- _futrueOrderInit(this.symbol).then(data => {
- this.initFutrue = data
- this.show = true
- })
- return
- } else {
- let currentType = direction == 'buy' ? 'long' : 'short'
- this.$router.push(`/perpetualContract/${this.symbol}?currentType=${currentType}`)
- }
- },
- onClose() {
- this.show = false
- },
- handleTimeEnd() {
- _futrueOrderDetail(this.order_no).then(data => {
- clearTimeout(this.timeout)
- this.detailData = data
- if (data.state !== 'created') {
- this.timeout = setTimeout(() => {
- this.handleTimeEnd()
- }, 1000)
- }
- })
- },
- onOrderConfirm(e) { // 确认订单
- _futrueOrder({ ...e, symbol: this.symbol, direction: this.direction, session_token: this.initFutrue.session_token }).then(data => {
- // console.log(data)
- this.order_no = data.order_no
- _getBalance().then(data => { // 刷新余额
- this.$store.commit('user/SET_USERINFO', { balance: data.money })
- })
- _futrueOrderDetail(data.order_no).then(data => {
- this.detailData = data
- this.popType = ''
- })
- }).catch(() => {
- setTimeout(() => {
- _futrueOrderInit(this.symbol).then(data => {
- this.order_no = ''
- this.initFutrue = data
- })
- }, 1000);
- })
- },
- closeSocket() {
- this.sockets.quote && this.sockets.quote.close()
- this.sockets.deals && this.sockets.deals.close()
- this.sockets.askBid && this.sockets.askBid.close()
- this.sockets.quote = null
- this.sockets.deals = null
- this.sockets.askBid = null
- },
- onUpdate(symbol) { // 更新
- this.closeSocket()
- this.symbol = symbol;
- this.fetchData()
- },
- openRecord() {
- if (this.fromPath == 'Trade') {
- this.$router.push('/tradeRecord/' + this.symbol)
- } else {
- this.$router.push('/perpetualHistory?symbol=' + this.symbol)
- }
- console.log(this.fromPath)
- }
- },
- activated() {
- // if (!this.sockets.quote && this.symbol) {
- // this.startQuoteScoket()
- // }
- // if (this.tab === '1' && !this.sockets.askBid && this.symbol) {
- // this.startAskBidSocket()
- // }
- if (!this.symbol) {
- this.symbol = this.$route.params.symbol
- this.fetchData()
- this.closeSocket()
- }
- if (this.tab === '2' && !this.sockets.deals && this.symbol) {
- this.startDealsSocket()
- }
- this.continueOrder()
- this.kineType = this.$route.query.kineType
- },
- deactivated() {
- this.closeSocket()
- },
- beforeDestroy() {
- this.sockets.quote && this.sockets.quote.close()
- this.sockets.deals && this.sockets.deals.close()
- this.sockets.askBid && this.sockets.askBid.close()
- this.sockets.quote = null
- this.sockets.deals = null
- this.sockets.askBid = null
- },
- beforeRouteEnter(to, from, next) {
- const { params: { symbol } } = to
- console.log(symbol)
- next(vm => {
- vm.fromPath = from.name
- vm.symbol = symbol
- vm.closeSocket()
- vm.fetchData()
- })
+ name: "TrendDetails",
+ components: {
+ [Tabs.name]: Tabs,
+ [Tab.name]: Tab,
+ [Popup.name]: Popup,
+ KlineCharts,
+ PopupDelivery,
+ PopupConfirmOrder,
+ TradeHead,
+ deepChart,
+ pieChart,
+ inflowKline,
+ cylinderChart,
+ },
+ data() {
+ const arr = [];
+ for (let i = 0; i < 17; i++) {
+ arr.push({
+ id: i,
+ });
}
-}
+ return {
+ show: false,
+ direction: "buy",
+ initFutrue: {},
+ detailData: {},
+ price: "",
+ popType: "confirm", // confirm / counting
+ fixDate,
+ tab: "1", // 顶部标签
+ symbol: "",
+ quoteData: [],
+ quote: {},
+ active: 1,
+ asks: arr, // 卖
+ bids: arr, // 买
+ deals: arr, // 交易
+ sockets: {
+ quote: null,
+ deals: null,
+ askBid: null,
+ },
+ animated1: false,
+ animated2: false,
+ updateKey: 1,
+ collected: "0", // 是否自选
+ maxSell: 0, // 卖单最大
+ maxBuy: 0, // 买单最大
+ order_no: "",
+ timer: null,
+ isChangeLine: false,
+ isReturn: true, //是否有返回
+ kineType: "",
+ // updateData: {}
+ deepBuy: [],
+ deepSell: [],
+ fromPath: "",
+ };
+ },
+ computed: {
+ ...mapGetters({
+ currency: "home/currency",
+ userInfo: "user/userInfo",
+ theme: "home/theme",
+ }),
+ },
+ mounted() {
+ //this.continueOrder()
+ this.kineType = this.$route.query.kineType;
+ },
+ created() {},
+ watch: {
+ active(val) {
+ // tab切换
+ if (val / 1 === 1 || val / 1 === 3) {
+ this.sockets.deals && this.sockets.deals.close();
+ this.sockets.deals = null;
+ if (this.symbol) {
+ // 刚进来可能是null
+ this.startAskBidSocket();
+ }
+ } else {
+ this.sockets.askBid && this.sockets.askBid.close();
+ this.sockets.askBid = null;
+ this.startDealsSocket();
+ }
+ },
+ symbol() {
+ this.closeSocket();
+ },
+ },
+ methods: {
+ onChangeLine() {
+ this.isChangeLine = true;
+ },
+ continueOrder() {
+ let direction = this.$route.query.direction;
+ if (direction) {
+ this.symbol = this.$route.params.symbol;
+ this.tab = "2";
+ console.log(this.tab);
+ this.onSubmit(direction);
+ }
+ },
+ order() {
+ this.onSubmit(this.direction);
+ },
+ onTab(e) {
+ this.tab = e;
+ // this.$router.go()
+ if (e == 1) {
+ this.animated1 = true;
+ this.timer = setTimeout(() => {
+ this.animated1 = false;
+ clearTimeout(this.timer);
+ }, 200);
+ } else {
+ this.animated2 = true;
+ this.timer = setTimeout(() => {
+ this.animated2 = false;
+ clearTimeout(this.timer);
+ }, 200);
+ }
+ },
+
+ onCollect() {
+ // 收藏，取消收藏
+ let _api = _collect;
+ if (this.collected === "1") {
+ _api = _deleteCollect;
+ }
+ _api(this.symbol).then(() => {
+ this.collected = this.collected === "1" ? "0" : "1";
+ if (this.collected === "1") {
+ this.$toast.success(this.$t("收藏成功"));
+ } else {
+ this.$toast.success(this.$t("取消收藏"));
+ }
+ });
+ },
+ goHistory() {
+ const url =
+ this.topIndex / 1 === 1
+ ? "perpetualHistory"
+ : "deliveryContractHistory";
+ this.$router.push({
+ path: `/${url}?symbol=${this.symbol}`,
+ });
+ },
+ fetchData() {
+ this.closeSocket();
+ _getHomeList(this.symbol).then((data) => {
+ // console.log(data[0])
+ this.quote = data[0];
+ this.$nextTick(() => {
+ if (!this.sockets.quote && this.symbol) {
+ this.startQuoteScoket();
+ }
+
+ if (
+ (this.tab === "1" || this.tab === "3") &&
+ !this.sockets.askBid &&
+ this.symbol
+ ) {
+ this.startAskBidSocket();
+ }
+ });
+ // this.startDealsSocket()
+ });
+ },
+ startQuoteScoket() {
+ this.sockets.quote = new WebSocket(`${WS_URL}/1/${this.symbol}`);
+ this.sockets.quote.onmessage = (evt) => {
+ const { data } = evt;
+ const { code, data: _data } = JSON.parse(data);
+ if (code / 1 === 0) {
+ this.quote = _data[0];
+ let str = _data[0] ? _data[0].close.toString() : "";
+ if (str.indexOf(".") != -1) {
+ this.coinLength = str.split(".")[1].length;
+ }
+ this.updateKey++;
+ }
+ };
+ },
+ startAskBidSocket() {
+ // 委托
+ this.sockets.askBid = new WebSocket(`${WS_URL}/3/${this.symbol}`);
+ this.sockets.askBid.onmessage = (evt) => {
+ const { data } = evt;
+ const { code, data: _data } = JSON.parse(data);
+ if (code / 1 === 0) {
+ let { asks, bids } = _data;
+ this.deepBuy = bids;
+ this.deepSell = asks;
+ asks = asks.sort((prev, next) => prev.price - next.price);
+ bids = bids.sort((prev, next) => prev.price - next.price);
+ this.asks = asks.slice(0, 17);
+ this.bids = bids.reverse().slice(0, 17);
+ }
+ };
+ },
+ startDealsSocket() {
+ // 交易
+ this.sockets.deals = new WebSocket(`${WS_URL}/2/${this.symbol}`);
+ this.sockets.deals.onmessage = (evt) => {
+ const { data } = evt;
+ const { code, data: _data } = JSON.parse(data);
+ if (code / 1 === 0) {
+ this.deals = _data.data.slice(0, 17);
+ }
+ };
+ },
+ onRoute(path) {
+ // 跳转汇率页面
+ this.$router.push(path);
+ },
+ onSubmit(direction) {
+ // TODO: 返回
+ if (this.tab === "2") {
+ this.popType = "confirm";
+ this.direction = direction;
+ _futrueOrderInit(this.symbol).then((data) => {
+ this.initFutrue = data;
+ this.show = true;
+ });
+ return;
+ } else {
+ let currentType = direction == "buy" ? "long" : "short";
+ this.$router.push(
+ `/perpetualContract/${this.symbol}?currentType=${currentType}`
+ );
+ }
+ },
+ onClose() {
+ this.show = false;
+ },
+ handleTimeEnd() {
+ _futrueOrderDetail(this.order_no).then((data) => {
+ clearTimeout(this.timeout);
+ this.detailData = data;
+ if (data.state !== "created") {
+ this.timeout = setTimeout(() => {
+ this.handleTimeEnd();
+ }, 1000);
+ }
+ });
+ },
+ onOrderConfirm(e) {
+ // 确认订单
+ _futrueOrder({
+ ...e,
+ symbol: this.symbol,
+ direction: this.direction,
+ session_token: this.initFutrue.session_token,
+ })
+ .then((data) => {
+ // console.log(data)
+ this.order_no = data.order_no;
+ _getBalance().then((data) => {
+ // 刷新余额
+ this.$store.commit("user/SET_USERINFO", { balance: data.money });
+ });
+ _futrueOrderDetail(data.order_no).then((data) => {
+ this.detailData = data;
+ this.popType = "";
+ });
+ })
+ .catch(() => {
+ setTimeout(() => {
+ _futrueOrderInit(this.symbol).then((data) => {
+ this.order_no = "";
+ this.initFutrue = data;
+ });
+ }, 1000);
+ });
+ },
+ closeSocket() {
+ this.sockets.quote && this.sockets.quote.close();
+ this.sockets.deals && this.sockets.deals.close();
+ this.sockets.askBid && this.sockets.askBid.close();
+ this.sockets.quote = null;
+ this.sockets.deals = null;
+ this.sockets.askBid = null;
+ },
+ onUpdate(symbol) {
+ // 更新
+ this.closeSocket();
+ this.symbol = symbol;
+ this.fetchData();
+ },
+ openRecord() {
+ if (this.fromPath == "Trade") {
+ this.$router.push("/tradeRecord/" + this.symbol);
+ } else {
+ this.$router.push("/perpetualHistory?symbol=" + this.symbol);
+ }
+ console.log(this.fromPath);
+ },
+ },
+ activated() {
+ // if (!this.sockets.quote && this.symbol) {
+ // this.startQuoteScoket()
+ // }
+ // if (this.tab === '1' && !this.sockets.askBid && this.symbol) {
+ // this.startAskBidSocket()
+ // }
+ if (!this.symbol) {
+ this.symbol = this.$route.params.symbol;
+ this.fetchData();
+ this.closeSocket();
+ }
+ if (this.tab === "2" && !this.sockets.deals && this.symbol) {
+ this.startDealsSocket();
+ }
+ this.continueOrder();
+ this.kineType = this.$route.query.kineType;
+ },
+ deactivated() {
+ this.closeSocket();
+ },
+ beforeDestroy() {
+ this.sockets.quote && this.sockets.quote.close();
+ this.sockets.deals && this.sockets.deals.close();
+ this.sockets.askBid && this.sockets.askBid.close();
+ this.sockets.quote = null;
+ this.sockets.deals = null;
+ this.sockets.askBid = null;
+ },
+ beforeRouteEnter(to, from, next) {
+ const {
+ params: { symbol },
+ } = to;
+ console.log(symbol);
+ next((vm) => {
+ vm.fromPath = from.name;
+ vm.symbol = symbol;
+ vm.closeSocket();
+ vm.fetchData();
+ });
+ },
+};
</script>
<style lang="scss" scoped>
@import "../../assets/init.scss";
-
@keyframes animate1 {
- 0% {
- opacity: 1;
- transform: translate3d(100%, 0, 0);
- }
+ 0% {
+ opacity: 1;
+ transform: translate3d(100%, 0, 0);
+ }
- // 40% {
- // opacity: 1;
- // transform: translate3d(50%, 0, 0);
- // }
- 100% {
- opacity: 1;
- transform: translate3d(0%, 0, 0);
- }
+ // 40% {
+ // opacity: 1;
+ // transform: translate3d(50%, 0, 0);
+ // }
+ 100% {
+ opacity: 1;
+ transform: translate3d(0%, 0, 0);
+ }
}
@keyframes animate2 {
- 0% {
- opacity: 1;
- transform: translate3d(-100%, 0, 0);
- }
+ 0% {
+ opacity: 1;
+ transform: translate3d(-100%, 0, 0);
+ }
- // 40% {
- // opacity: 1;
- // transform: translate3d(50%, 0, 0);
- // }
- 100% {
- opacity: 1;
- transform: translate3d(0%, 0, 0);
- }
+ // 40% {
+ // opacity: 1;
+ // transform: translate3d(50%, 0, 0);
+ // }
+ 100% {
+ opacity: 1;
+ transform: translate3d(0%, 0, 0);
+ }
}
.slide1 {
- animation: animate1 200ms linear;
+ animation: animate1 200ms linear;
}
.slide2 {
- animation: animate2 200ms linear;
+ animation: animate2 200ms linear;
}
.tabBtn {
- border: 2px solid #EAEDF2;
- border-radius: 9px;
- color: #868D9A;
- ;
+ border: 2px solid #eaedf2;
+ border-radius: 9px;
+ color: #868d9a;
}
.activeBtn {
- @include themify() {
- background: themed("btn_main");
- }
+ @include themify() {
+ background: themed("btn_main");
+ }
- color: #fff;
- border: none;
+ color: #fff;
+ border: none;
}
.pb-180 {
- ::v-deep .van-tab {
- flex: initial;
- padding: 0 32px;
- }
+ ::v-deep .van-tab {
+ flex: initial;
+ padding: 0 32px;
+ }
- ::v-deep .van-tab__text--ellipsis {
- padding: 14px 0;
- }
+ ::v-deep .van-tab__text--ellipsis {
+ padding: 14px 0;
+ }
- ::v-deep .van-tabs__line {
- width: 160px;
- }
+ ::v-deep .van-tabs__line {
+ width: 160px;
+ }
}
.buttonSafe {
- bottom: calc(constant(safe-area-inset-bottom));
- bottom: calc(env(safe-area-inset-bottom));
+ bottom: calc(constant(safe-area-inset-bottom));
+ bottom: calc(env(safe-area-inset-bottom));
}
-
.trend-detail {
- .tabBtn {
- @include themify() {
- border: 2px solid themed("border_color");
- }
+ .tabBtn {
+ @include themify() {
+ border: 2px solid themed("border_color");
}
+ }
- ::v-deep .van-tabs__nav {
- @include themify() {
- background: themed("main_background") !important;
- }
+ ::v-deep .van-tabs__nav {
+ @include themify() {
+ background: themed("main_background") !important;
}
+ }
- ::v-deep .van-tab--active {
- @include themify() {
- color: themed("text_color");
- }
+ ::v-deep .van-tab--active {
+ @include themify() {
+ color: themed("text_color");
}
+ }
- ul li {
- @include themify() {
- background: themed("main_background");
- }
+ ul li {
+ @include themify() {
+ background: themed("main_background");
}
+ }
- .activeBtn {
- border: none !important;
- }
-
+ .activeBtn {
+ border: none !important;
+ }
}
-
.deep-chart-box {
- padding-left: 30px;
- overflow: hidden;
+ padding-left: 30px;
+ overflow: hidden;
}
.capital-box {
- padding: 30px 30px;
+ padding: 30px 30px;
- .capital-flows {
- display: flex;
- align-items: center;
+ .capital-flows {
+ display: flex;
+ align-items: center;
- .title {
- color: #ECF0F8;
- font-size: 16px;
- font-weight: bold;
- margin-right: 10px;
- display: flex;
- }
+ .title {
+ color: #ecf0f8;
+ font-size: 16px;
+ font-weight: bold;
+ margin-right: 10px;
+ display: flex;
+ }
+ }
+
+ .tab-box {
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: 20px;
+
+ .tab-item {
+ padding: 15px 22px;
+ background: #171a27;
+ border-radius: 2px;
+ color: #ffffff;
+ font-size: 30px;
+ margin-right: 30px;
+ margin-bottom: 20px;
+ font-size: 14px;
+ }
+ }
+
+ .pie-box {
+ background: #161d2b;
+ padding: 50px 0;
+ }
+
+ .order-box {
+ border: 1px dashed #3c3f55;
+ border-radius: 3px;
+ margin-top: 20px;
+ color: #c5cbd8;
+
+ .order-header {
+ display: flex;
}
- .tab-box {
- display: flex;
- flex-wrap: wrap;
- margin-top: 20px;
+ .flex-item {
+ flex: 1;
+ text-align: center;
+ padding: 20px 0;
+ }
+ }
- .tab-item {
- padding: 15px 22px;
- background: #171A27;
- border-radius: 2px;
- color: #FFFFFF;
- font-size: 30px;
- margin-right: 30px;
- margin-bottom: 20px;
- font-size: 14px;
- }
+ .capital-title {
+ padding-top: 30px;
+
+ .title {
+ color: #ecf0f8;
+ font-size: 30px;
+ font-weight: bold;
+ margin-right: 10px;
}
- .pie-box {
- background: #161D2B;
- padding: 50px 0;
+ .text {
+ color: #c5cbd8;
+ font-size: 14px;
+ margin-top: 10px;
}
-
- .order-box {
- border: 1px dashed #3C3F55;
- border-radius: 3px;
- margin-top: 20px;
- color: #C5CBD8;
-
- .order-header {
- display: flex;
- }
-
- .flex-item {
- flex: 1;
- text-align: center;
- padding: 20px 0;
-
- }
- }
-
- .capital-title {
- padding-top: 30px;
-
- .title {
- color: #ECF0F8;
- font-size: 30px;
- font-weight: bold;
- margin-right: 10px;
- }
-
- .text {
- color: #C5CBD8;
- font-size: 14px;
- margin-top: 10px;
- }
- }
+ }
}
.buy-sell-box {
+ display: flex;
+ justify-content: center;
+ margin: 30px 0px;
+
+ .buy-item {
display: flex;
- justify-content: center;
- margin: 30px 0px;
- .buy-item {
- display: flex;
-
- @include themify() {
- color: themed("text_color");
- }
-
- .bg-line {
- width: 40px;
- height: 40px;
- background: #D9001B;
- border-radius: 5px;
- margin-right: 10px;
- }
+ @include themify() {
+ color: themed("text_color");
}
- .sell-item {
- margin-left: 30px;
- display: flex;
-
- @include themify() {
- color: themed("text_color");
- }
-
- .bg-line {
- width: 40px;
- height: 40px;
- background: #2EBD85;
- border-radius: 5px;
- margin-right: 10px;
- }
+ .bg-line {
+ width: 40px;
+ height: 40px;
+ background: #d9001b;
+ border-radius: 5px;
+ margin-right: 10px;
}
+ }
+
+ .sell-item {
+ margin-left: 30px;
+ display: flex;
+
+ @include themify() {
+ color: themed("text_color");
+ }
+
+ .bg-line {
+ width: 40px;
+ height: 40px;
+ background: #2ebd85;
+ border-radius: 5px;
+ margin-right: 10px;
+ }
+ }
}
.bg-white {
- .capital-flows {
- display: flex;
- align-items: center;
+ .capital-flows {
+ display: flex;
+ align-items: center;
- .title {
- color: #000;
- font-size: 16px;
- font-weight: bold;
- margin-right: 10px;
- display: flex;
- }
+ .title {
+ color: #000;
+ font-size: 16px;
+ font-weight: bold;
+ margin-right: 10px;
+ display: flex;
+ }
+ }
+
+ .tab-box {
+ .tab-item {
+ background: #f7f8fa;
+ color: #000;
+ font-size: 14px;
+ }
+ }
+
+ .pie-box {
+ background: #fff;
+ padding: 50px 0;
+ }
+
+ .order-box {
+ border: 1px dashed #000;
+ border-radius: 3px;
+ margin-top: 20px;
+ color: #000;
+ }
+
+ .capital-title {
+ padding-top: 30px;
+
+ .title {
+ color: #000;
+ font-size: 30px;
+ font-weight: bold;
+ margin-right: 10px;
}
-
- .tab-box {
- .tab-item {
- background: #f7f8fa;
- color: #000;
- font-size: 14px;
- }
+ .text {
+ color: #000;
+ font-size: 14px;
+ margin-top: 10px;
}
-
- .pie-box {
- background: #fff;
- padding: 50px 0;
- }
-
- .order-box {
- border: 1px dashed #000;
- border-radius: 3px;
- margin-top: 20px;
- color: #000;
- }
-
- .capital-title {
- padding-top: 30px;
-
- .title {
- color: #000;
- font-size: 30px;
- font-weight: bold;
- margin-right: 10px;
- }
-
- .text {
- color: #000;
- font-size: 14px;
- margin-top: 10px;
- }
- }
+ }
}
::v-deep .van-popup {
- @include themify() {
- background: themed("main_background");
- }
+ @include themify() {
+ background: themed("main_background");
+ }
}
.tabContent {
- ::v-deep .van-tabs__wrap {
- height: 100% !important;
- }
+ ::v-deep .van-tabs__wrap {
+ height: 100% !important;
+ }
}
</style>
--
Gitblit v1.9.3