<template>
    <main>
        <section class="layout-box clearfix">
            <div class="notice box-shadow" v-if="certificationStatus == 'KYC_INFO_SUBMIT'">
                <p>您需要完善您的最终受益人信息</p>
                <router-link to="/kycShareholder">立即完善&gt;</router-link>
            </div>
            <aside class="account-left">
                <div class="user-info-box box-shadow">
                    <h1
                        v-if="certificationStatus !== 'NO_SUBMIT'"
                        :class="userInfo.loginInfo.certificationName.length < 5 ? 'font-big' : ''"
                    >
                        <p>Hi{{greetings}}，</p>
                        {{userInfo.loginInfo.certificationName}}
                    </h1>
                    <h1 v-else>您尚未进行实名认证</h1>
                    <p>登录账号：{{ userInfo.loginInfo.phoneNo }}</p>
                    <p class="mb30">
                        <span>实名认证：</span>
                        <em v-if="certificationStatus === 'NO_SUBMIT'" class="icon-card">
                            未认证，
                            <router-link to="/kyc">立即认证</router-link>
                        </em>
                        <em
                            v-else-if="certificationStatus === 'SUBMIT_FAILURE' || certificationStatus === 'SUBMIT_WATING' || certificationStatus === 'SUBMIT_FIRST_TRIAL' || certificationStatus === 'FIRST_TRIAL_FAILURE' ||
            this.userInfo.loginInfo.certificationStatus === 'KYC_INFO_SUBMIT' ||
            this.userInfo.loginInfo.certificationStatus === 'CONTACTS_AUDIT_FAILURE'"
                            class="cl-blue icon-card-waiting"
                        >审核中</em>
                        <em v-else-if="certificationStatus === 'FAILURE'" class="icon-card-failed">
                            <i>认证失败</i>
                        </em>
                        <em v-else class="cl-green icon-card-succ">已认证</em>
                    </p>
                    <el-button type="primary" @click="toApply">申请境外收款账户</el-button>
                    <span></span>
                    <el-button type="primary" plain @click="toWithdrawDeposit">立即提现</el-button>
                </div>
                <div class="balance-of-acc box-shadow" v-loading="loadingAcc">
                    <div class="currencys">
                        <div class="currency" v-if="accountList.length === 0">
                            <div class="currency-header clearfix">
                                <img src="~assets/images/icon-USD.png" alt="美元" />
                                <p>美元账户总金额(USD)</p>
                            </div>
                            <slide>
                                <div class="currency-content">
                                    <div class="balance">
                                        <div class="foreign-currency">$ 0.00</div>
                                        <div class="rmb">约等于¥0.00</div>
                                    </div>
                                    <ul class="account-num">
                                        <li>
                                            <span>已申请账户数</span>
                                        </li>
                                        <li>
                                            <p>0</p>
                                        </li>
                                    </ul>
                                </div>
                            </slide>
                        </div>
                        <div
                            class="currency"
                            v-else
                            v-for="(item, index) in accountList"
                            :key="index"
                        >
                            <div
                                class="currency-header clearfix"
                                :style="index === activeIndex ? '' : 'cursor:pointer'"
                                @click="toggleContent(index)"
                            >
                                <img
                                    :src="currencyIcon(item.currency)"
                                    :alt="currency(item.currency)"
                                />
                                <p
                                    v-if="index === activeIndex"
                                >{{ currency(item.currency) }}账户总金额({{ item.currency }})</p>
                                <div v-else class="clearfix">
                                    <span>{{ currency(item.currency) }}{{ item.currency }}</span>
                                    <em>{{ item.currencySymbol }} {{ formatNum(item.accountTotalAmt) }}</em>
                                </div>
                            </div>
                            <slide>
                                <div class="currency-content" v-show="index === activeIndex">
                                    <div class="balance">
                                        <div
                                            class="foreign-currency"
                                        >{{ item.currencySymbol }} {{ formatNum(item.accountTotalAmt) || 0.00 }}</div>
                                        <div
                                            class="rmb"
                                            v-if="item.queryPriceFlag"
                                        >约等于¥{{ formatNum(item.accountCNYTotalAmt) || 0.00 }}</div>
                                    </div>
                                    <ul class="account-num">
                                        <li>
                                            <span>已申请账户数</span>
                                        </li>
                                        <li>
                                            <p>{{ item.applyAccountNum }}</p>
                                        </li>
                                    </ul>
                                </div>
                            </slide>
                        </div>
                    </div>
                </div>
                <div class="exchange-rate box-shadow">
                    <div class="accont-title clearfix" style="margin-top: -20px;">
                        <h3>实时汇率</h3>
                        <span>实时汇率由合作伙伴提供，仅供参考</span>
                    </div>
                    <div
                        class="exchange-rate-list clearfix"
                        v-for="(item, index) in exchangeRateList"
                        :key="index"
                    >
                        <dl>
                            <dt>{{ currency(item.sellCur) }}</dt>
                            <dd>{{ item.sellCur }}/CNY</dd>
                        </dl>
                        <dl>
                            <dt>{{ item.queryRate }}</dt>
                            <dd>{{ item.queryDate }}</dd>
                        </dl>
                    </div>
                </div>
            </aside>
            <div class="account-right">
                <div class="account-ad box-shadow" v-if="showAd">
                    <el-carousel height="100px">
                        <el-carousel-item v-for="item in adList" :key="item.id">
                            <router-link :to="item.link">
                                <img :src="item.imgSrc" alt="ad" />
                            </router-link>
                        </el-carousel-item>
                    </el-carousel>
                    <div class="close-account-ad" @click="closeAd"></div>
                </div>
                <div class="account-news box-shadow" v-if="showAd">
                    <p>
                        公告：
                        <router-link to="/news">登录时提示“用户名不存在或密码错误”，我的账号被锁定登录不了？</router-link>
                    </p>
                </div>
                <div class="account-store box-shadow">
                    <div class="accont-title clearfix">
                        <h3>我的店铺</h3>
                        <el-select
                            v-model="storeValue"
                            placeholder="请选择"
                            size="mini"
                            @change="selectStore"
                        >
                            <el-option
                                v-for="item in storeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="list-content" v-loading="loadingStore">
                        <div class="no-data" v-if="storeList.length === 0">
                            <img src="~assets/images/icon-status-no-store.png" alt />
                            <h3>很遗憾您还没有店铺！</h3>
                            <p>快去申请吧！</p>
                        </div>
                        <div class="data-list-layout" v-else>
                            <el-table :data="storeList" style="width: 100%">
                                <el-table-column
                                    prop="storeName"
                                    label="店铺名称"
                                    width="180"
                                    show-overflow-tooltip
                                ></el-table-column>
                                <el-table-column
                                    prop="storeHoldPersonName"
                                    label="账户持有人"
                                    show-overflow-tooltip
                                ></el-table-column>
                                <el-table-column label="可提现金额">
                                    <template
                                        slot-scope="scope"
                                    >{{ formatNum(scope.row.withdrawAmount) }} {{ scope.row.currency }}</template>
                                </el-table-column>
                                <el-table-column prop="authStatus" label="操作" width="100px">
                                    <template slot-scope="scope">
                                        <span class="cl-red" v-if="scope.row.auditStatus == 2">审核未通过</span>
                                        <div v-else>
                                            <el-button
                                                @click="toBindStore(scope.row)"
                                                type="text"
                                                size="small"
                                                v-if="scope.row.authStatus == 2 || scope.row.authStatus == 3"
                                                class="cl-green"
                                            >已授权</el-button>
                                            <el-button
                                                @click="toBindStore(scope.row)"
                                                type="text"
                                                size="small"
                                                v-else
                                                class="cl-red"
                                            >店铺授权</el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <router-link to="/account/store/all" class="show-all">查看全部店铺&gt;</router-link>
                        </div>
                    </div>
                </div>
                <div class="account-record box-shadow">
                    <div class="accont-title clearfix">
                        <h3>交易记录</h3>
                        <el-select
                            v-model="recordValue"
                            placeholder="请选择"
                            size="mini"
                            @change="selectRecordType"
                        >
                            <el-option
                                v-for="item in recordOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="list-content" v-loading="loadingRecord">
                        <div class="no-data" v-if="recordList.length === 0">
                            <img src="~assets/images/icon-status-no-record.png" alt />
                            <h3>很遗憾您还没有记录！</h3>
                            <p>快去交易吧！</p>
                        </div>
                        <div class="data-list-layout" v-else>
                            <el-table :data="recordList" style="width: 100%">
                                <el-table-column
                                    prop="tradeDate"
                                    label="交易时间"
                                    show-overflow-tooltip
                                ></el-table-column>
                                <el-table-column
                                    prop="storeName"
                                    label="店铺名称"
                                    show-overflow-tooltip
                                ></el-table-column>
                                <el-table-column
                                    prop="processStatusDes"
                                    label="交易状态"
                                    show-overflow-tooltip
                                ></el-table-column>
                                <el-table-column label="交易金额">
                                    <template
                                        slot-scope="scope"
                                    >{{ formatNum(scope.row.amt) }} {{ scope.row.currency }}</template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button
                                            @click="viewDetails(scope.row)"
                                            type="text"
                                            size="small"
                                        >详情</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <router-link to="/record/deal" class="show-all">查看全部交易&gt;</router-link>
                        </div>
                    </div>
                </div>
            </div>
            <no-auth :dialogVisibleNoAuth="dialogVisibleNoAuth" @close="closeDialog"></no-auth>
            <auth-waiting
                :dialogVisibleAuthWaiting="dialogVisibleAuthWaiting"
                @close="closeDialogAuthWaiting"
            ></auth-waiting>
            <auth-failed
                :dialogVisibleAuthFailed="dialogVisibleAuthFailed"
                @close="closeDialogAuthFailed"
            ></auth-failed>
            <no-bind-bankcard
                :dialogVisibleNoBindBankcard="dialogVisibleNoBindBankcard"
                @close="closeDialogNoBindBankcard"
            ></no-bind-bankcard>
            <auth-submit-failed
                :dialogVisibleAuthSubmitFailed="dialogVisibleAuthSubmitFailed"
                @close="closeDialogAuthSubmitFailed"
            ></auth-submit-failed>
        </section>
    </main>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import {
    api_findApplyCountNum,
    api_tradeList,
    api_storeList,
    api_findNaturalInfo
} from "api/portal.js";
import { api_bankList } from "api/center.js";
import utils from "utils/utils.js";
import slide from "components/transation/slide";
import noAuth from "pages/dialog/noAuth";
import authWaiting from "pages/dialog/authWaiting";
import authFailed from "pages/dialog/authFailed";
import authSubmitFailed from "pages/dialog/authSubmitFailed";
import noBindBankcard from "pages/dialog/noBindBankcard";
export default {
    name: "account",
    data() {
        return {
            condition: true,
            activeIndex: 0,
            userShowInfo: {},
            showAd: false,
            accountList: [],
            exchangeRateList: [],
            adList: [
                {
                    id: 0,
                    link: "",
                    imgSrc: require("assets/images/bg-ad.jpg")
                },
                {
                    id: 1,
                    link: "",
                    imgSrc: require("assets/images/bg-ad.jpg")
                }
            ],
            browserIP: "",
            storeOptions: [
                {
                    value: "AMAZON",
                    label: "亚马逊"
                }
            ],
            storeValue: "亚马逊",
            recordOptions: [
                {
                    value: "TRADE_IN",
                    label: "最近入账"
                },
                {
                    value: "TRADE_WITHDRAW",
                    label: "最近提现"
                }
                // {
                //     value: "REPAYMENT",
                //     label: "最近还款"
                // }
            ],
            recordValue: "TRADE_IN",
            storeList: [],
            recordList: [],
            dialogVisibleNoAuth: false,
            dialogVisibleAuthWaiting: false,
            dialogVisibleAuthFailed: false,
            dialogVisibleAuthSubmitFailed: false,
            dialogVisibleNoBindBankcard: false,
            isBindCard: true,
            certificationStatus: "",
            loadingAcc: true,
            loadingStore: true,
            loadingRecord: true
        };
    },
    components: {
        slide,
        noAuth,
        authWaiting,
        authFailed,
        noBindBankcard,
        authSubmitFailed
    },
    computed: {
        ...mapState(["userInfo"]),
        greetings() {
            let getHour = new Date().getHours();
            if (getHour < 9) {
                return "早上好";
            } else if (getHour < 12) {
                return "上午好";
            } else if (getHour < 14) {
                return "中午好";
            } else if (getHour < 20) {
                return "下午好";
            } else {
                return "晚上好";
            }
        }
    },
    watch: {},
    methods: {
        ...mapMutations(["setLoginInfo"]),
        formatNum(strNum) {
            var outputmoney = function(number) {
                number = number.replace(/\,/g, ""); //把所有的逗号，清除
                if (isNaN(number) || number == "") return "";
                number = Math.round(number * 100) / 100;
                if (number < 0)
                    return (
                        "-" +
                        outputdollars(Math.floor(Math.abs(number) - 0) + "") +
                        outputcents(Math.abs(number) - 0)
                    );
                else
                    return (
                        outputdollars(Math.floor(number - 0) + "") +
                        outputcents(number - 0)
                    );
            };
            //格式化金额
            var outputdollars = function(number) {
                if (number.length <= 3) {
                    return number == "" ? "0" : number;
                } else {
                    var mod = number.length % 3;
                    var output = mod == 0 ? "" : number.substring(0, mod);
                    for (let i = 0; i < Math.floor(number.length / 3); i++) {
                        if (mod == 0 && i == 0) {
                            output += number.substring(
                                mod + 3 * i,
                                mod + 3 * i + 3
                            );
                        } else {
                            output +=
                                "," +
                                number.substring(mod + 3 * i, mod + 3 * i + 3);
                        }
                    }
                    return output;
                }
            };
            var outputcents = function(amount) {
                amount = Math.round((amount - Math.floor(amount)) * 100);
                return amount < 10 ? ".0" + amount : "." + amount;
            };
            return outputmoney(strNum + "");
        },
        queryInit() {
            let findNaturalInfoParams = {
                params: {}
            };
            let bankListParams = {
                params: {
                    bindingType: "BINDING_COLLECTION"
                }
            };
            api_findNaturalInfo(findNaturalInfoParams).then(res => {
                if (res.success) {
                    this.$store.commit("setLoginInfo", res.data);
                    localStorage.setItem(
                        "initVuex",
                        JSON.stringify(this.$store.state)
                    );
                    this.certificationStatus = res.data.certificationStatus;
                    if (
                        this.certificationStatus === "FIRST_TRIAL_FAILURE" ||
                        this.certificationStatus === "CONTACTS_AUDIT_FAILURE"
                    ) {
                        this.dialogVisibleAuthSubmitFailed = true;
                    }
                } else {
                    this.$message.error(res.msg);
                }
            });
            api_bankList(bankListParams).then(res => {
                if (res.success) {
                    if (res.data.length === 0) {
                        this.isBindCard = false;
                    }
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        toggleContent(index) {
            this.activeIndex = index;
        },
        closeAd() {
            this.showAd = false;
            sessionStorage.setItem("showAd", false);
        },
        currency(val) {
            if (val === "USD") {
                return "美元";
            } else if (val === "CAD") {
                return "加元";
            } else if (val === "GBP") {
                return "英镑";
            } else if (val === "EUR") {
                return "欧元";
            }
        },
        currencyIcon(val) {
            if (val === "USD") {
                return require("assets/images/icon-USD.png");
            } else if (val === "CAD") {
                return require("assets/images/icon-CAD.png");
            } else if (val === "GBP") {
                return require("assets/images/icon-GBP.png");
            } else if (val === "EUR") {
                return require("assets/images/icon-EUR.png");
            }
        },
        findApplyCountNum() {
            let that = this;
            let findApplyCountNumParams = {
                params: {
                    browserIP: "114.55.171.170"
                }
            };
            api_findApplyCountNum(findApplyCountNumParams).then(res => {
                if (res.success) {
                    if (res.data) {
                        that.accountList = res.data.acctList;
                        that.exchangeRateList = res.data.priceList;
                    }
                    that.loadingAcc = false;
                } else {
                    that.$message.error(res.msg);
                }
            });
        },
        selectStore(val) {
            let storeListParams = {
                params: {
                    storePlateform: val,
                    startPage: 1,
                    pageSize: 6
                }
            };
            api_storeList(storeListParams).then(res => {
                if (res.success) {
                    if (res.data.list === null) {
                        this.storeList = [];
                    } else {
                        this.storeList = res.data.list;
                    }
                } else {
                    this.$message.error(res.msg);
                }
                this.loadingStore = false;
            });
        },
        selectRecordType(val) {
            let tradeListParams = {
                params: {
                    tradeType: val
                }
            };
            api_tradeList(tradeListParams).then(res => {
                if (res.success) {
                    if (res.data.list === null) {
                        this.recordList = [];
                    } else {
                        this.recordList = res.data.list;
                    }
                } else {
                    this.$message.error(res.msg);
                }
                this.loadingRecord = false;
            });
        },
        toApply() {
            this.$router.push({
                path: "/account/apply"
            });
        },
        toWithdrawDeposit() {
            if (this.userInfo.loginInfo.certificationStatus === "NO_SUBMIT") {
                this.dialogVisibleNoAuth = true;
            } else if (
                this.userInfo.loginInfo.certificationStatus ===
                    "SUBMIT_WATING" ||
                this.userInfo.loginInfo.certificationStatus ===
                    "SUBMIT_FAILURE" ||
                this.userInfo.loginInfo.certificationStatus ===
                    "SUBMIT_FIRST_TRIAL" ||
                this.userInfo.loginInfo.certificationStatus ===
                    "KYC_INFO_SUBMIT" ||
                this.userInfo.loginInfo.certificationStatus ===
                    "CONTACTS_AUDIT_FAILURE"
            ) {
                this.dialogVisibleAuthWaiting = true;
            } else if (
                this.userInfo.loginInfo.certificationStatus === "FAILURE"
            ) {
                this.dialogVisibleAuthFailed = true;
            } else if (
                this.userInfo.loginInfo.certificationStatus ===
                "FIRST_TRIAL_FAILURE"
            ) {
                this.dialogVisibleAuthSubmitFailed = true;
            } else {
                if (!this.isBindCard) {
                    //提示去绑卡
                    this.dialogVisibleNoBindBankcard = true;
                } else {
                    this.$router.push({
                        path: "/account/withdrawDeposit"
                    });
                }
            }
        },
        toBindStore(val) {
            let toDetail = this.$router.resolve({
                path: "/account/store/detail",
                query: {
                    id: val.id
                }
            });
            window.open(toDetail.href, "_blank");
        },
        viewDetails(val) {
            let that = this;
            let toDetail;
            if (this.recordValue === "TRADE_IN") {
                toDetail = this.$router.resolve({
                    path: "/record/deal/detail",
                    query: {
                        tradeType: that.recordValue,
                        id: val.tradeId
                    }
                });
            } else if (this.recordValue === "TRADE_WITHDRAW") {
                toDetail = this.$router.resolve({
                    path: "/record/deal/detail",
                    query: {
                        tradeType: that.recordValue,
                        id: val.batchNo
                    }
                });
            }
            window.open(toDetail.href, "_blank");
        },
        closeDialog() {
            this.dialogVisibleNoAuth = false;
        },
        closeDialogAuthWaiting() {
            this.dialogVisibleAuthWaiting = false;
        },
        closeDialogAuthFailed() {
            this.dialogVisibleAuthFailed = false;
        },
        closeDialogNoBindBankcard() {
            this.dialogVisibleNoBindBankcard = false;
        },
        closeDialogAuthSubmitFailed() {
            this.dialogVisibleAuthSubmitFailed = false;
        }
    },
    created() {
        this.userShowInfo = this.userInfo.loginInfo;
        if (sessionStorage.getItem("showAd")) {
            this.showAd = false;
        }
        let registerType = this.userInfo.loginInfo.registerType;
        if (registerType === "HK_COMPANY") {
            this.$store.commit("setIsHK", true);
        }
        this.queryInit();
        this.findApplyCountNum();
        this.selectStore("AMAZON");
        this.selectRecordType("TRADE_IN");
    },
    beforeRouteLeave(to, from, next) {
        if (this.userInfo.loginInfo.certificationStatus === "NO_SUBMIT") {
            if (to.meta.auth) {
                this.dialogVisibleNoAuth = true;
            } else {
                next();
            }
        } else if (
            this.userInfo.loginInfo.certificationStatus === "SUBMIT_WATING" ||
            this.userInfo.loginInfo.certificationStatus === "SUBMIT_FAILURE" ||
            this.userInfo.loginInfo.certificationStatus ===
                "SUBMIT_FIRST_TRIAL" ||
            this.userInfo.loginInfo.certificationStatus === "KYC_INFO_SUBMIT"
        ) {
            if (to.meta.auth) {
                this.dialogVisibleAuthWaiting = true;
            } else {
                next();
            }
        } else if (this.userInfo.loginInfo.certificationStatus === "FAILURE") {
            if (to.meta.auth) {
                this.dialogVisibleAuthFailed = true;
            } else {
                next();
            }
        } else if (
            this.userInfo.loginInfo.certificationStatus ===
                "FIRST_TRIAL_FAILURE" ||
            this.userInfo.loginInfo.certificationStatus ===
                "CONTACTS_AUDIT_FAILURE"
        ) {
            if (to.meta.auth) {
                this.dialogVisibleAuthSubmitFailed = true;
            } else {
                next();
            }
        } else {
            next();
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.layout-box /deep/ .el-carousel__button {
    width: 4px;
}
.layout-box /deep/ .is-active {
    .el-carousel__button {
        width: 20px;
    }
}
.accont-title /deep/ .el-select {
    float: right;
    width: 110px;
    margin-top: -4px;
}
.notice {
    position: relative;
    margin-bottom: 20px;
    padding: 20px;
    background: #fff8e8;
    p {
        line-height: 22px;
        padding-left: 32px;
        font-size: 14px;
        text-align: left;
        background: url(~assets/images/icon-notice.png) left 0 no-repeat;
        background-size: 20px 20px;
        color: #cc3333;
    }
    a {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        font-size: 14px;
        color: #3d86e9;
    }
}
.layout-box {
    position: relative;
    .account-left {
        float: left;
        width: 340px;
        .user-info-box {
            padding: 20px 36px 10px;
            text-align: left;
            background: #fff;
            h1 {
                margin-bottom: 14px;
                font-size: 16px;
                font-weight: normal;
                word-break: break-all;
                color: #3d86e9;
                &.font-big {
                    font-size: 28px;
                }
                p {
                    margin-bottom: 10px;
                    font-size: 28px;
                    color: #3d86e9;
                }
            }
            p {
                margin-bottom: 10px;
                font-size: 14px;
                color: #a1a1a1;
                em {
                    font-style: normal;
                    a {
                        font-size: 14px;
                        color: #3d86e9;
                    }
                    i {
                        font-style: normal;
                        color: #cc3333;
                    }
                }
                &.mb30 {
                    margin-bottom: 30px;
                }
            }
            .el-button {
                width: 100%;
                margin-bottom: 20px;
            }
        }
        .balance-of-acc,
        .exchange-rate {
            margin-top: 20px;
            padding: 20px;
            text-align: left;
            background: #fff;
        }
        .balance-of-acc {
            .currencys {
                color: #333;
                .currency {
                    overflow: hidden;
                    .currency-header {
                        margin: 16px 0;
                        height: 36px;
                        line-height: 36px;
                        background: #fff;
                        img {
                            float: left;
                        }
                        p {
                            padding-left: 46px;
                        }
                        div {
                            padding: 0 10px 0 46px;
                            font-size: 14px;
                            em {
                                position: relative;
                                float: right;
                                padding-right: 10px;
                                font-style: normal;
                                &::after {
                                    content: "";
                                    position: absolute;
                                    top: 11px;
                                    right: -10px;
                                    width: 0;
                                    height: 0;
                                    border-top: 6px solid transparent;
                                    border-right: 6px solid #ccc;
                                    border-bottom: 6px solid transparent;
                                    border-left: 6px solid transparent;
                                }
                            }
                        }
                    }
                    .currency-content {
                        background: #fff;
                        .balance {
                            position: relative;
                            padding-bottom: 14px;
                            border-bottom: 1px solid #eaeaea;
                            .rmb {
                                position: absolute;
                                top: 2px;
                                right: 0;
                                font-size: 14px;
                                color: #3d86e9;
                            }
                        }
                        .account-num {
                            clear: both;
                            overflow: hidden;
                            li {
                                float: left;
                                width: 50%;
                                margin: 20px 0;
                                text-align: center;
                                span {
                                    font-size: 14px;
                                    color: #999;
                                }
                            }
                        }
                    }
                }
            }
        }
        .exchange-rate {
            .accont-title {
                margin: 0;
                text-align: right;
                h3 {
                    font-weight: normal;
                }
                span {
                    font-size: 12px;
                    color: #999;
                }
            }
            .exchange-rate-list {
                margin-top: 20px;
                dl {
                    font-size: 14px;
                    &:first-of-type {
                        float: left;
                        dd {
                            color: #999;
                        }
                    }
                    &:last-of-type {
                        float: right;
                        text-align: right;
                        dt {
                            margin-bottom: 6px;
                        }
                        dd {
                            font-size: 12px;
                            color: #ccc;
                        }
                    }
                    dt {
                        margin-bottom: 4px;
                        color: #333;
                    }
                }
            }
        }
    }
    .account-right {
        float: right;
        width: 720px;
        .account-ad {
            position: relative;
            margin-bottom: 20px;
            .close-account-ad {
                position: absolute;
                top: 6px;
                right: 6px;
                z-index: 2;
                width: 24px;
                height: 24px;
                background: url(~assets/images/icon-close-ad.png) no-repeat;
                background-size: 23px 23px;
                cursor: pointer;
            }
        }
        .account-news {
            height: 40px;
            line-height: 40px;
            margin-bottom: 20px;
            padding-left: 16px;
            background: #fff;
            p {
                text-align: left;
                font-size: 14px;
                padding-left: 48px;
                background: url(~assets/images/icon-news.png) left center
                    no-repeat;
                color: #000;
                a {
                    color: #666;
                }
            }
        }
        .account-store {
            overflow: hidden;
            margin-bottom: 20px;
            background: #fff;
        }
        .account-record {
            overflow: hidden;
            background: #fff;
        }
        .list-content {
            position: relative;
            height: 450px;
            .show-all {
                position: absolute;
                right: 26px;
                bottom: 26px;
                font-size: 14px;
                color: #3d86e9;
            }
        }
        .no-data {
            img {
                margin-top: 70px;
            }
            h3 {
                margin-top: 50px;
                font-size: 24px;
                font-weight: normal;
                color: #3f87e9;
            }
            p {
                margin-top: 20px;
                font-size: 14px;
                color: #999;
            }
        }
        .data-list-layout {
            padding: 0 20px;
            .el-table::before {
                content: "";
                height: 0;
            }
            & /deep/ th {
                padding: 0;
                height: 36px;
                text-align: center;
                border-bottom: 1px solid transparent;
                background: #f5f5f5;
            }
            & /deep/ td {
                text-align: center;
                border-bottom: 1px solid transparent;
            }
            & /deep/ .el-table__empty-text {
                width: initial;
                &::before {
                    content: "";
                    display: block;
                    width: 191px;
                    height: 131px;
                    margin: 40px 0 0;
                    background: url(~assets/images/icon-status-no-data.png)
                        no-repeat;
                    background-size: 191px 131px;
                }
            }
            & /deep/ .el-button {
                width: 100%;
                span {
                    display: block;
                    width: 100%;
                }
            }
        }
    }
}
</style>
