gtsoft/gtsoft-snail-job-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(sj_1.0.0_beta4): 首页卡片新增动画

Browse Source
This commit is contained in:
xlsea 2024-06-05 09:39:49 +08:00
parent f470e5efd3
commit d69aef0412
1 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/home/modules/card-data.vue
View File

@ -238,7 +238,7 @@ function getGradientColor(color: CardData['color']) {
<!-- define component end: GradientBg -->
<NGrid :cols="gridCol" responsive="screen" :x-gap="16" :y-gap="16">
<NGi v-for="item in cardData" :key="item.key">
<NGi v-for="item in cardData" :key="item.key" class="home-card">
<NSpin :show="false">
<GradientBg :gradient-color="getGradientColor(item.color)" class="h-165px flex-1">
<div :class="item.click ? 'cursor-pointer' : null" @click="item.click">
@ -307,4 +307,14 @@ function getGradientColor(color: CardData['color']) {
:deep(.n-progress-icon--as-text) {
width: 60px !important;
}
.home-card {
transition: all 0.25s ease-in;
}
.home-card:hover {
transform: translateY(-8px);
box-shadow: var(--n-box-shadow);
border-radius: 8px;
}
</style>