<template>
    <el-container direction="vertical">
        <page-header></page-header>
        <el-container direction="vertical" style="padding: 0" class="page-content">
            <el-main class="main">
                <router-view v-if="!loading" />
            </el-main>
            <el-footer
                v-if="
                    this.$route.name !== 'security' &&
                    this.$route.name !== 'authentication' &&
                    this.$route.name !== 'userauthentication' &&
                    this.$route.name !== 'enterpriseauthentication' &&
                    this.$route.name !== 'transactionsuccess' &&
                    this.$route.name !== 'transaction' &&
                    this.$route.name !== 'addipc' &&
                    this.$route.name !== 'securitysuccess' &&
                    this.$route.name !== 'modifypad'
                "
            >
                <div class="footer center-content">
                    <div class="footer-l">
                        <router-link class="logo-link" :to="{ path: '/' }">
                            <img class="logo" src="../assets/nav_logo@3x (1).png" alt="" />
                        </router-link>
                        <div>
                            <div class="text1">加入创造者生态</div>
                            <div class="text2">让我们成为一批游戏NFT的弄潮儿</div>
                            <div class="text2">若您合您的团队想要铸造NFT,请联系：NFT@space.com</div>
                        </div>
                    </div>
                    <div class="footer-r">
                        <div class="slogan">
                            <img class="logo1" src="../assets/img/icon-weixin@3x.png" alt="" />
                            <img class="logo1" src="../assets/img/icon-weibo@3x.png" alt="" />
                            <img class="logo1" src="../assets/img/icon-qq@3x.png" alt="" />
                            <img class="logo1" src="../assets/img/icon-Twitter@3x.png" alt="" />
                        </div>
                        <div class="content">
                            <div class="content1">
                                <img class="logo2" src="../assets/img/icon_lianxiwomen@3x.png" alt="" />
                                <div class="name">联系我们</div>
                            </div>
                            <div class="content1">
                                <img class="logo2" src="../assets/img/icon_guanyuwomen@3x.png" alt="" />
                                <div class="name">关于我们</div>
                            </div>
                            <div class="content1">
                                <img class="logo2" src="../assets/img/icon_shangwuhezuo@3x.png" alt="" />
                                <div class="name">商务合作</div>
                            </div>
                            <div class="content1">
                                <img class="logo2" src="../assets/img/icon_yincangtiaokuan@3x.png" alt="" />
                                <div class="name">隐私条款</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="copyright">© 2012 - 2021 **** 版权所有</div>
            </el-footer>
            <div class="bottom" v-else></div>
        </el-container>
    </el-container>
</template>
<script>
import PageHeader from '../components/PageHeader.vue';
export default {
    data() {
        return {
            loading: false
        };
    },
    components: { PageHeader },
    mounted() {
        this.$EventBus.$on('loginSuccess', () => {
            this.loading = true;
            setTimeout(() => {
                this.loading = false;
            }, 1000);
        });
    }
};
</script>
<style lang="less" scoped>
.main {
    // min-height: 1300px;
    background: #1a1a1a;
    padding: 0;
    min-height: calc(100vh - 270px);
}
.bottom {
    background: #1a1a1a;
    height: 170px !important;
}
.el-footer {
    width: 100%;
    position: relative;
    background: #0f1111;
    // padding: 0 !important;
    height: 170px !important;
    display: flex;
    flex-direction: column;

    .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-grow: 1;
        .footer-l {
            display: flex;
            .logo {
                width: 170px;
                height: 60px;
                margin: 9px 30px 0 0;
            }
            .text1 {
                font-size: 18px;
                font-weight: 400;
                color: #ffffff;
                line-height: 25px;
                margin-bottom: 15px;
            }
            .text2 {
                font-size: 12px;
                font-weight: 400;
                color: #939599;
                line-height: 17px;
            }
        }
        .footer-r {
            .slogan {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-bottom: 40px;
                .logo1 {
                    width: 24px;
                    height: 24px;
                    margin-left: 40px;
                }
            }
            .content {
                display: flex;
                align-items: center;
                .content1 {
                    display: flex;
                    margin-left: 40px;
                    .logo2 {
                        width: 16px;
                        height: 16px;
                    }
                    .name {
                        font-size: 12px;
                        font-weight: 400;
                        color: #ffffff;
                        line-height: 16px;
                        margin-left: 10px;
                    }
                }
            }
        }
    }
}
.copyright {
    width: 100%;
    text-align: center;
    background: #0f1111;
    height: 36px;
    line-height: 36px;
    font-size: 12px;
    font-weight: 400;
    color: #565b66;
}
</style>
