master

分支 (1)

管理

管理

master

JavaEEHistory
/
work.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>西南石油大学电子邮件系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
         .page {
            background-color: white;
            height: 600px;
            border: 1px;
        }

        .page_head {
            background-color: #f5f5f5;
            height: 78px;
            width: 100%;
            position: relative;
        }
        .logo {
            margin-left: 465px;
            padding-top: 18px;
            position: absolute;
        }
        .help {
            margin-left: 1403px;
            margin-top: 30px;
            text-decoration: none;
            position: absolute;
        }

        .page_body {
            height: 460px;
            width: 964px;
            background-image: url(img/login_bg_02.jpg);
            margin-top: 15px;
            position: relative;
            margin-left: 478px;
        }

        .login {
            margin-top: 100px;
            margin-left: 550px;
            width: 380px;
            height: 310px;
            position: absolute;
            background-color: white;
        }

        .loginTitle {
            width: 380px;
            height: 38px;
            left: 549px;
            top: 52px;
            padding-top: 10px;
            background-color: rgba(213, 112, 20, 0.8);
            text-align: center;
            color: #fff;
            font-size: 16px;
            position: absolute;
        }


        #tip {
            height: 50px;
            width: 380px;
            background-color:white;
        }

        .textitem1,
        .textitem2 {
            position: absolute;
            height: 40px;
            left: 30px;
        }

        .textitem1 {
            top: 60px;
        }

        .textitem2 {
            top: 120px;
        }

        .btn {
            height: 38px;
            width: 100px;
            border: none;
            color: #fff;
            font-weight: 400;
            font-size: 20px;
            font-family: "微软雅黑";
        }

        .page_foot {
            background-color: #f5f5f5;
            height: 40px;
            width: 964px;
            margin: 0 auto;
            padding-top: 20px;
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="page">
        <div class="page_head">
            <div class="logo">
                <img src="img/login_logo.png" alt="">
            </div>
            <a href="" class="help">帮助</a>
        </div>
        <div class="page_body">
            <div class="loginTitle">
                <b>账户登录</b>
            </div>
            <div class="login">
                <div id="tip">
                    <br>
                    <h4 style="padding-left: 30px;">用户登录</h4>
                </div>

                <div class="textitem1">
                    <input type="text" name="zh" id="input_user" placeholder="用户名" style="width: 320px;height: 30px;"/>
                </div>
                <div class="textitem2">
                    <input type="password" name="zh" id="input_pwd" placeholder="密码" style="width: 320px;height: 30px;"/>
                </div>
                <div style="position: absolute;left: 30px;top: 180px;width: 320px;">
                    <span style="color: red;float: left;">学生选择@stu.swpu.edu.cn</span>
                </div>
                <div style="position: absolute;left: 30px;top: 220px;width: 320px;">
                    <input type="submit" class="btn" value="登录" onclick="fnLogin()" style="float: right;background: url(img/login_btn.jpg);" />
                </div>
            </div>
        </div>
        <div class="page_foot">
            西南石油大学
        </div>
    </div>

    <script>
        function funLogin(){
            var uname = document.getElementById('input_user');
            var pwd = document.getElementById('input_pwd');
            var tip = document.getElementById('tip');
            if(uname.value.length == 0 || pwd.value.length == 0)
            {
                tip.innerHTML = '请输入用户名或密码';
                tip.style.width='294px';
                tip.style.height='31px';
                tip.style.backgroundColor='#cc3300';
                tip.style.color='white';
                tip.style.textAlign='center';
                tip.style.lineHeight='31px';
                tip.style.marginLeft='45px';
                tip.style.marginTop='10px';
            }
            else if(uname.value == 'tom' && pwd.value == 123)
            {
                window.location = 'https://mail.swpu.edu.cn/';
            }
            else
            {
                tip.innerHTML = '您填写的用户名或密码错误';
                tip.style.width='294px';
                tip.style.height='31px';
                tip.style.backgroundColor='#cc3300';
                tip.style.color='white';
                tip.style.textAlign='center';
                tip.style.lineHeight='31px';
                tip.style.marginLeft='45px';
                tip.style.marginTop='10px';
            }
        }
    </script>
</body>
</html>