|
|
|
@ -77,26 +77,31 @@ |
|
|
|
<template v-for="parent in contractListFilter"> |
|
|
|
<table class="table" :key="parent.coin_name + 1"> |
|
|
|
<thead> |
|
|
|
<tr class=""> |
|
|
|
<!-- <tr class=""> |
|
|
|
<th class="w-9/24">{{ $t("contract.h5") }}</th> |
|
|
|
<th class="w-7/24 text-right">{{ $t("contract.g3") }}</th> |
|
|
|
<th class="w-8/24 text-right"> |
|
|
|
{{ $t("contract.h6") }} |
|
|
|
</th> |
|
|
|
</tr> |
|
|
|
<th class="w-8/24 text-right">{{ $t("contract.h6") }}</th> |
|
|
|
</tr> --> |
|
|
|
<th class="" style="display:block;width:100%"> |
|
|
|
<div class="width-32" style="padding-left: 18px;">{{ $t("contract.h5") }}</div> |
|
|
|
<div class="text-right width-32">{{ $t("contract.g3") }}</div> |
|
|
|
<div class="text-right width-32">{{ $t("contract.h6") }}</div> |
|
|
|
</th> |
|
|
|
</thead> |
|
|
|
<tbody> |
|
|
|
<tbody class="trade-list"> |
|
|
|
<tr |
|
|
|
v-for="item in parent.marketInfoList" |
|
|
|
:key="item.symbol" |
|
|
|
:class="{ active: item.symbol == activeSymbol }" |
|
|
|
@click="ispopover1(item.symbol)" |
|
|
|
v-show="isShow(item)" |
|
|
|
style="display:block" |
|
|
|
> |
|
|
|
<td class="w-9/24 tr-text"> |
|
|
|
<!-- <td class="w-9/24 tr-text"> |
|
|
|
{{ item.symbol }}/{{ parent.coin_name }} |
|
|
|
</td> |
|
|
|
<td class="w-7/24 text-right" > |
|
|
|
<!-- :class="item.increase < 0 ? 'decreace' : 'increase'" --> |
|
|
|
:class="item.increase < 0 ? 'decreace' : 'increase'" |
|
|
|
{{ item.close }} |
|
|
|
</td> |
|
|
|
<td |
|
|
|
@ -104,7 +109,20 @@ |
|
|
|
:class="item.increase < 0 ? 'decreace' : 'increase'" |
|
|
|
> |
|
|
|
{{ item.increaseStr }} |
|
|
|
</td> |
|
|
|
</td> --> |
|
|
|
<td style="display:block;width:100%;border:none;"> |
|
|
|
<div class="width-32"> |
|
|
|
<div> |
|
|
|
<div style="margin-left: 10px;">{{ item.symbol }}/{{ parent.coin_name }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="text-right width-32"> |
|
|
|
{{ item.close }} |
|
|
|
</div> |
|
|
|
<div class="text-right width-32" :class="item.increase < 0 ? 'decreace' : 'increase'"> |
|
|
|
{{ item.increaseStr }} |
|
|
|
</div> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
@ -269,22 +287,22 @@ export default { |
|
|
|
activeSymbol() { |
|
|
|
this.holdPosition(); |
|
|
|
}, |
|
|
|
filterCoin: { |
|
|
|
handler(n,o){ |
|
|
|
if(!n){ |
|
|
|
this.contractListFilter = this.contractList; |
|
|
|
}else{ |
|
|
|
this.contractListFilter = this.contractList.map((item1, index1)=>{ |
|
|
|
let arr = item1; |
|
|
|
arr.marketInfoList = item1.marketInfoList.filter(item2=>{ |
|
|
|
return item2.symbol.indexOf(n.toUpperCase())!=-1 |
|
|
|
}) |
|
|
|
return arr; |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
immediate: true |
|
|
|
} |
|
|
|
// filterCoin: { |
|
|
|
// handler(n,o){ |
|
|
|
// if(!n){ |
|
|
|
// this.contractListFilter = this.contractList; |
|
|
|
// }else{ |
|
|
|
// this.contractListFilter = this.contractList.map((item1, index1)=>{ |
|
|
|
// let arr = item1; |
|
|
|
// arr.marketInfoList = item1.marketInfoList.filter(item2=>{ |
|
|
|
// return item2.symbol.indexOf(n.toUpperCase())!=-1 |
|
|
|
// }) |
|
|
|
// return arr; |
|
|
|
// }) |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// immediate: true |
|
|
|
// } |
|
|
|
}, |
|
|
|
destroyed() { |
|
|
|
clearInterval(this._time); |
|
|
|
@ -433,7 +451,19 @@ export default { |
|
|
|
}, |
|
|
|
enterFilter(){ |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
// 搜索关键字 |
|
|
|
isShow(symbol) { |
|
|
|
const reg = new RegExp(this.filterCoin, "gi"); |
|
|
|
if (!this.filterCoin) return true; |
|
|
|
else { |
|
|
|
// let name = symbol.coinName || symbol.pair; |
|
|
|
// return name.search(reg) >= 0; |
|
|
|
let name = symbol.pair_name || symbol.symbol; |
|
|
|
return name.search(reg) >= 0; |
|
|
|
} |
|
|
|
// return !this.keyword || symbol.coinName.concat(symbol.pair).search(reg) >= 0; |
|
|
|
}, |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
@ -503,4 +533,15 @@ export default { |
|
|
|
.min-width-B{ |
|
|
|
min-width: 130px; |
|
|
|
} |
|
|
|
.trade-list{ |
|
|
|
// width: 23vw; |
|
|
|
height: 1110px; |
|
|
|
overflow-y: auto; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
.width-32{ |
|
|
|
display: inline-block !important; |
|
|
|
vertical-align: top !important; |
|
|
|
width: 31% !important; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
