From 32f64207344ef4d153dfbaf3536ad33cd9597f7a Mon Sep 17 00:00:00 2001 From: wangguoqing Date: Sun, 9 Oct 2022 15:40:19 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=8C=E5=96=84=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 | 134 ++++++++++++++++++----- src/components/battery/battery.ts | 79 ++++++------- src/test/panels/battery/battery.ts | 10 +- 3 files changed, 146 insertions(+), 77 deletions(-) diff --git a/src/components/battery/battery-styles.ts b/src/components/battery/battery-styles.ts index 18decd5..75fadac 100644 --- a/src/components/battery/battery-styles.ts +++ b/src/components/battery/battery-styles.ts @@ -2,7 +2,7 @@ import {css, CSSResult} from 'lit' export const sharedStyles: CSSResult = css` .holder { position: relative; - width: 100%; + width: var(--battery-width, 100%); height: 0; padding: 0; padding-bottom: 35.4%; @@ -12,10 +12,6 @@ export const sharedStyles: CSSResult = css` position: absolute; width: 100%; height: 100%; - top: 0; - right: 0; - bottom: 0; - left: 0; background: linear-gradient( 137.64deg, #f5f0f5 0%, @@ -24,20 +20,20 @@ export const sharedStyles: CSSResult = css` ); box-shadow: 0px 0.92vw 2.3vw rgba(0, 0, 0, 0.08); border-radius: 4.6vw; + justify-content: space-between; + align-items: center; + overflow: hidden; } .power { position: absolute; left: 0%; - right: 36.01%; + right: var(--power-right); top: 0%; bottom: 0%; background: linear-gradient(152.36deg, #6be4d0 8.74%, #10a775 82.29%); border-radius: 4.6vw 0px 0px 4.6vw; display: flex; - justify-content: space-between; - align-items: center; - overflow: hidden; } .number { @@ -52,13 +48,12 @@ export const sharedStyles: CSSResult = css` .percent { position: absolute; - left: 33%; - font-style: normal; + left: var(--percent-left); font-weight: 400; font-size: 5.98vw; line-height: 5.98vw; color: #ebc883; - padding-block-start: 6.5%; + padding-block-start: 4.5%; } .lightning { @@ -85,24 +80,24 @@ export const sharedStyles: CSSResult = css` @keyframes flying { 0% { - left: 0%; - transform: translateY(0vw); + top: 90%; + transform: translateX(0vw); } 25% { - transform: translateY(5.75vw); + transform: translateX(5.75vw); } 50% { - transform: translateY(17.25vw); + transform: translateX(17.25vw); } 75% { - transform: translateY(-5.75vw); + transform: translateX(-5.75vw); } 88% { - transform: translateY(-8.74vw); + transform: translateX(-8.74vw); } 100% { - left: 90%; - transform: translateY(-11.5vw); + top: 0%; + transform: translateX(-11.5vw); } } @@ -113,12 +108,12 @@ export const sharedStyles: CSSResult = css` .bubbles:nth-child(2) { width: 4.14vw; height: 4.14vw; - top: 10%; + left: 10%; animation-duration: 8s; animation-delay: 1s; } .bubbles:nth-child(3) { - top: 20%; + left: 20%; animation-duration: 5s; animation-delay: 2s; } @@ -129,24 +124,24 @@ export const sharedStyles: CSSResult = css` animation-delay: 0s; } .bubbles:nth-child(5) { - top: 40%; + left: 40%; animation-duration: 7s; animation-delay: 2s; } .bubbles:nth-child(6) { - top: 80%; + left: 80%; width: 4.14vw; height: 4.14vw; animation-duration: 6s; animation-delay: 1s; } .bubbles:nth-child(7) { - top: 40%; + left: 40%; animation-duration: 9s; animation-delay: 2s; } .bubbles:nth-child(8) { - bottom: 90%; + right: 90%; width: 2.3vw; height: 2.3vw; animation-duration: 9s; @@ -174,11 +169,92 @@ export const sharedStyles: CSSResult = css` } :host([vertical]) .percent { transform: rotate(270deg); - left: 9%; - padding-right: 31%; - padding-block-end: 30%; + padding-right: var(--vertical-right); + padding-block-end: var(--vertical-end); } :host([vertical]) .lightning { transform: rotate(90deg); } + .bubbles_vertical { + position: absolute; + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.5) 0%, + rgba(255, 255, 255, 0) 100% + ); + width: 5.52vw; + height: 5.52vw; + border-radius: 50%; + opacity: 0.5; + animation: flying-vertical 10s ease-in infinite; + } + @keyframes flying-vertical { + 0% { + left: 0%; + transform: translateY(0vw); + } + 25% { + transform: translateY(5.75vw); + } + 50% { + transform: translateY(17.25vw); + } + 75% { + transform: translateY(-5.75vw); + } + 88% { + transform: translateY(-8.74vw); + } + 100% { + left: 90%; + transform: translateY(-11.5vw); + } + } + + .bubbles_vertical:nth-child(1) { + animation-duration: 8s; + animation-delay: 0s; + } + .bubbles_vertical:nth-child(2) { + width: 4.14vw; + height: 4.14vw; + top: 10%; + animation-duration: 8s; + animation-delay: 1s; + } + .bubbles_vertical:nth-child(3) { + top: 20%; + animation-duration: 5s; + animation-delay: 2s; + } + .bubbles_vertical:nth-child(4) { + width: 2.3vw; + height: 2.3vw; + animation-duration: 6s; + animation-delay: 0s; + } + .bubbles_vertical:nth-child(5) { + top: 40%; + animation-duration: 7s; + animation-delay: 2s; + } + .bubbles_vertical:nth-child(6) { + top: 80%; + width: 4.14vw; + height: 4.14vw; + animation-duration: 6s; + animation-delay: 1s; + } + .bubbles_vertical:nth-child(7) { + top: 40%; + animation-duration: 9s; + animation-delay: 2s; + } + .bubbles_vertical:nth-child(8) { + bottom: 90%; + width: 2.3vw; + height: 2.3vw; + animation-duration: 9s; + animation-delay: 0s; + } ` diff --git a/src/components/battery/battery.ts b/src/components/battery/battery.ts index 63dc992..045d7d9 100644 --- a/src/components/battery/battery.ts +++ b/src/components/battery/battery.ts @@ -1,4 +1,4 @@ -import {html, LitElement, CSSResultArray, nothing} from 'lit' +import {html, LitElement, CSSResultArray} from 'lit' import {customElement, property, query} from 'lit/decorators.js' import {sharedStyles} from './battery-styles' @@ -16,77 +16,66 @@ export class StarBattery extends LitElement { @query('.percent') _percent: any - @property({type: Boolean}) vertical = false + @property({type: Boolean}) vertical = true - @property({type: Number, reflect: true}) percent = 22 + @property({type: Number, reflect: true}) percent = 0 static get observedAttributes() { return ['charge', 'percent'] } attributeChangedCallback(name: string, oldValue: any, newValue: any) { - console.log(name, oldValue, newValue) - + //console.log(name, oldValue, newValue) switch (name) { case 'charge': if (newValue !== null) { for (var i = 0; i < 20; i++) { const bubbles = document.createElement('span') - bubbles.className = 'bubbles' - this._power.append(bubbles) + if (this.vertical == true) { + bubbles.className = 'bubbles_vertical' + this._power.append(bubbles) + } else { + bubbles.className = 'bubbles' + this._power.append(bubbles) + } } } else { this._power.innerHTML = '' } break + case 'percent': + if (newValue !== null) { + this.style.setProperty('--power-right', 100 - this.percent + '%') + if (this.percent == 0) { + this.style.setProperty('--percent-left', '19.5%') + this.style.setProperty('--vertical-right', '13%') + this.style.setProperty('--vertical-end', '38.5%') + } else if (this.percent == 100) { + this.style.setProperty('--percent-left', '31.5%') + this.style.setProperty('--vertical-right', '25%') + this.style.setProperty('--vertical-end', '61.5%') + } else { + this.style.setProperty('--percent-left', '25.5%') + this.style.setProperty('--vertical-right', '20%') + this.style.setProperty('--vertical-end', '50%') + } + } + break } } protected firstUpdated(): void { - if (this.charge == true) { - var power = this._power - power.style.right = this.percent + '%' - this._percent.style.left = '29%' - - if (this.percent == 0) { - this._percent.style.left = '32%' - this._percent.style.paddingBlockStart = '5.5%' - this._power.style.borderRadius = '20px' - } else if (this.percent <= 2 && this.percent > 1) { - this._power.style.borderRadius = '20px 9px 9.5px 20px' - } else if (this.percent <= 1 && this.percent > 0) { - this._power.style.borderRadius = '20px 11.5px 12px 20px' - } - } else { - nothing - } + this.charge = true } render() { return html`
-
- ${this.charge == true - ? html` - - ${this.percent == 0 - ? html` - 100 - ` - : html` - ${(100 - this.percent).toPrecision(2)} - `} - - ` - : html` - 78 - `} - % -
-
- -
+
+ ${Math.round(this.percent)} + % +
` diff --git a/src/test/panels/battery/battery.ts b/src/test/panels/battery/battery.ts index c468353..680d98d 100644 --- a/src/test/panels/battery/battery.ts +++ b/src/test/panels/battery/battery.ts @@ -8,7 +8,7 @@ export class PanelBattery extends LitElement { render() { return html`
- +
@@ -19,9 +19,13 @@ export class PanelBattery extends LitElement { return [ sharedStyles, css` + :host { + height: 100vh; + width: 100vw; + } #container { - height: 100px; - width: 100px; + height: 100vh; + width: 100vw; } `, ]