TASK: #116148 数字密码样式优化

src/components/digicipher/digicipher-style.ts

@@ -21,19 +21,27 @@ export const sharedStyles: CSSResult = css`
     height: 12px;
     border-radius: 50%;
     display: inline-block;
-    margin: 0 10px;
-    background: #000000;
-    opacity: 0.2;
+    margin-right: 20px;
+    background: #f4f4f4;
+    opacity: 0.3;
+  }
+  #sSix {
+    margin: 0;
   }
-
   #parent {
     position: relative;
-    height: 500px;
-    width: 500px;
+    height: 250px;
+    width: 250px;
     left: 50%;
-    top: 66%;
+    top: 53%;
     transform: translate(-50%, -50%);
   }
+  .grid {
+    position: absolute;
+    display: grid;
+    grid-template-areas: '1 2 3 ' '4 5 6' '7 8 9';
+    gap: 20px;
+  }
 
   p {
     position: absolute;
@@ -44,9 +52,9 @@ export const sharedStyles: CSSResult = css`
   }
 
   #zero {
-    position: relative;
-    left: 42.5%;
-    top: 68%;
+    position: absolute;
+    left: 36%;
+    top: 270px;
   }
   button {
     position: relative;
@@ -79,32 +87,26 @@ export const sharedStyles: CSSResult = css`
   }
 
   #slideUp {
-    position: absolute;
-    height: 500px;
-    width: 500px;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+  #textcenter {
+    text-align: center;
   }
   .topText {
     font-size: 20px;
     height: 26.5px;
     line-height: 26.5px;
-    width: 80px;
-    left: calc(50% - 80px / 2 + 3px);
-    top: calc(50% - 26.5px / 2 - 168.75px);
+    width: 160px;
+    left: calc(50% - 160px / 2);
+    top: 31%;
   }
   .spanContainer {
-    position: relative;
-    left: 29%;
-    top: 23%;
-  }
-  .grid {
     position: absolute;
-    display: grid;
-    grid-template-areas: '1 2 3 ' '4 5 6' '7 8 9' '. 0 .';
-    gap: 20px;
-    margin: 0 124px;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 36.7%;
   }
 
   .cancel,
@@ -118,13 +120,13 @@ export const sharedStyles: CSSResult = css`
     height: 23.5px;
     line-height: 23.5px;
     font-size: 18px;
-    top: 73%;
+    top: 118.5%;
   }
   .cancel {
-    left: 27%;
+    left: 8%;
   }
   .delete {
-    left: 65.5%;
+    left: 78.5%;
   }
   .cancel:hover,
   .delete:hover {

src/components/digicipher/digicipher.ts

@@ -18,9 +18,9 @@ export class StarLockNumber extends LitElement {
   @query('.topText') topText!: HTMLParagraphElement
   @query('.screen') screen!: HTMLDivElement
 
-  @property({type: String}) mode = "default"
-  @property({type: String}) cancelNote = "取消"
-  @property({type: String}) deleteNote = "删除"
+  @property({type: String}) mode = 'default'
+  @property({type: String}) cancelNote = '取消'
+  @property({type: String}) deleteNote = '删除'
   @property({type: Boolean}) confirm = false
   @property({type: Number}) tried = 0
   @property({type: Number}) time = 0
@@ -33,35 +33,37 @@ export class StarLockNumber extends LitElement {
   @property({type: String}) color = ''
   @property({type: String}) opacity = ''
   @property({type: String}) guess = ''
-  @property({type: String}) passwd = '123456'
+  @property({type: String}) passwd = ''
   @property({type: String}) savewd = ''
 
   protected firstUpdated(
     _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
-    switch(this.mode){
-      case "create":
-        this.changeText = '新建密码';
-        break;
-      case "verify":
-      case "comfirm":
-        this.changeText = '输入密码';
-        break;
-      case "default":
+    switch (this.mode) {
+      case 'create':
+        this.changeText = '新建密码'
+        break
+      case 'verify':
+      case 'comfirm':
+        this.changeText = '输入密码'
+        break
+      case 'default':
         this.changeText = '星光麒麟密码组件'
     }
     this.spanContainer.style.visibility = `visible`
     this.parent.style.visibility = `visible`
-    this.addEventListener('passcode-create-success',this)
-    this.addEventListener('passcode-verify-success',this)
-    this.addEventListener('passcode-verify-error',this)
-    this.addEventListener('passcode-reset',this)
+    this.addEventListener('passcode-create-success', this)
+    this.addEventListener('passcode-verify-success', this)
+    this.addEventListener('passcode-verify-error', this)
+    this.addEventListener('passcode-reset', this)
   }
 
   render() {
     return html`
       <div id="slideUp">
-        <p class="topText">${this.changeText}</p>
+        <div id="textcenter">
+          <p class="topText">${this.changeText}</p>
+        </div>
         <div class="spanContainer">
           <span id="sOne"></span>
           <span id="sTwo"></span>
@@ -108,9 +110,9 @@ export class StarLockNumber extends LitElement {
       case 'passcode-create-success':
         this.guess = ''
         this.clicks = 0
-        this.spanContainer.style.visibility = `hidden`;
-        this.parent.style.visibility = `hidden`;
-        this.changeText = '保存成功';
+        this.spanContainer.style.visibility = `hidden`
+        this.parent.style.visibility = `hidden`
+        this.changeText = '保存成功'
         break
       case 'passcode-verify-success':
         this.guess = ''
@@ -120,7 +122,7 @@ export class StarLockNumber extends LitElement {
         }
         break
       case 'passcode-verify-error':
-             // 抖动反馈
+        // 抖动反馈
         for (let i = 0; i < 10; i++) {
           this.buttons[i].style.setProperty('animation', 'errtips .5s')
         }
@@ -131,20 +133,20 @@ export class StarLockNumber extends LitElement {
         this.guess = ''
         this.clicks = 0
         break
-        case 'passcode-reset':
-          this.guess = ''
-          this.clicks = 0
-          for (let i = 0; i < 6; i++) {
-            this.changeBgColor('#F4F4F4', i, 0.4)
-          }
-          if(this.mode == "create"){
+      case 'passcode-reset':
+        this.guess = ''
+        this.clicks = 0
+        for (let i = 0; i < 6; i++) {
+          this.changeBgColor('#F4F4F4', i, 0.4)
+        }
+        if (this.mode == 'create') {
           this.changeText = '新建密码'
           this.spanContainer.style.visibility = `visible`
           this.parent.style.visibility = `visible`
-          }else{
-            this.changeText = '输入密码'
-          }
-      break
+        } else {
+          this.changeText = '输入密码'
+        }
+        break
     }
   }
 
@@ -161,14 +163,17 @@ export class StarLockNumber extends LitElement {
         this.changeBgColor('#F4F4F4', this.clicks, 1)
         this.clicks += 1
         this.guess += (e.target as HTMLElement).dataset.num
-      }else if (this.clicks == 5){
-        if (this.mode == "create"){
+      } else if (this.clicks == 5) {
+        this.changeBgColor('#F4F4F4', this.clicks, 1)
+        this.clicks += 1
+        this.guess += (e.target as HTMLElement).dataset.num
+        if (this.mode == 'create') {
           if (!this.confirm) {
             this.changePasswd()
           } else {
             this.confirmPasswd()
           }
-        }else if(this.mode == "verify"){
+        } else if (this.mode == 'verify') {
           this.dispatchPasswd()
         }
       }
@@ -181,7 +186,7 @@ export class StarLockNumber extends LitElement {
       }
     } else if ((e.target as Element).className === 'cancel') {
       //点击取消，返回锁屏
-      //   this.makeZero()
+      this.makeZero()
       for (let i = 0; i < 6; i++) {
         this.changeBgColor('#F4F4F4', i, 0.4)
       }
@@ -191,6 +196,8 @@ export class StarLockNumber extends LitElement {
   }
   touchEnd(e: TouchEvent) {
     if ((e.target as Element).tagName === 'BUTTON') {
+      console.log('this.guess', this.guess)
+
       this.removeNumberBgColor()
     }
   }
@@ -214,7 +221,7 @@ export class StarLockNumber extends LitElement {
   }
 
   //发送密码
-  dispatchPasswd(){
+  dispatchPasswd() {
     this.passwd = this.guess
     this.guess = ''
     this.clicks = 0
@@ -242,8 +249,8 @@ export class StarLockNumber extends LitElement {
   }
   //确认密码
   confirmPasswd() {
-    if (this.savewd.toString() == this.guess.toString() ) {
-    // if (1) {
+    if (this.savewd.toString() == this.guess.toString()) {
+      // if (1) {
       this.passwd = this.savewd
       this.savewd = ''
       for (let i = 0; i < 6; i++) {
@@ -271,5 +278,5 @@ export class StarLockNumber extends LitElement {
       this.confirm = false
       this.changeText = '更改密码'
     }
-}
+  }
 }

src/test/panels/digicipher/digicipher.ts

@@ -11,10 +11,18 @@ export class PanelDigicipher extends LitElement {
       width: 100%;
       background-color: rgb(183, 211, 227);
     }
+    #line {
+      position: absolute;
+      left: calc(50% - 1px);
+      width: 2px;
+      height: 100%;
+      background-color: black;
+    }
   `
   render() {
     return html`
       <div class="screen">
+        <div id="line"></div>
         <star-digicipher></star-digicipher>
       </div>
     `