Kaynağa Gözat

优化登陆界面,适应手机端

java71- 张威豹 3 yıl önce
ebeveyn
işleme
76756ad2bd

+ 40 - 39
ruoyi-admin/src/main/resources/templates/login.html

@@ -27,53 +27,54 @@
         }
     </style>
     <script>
-        if (window.top !== window.self) {   window.top.location = window.location}
+        if (window.top !== window.self) {
+            window.top.location = window.location
+        }
         ;
     </script>
 
 </head>
 <body class="signin">
-<div class="table">
-    <form id="signupForm">
-        <div class="table-row firsti">
-            <i class="icon-search"></i>
-            <input type="text" name="username" class="form-control uname" id="zhname" placeholder="用户名"/>
-        </div>
-        <div class="table-row secondi">
-            <i class="icon-search2"></i>
-            <input type="password" name="password" class="form-control pword" id="zhpassword" placeholder="密码"
-                   required="required"/>
-        </div>
-
-
-
-
-        <div class="row m-t" style="margin-top: 5px">
-            <div class="col-xs-6" style="padding-right:2px;width: 60%">
-                <input type="text" name="code" id="code" style="width: 100%;height: 40px;margin-top: 8%;color: #2b542c" class="form-control code" placeholder="手机验证码" maxlength="4" autocomplete="off">
-            </div>
-            <div class="col-xs-6" style="padding-left: 8px;padding-top: 5px;padding-bottom: 1px;width: 40%;">
-                <input type="button" style="width: 100%;height: 39px;margin-top: 10%;color:green;background-color: #f3f3f4;padding-left:3px;font-size: 15px" class="form-control code" onclick="sendCode()" id="verbtn" placeholder="获取验证码" value="获取验证码">
-            </div>
-        </div>
-
+<div  class="longLineCharacter"><p >安徽省事业单位人事管理系统</p></div>
+<div class="loginDecoration">
+    <p></p>
+</div>
+<div class="outsideBorder">
+    <div class="secondaryBorder">
+        <div class="table">
+            <div ><h2 class="titleText">用户登录/LOGIN</h2></div>
+            <div class="line"></div>
+            <form id="signupForm">
+                <div class="table-row firsti">
+                    <i class="icon-search"></i>
+                    <input type="text" name="username" class="form-control uname" id="zhname" placeholder="用户名"/>
+                </div>
+                <div class="table-row secondi">
+                    <i class="icon-search2"></i>
+                    <input type="password" name="password" class="form-control pword" id="zhpassword" placeholder="密码"
+                           required="required"/>
+                </div>
+                <div class="row m-t" style="margin-top: 5px">
+                    <div class="col-xs-6" style="padding-right:2px;width: 60%">
+                        <input type="text" name="code" id="code" style="width: 100%;height: 40px;margin-top: 8%;color: #2b542c" class="form-control code" placeholder="手机验证码" maxlength="4" autocomplete="off">
+                    </div>
+                    <div class="col-xs-6" style="padding-left: 8px;padding-top: 5px;padding-bottom: 1px;width: 40%;">
+                        <input type="button" style="width: 100%;height: 39px;margin-top: 10%;color:green;background-color: #f3f3f4;padding-left:3px;font-size: 15px" class="form-control code" onclick="sendCode()" id="verbtn" placeholder="获取验证码" value="获取验证码">
+                    </div>
+                </div>
 
-        <div class="row m-t" th:if="${captchaEnabled==true}">
-            <div class="col-xs-6">
-                <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" autocomplete="off">
-            </div>
-            <div class="col-xs-6">
-                <a href="javascript:void(0);" title="点击更换验证码">
-                    <img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
-                </a>
-            </div>
-        </div>
+                <div class="row m-t" th:if="${captchaEnabled==true}">
+                    <div class="col-xs-6">
+                        <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" autocomplete="off">
+                    </div>
+                    <div class="col-xs-6">
+                        <a href="javascript:void(0);" title="点击更换验证码">
+                            <img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
+                        </a>
+                    </div>
+                </div>
 
 
-        <div class="checkbox-custom" style="width: 100%" th:classappend="${captchaEnabled==false} ? 'm-t'">
-<!--            <input type="checkbox" id="zhrememberme" name="rememberme"> <label for="rememberme">记住我</label>-->
-            <a style="float:right" onclick="downloadExe()">插件下载</a>
-        </div>
                 <div class="checkbox-custom" style="width: 100%" th:classappend="${captchaEnabled==false} ? 'm-t'">
                     <input type="checkbox" id="zhrememberme" name="rememberme"> <label style="color:black;" for="rememberme">记住我</label><a style="float:right" onclick="downloadExe()">插件下载</a>
                 </div>

+ 64 - 47
ruoyi-admin/src/main/resources/templates/loginPhone.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
@@ -14,66 +14,74 @@
     <link href="../static/css/loginPhone.css" th:href="@{/css/loginPhone.css}" rel="stylesheet"/>
     <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.0.0}" rel="stylesheet"/>
     <!--[if lt IE 9]>
-    <meta http-equiv="refresh" content="0;ie.html" />
+    <meta http-equiv="refresh" content="0;ie.html"/>
     <![endif]-->
     <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
     <style type="text/css">
-        label.error { position:inherit;  }
-        body { font-size: 16px; }
+        label.error {
+            position: inherit;
+        }
+        body {
+            font-size: 16px;
+        }
     </style>
     <script>
