Главная Обзор Помощь
Вход
qingyunhui
/
java
Следить 2
В избранное 0
Ответвить 0
Файлы Обсуждения 0 Запросы на слияние 0 Вики
Просмотр исходного кода

前端登录页面修改

chengjunhui месяцев назад: 5
Родитель
92c106d9ae
Сommit
689fd08c14
6 измененных файлов с 184 добавлено и 108 удалено
Разделённый вид Показать статистику Diff
  1. 102 38
      renren-admin/src/main/resources/statics/css/main.css
  2. BIN
      renren-admin/src/main/resources/statics/images/login/account.png
  3. BIN
      renren-admin/src/main/resources/statics/images/login/captcha.png
  4. BIN
      renren-admin/src/main/resources/statics/images/login/password.png
  5. BIN
      renren-admin/src/main/resources/statics/images/login/wechatIMG321.png
  6. 82 70
      renren-admin/src/main/resources/templates/login.html

+ 102 - 38
renren-admin/src/main/resources/statics/css/main.css
Просмотреть файл 

@@ -1,54 +1,118 @@
 
-html { overflow-x:hidden; }
 
+html {
 
+  overflow-x: hidden;
 
+}
 
 .content-header {
 
-	position: relative;
 
-	padding: 0 0 3px 8px
 
+  position: relative;
 
+  padding: 0 0 3px 8px;
 
 }
 
 
