文章列表part

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

@@ -71,28 +71,6 @@ public class RedirectController {
 		return "redirect:/maintenance/index.html";
 	}
 
-	/**
-	 * 文章列表【旧center】
-	 */
-	@GetMapping("/info/center-{id}-1.html")
-	public String toArticleList(@PathVariable("id") Integer id) {
-		return "redirect:/article/list.html?type=" + id;
-	}
-	/**
-	 * 文章列表【旧label】
-	 */
-	@GetMapping("/info/label-{id}-1.html")
-	public String toArticleList2(@PathVariable("id") Integer id) {
-		return "redirect:/article/list.html?label=" + id;
-	}
-	/**
-	 * 文章详情【旧】
-	 */
-	@GetMapping("/info/detail-{id}-1.html")
-	public String toArticleDetail(@PathVariable("id") Integer id) {
-		return "redirect:/article/detail.html?id=" + id;
-	}
-
     /**
      * 二手市场介绍
      */

src/main/java/com/caimei/www/controller/unlimited/ArticleController.java

@@ -8,14 +8,16 @@ import com.caimei.www.service.ArticleService;
 import com.github.pagehelper.PageInfo;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.ResponseBody;
 
 import java.util.List;
 
 /**
- * Description
+ * 文章页鉴于seo,保留旧链接
  *
  * @author : Charles
  * @date : 2020/7/31
@@ -31,22 +33,47 @@ public class ArticleController extends BaseController {
         this.articleService = articleService;
     }
 
-
-    /**
-     * 文章列表页
-     */
-    @GetMapping("/article/list.html")
-    public String articleList() {
-        return ARTICLE_LIST_PATH;
-    }
-
-    /**
-     * 文章详情页
-     */
-    @GetMapping("/article/detail.html")
-    public String articleDetail() {
-        return ARTICLE_DETAIL_PATH;
-    }
+	/**
+	 * 文章列表【旧center】
+	 */
+	@GetMapping("/info/center-{id}-1.html")
+	public String toArticleList(@PathVariable("id") Integer id, final Model model) {
+		List<BaseLink> typeList = articleService.getArticleTypes();
+		model.addAttribute("articleType", typeList);
+		model.addAttribute("typeId", id);
+		model.addAttribute("labelId", 0);
+		return ARTICLE_LIST_PATH;
+	}
+	/**
+	 * 文章列表【旧label】
+	 */
+	@GetMapping("/info/label-{id}-1.html")
+	public String toArticleLabel(@PathVariable("id") Integer id, final Model model) {
+		List<BaseLink> typeList = articleService.getArticleTypes();
+		model.addAttribute("articleType", typeList);
+		model.addAttribute("typeId", 0);
+		model.addAttribute("labelId", id);
+		return ARTICLE_LIST_PATH;
+	}
+	/**
+	 * 文章搜索结果
+	 */
+	@GetMapping("/info/search.html")
+	public String toArticleSearch(final Model model) {
+		List<BaseLink> typeList = articleService.getArticleTypes();
+		model.addAttribute("articleType", typeList);
+		model.addAttribute("typeId", 0);
+		model.addAttribute("labelId", 0);
+		return ARTICLE_LIST_PATH;
+	}
+	/**
+	 * 文章详情【旧】
+	 */
+	@GetMapping("/info/detail-{id}-1.html")
+	public String toArticleDetail(@PathVariable("id") Integer id, final Model model) {
+		model.addAttribute("articleId", id);
+		return ARTICLE_DETAIL_PATH;
+	}
 
     /**
      * 获取文章热门标签
@@ -68,6 +95,31 @@ public class ArticleController extends BaseController {
         return articleService.getArticleRecommended(typeId, pageNum, pageSize);
     }
 
+    /**
+     * 获取文章广告
+     */
+    @GetMapping("/article/ads")
+    @ResponseBody
+    public JsonModel<List<ImageLink>> getLastestInfoAds() {
+        return articleService.getLastestInfoAds();
+    }
+
+    /**
+     * 点击标签
+     */
+    @GetMapping("/article/label/click")
+    @ResponseBody
+    public JsonModel clickArticleLabel(Integer id){
+    	return articleService.clickArticleLabel(id);
+    }
 
+    /**
+     * 点击广告
+     */
+    @GetMapping("/article/ad/click")
+    @ResponseBody
+    public JsonModel clickArticleAd(Integer id){
+    	return articleService.clickArticleAd(id);
+    }
 
 }

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

@@ -1,5 +1,6 @@
 package com.caimei.www.mapper;
 
+import com.caimei.www.pojo.JsonModel;
 import com.caimei.www.pojo.page.BaseLink;
 import com.caimei.www.pojo.page.ImageLink;
 import org.apache.ibatis.annotations.Mapper;
@@ -15,6 +16,12 @@ import java.util.List;
  */
 @Mapper
 public interface ArticleDao {
+    /**
+     * 获取文章类型
+     * @return
+     */
+    List<BaseLink> getArticleTypes();
+
     /**
      * 获取最高点击量
      * @return
@@ -33,4 +40,20 @@ public interface ArticleDao {
      * @return
      */
     List<ImageLink> getArticleRecommended(@Param("typeId") Integer typeId);
+
+    /**
+     * 获取文章广告
+     * @return
+     */
+    List<ImageLink> getLastestInfoADs();
+
+    /**
+     * 点击广告
+     */
+    void clickArticleAd(Integer id);
+
+    /**
+     * 点击标签
+     */
+    void clickArticleLabel(Integer id);
 }

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

@@ -14,6 +14,11 @@ import java.util.List;
  * @date : 2020/8/10
  */
 public interface ArticleService {
+    /**
+     * 获取文章类型
+     */
+    List<BaseLink> getArticleTypes();
+
     /**
      * 获取文章热门标签
      */
@@ -23,4 +28,19 @@ public interface ArticleService {
      * 获取文章推荐
      */
     JsonModel<PageInfo<ImageLink>> getArticleRecommended(Integer typeId, int pageNum, int pageSize);
+
+    /**
+     * 获取文章广告
+     */
+    JsonModel<List<ImageLink>> getLastestInfoAds();
+
+    /**
+     * 点击标签
+     */
+    JsonModel clickArticleLabel(Integer id);
+
+    /**
+     * 点击广告
+     */
+    JsonModel clickArticleAd(Integer id);
 }

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

@@ -25,6 +25,14 @@ public class ArticleServiceImpl implements ArticleService {
     @Resource
     private ArticleDao articleDao;
 
+    /**
+     * 获取文章类型
+     */
+    @Override
+    public List<BaseLink> getArticleTypes() {
+        return articleDao.getArticleTypes();
+    }
+
     /**
      * 获取文章热门标签
      */
@@ -56,5 +64,32 @@ public class ArticleServiceImpl implements ArticleService {
         return JsonModel.success(pageInfo);
     }
 
+    /**
+     * 获取文章广告
+     */
+    @Override
+    public JsonModel<List<ImageLink>> getLastestInfoAds() {
+        List<ImageLink> adList = articleDao.getLastestInfoADs();
+        return JsonModel.success(adList);
+    }
+
+    /**
+     * 点击标签
+     */
+    @Override
+    public JsonModel clickArticleLabel(Integer id) {
+        articleDao.clickArticleLabel(id);
+        return JsonModel.success();
+    }
+
+    /**
+     * 点击广告
+     */
+    @Override
+    public JsonModel clickArticleAd(Integer id) {
+        articleDao.clickArticleAd(id);
+        return JsonModel.success();
+    }
+
 
 }

src/main/resources/mapper/ArticleMapper.xml

@@ -1,6 +1,14 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.caimei.www.mapper.ArticleDao">
+    <select id="getArticleTypes" resultType="com.caimei.www.pojo.page.BaseLink">
+		select  a.id,
+				a.name,
+				a.sort
+		from info_type a
+		where a.enabledStatus = 1
+		order by a.sort desc
+	</select>
     <select id="getTopClickRate" resultType="java.lang.Integer">
 		select IFNULL(clickRate, 1)
 		from info_label
@@ -9,7 +17,7 @@
 		limit 1
     </select>
     <select id="getArticleLabels" resultType="com.caimei.www.pojo.page.BaseLink">
-		select id,name,clickRate as sort
+		select id,name,clickRate as sort,link,jumpStatus as typeId
 		from info_label
 		where hotLabelStatus = 1
 		order by recommendLabelStatus desc, hotLabelStatus desc, createDate desc
@@ -28,6 +36,26 @@
 		</if>
 		order by a.pubdate desc
 	</select>
+	<select id="getLastestInfoADs" resultType="com.caimei.www.pojo.page.ImageLink">
+		select a.id, a.serviceObject as title, a.guidanceImage as image, a.link
+		from info_ad a
+		where a.location = 2
+			and a.enabledStatus = 1
+		order by a.createDate desc
+		limit 3
+	</select>
+	<update id="clickArticleAd">
+		update info_ad
+		set clickRate = IFNULL(clickRate, 0) + 1,
+			updateDate = NOW()
+		where id = #{id}
+	</update>
+	<update id="clickArticleLabel">
+		update info_label
+		set clickRate = IFNULL(clickRate, 0) + 1,
+			updateDate = NOW()
+		where id = #{id}
+	</update>
 
 
 </mapper>

src/main/resources/static/css/article/article.css

@@ -1,55 +1,176 @@
 @charset "utf-8";
-li{list-style:none}
+body,h1,h2,h3,h4,h5,h6,p,blockquote,dl,dt,dd,ul,ol,li,pre,fieldset,lengend,button,input,textarea,th,td{margin:0;padding:0}
+body,button,input,select,textarea{font:14px/1.5 Arial,sans-serif}
+input{line-height:normal}
+h1{font-size:24px}
+h2{font-size:20px}
+h3{font-size:18px}
+h4{font-size:18px}
+h5{font-size:14px}
+h1,h2,h3,h4,h5{font-weight:normal}
+address,cite,dfn,em,var{font-style:normal}
+small{font-size:11px}
+*{-webkit-box-sizing:border-box;box-sizing:border-box}
+a:hover{color:#e15616}
+abbr[title],acronym[title]{border-bottom:1px dotted;cursor:help}
+q:before,q:after{content:''}
+legend{color:#000}
+fieldset,img{border:none}
+button,input,select,textarea{font-size:100%;vertical-align:middle}
+table{border-collapse:collapse;border-spacing:0}
+html{overflow-y:scroll}
+body{font-family:"microsoft yahei",serif;color:#999}
+a{color:#999;text-decoration:none}
+ul,li{list-style:none;zoom:1}
+dl,dd,dt{zoom:1}
+.clearfix:after{display:block;width:100%;height:0;content:" ";clear:both}
+.clearfix{zoom:1}
+.clear{clear:both}
+.show{display:block;visibility:visible}
+.hide{display:none;visibility:hidden}
+.fl{float:left}
+.fr{float:right}
+.center{text-align:center}
+.list-select{width:200px;height:32px;margin:5px 0;border:1px solid #e1dedd;border-radius:3px}
+.loadData{position:fixed;left:0;top:0;width:100%;height:100%;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center}
+.light-grey{width:50px;height:36px;border:1px solid #ddd;color:#666;border-radius:5px;vertical-align:1px}
 /**
  * PC端
  */
 @media screen and (min-width:768px){
-.title{
-    background-color:#fef6f3;
-    height:40px;
-    line-height: 40px;
-    text-indent: 16px;
-    color:#E15616;
-    font-size: 16px;
-}
-.labelWrap .count{
-    background-color:#FFF;
-    padding-bottom:16px;
-    line-height: 32px;
-    max-height: 96px;
-    overflow: hidden;
-}
-.labelWrap .count a{
-    display: inline-block;
-    height: 32px;
-    line-height: 32px;
-    white-space: nowrap;
-    background-color:#f94b4b;
-    color:#FFF;
-    padding:0 14px;
-    border-radius: 2px;
-    margin: 16px 0 0 16px;
-}
-.articleWrap{
-    float: left;
-    width:885px;
-    margin-top: 16px;
-}
-.wrapAside{
-    float: right;
-    width:284px;
-    margin-top: 16px;
-}
+.header .h5-head{display:none;}
+.icon:before{content:'';display:inline-block;background:url(/img/base/icon.png) no-repeat;font-size:0}
+.pageWrap{width:100%;text-align:center;margin:20px auto 36px}
+.pageWrap a{box-sizing:border-box;display:inline-block;width:40px;height:40px;line-height:40px;border:1px solid #EBECEF;font-size:16px;margin:0 5px;color:#2D3036;background:#fff;border-radius:2px}
+.pageWrap a.on{background:#e15616;color:#fff;border:1px solid #e15616}
+.pageWrap a:hover{color:#E15616}
+.pageWrap a.on:hover{color:#fff;opacity:.8}
+.pageWrap a.btn{width:auto;color:#E15616;background:none;border:none}
+.pageWrap .prev:before{content:'\276E'}
+.pageWrap .next:before{content:'\276F'}
+.pageWrap span{display:inline-block;height:40px;line-height:40px;margin:0 5px;color:#93979F}
+.pageWrap b{color:#2D3036;font-weight:normal}
+.pageWrap input{box-sizing:border-box;width:80px;height:40px;line-height:40px;font-size:16px;border:1px solid #EBECEF;outline:none;border-radius:2px;text-align:center}
+.loading{box-sizing:border-box;padding:200px 0;text-align:center}
+.hasTop{position:fixed;left:0;bottom:0}
+.header{position:fixed;width:100%;background:#e15616;top:0;left:0;z-index:999}
+.header .nav{display:table;width:1190px;margin:0 auto}
+.nav .logo{display:table-cell;vertical-align:top;height:48px;padding:11px 0}
+.nav .logo img{width:56px;height:48px}
+.nav .type{display:table-cell;vertical-align:top;height:70px}
+.nav .type a{padding:0 22px;height:70px;line-height:70px;margin-right:1px;font-size:16px;color:#fff;text-align:center;display:table-cell;vertical-align:top;white-space:nowrap}
+.type a:hover{background-color:#e96c1c;border-bottom:solid 2px #fec19a}
+.type a.current{background-color:#e96c1c;border-bottom:solid 2px #fec19a}
+.nav .search{position:relative;display:table-cell;vertical-align:top;width:280px;height:32px;margin-left:39px}
+.nav .search .keyword{width:280px;height:32px;line-height:32px;margin:22px 0 16px 0;padding:0 32px 0 10px;border:none;border-radius:12px;background:#eb7941;color:#fff;font-size:14px}
+.search .keyword:focus{border:none;outline:medium}
+.search .searchBtn{position:absolute;top:22px;right:-1px;display:block;width:32px;height:32px;background:url(/img/info/search.png) no-repeat left 8px}
+.search .keyword::-webkit-input-placeholder{color:#fff}
+.search .keyword:-moz-placeholder{color:#fff}
+.search .keyword::-moz-placeholder{color:#fff}
+.search .keyword:-ms-input-placeholder{color:#fff}
+.content.sea-top{margin-top:110px}
+.foot{width:100%;height:130px;background:#262626;margin-top:100px}
+.footer{width:1190px;margin:0 auto;text-align:center}
+.footer .logo{display:inline-table;width:155px;height:80px;padding:25px 0}
+.footer .logo img{width:92px;height:80px;vertical-align:middle}
+.footer .dizhi{display:inline-table;color:#ccc;font-size:14px;line-height:26.28px;vertical-align:super}
+.bar{width:1190px;margin:0 auto;padding-top:90px;padding-bottom:15px}
+.bar a{color:#777;font-size:14px}
+.classify.biaoqian{border-bottom:solid 1px #ededed}
+.content{width:1190px;margin:0 auto}
+.content .new-list{width:860px;background:#fff;float:left}
+.content .row:nth-last-child(1){border-bottom:0}
+.new-list .row{position:relative;display:table;width:800px;height:150px;margin:0 30px;padding:30px 0;border-bottom:solid 1px #ededed}
+.row .new-img{position:absolute;width:210px;height:150px;margin-right:20px}
+.row .campaign{position:absolute;top:35px;left:5px;width:56px;height:24px;line-height:24px;font-size:16px;color:#fff;text-align:center;border-radius:2px;background-color:#e15616;opacity:.7;z-index:99}
+.row .new-img img{width:206px;height:146px;background: #FFF url(/img/base/placeholder.png) no-repeat center center;background-size: 80%;}
+.row .new-img img:hover{border:solid 2px #e15616;opacity:0.8}
+.row .new-img img.none:hover{border:none;opacity:1;cursor:default}
+.row .new-blurb{padding-left:230px;min-height:150px;margin-top:-5px;overflow:hidden}
+.row .new-blurb .title{width:570px;font-size:20px;line-height:30px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+.row .new-blurb .title em,.row .new-blurb .introduction em{color:#f97956}
+.P_img{width:33px;height:20px;line-height:20px;margin-right:20px;display:inline-block;margin-top:7px}
+.P_img em{display:inline-block;min-width:100px}
+.P_img em:before{width:24px;height:24px;background-position:-100px -579px;vertical-align:top;margin-right:5px}
+.new-blurb a{color:#333}
+.new-blurb a:hover{color:#e15616}
+.new-blurb a.none:hover{color:#333;cursor:default}
+.content .xinxi{color:#aaa;font-size:14px;line-height:26.28px;padding:8px 0}
+.xinxi .write{display:inline-block;margin-right:20px}
+.xinxi .write:before{width:24px;height:24px;background-position:0 -577px;vertical-align:top;margin-right:5px}
+.xinxi .time{display:inline-block;margin-right:20px}
+.xinxi .time:before{width:24px;height:24px;background-position:-33px -577px;vertical-align:top;margin-right:5px}
+.xinxi .hotspot{display:inline-block;}
+.xinxi .hotspot:before{width:24px;height:24px;background-position:-68px -577px;vertical-align:top;margin-right:5px}
+.article .date{margin-right:30px}
+.article .write{margin-left:5px;margin-right:30px}
+.row .new-blurb .introduction{color:#777;font-size:14px;line-height:26px;max-height:52px;overflow :hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.content .other{width:310px;float:right}
+.content .classify{height:50px;line-height:50px;border-left:solid 4px #e15616;font-size:20px;color:#333;padding-left:15px;padding-right:5px;background:#fff}
+.content .classify .pre,.content .classify .next{display:inline-block;width:16px;height:16px;line-height:16px;color:#fff;text-align:center;float:right;margin-right:10px;margin-top:20px;cursor:pointer;background:#ccc;font-size:12px;font-weight:normal}
+.content .classify .pre:before{content:"\276E"}
+.content .classify .next:before{content:"\276F"}
+.content .classify .pre:hover,.content .classify .next:hover{background:#e15616}
+.tags{background:#fff}
+.tag{max-height:437px;overflow:hidden;padding:18px 7px 2px 19px;border-top:solid 1px #ededed;margin-bottom:20px}
+.tag span{float:left;font-size:14px;color:#fff;height:32px;line-height:32px;padding:0 12px;background:#e15616;text-align:center;border-radius:4px;margin:2px 12px 18px 0;cursor:pointer}
+.tag span:hover{padding:0 13px;height:35px;line-height:35px;margin:0px 10px 17px 0}
+.other .recommend{background:#fff;margin-bottom:20px}
+.other .recommend .row{padding:15px;border-top:solid 1px #ededed;border-bottom:none;padding-bottom:21px}
+.row .new-img.xiao{width:100px;height:70px}
+.row .new-img.xiao img{width:98px;height:68px}
+.row .new-img.xiao img:hover{border:solid 1px #e15616}
+.row .new-blurb.xiao{padding-left:110px;min-height:70px !important}
+.row .new-blurb .shuoming{font-size:14px;line-height:25px;max-height:78px;overflow :hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
+.tui .tui-img{display:block;width:308px;max-height:434px;margin-bottom:20px;overflow:hidden;background:#FFF url(/img/base/placeholder.png) no-repeat center center;background-size:80%}
+.tui .tui-img img{width:100%;max-height:432px}
+.tui .tui-img img:hover{opacity:0.8;border:solid 1px #e15616}
+.tui .tui-img .none:hover{opacity:1;border:none;cursor:default}
+.new-list .search{width:860px;height:100px;padding:0 30px;border-bottom:solid 1px #ededed}
+.new-list .search .serachBox{position:relative;width:796px;height:50px;margin-top:30px;margin-bottom:15px}
+.new-list .serachBox .keyword{width:696px;height:50px;line-height:50px;padding-left:40px;border:1px solid #ddd;border-right:none;border-radius:12px 0 0 12px;color:#777;font-size:14px;background:url(/img/info/search1.png) no-repeat 10px 12px}
+.new-list .serachBox .keyword:focus{border:1px solid #ddd;border-right:none;outline:medium}
+.new-list .serachBox .searchBtn{position:absolute;top:0px;right:1px;display:block;width:100px;height:50px;line-height:50px;text-align:center;border-radius:0 12px 12px 0;color:#fff;background-color:#e15616;background-image:none;font-size:20px}
+.new-list .search .result{font-size:14px;color:#333}
+.search .result b{color:#e15616}
+.no-result{width:860px;height:500px;text-align:center;padding-top:100px}
+.no-result .nofound{color:#333;font-size:18px;margin-top:20px}
+.no-result .nofound span{color:#e15616}
+.no-result .change{font-size:14px;color:#666;margin-top:8px}
+.emliu{display:inline-block;min-width:100px}
 
 
 
-}
 
+}
 /**
 * 移动端
 */
 @media screen and (max-width:768px){
+.header .logo,.header .home{display:none}
+.mIcon:before{content:'';display:inline-block;font-size:0;background:url(/img/base/icon_m.png) no-repeat;background-size:75vw auto;transition:all .5s}
+.loading{box-sizing:border-box;padding:20vw 0;text-align:center}
+.header{position:relative}
+.h5-head{box-sizing:border-box;width:100%;background:#FFF;height:13.6vw;margin-bottom:2.6vw;padding:0 2.6vw;position:relative}
+.h5-head .index{float:left;width:9vw;line-height:3.4vw;text-align:center;font-size:3.7vw;color:#333}
+.h5-head .index img{width:100%}
+.h5-head .hotWord{float:right;background-color:#e15616;color:#fff;text-align:center;border-radius:5px;width:16vw;height:9.6vw;line-height:9.6vw;font-size:3.7vw;margin-top:2vw}
+.header .search{position:absolute;top:2vw;left:15vw;width:64vw;height:9.6vw;line-height:9.6vw;margin:0 auto;box-sizing:border-box;border:1px solid #FFE6DC;border-radius:5px;overflow:hidden}
+.header .search .keyword{position:absolute;left:0;top:0;border:none;outline:none;width:48vw;height:9.6vw;font-size:3.7vw;color:#4A4F58;text-indent:7.6vw;background:#FFF url(/img/info/search-m.png) no-repeat 1.6vw center;background-size:auto 60%}
+.header .search .searchBtn{position:absolute;right:0;top:0;width:16vw;height:9.6vw;font-size:3.7vw;color:#fff;text-align:center;background-color:#e15616}
+.header .search .searchBtn:before{content:'搜索'}
+#mHotWord{display:none;position:fixed;bottom:0;left:0;width:100%;height:100%;margin:0 auto;overflow-y:scroll;background-color:rgba(74,79,88,.7);z-index:999;-webkit-overflow-scrolling:touch}
+#mHotWord .tags{background:#fff;border-bottom:1px solid #e9e9e9;-webkit-box-shadow:#e7e7e7 0px 4px 8px;-moz-box-shadow:#e7e7e7 0px 4px 8px;box-shadow:#e7e7e7 0px 4px 8px;padding:2.6vw}
+#mHotWord .classify{border-left:solid 4px #e15616;height:4.6vw;font-size:4.6vw;line-height:4.6vw;padding-left:2vw;margin:3vw 0;color:#333}
+#mHotWord .tag{border-top:1px solid #ddd;padding-top:2.6vw;line-height:8vw}
+#mHotWord .tag span{display:inline-block;padding:0 2vw;line-height:6vw;font-size:3.7vw;color:#333}
+#mHotWord .close{position:absolute;right:3.6vw;top:2.6vw}
+#mHotWord .close:after{content:'\2715';font-size:4.5vw;font-weight:bold}
+.header .type{width:100%;background:#FFF;white-space:nowrap;overflow-x:scroll;height:12vw;line-height:12vw;position:relative}
+.header .type a{display:inline-block;margin-right:1vw;padding:0 2vw;font-size:3.7vw}
+.header .type:after{content:'';position:absolute;right:0;width:6vw;background-image:linear-gradient(to right,rgba(255,255,255,.5),rgba(255,255,255,1));height:100%}
 
 
-}
 
+}

src/main/resources/static/js/article/list.js

@@ -2,25 +2,225 @@ var articleList = new Vue({
     el: '#articleList',
     data: {
         loginStatus: false,
-        articleType: '',
-        labelList: '',
+        listLoading: true,
+        requestFlag: true,
+        noMore: false,
+        typeTxt: '',
+        labelTxt: '',
+        labelList: [],
+        recommend: {},
+        adList:[],
+        params: {
+            size: 8,
+            num: 1,
+            typeId: '',
+            labelId: '',
+            keyword: ''
+        },
+        listData: [],
+        listRecord: 0,
+        pageInput: ''
+    },
+    computed: {
+        pageTotal: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            total = total > 0 ? total : 1;
+            var index = this.params.num, arr = [];
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
     },
     methods: {
+        toPagination: function (pageNum) {
+            if (pageNum <= this.pageTotal) {
+                var params = {pageNum: pageNum};
+                window.location.href = updateUrlParam(params);
+            }
+        },
+        checkNum: function () {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
         getLabels: function(){
             var _self = this;
             $.getJSON("/article/labels", function (r) {
                 if (r.code === 0 && r.data) {
                     _self.labelList = r.data;
+                    _self.labelList.map(function(item){
+                        if (_self.params.labelId === item.id) {
+                            _self.labelTxt = item.name;
+                        }
+                    })
                 }
             });
-        }
+        },
+        getRecommend: function(typeId, pageNum){
+            var _self = this;
+            $.getJSON("/article/recommend",{
+                typeId: typeId,
+                pageNum: pageNum
+            }, function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.recommend= r.data;
+                }
+            });
+        },
+        getAds: function(){
+            var _self = this;
+            $.getJSON("/article/ads", function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.adList = r.data;
+                }
+            });
+        },
+        labelInfo: function(labelId, jumpStatus, link) {
+            $.getJSON("/article/label/click", {id: labelId}, function (r) {
+                if (jumpStatus && jumpStatus*1 === 1 && link) {
+                    window.location.href = link;
+                } else {
+                    window.location.href = '/info/label-' + labelId + '-1.html';
+                }
+            });
+        },
+        clickAD: function(id, link){
+            $.getJSON("/article/ad/click", {id: id}, function (r) {
+                window.open(link);
+            });
+        },
+        getArticleList: function (url, params) {
+            var _self = this;
+            $.getJSON(url, params, function (r) {
+                if (r.code === 0 && r.data) {
+                    var result = JSON.parse(r.data);
+                    _self.listRecord = result.total;
+                    var resultData = [];
+                    result.items.map(function (item) {
+                        resultData.push({
+                            id: item.a_id,
+                            title: item.a_title,
+                            image: item.a_image,
+                            intro: item.a_intro,
+                            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(","),
+                            pv: item.a_pv,
+                            publisher: item.a_publisher,
+                            publishDate: item.a_publish_date
+                        });
+                    });
+                    if(isPC){
+                        _self.listData = resultData;
+                    }else{
+                        _self.listData = _self.listData.concat(resultData);
+                    }
+                }
+                _self.listLoading = false;
+                _self.requestFlag = true;
+            })
+        },
     },
     created: function () {
-        this.articleType = getUrlParam("type");
+        if(isPC){
+            this.params.size = getUrlParam("pageSize") ? getUrlParam("pageSize") * 1 : 8;
+            this.params.num = getUrlParam("pageNum") ? getUrlParam("pageNum") * 1 : 1;
+        }else{
+            this.params.size = 8;
+            this.params.num = 1;
+        }
+        this.params.keyword = getUrlParam("keyword")?getUrlParam("keyword"):'';
+
         this.getLabels();
         // 判断登录状态
         if (globalUserData.token) {
             this.loginStatus = true;
         }
+    },
+    mounted: function () {
+        this.params.typeId = $("#typeId").val()*1;
+        this.params.labelId = $("#labelId").val()*1;
+        this.typeTxt = $("#typeTxt").val();
+        var requestUrl = '';
+        var requestParams = {};
+        if (this.params.typeId) {
+            requestUrl = spiServer+"/search/query/article/type";
+            requestParams = {
+                id: this.params.typeId,
+                pageSize: this.params.size,
+                pageNum: this.params.num
+            };
+        } else if (this.params.labelId) {
+            requestUrl = spiServer+"/search/query/article/label";
+            requestParams = {
+                id: this.params.labelId,
+                pageSize: this.params.size,
+                pageNum: this.params.num
+            };
+        } else if(this.params.keyword){
+            requestUrl = spiServer+"/search/query/article";
+            requestParams = {
+                keyword: this.params.keyword,
+                pageSize: this.params.size,
+                pageNum: this.params.num
+            };
+            $("header").find("#topSearch").remove();
+        }
+        if (requestUrl) {
+            this.getArticleList(requestUrl, requestParams);
+        }
+        if (isPC) {
+            this.getRecommend(this.params.typeId, 1);
+            this.getAds();
+        }
+        var _self = this;
+        if(!isPC){
+            $('footer').addClass("noneImportant");
+            //移动端上垃加载更多
+            $(window).on('scroll', function(){
+                var scrollTop = $(this).scrollTop();
+                var scrollHeight = $(document).height();
+                var windowHeight = window.innerHeight;
+                if (scrollTop + windowHeight >= scrollHeight) {
+                    //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
+                    var totalPage = Math.ceil(_self.listRecord / _self.params.size)?Math.ceil(_self.listRecord / _self.params.size):1;
+                    var next = _self.params.num+1;
+                    if(next <= totalPage){
+                        _self.params.num = next;
+                        requestParams.pageNum = next;
+                        if (_self.requestFlag){
+                            console.log(_self.params);
+                            // 获取列表数据
+                            _self.getArticleList(requestUrl, requestParams);
+                        }
+                        _self.requestFlag = false;
+                    }else{
+                        //到底了
+                        _self.noMore = true;
+                        $('footer').removeClass("noneImportant");
+                    }
+                }
+            });
+        }
+        $("body").on("click", ".header .hotWord", function(){
+            $("#mHotWord").show();
+        }).on("click", "#mHotWord .close,#mHotWord", function(){
+            $("#mHotWord").hide();
+        }).on("click", "#mHotWord .tags", function(e){
+            e.stopPropagation();
+        })
     }
 });

src/main/resources/static/js/base.js

@@ -200,7 +200,7 @@ $(function(){
             window.location.href = '/equipment/list.html?keyword=' + encodeURIComponent(keyword);
         } else{
             // 文章
-            window.location.href = '/article/list.html?keyword=' + encodeURIComponent(keyword);
+            window.location.href = '/info/search.html?keyword=' + encodeURIComponent(keyword);
         }
     }).on('keyup', '.keyword', function(event) {
         // 搜索输入框 按回车键搜索

src/main/resources/templates/article/components/footer.html

@@ -0,0 +1,10 @@
+<!--底部内容-->
+<div class="foot">
+    <div class="footer">
+        <div class="logo"><img src="/img/info/foot-logo.png" /></div>
+        <div class="dizhi">
+            <p>Copyright©2015-2020 CAIMEI365.com All Rights Reserved.</p>
+            <p>深圳市采美信息技术有限公司版权所有粤ICP备14019824号</p>
+        </div>
+    </div>
+</div>

src/main/resources/templates/article/components/header.html

@@ -1,34 +1,26 @@
-<header xmlns:th="http://www.w3.org/1999/xhtml">
-    <div v-if="isPC" class="articleTopNav">
-        <ul class="wrap clear">
-            <li><a href="/index.html" target="_blank">商城首页</a></li>
-            <li :class="{'on':articleType==3}"><a href="/article/list.html?type=3">新品上线</a></li>
-            <li :class="{'on':articleType==2}"><a href="/article/list.html?type=2">商城促销</a></li>
-            <li :class="{'on':articleType==6}"><a href="/article/list.html?type=6">热门和推荐</a></li>
-            <li :class="{'on':articleType==8}"><a href="/article/list.html?type=8">医美直播专栏</a></li>
-            <li :class="{'on':articleType==1}"><a href="/article/list.html?type=1">采美动态</a></li>
-            <li :class="{'on':articleType==4}"><a href="/article/list.html?type=4">美业科普</a></li>
-        </ul>
-    </div>
-    <!--搜索-->
-    <div class="baseHeadCenter article">
-        <div class="wrap clear">
-            <a href="/index.html" class="h5Only mClassBtn mIcon" title="主页"></a>
-            <a href="/" class="logo">
-                <img class="pcOnly" src="/img/base/logo.png" alt="采美 生美/医美采购服务平台"/>
-                <img class="h5Only" src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
-            </a>
-            <div class="mf h5Only mUserCenter">
-                <a href="javascript:void(0);" :class="loginStatus?'mUserIcon mIcon':'mUserIcon mIcon toLogin'" title="个人中心"></a>
-            </div>
-            <div class="searchBox" id="topSearch">
-                <div class="search">
-                    <input class="keyword" type="text" placeholder="请输入搜索关键词" />
-                    <a class="searchBtn icon mIcon" href="javascript:void(0);"></a>
-                </div>
-            </div>
+<header class="header" xmlns:th="http://www.w3.org/1999/xhtml">
+    <!--导航栏-->
+    <div class="nav">
+        <div class="h5-head">
+            <a class="index" href="/"><img src="/img/info/mall.png">商城</a>
+            <a class="hotWord" href="javascript:void(0);">热搜词</a>
+        </div>
+        <div class="logo">
+            <a href="/" target="_blank"><img src="/img/info/nav-logo.png"/></a>
+        </div>
+        <div class="type">
+            <a class="home" href="/" target="_blank">采美商城</a>
+            <a th:each="type: *{articleType}" th:text="${type.name}" th:href="'/info/center-'+${type.id}+'-1.html'" th:class="${typeId==type.id}?'typeBtn current':'typeBtn'" th:typeId="${type.id}"></a>
+        </div>
+        <!--搜索-->
+        <div class="search" id="topSearch">
+            <input class="keyword" type="text" placeholder="请输入关键词" />
+            <a class="searchBtn icon" href="javascript:void(0);"></a>
         </div>
     </div>
+    <input type="hidden" th:value="${labelId}" id="labelId">
+    <input type="hidden" th:value="${typeId}" id="typeId">
+    <input th:each="type: *{articleType}" th:if="${typeId}==${type.id}" type="hidden" th:value="${type.name}" id="typeTxt">
     <input type="hidden" th:value="${spiServer}" id="spiServer">
     <input type="hidden" th:value="${agent}" id="userAgent">
 </header>

src/main/resources/templates/article/detail.html

@@ -2,22 +2,134 @@
 <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>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, account-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
-    <template th:replace="components/head-link"></template>
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta http-equiv="pragma" content="no-cache">
+    <meta http-equiv="cache-control" content="no-cache">
+    <meta http-equiv="expires" content="0">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+    <meta http-equiv="keywords" content="采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美">
+    <meta http-equiv="description" content="采美365网——中国美业互联网共享经济平台，中国美业较大的光电美容干货信息平台，提供美容专业线客装产品、美容院消耗品、专业线院装产品、光电美容仪器、光电美容项目交易，同时提供采美公益大讲堂、光电美容干货、光电美容资讯、美业动态等行业信息。采集梦想，美启未来。">
+    <meta http-equiv="Cache-Control" content="no-transform " />
+    <link rel="shortcut icon" th:href="@{/favicon.png}" type="image/x-icon"/>
+    <link rel="bookmark" th:href="@{/favicon.png}" type="image/x-icon"/>
+    <link href="/lib/swiper.min.css" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <link href="/lib/jquery-confirm.min.css" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/base/init.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/article/article.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
-<body>
-<!-- 引用头部 -->
-<template th:replace="components/header"></template>
-
-<!-- 文章详情 -->
-<div id="articleDetail">
-    <h1 style="text-align:center">文章详情（二期）</h1>
+<body class="home listData">
+<div class="cm-modal"></div>
+<!--导航栏-->
+<template th:replace="article/components/header"></template>
+<div id="articleList">
+    <div v-if="params.typeId" class="bar">
+        <a href="/" target="_blank">首页</a>&gt; <a v-text="typeTxt" href="javascript:void(0);" class="title newTitle"></a>
+    </div>
+    <!--主体内容-->
+    <div class="sea-top content clearfix">
+        <div class="new-list article">
+            <div class="title">
+                新品|FEAMIG馥秘，全国唯一一家专业线EGFC专利成分独家授权的私密品牌。
+            </div>
+            <p class="xinxi">
+                <em class="write">
+                    小猫
+                </em>
+                <em class="date">
+                    来源：采美365网
+                </em>
+                <em class="time">
+                    2020-08-10 10:03
+                </em>
+                <span class="P_img">
+                    <em class="emliu">
+                        29
+                    </em>
+                </span>
+            </p>
+            <div class="new-mian" id="contentDiv">
+                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+            </div>
+            <!--已点赞给类名dianzan加color：#e15616;-->
+            <div class="dianzan" style="position: relative;">
+                <span class="like " data-id="6540" data-count="0">
+                    赞0
+                </span>
+                <div class="tipbox" style="display:none;">
+                    <em>
+                        您已经给该信息点过赞!
+                    </em>
+                    <a href="javascript: void(0);" class="sulf">
+                        确定
+                    </a>
+                </div>
+            </div>
+            <p class="dea-tag">
+                <span onclick="labelInfo(2824)">
+                    专利成分私密品牌
+                </span>
+                <span onclick="labelInfo(2823)">
+                    FEAMIG馥秘
+                </span>
+                <span onclick="labelInfo(2826)">
+                    深圳德灏美学管理有限公司
+                </span>
+            </p>
+        </div>
+        <div class="other">
+            <div id="mHotWord">
+                <div class="tags clearfix">
+                    <p class="classify">
+                        热搜词
+                    </p>
+                    <div class="tag">
+                        <span v-for="label in labelList" @click="labelInfo(label.id,label.typeId,label.link)" :style="'opacity:'+label.sort" v-text="label.name"></span>
+                    </div>
+                </div>
+                <a href="javascript:void(0);" class="close"></a>
+            </div>
+            <div v-if="isPC" class="recommend">
+                <p class="classify readerSify">
+                    推荐阅读
+                    <span class="nextPreBtn">
+                        <span v-if="recommend.nextPage" class="next" @click="getRecommend(params.typeId, recommend.nextPage)"></span>
+                        <span v-if="recommend.prePage" class="pre" @click="getRecommend(params.typeId, recommend.prePage)"></span>
+                    </span>
+                </p>
+                <div class="row" v-for="item in recommend.list">
+                    <div class="new-img xiao">
+                        <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+                            <img :src="item.image"/>
+                        </a>
+                    </div>
+                    <div class="new-blurb xiao">
+                        <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+                            <p class="shuoming" v-html="item.title"></p>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div v-if="isPC" class="tui">
+                <a v-for="ad in adList" href="javascript:void(0);" class="tui-img" @click="clickAD(ad.id,ad.link)">
+                    <img :src="ad.image" alt="ad.title"/>
+                </a>
+            </div>
+        </div>
+    </div>
 </div>
-
-<!-- 引入底部 -->
-<template th:replace="components/footer"></template>
+<template th:replace="article/components/footer"></template>
 <template th:replace="components/foot-link"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/article/detail.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/article/list.js(v=${version})}"></script>
 </body>
 </html>

src/main/resources/templates/article/list.html

@@ -2,51 +2,137 @@
 <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>
-    <template th:replace="components/head-link"></template>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, account-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta http-equiv="pragma" content="no-cache">
+    <meta http-equiv="cache-control" content="no-cache">
+    <meta http-equiv="expires" content="0">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+    <meta http-equiv="keywords" content="采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美">
+    <meta http-equiv="description" content="采美365网——中国美业互联网共享经济平台，中国美业较大的光电美容干货信息平台，提供美容专业线客装产品、美容院消耗品、专业线院装产品、光电美容仪器、光电美容项目交易，同时提供采美公益大讲堂、光电美容干货、光电美容资讯、美业动态等行业信息。采集梦想，美启未来。">
+    <meta http-equiv="Cache-Control" content="no-transform " />
+    <link rel="shortcut icon" th:href="@{/favicon.png}" type="image/x-icon"/>
+    <link rel="bookmark" th:href="@{/favicon.png}" type="image/x-icon"/>
+    <link href="/lib/swiper.min.css" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <link href="/lib/jquery-confirm.min.css" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/base/init.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/article/article.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
-<body>
+<body class="home listData">
+<div class="cm-modal"></div>
+<!--导航栏-->
+<template th:replace="article/components/header"></template>
 <div id="articleList">
-    <!-- 引用头部 -->
-    <template th:replace="article/components/header"></template>
+    <div v-if="params.typeId" class="bar">
+        <a href="/" target="_blank">首页</a>&gt; <a v-text="typeTxt" href="javascript:void(0);" class="title newTitle"></a>
+    </div>
+    <!--主体内容-->
+    <div :class="(params.typeId?'':'sea-top ')+'content clearfix'">
+        <div class="new-list">
+            <div v-if="params.keyword" class="search">
+                <div class="serachBox" id="topSearch">
+                    <input class="keyword" type="text" :value="params.keyword" placeholder="请输入关键词" />
+                    <a class="searchBtn" href="javascript:void(0);">搜索</a>
+                </div>
+                <p class="result">为您找到相关结果<b v-text="listRecord">0</b>条</p>
+            </div>
+            <p v-else-if="params.labelId" class="classify biaoqian">
+                <em v-text="labelTxt"></em>相关的文章
+            </p>
+            <div v-if="listData.length>0" class="dataRousce">
+                <div class="row" v-for="item in listData">
+                    <div class="new-img">
+                        <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+                            <img :src="item.image"/>
+                        </a>
+                    </div>
+                    <div class="new-blurb">
+                        <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+                            <p class="title" v-html="item.title"></p>
+                        </a>
+                        <p class="xinxi">
+                            <em class="write icon mIcon" v-text="item.publisher"></em>
+                            <em class="time icon mIcon" v-text="item.publishDate"></em>
+                            <em v-if="item.labels.length>0&&item.labels[0]" class="hotspot icon mIcon">
+                                <template v-for="(id,i) in item.labelIds">{{i>0?'，':''}}<span v-if="item.labels[i]" v-text="item.labels[i]" @click="labelInfo(id)"></span></template>
+                            </em>
+                        </p>
+                        <p class="introduction" v-html="item.intro"></p>
+                        <p class="P_img"><em class="pv icon mIcon" v-text="item.pv"></em></p>
+                    </div>
+                </div>
+            </div>
+            <div v-if="listLoading" class="loading">
+                <img src="/img/base/loading.gif">
+            </div>
+            <!-- 如果没有搜索结果。显示此div -->
+            <div v-else-if="listRecord==0" class="no-result">
+                <p><img src="/img/info/kuqi.jpg"></p>
+                <p class="nofound">很抱歉，没有找到 “<span v-text="params.keyword"></span>” 相关结果！</p>
+                <p class="change">请修改或者尝试其他搜索词</p>
+            </div>
+            <!--分页-->
+            <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
+            <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+                <a v-if="params.num>1" class="prev" @click="toPagination(params.num*1-1)" href="javascript:void(0);"></a>
+                <template v-for="n in showPageBtn">
+                    <a v-if="n" :class="{'on':(n==params.num)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
+                    <span v-else>···</span>
+                </template>
+                <a v-if="params.num<pageTotal" class="next" @click="toPagination(params.num*1+1)" href="javascript:void(0);"></a>
+                <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+                <span>跳至</span>
+                <input v-model="pageInput" @blur="checkNum()"/>
+                <span>页</span>&nbsp;
+                <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+            </div>
 
-    <!-- 文章列表 -->
-    <div class="wrap">
-        <div class="crumbs" v-if="articleType>0">
-            <a href="/">首页</a>
-            <span>&gt;</span>
-            <a v-if="articleType==3" href="/article/list.html?type=3">新品上线</a>
-            <a v-else-if="articleType==2" href="/article/list.html?type=2">商城促销</a>
-            <a v-else-if="articleType==6" href="/article/list.html?type=6">热门和推荐</a>
-            <a v-else-if="articleType==8" href="/article/list.html?type=8">医美直播专栏</a>
-            <a v-else-if="articleType==1" href="/article/list.html?type=1">采美动态</a>
-            <a v-else-if="articleType==4" href="/article/list.html?type=4">美业科普</a>
-            <span>&gt;</span> <span>正文</span>
         </div>
-        <div class="labelWrap">
-            <div class="title">热搜词</div>
-            <div class="count">
-                <a v-for="label in labelList" :href="label.id" v-text="label.name" :style="'opacity:'+label.sort"></a>
+        <div class="other">
+            <div id="mHotWord">
+                <div class="tags clearfix">
+                    <p class="classify">
+                        热搜词
+                    </p>
+                    <div class="tag">
+                        <span v-for="label in labelList" @click="labelInfo(label.id,label.typeId,label.link)" :style="'opacity:'+label.sort" v-text="label.name"></span>
+                    </div>
+                </div>
+                <a href="javascript:void(0);" class="close"></a>
             </div>
-        </div>
-    </div>
-    <div class="wrap clear">
-        <div class="articleWrap">
-            <h1 style="text-align:center">文章列表（二期）</h1>
-        </div>
-        <div class="wrapAside">
-            <div class="recommend">
-                <div class="title">推荐阅读</div>
+            <div v-if="isPC" class="recommend">
+                <p class="classify readerSify">
+                    推荐阅读
+                    <span class="nextPreBtn">
+                        <span v-if="recommend.nextPage" class="next" @click="getRecommend(params.typeId, recommend.nextPage)"></span>
+                        <span v-if="recommend.prePage" class="pre" @click="getRecommend(params.typeId, recommend.prePage)"></span>
+                    </span>
+                </p>
+                <div class="row" v-for="item in recommend.list">
+                    <div class="new-img xiao">
+                        <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+                            <img :src="item.image"/>
+                        </a>
+                    </div>
+                    <div class="new-blurb xiao">
+                        <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+                            <p class="shuoming" v-html="item.title"></p>
+                        </a>
+                    </div>
+                </div>
             </div>
-            <div class="imgList">
-
+            <div v-if="isPC" class="tui">
+                <a v-for="ad in adList" href="javascript:void(0);" class="tui-img" @click="clickAD(ad.id,ad.link)">
+                    <img :src="ad.image" alt="ad.title"/>
+                </a>
             </div>
         </div>
     </div>
-
 </div>
-<template th:replace="components/footer"></template>
+<template th:replace="article/components/footer"></template>
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/list.js(v=${version})}"></script>
 </body>