密码修改未完

src/css/index.less

@@ -9,7 +9,7 @@
   height: 24px;
   position: relative;
   background: #EDEEEF;
-  top: -27px;
+  top: -19px;
   text-align: left;
   & img{
     margin-left: 16px;
@@ -432,77 +432,6 @@
       font-weight: normal;
     }
   }
-  //修改密码
-  .modalAction {
-    position: relative;
-    // padding: 20px;
-    input {
-      border: 1px solid #E2E5EF;
-      width: 300px;
-      height: 34px;
-      line-height: 34px;
-      border-radius: 3px;
-      margin-bottom: 30px;
-      padding: 0 10px;
-      box-sizing: border-box;
-    }
-    p {position: relative;}
-    p span {
-      width: 90px;
-      display: inline-block;
-      text-align: right;
-      color: #777;
-    }
-    .oldWaring {
-      color: #FF4D4F;
-      display: inline-block;
-      position: absolute;
-      top: 37px;
-      left: 107px;
-      text-align: left;
-      & img{
-        margin-right: 5px;
-      }
-      & b{
-        font-weight: 400;
-      }
-    }
-    .newword {
-      color: #FF4D4F;
-      display: inline-block;
-      top: -26px;
-      left: -36px;
-      text-align: left;
-      & img{
-        margin-right: 5px;
-      }
-      & b{
-        font-weight: 400;
-      }
-    }
-    .sureword{
-      color: #FF4D4F;
-      display: inline-block;
-      top: -26px;
-      left: -36px;
-      text-align: left;
-      & img{
-        margin-right: 5px;
-      }
-      & b{
-        font-weight: 400;
-      }
-    }
-    .waring {
-      text-align: left;
-      s {
-        margin-left: 15px;
-        color: #FF4D4F;
-        position: relative;
-        top: -22px;
-      }
-    }
-  }
   .moduleMsgBox{
     .moduleMsgContent{
       position: fixed;
@@ -1172,4 +1101,53 @@
   .midifyMsgContentDel {
     height: 220px !important;
     width: 300px !important;
-  }
+  }
+  /**********修改密码框*********/
+.modalAction{
+  position: relative;
+  // padding: 20px;
+  input {
+    border: 1px solid #E2E5EF;
+    width: 300px;
+    height: 34px;
+    line-height: 34px;
+    border-radius: 3px;
+    margin: 5px 0;
+    padding: 0 10px;
+    box-sizing: border-box;
+  }
+  p {position: relative;}
+  p span {
+    width: 90px;
+    display: inline-block;
+    text-align: right;
+    color: #777;
+  }
+  & img{
+    margin-right: 5px;
+  }
+  & b{
+    font-weight: 400;
+  }
+  .eye{
+    margin-left: 5px;
+    cursor: pointer;
+  }
+  .warning{
+    display: none;
+    color: #FF4D4F;
+    text-align: left;
+    margin:0 0 0 90px;
+    font-size: 12px;
+    img{
+      width: 16px;
+      vertical-align: text-bottom;
+    }
+  }
+
+}
+.alertModal{
+  .btns{
+    margin-top:30px;
+  }
+}

src/js/index.js

@@ -3,12 +3,23 @@ const $ = require('jquery');
 require('jquery-templates');
 const md5 = require('js-md5');
 require("./modal.js")
-const Warning = require("./../images/icon-Warning.png")
+const WarningIcon =  require("./../images/icon-Warning.png")
+const warnIcon = require("./../images/warn.png")
+const openEye = require("./../images/open-eye.png")
+const closeEye = require("./../images/close-eye.png")
 const { api } = require('./api.js')
 const { post, pageMap, delCookie, setCookie, getCookie, focusMenuItem, initScroll } = require('./utils.js');
 let userInfo = {};
 let isPlacefile = getCookie('isPlacefile') || 1
 let passwordComplexity = getCookie('passwordComplexity')
+const modalDom = `
+      <p class="tips"><img src=${WarningIcon} /><span>为确保账号安全，请及时修改初始密码</span></p>
+      <div class="modalAction">
+        <p><span>原密码：</span><input type="text" placeholder="请输入原密码" class="oldword" id="oldWord" autocomplete="off"><img class="eye" src=${closeEye} /><p class="oldWaring warning"><img src=${warnIcon} /><b>请及时修改初始密码</b></p></p>
+        <p><span>新密码：</span><input type="text" disabled placeholder="请输入新密码" class="newword" id="newWord" autocomplete="off"><img class="eye" src=${closeEye} /><p class="newword warning"><img src=${warnIcon} /><b>请及时修改初始密码</b></p></p>
+        <p><span>确认新密码：</span><input type="text" disabled placeholder="请输入确认新密码" class="sureword" id="sureWord" autocomplete="off"><img class="eye" src=${closeEye} /><p class="sureword warning"><img src=${warnIcon} /><b>请及时修改初始密码</b></p></p>
+      </div>
+    `;
 $(function () {
   getOwnDept();
   setInterval(() => {
@@ -24,14 +35,7 @@ $(function () {
       width: '450',
       time: '1000',
       sureText: '保存',
-      message: `
-      <p class="tips"><img class="Warning" src=${Warning} /><span>为确保账号安全，请及时修改初始密码</span></p>
-      <div class="modalAction">
-        <p><span>原密码：</span><input type="text" placeholder="请输入原密码" class="oldword" autocomplete="off"><p class="oldWaring"><img class="Warning" src=${Warning} /><b>请及时修改初始密码</b></p></p>
-        <p><span>新密码：</span><input type="text" placeholder="请输入新密码" class="newword" autocomplete="off"><p class="newword"><img class="Warning" src=${Warning} /><b>请及时修改初始密码</b></p></p>
-        <p><span>确认新密码：</span><input type="text" placeholder="请输入新密码" class="sureword" autocomplete="off"><p class="sureword"><img class="Warning" src=${Warning} /><b>请及时修改初始密码</b></p></p>
-      </div>
-    `});
+      message: modalDom});
     let oldword = $(".oldword").val().trim()
     let newword = $(".newword").val().trim()
     let sureword = $(".sureword").val().trim()
@@ -101,6 +105,16 @@ $(function () {
     $(this).parent().find('img').attr('src', require('../images/qiehuan2.png'))
   })
 });
+//切换密码明文
+function switchPwd(el,flag) {
+  if(flag){
+      el.parent()
+      el.attr("type",'text');
+  }else{
+      el.attr("type",'password');
+  }
+}
+//绑定输入框事件
 
 
 //判断有无某一权限