采美直播part2

src/main/java/com/caimei/www/controller/SinglePageController.java

@@ -148,4 +148,5 @@ public class SinglePageController extends BaseController {
         return singlePageService.getLiveTeachers();
     }
 
+
 }

src/main/java/com/caimei/www/mapper/SinglePageDao.java

@@ -61,4 +61,6 @@ public interface SinglePageDao {
      * @return
      */
     List<ImageLink> getLiveTeachers();
+
+
 }

src/main/java/com/caimei/www/service/SinglePageService.java

@@ -34,4 +34,5 @@ public interface SinglePageService {
     Mono<Void> downloadByWriteWith(ServerHttpResponse response) throws UnsupportedEncodingException, FileNotFoundException;
     /** 获取讲师列表 */
     JsonModel<List<ImageLink>> getLiveTeachers();
+
 }

src/main/java/com/caimei/www/service/impl/SinglePageServiceImpl.java

@@ -145,4 +145,5 @@ public class SinglePageServiceImpl implements SinglePageService {
         List<ImageLink> teacherList = singlePageDao.getLiveTeachers();
         return JsonModel.success(teacherList);
     }
+
 }

src/main/resources/mapper/SinglePageMapper.xml

@@ -59,4 +59,5 @@
         order by a.sort desc,a.createDate desc
     </select>
 
+
 </mapper>

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

@@ -7,27 +7,34 @@ li{list-style:none}
 .pageTop{width:1184px;margin:0 auto;background:#FFF}
 .pageTop img{width:100%;height:auto}
 .pageTop p{padding:16px;color:#93979F;font-size:16px;line-height:26px}
-.pageFloor .title{height:24px;line-height:24px;padding-left:10px;border-left:4px solid #E15616;margin:32px 0 16px 0;font-size:24px;color:#4A4F58;font-weight:bold;text-align:left;}
-.pageFloor .title .more {float:right;color:#627386;font-size:18px;font-weight:normal;}
+.pageFloor .title{height:24px;line-height:24px;padding-left:10px;border-left:4px solid #E15616;margin:32px 0 16px 0;font-size:24px;color:#4A4F58;font-weight:bold;text-align:left}
+.pageFloor .title .more{float:right;color:#627386;font-size:18px;font-weight:normal}
 .pageFloor .title .more:hover{color:#E15616}
-#liveTeacher{width:100%;min-height:274px;margin-bottom:30px;}
-#liveTeacher li{float:left;width:240px;height:274px;overflow:hidden;}
+.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 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}
+#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}
-#liveTeacher li .item img{display:block;width:224px;height:224px;}
+#liveTeacher li .item img{display:block;width:224px;height:224px}
 #liveTeacher .swiper-wrapper{height:274px;overflow:hidden}
-#liveTeacher .swiper-pagination{width:100%;height:14px;z-index:1;text-align:center;font-size:0;margin-top:24px;}
-#liveTeacher .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
+#liveTeacher .swiper-pagination{width:100%;height:14px;z-index:1;text-align:center;font-size:0;margin-top:24px}
+#liveTeacher .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2}
 #liveTeacher .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
-#liveTeacher .swiper-pagination span.on{width:28px;opacity:1;}
+#liveTeacher .swiper-pagination span.on{width:28px;opacity:1}
 .contactBox{padding:16px 0;background:#FFF;margin-bottom:-29px;text-align:center}
 .contactBox .item{box-sizing:border-box;display:inline-block;height:158px;width:500px;padding-left:178px;position:relative}
 .contactBox .item:first-child{margin-right:120px}
-.contactBox .item img{position:absolute;left:0;top:0;height:158px;width:158px;}
+.contactBox .item img{position:absolute;left:0;top:0;height:158px;width:158px}
 .contactBox .item span{display:inline-block;width:322px;color:#2D3036;font-size:24px;font-weight:bold;text-align:left;line-height:30px}
 .contactBox .item .tit{font-size:36px;font-weight:bold;line-height:100px}
 .contactBox .item .blue{color:#1890F9}
 .contactBox .item .red{color:#E15616}
 
+
 }
 
 /**
@@ -35,27 +42,37 @@ li{list-style:none}
 */
 @media screen and (max-width:768px){
 .pageTop{width:100%;background:#FFF}
-.pageTop img{display:block;width:93.4vw;height:auto;margin:0 auto;}
-.pageTop p{width:93.4vw;margin:0 auto;padding:4vw 0 1vw 0;color:#93979F;font-size:3.4vw;line-height:5.8vw;text-align:justify;}
-.pageFloor{width:100%;background:#FFF;margin-top: 2.7vw;}
-.pageFloor .title{height:10vw;line-height:10vw;padding-left:10px;font-size:3.7vw;color:#4A4F58;font-weight:bold;text-align:center;}
-.pageFloor .content{width:93.4vw;overflow:hidden;margin:0 auto;}
-#liveTeacher{width: calc(100% + 2.6vw);height:86vw;margin-top:-1.3vw;margin-left: -1.3vw;overflow:hidden;position:relative;}
+.pageTop img{display:block;width:93.4vw;height:auto;margin:0 auto}
+.pageTop p{width:93.4vw;margin:0 auto;padding:4vw 0 1vw 0;color:#93979F;font-size:3.4vw;line-height:5.8vw;text-align:justify}
+.pageFloor{width:100%;background:#FFF;margin-top:2.7vw}
+.pageFloor .title{height:10vw;line-height:10vw;width:93.4vw;margin:0 auto;font-size:3.7vw}
+.pageFloor .title .more{float:right;color:#627386;font-size:3.1vw;font-weight:normal}
+.pageFloor .title span.tit{font-size:3.1vw;color:#4A4F58;font-weight:bold;padding-left:1vw;border-left:.4vw solid #E15616}
+.pageFloor .content{width:93.4vw;overflow:hidden;margin:0 auto}
+.pageFloor .article{width:100%}
+.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 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}
 #liveTeacher li .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;width:29.4vw;height:39.2vw;font-size:3.4vw}
-#liveTeacher li .item img{display:block;width:100%;height:29.4vw;}
-#liveTeacher li .item span{color:#93979F;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:9.8vw;line-height:9.8vw;}
+#liveTeacher li .item img{display:block;width:100%;height:29.4vw}
+#liveTeacher li .item span{color:#93979F;font-size:3.1vw;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:9.8vw;line-height:9.8vw}
 #liveTeacher .swiper-pagination{width:100%;height:2.6vw;z-index:1;text-align:center;font-size:0;position:absolute;bottom:0;left:0}
 #liveTeacher .swiper-pagination .swiper-pagination-bullet{display:block;width:2vw;border-width:1vw 1px;border-color:transparent;cursor:pointer;background:none;font-size:0;opacity:.2}
 #liveTeacher .swiper-pagination .swiper-pagination-bullet:before{content:"";display:block;width:100%;height:.6vw;background:#E15616;border-radius:.3vw}
 #liveTeacher .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:3.8vw;opacity:1}
-.contactBox{padding:2.6vw 0;background:#FFF;margin-top:2.7vw;white-space:nowrap;margin-bottom:1px;}
+.contactBox{padding:2.6vw 0;background:#FFF;margin-top:2.7vw;white-space:nowrap;margin-bottom:1px}
 .contactBox .item{box-sizing:border-box;height:21.1vw;width:61vw;margin:0 auto;padding-left:23.8vw;position:relative}
 .contactBox .item:first-child{margin-bottom:5.3vw}
-.contactBox .item img{position:absolute;left:0;top:0;height:21.1vw;width:21.1vw;}
+.contactBox .item img{position:absolute;left:0;top:0;height:21.1vw;width:21.1vw}
 .contactBox .item span{display:block;width:37.2vw;color:#2D3036;font-size:3.2vw;font-weight:bold;text-align:left;line-height:3.6vw}
 .contactBox .item .tit{font-size:4.8vw;font-weight:bold;line-height:14vw}
 .contactBox .item .blue{color:#1890F9}
 .contactBox .item .red{color:#E15616}
 
+
+
 }

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

@@ -4,6 +4,7 @@ var livePage = new Vue({
         pageType: 0,
         liveTeachers: [],
         tecPage:1,
+        liveArticles: []
     },
     computed: {
 
@@ -28,11 +29,6 @@ var livePage = new Vue({
                                 ,trigger: "mouseover"
                             });
                         } else {
-                            /*var swiper = new Swiper('#productRecommend', {
-                                slidesPerView: 3,
-                                freeMode: true,
-                                spaceBetween: 0
-                            });*/
                             var swiper = new Swiper('#liveTeacher', {
                                 slidesPerView: 3,
                                 slidesPerColumn: 2,
@@ -52,11 +48,26 @@ var livePage = new Vue({
                 }
             });
         },
+        getLiveArticle: function(){
+            var _self = this;
+            $.getJSON(spiServer+"/search/query/article/type" ,{
+                id: 1,
+                pageSize: 4,
+                pageNum: 1
+            }, function (r) {
+                if (r.code === 0 && r.data) {
+                    var result = JSON.parse(r.data);
+                    _self.liveArticles = result.items;
+                }
+            })
+        }
 
     },
     created: function () {
         // 获取列表数据
+        this.getLiveArticle();
         this.getLiveTeachers();
+
     },
     mounted: function () {
         var _self = this;

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

@@ -25,12 +25,20 @@
                 <a href="javascript:void(0);" class="more">查看更多>>></a>
             </div>
             <ul class="article clear">
-                <li></li>
+                <li v-for="item in liveArticles"><a :href="item.aid">
+                    <img :src="item.articleimage" alt="item.articletitle">
+                    <h5 v-text="item.articletitle"></h5>
+                    <div class="label">
+                        <span class="author" v-text="item.publisher"></span>
+                        <span class="tags" v-text="item.labels"></span>
+                    </div>
+                    <p v-text="item.content"></p>
+                </a></li>
             </ul>
         </div>
         <div class="pageFloor">
             <div class="title">
-                <span>专家介绍</span>
+                <span class="tit">专家介绍</span>
             </div>
             <div class="content">
                 <div id="liveTeacher" class="swiper-container">