1、后台登录界面更换

2、增加问题方便后面界面调整
This commit is contained in:
2018-04-19 14:47:55 +08:00
parent 8087c74a13
commit 6a50ad9e49
191 changed files with 21073 additions and 368 deletions

View File

@@ -3,13 +3,16 @@
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<META content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>欢迎您登录SentCMS管理平台</title>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/libs/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/plugs/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/libs/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/admin/style.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/common.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/libs/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/plugs/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/admin/login.css"/>
<script type="text/javascript" src="__STATIC__/plugs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/plugs/layui/layui.all.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
@@ -18,76 +21,73 @@
<![endif]-->
</head>
<body id="login-page-full">
<div id="login-full-wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="login-box">
<div id="login-box-holder">
<div class="row">
<div class="col-xs-12">
<header id="login-header">
<div id="login-logo">
<img src="__STATIC__/images/logo.png" alt=""/>
</div>
</header>
<div id="login-box-inner">
<form role="form" method="post">
<div class="input-group">
<span class="input-group-addon"> <i class="fa fa-user"></i>
</span>
<input class="form-control" name="username" type="text" placeholder="登录账户">
</div>
<div class="input-group">
<span class="input-group-addon"> <i class="fa fa-key"></i>
</span>
<input type="password" name="password" class="form-control" placeholder="登录密码">
</div>
<div class="input-group">
<span class="input-group-addon"> <i class="fa fa-qrcode"></i>
</span>
<input type="text" name="verify" class="form-control" placeholder="验证码">
<span class="input-group-addon reloadverify"><img src="{:captcha_src()}" alt="验证码" height="40" class="verifyimg"></span>
</div>
<div class="row">
<div class="col-xs-12">
<button type="submit" class="btn btn-success col-xs-12">
<span class="hidden">
<i class="fa-loading"></i>
登 录 中 ...
</span>
<span class="show">登 录</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="login-box-footer">
<div class="row">
<div class="col-xs-12">
版权所有
&copy; <a href="http://www.tensent.cn" target="_blank">TenSent,Inc.</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="__STATIC__/js/jquery.js"></script>
<script src="__STATIC__/js/messager.js"></script>
<script type="text/javascript">
$(function(){
<div class="login-container">
/* 登陆表单获取焦点变色 */
$(".login-form").on("focus", "input", function(){
$(this).closest('.item').addClass('focus');
}).on("blur","input",function(){
$(this).closest('.item').removeClass('focus');
<!-- 动态云层动画 开始 -->
<div class="clouds-container">
<div class="clouds clouds-footer"></div>
<div class="clouds"></div>
<div class="clouds clouds-fast"></div>
</div>
<!-- 动态云层动画 结束 -->
<!-- 顶部导航条 开始 -->
<div class="header notselect">
<span class="title notselect">SentCMS <sup>v{$Think.SENTCMS_VERSION}</sup></span>
<ul>
<li><a href="javascript:void(0)" target="_blank">帮助</a></li>
<li>
<a href="http://sw.bos.baidu.com/sw-search-sp/software/9e6bc213b9d0b/ChromeStandalone_63.0.3239.132_Setup.exe">推荐使用谷歌浏览器</a>
</li>
</ul>
</div>
<!-- 顶部导航条 结束 -->
<!-- 页面表单主体 开始 -->
<div class="container">
<form onsubmit="return false;" method="post" class="content layui-form animated fadeInDown">
<div class="people">
<div class="tou"></div>
<div id="left-hander" class="initial_left_hand transition"></div>
<div id="right-hander" class="initial_right_hand transition"></div>
</div>
<ul>
<li class="username">
<i class="icon"></i>
<input required pattern="^\S{4,}$" name="username" value="admin" type="text" autofocus="autofocus" autocomplete="off" title="请输入4位及以上的字符" placeholder="请输入用户名/手机号码">
</li>
<li class="password">
<i class="icon"></i>
<input required pattern="^\S{4,}$" name="password" value="admin" type="password" autocomplete="off" title="请输入4位及以上的字符" placeholder="请输入密码">
</li>
<li class="verify">
<i class="fa fa-qrcode"></i>
<input required pattern="^\S{3,}$" name="verify" value="" type="text" autocomplete="off" title="请输入3位及以上的字符" placeholder="请输入验证码">
<span class="reloadverify"><img src="{:captcha_src()}" alt="验证码" height="38" class="verifyimg"></span>
</li>
<li class="text-center">
<button type="submit" class="btn btn-primary btn-block">登录</button>
</li>
</ul>
</form>
</div>
<!-- 页面表单主体 结束 -->
<!-- 底部版权信息 开始 -->
<div class="footer notselect">
腾速科技 &copy; TenSent.Icn
</div>
<!-- 底部版本信息 结束 -->
</div>
<script>
$(function () {
$('[name="password"]').on('focus', function () {
$('#left-hander').removeClass('initial_left_hand').addClass('left_hand');
$('#right-hander').removeClass('initial_right_hand').addClass('right_hand')
}).on('blur', function () {
$('#left-hander').addClass('initial_left_hand').removeClass('left_hand');
$('#right-hander').addClass('initial_right_hand').removeClass('right_hand')
});
//表单提交
@@ -104,14 +104,14 @@ $(function(){
function success(data){
if(data.code){
$.messager.show(data.msg, {placement: 'center',type:'success'});
setTimeout(function(){
layer.msg(data.msg, {time:3000, end:function(){
window.location.href = data.url;
},2000);
}});
} else {
$.messager.show(data.msg, {placement: 'center',type:'success'});
//刷新验证码
$(".reloadverify").click();
layer.msg(data.msg, {time:3000, end:function(){
//刷新验证码
$(".reloadverify").click();
}});
}
}
});
@@ -126,25 +126,6 @@ $(function(){
$(".verifyimg").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
}
});
//placeholder兼容性
//如果支持
function isPlaceholer(){
var input = document.createElement('input');
return "placeholder" in input;
}
//如果不支持
if(!isPlaceholer()){
$(".placeholder_copy").css({display:'block'})
$("#itemBox input").keydown(function(){
$(this).parents(".item").next(".placeholder_copy").css({display:'none'})
})
$("#itemBox input").blur(function(){
if($(this).val()==""){
$(this).parents(".item").next(".placeholder_copy").css({display:'block'})
}
})
}
});
</script>
</body>

View File

@@ -1,6 +1,7 @@
<link rel="stylesheet" type="text/css" href="__STATIC__/plugs/nanoscroller/nanoscroller.css">
<script src="__STATIC__/plugs/nanoscroller/jquery.nanoscroller.min.js"></script>
<script src="__STATIC__/js/bootstrap.js"></script>
<script src="__STATIC__/js/jquery.nanoscroller.min.js"></script>
<script src="__STATIC__/js/pace.min.js"></script>
<script src="__STATIC__/plugs/jquery/pace.min.js"></script>
<script src="__STATIC__/js/hopscotch.js"></script>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/libs/hopscotch.css">

View File

@@ -5,13 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>SentCMS网站管理系统后台</title>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/libs/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/plugs/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/libs/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/libs/nanoscroller.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/common.css"/>
<!-- <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,700,300|Titillium+Web:200,300,400' rel='stylesheet' type='text/css'> -->
<link rel="stylesheet" type="text/css" href="__STATIC__/css/admin/style.css"/>
<script src="__STATIC__/js/jquery.js"></script>
<script type="text/javascript" src="__STATIC__/plugs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/plugs/layui/layui.all.js"></script>
<script type="text/javascript">
var BASE_URL = "{:config('base_url')}"; //根目录地址
$(function(){