更新

src/views/index.vue

@@ -12,37 +12,52 @@
           </van-col>
           <van-col span="24" class="click">
             <van-col span="6" class="btn" @click.native="$router.push({ path: '/live/roomlist' })">
-              <i class="iconfont iconzhibo icon"></i>
-              <p>直播入口</p>
+              <i class="iconfont iconzhibo icon" style="color:#51A9FA;"></i>
+              <p style="color:#51A9FA;">直播入口</p>
             </van-col>
             <van-col span="6" class="btn" @click.native="$router.push({ path: '/live/roomrecord' })">
-              <i class="iconfont icondajiangtang icon"></i>
-              <p>往期讲堂</p>
+              <i class="iconfont icondajiangtang icon" style="color:#FC8308;"></i>
+              <p style="color:#FC8308;">往期讲堂</p>
             </van-col>
             <van-col span="6" class="btn" @click.native="$router.push({ path: '/user/index' })">
-              <i class="iconfont icongerenzhongxin icon"></i>
-              <p>个人中心</p>
+              <i class="iconfont icongerenzhongxin icon" style="color:#FD846F;"></i>
+              <p style="color:#FD846F;">个人中心</p>
             </van-col>
             <van-col span="6" class="btn">
-              <i class="iconfont icongerenzhongxin icon"></i>
-              <p>测试按钮</p>
+              <i class="iconfont icongerenzhongxin icon" style="color: #ccc;"></i>
+              <p style="color: #ccc;">待开放</p>
             </van-col>
           </van-col>
           <van-col span="24" class="after">
-            <h4>往期直播</h4>
+            <h4 style="color:#0DB1AF">往期直播</h4>
             <van-col span="24">
-              <van-col span="11" class="videoList" v-for="(item, index) in videoList" :key="index">
-                <van-image :src="item.filedir" @click.native="$router.push({ path: '/onlive/videoinfo', query: { id: item.id, fileid: item.file_id } })" />
-                <p>{{ item.title }}</p>
+              <van-col
+                span="24"
+                class="videoList"
+                v-for="(item, index) in videoList"
+                :key="index"
+                @click.native="$router.push({ path: '/onlive/videoinfo', query: { id: item.id, fileid: item.file_id } })"
+              >
+                <van-col span="9" class="image">
+                  <van-image :src="item.filedir" />
+                </van-col>
+                <van-col span="15" class="text">
+                  <p class="textOver">{{ item.title }}</p>
+                  <p>时间:{{ item.starttime }}</p>
+                  <p>
+                    <span>{{ item.username }}</span>
+                    <span>¥{{ item.price }}</span>
+                  </p>
+                </van-col>
               </van-col>
             </van-col>
           </van-col>
           <van-col span="24" class="foot">
             <van-tabbar v-model="active">
               <van-tabbar-item icon="home-o">首页</van-tabbar-item>
-              <van-tabbar-item icon="search">直播</van-tabbar-item>
-              <van-tabbar-item icon="friends-o">往期</van-tabbar-item>
-              <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
+              <van-tabbar-item icon="tv-o">直播</van-tabbar-item>
+              <van-tabbar-item icon="replay">往期</van-tabbar-item>
+              <van-tabbar-item icon="contact">我的</van-tabbar-item>
             </van-tabbar>
           </van-col>
         </van-col>
