<!DOCTYPE html>
|
<html lang="ja">
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<title>中扬 │ login of zoneyung crm</title>
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
|
<meta name="description" content="study of Instancing with three.js">
|
<meta name="keywords" content="undefined, Yoichi Kobayashi, WebGL, three.js">
|
<meta name="theme-color" content="#111111">
|
<meta name="msapplication-TileImage" content="/sketch-threejs/img/common/ms_tileimage.png">
|
<meta name="msapplication-TileColor" content="#111111">
|
<link rel="icon" type="image/x-icon" href="../static/image/favicon.ico" />
|
<link rel="stylesheet" href="../static/css/font/font-awesome-4.7.0/css/font-awesome.css">
|
<!-- <link rel="stylesheet" href="../static/css/main.min.css">-->
|
<link rel="stylesheet" href="../static/css/login.css">
|
<style>
|
#sidebar{
|
/*定位*/
|
position: absolute;
|
top: 50%;
|
right: 1%;
|
transform: translateY(-50%);
|
width: 20%;
|
height: 95%;
|
/*特效*/
|
background: rgba(255, 255, 255, 0.5);
|
border-radius: 5px;
|
color: #ffffff;
|
z-index: 99;
|
/*box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);*/
|
}
|
|
.login-contain {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
.login-box {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
width: 100%;
|
text-align: center;
|
}
|
|
#background_video {
|
position: absolute;
|
|
top: 50%; left: 39.55%;
|
transform: translate(-50%, -50%);
|
|
object-fit: cover;
|
height: 100%; width: 79%;
|
}
|
|
.s-video-all {
|
width: 100%;
|
position: relative;
|
}
|
|
.s-full {
|
position: absolute;
|
right: 10px;
|
bottom: 20px;
|
|
width: 40px;
|
color: white;
|
padding-right: 10px;
|
font-size: 20px;
|
cursor: pointer;
|
}
|
|
.videocontainer{
|
/*filter:brightness(0.5);*/
|
z-index: -999;
|
}
|
#girlwu{
|
margin-left: 58%;
|
margin-top: 45%;
|
z-index: 999;
|
}
|
.pText{
|
/*color: #0C0C0C;*/
|
font-weight:800;
|
font-style:italic;
|
mix-blend-mode: difference;
|
color: white;
|
/*filter: invert(100%)*/
|
/* normal、oblique 或 italic*/
|
}
|
|
@media screen and (min-width:300px) and (min-width:650px){
|
.pTextFont{
|
font-size:0.75rem;
|
}
|
}
|
@media screen and (min-width:650px) and (min-width:1080px){
|
.pTextFont{
|
font-size:1.125rem;
|
}
|
}
|
|
@media screen and (min-width:300px) and (min-width:1380px){
|
.pTextFont{
|
font-size:1.5rem;
|
}
|
}
|
|
</style>
|
</head>
|
<body>
|
<div class="">
|
<div class="videocontainer">
|
<video id="background_video" style="z-index: -999" src="../static/image/banner.mp4" height="100%" loop autoplay muted="false" controlslist="nodownload" disablepictureinpicture></video>
|
</div>
|
<div id="girlwu">
|
<p class="pText pTextFont">助力智能制造  赋能智慧物流</p>
|
<p class="pText pTextFont">  让制造与物流更高效</p>
|
</div>
|
<!-- <div class="l-page l-page--white " data-id="easy_glitch" style="z-index: 99">-->
|
<!-- <div style="position: fixed;-->
|
<!-- z-index: 100;-->
|
<!-- top: 22px;-->
|
<!-- left: 20px;">-->
|
<!-- <!– <img src="../static/image/logo.png" alt="" style="width: 15%">–>-->
|
<!-- </div>-->
|
<!-- <div class="p-preloader">-->
|
<!-- <div class="p-preloader__box p-preloader__box--white p-preloader__box--01"></div>-->
|
<!-- <div class="p-preloader__box p-preloader__box--white p-preloader__box--02"></div>-->
|
<!-- <div class="p-preloader__box p-preloader__box--white p-preloader__box--03"></div>-->
|
<!-- </div>-->
|
<!-- <div class="p-sketch-outline">-->
|
<!-- <h2 class="p-sketch-outline__title" style="z-index: 99">Customer Relationship Management</h2>-->
|
<!-- <p class="p-sketch-outline__date" style="z-index: 99">posted: 2018.01.01 / update: 2022.03.18-->
|
<!-- </p>-->
|
<!-- <p class="p-sketch-outline__description" style="z-index: 99">crm made with various simple objects.</p>-->
|
<!-- </div>-->
|
|
<!-- </div>-->
|
<!-- 侧边栏 -->
|
<div id="sidebar">
|
<div class="login-contain">
|
<div class="login-box">
|
<img src="../static/image/logo.png" alt="" style="width: 80%">
|
<!-- <span class="login100-form-title p-t-20 p-b-45">中扬立库</span>-->
|
<span class="login100-form-title p-t-20 p-b-45" style="margin: 15px 0;color: #868686;font-size: 24px">CRM</span>
|
<div id="passwdContent" style="display: none;">
|
<div class="wrap-input100 validate-input m-b-10" data-validate="请输入用户名">
|
<input id="username" class="input100" type="text" name="username" placeholder="username" autocomplete="off">
|
<span class="focus-input100"></span>
|
<span class="symbol-input100">
|
<i class="fa fa-user"></i>
|
</span>
|
</div>
|
<div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
|
<input id="password" class="input100" type="password" name="pass" placeholder="password">
|
<span class="focus-input100"></span>
|
<span class="symbol-input100">
|
<i class="fa fa-lock"></i>
|
</span>
|
</div>
|
<div style="text-align: right;">
|
<button onclick="switchLogin('sms')">短信登录</button>
|
</div>
|
<div class="container-login100-form-btn p-t-10">
|
<button id="passLogin" class="login100-form-btn login-btn">Login</button>
|
</div>
|
</div>
|
<div id="smsContent">
|
<div class="wrap-input100 validate-input m-b-10" data-validate="请输入手机号">
|
<input id="phone" class="input100" type="text" name="phone" placeholder="手机号" autocomplete="off">
|
<span class="focus-input100"></span>
|
<span class="symbol-input100">
|
<i class="fa fa-user"></i>
|
</span>
|
</div>
|
<div style="display: flex;justify-content: center;align-items: center;">
|
<div class="wrap-input100 validate-input m-b-10" style="width: 60%" data-validate="请输入验证码">
|
<input id="code" class="input100" type="text" name="code" placeholder="验证码">
|
<span class="focus-input100"></span>
|
<span class="symbol-input100">
|
<i class="fa fa-lock"></i>
|
</span>
|
</div>
|
<div style="width: 20%;">
|
<div id="getCodeBox"><button onclick="getCode()">获取验证码</button></div>
|
<div id="getCodeTime"></div>
|
</div>
|
</div>
|
<div style="text-align: right;">
|
<button onclick="switchLogin('password')">密码登录</button>
|
</div>
|
<div class="container-login100-form-btn p-t-10">
|
<button id="smsLogin" class="login100-form-btn login-btn">Login</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script type="text/javascript" src="../static/js/tools/main.min.js"></script>
|
<script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../static/js/tools/md5.js"></script>
|
<script type="text/javascript" src="../static/layer/layer.js"></script>
|
<script type="text/javascript" src="../static/js/common.js"></script>
|
<script>
|
console.log('%c CRM %c 1.0.0','background-color:rgb(53,73,94);color: #fff;border-radius:2px 0 0 2px;padding:2px 4px;','background-color:rgb(25,190,107);color: #fff;border-radius:0 2px 2px 0;padding:2px 4px;font: 9pt "Apercu Regular", Georgia, "Times New Roman", Times, serif;');
|
window.onload = function(){document.getElementById("username").focus();}
|
|
$(document).on('click','#passLogin', function () {
|
let username = $("#username").val();
|
if (username === "") {
|
layer.tips('请输入登录账号', '#username', {tips: [4, '#ff0000']});
|
return;
|
}
|
let password = $("#password").val();
|
if (password === "") {
|
layer.tips('请输入密码', '#password', {tips: [4, '#ff0000']});
|
return;
|
}
|
$.ajax({
|
url: baseUrl+"/login.action",
|
data: {
|
username: username,
|
password: hex_md5(password)
|
},
|
method: 'POST',
|
success: function (res) {
|
if (res.code === 200){
|
localStorage.setItem("token", res.data.token);
|
localStorage.setItem("nickname", res.data.nickname);
|
window.location.href = "index.html";
|
} else if (res.code === 10001) {
|
layer.tips(res.msg, '#username', {tips: [4, '#ff0000']});
|
} else if (res.code === 10002) {
|
layer.tips(res.msg, '#username', {tips: [4, '#ff0000']});
|
} else if (res.code === 10003) {
|
layer.tips(res.msg, '#password', {tips: [4, '#ff0000']});
|
} else {
|
layer.tips(res.msg, '#passLogin', {tips: [3, '#ff0000']});
|
}
|
}
|
});
|
});
|
|
$(document).on('click','#smsLogin', function () {
|
let phone = $("#phone").val();
|
if (phone === "") {
|
layer.tips('请输入手机号', '#phone', {tips: [4, '#ff0000']});
|
return;
|
}
|
let code = $("#code").val();
|
if (code === "") {
|
layer.tips('请输入验证码', '#code', {tips: [4, '#ff0000']});
|
return;
|
}
|
$.ajax({
|
url: baseUrl+"/smsLogin.action",
|
data: {
|
phone: phone,
|
code: code
|
},
|
method: 'POST',
|
success: function (res) {
|
if (res.code === 200){
|
localStorage.setItem("token", res.data.token);
|
localStorage.setItem("nickname", res.data.nickname);
|
window.location.href = "index.html";
|
} else if (res.code === 10001) {
|
layer.tips(res.msg, '#phone', {tips: [4, '#ff0000']});
|
} else if (res.code === 10002) {
|
layer.tips(res.msg, '#phone', {tips: [4, '#ff0000']});
|
} else {
|
layer.tips(res.msg, '#smsLogin', {tips: [3, '#ff0000']});
|
}
|
}
|
});
|
});
|
|
$('body').keydown(function () {
|
if (event.keyCode === 13) {
|
$(".login-btn").click();
|
}
|
});
|
|
function switchLogin(type) {
|
if(type === 'sms'){
|
//短信登录
|
$("#passwdContent").hide()
|
$("#smsContent").show()
|
}else {
|
//密码登录
|
$("#passwdContent").show()
|
$("#smsContent").hide()
|
}
|
}
|
|
function getCode() {
|
//获取验证码
|
let phone = $("#phone").val();
|
if (phone === "") {
|
layer.tips('请输入手机号', '#phone', {tips: [4, '#ff0000']});
|
return;
|
}
|
|
$.ajax({
|
url: baseUrl+"/smsCode/sendCode",
|
data: {
|
phone: phone
|
},
|
method: 'POST',
|
success: function (res) {
|
if (res.code === 200){
|
$("#getCodeBox").hide()
|
$("#getCodeTime").show()
|
let tmp = null;
|
let time = 60
|
tmp = setInterval(() => {
|
if (time <= 0) {
|
$("#getCodeTime").hide()
|
$("#getCodeBox").show()
|
clearInterval(tmp)
|
}else {
|
$("#getCodeTime").text(time + "秒")
|
time--;
|
}
|
},1000)
|
} else {
|
layer.tips(res.msg, '#getCodeBox', {tips: [3, '#ff0000']});
|
}
|
}
|
});
|
}
|
</script>
|
</body>
|
</html>
|
