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