@@ -190,23 +205,35 @@ export default {
       padding: 0 10px;
     }
     .videoList {
-      border: 1px solid #ccc;
-      margin: 0 0 10px 10px;
-      width: 46%;
-      border-radius: 5px;
-      .van-image {
-        width: 100%;
-        height: 140px;
-        border-radius: 5px;
+      position: relative;
+      padding: 0 10px;
+      .image {
+        .van-image {
+          height: 90px;
+        }
       }
-      p {
-        font-size: 14px;
-        padding: 5px;
-        color: #333;
-        text-align: left;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+      .text {
+        padding: 0 5px;
+        p:first-child {
+        }
+        p:nth-child(2) {
+          font-size: 14px;
+          padding: 5px 0;
+          color: #333;
+        }
+        p:last-child {
+          position: absolute;
+          bottom: 8px;
+          width: 57%;
+          span {
+            display: inline-block;
+            width: 50%;
+            font-size: 14px;
+          }
+          span:last-child {
+            text-align: right;
+          }
+        }
       }
     }
   }

src/views/live/parts/liveList.vue

@@ -2,7 +2,13 @@
   <div id="liveList">
     <el-row>
       <el-col :span="24" class="info">
-        <el-col class="list" :span="12" v-for="(item, index) in list" :key="index">
+        <el-col
+          class="list"
+          :span="12"
+          v-for="(item, index) in list"
+          :key="index"
+          @click.native="$router.push({ path: '/onlive/roomInfo', query: { id: item.id } })"
+        >
           <!-- <el-col :span="18" class="left">
             <p class="textOver">{{ item.title }}</p>
             <p>
@@ -17,11 +23,9 @@
             <p @click="$router.push({ path: '/live/detail', query: { id: item.id } })" v-else>进入房间</p>
             <p @click="$router.push({ path: '/onlive/roomInfo', query: { roomname: item.roomname } })" v-if="item.roomname">房间详情</p>
           </el-col> -->
-          <el-col :span="24" class="detail" @click.native="$router.push({ path: '/onlive/roomInfo', query: { id: item.id } })">
-            <el-image :src="item.filedir"></el-image>
-            <p class="textOver">[房间号:{{ item.name }}]{{ item.title }}</p>
-            <van-col :span="24" class="starttime"><van-icon name="underway-o" />开始时间:{{ item.starttime }}</van-col>
-          </el-col>
+          <el-image :src="item.filedir"></el-image>
+          <p class="textOver">[房间号:{{ item.name }}]{{ item.title }}</p>
+          <van-col :span="24" class="starttime"><van-icon name="underway-o" style="position: relative;top: 2px;" />开始时间:{{ item.starttime }}</van-col>
         </el-col>
       </el-col>
     </el-row>
@@ -99,13 +103,9 @@ export default {
 // }
 .list {
   padding: 5px;
-  height: 140px;
-  margin: 0 0 5px 0;
-}
-.detail {
+  margin: 0 0 10px 0;
+  box-shadow: 0 0 5px #ccc;
   border-radius: 5px;
-  height: 140px;
-  border: 1px solid #f5f5f5;
 }
 /deep/.el-image {
   overflow: hidden;
@@ -114,6 +114,7 @@ export default {
 }
 .detail p {
   font-size: 12px;
+  margin: 5px 0 0 0;
 }
 .starttime {
   font-size: 12px;

src/views/record/parts/liveList.vue

@@ -2,7 +2,13 @@
   <div id="liveList">
     <el-row>
       <el-col :span="24" class="info">
-        <el-col class="list" :span="12" v-for="(item, index) in list" :key="index">
+        <el-col
+          class="list"
+          :span="12"
+          v-for="(item, index) in list"
+          :key="index"
+          @click.native="$router.push({ path: '/onlive/videoinfo', query: { id: item.id, fileid: item.file_id } })"
+        >
           <!-- <el-col :span="18" class="left">
             <p class="textOver">{{ item.title }}</p>
             <p>
@@ -17,11 +23,9 @@
             <p @click="$router.push({ path: '/live/detail', query: { id: item.id } })" v-else>进入房间</p>
             <p @click="$router.push({ path: '/onlive/roomInfo', query: { roomname: item.roomname } })" v-if="item.roomname">房间详情</p>
           </el-col> -->
-          <el-col :span="24" class="detail" @click.native="$router.push({ path: '/onlive/videoinfo', query: { id: item.id, fileid: item.file_id } })">
-            <el-image :src="item.filedir"></el-image>
-            <p class="textOver">{{ item.title }}</p>
-            <van-col :span="24" class="starttime"><van-icon name="underway-o" />主讲人:{{ item.username }}</van-col>
-          </el-col>
+          <el-image :src="item.filedir"></el-image>
+          <p class="textOver">{{ item.title }}</p>
+          <van-col :span="24" class="starttime"><van-icon name="underway-o" style="position: relative;top: 2px;" />主讲人:{{ item.username }}</van-col>
         </el-col>
       </el-col>
     </el-row>
@@ -101,13 +105,9 @@ export default {
 // }
 .list {
   padding: 5px;
-  height: 140px;
-  margin: 0 0 5px 0;
-}
-.detail {
+  margin: 0 0 10px 0;
   border-radius: 5px;
-  height: 140px;
-  border: 1px solid #f5f5f5;
+  box-shadow: 0 0 5px #ccc;
 }
 /deep/.el-image {
   overflow: hidden;