TASK: #111576 数字密码优化

src/components/digicipher/digicipher-style.ts

@@ -21,11 +21,20 @@ export const sharedStyles: CSSResult = css`
     height: 12px;
     border-radius: 50%;
     display: inline-block;
-    margin-right: 20px;
+    margin: 0 10px;
     background: #000000;
     opacity: 0.2;
   }
 
+  #parent {
+    position: relative;
+    height: 500px;
+    width: 500px;
+    left: 50%;
+    top: 66%;
+    transform: translate(-50%, -50%);
+  }
+
   p {
     position: absolute;
     font-family: 'OPPOSans';
@@ -35,12 +44,11 @@ export const sharedStyles: CSSResult = css`
   }
 
   #zero {
-    position: absolute;
-    left: 44.15%;
-    top: 70%;
+    position: relative;
+    left: 42.5%;
+    top: 68%;
   }
   button {
-    position: relative;
     width: 70px;
     height: 70px;
     border-radius: 50%;
@@ -71,8 +79,11 @@ export const sharedStyles: CSSResult = css`
 
   #slideUp {
     position: absolute;
-    height: 100%;
-    width: 100%;
+    height: 500px;
+    width: 500px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
   }
   .topText {
     font-size: 20px;
@@ -83,21 +94,21 @@ export const sharedStyles: CSSResult = css`
     top: calc(50% - 26.5px / 2 - 168.75px);
   }
   .spanContainer {
-    position: absolute;
-    left: 206px;
-    top: 349.5px;
+    position: relative;
+    left: 29%;
+    top: 23%;
   }
   .grid {
-    position: absolute;
+    position: relative;
     display: grid;
     grid-template-areas: '1 2 3 ' '4 5 6' '7 8 9' '. 0 .';
-    grid-gap: 20px;
-    margin: 404px 176px;
+    gap: 20px;
+    margin: 0 118px;
   }
 
   .cancel,
   .delete {
-    position: absolute;
+    position: relative;
     font-family: 'OPPOSans';
     font-style: normal;
     font-weight: 400;
@@ -108,12 +119,12 @@ export const sharedStyles: CSSResult = css`
     font-size: 18px;
   }
   .cancel {
-    left: calc(50% - 36px / 2 - 90px);
-    top: calc(50% - 23.5px / 2 + 231.75px);
+    left: 27%;
+    top: 5%;
   }
   .delete {
-    left: calc(50% - 36px / 2 + 90px);
-    top: calc(50% - 23.5px / 2 + 231.75px);
+    left: 65.5%;
+    top: -3.5%;
   }
   .cancel:hover,
   .delete:hover {

src/components/digicipher/digicipher.ts

@@ -18,6 +18,8 @@ export class StarLockNumber extends LitElement {
   @query('.topText') topText!: HTMLParagraphElement
   @query('.screen') screen!: HTMLDivElement
 
+  @property({type: Boolean}) locked = false
+  @property({type: Number}) tried = 0
   @property({type: Number}) clicks = 0
   @property({type: Number}) _number = 0
   @property({type: Number}) clickNumber = 0
@@ -64,8 +66,6 @@ export class StarLockNumber extends LitElement {
 
   touchStart(e: TouchEvent) {
     e.preventDefault()
-    // console.log('e.target', (e.target as HTMLElement).dataset.num)
-    // console.log('click', this.clickNumber)
     // 点击数字，圆点变色并输出
     if ((e.target as Element).tagName === 'BUTTON') {
       this.clickNumber = Number((e.target as HTMLElement).dataset.num)
@@ -81,7 +81,14 @@ export class StarLockNumber extends LitElement {
       }
       //密码错误
       if (this.clicks == 6 && this.guess !== this.passwd) {
-        console.log('密码错误')
+        //输错密码5次后锁定屏幕
+        if (this.tried <= 5) {
+          this.tried++
+          console.log('密码错误 已尝试' + this.tried + '次')
+          this.locked = this.tried >= 5 ? true : false
+        } else {
+          this.tried = 0
+        }
         // 抖动反馈
         for (let i = 0; i < 10; i++) {
           this.buttons[i].style.setProperty('animation', 'errtips .5s')

src/test/panels/digicipher/digicipher.ts

@@ -1,5 +1,5 @@
 import {html, LitElement, css} from 'lit'
-import {customElement, property} from 'lit/decorators.js'
+import {customElement} from 'lit/decorators.js'
 import '../icon/icon'
 
 @customElement('panel-digicipher')
@@ -9,7 +9,7 @@ export class PanelDigicipher extends LitElement {
       position: absolute;
       height: 100%;
       width: 100%;
-      background-color: rgb(124, 194, 235);
+      background-color: rgb(183, 211, 227);
     }
   `
   render() {