TASH: #122795 优化锁屏组件
This commit is contained in:
duanzhijiang
parent
2f958640f1
commit
e860fb2971
|
|
@ -41,6 +41,7 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-45px: calc(44.8px / var(--hostDevicePixelRatio));
|
||||
--auto-46px: calc(46px / var(--hostDevicePixelRatio));
|
||||
--auto-46_67px: calc(46.67px / var(--hostDevicePixelRatio));
|
||||
--auto-47px: calc(47px / var(--hostDevicePixelRatio));
|
||||
--auto-48px: calc(48px / var(--hostDevicePixelRatio));
|
||||
--auto-50px: calc(50px / var(--hostDevicePixelRatio));
|
||||
--auto-52px: calc(52px / var(--hostDevicePixelRatio));
|
||||
|
|
@ -64,8 +65,10 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-82px: calc(80px / var(--hostDevicePixelRatio));
|
||||
--auto-85px: calc(85px / var(--hostDevicePixelRatio));
|
||||
--auto-88px: calc(88px / var(--hostDevicePixelRatio));
|
||||
--auto-90px: calc(90px / var(--hostDevicePixelRatio));
|
||||
--auto-92px: calc(92px / var(--hostDevicePixelRatio));
|
||||
--auto-96px: calc(96px / var(--hostDevicePixelRatio));
|
||||
--auto-100px: calc(100px / var(--hostDevicePixelRatio));
|
||||
--auto-108px: calc(108px / var(--hostDevicePixelRatio));
|
||||
--auto-105px: calc(105px / var(--hostDevicePixelRatio));
|
||||
--auto-112px: calc(112px / var(--hostDevicePixelRatio));
|
||||
|
|
@ -77,6 +80,7 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-140px: calc(140px / var(--hostDevicePixelRatio));
|
||||
--auto-152px: calc(152px / var(--hostDevicePixelRatio));
|
||||
--auto-160px: calc(160px / var(--hostDevicePixelRatio));
|
||||
--auto-164px: calc(164px / var(--hostDevicePixelRatio));
|
||||
--auto-166px: calc(166px / var(--hostDevicePixelRatio));
|
||||
--auto-176px: calc(176px / var(--hostDevicePixelRatio));
|
||||
--auto-183px: calc(183px / var(--hostDevicePixelRatio));
|
||||
|
|
@ -88,7 +92,7 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-206px: calc(206px / var(--hostDevicePixelRatio));
|
||||
--auto-208px: calc(208px / var(--hostDevicePixelRatio));
|
||||
--auto-222px: calc(222px / var(--hostDevicePixelRatio));
|
||||
--auto-250px: calc(250px / var(--hostDevicePixelRatio));
|
||||
--auto-254px: calc(254px / var(--hostDevicePixelRatio));
|
||||
--auto-260px: calc(260px / var(--hostDevicePixelRatio));
|
||||
--auto-275px: calc(275px / var(--hostDevicePixelRatio));
|
||||
--auto-286px: calc(286px / var(--hostDevicePixelRatio));
|
||||
|
|
@ -101,6 +105,7 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-340px: calc(340px / var(--hostDevicePixelRatio));
|
||||
--auto-368px: calc(368px / var(--hostDevicePixelRatio));
|
||||
--auto-370px: calc(370px / var(--hostDevicePixelRatio));
|
||||
--auto-374px: calc(374px / var(--hostDevicePixelRatio));
|
||||
--auto-382px: calc(382px / var(--hostDevicePixelRatio));
|
||||
--auto-388px: calc(388px / var(--hostDevicePixelRatio));
|
||||
--auto-396px: calc(396px / var(--hostDevicePixelRatio));
|
||||
|
|
@ -112,18 +117,25 @@ export const autoPxStyle: CSSResult = css`
|
|||
--auto-448px: calc(448px / var(--hostDevicePixelRatio));
|
||||
--auto-464px: calc(464px / var(--hostDevicePixelRatio));
|
||||
--auto-472px: calc(472px / var(--hostDevicePixelRatio));
|
||||
--auto-482px: calc(482px / var(--hostDevicePixelRatio));
|
||||
--auto-484px: calc(484px / var(--hostDevicePixelRatio));
|
||||
--auto-500px: calc(500px / var(--hostDevicePixelRatio));
|
||||
--auto-506px: calc(506px / var(--hostDevicePixelRatio));
|
||||
--auto-514px: calc(514px / var(--hostDevicePixelRatio));
|
||||
--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-596px: calc(596px / var(--hostDevicePixelRatio));
|
||||
--auto-598px: calc(598px / var(--hostDevicePixelRatio));
|
||||
--auto-606px: calc(606px / var(--hostDevicePixelRatio));
|
||||
--auto-620px: calc(620px / var(--hostDevicePixelRatio));
|
||||
--auto-640px: calc(640px / var(--hostDevicePixelRatio));
|
||||
--auto-699px: calc(699px / var(--hostDevicePixelRatio));
|
||||
--auto-766px: calc(766px / var(--hostDevicePixelRatio));
|
||||
--auto-736px: calc(736px / var(--hostDevicePixelRatio));
|
||||
--auto-781px: calc(781px / var(--hostDevicePixelRatio));
|
||||
--auto-813px: calc(813px / var(--hostDevicePixelRatio));
|
||||
--auto-815px: calc(815px / var(--hostDevicePixelRatio));
|
||||
--auto-1040px: calc(1040px / var(--hostDevicePixelRatio));
|
||||
--auto-1592px: calc(1592px / var(--hostDevicePixelRatio));
|
||||
|
|
|
|||
|
|
@ -12,39 +12,36 @@ export const sharedStyles: CSSResult = css`
|
|||
.cancel,
|
||||
.delete {
|
||||
font-family: 'OPPOSans';
|
||||
margin-top: 0;
|
||||
font-size: var(--auto-40px);
|
||||
color: #292929;
|
||||
}
|
||||
#slideUp {
|
||||
/* position: relative;
|
||||
top: var(--auto-596px); */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
span {
|
||||
position: relative;
|
||||
width: var(--auto-24px);
|
||||
margin-right: var(--auto-40px);
|
||||
margin: 0 var(--auto-20px);
|
||||
height: var(--auto-24px);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
background: #f4f4f4;
|
||||
opacity: 0.3;
|
||||
}
|
||||
#sSix {
|
||||
margin: 0;
|
||||
}
|
||||
#parent {
|
||||
position: relative;
|
||||
height: var(--auto-500px);
|
||||
width: var(--auto-500px);
|
||||
left: 50%;
|
||||
top: 53%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: auto;
|
||||
}
|
||||
.grid {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
grid-template-areas: '1 2 3 ' '4 5 6' '7 8 9';
|
||||
gap: var(--auto-40px);
|
||||
}
|
||||
|
||||
p {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
font-family: 'OPPOSans';
|
||||
font-size: var(--auto-40px);
|
||||
font-style: normal;
|
||||
|
|
@ -52,11 +49,6 @@ export const sharedStyles: CSSResult = css`
|
|||
color: #292929;
|
||||
}
|
||||
|
||||
#zero {
|
||||
position: absolute;
|
||||
left: 36%;
|
||||
top: 109%;
|
||||
}
|
||||
button {
|
||||
position: relative;
|
||||
width: var(--auto-140px);
|
||||
|
|
@ -83,52 +75,55 @@ export const sharedStyles: CSSResult = css`
|
|||
opacity: 0;
|
||||
animation: flash 0.3s;
|
||||
}
|
||||
|
||||
.setting::before {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.block::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#slideUp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
.cancelAndDelete {
|
||||
margin-top: var(--auto-48px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
#textcenter {
|
||||
text-align: center;
|
||||
font-size: var(--auto-40px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.topText {
|
||||
height: var(--auto-53px);
|
||||
line-height: var(--auto-53px);
|
||||
top: 31%;
|
||||
}
|
||||
.spanContainer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 36.7%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: var(--auto-50px) 0 var(--auto-90px) 0;
|
||||
}
|
||||
|
||||
.cancel,
|
||||
.delete {
|
||||
position: absolute;
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #292929;
|
||||
width: var(--auto-72px);
|
||||
position: relative;
|
||||
margin-top: 10%;
|
||||
height: var(--auto-47px);
|
||||
line-height: var(--auto-47px);
|
||||
}
|
||||
.bottomText {
|
||||
font-size: var(--auto-36px);
|
||||
top: 118.5%;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: red;
|
||||
line-height: var(--auto-36px);
|
||||
margin-top: var(--auto-254px);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.cancel {
|
||||
left: 8%;
|
||||
left: 7%;
|
||||
}
|
||||
.delete {
|
||||
left: 78.5%;
|
||||
right: 7%;
|
||||
}
|
||||
.cancel:hover,
|
||||
.delete:hover {
|
||||
|
|
|
|||
|
|
@ -21,9 +21,12 @@ export class StarLockNumber extends StarBaseElement {
|
|||
@query('.delete') _delete!: HTMLParagraphElement
|
||||
@query('.cancel') cancel!: HTMLParagraphElement
|
||||
@query('.topText') topText!: HTMLParagraphElement
|
||||
@query('p') text!: HTMLParagraphElement
|
||||
@query('.screen') screen!: HTMLDivElement
|
||||
|
||||
@property({type: String}) mode = 'default'
|
||||
@query('.bottomText') bottomText!: HTMLParagraphElement
|
||||
@property({type: Boolean}) saveMode = false
|
||||
@property({type: String}) verifyError = ''
|
||||
@property({type: Number}) verifyErrorCounter = 1
|
||||
@property({type: String}) cancelNote = '取消'
|
||||
@property({type: String}) deleteNote = '删除'
|
||||
@property({type: Boolean}) confirm = false
|
||||
|
|
@ -34,7 +37,7 @@ export class StarLockNumber extends StarBaseElement {
|
|||
@property({type: Number}) second = 120
|
||||
@property({type: Number}) _number = 0
|
||||
@property({type: Number}) clickNumber = 0
|
||||
@property({type: String}) changeText = '输入'
|
||||
@property({type: String}) changeText = ''
|
||||
@property({type: String}) color = ''
|
||||
@property({type: String}) opacity = ''
|
||||
@property({type: String}) guess = ''
|
||||
|
|
@ -44,16 +47,22 @@ export class StarLockNumber extends StarBaseElement {
|
|||
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':
|
||||
this.changeText = '星光麒麟密码组件'
|
||||
if (this.saveMode) {
|
||||
this.changeText = '请输入数字锁屏密码'
|
||||
/* this.slideUp.style.setProperty('top', 'var(--auto-370px)') */
|
||||
this.spanContainer.style.setProperty(
|
||||
'margin',
|
||||
'var(--auto-80px) 0 var(--auto-100px) 0'
|
||||
)
|
||||
this.text.style.setProperty('font-size', 'var(--auto-32px)')
|
||||
this.bottomText.style.setProperty('margin-top', 'var(--auto-100px)')
|
||||
} else {
|
||||
this.changeText = '输入密码'
|
||||
}
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.saveMode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.spanContainer.style.visibility = `visible`
|
||||
this.parent.style.visibility = `visible`
|
||||
|
|
@ -82,7 +91,6 @@ export class StarLockNumber extends StarBaseElement {
|
|||
@touchstart=${this.touchStart}
|
||||
@touchend=${this.touchEnd}
|
||||
>
|
||||
<button class="0" id="zero" data-num="0">0</button>
|
||||
<div class="grid">
|
||||
<button data-num="1">1</button>
|
||||
<button data-num="2">2</button>
|
||||
|
|
@ -94,8 +102,12 @@ export class StarLockNumber extends StarBaseElement {
|
|||
<button data-num="8">8</button>
|
||||
<button data-num="9">9</button>
|
||||
</div>
|
||||
<p class="cancel" id="lockCancel">${this.cancelNote}</p>
|
||||
<p class="delete">${this.deleteNote}</p>
|
||||
<div class="cancelAndDelete">
|
||||
<p class="cancel" id="lockCancel">${this.cancelNote}</p>
|
||||
<button class="0" id="zero" data-num="0">0</button>
|
||||
<p class="delete">${this.deleteNote}</p>
|
||||
</div>
|
||||
<p class="bottomText">${this.verifyError}</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
|
@ -107,7 +119,7 @@ export class StarLockNumber extends StarBaseElement {
|
|||
this.second = 120
|
||||
this.tried = 0
|
||||
}
|
||||
console.log(this.second)
|
||||
/* console.log(this.second) */
|
||||
}, 1000)
|
||||
}
|
||||
handleEvent(event: CustomEvent) {
|
||||
|
|
@ -117,13 +129,15 @@ export class StarLockNumber extends StarBaseElement {
|
|||
this.clicks = 0
|
||||
this.spanContainer.style.visibility = `hidden`
|
||||
this.parent.style.visibility = `hidden`
|
||||
this.changeText = '保存成功'
|
||||
this.changeText = '创建密码成功'
|
||||
break
|
||||
case 'digicipher-passcode-verify-success':
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
this.saveMode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
break
|
||||
case 'digicipher-passcode-verify-error':
|
||||
|
|
@ -146,7 +160,9 @@ export class StarLockNumber extends StarBaseElement {
|
|||
}
|
||||
//清空密码且删除抖动反馈
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
this.saveMode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
|
|
@ -155,15 +171,12 @@ export class StarLockNumber extends StarBaseElement {
|
|||
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 = '输入密码'
|
||||
this.saveMode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.spanContainer.style.visibility = `visible`
|
||||
this.parent.style.visibility = `visible`
|
||||
break
|
||||
}
|
||||
}
|
||||
|
|
@ -178,19 +191,27 @@ export class StarLockNumber extends StarBaseElement {
|
|||
this.changeNumberBgColor()
|
||||
if (this.clicks < 5) {
|
||||
//圆点变化
|
||||
this.changeBgColor('#F4F4F4', this.clicks, 1)
|
||||
this.saveMode
|
||||
? this.changeBgColor('#000000', this.clicks, 1)
|
||||
: this.changeBgColor('#F4F4F4', this.clicks, 1)
|
||||
this.clicks += 1
|
||||
this.guess += (e.target as HTMLElement).dataset.num
|
||||
// console.log('###this.guess', this.guess)
|
||||
} else if (this.clicks == 5) {
|
||||
this.guess += (e.target as HTMLElement).dataset.num
|
||||
// console.log('guess', this.guess)
|
||||
this.changeBgColor('#F4F4F4', this.clicks, 1)
|
||||
if (this.mode == 'create') {
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.saveMode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
if (this.saveMode) {
|
||||
if (!this.confirm) {
|
||||
this.changePasswd()
|
||||
} else {
|
||||
this.confirmPasswd()
|
||||
}
|
||||
} else if (this.mode == 'verify') {
|
||||
} else {
|
||||
this.dispatchPasswd()
|
||||
}
|
||||
}
|
||||
|
|
@ -198,14 +219,18 @@ export class StarLockNumber extends StarBaseElement {
|
|||
if (this.clicks == 0) {
|
||||
} else {
|
||||
this.clicks -= 1
|
||||
this.changeBgColor('#F4F4F4', this.clicks, 0.4)
|
||||
this.guess = this.guess.slice(0, -1)
|
||||
this.saveMode
|
||||
? this.changeBgColor('#000000', this.clicks, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', this.clicks, 0.4)
|
||||
}
|
||||
} else if ((e.target as Element).className === 'cancel') {
|
||||
//点击取消，返回锁屏
|
||||
this.makeZero()
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
this.saveMode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
|
|
@ -231,10 +256,18 @@ export class StarLockNumber extends StarBaseElement {
|
|||
this.span[_number].style.opacity = String(opacity)
|
||||
}
|
||||
removeNumberBgColor() {
|
||||
this.buttons[this.clickNumber].classList.remove('block')
|
||||
if (this.clickNumber == 0) this.clickNumber = 10
|
||||
this.buttons[this.clickNumber - 1].classList.remove('block')
|
||||
if (this.saveMode) {
|
||||
this.buttons[this.clickNumber - 1].classList.remove('setting')
|
||||
}
|
||||
}
|
||||
changeNumberBgColor() {
|
||||
this.buttons[this.clickNumber].classList.add('block')
|
||||
if (this.clickNumber == 0) this.clickNumber = 10
|
||||
this.buttons[this.clickNumber - 1].classList.add('block')
|
||||
if (this.saveMode) {
|
||||
this.buttons[this.clickNumber - 1].classList.add('setting')
|
||||
}
|
||||
}
|
||||
makeZero() {
|
||||
//抖动、滑动属性清零
|
||||
|
|
@ -247,9 +280,14 @@ export class StarLockNumber extends StarBaseElement {
|
|||
//发送密码
|
||||
dispatchPasswd() {
|
||||
this.passwd = this.guess
|
||||
// console.log('passwd', this.passwd)
|
||||
// console.log('send passwd', this.passwd)
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.saveMode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('star-digicipher-passwd', {
|
||||
detail: {
|
||||
|
|
@ -266,26 +304,28 @@ export class StarLockNumber extends StarBaseElement {
|
|||
// console.log('更改密码', this.savewd)
|
||||
this.clicks = 0
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
this.saveMode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.guess = ''
|
||||
|
||||
this.confirm = true
|
||||
this.changeText = '确认密码'
|
||||
this.changeText = '验证新密码'
|
||||
this.verifyError = ''
|
||||
}
|
||||
//确认密码
|
||||
confirmPasswd() {
|
||||
if (this.savewd.toString() == this.guess.toString()) {
|
||||
// if (1) {
|
||||
this.passwd = this.savewd
|
||||
this.savewd = ''
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
this.saveMode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
this.changeText = '新建密码'
|
||||
// console.log('确认密码', this.passwd)
|
||||
this.changeText = '创建密码成功'
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('star-digicipher-passcode-create', {
|
||||
detail: {
|
||||
|
|
@ -297,13 +337,16 @@ export class StarLockNumber extends StarBaseElement {
|
|||
)
|
||||
} else {
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
this.saveMode
|
||||
? this.changeBgColor('#000000', i, 0.1)
|
||||
: this.changeBgColor('#F4F4F4', i, 0.4)
|
||||
}
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
this.savewd = ''
|
||||
this.confirm = false
|
||||
this.changeText = '更改密码'
|
||||
this.changeText = '请输入锁屏密码'
|
||||
this.verifyError = '密码不匹配，请重新设置'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
export const sharedStyles: CSSResult = css`
|
||||
/* :host {
|
||||
--top-dir: 40%;
|
||||
} */
|
||||
canvas {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
|
@ -11,10 +8,12 @@ export const sharedStyles: CSSResult = css`
|
|||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
p {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
line-height: var(--auto-53px);
|
||||
font-size: var(--auto-40px);
|
||||
height: var(--auto-53px);
|
||||
|
|
@ -22,25 +21,16 @@ export const sharedStyles: CSSResult = css`
|
|||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #292929;
|
||||
font-family: 'OPPOSans';
|
||||
color: #292929;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
#canvasdown {
|
||||
position: relative;
|
||||
top: var(--auto-781px);
|
||||
}
|
||||
.textTop {
|
||||
top: 31%;
|
||||
margin-bottom: var(--auto-164px);
|
||||
}
|
||||
.cancel {
|
||||
bottom: 23.5%;
|
||||
margin-top: var(--auto-164px);
|
||||
}
|
||||
.errorinfo {
|
||||
top: 66%;
|
||||
color: #ec4949;
|
||||
font-size: var(--auto-32px);
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -16,9 +16,12 @@ export class StarPatternView extends StarBaseElement {
|
|||
return [sharedStyles]
|
||||
}
|
||||
@query('canvas') canvas!: HTMLCanvasElement
|
||||
@query('.textTop') saveP!: HTMLParagraphElement
|
||||
@query('.textTop') textTop!: HTMLParagraphElement
|
||||
@query('#canvasdown') canvasdown!: HTMLDivElement
|
||||
@property({attribute: false}) cxt!: CanvasRenderingContext2D
|
||||
@query('p') text!: HTMLParagraphElement
|
||||
@query('.errorinfo') errorinfo!: any
|
||||
@property({attribute: false})
|
||||
cxt!: CanvasRenderingContext2D
|
||||
@property({type: Boolean})
|
||||
get getRed() {
|
||||
return this._getRed
|
||||
|
|
@ -49,16 +52,6 @@ export class StarPatternView extends StarBaseElement {
|
|||
@property({type: String}) changeText = ''
|
||||
@property({type: String}) cancel = '取消'
|
||||
@property({type: String}) lessfourinfo = ''
|
||||
/* @property({type: String})
|
||||
get topDir() {
|
||||
return this._topDir
|
||||
}
|
||||
set topDir(value: string) {
|
||||
this.style.setProperty('--top-dir', value)
|
||||
this._topDir = value
|
||||
this.top = parseInt(this._topDir)
|
||||
} */
|
||||
|
||||
render() {
|
||||
if (!this.saveMode) {
|
||||
return html`
|
||||
|
|
@ -100,8 +93,9 @@ export class StarPatternView extends StarBaseElement {
|
|||
): void {
|
||||
//settings中，图形密码上下的文字以及图形密码的位置都有所变化
|
||||
if (this.saveMode) {
|
||||
this.canvasdown.style.setProperty('top', 'var(--auto-543px)')
|
||||
this.saveP.style.setProperty('top', 'var(--auto-411px)')
|
||||
this.textTop.style.setProperty('margin-bottom', 'var(--auto-100px)')
|
||||
this.text.style.setProperty('font-size', 'var(--auto-32px)')
|
||||
this.errorinfo.style.setProperty('margin-top', 'var(--auto-100px)')
|
||||
}
|
||||
//canvas的高度和宽度都是
|
||||
this.canvas.width = this.canvasWidth
|
||||
|
|
@ -121,10 +115,11 @@ export class StarPatternView extends StarBaseElement {
|
|||
handleEvent(event: CustomEvent) {
|
||||
switch (event.type) {
|
||||
case 'passcode-create-success':
|
||||
this.canvas.style.visibility = `hidden`
|
||||
this.changeText = '密码设置成功'
|
||||
break
|
||||
case 'pattern-passcode-verify-success':
|
||||
console.log('图案正确')
|
||||
// console.log('图案正确')
|
||||
this.getRed = false
|
||||
this.changeText = '绘制图案'
|
||||
break
|
||||
|
|
@ -190,7 +185,7 @@ export class StarPatternView extends StarBaseElement {
|
|||
}
|
||||
touchEnd(_e: TouchEvent) {
|
||||
if (this.saveMode && this.passwd.length < 4) {
|
||||
// this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
|
||||
this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
|
||||
this.getRed = true
|
||||
this.lessfourinfo = '至少连接四个点'
|
||||
} else {
|
||||
|
|
@ -252,12 +247,14 @@ export class StarPatternView extends StarBaseElement {
|
|||
//大圆
|
||||
this.cxt.beginPath()
|
||||
this.cxt.arc(Point.X, Point.Y, this.R, 0, Math.PI * 2, true)
|
||||
this.cxt.fillStyle = 'rgb(244,244,244,0.2)'
|
||||
this.cxt.fillStyle = this.saveMode
|
||||
? 'rgba(0,0,0,0.04)'
|
||||
: 'rgba(244,244,244,0.2)'
|
||||
this.cxt.fill()
|
||||
this.cxt.closePath()
|
||||
//小圆
|
||||
this.cxt.beginPath()
|
||||
this.cxt.fillStyle = 'rgb(51,51,51,0.2)'
|
||||
this.cxt.fillStyle = 'rgba(51,51,51,0.2)'
|
||||
this.cxt.arc(Point.X, Point.Y, (36 / 140) * this.R, 0, Math.PI * 2, true)
|
||||
this.cxt.fill()
|
||||
this.cxt.closePath()
|
||||
|
|
@ -321,7 +318,7 @@ export class StarPatternView extends StarBaseElement {
|
|||
}
|
||||
changePasswd() {
|
||||
this.savewd = this.passwd
|
||||
console.log('请确认密码', this.savewd.toString())
|
||||
// console.log('请确认密码', this.savewd.toString())
|
||||
this.confirm = true
|
||||
this.changeText = '请确认图案'
|
||||
|
||||
|
|
|
|||
|
|
@ -18,12 +18,15 @@ export class PanelDigicipher extends LitElement {
|
|||
height: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
#digicipher {
|
||||
position: relative;
|
||||
top: var(--auto-596px);
|
||||
}
|
||||
`
|
||||
render() {
|
||||
return html`
|
||||
<div class="screen">
|
||||
<div id="line"></div>
|
||||
<star-digicipher></star-digicipher>
|
||||
<star-digicipher id="digicipher"></star-digicipher>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,13 +11,17 @@ export class PanelPatternView extends LitElement {
|
|||
width: 100%;
|
||||
background-color: rgb(191, 198, 219);
|
||||
}
|
||||
#pattern {
|
||||
position: relative;
|
||||
top: var(--auto-598px);
|
||||
}
|
||||
`
|
||||
render() {
|
||||
return html`
|
||||
<div
|
||||
style="height: 100vh; width: 100vw;background-color: rgb(191, 198, 219);"
|
||||
>
|
||||
<star-pattern-view saveMode></star-pattern-view>
|
||||
<star-pattern-view id="pattern"></star-pattern-view>
|
||||
</div>
|
||||
<!-- <star-pattern-view topDir="100px"></star-pattern-view> -->
|
||||
`
|
||||
|
|
|
|||
Loading…
Reference in New Issue