zhaobao
/
layui_back


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.4/css/layui.css">
</head>

<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    html, body {
        width: 100%;
        height: 100%;
        font-size: 10px;
    }

    img {
        display: block;
    }

    .index {
        width: 100%;
        height: 100%;
    }

    video {
        width: 100%;
        height: 100%;
        object-fit: fill;
        position: fixed;
        z-index: 10;
    }

    .index-box {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 20;

    }

    .logo {
        margin: 1rem 2rem;
    }

    .logo img {
        width: 26rem;
    }

    .logo-box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 70rem;
        height: 44rem;
        margin-top: -22rem;
        margin-left: -35rem;

    }

    .logo-box > img {
        width: 100%;
        position: absolute;
    }

    .main {
        width: 34.5rem;
        height: 41rem;
        position: absolute;
        z-index: 30;
        /*background: red;*/
        right: 2.4rem;
        bottom: 0px;
    }

    .title {
        font-size: 2rem;
        color: #222222;
        text-align: center;
        margin-top: 2rem;
        margin-bottom: 6rem;
    }

    .title span {
        color: #00A8FF;
    }

    .username {
        margin-left: 3.5rem;
    }

    .username .user-top {
        display: flex;
        font-size: 1.4rem;
        color: #555555;
    }

    .username .user-top img {
        width: 1.4rem;
        height: 1.6rem;
        margin-right: 1rem;
    }

    .username input {
        width: 25rem;
        height: 3.5rem;
        background: rgba(242, 242, 242, 1);
        border-radius: 0.4rem;
        border: none;
        font-size: 1.4rem;
        margin-top: 0.5rem;
        text-indent: 1rem;
        color: #555;
    }

    input::-webkit-input-placeholder {
        color: #999999;
    }

    .pwd {
        margin-top: 1.5rem;
    }

    .btn {
        margin-top: 4rem;
        margin-left: 3.5rem;
        overflow: hidden;

    }

    .btn-left {
        display: flex;
        align-items: center;
        float: left;
        margin-top: 1rem;
    }

    .btn-left input {
        width: 2rem;
        height: 2rem;

    }

    .btn-left span {
        margin-left: 0.5rem;
        font-size: 1.4rem;

    }

    .btn-right {
        float: right;
        margin-right: 5.8rem;
    }

    .btn-right p {
        width: 10rem;
        height: 3.5rem;
        background: linear-gradient(135deg, rgba(0, 168, 255, 1), rgba(26, 92, 225, 1));
        box-shadow: 0.1rem 0.1rem 1.6rem 0px rgba(34, 98, 225, 0.45);
        border-radius: 0.4rem;
        font-size: 1.4rem;
        color: #FFFFFF;
        text-align: center;
        line-height: 3.5rem;
    }

    .tip {
        margin-top: 4rem;
        text-align: center;
        font-size: 1.2rem;
        color: #999999;
        margin-right: 2.5rem;
    }


</style>

<body>
<div class="index">
    <video class="video_back" src="./img/background.mp4" type="video/mp4" muted autoplay="autoplay" loop="loop">
    </video>
    <div class="index-box">
        <div class="logo">
            <img src="./img/logo.png" alt="">
        </div>
        <div class="logo-box">
            <img src="./img/login_bg.png" alt="">
            <div class="main">
                <p class="title">
                    账号
                    <span>安全登录</span>
                </p>
                <div class="username">
                    <div class="user-top">
                        <img src="./img/icon_common_user.png" alt="">
                        <span>用户名</span>
                    </div>
                    <div class="bottom">
                        <input type="text" placeholder="请输入用户名">
                    </div>
                </div>

                <div class="username pwd">
                    <div class="user-top">
                        <img src="./img/icon_common_user.png" alt="">
                        <span>密 &nbsp;&nbsp;&nbsp;码</span>
                    </div>
                    <div class="bottom">
                        <input type="text" placeholder="请输入用户名">
                    </div>
                </div>

                <div class="btn">
                    <div class="btn-left">

                        <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
                        <span>记住密码</span>

                    </div>
                    <div class="btn-right">
                        <p>登录</p>
                    </div>
                </div>

                <div class="tip">
                    <p>
                        @2019陕西云康电子信息技术有限公司
                    </p>
                </div>

            </div>

        </div>
    </div>


</div>

</body>
</html>