100 lines
2.1 KiB
JavaScript
100 lines
2.1 KiB
JavaScript
|
/**
|
||
|
|
* {}
|
||
|
|
* @author yutent<yutent.io@gmail.com>
|
||
|
|
* @date 2023/12/19 16:53:27
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { html, css, Component } from 'wkit'
|
||
|
|
|
||
|
|
class Dock extends Component {
|
||
|
|
static styles = [
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: flex;
|
||
|
|
position: fixed;
|
||
|
|
left: 8px;
|
||
|
|
top: 50%;
|
||
|
|
z-index: 2;
|
||
|
|
width: 72px;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
width: 72px;
|
||
|
|
min-height: 256px;
|
||
|
|
gap: 12px;
|
||
|
|
padding: 12px;
|
||
|
|
border-radius: 16px;
|
||
|
|
background: rgba(255, 255, 255, 0.5);
|
||
|
|
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
css`
|
||
|
|
.apps {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
width: 48px;
|
||
|
|
gap: 12px;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
width: 48px;
|
||
|
|
height: 48px;
|
||
|
|
border-radius: 12px;
|
||
|
|
background: var(--color-blue-1);
|
||
|
|
transition: transform 0.2s ease-in-out;
|
||
|
|
|
||
|
|
&:nth-child(2) {
|
||
|
|
background: var(--color-teal-1);
|
||
|
|
}
|
||
|
|
&:nth-child(3) {
|
||
|
|
background: var(--color-red-1);
|
||
|
|
}
|
||
|
|
&:nth-child(4) {
|
||
|
|
background: var(--color-dark-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
transform: scale(1.2) translateX(10%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.pipe {
|
||
|
|
width: 32px;
|
||
|
|
height: 1px;
|
||
|
|
background: var(--color-plain-3);
|
||
|
|
}
|
||
|
|
.dashboard,
|
||
|
|
.trash {
|
||
|
|
width: 48px;
|
||
|
|
height: 48px;
|
||
|
|
border-radius: 12px;
|
||
|
|
background: var(--color-plain-3);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
]
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return html`
|
||
|
|
<div class="container">
|
||
|
|
<span class="dashboard"></span>
|
||
|
|
<mark class="pipe"></mark>
|
||
|
|
<nav class="apps">
|
||
|
|
<a class="item"></a>
|
||
|
|
<a class="item"></a>
|
||
|
|
<a class="item"></a>
|
||
|
|
<a class="item"></a>
|
||
|
|
</nav>
|
||
|
|
<mark class="pipe"></mark>
|
||
|
|
<span class="trash"></span>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Dock.reg('dock')
|