GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-07 00:36:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化 TorrentCard 和 TorrentItem 组件的样式，调整媒体标题和站点名称的布局

Browse Source
This commit is contained in:
jxxghp
2025-03-31 15:31:52 +08:00
parent 91a10c9d28
commit 6b4b44aec6
3 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cards/TorrentCard.vue
+1 -3
View File
@@ -122,7 +122,7 @@ onMounted(() => {
<!-- 媒体标题 --> <!-- 媒体标题 -->
<div class="card-header"> <div class="card-header">
<div class="media-title-wrapper"> <div class="media-title-wrapper flex flex-row flex-wrap justify-start">
<h3 class="media-title me-2"> <h3 class="media-title me-2">
{{ media?.title ?? meta?.name }} {{ media?.title ?? meta?.name }}
</h3> </h3>
@@ -340,8 +340,6 @@ onMounted(() => {
.media-title-wrapper { .media-title-wrapper {
margin-bottom: 8px; margin-bottom: 8px;
display: flex;
flex-wrap: wrap;
padding-right: 2rem; padding-right: 2rem;
} }
src/components/cards/TorrentItem.vue
+8 -7
View File
@@ -106,7 +106,7 @@ onMounted(() => {
<div class="site-wrapper"> <div class="site-wrapper">
<img :alt="torrent?.site_name" v-if="siteIcon" :src="siteIcon" class="site-icon" /> <img :alt="torrent?.site_name" v-if="siteIcon" :src="siteIcon" class="site-icon" />
<span v-else class="site-fallback">{{ torrent?.site_name?.substring(0, 1) }}</span> <span v-else class="site-fallback">{{ torrent?.site_name?.substring(0, 1) }}</span>
<div class="site-name">{{ torrent?.site_name }}</div> <div class="site-name d-none d-sm-block">{{ torrent?.site_name }}</div>
<span <span
v-if="torrent?.downloadvolumefactor !== 1 || torrent?.uploadvolumefactor !== 1" v-if="torrent?.downloadvolumefactor !== 1 || torrent?.uploadvolumefactor !== 1"
class="free-tag" class="free-tag"
@@ -119,8 +119,8 @@ onMounted(() => {
<VListItemTitle class="item-content"> <VListItemTitle class="item-content">
<div class="item-header"> <div class="item-header">
<div class="media-info"> <div class="media-info flex flex-row flex-wrap justify-start">
<span class="media-title">{{ media?.title ?? meta?.name }}</span> <span class="media-title me-2">{{ media?.title ?? meta?.name }}</span>
<span v-if="meta?.season_episode" class="season-tag">{{ meta?.season_episode }}</span> <span v-if="meta?.season_episode" class="season-tag">{{ meta?.season_episode }}</span>
</div> </div>
</div> </div>
@@ -295,10 +295,7 @@ onMounted(() => {
} }
.media-info { .media-info {
display: flex;
align-items: center; align-items: center;
flex-wrap: wrap;
gap: 8px;
} }
.media-title { .media-title {
@@ -447,7 +444,7 @@ onMounted(() => {
} }
.site-wrapper { .site-wrapper {
min-width: 60px; min-width: 24px;
flex-wrap: wrap; flex-wrap: wrap;
margin-right: 10px; margin-right: 10px;
} }
@@ -457,6 +454,10 @@ onMounted(() => {
margin-right: 4px; margin-right: 4px;
} }
.size-badge {
font-size: 0.7rem;
}
.resource-tag { .resource-tag {
font-size: 0.75rem; font-size: 0.75rem;
padding: 2px 6px; padding: 2px 6px;
src/views/torrent/TorrentRowListView.vue
-1
View File
@@ -595,7 +595,6 @@ function toggleFilterMenu(key: string) {
} }
.view-header { .view-header {
padding: 12px 16px;
background-color: rgb(var(--v-theme-surface)); background-color: rgb(var(--v-theme-surface));
border-radius: 12px; border-radius: 12px;
border: 1px solid rgba(var(--v-theme-on-surface), 0.08); border: 1px solid rgba(var(--v-theme-on-surface), 0.08);