直播文章列表

src/main/resources/config/dev/application-dev.yml

@@ -2,7 +2,7 @@ spring:
   #数据源连接--start
   datasource:
     #driverClassName: com.mysql.jdbc.Driver
-    url: jdbc:mysql://192.168.1.11:3306/caimei@20180509?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
+    url: jdbc:mysql://192.168.1.11:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
     username: developer
     password: 05bZ/OxTB:X+yd%1
 #    url: jdbc:mysql://119.29.0.46:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai

src/main/resources/static/css/single-page/live.css

@@ -12,10 +12,16 @@ li{list-style:none}
 .pageFloor .title .more:hover{color:#E15616}
 .pageFloor .article{width:1202px}
 .pageFloor .article li{float:left;width:584px;height:232px;margin:0 16px 16px 0;background:#FFF;overflow:hidden;box-sizing:border-box;padding:6px 16px 16px 232px;position:relative;color:#93979F;line-height:24px;font-size:14px}
-.pageFloor .article img{position:absolute;left:16px;top:16px;width:200px;height:200px}
+.pageFloor .article img{position:absolute;left:16px;top:16px;width:200px;height:200px;box-sizing:border-box;}
+.pageFloor .article img:hover{border:1px solid #E15616;}
 .pageFloor .article h5{color:#2D3036;font-size:18px;max-height:64px;line-height:32px;margin-bottom:16px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
-.pageFloor .article .label{margin-bottom:16px;max-height:48px;overflow:hidden}
-.pageFloor .article p{height:48px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.pageFloor .article .label{margin-bottom:16px;color:#93979f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.pageFloor .article .author:before{width:24px;height:24px;vertical-align:top;background-position:0 -577px;margin-right:5px}
+.pageFloor .article .tags{margin-left:20px}
+.pageFloor .article .tags:before{width:24px;height:24px;vertical-align:top;background-position:-67px -577px;margin-right:5px}
+.pageFloor .article .tags a{color:#93979f;}
+.pageFloor .article .tags a:hover{color:#E15616;}
+.pageFloor .article p{height:72px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
 #liveTeacher{width:100%;min-height:274px;margin-bottom:30px}
 #liveTeacher li{float:left;width:240px;height:274px;overflow:hidden}
 #liveTeacher li .item{width:224px;height:274px;line-height:50px;background:#FFF}
@@ -53,7 +59,11 @@ li{list-style:none}
 .pageFloor .article li{width:100%;height:34.8vw;border-top:1px solid #F5F5F5;background:#FFF;overflow:hidden;box-sizing:border-box;padding:2vw 37vw 2vw 3.3vw;position:relative;color:#93979F;line-height:3.5vw;font-size:2.6vw}
 .pageFloor .article img{position:absolute;right:3.3vw;top:2.3vw;width:30.4vw;height:30.4vw}
 .pageFloor .article h5{color:#2D3036;font-size:3.4vw;max-height:9.6vw;line-height:4.8vw;margin-bottom:2vw;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
-.pageFloor .article .label{margin-bottom:2vw;max-height:7vw;overflow:hidden}
+.pageFloor .article .label{margin-bottom:2vw;line-height:5.4vw;color:#93979f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.pageFloor .article .author:before{width:5.4vw;height:5.4vw;vertical-align:top;background-position:10% 64.2%;;margin-right:.2vw}
+.pageFloor .article .tags{margin-left:3vw}
+.pageFloor .article .tags:before{width:5.4vw;height:5.4vw;vertical-align:top;background-position:0 64.2%;margin-right:.2vw}
+.pageFloor .article .tags a{color:#93979f;}
 .pageFloor .article p{height:7vw;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 #liveTeacher{width:calc(100% + 2.6vw);height:86vw;margin-top:-1.3vw;margin-left:-1.3vw;overflow:hidden;position:relative}
 #liveTeacher li{width:32vw!important;height:41.8vw;overflow:hidden;text-align:center;background:none}

src/main/resources/static/js/single-page/live.js

@@ -57,7 +57,21 @@ var livePage = new Vue({
             }, function (r) {
                 if (r.code === 0 && r.data) {
                     var result = JSON.parse(r.data);
-                    _self.liveArticles = result.items;
+                    result.items.map(function (item) {
+                        _self.liveArticles.push({
+                            id: item.a_id,
+                            title: item.a_title,
+                            image: item.a_image,
+                            publisher: item.a_publisher,
+                            publishDate: item.a_publish_date,
+                            intro: item.a_intro,
+                            pv: item.a_pv,
+                            typeId: item.a_type_id,
+                            type: item.a_type_text,
+                            labelIds: item.a_label_ids.replace(/[^[\d|\S]]*/g, ',').split(","),
+                            labels: item.a_label_text.replace(/[^[\d|\S]]*/g, ',').split(",")
+                        });
+                    });
                 }
             })
         }

src/main/resources/templates/single-page/live.html

@@ -25,15 +25,17 @@
                 <a href="javascript:void(0);" class="more">查看更多>>></a>
             </div>
             <ul class="article clear">
-                <li v-for="item in liveArticles"><a :href="item.aid">
-                    <img :src="item.articleimage" alt="item.articletitle">
-                    <h5 v-text="item.articletitle"></h5>
+                <li v-for="item in liveArticles">
+                    <a :href="item.id"><img :src="item.image" alt="item.title"></a>
+                    <h5><a :href="item.id" v-text="item.title"></a></h5>
                     <div class="label">
-                        <span class="author" v-text="item.publisher"></span>
-                        <span class="tags" v-text="item.labels"></span>
+                        <span class="author icon mIcon" v-text="item.publisher"></span>
+                        <span class="tags icon mIcon">
+                            <template v-for="(id,i) in item.labelIds">{{i>0?'，':''}}<a v-if="item.labels[i]" v-text="item.labels[i]"href="javascript:void(0);"></a></template>
+                        </span>
                     </div>
-                    <p v-text="item.content"></p>
-                </a></li>
+                    <p v-text="item.intro"></p>
+                </li>
             </ul>
         </div>
         <div class="pageFloor">