<template>
    <div class="main">
        <div class="video">
            <video autoplay loop muted class="login-video">
                <source src="@/assets/background.mp4" type="video/mp4">
            </video>
        </div>
        <img class="logo" src="@/assets/images/logo.png">
        <img class="righttop" src="@/assets/images/ico01.png">
        <div class="login">
            <img class="logintop" src="@/assets/images/ico02.png">
            <h3>智慧供应商管理系统</h3>
            <div class="inputs">
                <input placeholder="请输入登录账号">
            </div>
            <div class="inputs">
                <input placeholder="请输入账号密码">
            </div>
            <div class="inputs">
                <input placeholder="" class="small">
                <div class="login-code">
                    <img :src="codeUrl" @click="getCode" class="login-code-img"/>
                </div>
            </div>
            <div class="loginin">登录</div>
            <img class="loginbot" src="@/assets/images/ico03.png">
        </div>
        <footers/>
    </div>
</template>

<script>
    import footers from '@/components/foots'

    export default {
        components: {footers},
        data() {
            return {};
        },
        computed: {},
        mounted() {
        },
        methods: {}
    }
</script>

<style scoped lang="scss">
    .main {
        position: relative;
        height: 100%;
        width: 100%;

        .login-video {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;

            source {
                width: 100%;
                height: 100%;
            }
        }
        .bot{
        position: fixed;
        bottom: 0;
        left: 0;}
        .logo{
            position: absolute;
            left: 16px;
            top: 16px;

        }
        .righttop{
            position: absolute;
            right: 16px;
            top: 17px;
            z-index: 1;
        }
        .login{
            width: 426px;
            height: 451px;
            background: #FFFFFF;
            border-radius: 8px;
            opacity: 1;
            position: absolute;
            top: 50%;
            margin-top: -225px;
            right: 61px;
            .logintop{
                position: absolute;
                left: 12px;
                top: 12px;
            }
            >h3{
                font-size: 24px;
                font-family: AlibabaPuHuiTi-Bold, AlibabaPuHuiTi;
                font-weight: bold;
                color: #0081FF;
                text-align: center;
                margin-top: 60px;
                margin-bottom: 40px;
                line-height: 17px;
            }
            .inputs{
                margin-bottom: 24px;
                padding:0 43px;
                input{
                    width: 338px;
                    height: 46px;
                    background: #F8F8F8;
                    border-radius: 8px;
                    border: 1px solid #F4F4F4;
                    text-indent: 16px  ;
                    outline: none;
                    font-size: 14px;
                    padding: 0;
                }
                input::-webkit-input-placeholder,
                textarea::-webkit-input-placeholder {
                    color: #9E9E9E;
                }
                .small{
                    width: 191px;

                }
                .login-code{
                    float: right;
                    width: 131px;
                    height: 46px;
                    background: #FFFFFF;
                    border-radius: 8px;
                    border: 1px solid #F1F1F1;
                }
            }
            .loginin{
                width: 340px;
                height: 48px;
                background: #0081FF;
                border-radius: 8px;
                margin: 0 auto;
                line-height: 48px;
                font-size: 16px;
                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
                text-align: center;
            }
            .loginbot{
                position: absolute;
                bottom: 32px;
                left: 169px;
            }
        }
    }
</style>
