From 181d1ece5441510fcf66c1681e8722823d71a192 Mon Sep 17 00:00:00 2001 From: wangguoqing Date: Thu, 29 Sep 2022 20:21:16 +0800 Subject: [PATCH] =?UTF-8?q?TASK:#112052-=E4=BF=AE=E6=94=B9=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/battery/battery-styles.ts | 192 ++++++++++++++--------- src/components/battery/battery.ts | 7 +- src/test/panels/battery/battery.ts | 3 + 3 files changed, 123 insertions(+), 79 deletions(-) diff --git a/src/components/battery/battery-styles.ts b/src/components/battery/battery-styles.ts index 63115e1..1414959 100644 --- a/src/components/battery/battery-styles.ts +++ b/src/components/battery/battery-styles.ts @@ -74,125 +74,76 @@ export const sharedStyles: CSSResult = css` height: 24px; border-radius: 50%; opacity: 0.5; - animation: flying 5s ease-in infinite; + animation: flying 10s ease-in infinite; } @keyframes flying { 0% { left: 0%; - transform: translate3d(0px); - } - 15% { - transform: translate3d(30px); + transform: translateY(0px); } 25% { - transform: translate3d(50px); - } - 35% { - transform: translate3d(70px); - } - 45% { - transform: translate3d(90px); + transform: translateY(25px); } 50% { - transform: translate3d(100px); + transform: translateY(75px); } 75% { - transform: translate3d(-150px); + transform: translateY(-25px); + } + 88% { + transform: translateY(-38px); } 100% { left: 90%; - transform: translate3d(-200px); + transform: translateY(-50px); } } .bubbles:nth-child(1) { - animation-duration: 5s; + animation-duration: 8s; animation-delay: 0s; } .bubbles:nth-child(2) { + width: 18px; + height: 18px; top: 10%; - animation-duration: 4s; - animation-delay: 3s; + animation-duration: 8s; + animation-delay: 1s; } .bubbles:nth-child(3) { top: 20%; - animation-duration: 4s; + animation-duration: 5s; animation-delay: 2s; } .bubbles:nth-child(4) { - animation-duration: 3s; + width: 10px; + height: 10px; + animation-duration: 6s; animation-delay: 0s; } .bubbles:nth-child(5) { top: 40%; - animation-duration: 3s; + animation-duration: 7s; animation-delay: 2s; } .bubbles:nth-child(6) { top: 80%; - animation-duration: 3s; + width: 18px; + height: 18px; + animation-duration: 6s; animation-delay: 1s; } .bubbles:nth-child(7) { - animation-duration: 4s; - animation-delay: 3s; + top: 40%; + animation-duration: 9s; + animation-delay: 2s; } .bubbles:nth-child(8) { - bottom: 0%; - animation-duration: 4s; - animation-delay: 2s; - } - .bubbles:nth-child(9) { - top: 60%; - animation-duration: 5s; - animation-delay: 2s; - } - .bubbles:nth-child(11) { - animation-duration: 3s; - animation-delay: 0s; - } - .bubbles:nth-child(12) { - top: 10%; - animation-duration: 3s; - animation-delay: 1s; - } - .bubbles:nth-child(13) { - top: 20%; - animation-duration: 3s; - animation-delay: 2s; - } - .bubbles:nth-child(14) { - animation-duration: 3s; - animation-delay: 0s; - } - .bubbles:nth-child(15) { - top: 40%; - animation-duration: 4s; - animation-delay: 2s; - } - .bubbles:nth-child(16) { - top: 80%; - animation-duration: 3s; - animation-delay: 2s; - } - .bubbles:nth-child(17) { - animation-duration: 4s; - animation-delay: 3s; - } - .bubbles:nth-child(18) { - bottom: 0%; - animation-duration: 4s; - animation-delay: 2s; - } - .bubbles:nth-child(19) { - top: 60%; - animation-duration: 3s; - animation-delay: 2s; - } - .bubbles:nth-child(20) { - top: 60%; - animation-duration: 1s; + bottom: 90%; + width: 10px; + height: 10px; + animation-duration: 9s; animation-delay: 0s; } @@ -213,6 +164,21 @@ export const sharedStyles: CSSResult = css` top: -215px; } + .mini { + position: absolute; + top: 430px; + } + + .small { + position: absolute; + top: 530px; + } + + .medium { + position: absolute; + top: 670px; + } + /*深色模式*/ :host([deep]) .container { box-sizing: border-box; @@ -247,4 +213,74 @@ export const sharedStyles: CSSResult = css` :host([vertical]) .lightning { transform: rotate(90deg); } + + /*不同大小*/ + :host([mini]) .container { + width: 113px; + height: 40px; + border-radius: 15px; + } + :host([mini]) .power { + border-radius: 15px 0px 0px 15px; + } + :host([mini]) .number { + font-size: 12.5px; + left: 13.5px; + } + :host([mini]) .percent { + left: 24px; + font-size: 6.5px; + line-height: 6.5px; + } + :host([mini]) .lightning { + right: 9.315px; + width: 8.435px; + height: 9.315px; + } + + :host([small]) .container { + width: 226px; + height: 80px; + border-radius: 15px; + } + :host([small]) .power { + border-radius: 15px 0px 0px 15px; + } + :host([small]) .number { + font-size: 25px; + left: 17px; + } + :host([small]) .percent { + left: 48px; + font-size: 13px; + line-height: 13px; + } + :host([small]) .lightning { + right: 18.63px; + width: 16.87px; + height: 18.63px; + } + + :host([medium]) .container { + width: 339px; + height: 120px; + border-radius: 15px; + } + :host([medium]) .power { + border-radius: 15px 0px 0px 15px; + } + :host([medium]) .number { + font-size: 38px; + left: 26px; + } + :host([medium]) .percent { + left: 72px; + font-size: 20px; + line-height: 20px; + } + :host([medium]) .lightning { + right: 28px; + width: 25.3px; + height: 28px; + } ` diff --git a/src/components/battery/battery.ts b/src/components/battery/battery.ts index b549485..4539e43 100644 --- a/src/components/battery/battery.ts +++ b/src/components/battery/battery.ts @@ -7,13 +7,18 @@ export class StarBattery extends LitElement { public static override get styles(): CSSResultArray { return [sharedStyles] } - @property({type: String}) number = '78' @property({type: Boolean}) deep = false @property({type: Boolean}) charge = false + @property({type: Boolean}) mini = false + + @property({type: Boolean}) small = false + + @property({type: Boolean}) medium = false + @query('.power') _power: any @property({type: Boolean}) vertical = false diff --git a/src/test/panels/battery/battery.ts b/src/test/panels/battery/battery.ts index 04331e7..de6d2b9 100644 --- a/src/test/panels/battery/battery.ts +++ b/src/test/panels/battery/battery.ts @@ -14,6 +14,9 @@ export class PanelBattery extends LitElement { + + + ` }