You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
953 lines
21 KiB
953 lines
21 KiB
<template>
|
|
<view class="main">
|
|
<!-- nav -->
|
|
<navigation>{{ symbol.pair }}</navigation>
|
|
<!-- 价格百分比 -->
|
|
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="header">
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef H5 -->
|
|
<view class="headerH5">
|
|
<!-- #endif -->
|
|
|
|
<view class="top">
|
|
<!-- 实时价格 -->
|
|
<text class="price">{{parseFloat(marketDetail.close).toFixed(marketDetail.baseCoinScale)}}</text>
|
|
<!-- 百分比,根据数据正负判断颜色 -->
|
|
<text class="percent"
|
|
:class="{ rise: marketDetail.percent>=0 }">{{marketDetail.percent>=0?'+'+marketDetail.percent:marketDetail.percent}}%</text>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="left">
|
|
<view class="title">{{ i18n.Highest }}</view>
|
|
<view class="value">{{marketDetail.high}}</view>
|
|
</view>
|
|
<view class="center">
|
|
<view class="title">{{ i18n.Lowest }}</view>
|
|
<view class="value">{{marketDetail.low}}</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="title">{{ i18n.Amount }}</view>
|
|
<view class="value">{{marketDetail.amount}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tab">
|
|
<view class="item" :class="{ select: type === '1min' }" @click="onChangeType('1min')">1min
|
|
</view>
|
|
<view class="item" :class="{ select: type === '5min' }" @click="onChangeType('5min')">5min
|
|
</view>
|
|
<view class="item" :class="{ select: type === '15min' }" @click="onChangeType('15min')">15min
|
|
</view>
|
|
<view class="item" :class="{ select: type === '30min' }" @click="onChangeType('30min')">30min
|
|
</view>
|
|
<view class="item" :class="{ select: type === '60min' }" @click="onChangeType('60min')">60min
|
|
</view>
|
|
<view class="item" :class="{ select: type === '1day' }" @click="onChangeType('1day')">1day
|
|
</view>
|
|
<view class="item" :class="{ select: type === '1week' }" @click="onChangeType('1week')">1week
|
|
</view>
|
|
<view class="item" :class="{ select: type === '1mon' }" @click="onChangeType('1mon')">1mon
|
|
</view>
|
|
</view>
|
|
<!-- K线图 -->
|
|
<view class="kline" id="kline" :kdata="kdata" :change:kdata="klineE.receive"
|
|
style="height:500rpx;width: 100%;position: relative; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
|
|
|
|
</view>
|
|
<!-- 买卖挂牌表 -->
|
|
<view class="MarketTrades">
|
|
<view class="headTitle">Market trades</view>
|
|
<view class="table">
|
|
<view class="box">
|
|
<view class="title">
|
|
<view class="quantity">{{ i18n.Quantity }}</view>
|
|
<view class="price">{{ i18n.BuyingPrice }}</view>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item" v-for="(item, index) in bboList.buy" :key="index">
|
|
<text class="price">{{parseFloat(item.size).toFixed(6)}}</text>
|
|
<text class="num buy">{{ item.price }}</text>
|
|
<view class="buybg" :style="`width: ${item.size/sum.buy*100 }%;`"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="box">
|
|
<view class="title">
|
|
<view class="quantity">{{ i18n.Quantity }}</view>
|
|
<view class="price">{{ i18n.SellPrice }}</view>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item" v-for="(item, index) in bboList.sell" :key="index">
|
|
<text class="price">{{parseFloat(item.size).toFixed(6)}}</text>
|
|
<text class="num sell">{{ item.price }}</text>
|
|
<view class="sellbg" :style="`width: ${item.size/sum.sell*100 }%;`"></view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btn">
|
|
<!-- open按钮 -->
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" @click="btnClick('buy')">
|
|
{{ i18n.open }}
|
|
</u-button>
|
|
<!-- close按钮 -->
|
|
<u-button class="button" color="#F4506A" throttleTime="500" @click="btnClick('sell')">
|
|
{{ i18n.close }}
|
|
</u-button>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ktest from '@/utils/ktest.js'
|
|
export default {
|
|
name: "trade",
|
|
components: {
|
|
ktest
|
|
},
|
|
data() {
|
|
return {
|
|
kdata: {},
|
|
type: '1min',
|
|
symbol: null,
|
|
marketDetail: {
|
|
close: 0,
|
|
usdRate: 0
|
|
},
|
|
bboList: {},
|
|
sum: {}
|
|
|
|
};
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("markets");
|
|
},
|
|
},
|
|
onLoad() {
|
|
//this.kdata = this.splitData(ktest.JSON);
|
|
// console.log(this.kdata, 1111)
|
|
},
|
|
onShow() {
|
|
this.into();
|
|
|
|
},
|
|
onHide() {
|
|
this.websock.closeSocket();
|
|
},
|
|
onUnload() {
|
|
this.websock.closeSocket();
|
|
},
|
|
|
|
methods: {
|
|
|
|
into() {
|
|
this.symbol = uni.getStorageSync('symbol');
|
|
if (!this.symbol) {
|
|
// #ifdef H5
|
|
history.back()
|
|
// #endif
|
|
|
|
// #ifdef APP-PLUS
|
|
uni.navigateBack()
|
|
// #endif
|
|
}
|
|
this.getMarketDetail();
|
|
this.initWebSocket();
|
|
this.getBboList()
|
|
},
|
|
statisticsSum() {
|
|
this.sum.buy = 0
|
|
this.sum.sell = 0
|
|
console.log(this.sum.buy);
|
|
|
|
for (var buy in this.bboList.buy) {
|
|
if (buy >= 8) {
|
|
break;
|
|
}
|
|
this.sum.buy += parseFloat(this.bboList.buy[buy].size)
|
|
}
|
|
for (var sell in this.bboList.sell) {
|
|
if (sell >= 8) {
|
|
break;
|
|
}
|
|
this.sum.sell += parseFloat(this.bboList.sell[sell].size)
|
|
}
|
|
|
|
},
|
|
onChangeType(type) {
|
|
this.websock.unSubKline(this.type,this.symbol.symbol);
|
|
this.type = type
|
|
this.websock.subKHistory(this.type,this.symbol.symbol);
|
|
this.websock.subKline(this.type,this.symbol.symbol);
|
|
},
|
|
|
|
formateDate(time) {
|
|
// var date = new Date(parseInt(time * 1000));
|
|
// var Y = date.getFullYear();
|
|
// var M = '-' + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
|
|
// var D = '-' + date.getDate();
|
|
// var h = ' ' + date.getHours();
|
|
// var m = ':' + date.getMinutes();
|
|
// var s = ':' + date.getSeconds();
|
|
// var time;
|
|
// if (this.type.indexOf('min') > -1) {
|
|
// time = Y + M + D + h + m;
|
|
// } else if (this.type === '1day' || this.type === '1week') {
|
|
// time = Y + M + D;
|
|
// } else {
|
|
// time = Y + M;
|
|
// }
|
|
|
|
// return time;
|
|
var time;
|
|
time=this.$index.formatyymmddhhmmss(parseInt(time * 1000))
|
|
if (this.type === '1mon' ) {
|
|
time = time.split(' ')[0];
|
|
time=time.substring(time.indexOf('/')+1,time.length)
|
|
} else if (this.type === '1day' || this.type === '1week') {
|
|
time = time.split(' ')[0];
|
|
}
|
|
return time;
|
|
},
|
|
getBboList() {
|
|
const bboList = this.$api.bboList({
|
|
"symbol": this.symbol.symbol
|
|
});
|
|
bboList.then(res => {
|
|
console.log(9999999,res)
|
|
this.bboList = res
|
|
this.statisticsSum();
|
|
})
|
|
.catch(e => {
|
|
console.log(e)
|
|
uni.showToast({
|
|
title: e,
|
|
icon: 'none',
|
|
duration: 2500
|
|
})
|
|
})
|
|
},
|
|
getMarketDetail() {
|
|
const marketDetail = this.$api.marketDetail({
|
|
"symbol": this.symbol.symbol
|
|
});
|
|
marketDetail.then(res => {
|
|
this.marketDetail = res
|
|
|
|
})
|
|
.catch(e => {
|
|
console.log(e)
|
|
uni.showToast({
|
|
title: e,
|
|
icon: 'none',
|
|
duration: 2500
|
|
})
|
|
})
|
|
},
|
|
initWebSocket() {
|
|
|
|
|
|
this.websock = new this.$websocket(this.$constant.WSSURL) // xxx 表示接口地址URL
|
|
|
|
|
|
var that = this
|
|
this.websock.getWebSocketMsg(data => {
|
|
|
|
if (data.channel === 'conn') {
|
|
that.websockId = data.data
|
|
that.websock.setId(data.data);
|
|
that.websock.subBbo(that.symbol.symbol)
|
|
that.websock.subDetail(that.symbol.symbol)
|
|
that.websock.subKHistory(that.type,that.symbol.symbol)
|
|
that.websock.subKline(that.type,that.symbol.symbol)
|
|
|
|
} else if (data.channel === 'market.pairsgroup') {
|
|
that.symbolList = data.data.USDT;
|
|
} else if (data.channel === 'market.' + that.symbol.symbol + '.bbo') {
|
|
that.bboList = data.data;
|
|
that.statisticsSum();
|
|
} else if (data.channel === 'market.' + that.symbol.symbol + '.trade') {
|
|
that.tradeList = data.data;
|
|
} else if (data.channel === 'market.' + that.symbol.symbol + '.detail') {
|
|
that.marketDetail = data.data;
|
|
} else if (data.channel === 'market.' + that.symbol.symbol + ".kline." + that.type) {
|
|
if (data.event === 'req') {
|
|
that.kdata = that.splitData(data.data)
|
|
} else {
|
|
that.upkline(data.data)
|
|
}
|
|
|
|
}
|
|
});
|
|
},
|
|
|
|
upkline(data) {
|
|
|
|
if (data.id === this.kdata.values[this.kdata.values.length - 1][5]) {
|
|
this.kdata.values.pop();
|
|
this.kdata.volumes.pop();
|
|
this.kdata.values.push([data.open, data.close, data.low, data.high, data.kTime, data.id]);
|
|
this.kdata.volumes.push([this.kdata.volumes.length, data.high, data.open > data.close ? 1 : -1])
|
|
} else {
|
|
this.kdata.values.push([data.open, data.close, data.low, data.high, data.kTime, data.id]);
|
|
this.kdata.volumes.push([this.kdata.volumes.length, this.kdata.volumes.length, data.high, data.open >
|
|
data.close ? 1 : -1
|
|
])
|
|
this.kdata.categoryData.push(this.formateDate(data.kTime));
|
|
}
|
|
},
|
|
splitData(rawData) {
|
|
let categoryData = [];
|
|
let values = [];
|
|
let volumes = [];
|
|
for (let i = 0; i < rawData.length; i++) {
|
|
var ldata = rawData[i];
|
|
categoryData.push(this.formateDate(ldata.kTime));
|
|
|
|
values.push([ldata.open, ldata.close, ldata.low, ldata.high, ldata.kTime, ldata.id]);
|
|
volumes.push([i, ldata.high, ldata.open > ldata.close ? 1 : -1]);
|
|
}
|
|
return {
|
|
categoryData: categoryData,
|
|
values: values,
|
|
volumes: volumes,
|
|
webSocketChannel: 'market.' + this.symbol.symbol + ".kline." + this.type
|
|
};
|
|
|
|
|
|
},
|
|
depthChange(e) {
|
|
console.log(e);
|
|
},
|
|
goto(page) {
|
|
let url = '';
|
|
switch (page) {
|
|
case 'kLine':
|
|
url = '/pages/markets/kLine'
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
uni.navigateTo({
|
|
url,
|
|
});
|
|
},
|
|
btnClick(type) {
|
|
uni.setStorageSync('orderType',type);
|
|
// #ifdef H5
|
|
history.back()
|
|
// #endif
|
|
|
|
// #ifdef APP-PLUS
|
|
uni.navigateBack()
|
|
// #endif
|
|
}
|
|
|
|
},
|
|
}
|
|
</script>
|
|
<script module="klineE" lang="renderjs">
|
|
let kline
|
|
export default {
|
|
data() {
|
|
return {
|
|
start: 98,
|
|
end: 100
|
|
|
|
};
|
|
},
|
|
mounted() {
|
|
|
|
if (typeof window.echarts === 'function') {
|
|
//this.initEcharts()
|
|
} else {
|
|
// // 动态引入较大类库避免影响页面展示
|
|
// const script = document.createElement('script');
|
|
// //this.kdata=this.splitData(this.kdata);
|
|
// // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
|
|
// script.src = './static/echarts.js';
|
|
// script.onload = this.initEcharts.bind(this);
|
|
// document.head.appendChild(script);
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
receive(newValue, oldValue, ownerVm, vm) {
|
|
|
|
if (this.channel != newValue.webSocketChannel) {
|
|
this.is = false
|
|
}
|
|
this.channel = newValue.webSocketChannel
|
|
|
|
const script = document.createElement('script');
|
|
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
|
|
script.src = './static/echarts.js';
|
|
script.onload = this.upData.bind(this);
|
|
document.head.appendChild(script);
|
|
|
|
|
|
},
|
|
|
|
calculateMA(dayCount, data) {
|
|
var result = [];
|
|
for (var i = 0, len = data.values.length; i < len; i++) {
|
|
if (i < dayCount) {
|
|
result.push('-');
|
|
continue;
|
|
}
|
|
var sum = 0;
|
|
for (var j = 0; j < dayCount; j++) {
|
|
sum += data.values[i - j][1];
|
|
}
|
|
result.push(+(sum / dayCount).toFixed(3));
|
|
}
|
|
return result;
|
|
},
|
|
upData(myChart) {
|
|
const upColor = '#00C873';
|
|
const downColor = '#FF3750';
|
|
var chartDom = document.getElementById('kline');
|
|
if (!this.is) {
|
|
console.log("this.is11111111", this.is)
|
|
this.myChart = echarts.init(chartDom);
|
|
if(this.kdata.categoryData.length<100){
|
|
this.start=50
|
|
this.end=100
|
|
}else if(this.kdata.categoryData.length<200){
|
|
this.start=85
|
|
this.end=100
|
|
}else{
|
|
this.start=98
|
|
this.end=100
|
|
}
|
|
|
|
}else{
|
|
console.log(this.myChart.getModel().option.dataZoom[0].start)
|
|
this.start=this.myChart.getModel().option.dataZoom[0].start
|
|
this.end=this.myChart.getModel().option.dataZoom[0].end
|
|
}
|
|
|
|
|
|
this.is = true;
|
|
var option;
|
|
this.myChart.setOption(
|
|
(option = {
|
|
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
animation: false,
|
|
type: 'cross',
|
|
lineStyle: {
|
|
width: 1,
|
|
opacity: 3
|
|
}
|
|
}
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: this.kdata.categoryData,
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
show: false,
|
|
onZero: false
|
|
},
|
|
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
min: 'dataMin',
|
|
max: 'dataMax',
|
|
axisPointer: {
|
|
z: 100
|
|
}
|
|
},
|
|
{
|
|
type: 'category',
|
|
gridIndex: 1,
|
|
data: this.kdata.categoryData,
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
onZero: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
min: 'dataMin',
|
|
max: 'dataMax'
|
|
}
|
|
],
|
|
yAxis: [{
|
|
position: 'right',
|
|
scale: true,
|
|
|
|
axisLine: {
|
|
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: true
|
|
},
|
|
splitArea: {
|
|
show: false, // areaStyle: {
|
|
// color: 'transparency',
|
|
// },
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
// 使用深浅的间隔色
|
|
color: ['#211F32']
|
|
}
|
|
}
|
|
},
|
|
{
|
|
scale: true,
|
|
gridIndex: 1,
|
|
splitNumber: 2,
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
|
|
|
|
visualMap: {
|
|
show: false,
|
|
seriesIndex: 5,
|
|
dimension: 2,
|
|
pieces: [{
|
|
value: 1,
|
|
color: downColor
|
|
},
|
|
{
|
|
value: -1,
|
|
color: upColor
|
|
}
|
|
]
|
|
},
|
|
grid: [{
|
|
top: '8%',
|
|
left: '10rpx',
|
|
right: '50rpx',
|
|
height: '60%',
|
|
|
|
backgroundColor: 'transparent',
|
|
},
|
|
{
|
|
left: '10rpx',
|
|
right: '50rpx',
|
|
top: '80%',
|
|
height: '16%'
|
|
}
|
|
],
|
|
|
|
dataZoom: [{
|
|
type: 'inside',
|
|
start: this.start,
|
|
end: this.end
|
|
},
|
|
{
|
|
show: false,
|
|
xAxisIndex: [0, 1],
|
|
type: 'slider',
|
|
top: '85%',
|
|
start: this.start,
|
|
end: this.end
|
|
}
|
|
],
|
|
series: [{
|
|
|
|
type: 'candlestick',
|
|
data: this.kdata.values,
|
|
itemStyle: {
|
|
color: upColor,
|
|
color0: downColor,
|
|
borderColor: undefined,
|
|
borderColor0: undefined
|
|
},
|
|
markLine: {
|
|
symbol: ['none', 'none'],
|
|
data: [
|
|
|
|
|
|
{
|
|
name: 'max line on close',
|
|
type: 'max',
|
|
valueDim: 'highest'
|
|
}
|
|
]
|
|
},
|
|
|
|
tooltip: {
|
|
formatter: function(param) {
|
|
param = param[0];
|
|
return [
|
|
'Date: ' + param.name +
|
|
'<hr size=1 style="margin: 3px 0">',
|
|
'Open: ' + param.data[0] + '<br/>',
|
|
'Close: ' + param.data[1] + '<br/>',
|
|
'Lowest: ' + param.data[2] + '<br/>',
|
|
'Highest: ' + param.data[3] + '<br/>'
|
|
].join('');
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'MA5',
|
|
type: 'line',
|
|
showSymbol: false,
|
|
data: this.calculateMA(5, this.kdata),
|
|
smooth: true,
|
|
lineStyle: {
|
|
opacity: 0.5
|
|
}
|
|
},
|
|
{
|
|
name: 'MA10',
|
|
type: 'line',
|
|
showSymbol: false,
|
|
data: this.calculateMA(10, this.kdata),
|
|
smooth: true,
|
|
lineStyle: {
|
|
opacity: 0.5
|
|
}
|
|
},
|
|
{
|
|
name: 'MA20',
|
|
type: 'line',
|
|
showSymbol: false,
|
|
data: this.calculateMA(20, this.kdata),
|
|
smooth: true,
|
|
lineStyle: {
|
|
opacity: 0.5
|
|
}
|
|
},
|
|
{
|
|
name: 'MA30',
|
|
type: 'line',
|
|
showSymbol: false,
|
|
data: this.calculateMA(30, this.kdata),
|
|
smooth: true,
|
|
lineStyle: {
|
|
opacity: 0.5
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'Volume',
|
|
type: 'bar',
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
data: this.kdata.volumes,
|
|
itemStyle: {
|
|
color: upColor,
|
|
borderColor: undefined,
|
|
},
|
|
}
|
|
|
|
]
|
|
}),
|
|
true
|
|
);
|
|
|
|
}
|
|
},
|
|
watch: {
|
|
// 如果 `question` 发生改变，这个函数就会运行
|
|
columData: function(newQuestion, oldQuestion) {
|
|
|
|
// this.updateEcharts(this.option)
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
|
|
.header {
|
|
background: #000000;
|
|
margin-top: 200rpx;
|
|
padding: 0 32rpx;
|
|
|
|
|
|
.top {
|
|
height: 80rpx;
|
|
border-bottom: 2rpx solid #A1A0A8;
|
|
|
|
.price {
|
|
line-height: 80rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.percent {
|
|
vertical-align: text-top;
|
|
margin-left: 20rpx;
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 24rpx;
|
|
background-color: rgba($color: #F26666, $alpha: 0.2);
|
|
color: #F26666;
|
|
|
|
&.rise {
|
|
color: #00E8A2;
|
|
background-color: rgba($color: #00E8A2, $alpha: 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
|
|
.title {
|
|
margin-top: 24rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.value {
|
|
margin: 24rpx 0;
|
|
color: #A1A0A8;
|
|
}
|
|
|
|
.left {
|
|
flex: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.center {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.headerH5{
|
|
background: #000000;
|
|
margin-top: 122rpx;
|
|
padding: 0 32rpx;
|
|
|
|
.top {
|
|
height: 80rpx;
|
|
border-bottom: 2rpx solid #A1A0A8;
|
|
|
|
.price {
|
|
line-height: 80rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.percent {
|
|
vertical-align: text-top;
|
|
margin-left: 20rpx;
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 24rpx;
|
|
background-color: rgba($color: #F26666, $alpha: 0.2);
|
|
color: #F26666;
|
|
|
|
&.rise {
|
|
color: #00E8A2;
|
|
background-color: rgba($color: #00E8A2, $alpha: 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
|
|
.title {
|
|
margin-top: 24rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.value {
|
|
margin: 24rpx 0;
|
|
color: #A1A0A8;
|
|
}
|
|
|
|
.left {
|
|
flex: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.center {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.tab {
|
|
display: flex;
|
|
background: #000000;
|
|
|
|
.item {
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
|
|
&.select {
|
|
background: rgba(0, 232, 162, 0.3);
|
|
border-radius: 19px;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.kline {
|
|
|
|
background: #000000;
|
|
}
|
|
|
|
.MarketTrades {
|
|
.headTitle {
|
|
padding-left: 32rpx;
|
|
font-size: 34rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
}
|
|
|
|
.table {
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
|
|
.box {
|
|
padding-left: 32rpx;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
height: 450rpx;
|
|
|
|
.title {
|
|
display: flex;
|
|
margin-bottom: 16rpx;
|
|
color: #A1A0A8;
|
|
|
|
.quantity {
|
|
flex: 1;
|
|
}
|
|
|
|
.price {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
overflow: hidden;
|
|
|
|
.item {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
display: flex;
|
|
|
|
.price {
|
|
display: block;
|
|
width: 50%;
|
|
text-align: left;
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
.num {
|
|
display: block;
|
|
width: 50%;
|
|
text-align: right;
|
|
padding-right: 32rpx;
|
|
z-index: 1;
|
|
|
|
&.buy {
|
|
color: #00E8A2;
|
|
}
|
|
|
|
&.sell {
|
|
color: #F4506A;
|
|
}
|
|
}
|
|
|
|
.buybg {
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
background: rgba($color: #00E8A2, $alpha: 0.1)
|
|
}
|
|
|
|
.sellbg {
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 0;
|
|
background: rgba($color: #F4506A, $alpha: 0.1)
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
margin: 96rpx 32rpx;
|
|
|
|
.button {
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
height: 96rpx;
|
|
border-radius: 16rpx;
|
|
font-weight: 700;
|
|
font-size: 28rpx;
|
|
color: #15141F !important;
|
|
&:nth-child(2) {
margin-left: 14rpx;
}
}
}
}
</style>
|
|
|