mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Always show viewed tip (#4346)
This commit is contained in:
parent
7fc04a2d23
commit
b8121f7976
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user