orga0063
/
BootstrapAdmin
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

重新用户注册页面，适配小屏幕

This commit is contained in:
Argo-Lenovo 2016-12-15 16:25:01 +08:00
parent c08ddf05f1
commit 04663aa6f7
3 changed files with 137 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
Bootstrap.Admin/Content/css/register.css
View File

@ -1,4 +1,12 @@
ol { header h2 {
text-align: center;
}
h3 {
margin-bottom: 20px;
}
ol {
display: block; display: block;
list-style-type: decimal; list-style-type: decimal;
-webkit-margin-before: 1em; -webkit-margin-before: 1em;
@ -8,19 +16,36 @@
-webkit-padding-start: 40px; -webkit-padding-start: 40px;
} }
.has-error input {
background-repeat: no-repeat;
background-image: url('../images/error.png');
background-position: right 8px center;
}
.has-success input {
background-repeat: no-repeat;
background-image: url('../images/success.png');
background-position: right 8px center;
}
.setup-wrapper { .setup-wrapper {
width: 750px;
padding-top: 30px;
margin: 0 auto; margin: 0 auto;
} }
form input {
padding-right: 30px !important;
}
.setup-header { .setup-header {
padding-bottom: 20px; margin: 0 auto;
margin: 0 auto 30px;
overflow: hidden;
text-align: left; text-align: left;
} }
.setup-main, .setup-confirm {
float: left;
width: 450px;
}
.setup-confirm { .setup-confirm {
display: none; display: none;
} }
@ -29,30 +54,19 @@
padding: 6px 0; padding: 6px 0;
} }
.setup-confirm div { .setup-main span {
padding-top: 30px; top: 0;
}
.setup-confirm button {
margin-top: 30px;
}
.setup-main, .setup-confirm {
float: left;
width: 450px;
} }
.setup-main span { .setup-main .input-group {
top: 0; margin-bottom: 15px;
} }
.setup-main .input-group {
margin-bottom: 15px;
}
.setup-secondary { .setup-secondary {
display: inline-block;
float: right; float: right;
width: 250px; width: 250px;
margin-top: 70px;
} }
.setup-info-module { .setup-info-module {
@ -69,6 +83,10 @@
overflow: hidden; overflow: hidden;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
margin-top: 0; margin-top: 0;
background-color: #5cb85c;
color: #000;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
} }
.features-list { .features-list {
@ -117,13 +135,13 @@
} }
.steps li.current { .steps li.current {
color: #333; color: #000;
background-color: #fff; background-color: #5cb85c;
} }
.steps li { .steps li {
display: table-cell; display: table-cell;
width: 33.3%; width: 50%;
padding: 10px 15px; padding: 10px 15px;
color: #ccc; color: #ccc;
cursor: default; cursor: default;
@ -134,3 +152,23 @@
.steps li .step { .steps li .step {
display: block; display: block;
} }
@media (max-width: 767px) {
.steps {
display: inherit;
}
.steps li {
display: inherit;
width: inherit;
}
.setup-secondary {
display: none;
}
.setup-main, .setup-confirm {
float: inherit;
width: inherit;
}
}

22
Bootstrap.Admin/Scripts/register.js
View File

@ -15,23 +15,29 @@
assurePassword: { assurePassword: {
required: true, required: true,
maxlength: 50, maxlength: 50,
equalTo:"#password" equalTo: "#password"
}, },
description: { description: {
required: true, required: true,
maxlength: 500 maxlength: 500
} }
}); });
$('#btnAccount').click(function () { $('#btnAccount').click(function () {
var valid = $('form').valid(); var valid = $('form').valid();
if (valid) { if (valid) {
$('.setup-main').hide(); $('.setup-main').hide();
$('.steps li').toggleClass('current'); $('.steps li').toggleClass('current');
$('#loginID').text($('#userName').val()); $('#loginID').text($('#userName').val());
$('#loginName').text($('#displayName').val()); $('#loginName').text($('#displayName').val());
$('#loginDesc').text($('#description').val()); $('#loginDesc').text($('#description').val());
$('.setup-confirm').show(); $('.setup-confirm').show();
} }
}); });
$('#btnPrev').click(function () {
$('.steps li').toggleClass('current');
$('.setup-main').show();
$('.setup-confirm').hide();
});
}); });

98
Bootstrap.Admin/Views/Home/Register.cshtml
View File

