62 lines
1.0 KiB
JavaScript
62 lines
1.0 KiB
JavaScript
|
/**
|
||
|
|
* {}
|
||
|
|
* @author yutent<yutent.io@gmail.com>
|
||
|
|
* @date 2023/12/19 16:53:27
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { html, css, Component } from 'wkit'
|
||
|
|
|
||
|
|
class Slider extends Component {
|
||
|
|
static styles = [
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
height: 256px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
li {
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
css`
|
||
|
|
.list {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 16px;
|
||
|
|
background: var(--color-blue-1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`
|
||
|
|
]
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return html`
|
||
|
|
<main class="container">
|
||
|
|
<ul class="list">
|
||
|
|
<li class="item"></li>
|
||
|
|
<li class="item"></li>
|
||
|
|
<li class="item"></li>
|
||
|
|
</ul>
|
||
|
|
</main>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Slider.reg('slider')
|