appstore/dist/components/about.js

112 lines
2.6 KiB
JavaScript

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