@ -4,15 +4,18 @@
} }
@section css { @section css {
<link href="~/Content/css/register.css" rel="stylesheet" /> <link href="~/Content/css/register.css" rel="stylesheet" />
<link href="~/Content/css/tipso.css" rel="stylesheet" />
} }
@section javascript { @section javascript {
<script src="~/content/js/jquery.validate.js"></script> <script src="~/content/js/jquery.validate.js"></script>
<script src="~/content/js/messages_zh.js"></script> <script src="~/content/js/messages_zh.js"></script>
<script src="~/content/js/sweetalert.js"></script> <script src="~/content/js/sweetalert.js"></script>
<script src="~/Content/js/tipso.js"></script>
<script src="~/Scripts/register.js"></script> <script src="~/Scripts/register.js"></script>
} }
<div class="container"> <div class="container">
<div class="setup-wrapper"> <div class="setup-wrapper">
<header><h2>新用户注册</h2></header>
<div class="setup-header"> <div class="setup-header">
<ol class="steps"> <ol class="steps">
<li class="current"> <li class="current">
@ -26,64 +29,79 @@
<form autocomplete="off" id="signup-form" method="post"> <form autocomplete="off" id="signup-form" method="post">
<div class="setup-main"> <div class="setup-main">
<div class="setup-form-container"> <div class="setup-form-container">
<h2 class="setup-form-title mb-3"> <h3 class="setup-form-title mb-3">
创建您的账号 创建您的账号
</h2> </h3>
<label for="userName">登陆账号：</label> <div class="form-group">
<div class="input-group"> <label for="userName">登陆账号：</label>
<span class="input-group-addon">@@</span> <div class="input-group">
<input type="text" id="userName" name="userName" class="form-control" placeholder="登陆账号" value="" autofocus /> <span class="input-group-addon">@@</span>
<input type="text" id="userName" name="userName" class="form-control" placeholder="登陆账号" value="" autofocus maxlength="50" />
</div>
</div> </div>
<label for="displayName">显示名称：</label> <div class="form-group">
<div class="input-group"> <label for="displayName">显示名称：</label>
<span class="glyphicon glyphicon-user input-group-addon"></span> <div class="input-group">
<input type="text" id="displayName" name="displayName" class="form-control" value="" placeholder="显示名称" /> <span class="glyphicon glyphicon-user input-group-addon"></span>
<input type="text" id="displayName" name="displayName" class="form-control" value="" placeholder="显示名称" maxlength="50" />
</div>
</div> </div>
<label for="password">密码：</label> <div class="form-group">
<div class="input-group"> <label for="password">密码：</label>
<span class="glyphicon glyphicon-lock input-group-addon"></span> <div class="input-group">
<input type="password" id="password" name="password" class="form-control" value="" placeholder="密码" /> <span class="glyphicon glyphicon-lock input-group-addon"></span>
<input type="password" id="password" name="password" class="form-control" value="" placeholder="密码" maxlength="50" />
</div>
</div> </div>
<label for="assurePassword">确认密码：</label> <div class="form-group">
<div class="input-group"> <label for="assurePassword">确认密码：</label>
<span class="glyphicon glyphicon-lock input-group-addon"></span> <div class="input-group">
<input type="password" id="assurePassword" name="assurePassword" class="form-control" value="" placeholder="确认密码" /> <span class="glyphicon glyphicon-lock input-group-addon"></span>
<input type="password" id="assurePassword" name="assurePassword" class="form-control" value="" placeholder="确认密码" maxlength="50" />
</div>
</div> </div>
<label for="description">申请理由：</label> <div class="form-group">
<div class="input-group"> <label for="description">申请理由：</label>
<span class="glyphicon glyphicon-certificate input-group-addon"></span> <div class="input-group">
<textarea id="description" name="description" class="form-control" placeholder="申请理由" ></textarea> <span class="glyphicon glyphicon-certificate input-group-addon"></span>
<textarea id="description" name="description" class="form-control" placeholder="申请理由" rows="6" maxlength="500"></textarea>
</div>
</div> </div>
<button id="btnAccount" class="btn btn-primary" type="button">继续</button> <div class="form-group">
</div> <!-- /.setup-form-container --> <button id="btnAccount" class="btn btn-primary pull-right" type="button">继续</button>
</div> <!-- /.setup-form-container -->
</div>
</div> </div>
<div class="setup-confirm"> <div class="setup-confirm">
<h4>您注册的信息如下：</h4> <h3>您注册的信息如下：</h3>
<div> <div class="form-group">
<label>登陆账号：</label><span id="loginID"></span> <label>登陆账号：</label><span id="loginID" class="form-control-static"></span>
</div> </div>
<div> <div class="form-group">
<label>显示名称：</label><span id="loginName"></span> <label>显示名称：</label><span id="loginName" class="form-control-static"></span>
</div> </div>
<div> <div class="form-group">
<label>申请理由：</label><span id="loginDesc"></span> <label>申请理由：</label><span id="loginDesc" class="form-control-static"></span>
</div>
<div class="form-group">
<button id="btnPrev" class="btn btn-default" type="button">上一步</button>
<button id="btnSubmit" class="btn btn-primary pull-right" type="submit">确认并提交</button>
</div> </div>
<button id="btnSubmit" class="btn btn-primary" type="submit">确认并提交</button>
</div> </div>
</form> </form>
<div class="setup-secondary"> <div class="setup-secondary">
<div class="setup-info-module"> <div class="setup-info-module">
<h4>欢迎加入本系统</h4> <h4>欢迎加入本系统</h4>
<ul class="features-list"> <ul class="features-list">
<li><strong>Unlimited</strong>特性一</li> <li><strong>Unlimited</strong> 特性一</li>
<li><strong>Unlimited</strong>特性二</li> <li><strong>Unlimited</strong> 特性二</li>
<li><strong>Unlimited</strong>特性三</li> <li><strong>Unlimited</strong> 特性三</li>
<li><strong>Unlimited</strong>特性四</li> <li><strong>Unlimited</strong> 特性四</li>
<li class="list-divider"></li> <li class="list-divider"></li>
<li><i class="glyphicon glyphicon-ok"></i>优点一</li> <li><i class="glyphicon glyphicon-ok"></i> 优点一</li>
<li><i class="glyphicon glyphicon-ok"></i>优点二</li> <li><i class="glyphicon glyphicon-ok"></i> 优点二</li>
<li><i class="glyphicon glyphicon-ok"></i>优点三</li> <li><i class="glyphicon glyphicon-ok"></i> 优点三</li>
<li><i class="glyphicon glyphicon-ok"></i>优点四</li> <li><i class="glyphicon glyphicon-ok"></i> 优点四</li>
</ul> </ul>
</div> </div>
</div> </div>