TASK:#112052-完善电池组件的样式和功能

src/components/battery/battery-styles.ts

@@ -1,6 +1,7 @@
 import {css, CSSResult} from 'lit'
 export const sharedStyles: CSSResult = css`
   .container {
+    display: flex;
     position: absolute;
     width: 452px;
     height: 160px;
@@ -28,6 +29,7 @@ export const sharedStyles: CSSResult = css`
     display: flex;
     justify-content: space-between;
     align-items: center;
+    overflow: hidden;
   }
 
   .number {
@@ -51,10 +53,6 @@ export const sharedStyles: CSSResult = css`
     bottom: 35%;
   }
 
-  .charge {
-    display: flex;
-  }
-
   .lightning {
     position: absolute;
     right: 37.26px;
@@ -147,6 +145,261 @@ export const sharedStyles: CSSResult = css`
     animation-delay: 0s;
   }
 
+  /*mini*/
+  .bubbles_mini {
+    position: absolute;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.5) 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    opacity: 0.5;
+    animation: flymini 10s ease-in infinite;
+  }
+
+  @keyframes flymini {
+    0% {
+      left: 0%;
+      transform: translateY(0px);
+    }
+    25% {
+      transform: translateY(6px);
+    }
+    50% {
+      transform: translateY(19px);
+    }
+    75% {
+      transform: translateY(-6px);
+    }
+    88% {
+      transform: translateY(-10px);
+    }
+    100% {
+      left: 90%;
+      transform: translateY(-12px);
+    }
+  }
+
+  .bubbles_mini:nth-child(1) {
+    animation-duration: 8s;
+    animation-delay: 0s;
+  }
+  .bubbles_mini:nth-child(2) {
+    width: 4px;
+    height: 4px;
+    top: 10%;
+    animation-duration: 8s;
+    animation-delay: 1s;
+  }
+  .bubbles_mini:nth-child(3) {
+    top: 20%;
+    animation-duration: 5s;
+    animation-delay: 2s;
+  }
+  .bubbles_mini:nth-child(4) {
+    width: 2.5px;
+    height: 2.5px;
+    animation-duration: 6s;
+    animation-delay: 0s;
+  }
+  .bubbles_mini:nth-child(5) {
+    top: 40%;
+    animation-duration: 7s;
+    animation-delay: 2s;
+  }
+  .bubbles_mini:nth-child(6) {
+    top: 80%;
+    width: 5px;
+    height: 5px;
+    animation-duration: 6s;
+    animation-delay: 1s;
+  }
+  .bubbles_mini:nth-child(7) {
+    top: 40%;
+    animation-duration: 9s;
+    animation-delay: 2s;
+  }
+  .bubbles_mini:nth-child(8) {
+    bottom: 90%;
+    width: 2.5px;
+    height: 2.5px;
+    animation-duration: 9s;
+    animation-delay: 0s;
+  }
+
+  /*small*/
+  .bubbles_small {
+    position: absolute;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.5) 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    opacity: 0.5;
+    animation: flysmall 10s ease-in infinite;
+  }
+
+  @keyframes flysmall {
+    0% {
+      left: 0%;
+      transform: translateY(0px);
+    }
+    25% {
+      transform: translateY(12px);
+    }
+    50% {
+      transform: translateY(38px);
+    }
+    75% {
+      transform: translateY(-12px);
+    }
+    88% {
+      transform: translateY(-20px);
+    }
+    100% {
+      left: 90%;
+      transform: translateY(-24px);
+    }
+  }
+
+  .bubbles_small:nth-child(1) {
+    animation-duration: 8s;
+    animation-delay: 0s;
+  }
+  .bubbles_small:nth-child(2) {
+    width: 8px;
+    height: 8px;
+    top: 10%;
+    animation-duration: 8s;
+    animation-delay: 1s;
+  }
+  .bubbles_small:nth-child(3) {
+    top: 20%;
+    animation-duration: 5s;
+    animation-delay: 2s;
+  }
+  .bubbles_small:nth-child(4) {
+    width: 5px;
+    height: 5px;
+    animation-duration: 6s;
+    animation-delay: 0s;
+  }
+  .bubbles_small:nth-child(5) {
+    top: 40%;
+    animation-duration: 7s;
+    animation-delay: 2s;
+  }
+  .bubbles_small:nth-child(6) {
+    top: 80%;
+    width: 10px;
+    height: 10px;
+    animation-duration: 6s;
+    animation-delay: 1s;
+  }
+  .bubbles_small:nth-child(7) {
+    top: 40%;
+    animation-duration: 9s;
+    animation-delay: 2s;
+  }
+  .bubbles_small:nth-child(8) {
+    bottom: 90%;
+    width: 5px;
+    height: 5px;
+    animation-duration: 9s;
+    animation-delay: 0s;
+  }
+
+  /*medium*/
+  .bubbles_medium {
+    position: absolute;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.5) 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    opacity: 0.5;
+    animation: flymini 10s ease-in infinite;
+  }
+
+  @keyframes flymini {
+    0% {
+      left: 0%;
+      transform: translateY(0px);
+    }
+    25% {
+      transform: translateY(18px);
+    }
+    50% {
+      transform: translateY(57px);
+    }
+    75% {
+      transform: translateY(-18px);
+    }
+    88% {
+      transform: translateY(-30px);
+    }
+    100% {
+      left: 90%;
+      transform: translateY(-36px);
+    }
+  }
+
+  .bubbles_medium:nth-child(1) {
+    animation-duration: 8s;
+    animation-delay: 0s;
+  }
+  .bubbles_medium:nth-child(2) {
+    width: 12px;
+    height: 12px;
+    top: 10%;
+    animation-duration: 8s;
+    animation-delay: 1s;
+  }
+  .bubbles_medium:nth-child(3) {
+    top: 20%;
+    animation-duration: 5s;
+    animation-delay: 2s;
+  }
+  .bubbles_medium:nth-child(4) {
+    width: 7.5px;
+    height: 7.5px;
+    animation-duration: 6s;
+    animation-delay: 0s;
+  }
+  .bubbles_medium:nth-child(5) {
+    top: 40%;
+    animation-duration: 7s;
+    animation-delay: 2s;
+  }
+  .bubbles_medium:nth-child(6) {
+    top: 80%;
+    width: 15px;
+    height: 15px;
+    animation-duration: 6s;
+    animation-delay: 1s;
+  }
+  .bubbles_medium:nth-child(7) {
+    top: 40%;
+    animation-duration: 9s;
+    animation-delay: 2s;
+  }
+  .bubbles_medium:nth-child(8) {
+    bottom: 90%;
+    width: 7.5px;
+    height: 7.5px;
+    animation-duration: 9s;
+    animation-delay: 0s;
+  }
+
   .location {
     position: absolute;
     margin-left: 200px;
@@ -214,14 +467,14 @@ export const sharedStyles: CSSResult = css`
     transform: rotate(90deg);
   }
 
-  /*不同大小*/
+  /*mini*/
   :host([mini]) .container {
     width: 113px;
     height: 40px;
-    border-radius: 15px;
+    border-radius: 12px;
   }
   :host([mini]) .power {
-    border-radius: 15px 0px 0px 15px;
+    border-radius: 12px 0px 0px 12px;
   }
   :host([mini]) .number {
     font-size: 12.5px;
@@ -237,7 +490,12 @@ export const sharedStyles: CSSResult = css`
     width: 8.435px;
     height: 9.315px;
   }
