110 lines
2.2 KiB
JavaScript
110 lines
2.2 KiB
JavaScript
|
/**
|
||
|
|
* {}
|
||
|
|
* @author yutent<yutent.io@gmail.com>
|
||
|
|
* @date 2023/12/19 16:53:27
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { html, css, Component, bind } from 'wkit'
|
||
|
|
import { watch } from 'wkitd'
|
||
|
|
|
||
|
|
class Power extends Component {
|
||
|
|
static animation = {}
|
||
|
|
|
||
|
|
static styles = [
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: flex;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
z-index: 2;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--color-plain-2);
|
||
|
|
background: rgba(0, 0, 0, 0.53);
|
||
|
|
backdrop-filter: blur(6px);
|
||
|
|
-webkit-user-select: none;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
menu,
|
||
|
|
li {
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu {
|
||
|
|
display: flex;
|
||
|
|
width: auto;
|
||
|
|
height: 160px;
|
||
|
|
padding: 32px;
|
||
|
|
gap: 16px;
|
||
|
|
border-radius: 8px;
|
||
|
|
background: #39404fdd;
|
||
|
|
box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
|
||
|
|
|
||
|
|
.item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
gap: 12px;
|
||
|
|
width: 96px;
|
||
|
|
height: 88px;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 12px;
|
||
|
|
background: var(--color-dark-1);
|
||
|
|
transition: background 0.2s ease-in-out;
|
||
|
|
|
||
|
|
&.active,
|
||
|
|
&:hover {
|
||
|
|
background: #a3be8c;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`
|
||
|
|
]
|
||
|
|
|
||
|
|
#hide(ev) {
|
||
|
|
this.$store.powerAppShow = false
|
||
|
|
}
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
watch('$store.powerAppShow', v => {
|
||
|
|
this.$animate(!v)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return html`
|
||
|
|
<main class="container" @click.self=${this.#hide}>
|
||
|
|
<menu class="menu">
|
||
|
|
<li class="item active">
|
||
|
|
<wc-icon name="lock"></wc-icon>
|
||
|
|
<span>锁屏</span>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="item">
|
||
|
|
<wc-icon name="user"></wc-icon>
|
||
|
|
<span>登录</span>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="item">
|
||
|
|
<wc-icon name="switch"></wc-icon>
|
||
|
|
<span>注销登录</span>
|
||
|
|
</li>
|
||
|
|
</menu>
|
||
|
|
</main>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Power.reg('power')
|