openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #154 in YR/star-web-components from star-lockscreen-adjust-position to master 

* commit '82aae349e75eb6820f4a03907f459b684fcaf7f1':
  TASK: #120449 修改需求-图形和数字分别输入错误5次，锁定，并在120秒内记录错误次数。
  TASK: #120449 区分图形和密码验证密码事件name
  TASK: #120449 lockscreen样式调整
This commit is contained in:
汪昌棋 2022-11-19 14:19:37 +08:00
parent 12433f3737 82aae349e7
commit 2b73e38360
5 changed files with 38 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/base/auto-px-style.ts
View File

@ -52,6 +52,10 @@ export const autoPxStyle: CSSResult = css`
--auto-77px: calc(77px / var(--hostDevicePixelRatio));
--auto-80px: calc(80px / var(--hostDevicePixelRatio));
--auto-82px: calc(80px / var(--hostDevicePixelRatio));
--auto-70px: calc(70px / var(--hostDevicePixelRatio));
--auto-72px: calc(72px / var(--hostDevicePixelRatio));
--auto-76px: calc(76px / var(--hostDevicePixelRatio));
--auto-80px: calc(80px / var(--hostDevicePixelRatio));
--auto-85px: calc(85px / var(--hostDevicePixelRatio));
--auto-88px: calc(88px / var(--hostDevicePixelRatio));
--auto-92px: calc(92px / var(--hostDevicePixelRatio));
@ -62,6 +66,7 @@ export const autoPxStyle: CSSResult = css`
--auto-124px: calc(124px / var(--hostDevicePixelRatio));
--auto-128px: calc(128px / var(--hostDevicePixelRatio));
--auto-129px: calc(129px / var(--hostDevicePixelRatio));
--auto-140px: calc(140px / var(--hostDevicePixelRatio));
--auto-152px: calc(152px / var(--hostDevicePixelRatio));
--auto-160px: calc(160px / var(--hostDevicePixelRatio));
--auto-166px: calc(166px / var(--hostDevicePixelRatio));
@ -88,6 +93,7 @@ export const autoPxStyle: CSSResult = css`
--auto-382px: calc(382px / var(--hostDevicePixelRatio));
--auto-388px: calc(388px / var(--hostDevicePixelRatio));
--auto-396px: calc(396px / var(--hostDevicePixelRatio));
--auto-411px: calc(411px / var(--hostDevicePixelRatio));
--auto-418px: calc(418px / var(--hostDevicePixelRatio));
--auto-424px: calc(424px / var(--hostDevicePixelRatio));
--auto-436px: calc(436px / var(--hostDevicePixelRatio));
@ -101,10 +107,12 @@ export const autoPxStyle: CSSResult = css`
--auto-520px: calc(520px / var(--hostDevicePixelRatio));
--auto-524px: calc(520px / var(--hostDevicePixelRatio));
--auto-534px: calc(534px / var(--hostDevicePixelRatio));
--auto-543px: calc(543px / var(--hostDevicePixelRatio));
--auto-607px: calc(607px / var(--hostDevicePixelRatio));
--auto-620px: calc(620px / var(--hostDevicePixelRatio));
--auto-640px: calc(640px / var(--hostDevicePixelRatio));
--auto-736px: calc(736px / var(--hostDevicePixelRatio));
--auto-781px: calc(781px / var(--hostDevicePixelRatio));
--auto-815px: calc(815px / var(--hostDevicePixelRatio));
--auto-1040px: calc(1040px / var(--hostDevicePixelRatio));
--auto-1592px: calc(1592px / var(--hostDevicePixelRatio));

13
src/components/digicipher/digicipher-style.ts
View File

