<template>
|
<div>
|
<div class="box">
|
<h3 class="title">我的账户</h3>
|
<div class="box-content">
|
<div class="row flex align-center justify-between">
|
<span class="name">总产量</span>
|
<span class="count">741522.920798 ETH</span>
|
</div>
|
<div class="row flex align-center justify-between">
|
<span class="name">收入余额</span>
|
<span class="count">3789 USDT</span>
|
</div>
|
<div class="row flex align-center justify-between">
|
<span class="name">可兑换</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="兑换">
|
<div class="box">
|
<h3 class="title">兑换</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">全部兑换</span>
|
<button class="btn">兑换</button>
|
<div class="tips">
|
<p>价格：1ETH≈2562.47USDT</p>
|
<p>从0.1分开始，将您挖掘的ETH硬币转换为USDT</p>
|
</div>
|
</div>
|
</div>
|
</van-tab>
|
<van-tab title="提现">
|
<div class="box">
|
<h3 class="title">提现</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">提现金额</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">总余额</span>
|
</div>
|
</div>
|
<button class="btn">确认</button>
|
<div class="tips">
|
<p>USDT取款将在24小时内发送到您的USDT钱包地址，每天只
|
能取款一次，从100USDT开始，每位矿工的费用为30USDT</p>
|
</div>
|
</div>
|
</div>
|
</van-tab>
|
<van-tab title="记录">
|
<div class="box">
|
<h3 class="title">记录</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="兑换">
|
<div class="row flex align-center justify-between">
|
<span class="name">时间</span>
|
<span class="name">数量</span>
|
<span class="name">状态</span>
|
</div>
|
<div class="row flex align-center justify-between" v-for="item in 8">
|
<span>2022-3-11 10:20</span>
|
<span>1000</span>
|
<span>成功</span>
|
</div>
|
</van-tab>
|
<van-tab title="提现">
|
<div class="row flex align-center justify-between">
|
<span class="name">时间</span>
|
<span class="name">数量</span>
|
<span class="name">状态</span>
|
</div>
|
<div class="row flex align-center justify-between" v-for="item in 8">
|
<span>2022-3-11 10:20</span>
|
<span>10000</span>
|
<span>成功</span>
|
</div>
|
</van-tab>
|
<van-tab title="采矿">
|
<div class="row flex align-center justify-between">
|
<span class="name">时间</span>
|
<span class="name">类型</span>
|
<span class="name">输出</span>
|
</div>
|
<div class="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 } from 'vue';
|
export default {
|
name: 'account',
|
setup() {
|
const activeNames = ref(['1']);
|
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;
|
}
|
.row{
|
font-size: 24px;
|
color: #080808;
|
padding: 0 28px;
|
}
|
.row .name{
|
font-size: 28px;
|
color: #999999
|
}
|
.row span:nth-child(1){
|
width: 34%
|
}
|
.row span:nth-child(2){
|
text-align: center
|
}
|
</style>
|
