TASK:#112052-修改代码
This commit is contained in:
wangguoqing
parent
0f3d2a9ca8
commit
181d1ece54
|
|
@ -74,125 +74,76 @@ export const sharedStyles: CSSResult = css`
|
|||
height: 24px;
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
animation: flying 5s ease-in infinite;
|
||||
animation: flying 10s ease-in infinite;
|
||||
}
|
||||
|
||||
@keyframes flying {
|
||||
0% {
|
||||
left: 0%;
|
||||
transform: translate3d(0px);
|
||||
}
|
||||
15% {
|
||||
transform: translate3d(30px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
25% {
|
||||
transform: translate3d(50px);
|
||||
}
|
||||
35% {
|
||||
transform: translate3d(70px);
|
||||
}
|
||||
45% {
|
||||
transform: translate3d(90px);
|
||||
transform: translateY(25px);
|
||||
}
|
||||
50% {
|
||||
transform: translate3d(100px);
|
||||
transform: translateY(75px);
|
||||
}
|
||||
75% {
|
||||
transform: translate3d(-150px);
|
||||
transform: translateY(-25px);
|
||||
}
|
||||
88% {
|
||||
transform: translateY(-38px);
|
||||
}
|
||||
100% {
|
||||
left: 90%;
|
||||
transform: translate3d(-200px);
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
}
|
||||
|
||||
.bubbles:nth-child(1) {
|
||||
animation-duration: 5s;
|
||||
animation-duration: 8s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.bubbles:nth-child(2) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: 10%;
|
||||
animation-duration: 4s;
|
||||
animation-delay: 3s;
|
||||
animation-duration: 8s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
.bubbles:nth-child(3) {
|
||||
top: 20%;
|
||||
animation-duration: 4s;
|
||||
animation-duration: 5s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
.bubbles:nth-child(4) {
|
||||
animation-duration: 3s;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
animation-duration: 6s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.bubbles:nth-child(5) {
|
||||
top: 40%;
|
||||
animation-duration: 3s;
|
||||
animation-duration: 7s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
.bubbles:nth-child(6) {
|
||||
top: 80%;
|
||||
animation-duration: 3s;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
animation-duration: 6s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
.bubbles:nth-child(7) {
|
||||
animation-duration: 4s;
|
||||
animation-delay: 3s;
|
||||
top: 40%;
|
||||
animation-duration: 9s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
.bubbles:nth-child(8) {
|
||||
bottom: 0%;
|
||||
animation-duration: 4s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
.bubbles:nth-child(9) {
|
||||
top: 60%;
|
||||
animation-duration: 5s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
.bubbles:nth-child(11) {
|
||||
animation-duration: 3s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.bubbles:nth-child(12) {
|
||||
top: 10%;
|
||||
animation-duration: 3s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
.bubbles:nth-child(13) {
|
||||
top: 20%;
|
||||
animation-duration: 3s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
.bubbles:nth-child(14) {
|
||||
animation-duration: 3s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.bubbles:nth-child(15) {
|
||||
top: 40%;
|
||||
animation-duration: 4s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
.bubbles:nth-child(16) {
|
||||
top: 80%;
|
||||
animation-duration: 3s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
.bubbles:nth-child(17) {
|
||||
animation-duration: 4s;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
.bubbles:nth-child(18) {
|
||||
bottom: 0%;
|
||||
animation-duration: 4s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
.bubbles:nth-child(19) {
|
||||
top: 60%;
|
||||
animation-duration: 3s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
.bubbles:nth-child(20) {
|
||||
top: 60%;
|
||||
animation-duration: 1s;
|
||||
bottom: 90%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
animation-duration: 9s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
|
|
@ -213,6 +164,21 @@ export const sharedStyles: CSSResult = css`
|
|||
top: -215px;
|
||||
}
|
||||
|
||||
.mini {
|
||||
position: absolute;
|
||||
top: 430px;
|
||||
}
|
||||
|
||||
.small {
|
||||
position: absolute;
|
||||
top: 530px;
|
||||
}
|
||||
|
||||
.medium {
|
||||
position: absolute;
|
||||
top: 670px;
|
||||
}
|
||||
|
||||
/*深色模式*/
|
||||
:host([deep]) .container {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -247,4 +213,74 @@ export const sharedStyles: CSSResult = css`
|
|||
:host([vertical]) .lightning {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/*不同大小*/
|
||||
:host([mini]) .container {
|
||||
width: 113px;
|
||||
height: 40px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
:host([mini]) .power {
|
||||
border-radius: 15px 0px 0px 15px;
|
||||
}
|
||||
:host([mini]) .number {
|
||||
font-size: 12.5px;
|
||||
left: 13.5px;
|
||||
}
|
||||
:host([mini]) .percent {
|
||||
left: 24px;
|
||||
font-size: 6.5px;
|
||||
line-height: 6.5px;
|
||||
}
|
||||
:host([mini]) .lightning {
|
||||
right: 9.315px;
|
||||
width: 8.435px;
|
||||
height: 9.315px;
|
||||
}
|
||||
|
||||
:host([small]) .container {
|
||||
width: 226px;
|
||||
height: 80px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
:host([small]) .power {
|
||||
border-radius: 15px 0px 0px 15px;
|
||||
}
|
||||
:host([small]) .number {
|
||||
font-size: 25px;
|
||||
left: 17px;
|
||||
}
|
||||
:host([small]) .percent {
|
||||
left: 48px;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
}
|
||||
:host([small]) .lightning {
|
||||
right: 18.63px;
|
||||
width: 16.87px;
|
||||
height: 18.63px;
|
||||
}
|
||||
|
||||
:host([medium]) .container {
|
||||
width: 339px;
|
||||
height: 120px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
:host([medium]) .power {
|
||||
border-radius: 15px 0px 0px 15px;
|
||||
}
|
||||
:host([medium]) .number {
|
||||
font-size: 38px;
|
||||
left: 26px;
|
||||
}
|
||||
:host([medium]) .percent {
|
||||
left: 72px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
:host([medium]) .lightning {
|
||||
right: 28px;
|
||||
width: 25.3px;
|
||||
height: 28px;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -7,13 +7,18 @@ export class StarBattery extends LitElement {
|
|||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
|
||||
@property({type: String}) number = '78'
|
||||
|
||||
@property({type: Boolean}) deep = false
|
||||
|
||||
@property({type: Boolean}) charge = false
|
||||
|
||||
@property({type: Boolean}) mini = false
|
||||
|
||||
@property({type: Boolean}) small = false
|
||||
|
||||
@property({type: Boolean}) medium = false
|
||||
|
||||
@query('.power') _power: any
|
||||
|
||||
@property({type: Boolean}) vertical = false
|
||||
|
|
|
|||
|
|
@ -14,6 +14,9 @@ export class PanelBattery extends LitElement {
|
|||
<star-battery vertical deep class="location"></star-battery>
|
||||
<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="small" small></star-battery>
|
||||
<star-battery class="medium" medium></star-battery>
|
||||
`
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue