TASH: #122795 优化锁屏组件

src/components/base/auto-px-style.ts

@@ -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));

src/components/digicipher/digicipher-style.ts

@@ -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;
+    margin: auto;
-    height: var(--auto-500px);
-    width: var(--auto-500px);
-    left: 50%;
-    top: 53%;
-    transform: translate(-50%, -50%);
   }
   .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;
   }
-
+  .cancelAndDelete {
-  #slideUp {
+    margin-top: var(--auto-48px);
-    position: relative;
+    display: flex;
-    height: 100%;
+    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;
+    width: 100%;
-    left: 50%;
+    display: flex;
-    transform: translateX(-50%);
+    justify-content: center;
-    top: 36.7%;
+    margin: var(--auto-50px) 0 var(--auto-90px) 0;
   }
 
   .cancel,
   .delete {
-    position: absolute;
+    position: relative;
-    font-family: 'OPPOSans';
+    margin-top: 10%;
-    font-style: normal;
-    font-weight: 400;
-    color: #292929;
-    width: var(--auto-72px);
     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 {

src/components/digicipher/digicipher.ts

@@ -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
-
+  @query('.bottomText') bottomText!: HTMLParagraphElement
-  @property({type: String}) mode = 'default'
+  @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) {
+    if (this.saveMode) {
-      case 'create':
+      this.changeText = '请输入数字锁屏密码'
-        this.changeText = '新建密码'
+      /* this.slideUp.style.setProperty('top', 'var(--auto-370px)') */
-        break
+      this.spanContainer.style.setProperty(
-      case 'verify':
+        'margin',
-      case 'comfirm':
+        '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 = '输入密码'
-        break
+    }
-      case 'default':
+    for (let i = 0; i < 6; i++) {
-        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`
@@ -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,9 +102,13 @@ export class StarLockNumber extends StarBaseElement {
             <button data-num="8">8</button>
             <button data-num="9">9</button>
           </div>
+          <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)
+          this.saveMode
+            ? this.changeBgColor('#000000', i, 0.1)
+            : 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 = '输入密码'
-        }
         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)
+        for (let i = 0; i < 6; i++) {
-        if (this.mode == 'create') {
+          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 = '新建密码'
+      this.changeText = '创建密码成功'
-      // console.log('确认密码', this.passwd)
       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 = '密码不匹配，请重新设置'
     }
   }
 }

src/components/pattern-view/pattern-view-style.ts

@@ -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);
   }
 `

src/components/pattern-view/pattern-view.ts

@@ -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.textTop.style.setProperty('margin-bottom', 'var(--auto-100px)')
-      this.saveP.style.setProperty('top', 'var(--auto-411px)')
+      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 = '请确认图案'
 

src/test/panels/digicipher/digicipher.ts

@@ -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 id="digicipher"></star-digicipher>
-        <star-digicipher></star-digicipher>
       </div>
     `
   }

src/test/panels/pattern-view/pattern-view.ts

@@ -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> -->
     `