<template>
    <div class="page_login">
        <div class="top_title">
            <div class="top_logo">
                <img src="" alt="">
            </div>
            <div class="gap_line"></div>
            <div class="top_title_text">
                南方电网机具租赁共享平台
            </div>
        </div>
        <div class="login_container">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="账号登录" name="account">
                    <el-form :model="loginForm">
                        <el-form-item>
                            <el-input v-model.trim="loginForm.userName" placeholder="请输入账号" clearable>
                                <template #prepend>
                                    <img class="pre_icon" src="/src/assets/img/userIcon.png" />
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item name="phone">
                            <el-input v-model.trim="loginForm.password" placeholder="请输入密码" clearable>
                                <template #prepend>
                                    <img class="pre_icon" src="/src/assets/img/passwordIcon.png" />
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" size="small" style="display: block;width: 100%;">
                        立即登陆
                    </el-button>


                </el-tab-pane>
                <el-tab-pane label="手机登录" name="second">Config</el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
const activeName = ref("account")
const loginForm = reactive({
    userName: "",
    password: ""
})
</script>

<style scoped lang="scss">
$loginColor: "#002F7B";

.login_container {
    width: 792px;
    height: 545px;
    background-color: #fff;
}

.page_login {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    background-image: url('../../assets/img/loginbg.png');
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;

}

:deep(.el-input-group__prepend) {
    background-color: #fff;
    border-color: #fff;
    box-shadow: none;
}

:deep(.el-input__wrapper) {

    box-shadow: none;

    .el-input__inner {
        height: 85px;
    }
}

.pre_icon {
    width: 30px;
    height: 30px;
}

:deep(.el-tabs) {
    height: 146px;
    .el-tabs__nav{
        height: 146px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        .el-tabs__item {
            width: 50%;
        }
        .is-active {
        color: #002F7B !important;

    }
    }
        

    .el-tabs__active-bar {
        background-color: rgba(255,255,255,0) !important;
        &::after{
            content:"",
            
        }

    }
}
</style>
