update
parent
67bbe59f5c
commit
f725cf74a8
|
|
@ -19,15 +19,17 @@ import router from './router.js'
|
|||
import store from './store.js'
|
||||
import fetch from '/lib/fetch.js'
|
||||
|
||||
import './components/header.js'
|
||||
import './components/footer.js'
|
||||
import './components/dock.js'
|
||||
import './components/topbar.js'
|
||||
import './components/about.js'
|
||||
|
||||
const app = createApp({
|
||||
render() {
|
||||
return html`
|
||||
<wc-header></wc-header>
|
||||
<wc-topbar></wc-topbar>
|
||||
<div class="main-body"><router-view></router-view></div>
|
||||
<wc-footer></wc-footer>
|
||||
<wc-dock></wc-dock>
|
||||
<wc-about></wc-about>
|
||||
`
|
||||
},
|
||||
|
||||
|
|
@ -35,8 +37,37 @@ const app = createApp({
|
|||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: radial-gradient(ellipse, var(--color-red-a), transparent),
|
||||
radial-gradient(ellipse at bottom, var(--color-teal-a), transparent),
|
||||
linear-gradient(
|
||||
160deg,
|
||||
var(--color-blue-a),
|
||||
rgba(255, 255, 255, 0.3),
|
||||
var(--color-blue-1)
|
||||
);
|
||||
}
|
||||
:host::before,
|
||||
:host::after {
|
||||
position: fixed;
|
||||
bottom: -100px;
|
||||
display: block;
|
||||
width: 1280px;
|
||||
height: 480px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
content: '';
|
||||
}
|
||||
:host::before {
|
||||
left: -256px;
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
:host::after {
|
||||
right: -144px;
|
||||
bottom: -160px;
|
||||
width: 960px;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
.main-body {
|
||||
flex: 1;
|
||||
|
|
@ -65,4 +96,4 @@ const app = createApp({
|
|||
}
|
||||
})
|
||||
|
||||
app.use(router).use(store).mount('.app')
|
||||
app.use(router).use(store).mount()
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.4 KiB |
|
|
@ -0,0 +1,84 @@
|
|||
/**
|
||||
* {}
|
||||
* @author yutent<yutent.io@gmail.com>
|
||||
* @date 2023/12/19 16:53:27
|
||||
*/
|
||||
|
||||
import { html, css, Component } from 'wkit'
|
||||
|
||||
import './titlebar.js'
|
||||
|
||||
class About extends Component {
|
||||
static styles = [
|
||||
css`
|
||||
:host {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 2;
|
||||
width: 800px;
|
||||
height: 640px;
|
||||
font-size: 14px;
|
||||
color: var(--color-dark-1);
|
||||
transform: translate(-50%, -50%);
|
||||
-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.75);
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
`,
|
||||
css`
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32px 64px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font: 64px/2 'Sol Thin';
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color-blue-1);
|
||||
}
|
||||
`
|
||||
]
|
||||
|
||||
#date = new Date().format('m月d日 H:i')
|
||||
|
||||
mounted() {}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<main class="container">
|
||||
<wc-titlebar></wc-titlebar>
|
||||
<div class="content">
|
||||
<header class="name">APP STORE</header>
|
||||
<cite>v1.0.0</cite>
|
||||
<mark>dd</mark>
|
||||
|
||||
<footer>
|
||||
© Powered By yutent, with
|
||||
<a href="https://git.wkit.fun/bytedo/wkitd" target="_blank"
|
||||
>wkitd</a
|
||||
>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
About.reg('about')
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
/**
|
||||
* {}
|
||||
* @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')
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
/**
|
||||
* {}
|
||||
* @author yutent<yutent.io@gmail.com>
|
||||
* @date 2023/12/19 16:53:27
|
||||
*/
|
||||
|
||||
import { html, css, Component } from 'wkit'
|
||||
|
||||
class Titlebar extends Component {
|
||||
static styles = css`
|
||||
:host {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
}
|
||||
.titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
color: var(--color-dark-1);
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-red-1);
|
||||
cursor: pointer;
|
||||
|
||||
&:nth-child(2) {
|
||||
background: var(--color-orange-1);
|
||||
}
|
||||
&:nth-child(3) {
|
||||
background: var(--color-green-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
#handleClick(ev) {
|
||||
if (ev.currentTarget === ev.target) {
|
||||
return
|
||||
}
|
||||
let { act } = ev.target.dataset
|
||||
|
||||
this.$emit(act)
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="titlebar">
|
||||
<section class="btns" @click=${this.#handleClick}>
|
||||
<i data-act="close"></i><i data-act="minimize"></i
|
||||
><i data-act="maximize"></i>
|
||||
</section>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
Titlebar.reg('titlebar')
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
/**
|
||||
* {}
|
||||
* @author yutent<yutent.io@gmail.com>
|
||||
* @date 2023/12/19 16:53:27
|
||||
*/
|
||||
|
||||
import { html, css, Component } from 'wkit'
|
||||
|
||||
class Topbar extends Component {
|
||||
static styles = [
|
||||
css`
|
||||
:host {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
width: 100vw;
|
||||
height: 28px;
|
||||
font-size: 14px;
|
||||
color: var(--color-dark-1);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.left,
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.center {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.right {
|
||||
justify-content: end;
|
||||
|
||||
--wc-icon-size: 16px;
|
||||
}
|
||||
`,
|
||||
css`
|
||||
.logo {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
`
|
||||
]
|
||||
|
||||
#date = new Date().format('m月d日 H:i')
|
||||
|
||||
mounted() {}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="container">
|
||||
<div class="left">
|
||||
<img src="/assets/img/deb.svg" class="logo" />
|
||||
</div>
|
||||
<div class="center">${this.#date}</div>
|
||||
<div class="right">
|
||||
<wc-icon name="switch"></wc-icon>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
Topbar.reg('topbar')
|
||||
|
|
@ -3,7 +3,6 @@ import { createRouter, createWebHistory } from 'wkitd'
|
|||
import './views/home.js'
|
||||
import './views/detail.js'
|
||||
import './views/login.js'
|
||||
import './views/about.js'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
|
|
@ -12,10 +11,6 @@ const router = createRouter({
|
|||
path: '/',
|
||||
name: 'wc-home'
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'wc-about'
|
||||
},
|
||||
{
|
||||
path: '/view/:id',
|
||||
name: 'wc-detail'
|
||||
|
|
|
|||
Loading…
Reference in New Issue