-        if(window.top!==window.self){window.top.location=window.location};
+        if (window.top !== window.self) {   window.top.location = window.location}  ;
     </script>
 
 </head>
-
 <body class="signin">
-<div class="table">
-    <form id="signupForm">
-        <div class="table-row firsti" >
-            <i class="icon-search"></i>
-            <input type="text" name="username" class="form-control uname" id="zhname" placeholder="用户名"/>
-        </div>
-        <div class="table-row secondi" >
-            <i class="icon-search2"></i>
-            <input type="password" name="password" class="form-control pword" id="zhpassword" placeholder="密码"
-                   required="required"/>
-        </div>
-
-        <div class="table-row thirdi" >
-            <i class="icon-search3"></i>
-            <input type="text" name="phone" class="form-control phone" id="zhphone"    placeholder="手机号" />
-        </div>
-
+<div  class="longLineCharacter"><p >安徽省事业单位人事管理系统</p></div>
+<div class="loginDecoration">
+    <p></p>
+</div>
+<div class="outsideBorder">
+    <div class="secondaryBorder">
+        <div class="table">
+            <div ><h2 class="titleText">用户登录/LOGIN</h2></div>
+            <div class="line"></div>
+            <form id="signupForm">
+                <div class="table-row firsti">
+                    <i class="icon-search"></i>
+                    <input type="text" name="username" class="form-control uname" id="zhname" placeholder="用户名"/>
+                </div>
+                <div class="table-row secondi">
+                    <i class="icon-search2"></i>
+                    <input type="password" name="password" class="form-control pword" id="zhpassword" placeholder="密码"
+                           required="required"/>
+                </div>
 
+                <div class="table-row thirdi" >
+                    <i class="icon-search3"></i>
+                    <input type="text" style="color: black;height: 39px" name="phone" class="form-control phone" id="zhphone"    placeholder="手机号" />
+                </div>
 
-        <!--手机验证码-->
-        <div class="row m-t" style="margin-top: 5px">
-            <div class="col-xs-6" style="padding-right:2px;width: 60%">
-                <input type="text" name="code" id="code" style="width: 100%;height: 40px;margin-top: 8%;color: #2b542c" class="form-control code" placeholder="手机验证码" maxlength="4" autocomplete="off">
-            </div>
-            <div class="col-xs-6" style="padding-left: 8px;padding-top: 5px;padding-bottom: 1px;width: 40%;">
-                <input type="button" style="width: 100%;height: 39px;margin-top: 10%;color:green;background-color: #f3f3f4;padding-left:3px;font-size: 15px" class="form-control code" onclick="sendCode()" id="verbtn" placeholder="获取验证码" value="获取验证码">
-            </div>
-        </div>
+                <!--手机验证码-->
+                <div class="row m-t" style="margin-top: 5px">
+                    <div class="col-xs-6" style="padding-right:2px;width: 60%">
+                        <input type="text" name="code" id="code" style="width: 100%;height: 40px;margin-top: 8%;color: # ;" class="form-control code" placeholder="手机验证码" maxlength="4" autocomplete="off">
+                    </div>
+                    <div class="col-xs-6" style="padding-left: 8px;padding-top: 5px;padding-bottom: 1px;width: 40%;">
+                        <input type="button" style="width: 100%;height: 39px;margin-top: 10%;color:green;background-color: #f3f3f4;padding-left:3px;font-size: 15px" class="form-control code" onclick="sendCode()" id="verbtn" placeholder="获取验证码" value="获取验证码">
+                    </div>
+                </div>
 
+                <!--验证码 无用-->
+                <div class="row m-t" th:if="${captchaEnabled==true}">
+                    <div class="col-xs-6">
+                        <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" autocomplete="off">
+                    </div>
+                    <div class="col-xs-6">
+                        <a href="javascript:void(0);" title="点击更换验证码">
+                            <img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
+                        </a>
+                    </div>
+                </div>
 
+                <div class="checkbox-custom" style="width: 100%" th:classappend="${captchaEnabled==false} ? 'm-t'">
+                    <input  type="checkbox" id="zhrememberme" name="rememberme"> <label style="color:black;"for="rememberme">记住我</label>
+                </div>
 
-        <!--验证码 无用-->
-        <div class="row m-t" th:if="${captchaEnabled==true}">
-            <div class="col-xs-6">
-                <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" autocomplete="off">
-            </div>
-            <div class="col-xs-6">
-                <a href="javascript:void(0);" title="点击更换验证码">
-                    <img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
-                </a>
-            </div>
-        </div>
-
-<!--        <div class="checkbox-custom" style="width: 100%" th:classappend="${captchaEnabled==false} ? 'm-t'">-->
-<!--            <input type="checkbox" id="zhrememberme" name="rememberme"> <label for="rememberme">记住我</label>-->
-<!--        </div>-->
                 <button class="btn table-row " id="btnSubmit" data-loading="正在登录,请稍后……">登录
                 </button>
             </form>
@@ -82,6 +90,15 @@
 </div>
 <script th:inline="javascript"> var ctx = [[@{/}]];
 var captchaType = [[${captchaType}]];
+
+function downloadExe() {
+    var systemMessage = navigator.userAgent;
+    if (systemMessage.indexOf("Windows") == -1) {
+        window.location.href = ctx + "common/download/resource?resource=/profile/download/com.longmai.mpluginv4.deb"
+    } else {
+        window.location.href = ctx + "common/download/resource?resource=/profile/download/mPlugin_SKF_Setup.exe"
+    }
+}
 </script>
 <!-- 全局js -->
 <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>