520 lines
13 KiB
Vue
520 lines
13 KiB
Vue
<template>
|
|
|
|
<div class="spotAccount">
|
|
<div class="dfd left-section ">
|
|
<div class="b-l">
|
|
<section class="section-1 no-vw">
|
|
<h3 class="white-color-text">{{ $t('zc.現貨帳户估值') }} <div class="svg-container dsad"><svg width="26"
|
|
height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" class="svg-class">
|
|
<path
|
|
d="M13 6.5C8.73438 6.5 4.63125 9.20156 3.25 13C4.63125 16.7984 8.73438 19.5 13 19.5C17.2453 19.5 21.3891 16.7984 22.7703 13C21.3688 9.20156 17.2453 6.5 13 6.5ZM13 17.0625C10.7656 17.0625 8.9375 15.2344 8.9375 13C8.9375 10.7656 10.7656 8.9375 13 8.9375C15.2344 8.9375 17.0625 10.7656 17.0625 13C17.0625 15.2344 15.2344 17.0625 13 17.0625ZM15.4375 13C15.4375 14.3406 14.3406 15.4375 13 15.4375C11.6594 15.4375 10.5625 14.3406 10.5625 13C10.5625 11.6594 11.6594 10.5625 13 10.5625C14.3406 10.5625 15.4375 11.6594 15.4375 13Z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
</h3>
|
|
<div class="top-info">
|
|
<div class="left-con"><span class="balance white-color-text">${{ total }}</span><span
|
|
class="unit">USD</span>
|
|
</div>
|
|
<div class="right-con">
|
|
<div class="operate-btn">
|
|
<div class="svg-container" style="fill: rgb(85, 109, 234);"><svg width="16" height="16"
|
|
viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="svg-class">
|
|
<g id="Design tools / horizontal distribute center">
|
|
<path id="Vector"
|
|
d="M12.666 3.28594H12.0493V2.0026C12.0493 1.81253 11.9738 1.63025 11.8394 1.49584C11.705 1.36144 11.5228 1.28594 11.3327 1.28594C11.1426 1.28594 10.9603 1.36144 10.8259 1.49584C10.6915 1.63025 10.616 1.81253 10.616 2.0026V3.28594H9.99935C9.80928 3.28594 9.62699 3.36144 9.49259 3.49584C9.35819 3.63025 9.28268 3.81253 9.28268 4.0026V12.0026C9.28268 12.1927 9.35819 12.375 9.49259 12.5094C9.62699 12.6438 9.80928 12.7193 9.99935 12.7193H10.616V14.0026C10.616 14.1927 10.6915 14.375 10.8259 14.5094C10.9603 14.6438 11.1426 14.7193 11.3327 14.7193C11.5228 14.7193 11.705 14.6438 11.8394 14.5094C11.9738 14.375 12.0493 14.1927 12.0493 14.0026V12.7193H12.666C12.8561 12.7193 13.0384 12.6438 13.1728 12.5094C13.3072 12.375 13.3827 12.1927 13.3827 12.0026V4.0026C13.3827 3.81253 13.3072 3.63025 13.1728 3.49584C13.0384 3.36144 12.8561 3.28594 12.666 3.28594ZM10.716 11.2859V4.71927H11.9493V11.2859H10.716ZM7.33268 2.61927H6.04935V2.0026C6.04935 1.81253 5.97384 1.63025 5.83944 1.49584C5.70504 1.36144 5.52275 1.28594 5.33268 1.28594C5.14261 1.28594 4.96032 1.36144 4.82592 1.49584C4.69152 1.63025 4.61602 1.81253 4.61602 2.0026V2.61927H3.33268C3.14261 2.61927 2.96032 2.69478 2.82592 2.82918C2.69152 2.96358 2.61602 3.14587 2.61602 3.33594V12.6693C2.61602 12.8593 2.69152 13.0416 2.82592 13.176C2.96032 13.3104 3.14261 13.3859 3.33268 13.3859H4.61602V14.0026C4.61602 14.1927 4.69152 14.375 4.82592 14.5094C4.96032 14.6438 5.14261 14.7193 5.33268 14.7193C5.52275 14.7193 5.70504 14.6438 5.83944 14.5094C5.97384 14.375 6.04935 14.1927 6.04935 14.0026V13.3859H7.33268C7.52275 13.3859 7.70504 13.3104 7.83944 13.176C7.97384 13.0416 8.04935 12.8593 8.04935 12.6693V3.33594C8.04935 3.14587 7.97384 2.96358 7.83944 2.82918C7.70504 2.69478 7.52275 2.61927 7.33268 2.61927ZM4.04935 11.9526V4.0526H6.61602V11.9526H4.04935Z"
|
|
stroke="white" stroke-width="0.1"></path>
|
|
</g>
|
|
</svg>
|
|
</div><span class="name" @click="gopages('deposit')">{{ $t('zc.充值') }}</span>
|
|
</div>
|
|
<div class="operate-btn" @click="gopages('withdrawDeposit')">{{ $t('zc.提现') }}</div>
|
|
<div class="operate-btn" @click="gopages('orderTransfer')">{{ $t('zc.劃轉') }}</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="sxtj">
|
|
<el-input :placeholder="$t('zc.搜索')" size="small" prefix-icon="el-icon-search" v-model="input1"
|
|
@input="sousuo">
|
|
</el-input>
|
|
<div>
|
|
<el-checkbox @change="changeCheckbox" v-model="checked">{{ $t('zc.隱藏金額 < 1USD的幣種') }}
|
|
</el-checkbox>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="data-list">
|
|
<div class="titles">
|
|
<div class="column1">{{ $t('zc.幣種') }}</div>
|
|
<div class="column2">{{ $t('zc.權益') }}</div>
|
|
<div class="column3">{{ $t('zc.佔比') }}</div>
|
|
<div class="column3">{{ $t('zc.凍結') }}</div>
|
|
<div class="column4">{{ $t('zc.操作') }}</div>
|
|
</div>
|
|
<div class="list-wrap">
|
|
<div class="item" v-for="(item, index) in list" :key="index">
|
|
<div class="column1">
|
|
<img :src="$utils.isBaseUrl(item.currency_logo)">
|
|
<div>
|
|
<div>{{ item.currency_name }}</div>
|
|
<div class="brief">{{ item.currency_type }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="column2">
|
|
<div v-if="item.change_balance">{{ Number(item.change_balance).toFixed(4) }}</div>
|
|
<div v-if="item.usdt_price">$ {{ Number(item.usdt_price *
|
|
item.change_balance).toFixed(4) }}</div>
|
|
</div>
|
|
<div class="column3">{{ item.totle_scale }} % </div>
|
|
<div class="column3">{{ Number(item.lock_change_balance) || "0.00" }}</div>
|
|
<div class="column4"><span role="img" aria-label="ellipsis"
|
|
class="anticon anticon-ellipsis"><svg focusable="false" class=""
|
|
data-icon="ellipsis" width="1em" height="1em" fill="currentColor"
|
|
aria-hidden="true" viewBox="64 64 896 896">
|
|
<path
|
|
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z">
|
|
</path>
|
|
</svg></span>
|
|
<div class="sub-list">
|
|
<div class="sub-title"><span class="top"
|
|
@click="gopages('secondDealCenter')">{{ $t('zc.幣幣買賣') }}</span></div>
|
|
<div class="sub-title"><span class="top"
|
|
@click="gopages('orderTransfer')">{{ $t('zc.劃轉') }}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
<div class="rklkl">
|
|
<record value2="2"></record>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</template>
|
|
<script>
|
|
import record from '@/view/assets/record'
|
|
export default {
|
|
name: "change",
|
|
components: {
|
|
record,
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
pageData: {},
|
|
total: 0,
|
|
list: [],
|
|
input1: '',
|
|
list2: [],
|
|
checked: false
|
|
};
|
|
},
|
|
created() {
|
|
this.$http({
|
|
url: "/api/wallet/list",
|
|
method: "post",
|
|
data: {
|
|
type: 1
|
|
},
|
|
headers: {
|
|
Authorization: localStorage.getItem("token")
|
|
}
|
|
}).then(t => {
|
|
|
|
|
|
if (t.data.type == 'ok') {
|
|
let data = t.data.message
|
|
this.pageData = data
|
|
this.list2 = data.wallet.balance
|
|
this.list = data.wallet.balance
|
|
this.total = data.wallet.usdt_totle
|
|
console.log('data', data)
|
|
} else { }
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
gopages(name) {
|
|
|
|
|
|
this.$router.push({
|
|
name: name
|
|
});
|
|
|
|
|
|
},
|
|
changeCheckbox(ee) {
|
|
|
|
|
|
let data = this.list2.filter(item => item.currency_name.includes(this.input1) && (ee ? Number(item.usdt_price * item.change_balance) > 1 : true))
|
|
|
|
|
|
this.list = data
|
|
},
|
|
sousuo(ee) {
|
|
|
|
let data = this.list2.filter(item => item.currency_name.includes(ee) && (this.checked ? Number(item.usdt_price * item.change_balance) > 1 : true))
|
|
this.list = data
|
|
|
|
},
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.spotAccount {
|
|
display: flex;
|
|
color: #fff;
|
|
|
|
.dfd {
|
|
display: flex;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.b-l {
|
|
margin-right: 30px;
|
|
}
|
|
|
|
.dsad {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.section-1 {
|
|
width: 830px;
|
|
// height: 475px;
|
|
margin-bottom: 30px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.section-1.no-vw {
|
|
flex: none;
|
|
border-radius: 12px;
|
|
border: 2px solid #2c2c3e;
|
|
padding: 20px 30px;
|
|
}
|
|
|
|
.section-1 h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.section-1 .top-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #31323f;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.section-1 .top-info .left-con {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.section-1 .top-info .left-con .balance {
|
|
font-size: 24px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.section-1 .top-info .left-con .unit {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.section-1 .top-info .right-con {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.section-1 .top-info .right-con .operate-btn {
|
|
width: 100px;
|
|
height: 40px;
|
|
line-height: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 99px;
|
|
border: 1px solid #84849F;
|
|
margin-left: 10px;
|
|
background: #000;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.section-1 .top-info .right-con .operate-btn .name {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.section-1 .chart-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.section-1 .chart-title .left-con {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.section-1 .chart-title .right-con {
|
|
display: flex;
|
|
}
|
|
|
|
.section-1 .chart-title .right-con>div {
|
|
padding: 3px 12px;
|
|
text-align: center;
|
|
border-radius: 99px;
|
|
border: 1px solid #84849F;
|
|
background: #1F1F2F;
|
|
margin-left: 6px;
|
|
color: #888;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.section-1 .chart-title .right-con>div.active {
|
|
border-color: #fff;
|
|
color: #fff;
|
|
}
|
|
|
|
.sxtj {
|
|
margin: 20px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
|
|
}
|
|
|
|
.left-section .data-list {
|
|
width: 100%;
|
|
height: 650px;
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.left-section .data-list .titles {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
color: #5e5e7a;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.left-section .data-list .column1 {
|
|
width: 20%;
|
|
text-align: left;
|
|
}
|
|
|
|
.left-section .data-list .column2 {
|
|
width: 45%;
|
|
}
|
|
|
|
.left-section .data-list .column3 {
|
|
width: 35%;
|
|
}
|
|
|
|
.left-section .data-list .column3 {
|
|
width: 35%;
|
|
}
|
|
|
|
.left-section .data-list .column4 {
|
|
width: 10%;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.left-section .data-list .item .column1 {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.left-section .data-list .column1 img {
|
|
width: 34px;
|
|
height: 34px;
|
|
}
|
|
|
|
.left-section .data-list .item .column1>div {
|
|
margin-left: 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
.left-section .data-list .item .column1 .brief {
|
|
color: #888;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.left-section .data-list .item {
|
|
height: 80px;
|
|
border-bottom: 1px solid #31323f;
|
|
background: #000;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.left-section .data-list .column2 {
|
|
width: 45%;
|
|
}
|
|
|
|
.left-section .data-list .item .column2>div:nth-of-type(2) {
|
|
color: #888;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.left-section .data-list .column3 {
|
|
width: 35%;
|
|
}
|
|
|
|
.left-section .data-list .column4 {
|
|
width: 10%;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.left-section .data-list .column4 .sub-list {
|
|
position: absolute;
|
|
top: 60px;
|
|
right: 0;
|
|
z-index: 9;
|
|
width: 96px;
|
|
background: #2c2c3e;
|
|
box-shadow: 1px 2px 6px #0000007d;
|
|
border-radius: 4px;
|
|
border: 1px solid #363751;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: all .3s;
|
|
padding: 10px 0;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
color: #9090ad;
|
|
height: auto;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.left-section .data-list .column4:hover>.sub-list {
|
|
opacity: 1;
|
|
top: 50px;
|
|
visibility: visible;
|
|
}
|
|
|
|
.left-section .data-list .column4 .sub-list .sub-title {
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
min-height: 28px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.left-section .data-list .column4 .sub-list .sub-title:hover {
|
|
background: #1a1b24;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.spotAccount .section-1 .top-info[data-v-d9b660c0] {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #31323f;
|
|
padding-bottom: 20px;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.spotAccount .section-1 .top-info .right-con {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: row-reverse;
|
|
width: 100%;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.spotAccount .sxtj {
|
|
margin: 20px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.spotAccount .section-1.no-vw {
|
|
flex: none;
|
|
border-radius: 12px;
|
|
border: 2px solid #2c2c3e;
|
|
padding: 20px 10px;
|
|
width: 90vw;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.spotAccount .section-1 h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.spotAccount .section-1 .top-info .left-con .balance {
|
|
font-size: 24px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
|
|
.spotAccount .left-section .data-list .column1 img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.spotAccount .left-section .data-list .item .column1>div div,
|
|
.spotAccount .left-section .data-list .column2 div {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.spotAccount .left-section .data-list .column3 {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.spotAccount .left-section .data-list .column4 {
|
|
width: 12%;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
@media (max-width:768px) {
|
|
.top-info {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
align-items: flex-start !important;
|
|
}
|
|
}
|
|
</style> |