SkyID
/
zheng
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #27 from shushi1010/dev 

add zheng-ucenter-web ui
This commit is contained in:
shuzheng 2017-04-28 12:34:42 +08:00 committed by GitHub
parent c3bc9f12b3 8f5236ee8e
commit 5ed2ba601a
5 changed files with 439 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
zheng-ui/zheng-ucenter-web/html/css/style.css Normal file
View File

@ -0,0 +1,99 @@
/*
* Page: Login & Register
* ----------------------
*/
.login-logo,
.register-logo {
font-size: 35px;
text-align: center;
margin-bottom: 25px;
font-weight: 300;
}
.login-logo a,
.register-logo a {
color: #444;
}
.login-page,
.register-page {
background: #ebebeb;
}
.login-box,.register-box{
width: 360px;
margin: 7% auto;
}
@media (max-width: 768px) {
.login-box,
.register-box {
width: 90%;
margin-top: 20px;
}
}
.login-box-body,
.register-box-body {
background: #fff;
padding: 20px;
border-top: 0;
color: #666;
}
.login-box-body .form-control-feedback,
.register-box-body .form-control-feedback {
color: #777;
}
.login-box-msg,
.register-box-msg {
margin: 0;
text-align: center;
padding: 0 20px 20px 20px;
}
.tabs-menu{
width: 100%;
background: #fff;
overflow: hidden;
margin:0;
padding: 0;
}
.tabs-menu li{
width: 50%;
float: left;
padding: 10px 0 10px 0;
list-style: none;
text-align: center;
}
.tabs-menu li>a{
text-decoration: none;
font-size: 18px;
color:#000;
}
.tabs-menu li.active{
color: #2b72de;
border-bottom: 2px solid #2b72de;
}
.tabs-menu li.active a{
color: #2b72de;
}
.social-auth-links {
text-align: center;
margin: 10px 0;
}
.social-auth-links a{
display: inline-block;
margin-left:34px;
color: #777777;
text-decoration:none;
}
.social-auth-links a:hover{
display: inline-block;
margin-left:34px;
color: #222222;
}
.social-auth-links .iconfont{
font-size: 40px;
}
.logo-tip .iconfont{
font-size: 20px;
}

BIN
zheng-ui/zheng-ucenter-web/html/img/captcha.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

138
zheng-ui/zheng-ucenter-web/html/login.html Normal file
View File

@ -0,0 +1,138 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>用户中心</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_ay4w4j5c2tke29.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="login-page">
<div class="login-box">
<div class="login-logo">
<a href="#"><b>Zheng</b>UC</a>
</div>
<div class="row login-box-body">
<div class="row" style="margin-bottom: 20px;">
<div class="col-xs-6 logo-tip">
<i class="iconfont icon-icon053"></i> <span>登录</span>
</div>
<div class="col-xs-6" style="text-align: right">
<a href="reg.html">注册</a>
</div>
</div>
<!-- Nav tabs -->
<ul class="tabs-menu">
<li class="active"><a href="#email" data-toggle="tab">邮箱登录</a></li>
<li><a href="#phone" data-toggle="tab">短信登录</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="email">
<div class="login-box-body">
<form>
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="邮箱">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="登录密码">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-6">
<div class="checkbox icheck">
<label>
<input type="checkbox"> 记住我
</label>
</div>
</div>
<div class="col-xs-6" style="text-align: right">
<div class="checkbox icheck">
<label>
<a href="password.html">忘记密码？</a>
</label>
</div>
</div>
</div>
<div class="row">
<!-- /.col -->
<div class="col-xs-12">
<button type="submit" class="btn btn-primary btn-block btn-flat">登录</button>
</div>
<!-- /.col -->
</div>
</form>
</div>
</div>
<div class="tab-pane" id="phone">
<div class="login-box-body">
<form>
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="手机号">
<span class="glyphicon glyphicon-phone form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="短信验证码">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
</div>
<div class="col-xs-6">
<button type="submit" class="btn btn-primary btn-block btn-flat">获取验证码</button>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="checkbox icheck">
<label>
<input type="checkbox"> 记住我
</label>
</div>
</div>
<div class="col-xs-6" style="text-align: right">
<div class="checkbox icheck">
<label>
<a href="">忘记密码？</a>
</label>
</div>
</div>
</div>
<div class="row">
<!-- /.col -->
<div class="col-xs-12">
<button type="submit" class="btn btn-primary btn-block btn-flat">登录</button>
</div>
<!-- /.col -->
</div>
</form>
</div>
<!-- /.login-box-body -->
</div>
</div>
<div class="social-auth-links">
<p>- OR -</p>
<a style="margin-left:0" href="#"><i class="iconfont icon-qq"></i></a>
<a href="#"><i class="iconfont icon-weixin"></i></a>
<a href="#"><i class="iconfont icon-weibo"></i></a>
<a href="#"><i class="iconfont icon-github1"></i></a>
</div>
<!-- /.social-auth-links -->
</div>
</div>
<!-- /.login-box -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

