Always show viewed tip (#4346)

This commit is contained in:
the1812 2024-07-17 21:32:34 +08:00
parent 7fc04a2d23
commit b8121f7976
2 changed files with 41 additions and 36 deletions

View File

@ -60,16 +60,6 @@
class="progress" class="progress"
:style="{ width: h.progress * 100 + '%' }" :style="{ width: h.progress * 100 + '%' }"
></div> ></div>
<div v-if="h.progressText" class="floating progress-number">
{{ h.progress >= 1 ? '已看完' : h.progressText }}
</div>
<div
v-if="h.liveStatus !== undefined"
class="floating duration live-status"
:class="{ on: h.liveStatus === 1 }"
>
{{ h.liveStatus === 1 ? '直播中' : '未开播' }}
</div>
<div v-if="h.durationText" class="floating duration">{{ h.durationText }}</div> <div v-if="h.durationText" class="floating duration">{{ h.durationText }}</div>
</a> </a>
<a class="title" target="_blank" :href="h.url" :title="h.title">{{ <a class="title" target="_blank" :href="h.url" :title="h.title">{{
@ -89,8 +79,25 @@
></DpiImage> ></DpiImage>
<div class="up-name">{{ h.upName }}</div> <div class="up-name">{{ h.upName }}</div>
</a> </a>
<div v-if="h.timeText" class="time" :title="new Date(h.viewAt).toLocaleString()"> <div class="history-info">
{{ h.timeText }} <div v-if="h.progressText" class="progress-number">
{{ h.progress >= 1 ? '已看完' : h.progressText }}
</div>
<div
v-if="h.liveStatus !== undefined"
class="duration live-status"
:class="{ on: h.liveStatus === 1 }"
>
{{ h.liveStatus === 1 ? '直播中' : '未开播' }}
</div>
<span
v-if="h.progressText || h.liveStatus !== undefined"
class="history-info-separator"
>|</span
>
<div v-if="h.timeText" class="time" :title="new Date(h.viewAt).toLocaleString()">
{{ h.timeText }}
</div>
</div> </div>
</div> </div>
</transition-group> </transition-group>
@ -405,22 +412,6 @@ export default Vue.extend({
filter: invert(0.9); filter: invert(0.9);
} }
} }
.duration {
left: $padding;
bottom: $padding;
padding: 0 6px;
}
.live-status {
&.on {
background-color: var(--theme-color);
color: var(--foreground-color);
}
}
.progress-number {
left: $padding;
top: $padding;
padding: 0 6px;
}
.progress { .progress {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -448,7 +439,7 @@ export default Vue.extend({
} }
} }
.up, .up,
.time { .history-info {
font-size: 11px; font-size: 11px;
opacity: 0.75; opacity: 0.75;
align-self: center; align-self: center;
@ -479,10 +470,23 @@ export default Vue.extend({
} }
} }
} }
.time { .history-info {
@include h-center(4px);
font-size: 11px; font-size: 11px;
grid-area: time; grid-area: time;
padding-right: 6px; padding-right: 6px;
&-separator {
margin: 0 4px;
}
}
.progress-number,
.live-status {
@include single-line();
}
.live-status {
&.on {
color: var(--theme-color);
}
} }
} }
} }

View File

@ -291,6 +291,11 @@ export default Vue.extend({
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;
position: relative; position: relative;
$padding: 6px; $padding: 6px;
.floating {
position: absolute;
opacity: 0;
font-size: 11px;
}
.remove { .remove {
top: $padding; top: $padding;
left: $padding; left: $padding;
@ -303,15 +308,11 @@ export default Vue.extend({
} }
.viewed { .viewed {
white-space: nowrap; white-space: nowrap;
opacity: 1;
right: $padding; right: $padding;
top: $padding; bottom: $padding;
padding: 0 6px; padding: 0 6px;
} }
.floating {
position: absolute;
opacity: 0;
font-size: 11px;
}
.cover { .cover {
object-fit: cover; object-fit: cover;
} }