CorentinTh/it-tools
1
1
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-01-19 14:00:31 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor(style): improve style for tool-card

Browse source
This commit is contained in:
Corentin Thomasset 2022-04-14 23:12:19 +02:00
parent 1d09a01bb2
commit 65a6896563
No known key found for this signature in database
GPG key ID: DBD997E935996158
1 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/ToolCard.vue
View file

@ -1,10 +1,12 @@
<template> <template>
<router-link :to="tool.path"> <router-link :to="tool.path">
<n-card class="tool-card"> <n-card class="tool-card">
<n-icon class="icon" size="35"> <n-icon class="icon" size="40">
<component :is="tool.icon" /> <component :is="tool.icon" />
</n-icon> </n-icon>
<n-h3 class="title">{{ tool.name }}</n-h3> <n-h3 class="title">
<n-ellipsis>{{ tool.name }}</n-ellipsis>
</n-h3>
<div class="description"> <div class="description">
<n-ellipsis :line-clamp="2" :tooltip="false">{{ tool.description }}</n-ellipsis> <n-ellipsis :line-clamp="2" :tooltip="false">{{ tool.description }}</n-ellipsis>
</div> </div>
@ -30,12 +32,15 @@ a {
&:hover { &:hover {
border-color: var(--n-color-target); border-color: var(--n-color-target);
} }
.icon { .icon {
opacity: 0.7; opacity: 0.7;
} }
.title { .title {
margin: 5px 0; margin: 5px 0;
} }
.description { .description {
opacity: 0.7; opacity: 0.7;
margin: 5px 0; margin: 5px 0;