修改充电标志显示bug并实现电量不足时的电池状态显示

src/components/battery/battery-styles.ts

@@ -31,7 +31,8 @@ export const sharedStyles: CSSResult = css`
     right: var(--power-right);
     top: 0%;
     bottom: 0%;
-    background: linear-gradient(152.36deg, #6be4d0 8.74%, #10a775 82.29%);
+    //background: linear-gradient(152.36deg, #6be4d0 8.74%, #10a775 82.29%);
+    background: var(--power-background);
     display: flex;
   }
 
@@ -41,7 +42,8 @@ export const sharedStyles: CSSResult = css`
     font-style: normal;
     font-weight: 400;
     font-size: var(--number-size);
-    color: #ebc883;
+    //color: #ffffff;
+    color: var(--battery-color);
   }
 
   .percent {
@@ -49,7 +51,8 @@ export const sharedStyles: CSSResult = css`
     left: var(--percent-left);
     font-weight: 400;
     font-size: var(--percent-size);
-    color: #ebc883;
+    //color: #ffffff;
+    color: var(--battery-color);
     padding-block-start: 4.5%;
   }
 

src/components/battery/battery.ts

@@ -7,7 +7,7 @@ import lightning from './svg/lightning.svg'
 @customElement('star-battery')
 export class StarBattery extends LitElement {
   public static override get styles(): CSSResultArray {
-    return [sharedStyles , animation]
+    return [sharedStyles, animation]
   }
 
   @property({type: Boolean}) deep = false
@@ -38,10 +38,17 @@ export class StarBattery extends LitElement {
             bubbles.className = 'bubbles'
             this._container.append(bubbles)
           }
+          const image = document.createElement('img')
+          image.src = '/src/components/battery/svg/lightning.svg'
+          image.className = 'lightning'
+          this._container.append(image)
         } else {
           this.shadowRoot
             ?.querySelectorAll('.bubbles')
             .forEach((span) => span.remove())
+          this.shadowRoot
+            ?.querySelectorAll('.lightning')
+            .forEach((img) => img.remove())
         }
         break
       case 'percent':
@@ -61,6 +68,19 @@ export class StarBattery extends LitElement {
             this.style.setProperty('--vertical-right', '20%')
             this.style.setProperty('--vertical-end', '50%')
           }
+          if (this.percent >= 0 && this.percent <= 20) {
+            this.style.setProperty(
+              '--power-background',
+              'linear-gradient(152.36deg, #EF8B76 8.74%, #EB5A5A 82.29%)'
+            )
+            this.style.setProperty('--battery-color', '#ebc883')
+          } else {
+            this.style.setProperty(
+              '--power-background',
+              'linear-gradient(152.36deg, #6be4d0 8.74%, #10a775 82.29%)'
+            )
+            this.style.setProperty('--battery-color', '#ffffff')
+          }
         }
         break
     }
@@ -97,7 +117,7 @@ export class StarBattery extends LitElement {
         <div class="power"></div>
         <span class="number">${Math.round(this.percent)}</span>
         <span class="percent">%</span>
-        <img src="${lightning}" class="lightning" />
+        <!-- <img src="${lightning}" class="lightning" /> -->
       </div>
     `
   }