TASK:#112052-完成圆环进度条形式的开发

src/components/battery-square/battery-square-styles.ts

@@ -16,27 +16,118 @@ export const sharedStyles: CSSResult = css`
     align-items: center;
   }
 
-  .box {
+  .circle {
     box-sizing: border-box;
-    display: flex;
+    position: relative;
-    position: absolute;
     width: 120px;
     height: 120px;
-    border: 9.46px dashed rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    background: #ccc;
+    background-image: linear-gradient(to right, transparent 50%, #e6b239 0);
+    color: transparent;
+    text-align: center;
+  }
+
+  .circle::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 50%;
+    height: 100%;
+    border-radius: 0 100% 100% 0 / 50%;
+    background-color: inherit;
+    transform-origin: left;
+    animation: spin 5s linear infinite, bg 10s step-end infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(0.5turn);
+    }
+  }
+  @keyframes bg {
+    50% {
+      background: #e6b239;
+    }
+  }
+
+  .inner {
+    display: flex;
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 80%;
+    height: 80%;
+    border-radius: 50%;
+    background: radial-gradient(
+      60.05% 60.05% at 12.24% 12.74%,
+      #f7f9ff 0%,
+      #c6d1f5 100%
+    );
+    transform: translate(-50%, -50%);
     justify-content: center;
     align-items: center;
   }
 
-  .circle {
+  .percent {
-    position: absolute;
+    font-style: normal;
-    display: flex;
+    font-weight: 400;
-    width: 120px;
+    font-size: 30px;
-    height: 120px;
+    line-height: 40px;
-    border: 9.46px solid #e6b239;
+    color: #595959;
-    border-radius: 50%;
   }
 
-  button {
+  .signal {
-    width: 50px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 16px;
+    color: #595959;
+    margin-top: 10px;
+  }
+
+  .lightning {
+    position: absolute;
+    padding-block-end: 50px;
+    width: 14px;
+    height: 20px;
+  }
+
+  /*进度条为蓝色*/
+  :host([blue]) .container {
+    top: 250px;
+  }
+  :host([blue]) .circle {
+    background-image: linear-gradient(to right, transparent 50%, #565be8 0);
+  }
+  :host([blue]) .circle::before {
+    animation: spin_blue 5s linear infinite, bg_blue 10s step-end infinite;
+  }
+  @keyframes spin_blue {
+    to {
+      transform: rotate(0.5turn);
+    }
+  }
+  @keyframes bg_blue {
+    50% {
+      background: #565be8;
+    }
+  }
+
+  /*深色模式*/
+  :host([deep]) .container {
+    left: 250px;
+    background: #474747;
+  }
+  :host([deep]) .inner {
+    background: #474747;
+  }
+  :host([deep]) .percent {
+    color: #f4f4f4;
+  }
+  :host([deep]) .signal {
+    color: #f4f4f4;
   }
 `

src/components/battery-square/battery-square.ts

@@ -1,51 +1,60 @@
 import {html, LitElement, CSSResultArray} from 'lit'
-import {customElement, property, query, state} from 'lit/decorators.js'
+import {customElement, property, query} from 'lit/decorators.js'
 import {sharedStyles} from './battery-square-styles'
-
-export type circle = {
-  circle: null
-  context: null
-  centerX: 0
-  centerY: 0
-  rad: 0
-  speed: 0
-}
-
 @customElement('star-batterysquare')
 export class StarBatterysquare extends LitElement {
   public static override get styles(): CSSResultArray {
     return [sharedStyles]
   }
-
+  @property({type: Number}) percent = 0
-  @property({type: String}) number = '78'
 
   @property({type: Boolean}) deep = false
 
   @property({type: Boolean}) charge = false
 
-  @query('.circle') _circle: any
+  @query('.percent') _percent: any
-
 
+  count() {
+    var percent = this._percent,
+      speed = 100,
+      value = 100
+    console.log(percent, speed, value)
+    if (value > 0) {
+      var num = 0
+      var timer = setInterval(function () {
+        num++
+        num = num % 100
+        percent.innerText = num
+        if (num == value) {
+          clearInterval(timer)
+        }
+      }, speed)
+    } else {
+      percent.innerText = value
+    }
+  }
   protected firstUpdated(): void {
-    var circle = this._circle as circle
+    this.count()
-    //   context = circle.getContext('2d'),
+  }
-    //   centerX = circle.width / 2,
+
-    //   centerY = circle.height / 2,
+  protected Updated(): void {
-    //   rad = (Math.PI * 2) / 100,
+    this.count()
-    //   speed = 0.21
-    // if (this.charge == true) {
-    // }
   }
 
   render() {
     return html`
       <div class="container">
-        <canvas class="circle"></canvas>
+        <div class="circle">
+          <div class="inner">
+            <img src="src/assets/lightning.svg" class="lightning" />
+            <span class="percent"></span>
+            <span class="signal">%</span>
+          </div>
+        </div>
       </div>
     `
   }
 }
-
 declare global {
   interface HTMLElementTagNameMap {
     'star-batterysquare': StarBatterysquare

src/test/panels/battery-square/battery-square.ts

@@ -6,7 +6,10 @@ import {sharedStyles} from '../../../components/battery-square/battery-square-st
 export class PanelBatterysquare extends LitElement {
   render() {
     return html`
-      <star-batterysquare charge></star-batterysquare>
+      <star-batterysquare></star-batterysquare>
+      <star-batterysquare blue></star-batterysquare>
+      <star-batterysquare deep></star-batterysquare>
+      <star-batterysquare deep blue></star-batterysquare>
     `
   }