gx

queenwuli

2022-03-21 33461cebea4f02e9ed7868f9d5c9f9531f8d13f6

 src/pages/index/account.vue

@@ -1,26 +1,26 @@
<template>
    <div>
        <div class="box">
            <h3 class="title">我的账户</h3>
            <h3 class="title">{{$t("message.MyAccount")}}</h3>
            <div class="box-content">
                <div class="row flex align-center justify-between">
                    <span class="name">总产量</span>
                    <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">收入余额</span>
                    <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">可兑换</span>
                    <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="兑换">
            <van-tab :title='$t("message.Exchange")'>
                <div class="box">
                    <h3 class="title">兑换</h3>
                    <h3 class="title">{{$t("message.Exchange")}}</h3>
                    <div class="box-content ">
                        <div class="exchange flex justify-between">
                            <div class="item flex-1">
@@ -39,18 +39,18 @@
                                <span class="amount">0.0000</span>
                            </div>
                        </div>
                        <span class="all">全部兑换</span>
                        <button class="btn">兑换</button>
                        <span class="all">{{$t("message.RedeemAll")}}</span>
                        <button class="btn">{{$t("message.Exchange")}}</button>
                        <div class="tips">
                            <p>价格：1ETH≈2562.47USDT</p>
                            <p>从0.1分开始，将您挖掘的ETH硬币转换为USDT</p>
                            <p>{{$t("message.Price")}}：1ETH≈2562.47USDT</p>
                            <p>{{$t("message.Tip1")}}</p>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="提现">
            <van-tab :title='$t("message.Withdraw")'>
                <div class="box">
                    <h3 class="title">提现</h3>
                    <h3 class="title">{{$t("message.Withdraw")}}</h3>
                    <div class="box-content">
                        <div class="exchange flex justify-between">
                            <div class="item flex-1">
@@ -59,7 +59,7 @@
                                    <span>USDT</span>
                                </div>
                                <input placeholder="0.000"/>
                                <span class="all">提现金额</span>
                                <span class="all">{{$t("message.WithdrawalAmount")}}</span>
                            </div>
                            <div class="item flex-1 flex align-end flex-v">
                                <div>
@@ -67,54 +67,53 @@
                                    <span>USDT</span>
                                </div>
                                <span class="amount">0.0000</span>
                                <span class="all">总余额</span>
                                <span class="all">{{$t("message.TotalBalance")}}</span>
                            </div>
                        </div>
                        <button class="btn">确认</button>
                        <button class="btn">{{$t("message.Confirm")}}</button>
                        <div class="tips">
                            <p>USDT取款将在24小时内发送到您的USDT钱包地址，每天只
                                能取款一次，从100USDT开始，每位矿工的费用为30USDT</p>
                            <p>{{$t("message.Tip2")}}</p>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="记录">
            <van-tab :title='$t("message.Record")'>
                <div class="box">
                    <h3 class="title">记录</h3>
                    <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="兑换">
                                    <div class="row flex align-center justify-between">
                                        <span class="name">时间</span>
                                        <span class="name">数量</span>
                                        <span class="name">状态</span>
                                <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="row flex align-center justify-between" v-for="item in 8">
                                    <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>成功</span>
                                        <span>{{$t("message.Succeed")}}</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>
                                <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="row flex align-center justify-between" v-for="item in 8">
                                    <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>成功</span>
                                        <span>{{$t("message.Succeed")}}</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>
                                <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="row flex align-center justify-between" v-for="item in 8">
                                    <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>
@@ -240,19 +239,22 @@
    .tab-wrap{
        margin: 20px -28px;
    }
    .row{
    .list-row{
        font-size: 24px;
        color: #080808;
        padding: 0 28px;
    }
    .row .name{
    .list-row .name{
        font-size: 28px;
        color: #999999
    }
    .row span:nth-child(1){
    .list-row span:nth-child(1){
        width: 34%
    }
    .row span:nth-child(2){
    .list-row span:nth-child(2){
        text-align: center
    }
    .list-row:not(:last-child){
        margin: 30px 0;
    }
</style>