openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #80 in YR/star-web-components from feature-component-modify to master 

* commit '8e9184300fa3feddb6c123f3adf2dc560f630424':
  修改完善代码
  TASK:#112052-修改并完善电池组件的样式以及气泡的显示
This commit is contained in:
汪昌棋 2022-10-13 10:51:16 +08:00
parent 2394cd3dbc 8e9184300f
commit cf312a9073
4 changed files with 79 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/battery/battery-styles.ts
View File

@ -18,8 +18,8 @@ export const sharedStyles: CSSResult = css`
#fafafa 20.46%,
#d5daf2 90.45%
);
box-shadow: 0px 0.92vw 2.3vw rgba(0, 0, 0, 0.08);
border-radius: 4.6vw;
box-shadow: 0px var(--shadow-one) var(--shadow-two) rgba(0, 0, 0, 0.08);
border-radius: var(--container-radius);
justify-content: space-between;
align-items: center;
overflow: hidden;
@ -32,7 +32,6 @@ export const sharedStyles: CSSResult = css`
top: 0%;
bottom: 0%;
background: linear-gradient(152.36deg, #6be4d0 8.74%, #10a775 82.29%);
border-radius: 4.6vw 0px 0px 4.6vw;
display: flex;
}
@ -41,8 +40,7 @@ export const sharedStyles: CSSResult = css`
left: 12%;
font-style: normal;
font-weight: 400;
font-size: 11.5vw;
line-height: 15.18vw;
font-size: var(--number-size);
color: #ebc883;
}
@ -50,8 +48,7 @@ export const sharedStyles: CSSResult = css`
position: absolute;
left: var(--percent-left);
font-weight: 400;
font-size: 5.98vw;
line-height: 5.98vw;
font-size: var(--percent-size);
color: #ebc883;
padding-block-start: 4.5%;
}
@ -71,8 +68,8 @@ export const sharedStyles: CSSResult = css`
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0) 100%
);
width: 5.52vw;
height: 5.52vw;
width: var(--bubbles);
height: var(--bubbles);
border-radius: 50%;
opacity: 0.5;
animation: flying 10s ease-in infinite;
@ -80,24 +77,24 @@ export const sharedStyles: CSSResult = css`
@keyframes flying {
0% {
top: 90%;
bottom: -10%;
transform: translateX(0vw);
}
25% {
transform: translateX(5.75vw);
transform: translateX(var(--first));
}
50% {
transform: translateX(17.25vw);
transform: translateX(var(--second));
}
75% {
transform: translateX(-5.75vw);
transform: translateX(var(--third));
}
88% {
transform: translateX(-8.74vw);
transform: translateX(var(--forth));
}
100% {
top: 0%;
transform: translateX(-11.5vw);
bottom: 90%;
transform: translateX(var(--fifth));
}
}
@ -106,8 +103,8 @@ export const sharedStyles: CSSResult = css`
animation-delay: 0s;
}
.bubbles:nth-child(2) {
width: 4.14vw;
height: 4.14vw;
width: var(--one);
height: var(--one);
left: 10%;
animation-duration: 8s;
animation-delay: 1s;
@ -118,8 +115,8 @@ export const sharedStyles: CSSResult = css`
animation-delay: 2s;
}
.bubbles:nth-child(4) {
width: 2.3vw;
height: 2.3vw;
width: var(--two);
height: var(--two);
animation-duration: 6s;
animation-delay: 0s;
}
@ -130,8 +127,8 @@ export const sharedStyles: CSSResult = css`
}
.bubbles:nth-child(6) {
left: 80%;
width: 4.14vw;
height: 4.14vw;
width: var(--one);
height: var(--one);
animation-duration: 6s;
animation-delay: 1s;
}
@ -142,8 +139,8 @@ export const sharedStyles: CSSResult = css`
}
.bubbles:nth-child(8) {
right: 90%;
width: 2.3vw;
height: 2.3vw;
width: var(--two);
height: var(--two);
animation-duration: 9s;
animation-delay: 0s;
}
@ -182,8 +179,8 @@ export const sharedStyles: CSSResult = css`
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0) 100%
);
width: 5.52vw;
height: 5.52vw;
width: var(--bubbles);
height: var(--bubbles);
border-radius: 50%;
opacity: 0.5;
animation: flying-vertical 10s ease-in infinite;
@ -194,20 +191,20 @@ export const sharedStyles: CSSResult = css`
transform: translateY(0vw);
}
25% {
transform: translateY(5.75vw);
transform: translateY(var(--first));
}
50% {
transform: translateY(17.25vw);
transform: translateY(var(--second));
}
75% {
transform: translateY(-5.75vw);
transform: translateY(var(--third));
}
88% {
transform: translateY(-8.74vw);
transform: translateY(var(--forth));
}
100% {
left: 90%;
transform: translateY(-11.5vw);
transform: translateY(var(--fifth));
}
}
@ -216,8 +213,8 @@ export const sharedStyles: CSSResult = css`
animation-delay: 0s;
}
.bubbles_vertical:nth-child(2) {
width: 4.14vw;
height: 4.14vw;
width: var(--one);
height: var(--one);
top: 10%;
animation-duration: 8s;
animation-delay: 1s;
@ -228,8 +225,8 @@ export const sharedStyles: CSSResult = css`
animation-delay: 2s;
}
.bubbles_vertical:nth-child(4) {
width: 2.3vw;
height: 2.3vw;
width: var(--two);
height: var(--two);
animation-duration: 6s;
animation-delay: 0s;
}
@ -240,8 +237,8 @@ export const sharedStyles: CSSResult = css`
}
.bubbles_vertical:nth-child(6) {
top: 80%;
width: 4.14vw;
height: 4.14vw;
width: var(--one);
height: var(--one);
animation-duration: 6s;
animation-delay: 1s;
}
@ -252,8 +249,8 @@ export const sharedStyles: CSSResult = css`
}
.bubbles_vertical:nth-child(8) {
bottom: 90%;
width: 2.3vw;
height: 2.3vw;
width: var(--two);
height: var(--two);
animation-duration: 9s;
animation-delay: 0s;
}

