优化 TorrentCard 和 TorrentItem 组件的样式,调整标签的大小为 x-small,提升视觉效果和用户体验。同时,简化了卡片底部信息的布局,确保在不同设备上的适配性。

This commit is contained in:
jxxghp
2025-04-19 12:24:19 +08:00
parent 2abbace470
commit dc9c08ed30
2 changed files with 28 additions and 23 deletions

View File

@@ -136,7 +136,12 @@ onMounted(() => {
<span class="text-h6 font-weight-bold text-truncate me-2">
{{ media?.title ?? meta?.name }}
</span>
<VChip v-if="meta?.season_episode" class="chip-season rounded-sm font-weight-bold" variant="elevated">
<VChip
v-if="meta?.season_episode"
class="chip-season rounded-sm font-weight-bold"
variant="elevated"
size="small"
>
{{ meta?.season_episode }}
</VChip>
</div>
@@ -144,7 +149,7 @@ onMounted(() => {
<!-- 站点信息条 -->
<div class="d-flex justify-space-between align-center flex-wrap">
<div class="d-flex align-center">
<img
<VImg
v-if="siteIcons[torrent?.site || 0]"
:src="siteIcons[torrent?.site || 0]"
:alt="torrent?.site_name"
@@ -190,22 +195,22 @@ onMounted(() => {
<!-- 资源标签区 -->
<div class="d-flex flex-wrap gap-1 mb-2">
<!-- 版本标签 -->
<VChip v-if="meta?.edition" class="chip-edition rounded-sm" size="small" variant="elevated">
<VChip v-if="meta?.edition" class="chip-edition rounded-sm" size="x-small" variant="elevated">
{{ meta?.edition }}
</VChip>
<!-- 分辨率标签 -->
<VChip v-if="meta?.resource_pix" class="chip-resolution rounded-sm" size="small" variant="elevated">
<VChip v-if="meta?.resource_pix" class="chip-resolution rounded-sm" size="x-small" variant="elevated">
{{ meta?.resource_pix }}
</VChip>
<!-- 编码标签 -->
<VChip v-if="meta?.video_encode" class="chip-codec rounded-sm" size="small" variant="elevated">
<VChip v-if="meta?.video_encode" class="chip-codec rounded-sm" size="x-small" variant="elevated">
{{ meta?.video_encode }}
</VChip>
<!-- 制作组标签 -->
<VChip v-if="meta?.resource_team" class="chip-team rounded-sm" size="small" variant="elevated">
<VChip v-if="meta?.resource_team" class="chip-team rounded-sm" size="x-small" variant="elevated">
{{ meta?.resource_team }}
</VChip>
@@ -214,21 +219,22 @@ onMounted(() => {
v-for="(label, index) in torrent?.labels"
:key="index"
class="chip-label rounded-sm"
size="small"
size="x-small"
variant="elevated"
>{{ label }}</VChip
>
{{ label }}
</VChip>
<!-- 特殊标签 -->
<VChip v-if="torrent?.hit_and_run" class="chip-hr rounded-sm" size="small" variant="elevated">H&R</VChip>
<VChip v-if="torrent?.freedate_diff" class="chip-expire rounded-sm" size="small" variant="elevated">{{
torrent?.freedate_diff
}}</VChip>
<VChip v-if="torrent?.hit_and_run" class="chip-hr rounded-sm" size="x-small" variant="elevated">H&R</VChip>
<VChip v-if="torrent?.freedate_diff" class="chip-expire rounded-sm" size="x-small" variant="elevated">
{{ torrent?.freedate_diff }}
</VChip>
</div>
</VCardText>
<!-- 卡片底部信息 -->
<VCardActions class="border-t border-opacity-10 mt-auto pa-3">
<VCardActions class="border-t border-opacity-10 mt-auto pa-2">
<div v-if="props.more && props.more.length > 0">
<VBtn
variant="text"
@@ -246,10 +252,9 @@ onMounted(() => {
<!-- 体积和详情按钮并排 -->
<div class="d-flex align-center">
<VChip v-if="torrent?.size" color="secondary" size="small" variant="elevated" class="rounded-sm mr-2">
<VChip v-if="torrent?.size" color="secondary" size="x-small" variant="elevated" class="rounded-sm mr-2">
{{ formatFileSize(torrent.size) }}
</VChip>
<VBtn icon size="small" variant="text" color="primary" @click.stop="openTorrentDetail">
<VIcon icon="mdi-information-outline"></VIcon>
</VBtn>

View File

@@ -151,22 +151,22 @@ onMounted(() => {
<div class="d-flex flex-wrap gap-1 mb-2">
<!-- 版本标签 -->
<VChip v-if="meta?.edition" class="chip-edition rounded-sm" size="small" variant="elevated">
<VChip v-if="meta?.edition" class="chip-edition rounded-sm" size="x-small" variant="elevated">
{{ meta?.edition }}
</VChip>
<!-- 分辨率标签 -->
<VChip v-if="meta?.resource_pix" class="chip-resolution rounded-sm" size="small" variant="elevated">
<VChip v-if="meta?.resource_pix" class="chip-resolution rounded-sm" size="x-small" variant="elevated">
{{ meta?.resource_pix }}
</VChip>
<!-- 编码标签 -->
<VChip v-if="meta?.video_encode" class="chip-codec rounded-sm" size="small" variant="elevated">
<VChip v-if="meta?.video_encode" class="chip-codec rounded-sm" size="x-small" variant="elevated">
{{ meta?.video_encode }}
</VChip>
<!-- 制作组标签 -->
<VChip v-if="meta?.resource_team" class="chip-team rounded-sm" size="small" variant="elevated">
<VChip v-if="meta?.resource_team" class="chip-team rounded-sm" size="x-small" variant="elevated">
{{ meta?.resource_team }}
</VChip>
@@ -175,15 +175,15 @@ onMounted(() => {
v-for="(label, index) in torrent?.labels"
:key="index"
class="chip-label rounded-sm"
size="small"
size="x-small"
variant="elevated"
>
{{ label }}
</VChip>
<!-- 特殊标签 -->
<VChip v-if="torrent?.hit_and_run" class="chip-hr rounded-sm" size="small" variant="elevated"> H&R </VChip>
<VChip v-if="torrent?.freedate_diff" class="chip-expire rounded-sm" size="small" variant="elevated">
<VChip v-if="torrent?.hit_and_run" class="chip-hr rounded-sm" size="x-small" variant="elevated"> H&R </VChip>
<VChip v-if="torrent?.freedate_diff" class="chip-expire rounded-sm" size="x-small" variant="elevated">
{{ torrent?.freedate_diff }}
</VChip>
</div>
@@ -203,7 +203,7 @@ onMounted(() => {
</div>
<div class="d-flex align-center">
<VChip v-if="torrent?.size" color="secondary" size="small" variant="elevated" class="rounded-sm mr-2">
<VChip v-if="torrent?.size" color="secondary" size="x-small" variant="elevated" class="rounded-sm mr-2">
{{ formatFileSize(torrent.size) }}
</VChip>