diff --git a/src/components/digicipher/digicipher-style.ts b/src/components/digicipher/digicipher-style.ts index 20139e4..49c6561 100644 --- a/src/components/digicipher/digicipher-style.ts +++ b/src/components/digicipher/digicipher-style.ts @@ -49,6 +49,7 @@ export const sharedStyles: CSSResult = css` top: 68%; } button { + position: relative; width: 70px; height: 70px; border-radius: 50%; @@ -99,16 +100,16 @@ export const sharedStyles: CSSResult = css` top: 23%; } .grid { - position: relative; + position: absolute; display: grid; grid-template-areas: '1 2 3 ' '4 5 6' '7 8 9' '. 0 .'; gap: 20px; - margin: 0 118px; + margin: 0 124px; } .cancel, .delete { - position: relative; + position: absolute; font-family: 'OPPOSans'; font-style: normal; font-weight: 400; @@ -117,14 +118,13 @@ export const sharedStyles: CSSResult = css` height: 23.5px; line-height: 23.5px; font-size: 18px; + top: 73%; } .cancel { left: 27%; - top: 5%; } .delete { left: 65.5%; - top: -3.5%; } .cancel:hover, .delete:hover { @@ -173,10 +173,10 @@ export const sharedStyles: CSSResult = css` /*密码输入正确后动效*/ @keyframes suctip { 0% { - transform: translateY(0); + transform: translate(-50%, -50%); } 100% { - transform: translateY(-1000px); + transform: translate(-50%, -300%); } } ` diff --git a/src/components/digicipher/digicipher.ts b/src/components/digicipher/digicipher.ts index c8210d6..312dfa9 100644 --- a/src/components/digicipher/digicipher.ts +++ b/src/components/digicipher/digicipher.ts @@ -20,7 +20,10 @@ export class StarLockNumber extends LitElement { @property({type: Boolean}) locked = false @property({type: Number}) tried = 0 + @property({type: Number}) time = 0 + @property({type: Number}) errors = 0 @property({type: Number}) clicks = 0 + @property({type: Number}) second = 120 @property({type: Number}) _number = 0 @property({type: Number}) clickNumber = 0 @property({type: String}) color = '' @@ -28,6 +31,10 @@ export class StarLockNumber extends LitElement { @property({type: String}) guess = '' @property({type: String}) passwd = '123456' + constructor() { + super() + } + render() { return html`
@@ -63,6 +70,16 @@ export class StarLockNumber extends LitElement {
` } + timer() { + this.time = setInterval(() => { + if (--this.second <= 0) { + clearInterval(this.time) + this.second = 120 + this.tried = 0 + } + console.log(this.second) + }, 1000) + } touchStart(e: TouchEvent) { e.preventDefault() @@ -81,12 +98,20 @@ export class StarLockNumber extends LitElement { } //密码错误 if (this.clicks == 6 && this.guess !== this.passwd) { + //第一次密码错误开始计时120秒 + if (this.tried == 0) { + this.second = 120 + this.timer() + } //输错密码5次后锁定屏幕 - if (this.tried <= 5) { - this.tried++ - console.log('密码错误 已尝试' + this.tried + '次') - this.locked = this.tried >= 5 ? true : false + if (this.tried++ < 4) { + this.locked = false + console.log('密码错误 已尝试' + this.tried + '次', this.locked) } else { + console.log('密码错误 已尝试' + this.tried + '次') + this.locked = true + clearInterval(this.time) + console.log('locked = ' + this.locked + ' 进入已锁定') this.tried = 0 } // 抖动反馈 @@ -119,7 +144,10 @@ export class StarLockNumber extends LitElement { this.guess = '' this.clicks = 0 } + //密码正确 if (this.guess === this.passwd) { + clearInterval(this.time) + this.tried = 0 for (let j = 0; j < 10; j++) { this.buttons[j].removeAttribute('style') }