更新样式

src/views/liveActive/liveRoomList.vue

@@ -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;