44
src/components/battery/battery.ts
View File

@ -1,6 +1,7 @@
import {html, LitElement, CSSResultArray} from 'lit'
import {customElement, property, query} from 'lit/decorators.js'
import {sharedStyles} from './battery-styles'
import lightning from './svg/lightning.svg'
@customElement('star-battery')
export class StarBattery extends LitElement {
@ -12,6 +13,8 @@ export class StarBattery extends LitElement {
@property({type: Boolean, reflect: true}) charge = false
@query('.container') _container: any
@query('.power') _power: any
@query('.percent') _percent: any
@ -31,20 +34,18 @@ export class StarBattery extends LitElement {
if (newValue !== null) {
for (var i = 0; i < 20; i++) {
const bubbles = document.createElement('span')
if (this.vertical == true) {
bubbles.className = 'bubbles_vertical'
this._power.append(bubbles)
} else {
bubbles.className = 'bubbles'
this._power.append(bubbles)
}
bubbles.className = 'bubbles'
this._container.append(bubbles)
}
} else {
this._power.innerHTML = ''
this.shadowRoot
?.querySelectorAll('.bubbles')
.forEach((span) => span.remove())
}
break
case 'percent':
if (newValue !== null) {
this.percent = newValue
this.style.setProperty('--power-right', 100 - this.percent + '%')
if (this.percent == 0) {
this.style.setProperty('--percent-left', '19.5%')
@ -64,8 +65,29 @@ export class StarBattery extends LitElement {
}
}
protected firstUpdated(): void {
this.charge = true
protected resize() {
var width = this._container.clientWidth
this.style.setProperty('--number-size', width / 9 + 'px')
this.style.setProperty('--percent-size', width / 17.4 + 'px')
this.style.setProperty('--container-radius', width / 22.6 + 'px')
this.style.setProperty('--shadow-one', width / 113 + 'px')
this.style.setProperty('--shadow-two', width / 45.2 + 'px')
this.style.setProperty('--bubbles', width / 18.8 + 'px')
this.style.setProperty('--power-other', width / 18.8 + 'px')
this.style.setProperty('--one', width / 25 + 'px')
this.style.setProperty('--two', width / 45.2 + 'px')
this.style.setProperty('--first', width / 18.08 + 'px')
this.style.setProperty('--second', width / 6.03 + 'px')
this.style.setProperty('--third', -(width / 18.08) + 'px')
this.style.setProperty('--forth', -(width / 11.9) + 'px')
this.style.setProperty('--fifth', -(width / 9.04) + 'px')
}
protected firstUpdated() {
this.resize()
window.addEventListener('resize', () => {
this.resize()
})
}
render() {
@ -75,7 +97,7 @@ export class StarBattery extends LitElement {
<div class="power"></div>
<span class="number">${Math.round(this.percent)}</span>
<span class="percent">%</span>
<img src="src/assets/lightning.svg" class="lightning" />
<img src="${lightning}" class="lightning" />
</div>
</div>
`

1
src/components/battery/svg/lightning.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663655792624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1490" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M739.2 32L160 515.2h243.2L284.8 992 864 518.4H633.6z" p-id="1491" fill="#ebc883"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 425 B

13
src/test/panels/battery/battery.ts
View File

@ -1,20 +1,25 @@
import {html, LitElement, CSSResultArray, css} from 'lit'
import {html, LitElement, CSSResultArray, css, PropertyValueMap} from 'lit'
import {customElement, query} from 'lit/decorators.js'
import {sharedStyles} from '../../../components/battery/battery-styles'
@customElement('panel-battery')
export class PanelBattery extends LitElement {
@query('#container') container!: HTMLElement
@query('star-battery') battery!: HTMLElement
render() {
return html`
<div id="container">
<star-battery vertical></star-battery>
</div>
<star-battery charge></star-battery>
<!-- <star-battery deep></star-battery> -->
<!-- <star-battery charge></star-battery> -->
`
}
protected firstUpdated(
_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
): void {
;(window as any).battery = this.battery
}
public static override get styles(): CSSResultArray {
return [
sharedStyles,