1

src/router/index.js

@@ -248,7 +248,7 @@ const routes = [
   {
     path: '/channel/index',
     name: 'channel',
-    meta: { title: '科技频道', isleftarrow: true },
+    meta: { title: '科技频道', isleftarrow: false },
     component: () => import('../views/channel/index.vue'),
   },
 ];

src/views/channel/index.vue

@@ -7,19 +7,18 @@
         </el-col>
         <el-col :span="24" class="main">
           <el-col :span="24" class="con">
-            <el-col :span="24" class="list" v-for="(item, index) in lists" :key="index">
+            <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
               <el-col :span="11" class="video">
-                <el-image :src="item.image_path" style="width:100%;height:100%;border-radius: 10px;" v-if="item.image_path"></el-image>
-                <el-image v-else style="width:100%;height:100%">
+                <el-image :src="item.image_path">
                   <div slot="error" class="image-slot">
-                    <el-image :src="url1" style="width:100%;height:100%;border-radius: 10px;"></el-image>
+                    <el-image :src="noimage"> </el-image>
                   </div>
                 </el-image>
               </el-col>
               <el-col :span="13" class="text">
-                <el-col :span="24" class="title textOver">{{ item.title }}</el-col>
-                <el-col :span="24" class="desc">{{ item.desc }}</el-col>
-                <el-col :span="24" class="time textOver">{{ item.create_time }}</el-col>
+                <p class="title textOver">{{ item.title }}</p>
+                <p class="desc">{{ item.desc }}</p>
+                <p class="time textOver">{{ item.create_time }}</p>
               </el-col>
             </el-col>
           </el-col>
@@ -52,8 +51,8 @@ export default {
       // 返回
       navShow: true,
       //列表
-      lists: [],
-      url1: require('@/assets/222.png'),
+      list: [],
+      noimage: require('@/assets/kjzx.jpg'),
     };
   },
   created() {
@@ -63,9 +62,8 @@ export default {
     ...channel(['query', 'fetch']),
     async search() {
       const res = await this.query();
-      console.log(res);
       if (this.$checkRes(res)) {
-        this.$set(this, `lists`, res.data);
+        this.$set(this, `list`, res.data);
       }
     },
   },
@@ -102,12 +100,15 @@ export default {
     .list {
       padding: 10px;
       background-color: #fff;
-      height: 120px;
       border-radius: 5px;
       margin: 0 0 10px 0;
       .video {
-        height: 100%;
+        height: 100px;
+        overflow: hidden;
         .el-image {
+          width: 100%;
+          height: 100%;
+          border-radius: 10px;
           /deep/.image-slot {
             width: 100%;
             height: 100%;
@@ -115,27 +116,30 @@ export default {
         }
       }
       .text {
-        padding-left: 15px;
         height: 100px;
+        overflow: hidden;
         position: relative;
+        padding: 0 0 0 10px;
         .title {
           font-size: 16px;
-          font-weight: bolder;
+          font-weight: bold;
         }
         .desc {
-          margin-top: 9px;
           overflow: hidden;
           text-overflow: ellipsis;
           display: -webkit-box;
           -webkit-line-clamp: 3;
           -webkit-box-orient: vertical;
+          padding: 3px 0;
           font-size: 12px;
+          color: #666;
         }
         .time {
-          font-size: 12px;
           position: absolute;
           bottom: 0px;
-          width: 98%;
+          width: 95%;
+          font-size: 12px;
+          color: #666;
         }
       }
     }