fix(home): 统一首页项目卡片底部对齐

- 使用 UnoCSS 调整项目卡片等高布局
- 将项目描述和日期贴到底部,避免短内容卡片提前显示
- 限制长文本换行并保持日期不换行
im
YunaiV 2026-06-17 17:46:56 -07:00
parent e5bba07dec
commit fc7cd7bc07
1 changed files with 21 additions and 8 deletions

View File

@ -73,7 +73,7 @@
</div> </div>
</template> </template>
<el-skeleton :loading="loading" animated> <el-skeleton :loading="loading" animated>
<el-row> <el-row :gutter="8" class="gap-y-8px">
<el-col <el-col
v-for="(item, index) in projects" v-for="(item, index) in projects"
:key="`card-${index}`" :key="`card-${index}`"
@ -82,25 +82,38 @@
:md="8" :md="8"
:sm="24" :sm="24"
:xs="24" :xs="24"
class="!flex"
> >
<el-card <el-card
shadow="hover" shadow="hover"
class="mr-5px mt-5px cursor-pointer" class="flex-1 cursor-pointer"
body-class="flex h-full flex-col"
@click="handleProjectClick(item.message)" @click="handleProjectClick(item.message)"
> >
<div class="flex items-center"> <div class="flex items-center">
<Icon <Icon
:icon="item.icon" :icon="item.icon"
:size="25" :size="25"
class="mr-8px" class="mr-8px flex-none"
:style="{ color: item.color }" :style="{ color: item.color }"
/> />
<span class="text-16px">{{ item.name }}</span> <span class="min-w-0 line-clamp-2 text-16px" :title="item.name">{{
item.name
}}</span>
</div> </div>
<div class="mt-12px text-12px text-gray-400">{{ t(item.message) }}</div> <div
<div class="mt-12px flex justify-between text-12px text-gray-400"> class="mt-12px break-all line-clamp-2 text-12px text-gray-400"
<span>{{ item.personal }}</span> :title="t(item.message)"
<span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span> >
{{ t(item.message) }}
</div>
<div
class="mt-auto flex items-center justify-between gap-8px pt-12px text-12px text-gray-400"
>
<span class="min-w-0 truncate" :title="item.personal">{{ item.personal }}</span>
<span class="shrink-0 whitespace-nowrap">
{{ formatTime(item.time, 'yyyy-MM-dd') }}
</span>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>