登录界面，新增密码查看与隐藏功能

ruoyi-admin/src/main/resources/static/css/loginLogin.css

@@ -102,6 +102,15 @@ body.signin {
     /*top: 30.225%;*/
     left:0.25%;
 }
+#conceal{
+    position: absolute;
+    top: 20%;
+    right: 3%;
+    color: #9b9b9b;
+    size: auto;
+    font-size: 20px;
+    cursor: pointer;
+}
 .code-input{
     /*width: 100%;*/
     height: 42.5px;

ruoyi-admin/src/main/resources/static/css/loginPhone.css

@@ -23,7 +23,6 @@ body.signin {
     background: white;
     padding: 2em;
 }
-
 .longLineCharacter{
     color: white;
     font-size: 30px;
@@ -48,13 +47,11 @@ body.signin {
     /* 实体白线，因为需要贯穿整个屏幕，所以第三个值不需要设置 */
     border-top: solid #d8d7df;
 }
-
 .table-row{
     width: 100%;
     height: 30%;
     margin-top: 10%;
 }
-
 /*开启相对定位*/
 .firsti{
     position: relative;
@@ -62,7 +59,6 @@ body.signin {
 .secondi{
     position: relative;
 }
-
 /*用户名*/
 .table .uname {
 
@@ -83,7 +79,6 @@ body.signin {
     top: 0.8px;
     left: 0.25%;
 }
-
 /*密码*/
 .table .pword {
     /*background: url("../img/locked.png");*/
@@ -94,7 +89,6 @@ body.signin {
     color: #333;
     height: 44px;
 }
-
 .table .icon-search2{
     background: url("../img/locked.png") no-repeat;
     background-color: #d4d4d4;
@@ -107,8 +101,15 @@ body.signin {
     /*top: 30.225%;*/
     left:0.25%;
 }
-
-
+#conceal{
+    position: absolute;
+    top: 18%;
+    right: 3%;
+    color: #9b9b9b;
+    size: auto;
+    font-size: 20px;
+    cursor: pointer;
+}
 .code-input{
     /*width: 100%;*/
     height: 42.5px;
@@ -124,7 +125,6 @@ body.signin {
     margin-top: 35px;
     height: 45px;
 }
-
 .text{
     font-size: 18px;
     letter-spacing:1px;
@@ -151,8 +151,6 @@ body.signin {
 .btn{
     background: #237AEE;
 }
-
-
 @media screen and (max-width: 1300px) {
 
     .outsideBorder{
@@ -165,8 +163,6 @@ body.signin {
         position: relative;
     }
 }
-
-
 @media screen and (max-width: 768px) {
     .longLineCharacter{
         color: white;
@@ -191,7 +187,6 @@ body.signin {
 
 
 }
-
 @media screen and (max-width: 480px) {
 
     body{

ruoyi-admin/src/main/resources/static/css/loginTest.css

@@ -100,6 +100,15 @@ body.signin {
     /*top: 30.225%;*/
     left:0.25%;
 }
+#conceal{
+    position: absolute;
+    top: 20%;
+    right: 3%;
+    color: #9b9b9b;
+    size: auto;
+    font-size: 20px;
+    cursor: pointer;
+}
 .code-input{
     /*width: 100%;*/
     height: 42.5px;

ruoyi-admin/src/main/resources/templates/login.html

@@ -13,6 +13,7 @@
     <link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet"/>
     <link href="../static/css/loginLogin.css" th:href="@{/css/loginLogin.css}" rel="stylesheet"/>
     <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.0.0}" rel="stylesheet"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
     <!--[if lt IE 9]>
     <meta http-equiv="refresh" content="0;ie.html"/>
     <![endif]-->
@@ -50,6 +51,7 @@
                     <i class="icon-search2"></i>
                     <input type="password" name="password" class="form-control pword" id="zhpassword" placeholder="密码"
                            required="required"/>
+                    <i class="bi bi-eye-slash" id="conceal" onclick="showOrHidden()"></i>
                 </div>
                 <div class="row m-t" style="margin-top: 5px">
                     <div class="col-xs-6" style="padding-right:2px;width: 60%">
@@ -71,7 +73,6 @@
                     </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>
@@ -83,6 +84,10 @@
         </div>
     </div>
 </div>
+
+<!-- 全局js -->
+<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
+<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
 <script th:inline="javascript"> var ctx = [[@{/}]];
 var captchaType = [[${captchaType}]];
 
@@ -94,10 +99,22 @@ function downloadExe() {
         window.location.href = ctx + "common/download/resource?resource=/profile/download/mPlugin_SKF_Setup.exe"
     }
 }
+
+var passWord = $('#zhpassword')
+var anniu = $('#conceal')
+function showOrHidden() {
+    if(passWord.attr('type')==='password')
+    {
+        passWord.attr('type','text');
+        anniu.removeClass('bi bi-eye-slash');
+        anniu.addClass('bi bi-eye');
+    }else{
+        passWord.attr('type','password');
+        anniu.removeClass('bi bi-eye');
+        anniu.addClass('bi bi-eye-slash');
+    }
+}
 </script>
-<!-- 全局js -->
-<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
-<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
 <!-- 验证插件 -->
 <script src="../static/ajax/libs/validate/jquery.validate.min.js"
         th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>

ruoyi-admin/src/main/resources/templates/loginPhone.html

@@ -13,6 +13,7 @@
     <link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet"/>
     <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"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
     <!--[if lt IE 9]>
     <meta http-equiv="refresh" content="0;ie.html"/>
     <![endif]-->
@@ -46,6 +47,7 @@
                     <i class="icon-search2"></i>
                     <input type="password" name="password" class="form-control pword" id="zhpassword" placeholder="密码"
                            required="required"/>
+                    <i class="bi bi-eye-slash" id="conceal" onclick="showOrHidden()"></i>
                 </div>
 
                 <div class="table-row thirdi" >
@@ -85,12 +87,29 @@
         </div>
     </div>
 </div>
-<script th:inline="javascript"> var ctx = [[@{/}]];
-var captchaType = [[${captchaType}]];
-</script>
 <!-- 全局js -->
 <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
 <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
+<script th:inline="javascript">
+
+    var passWord = $('#zhpassword')
+    var anniu = $('#conceal')
+    function showOrHidden() {
+        if(passWord.attr('type')==='password')
+        {
+            passWord.attr('type','text');
+            anniu.removeClass('bi bi-eye-slash');
+            anniu.addClass('bi bi-eye');
+        }else{
+            passWord.attr('type','password');
+            anniu.removeClass('bi bi-eye');
+            anniu.addClass('bi bi-eye-slash');
+        }
+    }
+
+    var ctx = [[@{/}]];
+    var captchaType = [[${captchaType}]];
+</script>
 <!-- 验证插件 -->
 <script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
 <script src="../static/ajax/libs/validate/messages_zh.min.js" th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>

ruoyi-admin/src/main/resources/templates/loginTest.html

@@ -12,6 +12,7 @@
     <link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet"/>
     <link href="../static/css/loginTest.css" th:href="@{/css/loginTest.css}" rel="stylesheet"/>
     <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.0.0}" rel="stylesheet"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
     <!--[if lt IE 9]>
     <meta http-equiv="refresh" content="0;ie.html" />
     <![endif]-->
@@ -41,6 +42,7 @@
             <i class="icon-search2"></i>
             <input type="password" name="password" class="form-control pword" id="zhpassword" placeholder="密码"
                    required="required"/>
+                <i class="bi bi-eye-slash" id="conceal" onclick="showOrHidden()"></i>
         </div>
         <div class="row m-t" th:if="${captchaEnabled==true}">
             <div class="col-xs-6">
@@ -59,10 +61,30 @@
 </div>
 </div>
 </div>
-<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
+
 <!-- 全局js -->
 <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
 <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
+<script th:inline="javascript">
+
+    var passWord = $('#zhpassword')
+    var anniu = $('#conceal')
+    function showOrHidden() {
+        if(passWord.attr('type')==='password')
+        {
+            passWord.attr('type','text');
+            anniu.removeClass('bi bi-eye-slash');
+            anniu.addClass('bi bi-eye');
+        }else{
+            passWord.attr('type','password');
+            anniu.removeClass('bi bi-eye');
+            anniu.addClass('bi bi-eye-slash');
+        }
+    }
+
+    var ctx = [[@{/}]]; var captchaType = [[${captchaType}]];
+
+</script>
 <!-- 验证插件 -->
 <script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
 <script src="../static/ajax/libs/validate/messages_zh.min.js" th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>