TASK:#112052-完成圆环进度条形式的开发
This commit is contained in:
wangguoqing
parent
1cbdb64699
commit
f3d62df4e7
|
|
@ -16,27 +16,118 @@ export const sharedStyles: CSSResult = css`
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
.circle {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
position: relative;
|
||||
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 {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border: 9.46px solid #e6b239;
|
||||
border-radius: 50%;
|
||||
.percent {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 50px;
|
||||
.signal {
|
||||
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;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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: String}) number = '78'
|
||||
@property({type: Number}) percent = 0
|
||||
|
||||
@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
|
||||
// context = circle.getContext('2d'),
|
||||
// centerX = circle.width / 2,
|
||||
// centerY = circle.height / 2,
|
||||
// rad = (Math.PI * 2) / 100,
|
||||
// speed = 0.21
|
||||
// if (this.charge == true) {
|
||||
// }
|
||||
this.count()
|
||||
}
|
||||
|
||||
protected Updated(): void {
|
||||
this.count()
|
||||
}
|
||||
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue