<template>
    <el-container>
        <el-header class="header">
            <div class="head-title">
                <img src="../../assets/login_bg_01.png" class="bg-01" />
                <img src="../../assets/pc_top_bg_02.png" class="bg-02" />
                <div class="wrapper">
                    <img src="../../assets/pc_logo.png" class="logo" />
                </div>
            </div>
        </el-header>
        <el-main>
            <router-view></router-view>
        </el-main>
        <Footer></Footer>
    </el-container>
</template>

<script>
import Footer from '../../components/footer';
export default {
    components: { Footer },
    name: 'loginBase'
};
</script>
<style lang="less" scoped>
.header {
    height: 220px !important;
    padding: 0;
    .head-title {
        height: 220px;

        background: linear-gradient(180deg, #ffcc72 0%, #fff7ea 72%, #ffffff 100%);
        position: relative;
        .bg-01 {
            position: absolute;
            top: 0;
            left: 0;
            width: 154px;
            height: 220px;
        }
        .bg-02 {
            position: absolute;
            top: 0;
            right: 0;
            width: 580px;
            height: 150px;
        }
        .logo {
            width: 630px;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            bottom: 64px;
        }
        .wrapper {
            width: 1200px;
            margin: 0 auto;
            position: relative;
            height: 100%;
        }
    }
}
.el-main {
    min-height: 700px;
    background: white;
    padding: 0;
}

.user-info-drop-down-menu {
    width: 136px;
    margin: 8px auto -12px auto;
    .btn-manage {
        width: 120px;
        height: 38px;
        background: rgba(234, 45, 45, 0.12);
        .flex();
        justify-content: center;
        font-size: 14px;
        color: @prim;
        cursor: pointer;
        margin: auto;
    }
    .btn {
        width: 120px;
        cursor: pointer;
        line-height: 60px;
        height: 60px;
        text-align: center;
        border-bottom: 1px solid @border;
        margin: auto;
        color: black;
        &:last-child {
            border: none;
        }
    }
}
</style>