@ -46,6 +46,7 @@ export const sharedStyles: CSSResult = css`
p {
position: absolute;
font-family: 'OPPOSans';
font-size: var(--auto-40px);
font-style: normal;
font-weight: 400;
color: #292929;
@ -58,9 +59,9 @@ export const sharedStyles: CSSResult = css`
}
button {
position: relative;
width: 70px;
height: 70px;
font-size: var(--auto-36px);
width: var(--auto-140px);
height: var(--auto-140px);
font-size: var(--auto-70px);
border-radius: 50%;
border: none;
/*button背景无色*/
@ -94,13 +95,13 @@ export const sharedStyles: CSSResult = css`
}
#textcenter {
text-align: center;
font-size: var(--auto-40px);
display: flex;
justify-content: center;
}
.topText {
font-size: 20px;
height: var(--auto-53px);
line-height: var(--auto-53px);
width: var(--auto-160px);
left: calc(50% - var(--auto-160px) / 2);
top: 31%;
}
.spanContainer {

17
src/components/digicipher/digicipher.ts
View File

@ -58,8 +58,8 @@ export class StarLockNumber extends StarBaseElement {
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('digicipher-passcode-verify-success', this)
this.addEventListener('digicipher-passcode-verify-error', this)
this.addEventListener('passcode-reset', this)
}
@ -119,20 +119,19 @@ export class StarLockNumber extends StarBaseElement {
this.parent.style.visibility = `hidden`
this.changeText = '保存成功'
break
case 'passcode-verify-success':
case 'digicipher-passcode-verify-success':
this.guess = ''
this.clicks = 0
for (let i = 0; i < 6; i++) {
this.changeBgColor('#F4F4F4', i, 0.4)
}
break
case 'passcode-verify-error':
case 'digicipher-passcode-verify-error':
this.errors = event.detail.value
//当密码失败三次后
if (this.errors == 3) {
console.log('进入已锁定页面')
//当密码失败5次后
if (this.errors == 5) {
this.dispatchEvent(
new CustomEvent('star-digicipher-passcode-error-third', {
new CustomEvent('star-digicipher-passcode-error-fifth', {
detail: {
value: true,
},
@ -252,7 +251,7 @@ export class StarLockNumber extends StarBaseElement {
this.guess = ''
this.clicks = 0
this.dispatchEvent(
new CustomEvent('star-digicipher-passcode-verify', {
new CustomEvent('star-digicipher-passwd', {
detail: {
value: this.passwd,
},

7
src/components/pattern-view/pattern-view-style.ts
View File

@ -1,8 +1,8 @@
import {css, CSSResult} from 'lit'
export const sharedStyles: CSSResult = css`
:host {
/* :host {
--top-dir: 40%;
}
} */
canvas {
display: block;
margin: 0 auto;
@ -15,7 +15,6 @@ export const sharedStyles: CSSResult = css`
}
p {
position: absolute;
width: var(--auto-160px);
line-height: var(--auto-53px);
font-size: var(--auto-40px);
height: var(--auto-53px);
@ -32,7 +31,7 @@ export const sharedStyles: CSSResult = css`
}
#canvasdown {
position: relative;
top: var(--top-dir);
top: var(--auto-781px);
}
.textTop {
top: 31%;

24
src/components/pattern-view/pattern-view.ts
View File

@ -9,7 +9,7 @@ import {sharedStyles} from './pattern-view-style.js'
@customElement('star-pattern-view')
export class StarPatternView extends StarBaseElement {
_topDir: string = ''
/* _topDir: string = '' */
_getRed: boolean = false
public static override get styles(): CSSResultArray {
@ -17,6 +17,7 @@ export class StarPatternView extends StarBaseElement {
}
@query('canvas') canvas!: HTMLCanvasElement
@query('.textTop') saveP!: HTMLParagraphElement
@query('#canvasdown') canvasdown!: HTMLDivElement
@property({attribute: false}) cxt!: CanvasRenderingContext2D
@property({type: Boolean})
get getRed() {
@ -48,7 +49,7 @@ export class StarPatternView extends StarBaseElement {
@property({type: String}) changeText = ''
@property({type: String}) cancel = '取消'
@property({type: String}) lessfourinfo = ''
@property({type: String})
/* @property({type: String})
get topDir() {
return this._topDir
}
@ -56,7 +57,7 @@ export class StarPatternView extends StarBaseElement {
this.style.setProperty('--top-dir', value)
this._topDir = value
this.top = parseInt(this._topDir)
}
} */
render() {
if (!this.saveMode) {
@ -99,8 +100,8 @@ export class StarPatternView extends StarBaseElement {
): void {
//settings中，图形密码上下的文字以及图形密码的位置都有所变化
if (this.saveMode) {
this.topDir = '34%'
this.saveP.style.setProperty('top', '27.8%')
this.canvasdown.style.setProperty('top', 'var(--auto-543px)')
this.saveP.style.setProperty('top', 'var(--auto-411px)')
}
//canvas的高度和宽度都是
this.canvas.width = this.canvasWidth
@ -113,8 +114,8 @@ export class StarPatternView extends StarBaseElement {
this.Draw()
this.changeText = this.saveMode ? '请绘制图案' : '绘制图案'
this.addEventListener('passcode-create-success', this)
this.addEventListener('passcode-verify-success', this)
this.addEventListener('passcode-verify-error', this)
this.addEventListener('pattern-passcode-verify-success', this)
this.addEventListener('pattern-passcode-verify-error', this)
}
handleEvent(event: CustomEvent) {
@ -122,22 +123,21 @@ export class StarPatternView extends StarBaseElement {
case 'passcode-create-success':
this.changeText = '密码设置成功'
break
case 'passcode-verify-success':
case 'pattern-passcode-verify-success':
console.log('图案正确')
this.getRed = false
this.changeText = '绘制图案'
break
case 'passcode-verify-error':
case 'pattern-passcode-verify-error':
this.passwd = event.detail.passwd
this.getRed = true
this.changeText = '绘制图案错误'
//当密码失败三次后
this.errors = event.detail.value
if (this.errors == 3) {
console.log('进入已锁定页面')
if (this.errors == 5) {
this.initialState()
this.dispatchEvent(
new CustomEvent('star-pattern-view-passwd-error-third', {
new CustomEvent('star-pattern-view-passwd-error-fifth', {
detail: {
value: true,
},