layui-簡單的登錄注冊界面
register.html 源代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
<!
DOCTYPE
html>
<
html
lang="en">
<
head
>
<
meta
charset="UTF-8">
<
meta
name="renderer" content="webkit">
<
meta
http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<
meta
name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<
title
>注冊頁</
title
>
<
link
rel="stylesheet" href="../frame/layui/css/layui.css">
<
link
rel="stylesheet" href="../frame/static/css/style.css">
<
link
rel="icon" href="../frame/static/image/code.png">
</
head
>
<
body
>
<
div
class="login-main">
<
header
class="layui-elip" style="width: 82%">注冊頁</
header
>
<!-- 表單選項 -->
<
form
class="layui-form">
<
div
class="layui-input-inline">
<!-- 用戶名 -->
<
div
class="layui-inline" style="width: 85%">
<
input
type="text" id="user" name="account" required lay-verify="required" placeholder="請輸入用戶名" autocomplete="off" class="layui-input">
</
div
>
<!-- 對號 -->
<
div
class="layui-inline">
<
i
class="layui-icon" id="ri" style="color: green;font-weight: bolder;" hidden></
i
>
</
div
>
<!-- 錯號 -->
<
div
class="layui-inline">
<
i
class="layui-icon" id="wr" style="color: red; font-weight: bolder;" hidden>ဆ</
i
>
</
div
>
</
div
>
<!-- 密碼 -->
<
div
class="layui-input-inline">
<
div
class="layui-inline" style="width: 85%">
<
input
type="password" id="pwd" name="password" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input">
</
div
>
<!-- 對號 -->
<
div
class="layui-inline">
<
i
class="layui-icon" id="pri" style="color: green;font-weight: bolder;" hidden></
i
>
</
div
>
<!-- 錯號 -->
<
div
class="layui-inline">
<
i
class="layui-icon" id="pwr" style="color: red; font-weight: bolder;" hidden>ဆ</
i
>
</
div
>
</
div
>
<!-- 確認密碼 -->
<
div
class="layui-input-inline">
<
div
class="layui-inline" style="width: 85%">
<
input
type="password" id="rpwd" name="repassword" required lay-verify="required" placeholder="請確認密碼" autocomplete="off" class="layui-input">
</
div
>
<!-- 對號 -->
<
div
class="layui-inline">
<
i
class="layui-icon" id="rpri" style="color: green;font-weight: bolder;" hidden></
i
>
</
div
>
<!-- 錯號 -->
<
div
class="layui-inline">
<
i
class="layui-icon" id="rpwr" style="color: red; font-weight: bolder;" hidden>ဆ</
i
>
</
div
>
</
div
>
<
div
class="layui-input-inline login-btn" style="width: 85%">
<
button
type="submit" lay-submit lay-filter="sub" class="layui-btn">注冊</
button
>
</
div
>
<
hr
style="width: 85%" />
<
p
style="width: 85%"><
a
href="login.html" class="fl">已有賬號？立即登錄</
a
><
a
href="javascript:;" class="fr">忘記密碼？</
a
></
p
>
</
form
>
</
div
>
<
script
src="../frame/layui/layui.js"></
script
>
<
script
type="text/javascript">
layui.use(['form','jquery','layer'], function () {
var form = layui.form;
var $ = layui.jquery;
var layer = layui.layer;
//添加表單失焦事件
//驗證表單
$('#user').blur(function() {
var user = $(this).val();
//alert(user);
$.ajax({
url:'checkUser.php',
type:'post',
dataType:'text',
data:{user:user},
//驗證用戶名是否可用
success:function(data){
if (data == 1) {
$('#ri').removeAttr('hidden');
$('#wr').attr('hidden','hidden');
} else {
$('#wr').removeAttr('hidden');
$('#ri').attr('hidden','hidden');
layer.msg('當前用戶名已被占用! ')
}
}
})
});
// you code ...
// 為密碼添加正則驗證
$('#pwd').blur(function() {
var reg = /^[\w]{6,12}$/;
if(!($('#pwd').val().match(reg))){
//layer.msg('請輸入合法密碼');
$('#pwr').removeAttr('hidden');
$('#pri').attr('hidden','hidden');
layer.msg('請輸入合法密碼');
}else {
$('#pri').removeAttr('hidden');
$('#pwr').attr('hidden','hidden');
}
});
//驗證兩次密碼是否一致
$('#rpwd').blur(function() {
if($('#pwd').val() != $('#rpwd').val()){
$('#rpwr').removeAttr('hidden');
$('#rpri').attr('hidden','hidden');
layer.msg('兩次輸入密碼不一致!');
}else {
$('#rpri').removeAttr('hidden');
$('#rpwr').attr('hidden','hidden');
};
});
//
//添加表單監聽事件,提交注冊信息
form.on('submit(sub)', function() {
$.ajax({
url:'reg.php',
type:'post',
dataType:'text',
data:{
user:$('#user').val(),
pwd:$('#pwd').val(),
},
success:function(data){
if (data == 1) {
layer.msg('注冊成功');
///location.href = "login.html";
}else {
layer.msg('注冊失敗');
}
}
})
//防止頁面跳轉
return false;
});
});
</
script
>
</
body
>
</
html
>
|
reg.php源代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<?
php
#接收表單注冊數據
$user = $_POST['user'];
$pwd = $_POST['pwd'];
#連接數據庫
$db = new mysqli('localhost','root','','0104test');
#設置查詢數據格式
$db->query("SET NAMES UTF8");
#編輯sql語句
$sql = "insert into t_user values (null,\"$user\",\"$pwd\",\"php小白\")";
#執行sql 語句
$result = $db->query($sql);
#判斷是否注冊成功並返回數據
if ($result) {
echo "1";
}else{
echo "0";
}
?>
|
checkUser.php源代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<?php
//接收表單數據
$user
=
$_POST
[
'user'
];
//數據庫連接語句, 參數包含:服務器地址,用戶名,登錄密碼,數據庫名稱,默認端口)
$db
=
new
mysqli(
'localhost'
,
'root'
,
''
,
'0104test'
,
'3306'
);
//判斷是否成功連接數據庫
if
(mysqli_connect_error()) {
echo
'0'
;
exit
();
}
//設置數據庫查詢數據編碼格式 (相當重要) 如果不設置從數據庫查出來的數據就是亂碼
$db
->query(
"SET NAMES UTF8"
);
//查詢語句
$sql
=
"select * from t_user WHERE uname = \"$user\""
;
//echo $sql;
//執行查詢語句
$result
=
$db
->query(
$sql
);
//執行 fetch_assoc()函數
$na
=
$result
->fetch_assoc();
//判斷用戶名是否存在
if
(
$na
== null){
echo
'1'
;
}
else
{
echo
'0'
;
}
?>
|
login.html源代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<!
DOCTYPE
html>
<
html
lang="en">
<
head
>
<
meta
charset="UTF-8">
<
title
>登錄頁</
title
>
<
link
rel="stylesheet" href="../layui/css/layui.css">
<
link
rel="stylesheet" href="../frame/static/css/style.css">
</
head
>
<
body
>
<
div
class="login-main">
<
header
class="layui-elip">登錄</
header
>
<
form
class="layui-form">
<
div
class="layui-input-inline">
<
input
type="text" name="account" required lay-verify="required" placeholder="用戶名" autocomplete="off"
class="layui-input">
</
div
>
<
div
class="layui-input-inline">
<
input
type="password" name="password" required lay-verify="required" placeholder="密碼" autocomplete="off"
class="layui-input">
</
div
>
<
div
class="layui-input-inline login-btn">
<
button
lay-submit lay-filter="login" class="layui-btn">登錄</
button
>
</
div
>
<
hr
/>
<!--<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-primary">QQ登錄</button>
</div>
<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-normal">微信登錄</button>
</div>-->
<
p
><
a
href="register.html" class="fl">立即注冊</
a
><
a
href="javascript:;" class="fr">忘記密碼？</
a
></
p
>
</
form
>
</
div
>
<
script
src="../layui/layui.js"></
script
>
<
script
type="text/javascript">
layui.use(['form','layer','jquery'], function () {
// 操作對象
var form = layui.form;
var $ = layui.jquery;
form.on('submit(login)',function (data) {
// console.log(data.field);
$.ajax({
url:'login.php',
data:data.field,
dataType:'text',
type:'post',
success:function (data) {
if (data == '1'){
location.href = "../index.php";
}else{
layer.msg('登錄名或密碼錯誤');
}
}
})
return false;
})
});
</
script
>
</
body
>
</
html
>
|
login.php源代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<?php
session_start();
//獲取post的數據
$account
=
$_POST
[
'account'
];
$pwd
=
$_POST
[
'password'
];
//連接數據庫
$db
=
new
mysqli(
'localhost'
,
'root'
,
''
,
'0104test'
);
$db
->query(
"SET NAMES UTF8"
);
$sql
=
"select * from t_user where uname = \"{$account}\""
;
$result
=
$db
->query(
$sql
);
$user
=
$result
->fetch_row();
if
(!
empty
(
$user
)&&
$pwd
==
$user
[2]){
$_SESSION
[
'user'
] =
$account
;
echo
'1'
;
}
else
{
echo
'0'
;
}
|
主頁面index.php源代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
<?php
session_start();
if
(
empty
(
$_SESSION
[
'user'
])){
header(
'Location:demo/login.html'
);
}?>
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<meta name=
"renderer"
content=
"webkit"
>
<meta http-equiv=
"X-UA-Compatible"
content=
"IE=edge,chrome=1"
>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1, maximum-scale=1"
>
<title>首頁 · 后台模板 HTML</title>
<link rel=
"stylesheet"
href=
"./frame/layui/css/layui.css"
>
<link rel=
"stylesheet"
href=
"./frame/static/css/style.css"
>
<link rel=
"icon"
href=
"./frame/static/image/code.png"
>
</head>
<body>
<!-- layout admin -->
<div
class
=
"layui-layout layui-layout-admin"
> <!-- 添加skin-1類可手動修改主題為純白，添加skin-2類可手動修改主題為藍白 -->
<!-- header -->
<div
class
=
"layui-header my-header"
>
<a href=
"index.html"
>
<!--<img
class
=
"my-header-logo"
src=
""
alt=
"logo"
>-->
<div
class
=
"my-header-logo"
>后台模板 HTML</div>
</a>
<div
class
=
"my-header-btn"
>
<button
class
=
"layui-btn layui-btn-small btn-nav"
><i
class
=
"layui-icon"
></i></button>
</div>
<!-- 頂部左側添加選項卡監聽 -->
<ul
class
=
"layui-nav"
lay-filter=
"side-top-left"
>
<!--<li
class
=
"layui-nav-item"
><a href=
"javascript:;"
href-url=
"demo/btn.html"
><i
class
=
"layui-icon"
></i>按鈕</a></li>
<li
class
=
"layui-nav-item"
>
<a href=
"javascript:;"
><i
class
=
"layui-icon"
></i>基礎</a>
<dl
class
=
"layui-nav-child"
>
<dd><a href=
"javascript:;"
href-url=
"demo/btn.html"
><i
class
=
"layui-icon"
></i>按鈕</a></dd>
<dd><a href=
"javascript:;"
href-url=
"demo/form.html"
><i
class
=
"layui-icon"
></i>表單</a></dd>
</dl>
</li>-->
</ul>
<!-- 頂部右側添加選項卡監聽 -->
<ul
class
=
"layui-nav my-header-user-nav"
lay-filter=
"side-top-right"
>
<li
class
=
"layui-nav-item"
><a href=
"javascript:;"
class
=
"pay"
href-url=
""
>支持作者</a></li>
<li
class
=
"layui-nav-item"
>
<a
class
=
"name"
href=
"javascript:;"
><i
class
=
"layui-icon"
></i>主題</a>
<dl
class
=
"layui-nav-child"
>
<dd data-skin=
"0"
><a href=
"javascript:;"
>默認</a></dd>
<dd data-skin=
"1"
><a href=
"javascript:;"
>純白</a></dd>
<dd data-skin=
"2"
><a href=
"javascript:;"
>藍白</a></dd>
</dl>
</li>
<li
class
=
"layui-nav-item"
>
<a
class
=
"name"
href=
"javascript:;"
><img src=
"./frame/static/image/code.png"
alt=
"logo"
> <?php
echo
$_SESSION
[
'user'
] ?> </a>
<dl
class
=
"layui-nav-child"
>
<dd><a href=
"javascript:;"
href-url=
"demo/login.html"
><i
class
=
"layui-icon"
></i>登錄頁</a></dd>
<dd><a href=
"javascript:;"
href-url=
"demo/map.html"
><i
class
=
"layui-icon"
></i>圖表</a></dd>
<dd><a href=
"demo/logout.php"
><i
class
=
"layui-icon"
>ဆ</i>退出</a></dd>
</dl>
</li>
</ul>
</div>
<!-- side -->
<div
class
=
"layui-side my-side"
>
<div
class
=
"layui-side-scroll"
>
<!-- 左側主菜單添加選項卡監聽 -->
<ul
class
=
"layui-nav layui-nav-tree"
lay-filter=
"side-main"
>
<li
class
=
"layui-nav-item"
> <!--去除 layui-nav-itemed 即可關閉展開-->
<a href=
"javascript:;"
><i
class
=
"layui-icon"
></i>基礎</a>
<dl
class
=
"layui-nav-child"
>
<dd><a href=
"javascript:;"
href-url=
"pages/btn.html"
><i
class
=
"layui-icon"
></i>按鈕</a></dd>
<dd><a href=
"javascript:;"
href-url=
"pages/form.html"
><i
class
=
"layui-icon"
></i>表單</a></dd>
<dd><a href=
"javascript:;"
href-url=
"pages/table.html"
><i
class
=
"layui-icon"
></i>表格</a></dd>
<dd><a href=
"javascript:;"
href-url=
"pages/tab-card.html"
><i
class
=
"layui-icon"
></i>選項卡</a></dd>
<dd><a href=
"javascript:;"
href-url=
"pages/progress-bar.html"
><i
class
=
"layui-icon"
></i>進度條</a></dd>
<dd><a href=
"javascript:;"
href-url=
"pages/folding-panel.html"
><i
class
=
"layui-icon"
></i>折疊面板</a></dd>
<dd><a href=
"javascript:;"
href-url=
"pages/auxiliar.html"
><i
class
=
"layui-icon"
></i>輔助元素</a></dd>
</dl>
</li>
<li
class
=
"layui-nav-item layui-nav-itemed"
> <!--去除 layui-nav-itemed 即可關閉展開-->
<a href=
"javascript:;"
><i
class
=
"layui-icon"
></i>擴展</a>
<dl
class
=
"layui-nav-child"
>
<dd><a href=
"javascript:;"
href-url=
"pages/login.html"
><i
class
=
"layui-icon"
></i>登錄頁</a></dd>
<dd><a href=
"javascript:;"
href-url=
"pages/register.html"
><i
class
=
"layui-icon"
></i>注冊頁</a></dd>
<dd><a href=
"javascript:;"
href-url=
"pages/login2.html"
><i
class
=
"layui-icon"
></i>登錄頁2</a></dd>
<dd><a href=
"javascript:;"
href-url=
"pages/map.html"
><i
class
=
"layui-icon"
></i>圖表</a></dd>
<dd><a href=
"javascript:;"
href-url=
"pages/add-edit.html"
><i
class
=
"layui-icon"
></i>添加-修改</a></dd>
<dd><a href=
"javascript:;"
href-url=
"pages/data-table.html"
><i
class
=
"layui-icon"
></i>data-table 表格頁</a></dd>
<dd><a href=
"javascript:;"
href-url=
"pages/tree-table.html"
><i
class
=
"layui-icon"
></i>Tree table樹表格頁</a></dd>
<dd><a href=
"javascript:;"
href-url=
"pages/404.html"
><i
class
=
"layui-icon"
></i>404頁</a></dd>
<dd><a href=
"javascript:;"
href-url=
"pages/tips.html"
><i
class
=
"layui-icon"
></i>提示頁</a></dd>
</dl>
</li>
<li
class
=
"layui-nav-item"
><a target=
"_blank"
href=
"//shang.qq.com/wpa/qunwpa?idkey=ad6ba602ae228be2222ddb804086e0cfa42da3d74e34b383b665c2bec1adfc6e"
><i
class
=
"layui-icon"
></i>加入群下載源碼</a></li>
</ul>
</div>
</div>
<!-- body -->
<div
class
=
"layui-body my-body"
>
<div
class
=
"layui-tab layui-tab-card my-tab"
lay-filter=
"card"
lay-allowClose=
"true"
>
<ul
class
=
"layui-tab-title"
>
<li
class
=
"layui-this"
lay-id=
"1"
><span><i
class
=
"layui-icon"
></i>歡迎頁</span></li>
</ul>
<div
class
=
"layui-tab-content"
>
<div
class
=
"layui-tab-item layui-show"
>
<iframe id=
"iframe"
src=
"demo/welcome.html"
frameborder=
"0"
></iframe>
</div>
</div>
</div>
</div>
<!-- footer -->
<div
class
=
"layui-footer my-footer"
>
<p><a href=
"http://vip-admin.com"
target=
"_blank"
>vip-admin后台模板v1.8.0</a> & <a href=
"http://vip-admin.com/index/gather/index.html"
target=
"_blank"
>vip-admin管理系統v1.2.0</a></p>
<p>2017 © copyright 蜀ICP備17005881號</p>
</div>
</div>
<!-- pay -->
<div
class
=
"my-pay-box none"
>
<div><img src=
"./frame/static/image/zfb.png"
alt=
"支付寶"
><p>支付寶</p></div>
<div><img src=
"./frame/static/image/wx.png"
alt=
"微信"
><p>微信</p></div>
</div>
<!-- 右鍵菜單 -->
<div
class
=
"my-dblclick-box none"
>
<table
class
=
"layui-tab dblclick-tab"
>
<tr
class
=
"card-refresh"
>
<td><i
class
=
"layui-icon"
>ဂ</i>刷新當前標簽</td>
</tr>
<tr
class
=
"card-close"
>
<td><i
class
=
"layui-icon"
>ဆ</i>關閉當前標簽</td>
</tr>
<tr
class
=
"card-close-all"
>
<td><i
class
=
"layui-icon"
>ဆ</i>關閉所有標簽</td>
</tr>
</table>
</div>
<script type=
"text/javascript"
src=
"frame/layui/layui.js"
></script>
<script type=
"text/javascript"
src=
"./frame/static/js/vip_comm.js"
></script>
<script type=
"text/javascript"
>
layui.
use
([
'layer'
,
'vip_nav'
],
function
() {
// 操作對象
var
layer = layui.layer
,vipNav = layui.vip_nav
,$ = layui.jquery;
// 頂部左側菜單生成 [請求地址,過濾ID,是否展開,攜帶參數]
vipNav.top_left(
'./json/nav_top_left.json'
,
'side-top-left'
,false);
// 主體菜單生成 [請求地址,過濾ID,是否展開,攜帶參數]
vipNav.main(
'./json/nav_main.json'
,
'side-main'
,true);
// you code ...
});
</script>
</body>
</html>
|
退出頁logout.php 源代碼:
|
1
2
3
4
5
6
7
8
9
10
|
<?php
#啟動session
session_start();
#清除session
unset(
$_SESSION
[
"user"
]);
#重定向
header(
"location:login.html"
);
?>
|
css樣式：style.css 文件
@charset "utf-8";
.layui-header {
background: none;
}
.layui-layout-admin .my-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #393D49;
z-index: 2;
}
.layui-layout-admin .my-header .my-header-logo {
display: inline-block;
width: auto;
height: 30px;
color: white;
font-size: 18px;
line-height: 30px;
padding: 15px;
vertical-align: top;
}
.layui-layout-admin .my-header img.my-header-logo {
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
padding: 10px;
border: none;
}
/* index */
.my-header-btn {
display: inline-block;
width: auto;
height: 100%;
line-height: 60px;
}
.my-header-btn .layui-btn .layui-icon {
margin-right: 0;
}
.my-header-user-nav {
float: right;
}
.my-header-user-nav img {
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border: none;
border-radius: 5px;
}
.my-header-user-nav .layui-nav-item a.name {
padding-left: 5px !important;
}
.my-header ul.layui-nav {
display: inline-block;
vertical-align: top;
border-radius: 0;
}
.my-header ul.layui-nav li a {
max-height: 60px;
}
.my-side {
position: fixed;
top: 60px;
bottom: 0;
width: 200px;
z-index: 2;
overflow-x: hidden;
}
.my-side .layui-nav {
border-radius: 0;
min-height: 100%;
}
.my-side ul.layui-nav li a i, .layui-nav .layui-nav-child a i, .layui-nav .layui-nav-item a i, .layui-tab-card > .layui-tab-title li span i {
margin-right: 5px;
}
.my-side ul.layui-nav li dl dd a i {
margin-left: 15px;
}
.my-body {
position: fixed;
top: 60px;
bottom: 0;
left: 200px;
right: 0;
z-index: 1;
overflow: hidden;
}
.body {
padding: 10px;
}
.my-body .layui-tab, .my-body .layui-tab .layui-tab-content {
margin: 0;
padding: 0;
}
.my-body .layui-tab .layui-tab-title li:first-child > i {
display: none;
}
.my-body .layui-tab, .my-body .layui-tab .layui-tab-content, .my-body .layui-tab .layui-tab-item {
height: 100%;
}
.my-body iframe {
width: 100%;
height: 100%;
border: none;
outline: none;
}
.layui-layout-admin .my-footer {
height: 40px;
padding: 2px 0;
}
.layui-layout-admin .my-footer p {
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
}
.my-btn-box {
height: 38px;
margin-bottom: 10px;
}
.my-pay-box > div p {
text-align: center;
margin-bottom: 10px;
}
/* welcome */
.my-index-main button.layui-icon {
width: 100%;
font-size: 20px;
}
.my-index-main .my-nav-btn {
background: #efefef;
cursor: pointer;
border-radius: 2px;
overflow: hidden;
}
.my-index-main .my-nav-text:first-child {
height: 24px;
line-height: 25px;
font-size: 16px;
font-weight: bold;
}
.my-index-main .my-nav-text:last-child {
height: 20px;
line-height: 20px;
font-size: 12px;
}
/* login */
.login-body {
background: url("../image/bg.png") repeat fixed;
}
.login-box {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 320px;
height: 241px;
max-height: 300px;
}
.login-body .login-box h3 {
color: #444;
font-size: 22px;
font-weight: 100;
text-align: center;
}
.login-box .layui-input[type='number'] {
display: inline-block;
width: 50%;
vertical-align: top;
}
.login-box img {
display: inline-block;
width: 46%;
height: 38px;
border: none;
vertical-align: top;
cursor: pointer;
margin-left: 4%;
}
.login-box button.btn-reset {
width: 95px;
}
.login-box button.btn-submit {
width: 190px;
}
.login-main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 350px;
margin: 0 auto;
}
.login-main header {
margin-top: 150px;
height: 35px;
line-height: 35px;
font-size: 30px;
font-weight: 100;
text-align: center;
}
.login-main header, .login-main form, .login-main form .layui-input-inline {
margin-bottom: 15px;
}
.login-main form .layui-input-inline, .login-main form .layui-input-inline input, .login-main form .layui-input-inline button {
width: 100%;
}
.login-main form .login-btn {
margin-bottom: 5px;
}
/* demo */
.site-demo-button div {
margin: 20px 30px 10px;
}
.site-demo-button .layui-btn {
margin: 0 7px 10px 0;
}
/* check */
input[type='checkbox'] {
vertical-align: middle;
}
.my-checkbox {
-webkit-appearance: none;
position: relative;
width: 20px;
height: 20px;
background-color: #FFFFFF;
border: solid 2px #28B779;
border-radius: 2px;
background-clip: padding-box;
display: inline-block;
cursor: pointer;
}
.my-checkbox:checked {
background-color: #28B779;
border: solid 0 #28B779;
}
.my-checkbox:checked:before {
position: absolute;
display: inline-block;
right: 50%;
bottom: 50%;
-webkit-transform: translate(50%, 50%);
-ms-transform: translate(50%, 50%);
transform: translate(50%, 50%);
font-family: "Microsoft Yahei";
content: "√";
color: #FFFFFF;
font-size: 16px;
font-weight: 600;
}
/* dblclick css */
.dblclick-tab tr td {
height: 30px;
line-height: 30px;
padding: 0 6px;
border-radius: 2px;
cursor: pointer;
}
.dblclick-tab tr td:hover {
color: black;
background: white;
}
.dblclick-tab tr td i {
position: relative;
top: 2px;
display: inline-block;
margin-right: 5px;
}
/* tips 404 */
.my-page-box {
font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", FontAwesome, sans-serif;
text-align: center;
padding: 20px;
background-color: white;
}
.my-page-box i {
font-size: 100px;
}
.my-page-box h2, .my-page-box h3, .my-page-box h4, .my-page-box h5 {
font-size: 80px;
}
.my-page-box p.msg {
color: #dce2ec;
font-size: 20px;
margin-top: 20px;
}
.my-page-box p.text {
color: #666;
font-size: 16px;
margin-top: 20px;
}
.my-page-box .my-btn-box {
margin-top: 20px;
margin-bottom: 20px;
}
/* tree table */
.my-tree-table-box .tree-table-tree-box {
width: 20%;
min-height: 200px;
display: inline-block;
vertical-align: top;
overflow-y: auto;
overflow-x: auto;
}
.my-tree-table-box .tree-table-table-box {
display: inline-block;
vertical-align: top;
width: 79%;
margin-left: 1%;
}
/* skin0 */
html .skin-0 .dblclick-tips-box .layui-layer-content {
background-color: #009688;
}
html .skin-0 .dblclick-tips-box i.layui-layer-TipsB {
border-right-color: #009688;
}
/* skin1 */
html .skin-1 .my-header .my-header-logo,
html .skin-1 .layui-nav .layui-nav-item a,
html .skin-1 .layui-nav .layui-nav-item a:hover {
color: #444;
}
html .skin-1 .my-header,
html .skin-1 .layui-nav,
html .skin-1 .layui-nav-child {
background: white;
}
html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this a {
color: white;
}
html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this,
html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this > a,
html .skin-1 .layui-nav-tree .layui-nav-item > a:hover,
html .skin-1 .layui-nav .layui-nav-item .layui-nav-child dd:hover > a,
html .skin-1 .layui-tab-title li .layui-tab-close:hover,
html .skin-1 .dblclick-tips-box .layui-layer-content {
color: white !important;
background-color: #666 !important;
}
html .skin-1 .dblclick-tips-box i.layui-layer-TipsB {
border-right-color: #666;
}
html .skin-1 .layui-nav .layui-nav-itemed > a {
background: #444 !important;
}
html .skin-1 .layui-nav .layui-nav-more {
border-color: #444 transparent transparent;
}
html .skin-1 .layui-nav .layui-nav-mored {
border-color: transparent transparent #444;
}
/* skin2 */
html .skin-2 .my-header .my-header-logo,
html .skin-2 .layui-nav .layui-nav-item a,
html .skin-2 .layui-nav .layui-nav-item a:hover {
color: white;
}
html .skin-2 .my-header,
html .skin-2 .layui-nav,
html .skin-2 .layui-nav-child {
background-color: #01AAED;
}
html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this a {
color: white;
}
html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this,
html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd.layui-this > a,
html .skin-2 .layui-nav-tree .layui-nav-item > a:hover,
html .skin-2 .layui-nav .layui-nav-item .layui-nav-child dd:hover > a,
html .skin-2 .layui-tab-title li .layui-tab-close:hover,
html .skin-2 .dblclick-tips-box .layui-layer-content {
color: white !important;
background-color: #00C0F7 !important;
}
html .skin-2 .dblclick-tips-box i.layui-layer-TipsB {
border-right-color: #00C0F7;
}
html .skin-2 .layui-nav .layui-nav-itemed > a {
background-color: #1684af !important;
}
/* skin0-2 */
html .skin-2 .layui-nav .layui-nav-more,
html .skin-1 .layui-nav-tree .layui-nav-more,
html .skin-2 .layui-nav-tree .layui-nav-more {
border-color: white transparent transparent;
}
html .skin-2 .layui-nav .layui-nav-mored,
html .skin-1 .layui-nav-itemed .layui-nav-more,
html .skin-2 .layui-nav-itemed .layui-nav-more {
border-color: transparent transparent white;
}
/* tools */
.fl {
float: left;
}
.fr {
float: right;
}
.none {
display: none;
}
.block {
display: block;
}
.tc {
text-align: center;
}
.max-auto {
max-height: 450px;
overflow-y: auto;
}
/* layui css cover */
html body .layui-nav .layui-nav-bar {
opacity: 0 !important;
overflow: hidden !important;
}
.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
background-color: transparent;
}
.my-body .layui-tab-card > .layui-tab-title li {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.layui-layer-tips .layui-layer-content {
padding: 5px;
}
/* media */
@media screen and (max-width: 1023px) {
.my-header ul.layui-nav, .my-header-btn, .my-side, .layui-field-title, .my-btn-box .fr {
display: none;
}
.layui-side-scroll {
width: 170px;
}
body div.my-mobile {
background: #393D49;
}
body div.my-mobile .layui-layer-content {
overflow-x: hidden;
}
.my-header ul.my-header-user-nav {
display: inline-block;
padding-left: 0;
padding-right: 10px;
}
.my-header ul.my-header-user-nav a {
padding: 0 10px;
}
.my-header ul.my-header-user-nav:last-child a:first-child {
padding-right: 20px;
}
.my-side, .layui-nav-tree, .my-btn-box input[type='text'] {
width: 150px;
}
.my-body {
left: 0;
width: 100%;
overflow-x: auto;
}
.my-body iframe {
width: 100%;
}
select {
background: white;
}
.layui-layout-admin .layui-footer {
left: 0;
}
}
@media screen and ( max-width: 450px) {
.my-header ul.my-header-user-nav li a.pay {
display: none;
}
}
實現效果如圖:
