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;
list-style-type: decimal;
-webkit-margin-before: 1em;
@ -8,19 +16,36 @@
-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 {
width: 750px;
padding-top: 30px;
margin: 0 auto;
}
form input {
padding-right: 30px !important;
}
.setup-header {
padding-bottom: 20px;
margin: 0 auto 30px;
overflow: hidden;
margin: 0 auto;
text-align: left;
}
.setup-main, .setup-confirm {
float: left;
width: 450px;
}
.setup-confirm {
display: none;
}
@ -29,30 +54,19 @@
padding: 6px 0;
}
.setup-confirm div {
padding-top: 30px;
}
.setup-confirm button {
margin-top: 30px;
}
.setup-main, .setup-confirm {
float: left;
width: 450px;
.setup-main span {
top: 0;
}
.setup-main span {
top: 0;
}
.setup-main .input-group {
margin-bottom: 15px;
}
.setup-main .input-group {
margin-bottom: 15px;
}
.setup-secondary {
display: inline-block;
float: right;
width: 250px;
margin-top: 70px;
}
.setup-info-module {
@ -69,6 +83,10 @@
overflow: hidden;
border-bottom: 1px solid #ddd;
margin-top: 0;
background-color: #5cb85c;
color: #000;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.features-list {
@ -117,13 +135,13 @@
}
.steps li.current {
color: #333;
background-color: #fff;
color: #000;
background-color: #5cb85c;
}
.steps li {
display: table-cell;
width: 33.3%;
width: 50%;
padding: 10px 15px;
color: #ccc;
cursor: default;
@ -134,3 +152,23 @@
.steps li .step {
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: {
required: true,
maxlength: 50,
equalTo:"#password"
equalTo: "#password"
},
description: {
required: true,
maxlength: 500
}
}
});
$('#btnAccount').click(function () {
var valid = $('form').valid();
if (valid) {
$('.setup-main').hide();
$('.steps li').toggleClass('current');
$('#loginID').text($('#userName').val());
$('#loginName').text($('#displayName').val());
$('#loginDesc').text($('#description').val());
$('.setup-confirm').show();
$('.setup-main').hide();
$('.steps li').toggleClass('current');
$('#loginID').text($('#userName').val());
$('#loginName').text($('#displayName').val());
$('#loginDesc').text($('#description').val());
$('.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 {
<link href="~/Content/css/register.css" rel="stylesheet" />
<link href="~/Content/css/tipso.css" rel="stylesheet" />
}
@section javascript {
<script src="~/content/js/jquery.validate.js"></script>
<script src="~/content/js/messages_zh.js"></script>
<script src="~/content/js/sweetalert.js"></script>
<script src="~/Content/js/tipso.js"></script>
<script src="~/Scripts/register.js"></script>
}
<div class="container">
<div class="setup-wrapper">
<header><h2>新用户注册</h2></header>
<div class="setup-header">
<ol class="steps">
<li class="current">
@ -26,64 +29,79 @@
<form autocomplete="off" id="signup-form" method="post">
<div class="setup-main">
<div class="setup-form-container">
<h2 class="setup-form-title mb-3">
<h3 class="setup-form-title mb-3">
创建您的账号
</h2>
<label for="userName">登陆账号：</label>
<div class="input-group">
<span class="input-group-addon">@@</span>
<input type="text" id="userName" name="userName" class="form-control" placeholder="登陆账号" value="" autofocus />
</h3>
<div class="form-group">
<label for="userName">登陆账号：</label>
<div class="input-group">
<span class="input-group-addon">@@</span>
<input type="text" id="userName" name="userName" class="form-control" placeholder="登陆账号" value="" autofocus maxlength="50" />
</div>
</div>
<label for="displayName">显示名称：</label>
<div class="input-group">
<span class="glyphicon glyphicon-user input-group-addon"></span>
<input type="text" id="displayName" name="displayName" class="form-control" value="" placeholder="显示名称" />
<div class="form-group">
<label for="displayName">显示名称：</label>
<div class="input-group">
<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>
<label for="password">密码：</label>
<div class="input-group">
<span class="glyphicon glyphicon-lock input-group-addon"></span>
<input type="password" id="password" name="password" class="form-control" value="" placeholder="密码" />
<div class="form-group">
<label for="password">密码：</label>
<div class="input-group">
<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>
<label for="assurePassword">确认密码：</label>
<div class="input-group">
<span class="glyphicon glyphicon-lock input-group-addon"></span>
<input type="password" id="assurePassword" name="assurePassword" class="form-control" value="" placeholder="确认密码" />
<div class="form-group">
<label for="assurePassword">确认密码：</label>
<div class="input-group">
<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>
<label for="description">申请理由：</label>
<div class="input-group">
<span class="glyphicon glyphicon-certificate input-group-addon"></span>
<textarea id="description" name="description" class="form-control" placeholder="申请理由" ></textarea>
<div class="form-group">
<label for="description">申请理由：</label>
<div class="input-group">
<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>
<button id="btnAccount" class="btn btn-primary" type="button">继续</button>
</div> <!-- /.setup-form-container -->
<div class="form-group">
<button id="btnAccount" class="btn btn-primary pull-right" type="button">继续</button>
</div> <!-- /.setup-form-container -->
</div>
</div>
<div class="setup-confirm">
<h4>您注册的信息如下：</h4>
<div>
<label>登陆账号：</label><span id="loginID"></span>
<h3>您注册的信息如下：</h3>
<div class="form-group">
<label>登陆账号：</label><span id="loginID" class="form-control-static"></span>
</div>
<div>
<label>显示名称：</label><span id="loginName"></span>
<div class="form-group">
<label>显示名称：</label><span id="loginName" class="form-control-static"></span>
</div>
<div>
<label>申请理由：</label><span id="loginDesc"></span>
<div class="form-group">
<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>
<button id="btnSubmit" class="btn btn-primary" type="submit">确认并提交</button>
</div>
</form>
<div class="setup-secondary">
<div class="setup-info-module">
<h4>欢迎加入本系统</h4>
<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><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>
</div>
</div>