文章详情2 移动端优化

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

@@ -10,10 +10,8 @@ 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.util.MultiValueMap;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.server.ServerWebExchange;
-import reactor.core.publisher.Mono;
 
 import java.util.List;
 

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

@@ -84,4 +84,11 @@ public interface ArticleDao {
      * @param infoId
      */
     void articleLike(Integer infoId);
+
+    /**
+     * 根据文章标签查找标签Id
+     * @param labelTexts
+     * @return
+     */
+    List<Integer> findLabelIdsByName(@Param("labelTexts") String[] labelTexts);
 }

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

@@ -11,6 +11,7 @@ import com.caimei.www.utils.ImageUtil;
 import com.caimei.www.utils.PriceUtil;
 import com.github.pagehelper.PageHelper;
 import com.github.pagehelper.PageInfo;
+import com.github.pagehelper.util.StringUtil;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.http.server.reactive.ServerHttpRequest;
 import org.springframework.stereotype.Service;
@@ -130,7 +131,15 @@ public class ArticleServiceImpl implements ArticleService {
         Article articleInfo = articleDao.getArticleInfo(id);
         if (articleInfo != null) {
             String[] labels = articleInfo.getLabel().split(",");
-            articleInfo.setLabels(labels);
+            if(labels.length > 0){
+                boolean notEmpty = StringUtil.isNotEmpty(labels[0]);
+                if(notEmpty){
+                    List<Integer> labelIdList = articleDao.findLabelIdsByName(labels);
+                    Integer[] labelIds = labelIdList.toArray(new Integer[labels.length]);
+                    articleInfo.setLabels(labels);
+                    articleInfo.setLabelIds(labelIds);
+                }
+            }
         }
         return articleInfo;
     }

src/main/resources/mapper/ArticleMapper.xml

@@ -118,6 +118,17 @@
 		  a.id = #{id}
 		  AND a.enabledStatus = 1
 	</select>
+	<select id="findLabelIdsByName" resultType="java.lang.Integer">
+		select id
+		from info_label
+		where  infoLabelStatus = 1
+		and name in
+		<foreach collection="labelTexts" item="label" open="(" close=")" index="index" separator=",">
+			#{label}
+		</foreach>
+		group by name
+		order by clickRate desc
+	</select>
 
 
 </mapper>

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

