|
|
@@ -3,7 +3,7 @@
|
|
|
class="o-device u-pointer"
|
|
|
@click="onClick"
|
|
|
>
|
|
|
- <div class="l-flex__none l-flex--row o-device__header">
|
|
|
+ <div class="l-flex__none l-flex--row c-sibling-item--v o-device__header u-font-size u-bold">
|
|
|
<auto-text
|
|
|
class="l-flex__fill"
|
|
|
:text="name"
|
|
|
@@ -21,18 +21,18 @@
|
|
|
/>
|
|
|
</template>
|
|
|
<div
|
|
|
- class="l-flex__none o-device__tip"
|
|
|
+ class="l-flex__none o-device__tip u-font-size--xs"
|
|
|
:class="statusClass"
|
|
|
>
|
|
|
<span class="u-color--white">{{ statusTip }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
- class="l-flex__fill o-device__preview u-size--contain"
|
|
|
+ class="l-flex__none c-sibling-item--v o-device__preview u-size--contain"
|
|
|
:class="{ offline: !isOnline, empty: !shot }"
|
|
|
:style="styles"
|
|
|
/>
|
|
|
- <div class="l-flex__auto l-flex--col center o-device__info">
|
|
|
+ <div class="l-flex__none l-flex--col center c-sibling-item--v o-device__info">
|
|
|
<template v-if="isOnline">
|
|
|
<i
|
|
|
v-if="loadingTimeline"
|
|
|
@@ -40,42 +40,46 @@
|
|
|
/>
|
|
|
<template v-else-if="current">
|
|
|
<auto-text
|
|
|
- class="l-flex__none o-device__current"
|
|
|
+ class="l-flex__none u-align-self--stretch c-sibling-item--v u-font-size--md u-bold u-text-center"
|
|
|
:text="current.name"
|
|
|
/>
|
|
|
- <div class="l-flex__none l-flex--row has-top-padding">
|
|
|
- <span class="o-device__hms">
|
|
|
- {{ current.startTime }}
|
|
|
- <span class="o-device__ymd">{{ current.startDate }}</span>
|
|
|
- </span>
|
|
|
+ <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--info light u-font-size--xs">{{ current.startDate }}</span>
|
|
|
+ </div>
|
|
|
<template v-if="current.endDate">
|
|
|
<span class="o-device__line" />
|
|
|
- <span class="o-device__hms">
|
|
|
- {{ current.endTime }}
|
|
|
- <span class="o-device__ymd">{{ current.endDate }}</span>
|
|
|
- </span>
|
|
|
+ <div class="u-relative">
|
|
|
+ <span class="u-font-size--md u-bold">{{ current.endTime }}</span>
|
|
|
+ <span class="o-device__ymd u-color--info light u-font-size--xs">{{ current.endDate }}</span>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</div>
|
|
|
</template>
|
|
|
<span
|
|
|
v-else
|
|
|
- class="l-flex__auto l-flex--row u-bold"
|
|
|
+ class="l-flex__auto l-flex--row u-font-size u-bold"
|
|
|
>
|
|
|
当前暂无节目
|
|
|
</span>
|
|
|
</template>
|
|
|
- <template v-else>
|
|
|
- <span class="l-flex__auto l-flex--row u-bold">{{ lastOnline }}</span>
|
|
|
- </template>
|
|
|
+ <span
|
|
|
+ v-else
|
|
|
+ class="l-flex__auto l-flex--row u-font-size u-bold"
|
|
|
+ >
|
|
|
+ {{ lastOnline }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <div class="l-flex__none o-device__next">
|
|
|
+ <div class="l-flex__none l-flex--row c-sibling-item--v o-device__next u-color--info light u-font-size--xs u-text-center">
|
|
|
<auto-text
|
|
|
v-if="next"
|
|
|
+ class="l-flex__fill"
|
|
|
:text="nextInfo"
|
|
|
/>
|
|
|
</div>
|
|
|
- <div class="l-flex__none l-flex--row o-device__footer">
|
|
|
- <i class="l-flex__none o-device__icon el-icon-location-outline" />
|
|
|
+ <div class="l-flex__none l-flex--row c-sibling-item--v near u-color--blue u-font-size--xs u-bold">
|
|
|
+ <i class="l-flex__none c-sibling-item nearer el-icon-location-outline u-font-size" />
|
|
|
<auto-text
|
|
|
class="l-flex__auto"
|
|
|
:text="address"
|
|
|
@@ -306,7 +310,7 @@ export default {
|
|
|
.o-device {
|
|
|
display: inline-flex;
|
|
|
flex-direction: column;
|
|
|
- padding: 12px $spacing;
|
|
|
+ padding: $padding--md $padding--lg;
|
|
|
color: $black;
|
|
|
line-height: 1;
|
|
|
border-radius: $radius;
|
|
|
@@ -315,8 +319,6 @@ export default {
|
|
|
&__header {
|
|
|
justify-self: flex-start;
|
|
|
height: 24px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
}
|
|
|
|
|
|
&__shot {
|
|
|
@@ -329,17 +331,14 @@ export default {
|
|
|
&__tip {
|
|
|
display: inline-block;
|
|
|
position: relative;
|
|
|
- left: 16px;
|
|
|
- padding: 4px 8px 4px 10px;
|
|
|
- margin-left: -4px;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 1;
|
|
|
+ left: $padding--lg;
|
|
|
+ padding: $padding--2xs $padding--sm $padding--2xs $padding;
|
|
|
+ margin-left: -$spacing--3xs;
|
|
|
border-radius: $radius--sm 0 0 $radius--sm;
|
|
|
background-color: currentColor;
|
|
|
}
|
|
|
|
|
|
&__preview {
|
|
|
- margin-top: 12px;
|
|
|
padding-top: $padding--16_9;
|
|
|
border-radius: $radius--sm;
|
|
|
|
|
|
@@ -354,57 +353,25 @@ export default {
|
|
|
}
|
|
|
|
|
|
&__info {
|
|
|
- margin-top: 12px;
|
|
|
- height: 88px;
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- &__current {
|
|
|
- align-self: stretch;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
+ height: 64px;
|
|
|
}
|
|
|
|
|
|
&__line {
|
|
|
display: inline-block;
|
|
|
- width: 20px;
|
|
|
- margin: 0 10px;
|
|
|
+ width: $spacing--xs;
|
|
|
+ margin: 0 $spacing--xs;
|
|
|
border-bottom: 1px solid currentColor;
|
|
|
}
|
|
|
|
|
|
- &__hms {
|
|
|
- position: relative;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
&__ymd {
|
|
|
position: absolute;
|
|
|
top: 100%;
|
|
|
left: 50%;
|
|
|
- color: $info;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: normal;
|
|
|
- transform: translate(-50%, 4px);
|
|
|
+ transform: translate(-50%, $spacing--3xs);
|
|
|
}
|
|
|
|
|
|
&__next {
|
|
|
- height: 16px;
|
|
|
- color: $info;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 16px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- &__footer {
|
|
|
- margin-top: 10px;
|
|
|
- color: $blue;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
- .o-device__icon {
|
|
|
- margin-right: 6px;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
+ height: 12px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|