68
zheng-ui/zheng-ucenter-web/html/password.html Normal file
View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>用户中心</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_ay4w4j5c2tke29.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="login-page">
<div class="login-box">
<div class="login-logo">
<a href="#"><b>Zheng</b>UC</a>
</div>
<div class="row login-box-body">
<div class="row" style="margin-bottom: 20px;">
<div class="col-xs-6 logo-tip">
<i class="iconfont icon-icon053"></i> <span>找回密码</span>
</div>
<div class="col-xs-6" style="text-align: right">
<a href="reg.html">注册</a>
</div>
</div>
<form>
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="邮箱">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<div class="row">
<div class="col-xs-6">
<input type="password" class="form-control" placeholder="验证码">
<span class="glyphicon glyphicon-lock form-control-feedback" style="right: 15px;"></span>
</div>
<div class="col-xs-6" style="text-align: right">
<img src="img/captcha.png" alt="" style="border: 1px solid #ccc; height: 34px;">
</div>
</div>
</div>
<div class="row">
<!-- /.col -->
<div class="col-xs-12">
<button type="submit" class="btn btn-primary btn-block btn-flat">确定</button>
</div>
<!-- /.col -->
</div>
</form>
<div class="social-auth-links">
<p>- OR -</p>
<a style="margin-left:0" href="#"><i class="iconfont icon-qq"></i></a>
<a href="#"><i class="iconfont icon-weixin"></i></a>
<a href="#"><i class="iconfont icon-weibo"></i></a>
<a href="#"><i class="iconfont icon-github1"></i></a>
</div>
<!-- /.social-auth-links -->
</div>
</div>
<!-- /.login-box -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

134
zheng-ui/zheng-ucenter-web/html/reg.html Normal file
View File

@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>用户中心</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_ay4w4j5c2tke29.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="register-page">
<div class="register-box">
<div class="login-logo">
<a href="#"><b>Zheng</b>UC</a>
</div>
<div class="row login-box-body">
<div class="row" style="margin-bottom: 20px;">
<div class="col-xs-6 logo-tip">
<i class="iconfont icon-icon053"></i> <span>注册</span>
</div>
<div class="col-xs-6" style="text-align: right">
<a href="login.html">已有账号？ 登录</a>
</div>
</div>
<!-- Nav tabs -->
<ul class="tabs-menu">
<li class="active"><a href="#email" data-toggle="tab">邮箱注册</a></li>
<li><a href="#phone" data-toggle="tab">手机注册</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="email">
<div class="login-box-body">
<form>
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="邮箱">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="登录密码">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<div class="row">
<div class="col-xs-6">
<input type="password" class="form-control" placeholder="验证码">
<span class="glyphicon glyphicon-lock form-control-feedback" style="right: 15px;"></span>
</div>
<div class="col-xs-6" style="text-align: right">
<img src="img/captcha.png" alt="" style="border: 1px solid #ccc; height: 34px;">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="checkbox icheck">
<label>
<input type="checkbox"> 已阅读并接受 <a href="">服务协议</a>
</label>
</div>
</div>
</div>
<div class="row">
<!-- /.col -->
<div class="col-xs-12">
<button type="submit" class="btn btn-primary btn-block btn-flat">接受服务协议并注册</button>
</div>
<!-- /.col -->
</div>
</form>
</div>
</div>
<div class="tab-pane" id="phone">
<div class="login-box-body">
<form>
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="手机号">
<span class="glyphicon glyphicon-phone form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="短信验证码">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
</div>
<div class="col-xs-6">
<button type="submit" class="btn btn-primary btn-block btn-flat">获取验证码</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="checkbox icheck">
<label>
<input type="checkbox"> 已阅读并接受 <a href="">服务协议</a>
</label>
</div>
</div>
</div>
<div class="row">
<!-- /.col -->
<div class="col-xs-12">
<button type="submit" class="btn btn-primary btn-block btn-flat">接受服务协议并注册</button>
</div>
<!-- /.col -->
</div>
</form>
</div>
<!-- /.login-box-body -->
</div>
</div>
<div class="social-auth-links">
<p>- OR -</p>
<a style="margin-left:0" href="#"><i class="iconfont icon-qq"></i></a>
<a href="#"><i class="iconfont icon-weixin"></i></a>
<a href="#"><i class="iconfont icon-weibo"></i></a>
<a href="#"><i class="iconfont icon-github1"></i></a>
</div>
</div>
</div>
<!-- /.login-box -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>