<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="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>
|
</div>
|
<div class="flex items-center">
|
<img :src="require(`@/assets/image/icon-star${collected === '1' ? '_active': ''}.png`)"
|
class="w-30 h-30 mr-10 ml-20" @click="onCollect" />
|
<img src="../../assets/image/public/record.png" alt="record-img" class="w-32 h-35 pl-30 "
|
@click="goHistory" />
|
</div>
|
</div> -->
|
<trade-head
|
@openRecord="openRecord"
|
:backFunc="() => $router.push('/')"
|
:symbol="symbol=='mother'?'ORBITAL':(symbol=='zkp'?'ZYD':(symbol=='dia'?'DEA':(symbol=='xeta'?'AXFD':(symbol=='og'?'SMK':(symbol=='fil'?'FPP':(symbol=='gas'?'ASK':(symbol=='axs'?'JKRT':symbol.toUpperCase())))))))"
|
: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>
|
<!-- 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() }})</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>
|
</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="capital-box">
|
<div class="capital-flows">
|
<span class="title">资金流向分析</span><van-icon name="warning-o" />
|
</div>
|
<div class="tab-box">
|
<div class="tab-item" v-for="(item, index) in 10">
|
15M
|
</div>
|
</div>
|
<div class="pie-box">
|
<pie-chart></pie-chart>
|
</div>
|
<div class="order-box">
|
<div class="order-header">
|
<div class="flex-item">订单类型</div>
|
<div class="flex-item">买入</div>
|
<div class="flex-item">卖出</div>
|
<div class="flex-item">净流入</div>
|
</div>
|
<div class="order-main flex" v-for="(item, index) in 4" :key="index">
|
<div class="flex-item">大单</div>
|
<div class="flex-item text-red">9.3720</div>
|
<div class="flex-item text-red">3.0200</div>
|
<div class="flex-item text-green">6.3400</div>
|
</div>
|
</div>
|
|
<div class="capital-title">
|
<span class="title">5*24小时大单流入（{{ symbol.toUpperCase() }}）</span>
|
<div class="text">5日主力净流入 -348.9411</div>
|
</div>
|
<div class="cylinder-kline">
|
<cylinder-chart></cylinder-chart>
|
</div>
|
<div class="capital-title">
|
<span class="title">24小时资金流入（{{ symbol.toUpperCase() }}）</span>
|
</div>
|
<div class="inflow-kline">
|
<inflow-kline></inflow-kline>
|
</div>
|
</div>
|
</van-tab> -->
|
<!-- <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>
|
<div class="px-20 py-20 font-32 text-grey">
|
{{ $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-540 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 { fixDate } from "@/utils/utis";
|
import { WS_URL } from "@/config";
|
import PopupDelivery from "@/components/popup-delivery";
|
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() {
|
// 委托
|
if(this.symbol=='orbital'){
|
this.symbol = 'mother'
|
}
|
if(this.symbol=='zyd'){
|
this.symbol = 'zkp'
|
}
|
if(this.symbol=='dea'){
|
this.symbol = 'dia'
|
}
|
if(this.symbol=='axfd'){
|
this.symbol = 'xeta'
|
}
|
if(this.symbol=='smk'){
|
this.symbol = 'og'
|
}
|
if(this.symbol=='fpp'){
|
this.symbol = 'fil'
|
}
|
if(this.symbol=='ask'){
|
this.symbol = 'gas'
|
}
|
if(this.symbol=='jkrt'){
|
this.symbol = 'axs'
|
}
|
if(this.symbol=='egt'){
|
this.symbol = 'ethw'
|
}
|
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);
|
}
|
|
// 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);
|
}
|
|
// 40% {
|
// opacity: 1;
|
// transform: translate3d(50%, 0, 0);
|
// }
|
100% {
|
opacity: 1;
|
transform: translate3d(0%, 0, 0);
|
}
|
}
|
|
.slide1 {
|
animation: animate1 200ms linear;
|
}
|
|
.slide2 {
|
animation: animate2 200ms linear;
|
}
|
|
.tabBtn {
|
border: 2px solid #eaedf2;
|
border-radius: 9px;
|
color: #868d9a;
|
}
|
|
.activeBtn {
|
@include themify() {
|
background: themed("btn_main");
|
}
|
|
color: #fff;
|
border: none;
|
}
|
|
.pb-180 {
|
::v-deep .van-tab {
|
flex: initial;
|
padding: 0 32px;
|
}
|
|
::v-deep .van-tab__text--ellipsis {
|
padding: 14px 0;
|
}
|
|
::v-deep .van-tabs__line {
|
width: 160px;
|
}
|
}
|
|
.buttonSafe {
|
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");
|
}
|
}
|
|
::v-deep .van-tabs__nav {
|
@include themify() {
|
background: themed("main_background") !important;
|
}
|
}
|
|
::v-deep .van-tab--active {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
ul li {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
.activeBtn {
|
border: none !important;
|
}
|
}
|
|
.deep-chart-box {
|
padding-left: 30px;
|
overflow: hidden;
|
}
|
|
.capital-box {
|
padding: 30px 30px;
|
|
.capital-flows {
|
display: flex;
|
align-items: center;
|
|
.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;
|
}
|
|
.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;
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
|
.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;
|
|
.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;
|
}
|
|
.text {
|
color: #000;
|
font-size: 14px;
|
margin-top: 10px;
|
}
|
}
|
}
|
|
::v-deep .van-popup {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
.tabContent {
|
::v-deep .van-tabs__wrap {
|
height: 100% !important;
|
}
|
}
|
</style>
|
