|
|
@@ -32,7 +32,9 @@
|
|
|
class="l-flex__none o-device__tip u-font-size--xs"
|
|
|
:class="statusClass"
|
|
|
>
|
|
|
- <span class="u-color--white">{{ statusTip }}</span>
|
|
|
+ <span class="u-color--white">
|
|
|
+ {{ statusTip }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<i
|
|
|
@@ -58,7 +60,9 @@
|
|
|
class="c-sibling-item"
|
|
|
icon-class="volume"
|
|
|
/>
|
|
|
- <span class="c-sibling-item nearest">{{ volumeTip }}</span>
|
|
|
+ <span class="c-sibling-item nearest">
|
|
|
+ {{ volumeTip }}
|
|
|
+ </span>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -75,14 +79,22 @@
|
|
|
/>
|
|
|
<div class="l-flex__none l-flex--row c-sibling-item--v">
|
|
|
<div class="u-relative">
|
|
|
- <span class="u-font-size--md u-bold">{{ current.startTime }}</span>
|
|
|
- <span class="o-device__ymd u-color--black light u-font-size--xs">{{ current.startDate }}</span>
|
|
|
+ <span class="u-font-size--md u-bold">
|
|
|
+ {{ current.startTime }}
|
|
|
+ </span>
|
|
|
+ <span class="o-device__ymd u-color--black light u-font-size--xs">
|
|
|
+ {{ current.startDate }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
<template v-if="current.endDate">
|
|
|
<span class="o-device__line" />
|
|
|
<div class="u-relative">
|
|
|
- <span class="u-font-size--md u-bold">{{ current.endTime }}</span>
|
|
|
- <span class="o-device__ymd u-color--black light u-font-size--xs">{{ current.endDate }}</span>
|
|
|
+ <span class="u-font-size--md u-bold">
|
|
|
+ {{ current.endTime }}
|
|
|
+ </span>
|
|
|
+ <span class="o-device__ymd u-color--black light u-font-size--xs">
|
|
|
+ {{ current.endDate }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
@@ -229,36 +241,11 @@ export default {
|
|
|
beforeCreate () {
|
|
|
this.$timer = -1
|
|
|
this.$refreshTimer = -1
|
|
|
- this.$observer = null
|
|
|
- },
|
|
|
- mounted () {
|
|
|
- if (!this.always) {
|
|
|
- this.observe(this.$el)
|
|
|
- }
|
|
|
},
|
|
|
beforeDestroy () {
|
|
|
this.onReset(true)
|
|
|
- this.$observer?.disconnect()
|
|
|
- this.$observer = null
|
|
|
},
|
|
|
methods: {
|
|
|
- observe () {
|
|
|
- if (!this.$observer) {
|
|
|
- this.$observer = new IntersectionObserver(entries => {
|
|
|
- entries.forEach(entry => {
|
|
|
- console.log('observe', this.device.name, entry.isIntersecting ? 'into view' : 'out view')
|
|
|
- if (entry.isIntersecting) {
|
|
|
- this.isInView = true
|
|
|
- } else {
|
|
|
- this.isInView = false
|
|
|
- }
|
|
|
- })
|
|
|
- }, {
|
|
|
- threshold: [0.25]
|
|
|
- })
|
|
|
- }
|
|
|
- this.$observer.observe(this.$el)
|
|
|
- },
|
|
|
checkStatus () {
|
|
|
if (!this.$firstView) {
|
|
|
ScreenshotCache.watch(this.device, this.onScreenshotUpdate)
|