mirror of https://github.com/helloxz/onenav.git
13 changed files with 788 additions and 58 deletions
@ -0,0 +1,63 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml"> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
<title>OneNav后台登录</title> |
||||||
|
<meta name="generator" content="EverEdit" /> |
||||||
|
<meta name="author" content="" /> |
||||||
|
<meta name="keywords" content="" /> |
||||||
|
<meta name="description" content="" /> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
||||||
|
<link rel='stylesheet' href='static/layui/css/layui.css'> |
||||||
|
<link rel='stylesheet' href='templates/admin/static/style.css'> |
||||||
|
<style> |
||||||
|
body{ |
||||||
|
/* background:url(templates/admin/static/bg.jpg); */ |
||||||
|
background-color:rgba(0, 0, 51, 0.8); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
|
||||||
|
<div class="layui-container"> |
||||||
|
<div class="layui-row"> |
||||||
|
<div class="login-logo"> |
||||||
|
<h1>登录OneNav</h1> |
||||||
|
</div> |
||||||
|
<div class="layui-col-lg4 layui-col-md-offset4" style ="margin-top:4em;"> |
||||||
|
<form class="layui-form layui-form-pane" action=""> |
||||||
|
<div class="layui-form-item"> |
||||||
|
<label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label> |
||||||
|
<div class="layui-input-block"> |
||||||
|
<input type="text" name="user" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="layui-form-item"> |
||||||
|
<label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label> |
||||||
|
<div class="layui-input-block"> |
||||||
|
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="layui-form-item"> |
||||||
|
<button class="layui-btn" lay-submit lay-filter="login" style = "width:100%;">登录</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="layui-form-item layui-hide-sm layui-hide-md layui-hide-lg"> |
||||||
|
<button class="layui-btn" lay-submit lay-filter="mobile_login" style = "width:100%;">手机登录</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<script src = 'static/js/jquery.min.js'></script> |
||||||
|
<script src = 'static/layui/layui.js'></script> |
||||||
|
<script src="templates/admin/static/embed.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -1,63 +1,102 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml"> |
<html lang="en"> |
||||||
|
|
||||||
<head> |
<head> |
||||||
<meta charset="utf-8" /> |
<meta charset="UTF-8"> |
||||||
<title>OneNav后台登录</title> |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||||
<meta name="generator" content="EverEdit" /> |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
<meta name="author" content="" /> |
<link rel="stylesheet" href="./templates/admin/static/css/new.css"> |
||||||
<meta name="keywords" content="" /> |
|
||||||
<meta name="description" content="" /> |
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|
||||||
<link rel='stylesheet' href='static/layui/css/layui.css'> |
<link rel='stylesheet' href='static/layui/css/layui.css'> |
||||||
<link rel='stylesheet' href='templates/admin/static/style.css'> |
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> |
||||||
<style> |
<title>OneNav管理员登录</title> |
||||||
body{ |
<script> |
||||||
/* background:url(templates/admin/static/bg.jpg); */ |
window.onload = function () { |
||||||
background-color:rgba(0, 0, 51, 0.8); |
document.querySelector(".login").style.opacity = 1; |
||||||
|
|
||||||
} |
} |
||||||
|
</script> |
||||||
</style> |
|
||||||
</head> |
</head> |
||||||
<body> |
|
||||||
|
|
||||||
<div class="layui-container"> |
<body class="login"> |
||||||
<div class="layui-row"> |
<div class="root"> |
||||||
<div class="login-logo"> |
<section class="left"> |
||||||
<h1>登录OneNav</h1> |
<img class="cover" src="./templates/admin/static/image/backgroundLogin.png" /> |
||||||
|
</section> |
||||||
|
<section class="right"> |
||||||
|
<!-- PC版的样式 --> |
||||||
|
<h2>OneNav后台管理系统</h2> |
||||||
|
<div class="login_frame"> |
||||||
|
<div class="login_box"> |
||||||
|
<h4>管理登录</h4> |
||||||
|
<h6>亲爱的管理员欢迎回来！</h6> |
||||||
|
<form action="" method="post"> |
||||||
|
<div class="inp"> |
||||||
|
<span class="label">用户名</span> |
||||||
|
<input type="text" id = "user" name="user" placeholder="请输入账号" /> |
||||||
</div> |
</div> |
||||||
<div class="layui-col-lg4 layui-col-md-offset4" style ="margin-top:4em;"> |
<div class="inp"> |
||||||
<form class="layui-form layui-form-pane" action=""> |
<span class="label">用户密码</span> |
||||||
<div class="layui-form-item"> |
<input type="password" id = "password" name="password" placeholder="请输入密码" /> |
||||||
<label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label> |
|
||||||
<div class="layui-input-block"> |
|
||||||
<input type="text" name="user" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> |
|
||||||
</div> |
</div> |
||||||
|
<div class="submit"> |
||||||
|
<input type="submit" lay-submit lay-filter="new_login" class="submit" value="登录"> |
||||||
</div> |
</div> |
||||||
<div class="layui-form-item"> |
</form> |
||||||
<label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label> |
|
||||||
<div class="layui-input-block"> |
|
||||||
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> |
|
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
|
</section> |
||||||
<div class="layui-form-item"> |
|
||||||
<button class="layui-btn" lay-submit lay-filter="login" style = "width:100%;">登录</button> |
|
||||||
</div> |
</div> |
||||||
|
<div class="mobile"> |
||||||
<div class="layui-form-item layui-hide-sm layui-hide-md layui-hide-lg"> |
<!-- 手机版的样式 --> |
||||||
<button class="layui-btn" lay-submit lay-filter="mobile_login" style = "width:100%;">手机登录</button> |
<h1>OneNav</h1> |
||||||
|
<form action="" method="post"> |
||||||
|
<div class="inp"> |
||||||
|
<span class="label">用户名</span> |
||||||
|
<input type="text" id = "m_user" name="user" placeholder="请输入账号" /> |
||||||
</div> |
</div> |
||||||
|
<div class="inp"> |
||||||
|
<span class="label">用户密码</span> |
||||||
</form> |
<input type="password" id = "m_password" name="password" placeholder="请输入密码" /> |
||||||
</div> |
</div> |
||||||
|
<div class="submit"> |
||||||
|
<input type="submit" lay-submit lay-filter="new_mobile_login" class="submit" value="登录"> |
||||||
</div> |
</div> |
||||||
|
</form> |
||||||
</div> |
</div> |
||||||
|
<footer>© 2022 Powered by <a style = "color:#FFFFFF;padding-left:6px;" href = "https://www.onenav.top/" target = "_blank" title = "开源免费书签管理系统"> OneNav</a></footer> |
||||||
|
</body> |
||||||
|
<script> |
||||||
|
//自己封装的弹出框 |
||||||
|
function alt(text) { |
||||||
|
const t = document.createElement("div") |
||||||
|
t.innerText = text; |
||||||
|
Object.assign(t.style, { |
||||||
|
position: 'fixed', |
||||||
|
maxWidth: '300px', |
||||||
|
top: '50px', |
||||||
|
left: '0px', |
||||||
|
right: '0px', |
||||||
|
margin: '0 auto', |
||||||
|
color: '#000', |
||||||
|
background: '#fff', |
||||||
|
boxShadow: '0px 3px 4px rgba(197, 197, 197, 0.115)', |
||||||
|
padding: '15px 20px', |
||||||
|
borderRadius: '8px', |
||||||
|
transition: 'all .5s', |
||||||
|
opacity: 0, |
||||||
|
transform: 'translateY(-10px)' |
||||||
|
}) |
||||||
|
document.body.append(t) |
||||||
|
setTimeout(_ => { |
||||||
|
t.style.transform = 'translateY(10px)' |
||||||
|
t.style.opacity = 1; |
||||||
|
}, 100) |
||||||
|
setTimeout(_ => { |
||||||
|
t.style.transform = 'translateY(-10px)' |
||||||
|
t.style.opacity = 0; |
||||||
|
}, 3000) |
||||||
|
} |
||||||
|
</script> |
||||||
<script src = 'static/js/jquery.min.js'></script> |
<script src = 'static/js/jquery.min.js'></script> |
||||||
<script src = 'static/layui/layui.js'></script> |
<script src = 'static/layui/layui.js'></script> |
||||||
<script src="templates/admin/static/embed.js"></script> |
<script src="templates/admin/static/embed.js"></script> |
||||||
</body> |
|
||||||
</html> |
</html> |
||||||
@ -0,0 +1 @@ |
|||||||
|
*{margin:0;padding:0}.root{position:absolute;width:100vw;height:100%;background:#292929;border-radius:0px 0px 0px 0px;display:flex;align-items:center;justify-content:center}.root>h2{position:absolute;top:20px;left:20px;color:#fff}.info-box{margin:30px;width:700px;transition:all .5s;background:#f1f1f1;border-radius:16px 16px 16px 16px;opacity:1;padding:30px}.info-box>h3{font-size:26px;font-family:OPPOSans-Bold, OPPOSans;font-weight:bold;color:#000000;line-height:34px}.info-box>ul{margin-top:20px;list-style:none}.info-box>ul>li{margin-top:30px;display:flex}.info-box>ul>li>span:nth-child(1){flex-shrink:0;width:120px;height:34px;font-size:24px;font-family:Source Han Sans CN-Bold, Source Han Sans CN;font-weight:bold;color:#232323;line-height:34px}.info-box>ul>li>span:nth-child(2),.info-box>ul>li>div{width:100%;display:flex;margin-left:50px;font-size:24px;font-family:Source Han Sans CN-Regular, Source Han Sans CN;font-weight:400;color:#232323;line-height:34px}footer{width:100%;position:absolute;z-index:9;bottom:10px;display:flex;font-size:12px;align-items:center;justify-content:center;color:#9e9e9e}footer>img{margin-right:5px;width:20px;height:20px}[link]{display:flex;align-items:center}[link]>a{max-width:calc(100% - 140px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#0676d1 !important}[tips]{font-size:20px;font-family:Source Han Sans CN-Regular, Source Han Sans CN;font-weight:400;color:#464646 !important;line-height:34px}.next{margin-top:30px;display:flex;justify-content:flex-end}.next>button{width:96px;height:48px;background:#0088ea;border:none;border-radius:8px 8px 8px 8px;opacity:1;font-family:Source Han Sans CN-Regular, Source Han Sans CN;font-weight:400;color:#ffffff;line-height:24px;transition:all 0.3s}.next>button:hover{background-color:#3a96e2}.load{display:none}.load>span{position:relative;top:-2px}.loads{position:relative;top:4px;display:inline-block;width:20px;height:20px;animation:ss 2s linear infinite}@keyframes ss{to{transform:rotate(0deg)}from{transform:rotate(-360deg)}}.copy{margin-left:10px;position:relative;height:24px}.copy>svg{pointer-events:none}@media screen and (max-width: 800px){.info-box{width:calc(100vw - 30px) !important}.info-box>h3{font-size:16px;font-family:OPPOSans-Bold, OPPOSans;font-weight:bold;color:#000000;line-height:34px}.info-box>ul{margin-top:20px;list-style:none}.info-box>ul>li{margin-top:10px;display:flex}.info-box>ul>li>span:nth-child(1){flex-shrink:0;width:70px;height:34px;font-size:14px;font-family:Source Han Sans CN-Bold, Source Han Sans CN;font-weight:bold;color:#232323}.info-box>ul>li>span:nth-child(2),.info-box>ul>li>div{width:100%;max-height:60px;text-overflow:ellipsis;overflow:hidden;display:flex;margin-left:15px !important;font-size:14px;line-height:20px;font-family:Source Han Sans CN-Regular, Source Han Sans CN;font-weight:400;color:#232323;align-items:center}[link]{display:flex;align-items:center}[link]>a{max-width:calc(100% - 40px) !important;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#0676d1 !important}.next{margin-top:30px;display:flex;justify-content:flex-end}.next>button{width:96px;height:35px;background:#0088ea;border:none;border-radius:8px 8px 8px 8px;opacity:1;font-weight:400;color:#ffffff;line-height:24px;transition:all 0.3s}.next>button:hover{background-color:#3a96e2}} |
||||||
@ -0,0 +1,236 @@ |
|||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.root { |
||||||
|
position: absolute; |
||||||
|
width: 100vw; |
||||||
|
height:100%; |
||||||
|
background: #292929; |
||||||
|
border-radius: 0px 0px 0px 0px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
> h2 { |
||||||
|
position: absolute; |
||||||
|
top: 20px; |
||||||
|
left: 20px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
.info-box { |
||||||
|
margin: 30px; |
||||||
|
width: 700px; |
||||||
|
transition: all .5s; |
||||||
|
background: #f1f1f1; |
||||||
|
border-radius: 16px 16px 16px 16px; |
||||||
|
opacity: 1; |
||||||
|
padding: 30px; |
||||||
|
> h3 { |
||||||
|
font-size: 26px; |
||||||
|
font-family: OPPOSans-Bold, OPPOSans; |
||||||
|
font-weight: bold; |
||||||
|
color: #000000; |
||||||
|
line-height: 34px; |
||||||
|
} |
||||||
|
> ul { |
||||||
|
margin-top: 20px; |
||||||
|
list-style: none; |
||||||
|
> li { |
||||||
|
margin-top: 30px; |
||||||
|
display: flex; |
||||||
|
> span:nth-child(1) { |
||||||
|
flex-shrink: 0; |
||||||
|
width: 120px; |
||||||
|
height: 34px; |
||||||
|
font-size: 24px; |
||||||
|
font-family: Source Han Sans CN-Bold, Source Han Sans CN; |
||||||
|
font-weight: bold; |
||||||
|
color: #232323; |
||||||
|
line-height: 34px; |
||||||
|
} |
||||||
|
> span:nth-child(2), |
||||||
|
> div { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
margin-left: 50px; |
||||||
|
font-size: 24px; |
||||||
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN; |
||||||
|
font-weight: 400; |
||||||
|
color: #232323; |
||||||
|
line-height: 34px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
footer { |
||||||
|
width: 100%; |
||||||
|
position: absolute; |
||||||
|
z-index: 9; |
||||||
|
bottom: 10px; |
||||||
|
display: flex; |
||||||
|
font-size: 12px; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
color: #9e9e9e; |
||||||
|
> img { |
||||||
|
margin-right: 5px; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[link] { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
> a { |
||||||
|
max-width: calc(100% - 140px); |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
color: #0676d1 !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[tips] { |
||||||
|
font-size: 20px; |
||||||
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN; |
||||||
|
font-weight: 400; |
||||||
|
color: #464646 !important; |
||||||
|
line-height: 34px; |
||||||
|
} |
||||||
|
|
||||||
|
.next { |
||||||
|
margin-top: 30px; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
> button { |
||||||
|
width: 96px; |
||||||
|
height: 48px; |
||||||
|
background: #0088ea; |
||||||
|
border: none; |
||||||
|
border-radius: 8px 8px 8px 8px; |
||||||
|
opacity: 1; |
||||||
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN; |
||||||
|
font-weight: 400; |
||||||
|
color: #ffffff; |
||||||
|
line-height: 24px; |
||||||
|
transition: all 0.3s; |
||||||
|
&:hover { |
||||||
|
background-color: #3a96e2; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.load { |
||||||
|
display: none; |
||||||
|
> span { |
||||||
|
position: relative; |
||||||
|
top: -2px; |
||||||
|
} |
||||||
|
} |
||||||
|
.loads { |
||||||
|
position: relative; |
||||||
|
top: 4px; |
||||||
|
display: inline-block; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
animation: ss 2s linear infinite; |
||||||
|
} |
||||||
|
@keyframes ss { |
||||||
|
to { |
||||||
|
transform: rotate(0deg); |
||||||
|
} |
||||||
|
from { |
||||||
|
transform: rotate(-360deg); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.copy { |
||||||
|
margin-left: 10px; |
||||||
|
position: relative; |
||||||
|
height: 24px; |
||||||
|
> svg { |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 800px) { |
||||||
|
.info-box { |
||||||
|
width: calc(100vw - 30px) !important; |
||||||
|
// min-width: 376px; |
||||||
|
> h3 { |
||||||
|
font-size: 16px; |
||||||
|
font-family: OPPOSans-Bold, OPPOSans; |
||||||
|
font-weight: bold; |
||||||
|
color: #000000; |
||||||
|
line-height: 34px; |
||||||
|
} |
||||||
|
> ul { |
||||||
|
margin-top: 20px; |
||||||
|
list-style: none; |
||||||
|
> li { |
||||||
|
margin-top: 10px; |
||||||
|
display: flex; |
||||||
|
> span:nth-child(1) { |
||||||
|
flex-shrink: 0; |
||||||
|
width: 70px; |
||||||
|
height: 34px; |
||||||
|
font-size: 14px; |
||||||
|
font-family: Source Han Sans CN-Bold, Source Han Sans CN; |
||||||
|
font-weight: bold; |
||||||
|
color: #232323; |
||||||
|
} |
||||||
|
> span:nth-child(2), |
||||||
|
> div { |
||||||
|
width: 100%; |
||||||
|
max-height: 60px; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
margin-left: 15px !important; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 20px; |
||||||
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN; |
||||||
|
font-weight: 400; |
||||||
|
color: #232323; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
[link] { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
> a { |
||||||
|
max-width: calc(100% - 40px) !important; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
color: #0676d1 !important; |
||||||
|
} |
||||||
|
} |
||||||
|
.next { |
||||||
|
margin-top: 30px; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
> button { |
||||||
|
width: 96px; |
||||||
|
height: 35px; |
||||||
|
background: #0088ea; |
||||||
|
border: none; |
||||||
|
border-radius: 8px 8px 8px 8px; |
||||||
|
opacity: 1; |
||||||
|
font-weight: 400; |
||||||
|
color: #ffffff; |
||||||
|
line-height: 24px; |
||||||
|
transition: all 0.3s; |
||||||
|
&:hover { |
||||||
|
background-color: #3a96e2; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
*{margin:0;padding:0}.login{opacity:0;width:100vw;height:100vh;background:url("../image/bg.svg") no-repeat center/cover;display:flex;align-items:center;justify-content:center}.login>.root{position:absolute;width:70%;height:600px;transition:all 0.3s;box-shadow:0px 0px 10px rgba(250,250,250,0.227);border-radius:15px;overflow:hidden;display:flex}.login>.root .left{transition:all 0.3s;position:relative;width:50%;background:#000}.login>.root .left>.cover{position:absolute;display:block;width:100%;height:100%;object-fit:cover}.login>.root .right{transition:all 0.5s;min-width:550px;width:50%;display:flex;flex-direction:column;background:#fbfbfb}.login>.root .right>h2{margin:40px 20px 0px;text-align:center;font-size:32px;font-family:Source Han Sans CN-Bold, Source Han Sans CN;font-weight:bold;color:#2a2a2a;line-height:48px}.login>.root .right>h2:hover{color:#0088ea}.login>.root .right .login_frame{display:flex;justify-content:center}.login>.root .right .login_box{margin-top:100px;padding:20px;width:320px;height:300px;background:#ffffff;box-shadow:0px 3px 8px 1px rgba(0,0,0,0.16);border-radius:16px 16px 16px 16px;opacity:1}.login>.root .right .login_box>h4{width:411px;height:24px;font-size:24px;font-family:Source Han Sans CN-Regular, Source Han Sans CN;font-weight:400;color:#000000;line-height:24px}.login>.root .right .login_box>h6{margin-top:10px;width:411px;height:24px;font-size:16px;font-family:Helvetica Neue-常规体, Helvetica Neue;font-weight:normal;color:#323232;line-height:24px;margin-bottom:30px}.login>.root .right .login_box>form>.inp{margin-bottom:15px;display:flex;flex-direction:column}.login>.root .right .login_box>form>.inp>.label{height:16px;font-size:12px;font-family:Source Han Sans CN-Bold, Source Han Sans CN;font-weight:bold;color:#1a1a1a;line-height:16px;margin-bottom:5px}.login>.root .right .login_box>form>.inp>input{width:calc(100% - 30px);height:35px;border-radius:8px 8px 8px 8px;opacity:1;outline:none;border:1px solid #bfbfbf;padding:0px 15px}.login>.root .right .login_box>form>.submit{margin-top:25px}.login>.root .right .login_box>form>.submit>input{width:100%;height:40px;background:#0088ea;outline:none;border:1px solid #0088ea;border-radius:8px;font-size:16px;font-family:Source Han Sans CN-Regular, Source Han Sans CN;font-weight:400;color:#ffffff}.login .mobile{display:none}@media screen and (max-width: 1278px){.login .left{display:none}.login .right{min-width:100% !important;width:100%}}@media screen and (max-width: 658px){.login .root{display:none !important}.login .mobile{width:100%;height:100%;position:absolute;display:block}.login .mobile>h1{margin:20px;color:#ffffff}.login .mobile>form{position:relative;margin:15px;padding:15px;margin-top:100px}.login .mobile>form>.inp{margin-bottom:15px;display:flex;flex-direction:column}.login .mobile>form>.inp>.label{height:16px;font-size:13px;font-family:Source Han Sans CN-Bold, Source Han Sans CN;font-weight:bold;color:#1a1a1a;line-height:16px;margin-bottom:5px;color:#ffffff}.login .mobile>form>.inp>input{width:calc(100% - 30px);height:40px;border-radius:8px 8px 8px 8px;opacity:1;outline:none;border:1px solid #bfbfbf;padding:0px 15px}.login .mobile>form>.submit{margin-top:25px}.login .mobile>form>.submit>input{width:100%;height:40px;background:#0088ea;outline:none;border:1px solid #0088ea;border-radius:8px;font-size:16px;font-family:Source Han Sans CN-Regular, Source Han Sans CN;font-weight:400;color:#ffffff}}footer{width:100%;position:absolute;z-index:9;bottom:10px;display:flex;font-size:12px;align-items:center;justify-content:center;color:#9e9e9e}footer>img{margin-right:5px;width:20px;height:20px} |
||||||
@ -0,0 +1,220 @@ |
|||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.login { |
||||||
|
opacity: 0; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
background: url("../image/bg.png") no-repeat center/cover; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
> .root { |
||||||
|
position: absolute; |
||||||
|
width: 70%; |
||||||
|
height: 600px; |
||||||
|
transition: all 0.3s; |
||||||
|
box-shadow: 0px 0px 10px rgba(250, 250, 250, 0.227); |
||||||
|
border-radius: 15px; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
.left { |
||||||
|
transition: all 0.3s; |
||||||
|
position: relative; |
||||||
|
width: 50%; |
||||||
|
background: #000; |
||||||
|
> .cover { |
||||||
|
position: absolute; |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
} |
||||||
|
.right { |
||||||
|
transition: all 0.5s; |
||||||
|
min-width: 550px; |
||||||
|
width: 50%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
background: rgb(251, 251, 251); |
||||||
|
> h2 { |
||||||
|
margin: 40px 20px 0px; |
||||||
|
text-align: center; |
||||||
|
font-size: 32px; |
||||||
|
font-family: Source Han Sans CN-Bold, Source Han Sans CN; |
||||||
|
font-weight: bold; |
||||||
|
color: #2a2a2a; |
||||||
|
line-height: 48px; |
||||||
|
&:hover { |
||||||
|
color: #0088ea; |
||||||
|
} |
||||||
|
} |
||||||
|
.login_frame { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.login_box { |
||||||
|
margin-top: 100px; |
||||||
|
padding: 20px; |
||||||
|
width: 320px; |
||||||
|
height: 300px; |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.1599999964237213); |
||||||
|
border-radius: 16px 16px 16px 16px; |
||||||
|
opacity: 1; |
||||||
|
> h4 { |
||||||
|
width: 411px; |
||||||
|
height: 24px; |
||||||
|
font-size: 24px; |
||||||
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN; |
||||||
|
font-weight: 400; |
||||||
|
color: #000000; |
||||||
|
line-height: 24px; |
||||||
|
} |
||||||
|
> h6 { |
||||||
|
margin-top: 10px; |
||||||
|
width: 411px; |
||||||
|
height: 24px; |
||||||
|
font-size: 16px; |
||||||
|
font-family: Helvetica Neue-常规体, Helvetica Neue; |
||||||
|
font-weight: normal; |
||||||
|
color: #323232; |
||||||
|
line-height: 24px; |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
> form { |
||||||
|
> .inp { |
||||||
|
margin-bottom: 15px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
> .label { |
||||||
|
height: 16px; |
||||||
|
font-size: 12px; |
||||||
|
font-family: Source Han Sans CN-Bold, Source Han Sans CN; |
||||||
|
font-weight: bold; |
||||||
|
color: #1a1a1a; |
||||||
|
line-height: 16px; |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
> input { |
||||||
|
width: calc(100% - 30px); |
||||||
|
height: 35px; |
||||||
|
border-radius: 8px 8px 8px 8px; |
||||||
|
opacity: 1; |
||||||
|
outline: none; |
||||||
|
border: 1px solid #bfbfbf; |
||||||
|
padding: 0px 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
> .submit { |
||||||
|
margin-top: 25px; |
||||||
|
> input { |
||||||
|
width: 100%; |
||||||
|
height: 40px; |
||||||
|
background: #0088ea; |
||||||
|
outline: none; |
||||||
|
border: 1px solid #0088ea; |
||||||
|
border-radius: 8px; |
||||||
|
font-size: 16px; |
||||||
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN; |
||||||
|
font-weight: 400; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.mobile { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
@media screen and (max-width: 1278px) { |
||||||
|
.left { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.right { |
||||||
|
min-width: 100% !important ; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
@media screen and (max-width: 658px) { |
||||||
|
.root { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
.mobile { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
display: block; |
||||||
|
> h1 { |
||||||
|
margin: 20px; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
> form { |
||||||
|
position: relative; |
||||||
|
margin: 15px; |
||||||
|
padding: 15px; |
||||||
|
margin-top:100px; |
||||||
|
> .inp { |
||||||
|
margin-bottom: 15px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
> .label { |
||||||
|
height: 16px; |
||||||
|
font-size: 13px; |
||||||
|
font-family: Source Han Sans CN-Bold, Source Han Sans CN; |
||||||
|
font-weight: bold; |
||||||
|
color: #1a1a1a; |
||||||
|
line-height: 16px; |
||||||
|
margin-bottom: 5px; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
> input { |
||||||
|
width: calc(100% - 30px); |
||||||
|
height: 40px; |
||||||
|
border-radius: 8px 8px 8px 8px; |
||||||
|
opacity: 1; |
||||||
|
outline: none; |
||||||
|
border: 1px solid #bfbfbf; |
||||||
|
padding: 0px 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
> .submit { |
||||||
|
margin-top: 25px; |
||||||
|
> input { |
||||||
|
width: 100%; |
||||||
|
height: 40px; |
||||||
|
background: #0088ea; |
||||||
|
outline: none; |
||||||
|
border: 1px solid #0088ea; |
||||||
|
border-radius: 8px; |
||||||
|
font-size: 16px; |
||||||
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN; |
||||||
|
font-weight: 400; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
footer { |
||||||
|
width: 100%; |
||||||
|
position: absolute; |
||||||
|
z-index: 9; |
||||||
|
bottom: 10px; |
||||||
|
display: flex; |
||||||
|
font-size: 12px; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
color: #9e9e9e; |
||||||
|
> img { |
||||||
|
margin-right: 5px; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 129 KiB |
|
After Width: | Height: | Size: 105 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
Loading…
Reference in new issue