@@ -1,5 +1,4 @@
-@charset "utf-8";
-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}
+@charset "utf-8";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}
@@ -34,240 +33,192 @@ dl,dd,dt{zoom:1}
 .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){
-.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;padding:20px 0 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;position:relative;}
-.content .mainData{float:left;width:860px;}
-.content .new-list{width:100%;background:#fff;}
-.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;line-height:24px;}
-.P_img em:before{width:24px;height:24px;background-position:-185px -329px;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:-83px -329px;vertical-align:top;margin-right:5px}
-.xinxi .time{display:inline-block;margin-right:20px}
-.xinxi .time:before{width:24px;height:24px;background-position:-117px -329px;vertical-align:top;margin-right:5px}
-.xinxi .hotspot{display:inline-block;}
-.xinxi .hotspot:before{width:24px;height:24px;background-position:-150px -329px;vertical-align:top;margin-right:5px}
-.xinxi .pv{display:inline-block;margin-right:20px}
-.xinxi .pv:before{width:24px;height:24px;background-position:-185px -329px;vertical-align:top;margin-right:5px}
-.xinxi .source{display:inline-block;margin-right:20px}
-.xinxi .source:before{width:24px;height:24px;background-position:-285px -329px;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 a{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 a: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}
-.middle {
-    text-align: center;
-    font-size: 16px;
-    padding: 200px 0;
+.article img{max-width:100% !important;height:auto !important}
+@media screen and (min-width:768px){.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;padding:20px 0 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;position:relative}
+	.content .mainData{float:left;width:860px}
+	.content .new-list{width:100%;background:#fff}
+	.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;line-height:24px}
+	.P_img em:before{width:24px;height:24px;background-position:-185px -329px;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:-83px -329px;vertical-align:top;margin-right:5px}
+	.xinxi .time{display:inline-block;margin-right:20px}
+	.xinxi .time:before{width:24px;height:24px;background-position:-117px -329px;vertical-align:top;margin-right:5px}
+	.xinxi .hotspot{display:inline-block}
+	.xinxi .hotspot:before{width:24px;height:24px;background-position:-150px -329px;vertical-align:top;margin-right:5px}
+	.xinxi .pv{display:inline-block;margin-right:20px}
+	.xinxi .pv:before{width:24px;height:24px;background-position:-185px -329px;vertical-align:top;margin-right:5px}
+	.xinxi .source{display:inline-block;margin-right:20px}
+	.xinxi .source:before{width:24px;height:24px;background-position:-285px -329px;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 a{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 a: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}
+	.middle{text-align:center;font-size:16px;padding:200px 0}
+	.middle img{width:200px}
+	.content .new-list.article{padding:24px;margin-bottom:20px}
+	.article .title{line-height:40px;font-size:28px;color:#333}
+	.article .xinxi{margin-top:5px;padding-bottom:14px;border-bottom:solid 1px #ededed}
+	.article .new-mian{margin:23px 0;width:760px}
+	.article .new-mian img{max-width:100%;display:inline-block;display:block;margin:0 auto;height:auto !important}
+	.article p{font-size:16px;line-height:30px;color:#777;margin-bottom:15px}
+	.dianzan{width:auto;text-align:center}
+	.article .like{cursor:pointer;display:inline-block;height:60px;line-height:60px;margin:30px auto;border:1px solid #eee;color:#777;border-radius:5px;padding:0 20px}
+	.article .like:before{width:50px;height:50px;background-position:-320px -60px;vertical-align:middle;margin-right:5px}
+	.like.hasDian{color:#e15616}
+	.dea-tag a{display:inline-block;color:#fff;height:32px;line-height:32px;padding:0 12px;background:#e15616;text-align:center;border-radius:4px;margin-right:15px;cursor:pointer}
 }
-.middle img{width:200px;}
-/* article content */
-.content .new-list.article{
-	padding: 24px;
-	margin-bottom: 20px;
-}
-.article .title{
-	line-height: 40px;
-	font-size: 28px;
-	color: #333;
-}
-.article .xinxi{
-	margin-top: 5px;
-	padding-bottom: 14px;
-	border-bottom: solid 1px #ededed;
-}
-.article .new-mian{
-	margin: 23px 0;
-	width: 760px;
-}
-.article .new-mian img{
-	max-width: 100%;
-	display: inline-block;
-	display: block;
-	margin: 0 auto;
-	height: auto !important;
-}
-.article p{
-	font-size: 16px;
-	line-height: 30px;
-	color: #777;
-	margin-bottom: 15px;
-}
-.dianzan{
-	width:auto;
-	text-align: center;
-}
-.article .like{
-	cursor: pointer;
-	display: inline-block;
-	height: 60px;
-	line-height: 60px;
-	margin: 30px auto;
-	border: 1px solid #eee;
-    color: #777;
-    border-radius: 5px;
-        padding: 0 20px;
-}
-.article .like:before{
-	width:50px;
-	height:50px;
-	background-position: -320px -60px;
-	vertical-align: middle;
-	margin-right:5px;
-}
-.like.hasDian {
-    color: #e15616;
-}
-
-
-
-
-
-
-
-}
-/**
-* 移动端
-*/
-@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:100vw 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}
-.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}
-.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%}
-.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}
-.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 a{display:inline-block;padding:0 2vw;line-height:6vw;font-size:3.7vw;color:#E15616}
-#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;height:12vw;line-height:12vw;position:relative;}
-.header .type>div{width:100%;overflow-x:auto;padding-right:5vw;box-sizing:border-box;}
-.header .type a{display:inline-block;margin-right:1vw;padding:0 2vw;font-size:3.7vw}
-.header .type a.current{color:#e15616}
-.header .type:after{content:'';position:absolute;top:0;right:0;width:6vw;background-image:linear-gradient(to right,rgba(255,255,255,.5),rgba(255,255,255,1));height:100%}
-.bar,.classify{height:8vw;line-height:8vw;font-size:3.1vw;overflow:hidden;color:#93979F;padding:0 2vw}
-.classify em{color:#E15616;font-weight:bold;margin-right:1vw;font-size:3.7vw}
-.new-list{min-height:68vh;background:#FFF;}
-.dataRousce{width:100%;background:#FFF;overflow:hidden}
-.dataRousce .row{width:100%;height:34.8vw;border-top:1px solid #F5F5F5;background:#FFF;overflow:hidden;box-sizing:border-box;padding:2vw 3.3vw 2vw 37vw;position:relative;color:#93979F;line-height:3.5vw;font-size:2.6vw}
-.dataRousce .row img{position:absolute;left:3.3vw;top:2.3vw;width:30.4vw;height:30.4vw}
-.dataRousce .row .title{margin-bottom:2vw;color:#2D3036;font-size:3.4vw;max-height:9.6vw;line-height:4.8vw;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
-.dataRousce .row .xinxi{margin-bottom:2vw;color:#93979f;max-height:8.4vw;line-height:4.2vw;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
-.dataRousce .row .xinxi em{margin-right:2vw}
-.dataRousce .row .write:before{width:4vw;height:4vw;vertical-align:top;background-position:-22.5vw -17.5vw;margin-right:1vw}
-.dataRousce .row .time:before{width:4vw;height:4vw;vertical-align:top;background-position:-37.5vw -17.5vw;margin-right:1vw}
-.dataRousce .row .pv:before{width:4vw;height:4vw;vertical-align:top;background-position:-30vw -17.5vw;margin-right:1vw}
-.dataRousce .row .hotspot:before{width:4vw;height:4vw;vertical-align:top;background-position:-15vw -17.5vw;margin-right:1vw}
-.dataRousce .row .hotspot a{color:#93979f}
-.dataRousce .row .introduction{height:7vw;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
-.footer{width:100%;padding:4vw 0;background:#262626;margin-top:4vw;text-align:center}
-.footer .logo img{width:9.2vw;height:8vw;vertical-align:middle}
-.footer .dizhi{display:inline-table;color:#ccc;font-size:3.1vw;line-height:4.8vw;vertical-align:super}
-.middle {
-    text-align: center;
-    font-size: 3.7vw;
-    padding: 20vw 0;
-}
-.middle img{width:30vw;}
-
-
-
+@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:100vw 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}
+	.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}
+	.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%}
+	.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}
+	.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 a{display:inline-block;padding:0 2vw;line-height:6vw;font-size:3.7vw;color:#E15616}
+	#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;height:12vw;line-height:12vw;position:relative}
+	.header .type>div{width:100%;overflow-x:auto;padding-right:5vw;box-sizing:border-box}
+	.header .type a{display:inline-block;margin-right:1vw;padding:0 2vw;font-size:3.7vw}
+	.header .type a.current{color:#e15616}
+	.header .type:after{content:'';position:absolute;top:0;right:0;width:6vw;background-image:linear-gradient(to right,rgba(255,255,255,.5),rgba(255,255,255,1));height:100%}
+	.bar,.classify{height:8vw;line-height:8vw;font-size:3.1vw;overflow:hidden;color:#93979F;padding:0 2vw}
+	.classify em{color:#E15616;font-weight:bold;margin-right:1vw;font-size:3.7vw}
+	.mainData{min-height:68vh}
+	.new-list{background:#FFF}
+	.dataRousce{width:100%;background:#FFF;overflow:hidden}
+	.dataRousce .row{width:100%;height:34.8vw;border-top:1px solid #F5F5F5;background:#FFF;overflow:hidden;box-sizing:border-box;padding:2vw 3.3vw 2vw 37vw;position:relative;color:#93979F;line-height:3.5vw;font-size:2.6vw}
+	.dataRousce .row img{position:absolute;left:3.3vw;top:2.3vw;width:30.4vw;height:30.4vw}
+	.dataRousce .row .title{margin-bottom:2vw;color:#2D3036;font-size:3.4vw;max-height:9.6vw;line-height:4.8vw;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+	.dataRousce .row .xinxi{margin-bottom:2vw;color:#93979f;max-height:8.4vw;line-height:4.2vw;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+	.dataRousce .row .xinxi em{margin-right:2vw}
+	.dataRousce .row .hotspot a{color:#93979f}
+	.dataRousce .row .introduction{height:7vw;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+	.footer{width:100%;padding:4vw 0;background:#262626;margin-top:4vw;text-align:center}
+	.footer .logo img{width:9.2vw;height:8vw;vertical-align:middle}
+	.footer .dizhi{display:inline-table;color:#ccc;font-size:3.1vw;line-height:4.8vw;vertical-align:super}
+	.xinxi .write:before{width:4vw;height:4vw;vertical-align:top;background-position:-22.5vw -17.5vw;margin-right:1vw}
+	.xinxi .time:before{width:4vw;height:4vw;vertical-align:top;background-position:-37.5vw -17.5vw;margin-right:1vw}
+	.xinxi .pv:before{width:4vw;height:4vw;vertical-align:top;background-position:-30vw -17.5vw;margin-right:1vw}
+	.xinxi .hotspot:before{width:4vw;height:4vw;vertical-align:top;background-position:-15vw -17.5vw;margin-right:1vw}
+	.xinxi .source:before{width:4vw;height:4vw;vertical-align:top;background-position:-68.5vw -39.5vw;margin-right:1vw}
+	.dataRousce .row .title em,.introduction em{color:#e15616}
+	.middle{text-align:center;font-size:3.7vw;padding:20vw 0}
+	.middle img{width:30vw}
+	.article{background:#fff;padding:3vw;margin-bottom:5vw}
+	.article .title{line-height:7vw;font-size:5.2vw;color:#333}
+	.article .new-mian{margin:2vw 0}
+	.article p{font-size:3.4vw;line-height:5.8vw;color:#777;word-break:break-all;word-wrap:break-word}
+	.article .xinxi{margin-bottom:2vw;color:#93979f;line-height:4.2vw;padding:3vw 0;border-bottom:solid 1px #ededed}
+	.article .xinxi em{margin-right:2vw}
+	.article .xinxi .write:before{width:4vw;height:4vw;vertical-align:top;background-position:-22.5vw -17.5vw;margin-right:1vw}
+	.article .xinxi .time:before{width:4vw;height:4vw;vertical-align:top;background-position:-37.5vw -17.5vw;margin-right:1vw}
+	.article .xinxi .pv:before{width:4vw;height:4vw;vertical-align:top;background-position:-30vw -17.5vw;margin-right:1vw}
+	.article .xinxi .hotspot:before{width:4vw;height:4vw;vertical-align:top;background-position:-15vw -17.5vw;margin-right:1vw}
+	.article .xinxi .hotspot a{color:#93979f}
+	.xinxi .source:before{width:4vw;height:4vw;vertical-align:top;background-position:-68.5vw -39.5vw;margin-right:1vw}
+	.article .join{border-top:solid 1px #ededed;text-align:center;padding:1vw 0}
+	.article .join .welcome{line-height:5.8vw;font-size:3.7vw;color:#333;text-align:left}
+	.article .join img{width:126px;height:126px;margin:20px auto;margin-right:15px}
+	.article .join img:last-child{margin-right:0}
+	.dea-tag a{display:inline-block;font-size:3.4vw;color:#fff;height:8vw;line-height:8vw;padding:0 3vw;background:#e15616;text-align:center;border-radius:2px;margin:3vw 3vw 0 0;cursor:pointer}
+	.article .like{display:block;width:35vw;height:12vw;line-height:12vw;margin:5vw auto;border:1px solid #eee;color:#777;padding:0 6vw;border-radius:5px;background:#f7f7f7}
+	.article .like:before{height:10vw;width:10vw;background-position:-75.3vw -38.6vw;vertical-align:middle;margin-right:1vw}
+	.classify{height:10vw;line-height:10vw;border-left:solid 4px #e15616;font-size:3.7vw;color:#333;padding:0 3vw;background:#fff}
 }

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

@@ -21,15 +21,19 @@ var articleRelated = new Vue({
     el: "#articleRelated",
     data: {
         infoId: $("#articleId").val()?$("#articleId").val()*1:0,
-        relatedList: []
+        articleLabels: $("#articleLabels").val()?$("#articleLabels").val():"",
+        related: {}
     },
     methods: {
         getRelatedList: function () {
             var _self = this;
             if(this.infoId ===0){return;}
-            $.getJSON("/article/related",{id: this.infoId}).done(function (r) {
+            $.getJSON("/article/related",{
+                id: this.infoId,
+                labels: this.articleLabels
+            }).done(function (r) {
                 if (r.code === 0 && r.data) {
-                    _self.relatedList = r.data;
+                    _self.related = r.data;
                 }
             });
         },
@@ -37,6 +41,7 @@ var articleRelated = new Vue({
     },
     created: function () {
         this.infoId = $("#articleId").val() ? $("#articleId").val()*1 : 0;
+        this.articleLabels = $("#articleLabels").val()?$("#articleLabels").val():"";
         // 获取相关阅读
         this.getRelatedList();
     },

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

@@ -23,6 +23,7 @@
 </head>
 <body class="home detailData">
 <input type="hidden" th:value="${articleId}" id="articleId">
+<input type="hidden" th:value="${article?.label}" id="articleLabels">
 <div class="cm-modal"></div>
 <!--导航栏-->
 <template th:replace="article/components/header"></template>
@@ -38,15 +39,17 @@
             <p class="xinxi">
                 <em class="write icon mIcon" th:text="*{publisher}"></em>
                 <em class="source icon mIcon" th:if="*{not #strings.isEmpty(source)}" th:text="*{source}"></em>
-                <em class="time icon mIcon" th:data="*{publishDate}"></em>
+                <em class="time icon mIcon" th:text="*{publishDate}"></em>
                 <em class="pv icon mIcon" th:text="*{pv}"></em>
             </p>
             <div class="new-mian" id="contentDiv" th:utext="*{content}"></div>
             <div class="dianzan">
                 <span class="like icon mIcon" th:attr="data-count=*{likes}, data-id=*{id}" th:text="'赞'+*{likes}"></span>
             </div>
-            <p class="dea-tag" th:each="label:*{labels}">
-                <span th:if="${not #strings.isEmpty(label)}" th:text="${label}"></span>
+            <p class="dea-tag">
+                <span th:each="label,labelStat:*{labels}" th:if="${not #strings.isEmpty(label)}">
+                    <a th:each="labelId,idStat:*{labelIds}" th:if="${idStat.index==labelStat.index}" th:href="'/info/label-'+${labelId}+'-1.html'" th:text="${label}"></a>
+                </span>
             </p>
         </div>
         <div class="new-list article all_mid" style="min-height:800px" th:if="${article}==null or *{#strings.isEmpty(content)}">
@@ -56,32 +59,25 @@
             </div>
         </div>
         <!--相关阅读-->
-        <div class="new-list" id="articleRelated">
+        <div class="new-list dataRousce" id="articleRelated">
             <p class="classify biaoqian">相关阅读</p>
-            <div class="row">
+            <div class="row" v-for="item in related.list">
                 <div class="new-img">
-                    <a href="/info/detail-6527-1.html" target="_blank"><img src="https://img.caimei365.com/group1/M00/03/BF/Cmis218ijx-ABbMjAAlOP6nOtrY294.gif"></a>
-                </div>
-                <div class="new-blurb">
-                    <a href="/info/detail-6527-1.html" target="_blank">
-                        <p class="title">UFACE优斐斯护肤助你告别夏日大油田</p>
+                    <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+                        <img :src="item.image"/>
                     </a>
-                    <p class="xinxi"> <em class="write">小猫</em><em class="time">2020-07-30 16:54</em> </p>
-                    <p class="introduction">大油田肌肤是如何产生的？为什么有的人一到夏天就一脸油呢？</p>
-                    <p class="P_img"> 146 </p>
-                </div>
-            </div>
-            <div class="row">
-                <div class="new-img">
-                    <a href="/info/detail-6522-1.html" target="_blank"><img src="https://img.caimei365.com/group1/M00/03/BD/Cmis218elciAWhvjAABifmeZus4644.jpg"></a>
                 </div>
                 <div class="new-blurb">
-                    <a href="/info/detail-6522-1.html" target="_blank">
-                        <p class="title">怎么预防和去除闭合性粉刺呢？</p>
+                    <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">小猫</em><em class="time">2020-07-27 15:31</em> </p>
-                    <p class="introduction">闭合性粉刺的形成是因为身体内分泌失调所引发的一系列症状，清洁卸妆、保湿补水、防晒、生活作息不可忽视。</p>
-                    <p class="P_img"> 135 </p>
+                    <p class="xinxi">
+                        <em v-if="!isPC" class="pv icon mIcon" v-text="item.pv"></em>
+                        <em class="write icon mIcon" v-text="item.publisher"></em>
+                        <em  v-if="item.publishDate" class="time icon mIcon" v-text="item.publishDate.substr(0,10)"></em>
+                    </p>
+                    <p class="introduction" v-html="item.intro"></p>
+                    <p v-if="isPC" class="P_img"><em class="pv icon mIcon" v-text="item.pv"></em></p>
                 </div>
             </div>
         </div>

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

@@ -58,7 +58,7 @@
                         <p class="xinxi">
                             <em v-if="!isPC" class="pv icon mIcon" v-text="item.pv"></em>
                             <em class="write icon mIcon" v-text="item.publisher"></em>
-                            <em class="time icon mIcon" v-text="item.publishDate.substr(0,10)"></em>
+                            <em v-if="item.publishDate" class="time icon mIcon" v-text="item.publishDate.substr(0,10)"></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?'，':''}}<a v-if="item.labels[i]" v-text="item.labels[i]" :href="'/info/label-' +id+ '-1.html'"></a></template>
                             </em>