TASK:#112052-完善电池组件的样式和功能
This commit is contained in:
wangguoqing
parent
181d1ece54
commit
f9cd26b1a2
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue