appcat
/
appstore
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

增加图标

master
yutent 2023-12-21 15:34:37 +08:00
parent 231dbbc8f2
commit aabd9df954
1 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
dist/components/dock.js vendored
View File

@ -29,16 +29,24 @@ class Dock extends Component {
padding: 12px; padding: 12px;
border-radius: 16px; border-radius: 16px;
background: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.5);
color: var(--color-grey-3);
transform: translateX(-100%); transform: translateX(-100%);
transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
--wc-icon-size: 24px;
&:hover { &:hover {
transform: translateX(0); transform: translateX(0);
} }
} }
`, `,
css` css`
.icon {
display: flex;
align-items: center;
justify-content: center;
}
.apps { .apps {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -88,21 +96,24 @@ class Dock extends Component {
return html` return html`
<main class="container"> <main class="container">
<span <span
class="dashboard" class="dashboard icon"
@click=${_ => (this.$store.storeAppShow = true)} @click=${_ => (this.$store.storeAppShow = true)}
><wc-icon name="app"></wc-icon
></span> ></span>
<mark class="pipe"></mark> <mark class="pipe"></mark>
<nav class="apps"> <nav class="apps">
<a class="item"></a> <a class="item icon"></a>
<a class="item"></a> <a class="item icon"></a>
<a class="item"></a> <a class="item icon"></a>
<a class="item"></a> <a class="item icon"></a>
</nav> </nav>
<mark class="pipe"></mark> <mark class="pipe"></mark>
<span <span
class="trash" class="trash icon"
@click=${_ => (this.$store.aboutAppShow = true)} @click=${_ => (this.$store.aboutAppShow = true)}
></span> >
<wc-icon name="info"></wc-icon>
</span>
</main> </main>
` `
} }