fix(home): 统一首页项目卡片底部对齐
- 使用 UnoCSS 调整项目卡片等高布局 - 将项目描述和日期贴到底部,避免短内容卡片提前显示 - 限制长文本换行并保持日期不换行im
parent
e5bba07dec
commit
fc7cd7bc07
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue