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`