ly
/
KYGK


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
  <link rel="icon" th:href="@{//images/logo.ico}">
  <title>Account Login</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      /* 以下是背景图片相关设置 */
      /*background-image: url('/images/loginbg.png');*/
/*      background-color: #0c0f13;*/
      background-image: url("/images/logo-v1.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
      overflow: hidden;
    }
    .container {
      position: relative;
      min-height: 100vh;
      width: 100%;
      background: rgba(255, 255, 255, 0.2); /* 设置半透明白色背景，使内容更易读 */

    }

    .logo {
      position: absolute;
      top: 50px;
      left: 50px;
      display: flex;
      align-items: center;
    }

    .logo img {
      width: 32px;
      height: 32px;
      margin-right: 10px;
    }

    .logo h2 {
      font-size: 24px;
      font-weight: 700;
      color: #333;
    }

    .login-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 350px;
      padding: 40px;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto 20px;
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .login-box h2 {
      font-size: 23px;
      font-weight: 700;
      color: #2980b9;
      margin-bottom: 20px;
    }

    .input-box {
      position: relative;
      width: 100%;
      margin-bottom: 20px;
    }

    .input-box input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;
      outline: none;
      font-size: 16px;
    }

    .input-box i {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      font-size: 18px;
      color: #ccc;
    }

    .login-btn {
      width: 100%;
      padding: 10px;
      background: #007bff;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 16px;
      cursor: pointer;
    }

    .login-box p {
      margin-top: 10px;
      font-size: 14px;
    }

    .login-box p a {
      color: #007bff;
      text-decoration: none;
    }
    .container .input-box .icon-2{
      background: url("/images/icon-login.png") no-repeat -54px 0;
    }
  </style>
</head>

<body>
<div class="container">
  <div class="logo">
    <img src="/images/logo.png" alt="User Icon">
    <h2>科研管控平台</h2>
  </div>
  <div class="login-box">
    <div class="avatar">
      <img src="/images/logo.png" alt="Avatar">
    </div>
    <h2>Welcome back</h2>
    <form class="layui-form">
      <div class="input-box">
        <span class="icon icon-2"></span>
        <input type="text" name="username" id="username" lay-verify="required" placeholder="账户名" maxlength="24" autocomplete="current-password"/>
        <i class="fas fa-user"></i>
      </div>
      <div class="input-box">
        <span class="icon icon-2"></span>
        <input type="password" placeholder="密码" id="password" name="password" lay-verify="required" maxlength="18" autocomplete="current-password">
        <i class="fas fa-lock"></i>
      </div>
      <button type="submit" class="login-btn" id="logn">登录</button>
     <!-- <p>Don't have an account? <a href="#">signup</a></p>-->
    </form>
  </div>
</div>
<script>
  const  inputs = [
          document.getElementById('username'),
          document.getElementById('password')
  ]

  inputs.forEach(input =>{
   input.addEventListener('input',function () {
     this.value = this.value.replace(/\s+/g,'');
   })
  })
</script>
<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/lib/md5/md5.min.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
<script>
  AjaxUtil.ctx = /*[[@{/}]]*/'';
  // 在页面加载完毕后调用拦截器函数
  layui.use(['form','layNotify','layer'],function () {
    var form = layer.form,
            layNotify = layui.layNotify;
    layer = layui.layer;

    const logn = document.getElementById('logn');
    const username = document.getElementById('username');
    const password = document.getElementById('password');
    // 登录
    logn.addEventListener('click',function () {
      console.log('我登录了');
      if (username.value != null){
        layer.msg('用户名不能为空！',{icon:2},function () {

        });
      }
      if (password.value != null){
        layer.msg('密码不能为空！',{icon:2},function () {

        })
      }

    });

  })

</script>
</body>
</html>