TASK: #120449 lockscreen样式调整

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

@@ -48,6 +48,7 @@ export const autoPxStyle: CSSResult = css`
     --auto-76px: calc(76px / 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));
@@ -59,6 +60,7 @@ export const autoPxStyle: CSSResult = css`
     --auto-116px: calc(116px / 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));
@@ -82,6 +84,7 @@ export const autoPxStyle: CSSResult = css`
     --auto-370px: calc(370px / 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-436px: calc(436px / var(--hostDevicePixelRatio));
     --auto-440px: calc(440px / var(--hostDevicePixelRatio));
@@ -92,8 +95,10 @@ 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-781px: calc(781px / var(--hostDevicePixelRatio));
     --auto-815px: calc(815px / var(--hostDevicePixelRatio));
   }
 `

src/components/digicipher/digicipher-style.ts

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

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

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

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

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