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.
935 lines
20 KiB
935 lines
20 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>
|
|
|
|
<kline v-if="showKline" :width="chartWidth" :height="chartHeight" :symbol="symbol.symbol"></kline>
|
|
|
|
<!-- 买卖挂牌表 -->
|
|
<view class="MarketTrades">
|
|
<view class="headTitle"> {{ i18n.Markettrades }}</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.LONG }}
|
|
</u-button>
|
|
<!-- close按钮 -->
|
|
<u-button class="button" color="#F4506A" throttleTime="500" @click="btnClick('sell')">
|
|
{{ i18n.SHORT }}
|
|
</u-button>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import kline from '@/components/kline/kline.vue'
|
|
export default {
|
|
name: "trade",
|
|
components: {
|
|
kline
|
|
},
|
|
data() {
|
|
return {
|
|
kdata: {},
|
|
type: '1min',
|
|
symbol: null,
|
|
marketDetail: {
|
|
close: 0,
|
|
usdRate: 0
|
|
},
|
|
bboList: {},
|
|
sum: {},
|
|
//设备信息
|
|
device: {},
|
|
//是否是移动H5
|
|
isH5APP: false,
|
|
// 窗口高度
|
|
windowHeight: 0,
|
|
// 窗口宽度
|
|
windowWidth: 0,
|
|
showKline: false,
|
|
// k线图宽度
|
|
chartWidth: 0,
|
|
// K线图高度
|
|
chartHeight: 0,
|
|
//菜单栏高度(单位PX)
|
|
menuHeight: 0,
|
|
|
|
};
|
|
},
|
|
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: {
|
|
//计算窗口布局
|
|
calcWindow() {
|
|
//获取窗口宽高
|
|
this.windowWidth = uni.getSystemInfoSync().windowWidth
|
|
this.windowHeight = uni.getSystemInfoSync().windowHeight
|
|
//计算K线图宽高
|
|
this.device = uni.getDeviceInfo()
|
|
|
|
let dType = this.device.deviceType
|
|
//如果是PC pad 未知设备 则将高设为K线宽
|
|
if (dType == 'pc' || dType == 'pad' || dType == 'unknow') {
|
|
this.chartWidth = this.windowWidth
|
|
this.chartHeight = this.windowHeight - this.menuHeight
|
|
} else {
|
|
//否则如果是APP因为已经旋转屏幕所以正常
|
|
this.chartWidth = this.windowWidth
|
|
this.chartHeight = this.windowHeight - this.menuHeight
|
|
}
|
|
//计算完成 显示K线图
|
|
this.showKline = true
|
|
},
|
|
// 调整为横屏
|
|
confirmPrimary() {
|
|
plus.screen.lockOrientation('landscape-primary')
|
|
plus.navigator.setFullscreen(true);
|
|
},
|
|
// //取消横屏（调整为竖屏）
|
|
cancelPrimary() {
|
|
plus.screen.lockOrientation('portrait-primary')
|
|
plus.navigator.setFullscreen(false);
|
|
},
|
|
toPage(url) {
|
|
uni.navigateTo({
|
|
url,
|
|
fail(err) {
|
|
console.log(err)
|
|
}
|
|
})
|
|
},
|
|
into() {
|
|
this.symbol = uni.getStorageSync('symbol');
|
|
setTimeout(() => {
|
|
//计算窗口
|
|
this.calcWindow()
|
|
}, 200)
|
|
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
|
|
|
|
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);
|
|
},
|
|
|
|
|
|
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) {
|
|
// console.log('k线回来')
|
|
if (data.event === 'req') {
|
|
<<<<<<< HEAD
|
|
//that.kdata = that.splitData(data.data)
|
|
} else {
|
|
//that.upkline(data.data)
|
|
=======
|
|
// console.log('k线回来req')
|
|
// console.log(11111,data)
|
|
that.kdata = that.splitData(data.data)
|
|
} else {
|
|
|
|
that.upkline(data.data)
|
|
>>>>>>> 1e578ec94e2ad85c6c797e5669f396b7f88e1b91
|
|
}
|
|
|
|
|
|
}
|
|
});
|
|
},
|
|
|
|
|
|
|
|
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>
|
|
|
|
<<<<<<< HEAD
|
|
=======
|
|
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 = [];
|
|
if(data.values){
|
|
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){
|
|
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>
|
|
>>>>>>> 1e578ec94e2ad85c6c797e5669f396b7f88e1b91
|
|
|
|
<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;
|
|
margin-top: 30px;
|
|
.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;
|
|
margin-bottom: 132rpx;
|
|
|
|
.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;
|
|
z-index: 999;
|
|
position: fixed;
|
|
bottom: 16rpx;
|
|
left: 2%;
|
|
width: 96%;
|
|
|
|
.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>
|
|
|