diff --git a/registry/lib/components/style/custom-navbar/history/NavbarHistory.vue b/registry/lib/components/style/custom-navbar/history/NavbarHistory.vue index a2c2afcbc..f89f5969e 100644 --- a/registry/lib/components/style/custom-navbar/history/NavbarHistory.vue +++ b/registry/lib/components/style/custom-navbar/history/NavbarHistory.vue @@ -60,16 +60,6 @@ class="progress" :style="{ width: h.progress * 100 + '%' }" > -
- {{ h.progress >= 1 ? '已看完' : h.progressText }} -
-
- {{ h.liveStatus === 1 ? '直播中' : '未开播' }} -
{{ h.durationText }}
{{ @@ -89,8 +79,25 @@ >
{{ h.upName }}
-
- {{ h.timeText }} +
+
+ {{ h.progress >= 1 ? '已看完' : h.progressText }} +
+
+ {{ h.liveStatus === 1 ? '直播中' : '未开播' }} +
+ | +
+ {{ h.timeText }} +
@@ -405,22 +412,6 @@ export default Vue.extend({ 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 { position: absolute; bottom: 0; @@ -448,7 +439,7 @@ export default Vue.extend({ } } .up, - .time { + .history-info { font-size: 11px; opacity: 0.75; align-self: center; @@ -479,10 +470,23 @@ export default Vue.extend({ } } } - .time { + .history-info { + @include h-center(4px); font-size: 11px; grid-area: time; padding-right: 6px; + &-separator { + margin: 0 4px; + } + } + .progress-number, + .live-status { + @include single-line(); + } + .live-status { + &.on { + color: var(--theme-color); + } } } } diff --git a/registry/lib/components/style/custom-navbar/watchlater/NavbarWatchlater.vue b/registry/lib/components/style/custom-navbar/watchlater/NavbarWatchlater.vue index f4f3540e2..d2f965f6d 100644 --- a/registry/lib/components/style/custom-navbar/watchlater/NavbarWatchlater.vue +++ b/registry/lib/components/style/custom-navbar/watchlater/NavbarWatchlater.vue @@ -291,6 +291,11 @@ export default Vue.extend({ border-radius: 8px 0 0 8px; position: relative; $padding: 6px; + .floating { + position: absolute; + opacity: 0; + font-size: 11px; + } .remove { top: $padding; left: $padding; @@ -303,15 +308,11 @@ export default Vue.extend({ } .viewed { white-space: nowrap; + opacity: 1; right: $padding; - top: $padding; + bottom: $padding; padding: 0 6px; } - .floating { - position: absolute; - opacity: 0; - font-size: 11px; - } .cover { object-fit: cover; }