78 lines
1.6 KiB
JavaScript
78 lines
1.6 KiB
JavaScript
|
import { html, css, Component } from 'wkit'
|
||
|
|
import { watch } from 'wkitd'
|
||
|
|
|
||
|
|
class List extends Component {
|
||
|
|
static props = {
|
||
|
|
list: []
|
||
|
|
}
|
||
|
|
|
||
|
|
static styles = [
|
||
|
|
css`
|
||
|
|
.list {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
display: flex;
|
||
|
|
gap: 12px;
|
||
|
|
width: 50%;
|
||
|
|
height: 96px;
|
||
|
|
padding: 16px 16px 16px 0;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
display: block;
|
||
|
|
width: 64px;
|
||
|
|
height: 64px;
|
||
|
|
border: 0;
|
||
|
|
border-radius: 16px;
|
||
|
|
background: var(--color-red-1);
|
||
|
|
}
|
||
|
|
.summary {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 4px 0;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
flex: 2;
|
||
|
|
width: 128px;
|
||
|
|
// height: 32px;
|
||
|
|
border-radius: 6px;
|
||
|
|
background: var(--color-grey-1);
|
||
|
|
}
|
||
|
|
.info {
|
||
|
|
flex: 3;
|
||
|
|
// height: 32px;
|
||
|
|
border-radius: 6px;
|
||
|
|
background: var(--color-plain-2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`
|
||
|
|
]
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return html`
|
||
|
|
<ul class="list">
|
||
|
|
${this.list.map(
|
||
|
|
it => html`
|
||
|
|
<li class="item">
|
||
|
|
<!-- <img src="/assets/img/debian.png" class="icon" /> -->
|
||
|
|
<span class="icon"></span>
|
||
|
|
<summary class="summary">
|
||
|
|
<b class="name"></b>
|
||
|
|
<cite class="info"></cite>
|
||
|
|
</summary>
|
||
|
|
</li>
|
||
|
|
`
|
||
|
|
)}
|
||
|
|
</ul>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
List.reg('list')
|