|
|
@@ -11,6 +11,7 @@
|
|
|
color="#01C1B5"
|
|
|
line-width="16px"
|
|
|
line-height="4px"
|
|
|
+ class="van-hairline--bottom"
|
|
|
@change="onSearch"
|
|
|
>
|
|
|
<van-tab name="1" title="直播中"></van-tab>
|
|
|
@@ -21,12 +22,31 @@
|
|
|
<div
|
|
|
v-if="params.liveState != '1'"
|
|
|
class="titleWrap week"
|
|
|
- style="height: 22px; line-height: 22px; padding: 12px 0.14rem 0"
|
|
|
+ style="height: 22px; line-height: 22px; padding: 13px 0.14rem"
|
|
|
@click="showCalendar = true"
|
|
|
>
|
|
|
- <div class="calendar" :class="showCalendar ? 'active' : ''">
|
|
|
+ <!-- <div class="calendar">
|
|
|
<div>{{ params.startTime }}~{{ params.endTime }}</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
+ <van-row style="color: #01c1b5">
|
|
|
+ <van-col span="10" class="flex">
|
|
|
+ <img
|
|
|
+ src="./images/icon_calendar.png"
|
|
|
+ style="width: 14px; height: 14px; margin-right: 8px"
|
|
|
+ />
|
|
|
+ {{ params.startTime }}</van-col
|
|
|
+ >
|
|
|
+ <van-col span="4" class="flex" style="height: 22px">
|
|
|
+ <span class="calendar-line"></span>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="10" class="flex">
|
|
|
+ <img
|
|
|
+ src="./images/icon_calendar.png"
|
|
|
+ style="width: 14px; height: 14px; margin-right: 8px"
|
|
|
+ />
|
|
|
+ {{ params.endTime }}
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
</div>
|
|
|
</van-sticky>
|
|
|
|
|
|
@@ -197,7 +217,10 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
.live-room {
|
|
|
/deep/.van-tabs__nav {
|
|
|
- background-color: #f5f5f5 !important;
|
|
|
+ background-color: #fff !important;
|
|
|
+ }
|
|
|
+ /deep/.van-tabs__wrap {
|
|
|
+ // border-bottom: 1px solid #ccc;
|
|
|
}
|
|
|
/deep/.van-tab {
|
|
|
font-size: 0.16rem;
|
|
|
@@ -212,7 +235,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.titleWrap.week {
|
|
|
- background: #f5f5f5;
|
|
|
+ background: #fff;
|
|
|
justify-content: space-between;
|
|
|
.calendar {
|
|
|
font-size: 0.14rem;
|
|
|
@@ -221,16 +244,27 @@ export default {
|
|
|
right: -0.14rem;
|
|
|
}
|
|
|
}
|
|
|
- div {
|
|
|
- display: inline-flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- font-size: 0.14rem;
|
|
|
- }
|
|
|
+ // div {
|
|
|
+ // display: inline-flex;
|
|
|
+ // flex-direction: row;
|
|
|
+ // align-items: center;
|
|
|
+ // font-size: 0.14rem;
|
|
|
+ // }
|
|
|
.active {
|
|
|
color: #01c1b5;
|
|
|
}
|
|
|
}
|
|
|
+.flex {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.calendar-line {
|
|
|
+ display: inline-block;
|
|
|
+ width: 25px;
|
|
|
+ height: 2px;
|
|
|
+ background: #d8d8d8;
|
|
|
+}
|
|
|
.active.calendar::after {
|
|
|
transform: rotate(-225deg) !important;
|
|
|
margin-top: -2px;
|
