<template>
|
<div>
|
<div class="box">
|
<h3 class="title">{{$t("message.MyAccount")}}</h3>
|
<div class="box-content">
|
<div class="row flex align-center justify-between">
|
<span class="name">{{$t("message.TotalOutput")}}</span>
|
<span class="count">741522.920798 ETH</span>
|
</div>
|
<div class="row flex align-center justify-between">
|
<span class="name">{{$t("message.IncomeBalance")}}</span>
|
<span class="count">3789 USDT</span>
|
</div>
|
<div class="row flex align-center justify-between">
|
<span class="name">{{$t("message.Exchangeable")}}</span>
|
<span class="count">62183 ETH</span>
|
</div>
|
</div>
|
</div>
|
<van-tabs type="card" color="#3D8AF2" title-active-color="#FFFFFF" title-inactive-color="#080808">
|
<van-tab :title='$t("message.Exchange")'>
|
<div class="box">
|
<h3 class="title">{{$t("message.Exchange")}}</h3>
|
<div class="box-content ">
|
<div class="exchange flex justify-between">
|
<div class="item flex-1">
|
<div>
|
<img src="../../assets/images/icon4.png"/>
|
<span>ETH</span>
|
</div>
|
<input placeholder="0.000"/>
|
</div>
|
<img src="../../assets/images/icon6.png" class="exchange-icon"/>
|
<div class="item flex-1 flex align-end flex-v">
|
<div>
|
<img src="../../assets/images/icon5.png"/>
|
<span>USDT</span>
|
</div>
|
<span class="amount">0.0000</span>
|
</div>
|
</div>
|
<span class="all">{{$t("message.RedeemAll")}}</span>
|
<button class="btn">{{$t("message.Exchange")}}</button>
|
<div class="tips">
|
<p>{{$t("message.Price")}}：1ETH≈2562.47USDT</p>
|
<p>{{$t("message.Tip1")}}</p>
|
</div>
|
</div>
|
</div>
|
</van-tab>
|
<van-tab :title='$t("message.Withdraw")'>
|
<div class="box">
|
<h3 class="title">{{$t("message.Withdraw")}}</h3>
|
<div class="box-content">
|
<div class="exchange flex justify-between">
|
<div class="item flex-1">
|
<div>
|
<img src="../../assets/images/icon5.png"/>
|
<span>USDT</span>
|
</div>
|
<input placeholder="0.000"/>
|
<span class="all">{{$t("message.WithdrawalAmount")}}</span>
|
</div>
|
<div class="item flex-1 flex align-end flex-v">
|
<div>
|
<img src="../../assets/images/icon5.png"/>
|
<span>USDT</span>
|
</div>
|
<span class="amount">0.0000</span>
|
<span class="all">{{$t("message.TotalBalance")}}</span>
|
</div>
|
</div>
|
<button class="btn">{{$t("message.Confirm")}}</button>
|
<div class="tips">
|
<p>{{$t("message.Tip2")}}</p>
|
</div>
|
</div>
|
</div>
|
</van-tab>
|
<van-tab :title='$t("message.Record")'>
|
<div class="box">
|
<h3 class="title">{{$t("message.Record")}}</h3>
|
<div class="box-content">
|
<div class="tab-wrap">
|
<van-tabs v-model:active="active" shrink color="#3D8AF2" title-active-color="#3D8AF2" title-inactive-color="#4F4F4F" line-width="32px">
|
<van-tab :title='$t("message.Exchange")'>
|
<div class="list-row flex align-center justify-between">
|
<span class="name">{{$t("message.Time")}}</span>
|
<span class="name">{{$t("message.Quantity")}}</span>
|
<span class="name">{{$t("message.Status")}}</span>
|
</div>
|
<div class="list-row flex align-center justify-between" v-for="item in 8">
|
<span>2022-3-11 10:20</span>
|
<span>1000</span>
|
<span>{{$t("message.Succeed")}}</span>
|
</div>
|
</van-tab>
|
<van-tab :title='$t("message.Withdraw")'>
|
<div class="list-row flex align-center justify-between">
|
<span class="name">{{$t("message.Time")}}</span>
|
<span class="name">{{$t("message.Quantity")}}</span>
|
<span class="name">{{$t("message.Status")}}</span>
|
</div>
|
<div class="list-row flex align-center justify-between" v-for="item in 8">
|
<span>2022-3-11 10:20</span>
|
<span>10000</span>
|
<span>{{$t("message.Succeed")}}</span>
|
</div>
|
</van-tab>
|
<van-tab :title='$t("message.Mining")'>
|
<div class="list-row flex align-center justify-between">
|
<span class="name">{{$t("message.Time")}}</span>
|
<span class="name">{{$t("message.Type")}}</span>
|
<span class="name">{{$t("message.Output")}}</span>
|
</div>
|
<div class="list-row flex align-center justify-between" v-for="item in 8">
|
<span>2022-3-11 10:20</span>
|
<span></span>
|
<span></span>
|
</div>
|
</van-tab>
|
</van-tabs>
|
</div>
|
</div>
|
</div>
|
</van-tab>
|
</van-tabs>
|
</div>
|
</template>
|
|
<script scope>
|
import { ref, onMounted, getCurrentInstance, defineComponent} from 'vue';
|
export default defineComponent({
|
name: 'account',
|
setup() {
|
const activeNames = ref(['1'])
|
const { proxy } = getCurrentInstance();
|
onMounted(() => {
|
proxy.$axios({
|
url: '/dapp/common/isApprove/' + '312',
|
method: 'get'
|
}).then((res) => {
|
console.log(res)
|
}).catch((err) => {
|
console.log(err)
|
})
|
})
|
return { activeNames };
|
},
|
methods: {
|
|
}
|
})
|
</script>
|
|
<style scoped>
|
.box{
|
background: #FFFFFF;
|
border-radius: 20px;
|
padding: 24px 34px 32px;
|
text-align: left;
|
margin: 24px 24px 32px;
|
}
|
.box:not(:last-child){
|
margin-bottom: 60px
|
}
|
.box .title{
|
font-size: 32px;
|
position: relative;
|
margin: 0
|
}
|
.box .title::before{
|
content: '';
|
width: 10px;
|
height: 10px;
|
background: #FEAA4A;
|
display: block;
|
border-radius: 50%;
|
position: absolute;
|
left: -20px;
|
top: 50%;
|
}
|
.box-content{
|
|
}
|
.exchange{
|
margin: 54px 0 0;
|
}
|
.exchange .item{
|
color: #999999;
|
font-size: 28px;
|
}
|
.exchange .item img{
|
width: 40px;
|
vertical-align: middle;
|
margin-right: 8px;
|
}
|
.exchange .item input{
|
width: 100%;
|
color: #999999;
|
font-size: 48px;
|
border: 0;
|
border-bottom: 1px solid #E9E9E9;
|
padding: 20px 0;
|
margin: 40px 0 0;
|
font-weight: bold;
|
}
|
.exchange .item .amount{
|
width: 100%;
|
color: #FEAA4A;
|
font-size: 32px;
|
border-bottom: 1px solid #E9E9E9;
|
padding: 20px 0;
|
line-height: 56px;
|
margin: 40px 0 0;
|
text-align: right;
|
font-weight: bold;
|
}
|
.exchange-icon{
|
width: 64px;
|
height: 64px;
|
}
|
.all{
|
display: block;
|
color: #3769CF;
|
font-size: 28px;
|
margin-top: 15px;
|
}
|
.btn{
|
width: 100%;
|
font-size: 32px;
|
font-weight: bold;
|
color: #F5F6F7;
|
background: #3D8AF2;
|
border-radius: 48px;
|
padding: 26px;
|
border: 0;
|
box-shadow: 0px 3px 15px rgba(55, 105, 207, 0.3);
|
margin: 62px 0 0;
|
}
|
.tips{
|
color: #AFAFAF;
|
font-size: 24px;
|
margin-top: 48px;
|
}
|
.tips p{
|
margin: 0;
|
line-height: 32px;
|
}
|
.tab-wrap{
|
margin: 20px -28px;
|
}
|
.list-row{
|
font-size: 24px;
|
color: #080808;
|
padding: 0 28px;
|
}
|
.list-row .name{
|
font-size: 28px;
|
color: #999999
|
}
|
.list-row span:nth-child(1){
|
width: 34%
|
}
|
.list-row span:nth-child(2){
|
text-align: center
|
}
|
.list-row:not(:last-child){
|
margin: 30px 0;
|
}
|
</style>
|
