2023-12-19 18:53:48 +08:00
|
|
|
/**
|
|
|
|
|
* {}
|
|
|
|
|
* @author yutent<yutent.io@gmail.com>
|
|
|
|
|
* @date 2023/12/19 16:53:27
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
import { html, css, Component } from 'wkit'
|
2023-12-20 19:06:35 +08:00
|
|
|
import { watch } from 'wkitd'
|
2023-12-19 18:53:48 +08:00
|
|
|
|
|
|
|
|
import './titlebar.js'
|
|
|
|
|
|
|
|
|
|
class About extends Component {
|
2023-12-20 19:06:35 +08:00
|
|
|
static animation = { type: 'scale' }
|
|
|
|
|
|
2023-12-19 18:53:48 +08:00
|
|
|
static styles = [
|
|
|
|
|
css`
|
|
|
|
|
:host {
|
|
|
|
|
display: flex;
|
|
|
|
|
position: fixed;
|
2023-12-20 19:06:35 +08:00
|
|
|
left: calc(50vw - 360px);
|
|
|
|
|
top: calc(50vh - 280px);
|
2023-12-19 18:53:48 +08:00
|
|
|
z-index: 2;
|
2023-12-20 19:06:35 +08:00
|
|
|
width: 720px;
|
|
|
|
|
height: 560px;
|
2023-12-19 18:53:48 +08:00
|
|
|
font-size: 14px;
|
|
|
|
|
color: var(--color-dark-1);
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border-radius: 8px;
|
2023-12-20 19:06:35 +08:00
|
|
|
background: rgba(255, 255, 255, 0.93);
|
2023-12-19 18:53:48 +08:00
|
|
|
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
|
2023-12-21 13:59:15 +08:00
|
|
|
backdrop-filter: blur(6px);
|
2023-12-19 18:53:48 +08:00
|
|
|
}
|
|
|
|
|
`,
|
|
|
|
|
css`
|
|
|
|
|
.content {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
2023-12-20 19:06:35 +08:00
|
|
|
gap: 12px;
|
2023-12-19 18:53:48 +08:00
|
|
|
padding: 32px 64px;
|
2023-12-20 19:06:35 +08:00
|
|
|
line-height: 1.5;
|
2023-12-19 18:53:48 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
font: 64px/2 'Sol Thin';
|
|
|
|
|
}
|
|
|
|
|
a {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: var(--color-blue-1);
|
|
|
|
|
}
|
2023-12-20 19:06:35 +08:00
|
|
|
summary {
|
|
|
|
|
text-indent: 2em;
|
|
|
|
|
}
|
|
|
|
|
.holder {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
2023-12-19 18:53:48 +08:00
|
|
|
`
|
|
|
|
|
]
|
|
|
|
|
|
2023-12-20 19:06:35 +08:00
|
|
|
#hide() {
|
|
|
|
|
this.$store.aboutAppShow = false
|
|
|
|
|
}
|
2023-12-19 18:53:48 +08:00
|
|
|
|
2023-12-20 19:06:35 +08:00
|
|
|
mounted() {
|
|
|
|
|
watch('$store.aboutAppShow', v => {
|
|
|
|
|
this.$animate(!v)
|
|
|
|
|
})
|
|
|
|
|
}
|
2023-12-19 18:53:48 +08:00
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
return html`
|
|
|
|
|
<main class="container">
|
2023-12-20 19:06:35 +08:00
|
|
|
<wc-titlebar
|
|
|
|
|
minimize
|
|
|
|
|
@close=${this.#hide}
|
|
|
|
|
@minimize=${this.#hide}
|
|
|
|
|
></wc-titlebar>
|
2023-12-19 18:53:48 +08:00
|
|
|
<div class="content">
|
|
|
|
|
<header class="name">APP STORE</header>
|
|
|
|
|
<cite>v1.0.0</cite>
|
2023-12-20 19:06:35 +08:00
|
|
|
<summary>
|
|
|
|
|
Linux在线应用商店, 是一个应用分享平台, 每个人都可以提交应用信息,
|
|
|
|
|
并分享使用体验。本平台并不支持在线安装到本地,
|
|
|
|
|
仅提供应用的基本信息、使用体验, 以及官方的安装方法,
|
|
|
|
|
不保证该软件能适配所有的发行版或某个发行版的所有版本,
|
|
|
|
|
具体请参考官方说明, 或分享者自己的发行版信息。
|
|
|
|
|
</summary>
|
|
|
|
|
<span class="holder"></span>
|
2023-12-19 18:53:48 +08:00
|
|
|
<footer>
|
|
|
|
|
© Powered By yutent, with
|
|
|
|
|
<a href="https://git.wkit.fun/bytedo/wkitd" target="_blank"
|
|
|
|
|
>wkitd</a
|
|
|
|
|
>
|
|
|
|
|
</footer>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
`
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
About.reg('about')
|
