master
parent
e6d70956d7
commit
231dbbc8f2
|
|
@ -8,6 +8,8 @@ import { createApp } from 'wkitd'
|
||||||
import { css, html } from 'wkit'
|
import { css, html } from 'wkit'
|
||||||
|
|
||||||
import 'es.shim'
|
import 'es.shim'
|
||||||
|
|
||||||
|
import Icon from '@ui/base/icon.js'
|
||||||
import '@ui/base/button.js'
|
import '@ui/base/button.js'
|
||||||
import '@ui/base/link.js'
|
import '@ui/base/link.js'
|
||||||
import '@ui/form/input.js'
|
import '@ui/form/input.js'
|
||||||
|
|
@ -15,6 +17,8 @@ import '@ui/form/switch.js'
|
||||||
import '@ui/modal/layer.js'
|
import '@ui/modal/layer.js'
|
||||||
import '@ui/nav/pager.js'
|
import '@ui/nav/pager.js'
|
||||||
|
|
||||||
|
import extIcons from '/lib/ext-icon.js'
|
||||||
|
|
||||||
import router from './router.js'
|
import router from './router.js'
|
||||||
import store from './store.js'
|
import store from './store.js'
|
||||||
import fetch from '/lib/fetch.js'
|
import fetch from '/lib/fetch.js'
|
||||||
|
|
@ -23,6 +27,8 @@ import './components/dock.js'
|
||||||
import './components/topbar.js'
|
import './components/topbar.js'
|
||||||
import './components/about.js'
|
import './components/about.js'
|
||||||
|
|
||||||
|
Icon.extend(extIcons)
|
||||||
|
|
||||||
const app = createApp({
|
const app = createApp({
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,7 @@ class About extends Component {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: rgba(255, 255, 255, 0.93);
|
background: rgba(255, 255, 255, 0.93);
|
||||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
css`
|
css`
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
import { html, css, Component } from 'wkit'
|
||||||
|
import { watch } from 'wkitd'
|
||||||
|
|
||||||
|
class Aside extends Component {
|
||||||
|
static styles = [
|
||||||
|
css`
|
||||||
|
.searchbar {
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
padding: 0 16px;
|
||||||
|
line-height: 1;
|
||||||
|
border: 1px solid var(--color-grey-1);
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
font-size: 12px;
|
||||||
|
color: inherit;
|
||||||
|
outline: none;
|
||||||
|
transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: var(--color-grey-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.category {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
margin-top: 16px;
|
||||||
|
padding-left: 16px;
|
||||||
|
list-style: none;
|
||||||
|
--wc-icon-size: 16px;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 36px;
|
||||||
|
padding: 0 16px;
|
||||||
|
gap: 4px;
|
||||||
|
border-radius: 8px 0 0 8px;
|
||||||
|
list-style: none;
|
||||||
|
transition: background 0.2s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: -12px;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: url(/assets/img/round.webp);
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
top: unset;
|
||||||
|
bottom: -12px;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
]
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<aside class="container">
|
||||||
|
<search class="searchbar">
|
||||||
|
<input placeholder="搜索应用" />
|
||||||
|
</search>
|
||||||
|
|
||||||
|
<menu class="category">
|
||||||
|
<li class="item active"><wc-icon name="home"></wc-icon>装机必备</li>
|
||||||
|
${this.$store.categories
|
||||||
|
.slice(0, 3)
|
||||||
|
.map(
|
||||||
|
it => html`
|
||||||
|
<li class="item">
|
||||||
|
<wc-icon name=${it.icon}></wc-icon>${it.name}
|
||||||
|
</li>
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
<li class="item"><wc-icon name="menu"></wc-icon>全部分类</li>
|
||||||
|
</menu>
|
||||||
|
</aside>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Aside.reg('aside')
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
import { html, css, Component } from 'wkit'
|
||||||
|
import { watch } from 'wkitd'
|
||||||
|
|
||||||
|
class List extends Component {
|
||||||
|
static props = {
|
||||||
|
list: []
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = [
|
||||||
|
css`
|
||||||
|
.list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
width: 50%;
|
||||||
|
height: 96px;
|
||||||
|
padding: 16px 16px 16px 0;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: block;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: var(--color-red-1);
|
||||||
|
}
|
||||||
|
.summary {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 4px 0;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
flex: 2;
|
||||||
|
width: 128px;
|
||||||
|
// height: 32px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--color-grey-1);
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
flex: 3;
|
||||||
|
// height: 32px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--color-plain-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
]
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<ul class="list">
|
||||||
|
${this.list.map(
|
||||||
|
it => html`
|
||||||
|
<li class="item">
|
||||||
|
<!-- <img src="/assets/img/debian.png" class="icon" /> -->
|
||||||
|
<span class="icon"></span>
|
||||||
|
<summary class="summary">
|
||||||
|
<b class="name"></b>
|
||||||
|
<cite class="info"></cite>
|
||||||
|
</summary>
|
||||||
|
</li>
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
List.reg('list')
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
export default {
|
||||||
|
safe: 'M818.3809525 174.5c0 0-51.42857168 0-135-32.14285752-90-32.14285752-144.64285752-67.5-144.64285752-67.5L513.02380914 62 490.52380914 74.85714248c0 0-57.85714248 35.35714248-144.64285751 67.5-86.78571416 28.92857168-135 32.14285752-135 32.14285752L169.09523834 177.71428584l0 443.57142832C169.09523834 785.21428584 474.45238082 962 513.02380914 962c35.35714248 0 343.92857168-176.78571416 343.92857168-340.71428584l0-443.57142832L818.3809525 174.5zM490.52380914 685.57142832l-160.71428584-147.85714248 48.21428584-61.07142832 102.85714248 93.21428584 192.85714248-241.07142833 57.85714248 54.64285753L490.52380914 685.57142832 490.52380914 685.57142832z',
|
||||||
|
game: 'M355.25597906 362.77666688c-39.69 0-70.56000021 30.87000021-70.56000023 70.56000022s30.87000021 70.56000021 70.56000023 70.55999924 70.56000021-30.87000021 70.5600002-70.55999924-33.07499968-70.56000021-70.5600002-70.5600002z M692.62097904 219.45166699c-130.09500023 63.94499989-216.08999957 57.32999957-350.59500064 0-235.93499957 0-370.43999969 624.01499977-194.03999914 624.01499979 149.94000021 0 169.78500021-183.01499989 372.64499914-183.0149999 165.37500032 0 262.39499989 180.81000043 372.64500011 180.80999947 171.98999969 0-6.61500032-621.81000031-200.65499945-621.80999936z m-337.365 330.74999967c-63.94499989 0-114.66000011-50.71500023-114.6600001-114.6600001s50.71500023-114.66000011 114.6600001-114.6600001 114.66000011 50.71500023 114.66000011 114.6600001-52.91999967 114.66000011-114.66000011 114.6600001z m262.3949999-108.04499976c-17.63999957-4.40999989-26.46000031-22.05000043-19.845-39.69 4.40999989-15.43500011 22.05000043-26.46000031 39.69-19.845 17.63999957 4.40999989 26.46000031 22.05000043 19.845 39.69-4.40999989 15.43500011-22.05000043 24.25499989-39.69 19.845z m77.17499957 48.50999977c-4.40999989 15.43500011-22.05000043 26.46000031-39.69 19.84499999-17.63999957-4.40999989-26.46000031-22.05000043-19.845-39.69 4.40999989-15.43500011 22.05000043-26.46000031 39.69-19.84499999 15.43500011 6.61500032 26.46000031 24.25499989 19.845 39.69z m4.40999989-74.97000011c-17.63999957-4.40999989-26.46000031-22.05000043-19.845-39.69 4.40999989-15.43500011 22.05000043-26.46000031 39.69-19.845 17.63999957 4.40999989 26.46000031 22.05000043 19.845 39.69-6.61500032 15.43500011-24.25499989 24.25499989-39.69 19.845z m79.38 52.91999968c-4.40999989 15.43500011-22.05000043 26.46000031-39.69 19.845-17.63999957-4.40999989-26.46000031-22.05000043-19.845-39.69 4.40999989-15.43500011 22.05000043-26.46000031 39.69-19.845 15.43500011 4.40999989 24.25499989 22.05000043 19.845 39.69z',
|
||||||
|
music:
|
||||||
|
'M885.333333 256H138.666667a53.393333 53.393333 0 0 0-53.333334 53.333333v576a53.393333 53.393333 0 0 0 53.333334 53.333334h746.666666a53.393333 53.393333 0 0 0 53.333334-53.333334V309.333333a53.393333 53.393333 0 0 0-53.333334-53.333333zM624.84 596.42a21.333333 21.333333 0 0 1-26.593333-14.246667C593.333333 566 586.18 552 577.513333 541.8a64.24 64.24 0 0 0-13.333333-12 21.473333 21.473333 0 0 1-2.953333-2.366667q-3.38-3.233333-6.586667-6.813333V725.333333c0 23.626667-12.22 46.34-33.526667 62.32C501.333333 802.493333 475.38 810.666667 448 810.666667s-53.333333-8.173333-73.14-23.013334c-21.333333-16-33.526667-38.666667-33.526667-62.32s12.22-46.34 33.526667-62.32C394.666667 648.173333 420.62 640 448 640c23.333333 0 45.666667 5.946667 64 16.893333V405.333333a21.333333 21.333333 0 0 1 20.773333-21.333333h0.56a21.333333 21.333333 0 0 1 21.333334 20.22c0.74 14.14 3.52 35.473333 12.553333 56.78 5.833333 13.753333 13.546667 25.613333 22.36 34.42a107.46 107.46 0 0 1 20.493333 18.78c12.6 14.853333 22.373333 33.573333 29.04 55.626667a21.333333 21.333333 0 0 1-14.273333 26.593333zM512 725.333333c0 23.126667-29.333333 42.666667-64 42.666667s-64-19.54-64-42.666667 29.333333-42.666667 64-42.666666 64 19.54 64 42.666666zM170.666667 106.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h640a21.333333 21.333333 0 0 1 0 42.666667H192a21.333333 21.333333 0 0 1-21.333333-21.333333z m-42.666667 85.333333a21.333333 21.333333 0 0 1 21.333333-21.333333h725.333334a21.333333 21.333333 0 0 1 0 42.666666H149.333333a21.333333 21.333333 0 0 1-21.333333-21.333333z',
|
||||||
|
video:
|
||||||
|
'M457.62470703 249.49970703L330.12529297 99.50029297H185.75l127.50029297 149.99941406z m375.00029297 0L705.12470703 99.50029297H560.75029297l127.49941406 149.99941406z m-187.49970703 0L517.625 99.50029297H373.24970703L500.75 249.49970703z m241.875-149.99941406H748.25l127.50029297 149.99941406h67.5V155.75029297c0-31.87529297-24.37558594-56.25-56.25-56.25z m-744.37558594 0h-5.625c-31.87441406 0-56.25 24.37470703-56.25 56.25v93.74941406H270.125L142.62470703 99.50029297z m-61.875 768.74941406c0 31.87529297 24.37558594 56.25 56.25 56.25h750.00058594c31.87441406 0 56.25-24.37470703 56.25-56.25V287H80.74970703v581.24970703zM380.75029297 455.75c0-31.87529297 26.24941406-46.87470703 56.25-46.87470703 9.37441406 0 20.62441406 1.87470703 29.99970703 7.49970703L680.75 540.125c37.50029297 20.62529297 37.50029297 73.125 0 93.75029297l-213.75 123.75c-9.37529297 5.625-18.74970703 7.49970703-29.99970703 7.49970703-30.00058594 0-56.25-15.00029297-56.25-46.87470703V455.75z',
|
||||||
|
zip: 'M404.85714286 465.61904743A53.57142857 53.57142857 0 0 0 378.04761942 512v160.71428571c0 29.57142857 24 53.57142857 53.57142857 53.57142858h26.80952344v32.76190513a47.61904771 47.61904771 0 0 0 47.61904771 47.61904687h11.90476172a47.61904771 47.61904771 0 0 0 47.61904771-47.61904687V726.28571429h26.80952344c29.52380943 0 53.52380943-24 53.52381027-53.57142858V512c0-19.809524-10.76190485-37.14285687-26.76190514-46.38095257V83.42857143h214.28571429A107.14285714 107.14285714 0 0 1 940.57142857 190.57142857v642.85714286A107.14285714 107.14285714 0 0 1 833.42857143 940.57142857H190.57142857A107.14285714 107.14285714 0 0 1 83.42857143 833.42857143V190.57142857A107.14285714 107.14285714 0 0 1 190.57142857 83.42857143h214.28571429zM592.38095201 512v160.71428571h-26.85714258l0.04761914-32.76190513a47.61904771 47.61904771 0 0 0-47.61904771-47.61904687h-11.90476172a47.61904771 47.61904771 0 0 0-47.61904771 47.61904687v32.76190513h-26.80952344V512h160.71428572z m-26.80952344-107.14285714v53.57142857H512V404.85714286h53.57142857zM512 351.28571429V404.85714286H458.42857143V351.28571429H512zM565.57142857 297.71428571v53.57142858H512V297.71428571h53.57142857zM512 244.14285714V297.71428571H458.42857143V244.14285714H512z m53.57142857-53.57142857v53.57142857H512V190.57142857h53.57142857zM512 137V190.57142857H458.42857143V137H512z',
|
||||||
|
cut: 'M646.53333302 464.79999969l-165.6-103.59999938a46.00000031 46.00000031 0 0 0-72.39999938 37.99999969v205.2a45.6 45.6 0 0 0 25.59999938 40.00000031 46.8 46.8 0 0 0 20.80000031 4.8 43.99999969 43.99999969 0 0 0 25.99999969-8.4l163.2-102a46.39999969 46.39999969 0 0 0 0-74.00000062z m-173.59999969 106.8V432.00000031l111.19999969 69.99999938z M923.73333302 792.00000031h-63.19999969V265.59999969a100.00000031 100.00000031 0 0 0-100.00000031-99.99999938H237.33333302V102.8a32.4 32.4 0 1 0-64.39999969 0v62.80000031H108.13333333a32.4 32.4 0 1 0 0 66.39999938h62.80000031v523.2a100.00000031 100.00000031 0 0 0 99.99999938 100.00000031H797.33333364v63.19999969a32.4 32.4 0 0 0 64.39999969 0v-63.19999969h63.19999969a32.4 32.4 0 0 0 0-64.39999969zM797.33333364 792.00000031H270.93333302a35.59999969 35.59999969 0 0 1-33.6-36.80000062V231.99999969h523.2a35.59999969 35.59999969 0 0 1 35.60000062 35.60000062z',
|
||||||
|
net: 'M863.61567382 562.19389618c-66.27919922 55.03886749-153.29487335 104.45756866-255.42685517 141.66694366-98.83740234 36.04658203-194.18642578 54.06987305-278.48891601 55.62026398-1.74418945 0-2.51938446 2.32558594-1.16279297 3.48837891C385.90156219 811.61298798 460.32031219 841.45800812 541.71582001 841.45800812c164.14760712 0 300.00058594-120.34907227 325.00063476-277.51992249 0.19379852-1.74418945-1.74418945-2.90698242-3.10078095-1.74418945zM244.23461944 578.8605957c58.13964844 12.40312469 163.37241211 12.20932617 304.26415985-38.95356445 145.93051758-53.1008786 227.32602539-123.64365265 262.01601593-170.54296844 10.07753876-13.56591766 10.46513672-32.17060516 0.775195-45.93032227C751.7937503 238.35605438 653.34394501 182.54199188 541.71582001 182.54199188 359.7387204 182.54199188 212.2578128 330.02290039 212.2578128 512c0 11.0465332 0.58139648 22.09306641 1.74418945 32.75200165a38.75976593 38.75976593 0 0 0 30.23261719 34.10859405z M939.9724118 283.8987796c-20.34887695-56.20166046-81.78310577-90.50405304-166.47319306-101.9381842-8.72094727-1.16279297-13.17832062 10.2713382-6.00776337 15.31010803 21.70546844 15.50390656 41.66674835 33.33339813 59.88383789 53.29467712 3.48837891 3.87597687 7.94575226 6.97675781 12.59692323 9.30234375 23.06206085 11.24033173 38.95356445 26.1628418 45.34892578 43.79853577 26.74423828 73.25595703-96.89941437 210.65932587-317.05488251 290.69824219s-403.10156219 54.26367157-429.65200196-18.99228546c-7.36435577-20.54267548-3.10078094-45.93032227 11.82172822-73.83735352 2.90698242-5.23256836 4.65117187-11.0465332 5.03876983-17.05429657 1.74418945-25.77524384 6.20156281-50.77529266 12.79072266-75.00014648 2.32558594-8.52714874-8.13955078-14.72871063-14.34111358-8.33335022-63.3722168 65.69780273-91.27924805 135.27158234-69.96137666 193.99262726 42.82954132 117.44208984 264.14780243 141.08554718 504.26455049 53.68227508 239.92294952-87.01567413 394.57441437-247.48110382 351.74487304-364.92319275z',
|
||||||
|
browser:
|
||||||
|
'M917.55636406 378.90909125a426.32727281 426.32727281 0 0 1 21.20727188 133.17818156c0 235.63636406-190.99636406 426.67636406-426.67636313 426.67636313-12.52363594 0-24.91636406-0.52363594-37.17818156-1.57090875l191.7818175-324.65454563c18.72-28.8 29.58545438-63.14181844 29.58545531-100.05818156a183.27272719 183.27272719 0 0 0-57.46909125-133.52727281zM159.85454562 271.30181844l189.68727282 326.4a183.79636406 183.79636406 0 0 0 213.51272718 91.54909031l-141.73090968 239.82545531c-192-41.58545438-335.86909125-212.50909125-335.86909032-416.98909125 0-89.32363594 27.44727281-172.27636406 74.4-240.78545437z m352.58181844 107.60727281a133.57090875 133.57090875 0 0 1 116.68363594 198.67636313l-1.13454563 1.65818156-3.53454562 6.10909125a133.52727281 133.52727281 0 0 1-226.99636313-4.93090875l-0.52363687-1.1781825-2.44363594-4.1018175a133.57090875 133.57090875 0 0 1 117.99272719-196.27636406z m-0.34909125-293.45454563a426.72 426.72 0 0 1 385.30909125 243.18545438h-384.91636406a183.88363594 183.88363594 0 0 0-178.95272719 141.55636406L193.23636406 228.58181844a425.62909125 425.62909125 0 0 1 318.85090875-143.12727281z',
|
||||||
|
im: 'M861.81406249 823.23000001H164.13828124A84.65132813 84.65132813 0 0 1 79.53124999 738.53437501V336.40734376c0-46.73320313 37.918125-84.65132813 84.65132813-84.65132813H861.81406249c46.73320313 0 84.60703125 37.918125 84.60703125 84.65132813v402.12703125a84.65132813 84.65132813 0 0 1-84.60703125 84.695625zM164.13828124 319.48593751a16.92140625 16.92140625 0 0 0-16.92140625 16.92140625v402.12703125c0 9.3909375 7.57476563 16.96570313 16.92140625 16.96570313H861.81406249a16.92140625 16.92140625 0 0 0 16.92140625-16.96570313V336.40734376a16.92140625 16.92140625 0 0 0-16.92140625-16.92140625H164.13828124z M609.49906249 720.77132814H316.56382812a33.8428125 33.8428125 0 1 1 0-67.72992188h292.93523437a33.8428125 33.8428125 0 1 1 0 67.72992188zM214.99109374 653.04140626a33.8428125 33.8428125 0 1 0 33.8428125 33.88710938 33.8428125 33.8428125 0 0 0-33.8428125-33.88710938zM413.08671874 353.32875001a33.8428125 33.8428125 0 1 0 33.88710938 33.88710937 33.8428125 33.8428125 0 0 0-33.88710938-33.88710937z m99.88945313 0a33.8428125 33.8428125 0 1 0 33.88710937 33.88710937 33.8428125 33.8428125 0 0 0-33.88710937-33.88710937z m99.09210937 0a33.8428125 33.8428125 0 1 0 33.8428125 33.88710937 33.8428125 33.8428125 0 0 0-33.8428125-33.88710937z m99.0478125 0a33.8428125 33.8428125 0 1 0 33.8428125 33.88710937 33.8428125 33.8428125 0 0 0-33.8428125-33.88710937z m99.0478125 0a33.8428125 33.8428125 0 1 0 33.8428125 33.88710937 33.8428125 33.8428125 0 0 0-33.8428125-33.88710937zM214.99109374 454.94578126a33.8428125 33.8428125 0 1 0 33.8428125 33.8428125 33.8428125 33.8428125 0 0 0-33.8428125-33.8428125z m99.0478125 0a33.8428125 33.8428125 0 1 0 33.88710938 33.8428125 33.8428125 33.8428125 0 0 0-33.88710938-33.8428125z m99.0478125 0a33.8428125 33.8428125 0 1 0 33.88710938 33.8428125 33.8428125 33.8428125 0 0 0-33.88710938-33.8428125z m99.88945313 0a33.8428125 33.8428125 0 1 0 33.88710937 33.8428125 33.8428125 33.8428125 0 0 0-33.88710937-33.8428125z m99.09210937 0a33.8428125 33.8428125 0 1 0 33.8428125 33.8428125 33.8428125 33.8428125 0 0 0-33.8428125-33.8428125z m99.0478125 0a33.8428125 33.8428125 0 1 0 33.8428125 33.8428125 33.8428125 33.8428125 0 0 0-33.8428125-33.8428125z m0 198.095625a33.8428125 33.8428125 0 1 0 33.8428125 33.88710937 33.8428125 33.8428125 0 0 0-33.8428125-33.88710937z m-496.125-96.52289063a33.8428125 33.8428125 0 1 0 33.8428125 33.88710938 33.8428125 33.8428125 0 0 0-33.8428125-33.88710937z m99.0478125 1e-8a33.8428125 33.8428125 0 1 0 33.88710938 33.88710937 33.8428125 33.8428125 0 0 0-33.88710938-33.88710937z m99.0478125 0a33.8428125 33.8428125 0 1 0 33.88710938 33.88710937 33.8428125 33.8428125 0 0 0-33.88710938-33.88710937z m99.88945313 0a33.8428125 33.8428125 0 1 0 33.88710937 33.88710937 33.8428125 33.8428125 0 0 0-33.88710937-33.88710937z m298.029375 96.56718749a33.8428125 33.8428125 0 1 0 33.8428125 33.84281251 33.8428125 33.8428125 0 0 0-33.8428125-33.88710938z M759.35539062 624.24843751h-148.17304688a33.8428125 33.8428125 0 1 1 0-67.72992187h148.17304688a16.92140625 16.92140625 0 0 0 16.92140625-16.92140625v-50.80851563a33.8428125 33.8428125 0 1 1 67.77421875 0v50.80851563a84.65132813 84.65132813 0 0 1-84.695625 84.65132812zM314.88054687 421.05867188H214.99109374a33.8428125 33.8428125 0 1 1 0-67.72992187h99.88945313a33.8428125 33.8428125 0 1 1 0 67.77421875z m198.9815625-105.82523437A33.8428125 33.8428125 0 0 1 479.97499999 281.39062501V200.10585939c0-46.73320313 37.918125-84.65132813 84.65132813-84.65132813h47.39765625a16.92140625 16.92140625 0 0 0 16.96570312-16.92140625v-31.3621875a33.8428125 33.8428125 0 1 1 67.72992188 0v31.3621875a84.65132813 84.65132813 0 0 1-84.65132813 84.60703125h-47.39765625a16.92140625 16.92140625 0 0 0-16.96570312 16.96570313V281.39062501a33.8428125 33.8428125 0 0 1-33.8428125 33.8428125z',
|
||||||
|
code: 'M793.68489309 258.48359597c14.08424494-7.04212205 21.126367-14.08424494 31.68955051-14.08424494 17.60530556 0 28.16848906 10.56318349 31.68955049 17.60530638 7.04212205 10.56318349 31.68955051 17.60530556 42.25273402 17.60530557 7.04212205 0 17.60530556-24.64742845 24.64742844-45.77379546s7.04212205-45.77379545 3.52106145-49.29485606c-3.52106145-3.52106145-31.68955051-10.56318349-38.73167338-10.56318351-3.52106145 3.52106145-10.56318349 7.04212205-24.64742763 7.04212206s-28.16848906-10.56318349-38.73167339-21.126367c-17.60530556-17.60530556-38.73167257-24.64742845-59.85803957-31.68955051-21.126367-7.04212205-45.77379545-7.04212205-66.90016245-7.04212205-31.68955051-3.52106145-66.90016246-3.52106145-98.58971213 7.04212205-14.08424494 3.52106145-24.64742845 7.04212205-38.73167338 14.08424495-3.52106145 3.52106145-14.08424494 7.04212205-17.60530556 7.04212206-3.52106145 3.52106145-3.52106145 7.04212205 0 7.04212289s17.60530556-3.52106145 17.60530556-3.52106145-17.60530556 7.04212205-17.60530556 14.08424496c0 3.52106145 3.52106145 3.52106145 3.52106145 3.5210606s10.56318349-3.52106145 17.60530554-3.5210606c14.08424494 0 35.21061196-7.04212205 52.81591752-7.0421229 21.126367 0 42.252734 7.04212205 63.379101 28.16848989 31.68955051 38.73167257 28.16848906 88.02652945 28.16848907 98.58971212-7.04212205 73.9422845-172.53199747 524.63811362-179.57411953 556.32766497-7.04212205 31.68955051-7.04212205 49.29485607 31.68955051 59.85803956s52.8159175 0 59.85804038-14.08424495c3.52106145-24.64742845 109.15289645-580.97509257 172.53199664-630.26994863z m-137.32138551-35.21061195L89.47265996 311.29951347 181.02025001 899.31672811l302.81126093-49.29485606c-3.52106145-24.64742845 77.46334596-235.91109848 91.54759006-274.64277105l-154.92669107 24.64742845 21.126367-63.379101 109.15289564-17.6053064 28.16848989 35.21061195s7.04212205-17.60530556 7.04212204-24.64742844L434.53665404 342.98906398c-7.04212205-10.56318349-7.04212205-24.64742845 3.52106146-31.68955051l7.04212204-7.04212206c10.56318349-7.04212205 24.64742845-7.04212205 31.68955052 3.52106062l133.80032489 154.9266919c28.16848906-84.50546801 52.8159175-158.44775252 52.81591751-183.09518095 3.52106145-7.04212205 3.52106145-31.68955051-7.04212288-56.33697896z m-422.52734006 348.58505555l95.06865151-17.60530557-24.64742762 63.37910102-63.379101 10.5631835-7.04212289-56.33697895z m204.22154798-179.57411953l10.5631835 3.52106144c14.08424494 3.52106145 17.60530556 17.60530556 14.08424493 31.68955051l-105.63183501 281.6848931L293.69420791 793.68489309l7.04212207-105.63183502 105.631835-281.68489309c3.52106145-14.08424494 17.60530556-17.60530556 31.68955052-14.08424494z m380.27460604-98.58971213c-14.08424494 14.08424494-31.68955051 59.85803957-66.90016245 193.65836364h3.52106144l10.5631835 56.33697896-28.16848905 3.52106145c-3.52106145 17.60530556-7.04212205 35.21061196-14.08424496 56.33697811 59.85803957 31.68955051 28.16848906 109.15289645 24.64742846 109.15289646-3.52106145 0-3.52106145 0-3.52106146-3.52106144s3.52106145-14.08424494-7.04212204-17.60530557c-7.04212205-3.52106145-21.126367-7.04212205-31.68955051-14.08424495-10.56318349 42.252734-21.126367 91.54759007-31.68955051 144.36350841l221.82685354-35.21061194-73.94228452-496.46962456-3.52106144 3.52106143z'
|
||||||
|
}
|
||||||
|
|
@ -4,5 +4,25 @@ export default createStore({
|
||||||
user: {},
|
user: {},
|
||||||
aboutAppShow: false,
|
aboutAppShow: false,
|
||||||
storeAppShow: true,
|
storeAppShow: true,
|
||||||
powerAppShow: false
|
powerAppShow: false,
|
||||||
|
|
||||||
|
categories: [
|
||||||
|
{ name: '办公教育', icon: 'client', path: '/cate/work' },
|
||||||
|
{ name: '游戏娱乐', icon: 'game', path: '/cate/game' },
|
||||||
|
{ name: '编程软件', icon: 'code', path: '/cate/coding' },
|
||||||
|
{ name: '聊天社交', icon: 'talk', path: '/cate/social' },
|
||||||
|
{ name: '输入法', icon: 'im', path: '/cate/input-method' },
|
||||||
|
{ name: '浏览器', icon: 'browser', path: '/cate/browser' },
|
||||||
|
{ name: '网络工具', icon: 'net', path: '/cate/network' },
|
||||||
|
{ name: '下载工具', icon: 'download', path: '/cate/download' },
|
||||||
|
{ name: '视频直播', icon: 'video', path: '/cate/video' },
|
||||||
|
{ name: '音乐软件', icon: 'music', path: '/cate/music' },
|
||||||
|
{ name: '图形图像', icon: 'image', path: '/cate/image' },
|
||||||
|
{ name: '安全防护', icon: 'safe', path: '/cate/safe' },
|
||||||
|
{ name: '解压记录', icon: 'zip', path: '/cate/zip' },
|
||||||
|
{ name: '系统工具', icon: 'setting', path: '/cate/system' },
|
||||||
|
{ name: '股票网银', icon: 'chart', path: '/cate/stock' },
|
||||||
|
{ name: '剪辑工具', icon: 'cut', path: '/cate/cut' },
|
||||||
|
{ name: '桌面美化', icon: 'color', path: '/cate/theme' }
|
||||||
|
]
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,13 @@
|
||||||
* @date 2023/12/19 16:53:27
|
* @date 2023/12/19 16:53:27
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { html, css, Component } from 'wkit'
|
import { html, css, Component, range } from 'wkit'
|
||||||
import { watch } from 'wkitd'
|
import { watch } from 'wkitd'
|
||||||
|
|
||||||
import '../components/titlebar.js'
|
import '../components/titlebar.js'
|
||||||
|
import '../components/app-menu.js'
|
||||||
import '../components/slider.js'
|
import '../components/slider.js'
|
||||||
|
import '../components/list.js'
|
||||||
|
|
||||||
class Home extends Component {
|
class Home extends Component {
|
||||||
static animation = { type: 'scale', immediate: true }
|
static animation = { type: 'scale', immediate: true }
|
||||||
|
|
@ -45,6 +47,8 @@ class Home extends Component {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
menu,
|
||||||
li {
|
li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
@ -53,6 +57,7 @@ class Home extends Component {
|
||||||
.body {
|
.body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
height: calc(100% - 48px);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
.sidebar {
|
.sidebar {
|
||||||
|
|
@ -66,84 +71,35 @@ class Home extends Component {
|
||||||
.content {
|
.content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 32px 32px;
|
padding: 0 8px 8px 0;
|
||||||
border-radius: 0 0 8px 0;
|
border-radius: 0 0 8px 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
.wrapper {
|
||||||
|
overflow: hidden auto;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 32px 32px;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 3px;
|
||||||
|
height: 3px;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #c6c7ca;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb:hover {
|
||||||
|
background-color: #a1a1a1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
|
css``
|
||||||
css`
|
|
||||||
.searchbar {
|
|
||||||
padding: 0 16px;
|
|
||||||
|
|
||||||
input {
|
|
||||||
width: 100%;
|
|
||||||
height: 30px;
|
|
||||||
padding: 0 16px;
|
|
||||||
line-height: 1;
|
|
||||||
border: 1px solid var(--color-grey-1);
|
|
||||||
border-radius: 16px;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
font-size: 12px;
|
|
||||||
color: inherit;
|
|
||||||
outline: none;
|
|
||||||
transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
background: rgba(255, 255, 255, 1);
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: var(--color-grey-2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.category {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 6px;
|
|
||||||
margin-top: 16px;
|
|
||||||
padding-left: 16px;
|
|
||||||
--wc-icon-size: 16px;
|
|
||||||
|
|
||||||
.item {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 36px;
|
|
||||||
padding: 0 16px;
|
|
||||||
gap: 4px;
|
|
||||||
border-radius: 8px 0 0 8px;
|
|
||||||
transition: background 0.2s ease-in-out;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: rgba(255, 255, 255, 1);
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: -12px;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
background: url(/assets/img/round.webp);
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
top: unset;
|
|
||||||
bottom: -12px;
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
]
|
]
|
||||||
|
|
||||||
#hide() {
|
#hide() {
|
||||||
|
|
@ -167,21 +123,13 @@ class Home extends Component {
|
||||||
@minimize=${this.#hide}
|
@minimize=${this.#hide}
|
||||||
></wc-titlebar>
|
></wc-titlebar>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<aside class="sidebar">
|
<wc-aside class="sidebar"></wc-aside>
|
||||||
<search class="searchbar">
|
|
||||||
<input placeholder="搜索应用" />
|
|
||||||
</search>
|
|
||||||
|
|
||||||
<menu class="category">
|
|
||||||
<li class="item active">
|
|
||||||
<wc-icon name="client"></wc-icon>装机必备
|
|
||||||
</li>
|
|
||||||
<li class="item"><wc-icon name="doc"></wc-icon>办公软件</li>
|
|
||||||
<li class="item"><wc-icon name="setting"></wc-icon>开发工具</li>
|
|
||||||
</menu>
|
|
||||||
</aside>
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
<div class="wrapper">
|
||||||
<wc-slider></wc-slider>
|
<wc-slider></wc-slider>
|
||||||
|
|
||||||
|
<wc-list :list=${range(10)}></wc-list>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue