采美直播part1

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

@@ -33,6 +33,8 @@ public class SinglePageController extends BaseController {
 	private static final String PROMOTIONS_PATH = "single-page/promotions";
 	/** 自由页面 */
 	private static final String FREE_PAGE_PATH = "single-page/page";
+	/** 采美直播页面 */
+	private static final String LIVE_PATH = "single-page/live";
 	/** 品牌招商介绍页 */
 	private static final String INVESTMENT_PATH = "single-page/investment";
 	/** 维修保养页 */
@@ -78,6 +80,19 @@ public class SinglePageController extends BaseController {
         return FREE_PAGE_PATH;
     }
 
+    /**
+     * 采美直播页面
+     */
+    @GetMapping("/live.html")
+    public String livePage(final Model model) {
+        PageContent livePage = singlePageService.getLivePageData();
+        if (livePage == null){
+            return super.getErrorPath();
+        }
+        model.addAttribute("pageData", livePage);
+        return LIVE_PATH;
+    }
+
     /**
      * 品牌招商介绍页
      */
@@ -119,10 +134,18 @@ public class SinglePageController extends BaseController {
      * 品牌招商表格下载
      */
     @GetMapping("/investment/export")
+    @ResponseBody
     public Mono<Void> downloadByWriteWith(ServerHttpResponse response) throws UnsupportedEncodingException, FileNotFoundException {
         return singlePageService.downloadByWriteWith(response);
     }
 
-
+    /**
+     * 获取讲师列表
+     */
+    @GetMapping("/live/teacher")
+    @ResponseBody
+    public JsonModel<List<ImageLink>> getLiveTeachers() {
+        return singlePageService.getLiveTeachers();
+    }
 
 }

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

@@ -49,4 +49,16 @@ public interface SinglePageDao {
      * @return
      */
     List<ImageLink> getPromotionsList();
+
+    /**
+     * 采美直播
+     * @return
+     */
+    PageContent getLivePageData();
+
+    /**
+     * 获取讲师列表
+     * @return
+     */
+    List<ImageLink> getLiveTeachers();
 }

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

@@ -24,10 +24,14 @@ public interface SinglePageService {
     PageContent getFreePageById(Integer id);
     /** 二级页面 */
     PageContent getTopicPageById(Integer id);
+    /** 采美直播 */
+    PageContent getLivePageData();
     /** 二级专题数据 */
     JsonModel<List<PageFloor>> getTopicDataById(Integer id);
     /** 专题活动列表数据 */
     JsonModel<PageInfo<ImageLink>> gePromotionsList(int pageNum, int pageSize);
     /** 品牌招商表格下载 */
     Mono<Void> downloadByWriteWith(ServerHttpResponse response) throws UnsupportedEncodingException, FileNotFoundException;
+    /** 获取讲师列表 */
+    JsonModel<List<ImageLink>> getLiveTeachers();
 }

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

@@ -58,6 +58,14 @@ public class SinglePageServiceImpl implements SinglePageService {
         return singlePageDao.getTopicPageById(id);
     }
 
+    /**
+     * 采美直播
+     */
+    @Override
+    public PageContent getLivePageData() {
+        return singlePageDao.getLivePageData();
+    }
+
     /**
      * 二级专题数据
      *
@@ -128,4 +136,13 @@ public class SinglePageServiceImpl implements SinglePageService {
         File file = new File(templateFile);
         return zeroCopyResponse.writeWith(file, 0, file.length());
     }
+
+    /**
+     * 获取讲师列表
+     */
+    @Override
+    public JsonModel<List<ImageLink>> getLiveTeachers() {
+        List<ImageLink> teacherList = singlePageDao.getLiveTeachers();
+        return JsonModel.success(teacherList);
+    }
 }

src/main/resources/mapper/SinglePageMapper.xml

@@ -14,7 +14,11 @@
         where a.type=1 and a.enabledStatus=1
         and a.id=#{id}
     </select>
-
+    <select id="getLivePageData" resultType="com.caimei.www.pojo.content.PageContent">
+        select  a.id, a.type, a.title, a.keywords, a.description, a.headImage as image, a.headText as content
+        from cm_page a
+        where a.id=1 and a.type=3 and a.enabledStatus=1
+    </select>
     <select id="getFloorByPageId" resultType="com.caimei.www.pojo.content.PageFloor">
         select id, pageId as type, title, link
         from cm_page_centre
@@ -45,5 +49,14 @@
         where a.type=4 and a.enabledStatus=1
         order by a.sort desc,a.createDate desc
     </select>
+    <select id="getLiveTeachers" resultType="com.caimei.www.pojo.content.ImageLink">
+        select  a.id as id,
+                a.title as title,
+                a.link as link,
+                a.image as image
+        from cm_page_image a
+        where a.type=3 and a.enabledStatus=1
+        order by a.sort desc,a.createDate desc
+    </select>
 
 </mapper>

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

@@ -0,0 +1,61 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+.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 .more:hover{color:#E15616}
+#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 .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 span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
+#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 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}
+
+}
+
+/**
+* 移动端
+*/
+@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;}
+#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 .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 .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 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/css/single-page/page.css

@@ -1,32 +0,0 @@
-@charset "utf-8";
-li{list-style:none}
-/**
- * PC端
- */
-@media screen and (min-width:768px){
-    .freePage {
-        width: 1184px;
-        margin: 0 auto;
-        padding:16px 0;
-        text-align:center;
-    }
-    .freePage img{max-width:100%;}
-    .freePage table{width:100%;text-align:left}
-}
-
-/**
-* 移动端
-*/
-@media screen and (max-width:768px){
-    .freePage {
-        width: 100vw;
-        margin: 0 auto;
-        text-align:center;
-    }
-   .freePage img {
-        max-width: 100%;
-        height: auto !important;
-    }
-    .freePage table{width:100%;text-align:left}
-}
-

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

@@ -9,6 +9,8 @@ li{list-style:none}
 .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 .more:hover{color:#E15616}
 .pageFloor .content{width:1202px}
 .pageFloor .content li{float:left;width:284px;height:334px;margin:0 16px 16px 0;background:#FFF}
 .pageFloor .content li img{display:block;width:284px;height:284px}

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

@@ -0,0 +1,64 @@
+var livePage = new Vue({
+    el: "#livePage",
+    data: {
+        pageType: 0,
+        liveTeachers: [],
+        tecPage:1,
+    },
+    computed: {
+
+    },
+    methods: {
+        getLiveTeachers: function () {
+            var _self = this;
+            $.getJSON("/live/teacher").done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.liveTeachers = r.data;
+                    _self.tecPage = Math.ceil(r.data.length / 5);
+                    setTimeout(function(){
+                        if (isPC) {
+                            $('#liveTeacher').slide({
+                                mainCell:".swiper-wrapper"
+                                ,titCell:".swiper-pagination span"
+                                ,effect: "leftLoop"
+                                ,interTime: 3000
+                                ,autoPlay: true
+                                ,scroll:5
+                                ,vis:5
+                                ,trigger: "mouseover"
+                            });
+                        } else {
+                            /*var swiper = new Swiper('#productRecommend', {
+                                slidesPerView: 3,
+                                freeMode: true,
+                                spaceBetween: 0
+                            });*/
+                            var swiper = new Swiper('#liveTeacher', {
+                                slidesPerView: 3,
+                                slidesPerColumn: 2,
+                                spaceBetween: 0,
+                                slidesPerGroup: 3,
+                                pagination: {
+                                    el: '.swiper-pagination',
+                                    clickable: true,
+                                },
+                                autoplay: {
+                                    delay: 3000,
+                                    disableOnInteraction: false
+                                },
+                            });
+                        }
+                    },500);
+                }
+            });
+        },
+
+    },
+    created: function () {
+        // 获取列表数据
+        this.getLiveTeachers();
+    },
+    mounted: function () {
+        var _self = this;
+    }
+});

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

@@ -89,11 +89,7 @@ var investment = new Vue({
             this.firstPage = true;
         },
         toDownload: function(){
-            $.get("investment/export").done(function (r) {
-                if (r.code === 0 && r.data) {
-                    window.location.href =  r.data;
-                }
-            });
+            window.location.href = $.get("investment/export");
         }
     }
 });

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

@@ -2,20 +2,70 @@
 <html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="https://www.thymeleaf.org ">
 <head>
-    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
+    <title th:text="'采美365网-'+${pageData.title}"></title>
+    <meta http-equiv="keywords" th:content="${pageData.keywords}">
+    <meta http-equiv="description" th:content="${pageData.description}">
     <template th:replace="components/headLink"></template>
+    <link th:href="@{/css/single-page/live.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
 <!-- 引用头部 -->
 <template th:replace="components/header"></template>
 
-<!-- 专题活动列表页 -->
-<div id="container">
-
+<!-- 采美直播 -->
+<div id="livePage">
+    <div class="pageTop">
+        <img th:src="${pageData.image}">
+        <p th:if="not${#strings.isEmpty(pageData.content)}" th:utext="${pageData.content}"></p>
+    </div>
+    <div class="wrap">
+        <div class="pageFloor">
+            <div class="title">
+                <span>直播专栏</span>
+                <a href="javascript:void(0);" class="more">查看更多>>></a>
+            </div>
+            <ul class="article clear">
+                <li></li>
+            </ul>
+        </div>
+        <div class="pageFloor">
+            <div class="title">
+                <span>专家介绍</span>
+            </div>
+            <div class="content">
+                <div id="liveTeacher" class="swiper-container">
+                    <ul class="swiper-wrapper" v-cloak>
+                        <li class="swiper-slide mfc" v-for="item in liveTeachers">
+                            <div class="item">
+                                <img :src="item.image">
+                                <span v-text="item.title"></span>
+                            </div>
+                        </li>
+                    </ul>
+                    <div v-show="tecPage>1" class="swiper-pagination mfc"><span v-if="isPC" v-for="i in tecPage"></span></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="contactBox">
+        <div class="cont">
+            <div class="item">
+                <img src="/img/live/qr_live_teacher.jpg">
+                <span class="tit blue">我要讲课</span>
+                <span>联系方式：18948790365</span>
+            </div>
+            <div class="item">
+                <img src="/img/live/qr_live_teacher.jpg">
+                <span class="tit red">我要听课</span>
+                <span>扫码关注回复“报名”</span>
+            </div>
+        </div>
+    </div>
 </div>
 
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/footLink"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/single-page/live.js(v=${version})}"></script>
 </body>
 </html>

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

@@ -6,7 +6,20 @@
     <meta http-equiv="keywords" th:content="${pageData.keywords}">
     <meta http-equiv="description" th:content="${pageData.description}">
     <template th:replace="components/headLink"></template>
-    <link th:href="@{/css/single-page/page.css(v=${version})}" rel="stylesheet" type="text/css">
+    <style type="text/css">
+        /** PC端 */
+        @media screen and (min-width:768px){
+            .freePage{width:1184px;margin:0 auto;padding:16px 0;text-align:center;}
+            .freePage img{max-width:100%;}
+            .freePage table{width:100%;text-align:left}
+        }
+        /** 移动端 */
+        @media screen and (max-width:768px){
+            .freePage{width:100vw;margin:0 auto;text-align:center;}
+            .freePage img {max-width:100%;height:auto !important;}
+            .freePage table{width:100%;text-align:left}
+        }
+    </style>
 </head>
 <body>
 <!-- 引用头部 -->

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

@@ -16,11 +16,14 @@
 <div id="topicPage">
     <div class="pageTop">
         <img th:src="${pageData.image}">
-        <p th:utext="${pageData.content}"></p>
+        <p th:if="not${#strings.isEmpty(pageData.content)}" th:utext="${pageData.content}"></p>
     </div>
     <div class="wrap">
         <div class="pageFloor" v-for="floor in floorDatas">
-            <div class="title" v-text="floor.title"></div>
+            <div class="title">
+                <span v-text="floor.title"></span>
+                <a v-if="floor.link" :href="floor.link" class="more">查看更多>>></a>
+            </div>
             <ul class="content clear">
                 <li v-for="item in floor.floorData">
                     <a :href="item.link">
@@ -31,7 +34,7 @@
             </ul>
         </div>
     </div>
-    <div class="contactBox">
+    <div v-if="pageType==6" class="contactBox">
         <div class="tit"><span>加入正品联盟</span></div>
         <div class="cont">
             <span class="icon mIcon call">0755-22907771转806<br>15338851365</span>