实现组件随容器自适应
This commit is contained in:
parent
8e9184300f
commit
782b7f6dff
|
@ -1,12 +1,13 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
export const sharedStyles: CSSResult = css`
|
||||
.holder {
|
||||
position: relative;
|
||||
width: var(--battery-width, 100%);
|
||||
height: 0;
|
||||
padding: 0;
|
||||
padding-bottom: 35.4%;
|
||||
}
|
||||
// .holder {
|
||||
// position: relative;
|
||||
// width: var(--battery-width, 100%);
|
||||
// height: 0;
|
||||
// padding: 0;
|
||||
// padding-bottom: 35.4%;
|
||||
// }
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
|
|
|
@ -92,14 +92,12 @@ export class StarBattery extends LitElement {
|
|||
|
||||
render() {
|
||||
return html`
|
||||
<div class="holder">
|
||||
<div class="container">
|
||||
<div class="power"></div>
|
||||
<span class="number">${Math.round(this.percent)}</span>
|
||||
<span class="percent">%</span>
|
||||
<img src="${lightning}" class="lightning" />
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue