From 04663aa6f757cca1265f0d2d318ba38dcae75289 Mon Sep 17 00:00:00 2001
From: Argo-Lenovo <Argo@163.com>
Date: Thu, 15 Dec 2016 16:25:01 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=96=B0=E7=94=A8=E6=88=B7=E6=B3=A8?=
 =?UTF-8?q?=E5=86=8C=E9=A1=B5=E9=9D=A2=EF=BC=8C=E9=80=82=E9=85=8D=E5=B0=8F?=
 =?UTF-8?q?=E5=B1=8F=E5=B9=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Bootstrap.Admin/Content/css/register.css   | 92 ++++++++++++++------
 Bootstrap.Admin/Scripts/register.js        | 22 +++--
 Bootstrap.Admin/Views/Home/Register.cshtml | 98 +++++++++++++---------
 3 files changed, 137 insertions(+), 75 deletions(-)

diff --git a/Bootstrap.Admin/Content/css/register.css b/Bootstrap.Admin/Content/css/register.css
index b0c9994f..e920a89a 100644
--- a/Bootstrap.Admin/Content/css/register.css
+++ b/Bootstrap.Admin/Content/css/register.css
@@ -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;
+    }
+}
diff --git a/Bootstrap.Admin/Scripts/register.js b/Bootstrap.Admin/Scripts/register.js
index 985dfbc2..eabcfbde 100644
--- a/Bootstrap.Admin/Scripts/register.js
+++ b/Bootstrap.Admin/Scripts/register.js
@@ -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();
+    });
 });
\ No newline at end of file
diff --git a/Bootstrap.Admin/Views/Home/Register.cshtml b/Bootstrap.Admin/Views/Home/Register.cshtml
index 40da8e5f..42692907 100644
--- a/Bootstrap.Admin/Views/Home/Register.cshtml
+++ b/Bootstrap.Admin/Views/Home/Register.cshtml
@@ -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>