+  :host([mini]) .bubbles {
+    width: 6px;
+    height: 6px;
+  }
 
+  /*small*/
   :host([small]) .container {
     width: 226px;
     height: 80px;
@@ -260,7 +518,12 @@ export const sharedStyles: CSSResult = css`
     width: 16.87px;
     height: 18.63px;
   }
+  :host([small]) .bubbles {
+    width: 12px;
+    height: 12px;
+  }
 
+  /*medium*/
   :host([medium]) .container {
     width: 339px;
     height: 120px;

src/components/battery/battery.ts

@@ -7,7 +7,6 @@ export class StarBattery extends LitElement {
   public static override get styles(): CSSResultArray {
     return [sharedStyles]
   }
-  @property({type: String}) number = '78'
 
   @property({type: Boolean}) deep = false
 
@@ -21,17 +20,65 @@ export class StarBattery extends LitElement {
 
   @query('.power') _power: any
 
+  @query('.percent') _percent: any
+
   @property({type: Boolean}) vertical = false
 
+  @property({type: Number}) percent = 22
+
   protected firstUpdated(): void {
     if (this.charge == true) {
       var power = this._power
-      console.log(power)
+      power.style.right = this.percent + '%'
       for (var i = 0; i < 20; i++) {
         const bubbles = document.createElement('span')
-        bubbles.className = 'bubbles'
+        if (this.mini == true) {
+          bubbles.className = 'bubbles_mini'
+        } else if (this.small == true) {
+          bubbles.className = 'bubbles_small'
+        } else if (this.medium == true) {
+          bubbles.className = 'bubbles_medium'
+        } else {
+          bubbles.className = 'bubbles'
+        }
         power.append(bubbles)
       }
+
+      if (this.percent == 0) {
+        if (this.mini == true) {
+          this._percent.style.left = '35px'
+          this._power.style.borderRadius = '12px'
+        } else if (this.small == true) {
+          this._percent.style.left = '60px'
+          this._power.style.borderRadius = '15px'
+        } else if (this.medium == true) {
+          this._percent.style.left = '90px'
+          this._power.style.borderRadius = '15px'
+        } else {
+          this._percent.style.left = '120px'
+          this._power.style.borderRadius = '20px'
+        }
+      } else if (this.percent <= 2 && this.percent > 1) {
+        if (this.mini == true) {
+          this._power.style.borderRadius = '12px'
+        } else if (this.small == true) {
+          this._power.style.borderRadius = '15px'
+        } else if (this.medium == true) {
+          this._power.style.borderRadius = '15px'
+        } else {
+          this._power.style.borderRadius = '20px 9px 9.5px 20px'
+        }
+      } else if (this.percent <= 1 && this.percent > 0) {
+        if (this.mini == true) {
+          this._power.style.borderRadius = '12px'
+        } else if (this.small == true) {
+          this._power.style.borderRadius = '15px'
+        } else if (this.medium == true) {
+          this._power.style.borderRadius = '15px'
+        } else {
+          this._power.style.borderRadius = '20px 11.5px 12px 20px'
+        }
+      }
     } else {
       nothing
     }
@@ -41,10 +88,25 @@ export class StarBattery extends LitElement {
     return html`
       <div class="container">
         <div class="power">
-          <span class="number">${this.number}</span>
+          ${this.charge == true
+            ? html`
+                <span class="number">
+                  <!-- ${(100 - this.percent).toLocaleString()} -->
+                  ${this.percent == 0
+                    ? html`
+                        100
+                      `
+                    : html`
+                        ${(100 - this.percent).toPrecision(2)}
+                      `}
+                </span>
+              `
+            : html`
+                <span class="number">78</span>
+              `}
           <span class="percent">%</span>
         </div>
-        <div class="charge">
+        <div>
           <img src="src/assets/lightning.svg" class="lightning" />
         </div>
       </div>

src/test/panels/battery/battery.ts

@@ -15,8 +15,11 @@ export class PanelBattery extends LitElement {
       <star-battery vertical charge class="location_charge"></star-battery>
       <star-battery vertical charge deep class="location_charge_deep"></star-battery>
       <star-battery class="mini" mini></star-battery>
+      <star-battery class="mini" mini charge></star-battery>
       <star-battery class="small" small></star-battery>
+      <star-battery class="small" small charge></star-battery>
       <star-battery class="medium" medium></star-battery>
+      <star-battery class="medium" medium charge></star-battery>
     `
   }