-.content-header>.breadcrumb {
 
-    position: relative;
 
-    top: 0;
 
-    right: 0;
 
-    float: none;
 
-    margin-top: 0px;
 
-    padding-left: 10px;
 
-    background: #ecf0f5;
 
+.content-header > .breadcrumb {
 
+  position: relative;
 
+  top: 0;
 
+  right: 0;
 
+  float: none;
 
+  margin-top: 0px;
 
+  padding-left: 10px;
 
+  background: #ecf0f5;
 
 }
 
 
 .main-footer {
 
-    padding: 7px;
 
-    color: #444;
 
-    border-top: 1px solid #eee;
 
+  padding: 7px;
 
+  color: #444;
 
+  border-top: 1px solid #eee;
 
 }
 
 
 [v-cloak] {
 
   display: none;
 
 }
 
 
-.grid-btn{
 
-	margin-bottom:12px;
 
+.grid-btn {
 
+  margin-bottom: 12px;
 
+}
 
+.grid-btn .btn {
 
+  margin-right: 10px;
 
 }
 
-.grid-btn .btn{
 
-	margin-right:10px;
 
+.pointer {
 
+  cursor: pointer;
 
 }
 
-.pointer{cursor: pointer;}
 
 
-.ml-10 { margin-left:0 !important; }
 
+.ml-10 {
 
+  margin-left: 0 !important;
 
+}
 
 @media (min-width: 768px) {
 
-	.ml-10 { margin-left:10px !important; }
 
-	.col-sm-10 {width: 70%;padding-left: 0px;}
 
-	.col-sm-2 {width: 24%;}
 
-}
 
-tbody > tr > th {font-weight: normal; }
 
-.panel .table { margin:0 0; }
 
-.panel .pagination { margin:0; }
 
-.panel-default>.panel-heading {background-color: #f5f5f5;}
 
-.row{
 
-	border-top: 1px solid #ddd;
 
-	margin:0;
 
-	padding:20px 2px 0px 2px;
 
-}
 
-.col-xs-6{padding-left: 0px;padding-right: 0px;}
 
-.form-horizontal .form-group {margin-left:0px;margin-right:0px;}
 
-.form-horizontal{
 
-	width:550px;padding-top:20px;
 
-}
 
+  .ml-10 {
 
+    margin-left: 10px !important;
 
+  }
 
+  .col-sm-10 {
 
+    width: 70%;
 
+    padding-left: 0px;
 
+  }
 
+  .col-sm-2 {
 
+    width: 24%;
 
+  }
 
+}
 
+tbody > tr > th {
 
+  font-weight: normal;
 
+}
 
+.panel .table {
 
+  margin: 0 0;
 
+}
 
+.panel .pagination {
 
+  margin: 0;
 
+}
 
+.panel-default > .panel-heading {
 
+  background-color: #f5f5f5;
 
+}
 
+.row {
 
+  border-top: 1px solid #ddd;
 
+  margin: 0;
 
+  padding: 20px 2px 0px 2px;
 
+}
 
+.col-xs-6 {
 
+  padding-left: 0px;
 
+  padding-right: 0px;
 
+}
 
+.form-horizontal .form-group {
 
+  margin-left: 0px;
 
+  margin-right: 0px;
 
+}
 
+.form-horizontal {
 
+  width: 550px;
 
+  padding-top: 20px;
 
+}
 
+
 
+.form-control {
 
+  height: 48px !important;
 
+  padding-left: 80px !important;
 
+  padding-right: 0 !important;
 
+}
 
+/* .has-feedback .form-control-feedback{
 
+  height: 48px !important;
 
+  line-height: 48px !important;
 
+  color: #4b91d1;
 
+  left: 0 !important;
 
+  right: none !important;
 
+} */
 
+
 
+.has-feedback .form-control-feedback-img {
 
+  width: 68px;
 
+  height: 34px;
 
+  line-height: 34px;
 
+  position: absolute;
 
+  top: 7px;
 
+  left: 0;
 
+  border-right: 1px solid #b3b3b3;
 
+  text-align: center;
 
+}
 
+.has-feedback .form-control-feedback-img .account {
 
+  width: 28px;
 
+  height: 27px;
 
+}
 
+.has-feedback .form-control-feedback-img .password {
 
+  width: 27px;
 
+  height: 30px;
 
+}
 
+.has-feedback .form-control-feedback-img .captcha {
 
+  width: 26px;
 
+  height: 30px;
 
+}

BIN
renren-admin/src/main/resources/statics/images/login/account.png
Просмотреть файл


BIN
renren-admin/src/main/resources/statics/images/login/captcha.png
Просмотреть файл


BIN
renren-admin/src/main/resources/statics/images/login/password.png
Просмотреть файл


BIN
renren-admin/src/main/resources/statics/images/login/wechatIMG321.png
Просмотреть файл


+ 82 - 70
renren-admin/src/main/resources/templates/login.html
Просмотреть файл 

@@ -1,5 +1,6 @@
 
 <!DOCTYPE html>
 
 <html>
 
+
 
 <head>
 
   <meta charset="utf-8">
 
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
@@ -20,30 +21,39 @@
 
   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
   <![endif]-->
 
 </head>
 
+
 
 <body class="hold-transition login-page" style="width: 100vw;text-align: right;padding-right: 226px;">
 
-<div class="login-box" id="rrapp" v-cloak style="background-color: #ffffff;padding: 90px 70px;border-radius: 10px;width: 524px;margin: 10% auto;display: inline-block;text-align: left;">
 
-  <div class="login-logo" style="margin-bottom: 0;">
 
-    <b style="color: #333">青雲慧运营平台</b>
 
-  </div>
 
-  <!-- /.login-logo -->
 
-  <div class="login-box-body" style="background: rgba(0,0,0,0)">
 
+  <div class="login-box" id="rrapp" v-cloak
 
+    style="background-color: #ffffff;padding: 90px 70px;border-radius: 10px;width: 524px;margin: 10% auto;display: inline-block;text-align: left;box-shadow: 0 0 10px #dde8ff;">
 
+    <div class="login-logo" style="margin-bottom: 25px;font-size: 28px;">
 
+      <b style="color: #2a58a5">青雲慧运营平台</b>
 
+    </div>
 
+    <!-- /.login-logo -->
 
+    <div class="login-box-body" style="background: rgba(0,0,0,0);padding: 0;">
 
       <!-- <p class="login-box-msg">管理员登录</p> -->
 
       <div v-if="error" class="alert alert-danger alert-dismissible">
 
         <h4 style="margin-bottom: 0px;"><i class="fa fa-exclamation-triangle"></i> {{errorMsg}}</h4>
 
       </div>
 
       <div class="form-group has-feedback">
 
+        <!-- <span class="glyphicon glyphicon-user form-control-feedback"></span> -->
 
+        <div class="form-control-feedback-img">
 
+          <img class="account" src="${request.contextPath}/statics/images/login/account.png" alt="">
 
+        </div>
 
         <input type="text" class="form-control" v-model="username" placeholder="账号">
 
-        <span class="glyphicon glyphicon-user form-control-feedback"></span>
 
-
 
-
 
       </div>
 
       <div class="form-group has-feedback">
 
+        <!-- <span class="glyphicon glyphicon-lock form-control-feedback"></span> -->
 
+        <div class="form-control-feedback-img">
 
+          <img class="password" src="${request.contextPath}/statics/images/login/password.png" alt="">
 
+        </div>
 
         <input type="password" class="form-control" v-model="password" placeholder="密码">
 
-        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
 
       </div>
 
       <div class="form-group has-feedback">
 
+        <!-- <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> -->
 
+        <div class="form-control-feedback-img">
 
+          <img class="captcha" src="${request.contextPath}/statics/images/login/captcha.png" alt="">
 
+        </div>
 
         <input type="text" class="form-control" v-model="captcha" @keyup.enter="login" placeholder="验证码">
 
-        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 
       </div>
 
       <div class="form-group has-feedback">
 
         <img alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src" @click="refreshCode">
 
@@ -58,69 +68,71 @@
 
         </div> -->
 
         <!-- /.col -->
 
         <div class="col-xs-12" style="padding: 0;">
 
-          <button type="button" class="btn btn-primary btn-block btn-flat" @click="login" style="background-color: #2b58a5;height: 48px;">登录</button>
 
+          <button type="button" class="btn btn-primary btn-block btn-flat" @click="login"
 
+            style="background-color: #2b58a5;height: 48px;">登录</button>
 
         </div>
 
         <!-- /.col -->
 
       </div>
 
-    <!-- /.social-auth-links -->
 
+      <!-- /.social-auth-links -->
 
 
+    </div>
 
+    <!-- /.login-box-body -->
 
   </div>
 
-  <!-- /.login-box-body -->
 
-</div>
 
-<!-- /.login-box -->
 
-<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
 
-<script src="${request.contextPath}/statics/libs/vue.min.js"></script>
 
-<script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
 
-<script src="${request.contextPath}/statics/libs/jquery.slimscroll.min.js"></script>
 
-<script src="${request.contextPath}/statics/libs/fastclick.min.js"></script>
 
-<script src="${request.contextPath}/statics/libs/app.js"></script>
 
-<script type="text/javascript">
 
-var vm = new Vue({
 
-	el:'#rrapp',
 
-	data:{
 
-		username: '',
 
-		password: '',
 
-		captcha: '',
 
-		error: false,
 
-		errorMsg: '',
 
-		src: 'captcha.jpg'
 
-	},
 
-	beforeCreate: function(){
 
-		if(self != top){
 
-			top.location.href = self.location.href;
 
-		}
 
-	},
 
-	methods: {
 
-		refreshCode: function(){
 
-			this.src = "captcha.jpg?t=" + $.now();
 
-		},
 
-		login: function (event) {
 
-			var data = "username="+vm.username+"&password="+vm.password+"&captcha="+vm.captcha;
 
-			$.ajax({
 
-				type: "POST",
 
-			    url: "sys/login",
 
-			    data: data,
 
-			    dataType: "json",
 
-			    success: function(result){
 
-					if(result.code == 0){//登录成功
 
-						parent.location.href ='index.html';
 
-					}else{
 
-						vm.error = true;
 
-						vm.errorMsg = result.msg;
 
+  <!-- /.login-box -->
 
+  <script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
 
+  <script src="${request.contextPath}/statics/libs/vue.min.js"></script>
 
+  <script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
 
+  <script src="${request.contextPath}/statics/libs/jquery.slimscroll.min.js"></script>
 
+  <script src="${request.contextPath}/statics/libs/fastclick.min.js"></script>
 
+  <script src="${request.contextPath}/statics/libs/app.js"></script>
 
+  <script type="text/javascript">
 
+    var vm = new Vue({
 
+      el: '#rrapp',
 
+      data: {
 
+        username: '',
 
+        password: '',
 
+        captcha: '',
 
+        error: false,
 
+        errorMsg: '',
 
+        src: 'captcha.jpg'
 
+      },
 
+      beforeCreate: function () {
 
+        if (self != top) {
 
+          top.location.href = self.location.href;
 
+        }
 
+      },
 
+      methods: {
 
+        refreshCode: function () {
 
+          this.src = "captcha.jpg?t=" + $.now();
 
+        },
 
+        login: function (event) {
 
+          var data = "username=" + vm.username + "&password=" + vm.password + "&captcha=" + vm.captcha;
 
+          $.ajax({
 
+            type: "POST",
 
+            url: "sys/login",
 
+            data: data,
 
+            dataType: "json",
 
+            success: function (result) {
 
+              if (result.code == 0) {//登录成功
 
+                parent.location.href = 'index.html';
 
+              } else {
 
+                vm.error = true;
 
+                vm.errorMsg = result.msg;
 
 
-						vm.refreshCode();
 
-					}
 
-				}
 
-			});
 
-		}
 
-	}
 
-});
 
-</script>
 
-<!--<div class="copyright" style="-->
 
-<!--    text-align: center;-->
 
-<!--    position: fixed;-->
 
-<!--    bottom: 1em;-->
 
-<!--    left: 41%;color: white;font-size: 0.8rem;-->
 
-<!--">Copyright &copy; 2019 中青国际. All rights reserved.  技术支持：<a href="http://www.songlanyun.com" target="_blank">松蓝云</a></div>-->
 
+                vm.refreshCode();
 
+              }
 
+            }
 
+          });
 
+        }
 
+      }
 
+    });
 
+  </script>
 
+  <!--<div class="copyright" style="-->
 
+  <!--    text-align: center;-->
 
+  <!--    position: fixed;-->
 
+  <!--    bottom: 1em;-->
 
+  <!--    left: 41%;color: white;font-size: 0.8rem;-->
 
+  <!--">Copyright &copy; 2019 中青国际. All rights reserved.  技术支持：<a href="http://www.songlanyun.com" target="_blank">松蓝云</a></div>-->
 
 </body>
 
-</html>
 
+
 
+</html>