diff --git a/dist/app.js b/dist/app.js index ff740ac..017c617 100644 --- a/dist/app.js +++ b/dist/app.js @@ -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` - +
- + + ` }, @@ -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() diff --git a/dist/assets/img/deb.svg b/dist/assets/img/deb.svg new file mode 100644 index 0000000..e8e798f --- /dev/null +++ b/dist/assets/img/deb.svg @@ -0,0 +1,3 @@ + + + diff --git a/dist/components/about.js b/dist/components/about.js new file mode 100644 index 0000000..91d62e1 --- /dev/null +++ b/dist/components/about.js @@ -0,0 +1,84 @@ +/** + * {} + * @author yutent + * @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` +
+ +
+
APP STORE
+ v1.0.0 + dd + +
+ © Powered By yutent, with + wkitd +
+
+
+ ` + } +} + +About.reg('about') diff --git a/dist/components/dock.js b/dist/components/dock.js new file mode 100644 index 0000000..e64698a --- /dev/null +++ b/dist/components/dock.js @@ -0,0 +1,99 @@ +/** + * {} + * @author yutent + * @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` +
+ + + + + +
+ ` + } +} + +Dock.reg('dock') diff --git a/dist/components/header.js b/dist/components/header.js deleted file mode 100644 index e69de29..0000000 diff --git a/dist/components/titlebar.js b/dist/components/titlebar.js new file mode 100644 index 0000000..72ba5c6 --- /dev/null +++ b/dist/components/titlebar.js @@ -0,0 +1,69 @@ +/** + * {} + * @author yutent + * @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` +
+
+ +
+
+ ` + } +} + +Titlebar.reg('titlebar') diff --git a/dist/components/topbar.js b/dist/components/topbar.js new file mode 100644 index 0000000..c9b86bf --- /dev/null +++ b/dist/components/topbar.js @@ -0,0 +1,77 @@ +/** + * {} + * @author yutent + * @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` +
+
+ +
+
${this.#date}
+
+ +
+
+ ` + } +} + +Topbar.reg('topbar') diff --git a/dist/router.js b/dist/router.js index c09a2cb..eaa64b7 100644 --- a/dist/router.js +++ b/dist/router.js @@ -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' diff --git a/dist/views/about.js b/dist/views/about.js deleted file mode 100644 index e69de29..0000000