重新用户注册页面，适配小屏幕
This commit is contained in:
Argo-Lenovo
parent
c08ddf05f1
commit
04663aa6f7
|
|
@ -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,19 +54,6 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -51,8 +63,10 @@
|
|||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,4 +34,10 @@
|
|||
$('.setup-confirm').show();
|
||||
}
|
||||
});
|
||||
|
||||
$('#btnPrev').click(function () {
|
||||
$('.steps li').toggleClass('current');
|
||||
$('.setup-main').show();
|
||||
$('.setup-confirm').hide();
|
||||
});
|
||||
});
|
||||
|
|
@ -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,49 +29,64 @@
|
|||
<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>
|
||||
</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 />
|
||||
<input type="text" id="userName" name="userName" class="form-control" placeholder="登陆账号" value="" autofocus maxlength="50" />
|
||||
</div>
|
||||
</div>
|
||||
<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="显示名称" />
|
||||
<input type="text" id="displayName" name="displayName" class="form-control" value="" placeholder="显示名称" maxlength="50" />
|
||||
</div>
|
||||
</div>
|
||||
<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="密码" />
|
||||
<input type="password" id="password" name="password" class="form-control" value="" placeholder="密码" maxlength="50" />
|
||||
</div>
|
||||
</div>
|
||||
<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="确认密码" />
|
||||
<input type="password" id="assurePassword" name="assurePassword" class="form-control" value="" placeholder="确认密码" maxlength="50" />
|
||||
</div>
|
||||
</div>
|
||||
<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="申请理由" ></textarea>
|
||||
<textarea id="description" name="description" class="form-control" placeholder="申请理由" rows="6" maxlength="500"></textarea>
|
||||
</div>
|
||||
<button id="btnAccount" class="btn btn-primary" type="button">继续</button>
|
||||
</div>
|
||||
<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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue