181 lines
6.5 KiB
HTML
181 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>登录</title>
|
|
<link rel="stylesheet" href="./login.css" />
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="account">
|
|
<div class="account-container">
|
|
<div class="account-wrap-login">
|
|
<div class="login-pic">
|
|
<h1 class="login-title">云恒WMS</h1>
|
|
<h4 class="login-subtitle">
|
|
赋能开发者，助力企业发展，全方位提供数据中台解决方案!
|
|
</h4>
|
|
</div>
|
|
<div class="login-form">
|
|
<div class="login-form-container">
|
|
<div class="account-top">
|
|
<div class="account-top-desc">用户登录</div>
|
|
</div>
|
|
<div class="login-content">
|
|
<div class="account-tab-box">
|
|
<div class="tab-link active" data-tab="account">账号登录</div>
|
|
<div class="tab-link" data-tab="phone">手机登录</div>
|
|
<div class="tab-link" data-tab="qr">扫码登录</div>
|
|
</div>
|
|
<div class="tab-content active" id="account">
|
|
<!-- 账号登录表单 -->
|
|
<input
|
|
type="text"
|
|
placeholder="请输入登录账号"
|
|
class="input-icon account-icon"
|
|
/>
|
|
<input
|
|
type="password"
|
|
placeholder="请输入登录密码"
|
|
class="input-icon password-icon"
|
|
/>
|
|
<div class="code-box">
|
|
<input
|
|
type="text"
|
|
placeholder="请输入验证码"
|
|
class="input-icon code-icon"
|
|
/>
|
|
<img src="./imgs/code.png" />
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="checkbox1" />
|
|
<label for="checkbox1">记住密码</label>
|
|
</div>
|
|
<div><button class="btns">登录</button></div>
|
|
<div class="other-login">
|
|
<div class="flex items-center">
|
|
<span>其他登录方式</span>
|
|
</div>
|
|
<div style="cursor: pointer" class="rigister-btn">
|
|
注册账号
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-content" id="phone">
|
|
<!-- 手机号登录表单 -->
|
|
<input
|
|
type="text"
|
|
placeholder="请输入手机号码"
|
|
class="input-icon account-icon"
|
|
/>
|
|
<div class="phone-box">
|
|
<input
|
|
type="password"
|
|
placeholder="请输入验证码"
|
|
class="input-icon code-icon"
|
|
/>
|
|
<button able="able" class="getCode">获取验证码</button>
|
|
</div>
|
|
<button class="btns">登录</button>
|
|
</div>
|
|
<div class="tab-content" id="qr">
|
|
<!-- 扫码登录内容 -->
|
|
<div class="qrCode-box">
|
|
<div class="qr-img">
|
|
<img src="./imgs/qr.png" />
|
|
</div>
|
|
<div class="qr-text">刷新二维码</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rigister-content">
|
|
<!-- 注册登录表单 -->
|
|
<input
|
|
type="text"
|
|
placeholder="请输入用户名"
|
|
class="input-icon account-icon"
|
|
/>
|
|
<input
|
|
type="password"
|
|
placeholder="请输入手机号"
|
|
class="input-icon phone-icon"
|
|
/>
|
|
<div class="phone-box">
|
|
<input
|
|
type="password"
|
|
placeholder="请输入验证码"
|
|
class="input-icon code-icon"
|
|
/>
|
|
<button able="able" class="getCode">获取验证码</button>
|
|
</div>
|
|
<input
|
|
type="password"
|
|
placeholder="请输入密码"
|
|
class="input-icon password-icon"
|
|
/>
|
|
<input
|
|
type="password"
|
|
placeholder="请再次输入密码"
|
|
class="input-icon password-icon"
|
|
/>
|
|
<div>
|
|
<input type="checkbox" id="checkbox1" />
|
|
<label for="checkbox1">我同意隐私协议</label>
|
|
</div>
|
|
<button class="btns">注册</button>
|
|
</div>
|
|
</div>
|
|
<div class="corner-box">
|
|
<img src="./imgs/img1.jpg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
<script>
|
|
$(document).ready(function () {
|
|
$(".tab-link").click(function () {
|
|
$(".tab-link").removeClass("active");
|
|
$(".tab-content").removeClass("active").hide();
|
|
$(this).addClass("active");
|
|
$("#" + $(this).data("tab")).addClass("active").show();
|
|
});
|
|
$(".corner-box,.rigister-btn").click(function () {
|
|
$(".login-content").toggle();
|
|
$(".rigister-content").toggle();
|
|
if ($(".login-content").is(":visible")) {
|
|
$(".account-top-desc").html("用户登录");
|
|
$(".corner-box > img").attr("src", "./imgs/img1.jpg");
|
|
} else {
|
|
$(".account-top-desc").html("用户注册");
|
|
$(".corner-box > img").attr("src", "./imgs/img2.jpg");
|
|
}
|
|
});
|
|
|
|
$('.getCode').click(function(){
|
|
let mesdong=null;
|
|
let mestime=60;
|
|
if($(this).attr('able')=="able") {
|
|
$(this).attr('able',"disable");
|
|
$(this).css('cursor','not-allowed');
|
|
$(this).html(mestime+"秒后重发");
|
|
let $this = $(this)
|
|
mesdong = setInterval(function() {
|
|
mestime-=1;
|
|
if(mestime<0){
|
|
$this.attr('able',"able");
|
|
$this.css('cursor','pointer');
|
|
$this.html('获取验证码');
|
|
mestime=60;
|
|
clearInterval(mesdong);
|
|
}else{
|
|
$this.html(mestime+"秒后重发");
|
|
};
|
|
}, 1000);
|
|
}
|
|
})
|
|
});
|
|
</script> |