修复锁屏时间样式、图形与数字密码样式

src/components/clock-widget/clock-widget.ts

@@ -7,10 +7,10 @@ import './time/time.js'
 class ClockContainer extends LitElement {
   @property({type: String}) name = 'clock-widget'
   @property({type: String}) type = 3
-  @property({type: String}) minute = 0
-  @property({type: String}) minute2 = 0
-  @property({type: String}) hour = 0
-  @property({type: String}) hour2 = 0
+  @property({type: String}) hourFirst = 0
+  @property({type: String}) hourSecond = 0
+  @property({type: String}) minuteFirst = 0
+  @property({type: String}) minuteSecond = 0
   @property({type: String}) date = 0
 
   public static override get styles(): CSSResultArray {
@@ -20,10 +20,10 @@ class ClockContainer extends LitElement {
   render() {
     return html`
       <clock-time
-        minute=${this.minute}
-        minute2=${this.minute2}
-        hour=${this.hour}
-        hour2=${this.hour2}
+        hourFirst=${this.hourFirst}
+        hourSecond=${this.hourSecond}
+        minuteFirst=${this.minuteFirst}
+        minuteSecond=${this.minuteSecond}
         type=${this.type}
       ></clock-time>
       <clock-date date=${this.date}></clock-date>

src/components/clock-widget/time/time-style.ts

@@ -17,12 +17,12 @@ export default css`
   #clock-hour {
     display: flex;
   }
-  #clock-minute div[type='3'] {
+  #clock-hour div[type='3'] {
     opacity: 0.67;
     padding-inline-end: var(--auto-10px);
   }
 
-  #clock-hour div[type='3'] {
+  #clock-minute div[type='3'] {
     padding-inline-start: var(--auto-10px);
     /* 主题色/黄金渐变 */
     background: linear-gradient(180deg, #ebc965 0%, #d9aa38 100%);

src/components/clock-widget/time/time.ts

@@ -6,33 +6,33 @@ import timeStyles from './time-style.js'
 class LockScreenClockTimeContainer extends LitElement {
   @property({type: String}) type = 3
   @property({type: String}) name = 'clock-time'
-  @property({type: String}) minute = 0
-  @property({type: String}) minute2 = 0
-  @property({type: String}) hour = 0
-  @property({type: String}) hour2 = 0
+  @property({type: String}) hourFirst = 0
+  @property({type: String}) hourSecond = 0
+  @property({type: String}) minuteFirst = 0
+  @property({type: String}) minuteSecond = 0
   @property({type: String}) line = ':'
   public static override get styles(): CSSResultArray {
     return [timeStyles]
   }
   render() {
     return html`
-      <div id="clock-minute">
-        <div class="clock-time" id="clock-time-minute" type=${this.type}>
-          ${this.minute}
+      <div id="clock-hour">
+        <div class="clock-time" id="clock-time-hourFirst" type=${this.type}>
+          ${this.hourFirst}
         </div>
-        <div class="clock-time" id="clock-time-minute2" type=${this.type}>
-          ${this.minute2}
+        <div class="clock-time" id="clock-time-hourSecond" type=${this.type}>
+          ${this.hourSecond}
         </div>
       </div>
       <div id="clock-line" type=${this.type}>
         ${this.type == 4 ? this.line : ''}
       </div>
-      <div id="clock-hour">
-        <div class="clock-time" id="clock-time-hour" type=${this.type}>
-          ${this.hour}
+      <div id="clock-minute">
+        <div class="clock-time" id="clock-time-minuteFirst" type=${this.type}>
+          ${this.minuteFirst}
         </div>
-        <div class="clock-time" id="clock-time-hour2" type=${this.type}>
-          ${this.hour2}
+        <div class="clock-time" id="clock-time-minuteSecond" type=${this.type}>
+          ${this.minuteSecond}
         </div>
       </div>
     `

src/components/digicipher/digicipher-style.ts

@@ -17,12 +17,9 @@ export const sharedStyles: CSSResult = css`
   }
   span {
     position: relative;
-    /* width: var(--auto-24px);
+    width: var(--auto-24px);
     margin-right: var(--auto-40px);
-    height: var(--auto-24px); */
-    width: calc(100vw * 24 / 1200);
-    height: calc(100vw * 24 / 1200);
-    margin-right: calc(100vw * 40 / 1200);
+    height: var(--auto-24px);
     border-radius: 50%;
     display: inline-block;
     background: #f4f4f4;
@@ -33,10 +30,8 @@ export const sharedStyles: CSSResult = css`
   }
   #parent {
     position: relative;
-    /* height: var(--auto-500px);
-    width: var(--auto-500px); */
-    height: calc(100vw * 500 / 1200);
-    width: calc(100vw * 500 / 1200);
+    height: var(--auto-500px);
+    width: var(--auto-500px);
     left: 50%;
     top: 53%;
     transform: translate(-50%, -50%);
@@ -45,8 +40,7 @@ export const sharedStyles: CSSResult = css`
     position: absolute;
     display: grid;
     grid-template-areas: '1 2 3 ' '4 5 6' '7 8 9';
-    /* gap: var(--auto-40px); */
-    gap: calc(100vw * 40 / 1200);
+    gap: var(--auto-40px);
   }
 
   p {
@@ -60,17 +54,13 @@ export const sharedStyles: CSSResult = css`
   #zero {
     position: absolute;
     left: 36%;
-    /* top: 270px; */
     top: 109%;
   }
   button {
     position: relative;
-    /* width: 70px;
+    width: 70px;
     height: 70px;
-    font-size: var(--auto-36px); */
-    width: calc(100vw * 140 / 1200);
-    height: calc(100vw * 140 / 1200);
-    font-size: calc(100vw * 70 / 1200);
+    font-size: var(--auto-36px);
     border-radius: 50%;
     border: none;
     /*button背景无色*/
@@ -85,10 +75,8 @@ export const sharedStyles: CSSResult = css`
     position: absolute;
     top: 0px;
     left: 0px;
-    /* width: var(--auto-140px);
-    height: var(--auto-140px); */
-    width: calc(100vw * 140 / 1200);
-    height: calc(100vw * 140 / 1200);
+    width: var(--auto-140px);
+    height: var(--auto-140px);
     border-radius: 50%;
     background-color: #ffffff;
     opacity: 0;
@@ -108,18 +96,12 @@ export const sharedStyles: CSSResult = css`
     text-align: center;
   }
   .topText {
-    /* font-size: 20px;
+    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%;
-    font-size: calc(100vw * 40 / 1200);
-    height: calc(100vw * 53 / 1200);
-    line-height: calc(100vw * 53 / 1200);
-    width: calc(100vw * 160 / 1200);
-    left: calc(50% - calc(100vw * 160 / 1200) / 2);
   }
   .spanContainer {
     position: absolute;
@@ -135,14 +117,10 @@ export const sharedStyles: CSSResult = css`
     font-style: normal;
     font-weight: 400;
     color: #292929;
-    /* width: var(--auto-72px);
+    width: var(--auto-72px);
     height: var(--auto-47px);
     line-height: var(--auto-47px);
-    font-size: var(--auto-36px); */
-    width: calc(100vw * 72 / 1200);
-    height: calc(100vw * 47 / 1200);
-    line-height: calc(100vw * 47 / 1200);
-    font-size: calc(100vw * 36 / 1200);
+    font-size: var(--auto-36px);
     top: 118.5%;
   }
   .cancel {

src/components/digicipher/digicipher.ts

@@ -1,9 +1,14 @@
-import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
+import {
+  html,
+  StarBaseElement,
+  CSSResultArray,
+  PropertyValueMap,
+} from '../base/star-base-element.js'
 import {customElement, property, query, queryAll} from 'lit/decorators.js'
 import {sharedStyles} from './digicipher-style.js'
 
 @customElement('star-digicipher')
-export class StarLockNumber extends LitElement {
+export class StarLockNumber extends StarBaseElement {
   public static override get styles(): CSSResultArray {
     return [sharedStyles]
   }
@@ -122,7 +127,7 @@ export class StarLockNumber extends LitElement {
         }
         break
       case 'passcode-verify-error':
-        this.errors = event.detail.value;
+        this.errors = event.detail.value
         //当密码失败三次后
         if (this.errors == 3) {
           console.log('进入已锁定页面')

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

@@ -15,14 +15,10 @@ export const sharedStyles: CSSResult = css`
   }
   p {
     position: absolute;
-    /* width: var(--auto-160px);
+    width: var(--auto-160px);
     line-height: var(--auto-53px);
     font-size: var(--auto-40px);
-    height: var(--auto-53px); */
-    width: calc(100vw * 300 / 1200);
-    height: calc(100vw * 53 / 1200);
-    line-height: calc(100vw * 53 / 1200);
-    font-size: calc(100vw * 40 / 1200);
+    height: var(--auto-53px);
     font-family: 'OPPOSans';
     font-style: normal;
     font-weight: 400;

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

@@ -1,9 +1,14 @@
-import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
+import {
+  html,
+  StarBaseElement,
+  CSSResultArray,
+  PropertyValueMap,
+} from '../base/star-base-element.js'
 import {customElement, property, query} from 'lit/decorators.js'
 import {sharedStyles} from './pattern-view-style.js'
 
 @customElement('star-pattern-view')
-export class StarPatternView extends LitElement {
+export class StarPatternView extends StarBaseElement {
   _topDir: string = ''
   _getRed: boolean = false
 
@@ -212,7 +217,6 @@ export class StarPatternView extends LitElement {
         )
         this.passwd = []
         this.Draw()
-        
       }
     }
   }