updated

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

@@ -38,6 +38,7 @@ public class ArticleController extends BaseController {
     private static final String ERROR_PATH = "article/error";
     private static final String ARTICLE_LIST_PATH = "article/list";
     private static final String ARTICLE_DETAIL_PATH = "article/detail";
+    private static final String ARTICLE_RECOMMENDATION = "article/recommendation";
     private ArticleService articleService;
 
     @Autowired
@@ -59,6 +60,7 @@ public class ArticleController extends BaseController {
         model.addAttribute("typeId", id);
         model.addAttribute("labelId", 0);
         model.addAttribute("pageNum", pageNum);
+        model.addAttribute("isSearch", true);
         //model.addAttribute("pagePath", String.format("/info/center-%s-1.html", id));
         return ARTICLE_LIST_PATH;
     }
@@ -77,6 +79,7 @@ public class ArticleController extends BaseController {
         model.addAttribute("typeId", 0);
         model.addAttribute("labelId", id);
         model.addAttribute("pageNum", pageNum);
+        model.addAttribute("isSearch", true);
         //model.addAttribute("pagePath", String.format("/info/label-%s-1.html", id));
         return ARTICLE_LIST_PATH;
     }
@@ -95,6 +98,7 @@ public class ArticleController extends BaseController {
         model.addAttribute("typeId", 0);
         model.addAttribute("labelId", 0);
         model.addAttribute("pageNum", pageNum);
+        model.addAttribute("isSearch", false);
         //model.addAttribute("pagePath", "/info/search.html");
         return ARTICLE_LIST_PATH;
     }
@@ -159,9 +163,32 @@ public class ArticleController extends BaseController {
     public String errorPage(final Model model) {
         model.addAttribute("msg", "404页面");
         model.addAttribute("type", "article");
+        List<BaseLink> typeList = articleService.getArticleTypes();
+        List<BaseLink> data = articleService.getArticleLabels().getData();
+        List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
+        model.addAttribute("ads", Ads);
+        model.addAttribute("labels", data);
+        model.addAttribute("articleType", typeList);
+        model.addAttribute("typeId", 0);
+        model.addAttribute("labelId", 0);
         return ERROR_PATH;
     }
 
+    /**
+     * 文章推荐和文章
+     */
+    @GetMapping("/info/articlerecommendation.html")
+    public String toArticleRecommendation(final Model model) {
+        List<BaseLink> typeList = articleService.getArticleTypes();
+        List<BaseLink> data = articleService.getArticleLabels().getData();
+        List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
+        model.addAttribute("ads", Ads);
+        model.addAttribute("labels", data);
+        model.addAttribute("articleType", typeList);
+        model.addAttribute("typeId", 0);
+        model.addAttribute("labelId", 0);
+        return ARTICLE_RECOMMENDATION;
+    }
 
     /**
      * 获取文章热门标签

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

@@ -40,7 +40,12 @@ dl,dd,dt{zoom:1}
 
 
 @media screen and (min-width:768px){.header .h5-head{display:none}
+	#drawer-footer {display: none;}
+	.advertisement {display: none;}
 	.icon:before{content:'';display:inline-block;background:url(/img/base/icon.png) no-repeat;font-size:0}
+	.header .van-overlay {display: none;}
+	.header .van-popup {display: none;}
+	/* 阴影*/
 	/* 分享，回到顶部 */
 	#scrollTop{display:none;position:fixed;right:50%;margin-right:-700px;width:88px;z-index:9999;bottom:120px;}
 	#scrollTop .item{width:100%;background-color:#fff;box-sizing:border-box;text-align:center;box-shadow:0 2px 4px rgb(254,246,243);border-radius:2px;margin-bottom:10px;font-size:12px;position:relative}
@@ -55,7 +60,7 @@ dl,dd,dt{zoom:1}
 	#scrollTop .item .wechatHover span{color:#93979F;margin-top:10px}
 	#scrollTop .item .wechatHover a:hover{text-decoration:underline}
 	#scrollTop .item:hover .wechatHover{display:block}
-	.pageWrap{width:100%;text-align:center;padding:20px 0 36px}
+	.pageWrap{width:100%;text-align:center;padding:20px 0 36px;background: #fff;}
 	.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:#FF5B00;color:#fff;border:1px solid #FF5B00}
 	.pageWrap a:hover{color:#FF5B00}
@@ -66,26 +71,61 @@ dl,dd,dt{zoom:1}
 	.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}
+	/*侧边弹窗*/
+	.info-h5-notice {display: none;}
+	.side-pop-up {width: 300px;height: 200px;background: #FFFF;position: fixed;top: calc(50% - 150px);right: 12px;border: 1px solid;z-index: 999;}
+	.eject {animation: eject ease-in-out forwards .5s;cursor: pointer;}
+	.retract {animation: retract ease-in-out forwards .5s;cursor: pointer;}
+	@keyframes eject {0% {transform: scale(0.5);width: 100px;height: 100px;border-radius: 50%;} 100% {transform: scale(1);right: calc(50% - 100px);}}
+	@keyframes retract {0% {transform: scale(1);right: calc(50% - 100px);} 100% {transform: scale(0.5);right: 0;width: 100px;height: 100px;border-radius: 50%;}}
+
 	.loading{box-sizing:border-box;padding:200px 0;text-align:center}
 	.hasTop{position:fixed;left:0;bottom:0}
-	.header{position:sticky;width:100%;background:#FF5B00;top:0;left:0;z-index:9999}
-	.header .nav{display:table;width:1185px;margin:0 auto}
-	.nav .logo{display:table-cell;vertical-align:top;height:48px;padding:11px 0;margin-right: 16px;}
-	.nav .logo img{width:168px;height:56px}
+	.header{position:sticky;width:100%;top:0;left:0;z-index:9999;background: white;}
+	/*返回首页*/
+	.H5-info-logo, .H5-info-menu {display: none;}
+	.head-back {width: 100%;height: 40px;background: #F7F7F7;}
+	.head-back .head {width: 1185px; height: 100%; margin: 0 auto;display: flex;align-items: center;}
+	.head-back .head .head-logo {width: 16px;height: 16px;box-sizing: border-box;border: 1px solid;margin-right: 5px;}
+	.head-back .head .text {font-size: 14px; color: #909090;}
+
+	/* 信息中心更新搜索头 */
+	.header .search-top{display:flex;width:1185px;margin:0 auto; height: 100px;align-items: center;}
+	.search-top .info-logo-content {width: 168px; border: 1px solid;height: 76px;}
+	.search-top .search{position:relative;display:flex;width:685px;margin-left:134px;flex-direction: column;}
+	.search-top .search .search-info {width: 100%;height: 44px;border:2px solid #FF5B00;box-sizing: border-box;border-radius:2px;overflow: hidden;}
+	.search-top .search .keyword{width:100%;height:100%;border: none;color:#B2B2B2;font-size:14px; padding: 0 80px 0 16px;}
+	.search-top .search .keywords {display: flex;flex-wrap: wrap;}
+	.search-top .search .keywords span {margin-right: 4px;}
+
+	.header .nav{display:table;width:100%;background:#FF5B00;}
+	/*.nav .logo{display:table-cell;vertical-align:top;height:48px;padding:11px 0;margin-right: 16px;}*/
+	/*.nav .logo img{width:168px;height:56px}*/
 	.nav .type{display:table-cell;vertical-align:top;height:70px}
-	.nav .type a{padding:0 16px;height:78px;line-height:78px;margin-right:1px;font-size:16px;color:#fff;text-align:center;display:table-cell;vertical-align:top;white-space:nowrap; box-sizing: border-box;}
+	.nav .type .type-content {width: 1185px; margin: 0 auto;display: flex;}
+	.header .nav .type-content .type-item {cursor: pointer;display: flex;justify-content: space-around;align-items: center;position: relative;}
+	.header .nav .type-content .type-item .type-item-link {box-sizing: border-box;background: url(/img/article/PC.png);width: 24px; height: 24px;background-position: -76px -742px;}
+	.header .nav .type-content .type-item:hover .type-item-link {background-position: -110px -742px;}
+	.header .nav .type-content .type-item:hover {background: rgba(0,0,0,0.2);}
+	.header .nav .type-content .type-item a:hover {background: none;}
+	.header .nav .type-content .type-item .nav-menu {display: none;flex-direction: column;position: absolute;bottom: 0;left: 0;width: 100%;background: #fff;z-index:-1;padding-top: 78px;transition: .3s;}
+	.header .nav .type-content .type-item:hover .nav-menu {top: 0;bottom: unset;display: flex;}
+	.header .nav .type-content .type-item .nav-menu a {width: 100%;height: 40px;color: #4A4F58;display: flex;align-items: center;font-size: 14px;}
+	.header .nav .type-content .type-item .nav-menu a:hover {background: #FFF4EE;color: #FF5B00;}
+
+	.nav .type a{padding:0 16px;height:78px;line-height:78px;font-size:16px;color:#fff;text-align:center;display:table-cell;vertical-align:top;white-space:nowrap; box-sizing: border-box;}
 	.type a:hover{background-color:#e96c1c;border-bottom-color: #fec19a}
-	.type a.current{background-color:rgba(0,0,0,0.2);}
-	.nav .search{position:relative;display:table-cell;vertical-align:top;width:200px;height:32px;margin-left:39px}
-	.nav .search .keyword{width:200px;height:32px;line-height:32px;margin:22px 0 16px 0;padding:0 32px 0 16px;border:none;border-radius:16px;background:#eb7941;color:#fff;font-size:14px}
+	.header .nav .type-content .current{background-color:rgba(0,0,0,0.2);}
+	/*.nav .search{position:relative;display:table-cell;vertical-align:top;width:200px;height:32px;margin-left:39px}*/
+	/*.nav .search .keyword{width:200px;height:32px;line-height:32px;margin:22px 0 16px 0;padding:0 32px 0 16px;border:none;border-radius:16px;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 .searchBtn{position:absolute;display: block;top: 0; right: 0;width: 80px;height: 44px;background: #FF5B00;color:#fff;line-height:44px;text-align: center;}
 	.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}
+	.foot{width:100%;height:130px;background:#262626;}
 	.footer{width:1185px;margin:0 auto;text-align:center;height: 130px;box-sizing: border-box;padding: 39px 0;}
 	.footer p{line-height: 30px;color: #FFFFFF;}
 	.footer p span{margin:0 5px}
@@ -97,10 +137,41 @@ dl,dd,dt{zoom:1}
 	.tip{color: #777;}
 	.bar a{color:#777;font-size:14px}
 	.classify.biaoqian{border-bottom:solid 1px #ededed}
+	/*精选文章*/
+	.featured-Articles {width:100%;position:relative;height: 298px;border: 1px solid;box-sizing: border-box;padding: 24px 16px;margin-bottom: 16px;background: #fff;}
+	.featured-Articles .featured-title {display: flex;justify-content: space-between;border-bottom: 1px solid #F0F0F0;margin-bottom: 24px;}
+	.featured-Articles .featured-title div:nth-child(1) {color: #333333;font-size: 18px;font-weight: bold;border-bottom: 2px solid #FF5B00;height: 40px;}
+	.featured-Articles .featured-content {display: flex;}
+	.featured-Articles .featured-content .item-content {margin-right:16px;display: flex;flex-direction: column; width: 202px;height: 190px;border: 1px solid;box-sizing: border-box;}
+	.featured-Articles .featured-content .item-content .item-img {width: 100%;height: 120px;}
+	.featured-Articles .featured-content .item-content .item-title {margin-top: 10px;width: 100%;height: calc(100% - 130px);font-size: 16px;color: #333333;line-height: 28px;}
+
 	.content{width:1185px;margin:0 auto;position:relative;}
 	.content .mainData{float:left;width: 884px;background:#f5f5f5;min-height: 900px; }
-	.content .new-list{width:100%;background:#ffffff;}
+	.content .new-list{width:100%;}
+	.content .new-list .dataRousce {background: #fff;}
+	.dataRousce .handleMore {display: none;}
+	.listData-select-title {background: #fff;}
+	.search-select {display: flex;width: 800px;margin: 0 30px;padding: 20px 16px 0 16px; border-bottom: 1px solid #F0F0F0;background: #fff;height: 60px;}
+	.search-select div {cursor: pointer; font-size: 18px;color: #666666;}
+	.search-select .select-earliest {margin-left: 40px;}
+	.search-select .select-earliest {}
+	.now-search-select {font-weight: Bold;color: #333333;border-bottom: 2px solid #FF5B00;}
+
 	.content .row:nth-last-child(1){border-bottom:0}
+	/*信息平台banner*/
+	.info-banner {margin: 16px auto 0 auto;width: 1185px;height:384px;box-sizing: border-box;display: flex;justify-content: space-between;}
+	.info-banner .banner {width: 524px;border: 1px solid;}
+	.info-banner .sider-banner {width: 360px;display: flex;flex-direction: column;justify-content: space-between;}
+	.info-banner .info-Notice {width: 284px;border: 1px solid;background: #fff;}
+	.info-banner .sider-banner div {height: 49%;border: 1px solid;}
+	.info-banner .info-Notice .notice-title {display: flex;justify-content: space-between;box-sizing: border-box;height: 48px;padding: 14px 16px;}
+	.info-banner .info-Notice .notice-title div:nth-child(1) {font-size: 16px;font-weight: bold;color: #333333;}
+	.info-banner .info-Notice .notice-content {height: calc(100% - 48px);padding: 0 30px;box-sizing: border-box;overflow: hidden;}
+	.info-banner .info-Notice .notice-content .notice-content-list {border-top: 1px solid #F0F0F0;}
+	.info-banner .info-Notice .notice-content .notice-content-li {padding: 14px 0;border-top: 1px solid #F0F0F0;list-style: disc;cursor: pointer;}
+	.info-banner .info-Notice .notice-content .notice-content-li:hover {color: #FF5B00;}
+
 	.new-list .row{position:relative;display:table;width:800px;height:150px;margin:0 30px;padding:24px 0;border-bottom:solid 1px #ededed}
 	.row .new-img{position:absolute;width:210px;height:150px;margin-right:20px;background:#FFF url(/img/base/placeholder.png) no-repeat center center;}
 	.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:#FF5B00;opacity:.7;z-index:99}
@@ -212,14 +283,15 @@ dl,dd,dt{zoom:1}
 	.search-filter .search__content .search__sort .search__sort_select li:hover{ background-color: #FEF6F3; color: #FF5B00; }
 	.search-filter .search__content .search__sort .search__sort_select li.selected::after{ background-image: url("/img/article/pc-icon-search-selected.png") }
 
-	.no-result{width:884px;height:500px;text-align:center;padding-top:100px}
+	.no-result{width:884px;height:500px;text-align:center;padding-top:100px;background: #fff;}
 	.no-result .nofound{color:#333;font-size:18px;margin-top:20px}
 	.no-result .nofound span{color:#FF5B00}
 	.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}
+	#articleRelated {background: #fff;}
+	.content .new-list.article{padding:24px;margin-bottom:20px;background: #fff;}
 	.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}
@@ -257,6 +329,48 @@ dl,dd,dt{zoom:1}
 }
 @media screen and (max-width:768px){
 	body{height: 100vh;overflow-y: scroll;position: relative;}
+	/*信息平台H5修改*/
+	.head-back {display: none;}
+	.auto-input {display: none;}
+	.nav {display: none;}
+	.tip-bar {display: none;}
+	.search-top .info-logo-content {display: none;}
+	.search-top {position: sticky;display: flex;justify-content: space-between;box-sizing: border-box;height: 13.6vw;background: #fff;padding: 0 4vw;align-items: center;}
+	.search-top .H5-info-logo {width: 28vw; height: 12vw;background: url(/img/article/h5-logo.png) center;background-size: cover;}
+	.search-top .H5-info-menu {width: 29vw; height: 100%;box-sizing: border-box;display: flex;align-items: center;justify-content: space-between; font-size: 3.2vw;}
+	.search-top .H5-info-menu div {width: 7.2vw; height: 7.2vw;display: flex;justify-content: center;align-items: center;color: #FF5B00;}
+	.search-top .H5-info-menu div:nth-child(1) {background: url(/img/article/H5.png);background-size: 119vw 158vw;background-position: -27vw 37vw;}
+	.search-top .H5-info-menu div:nth-child(3) {background: url(/img/article/H5.png);background-position: 0vw 36vw;background-size: 101vw 158vw;}
+	.header .van-overlay {z-index: -1 !important;}
+	.header .van-popup {z-index: -1 !important;padding: 22.6vw 4.333vw 5.6vw 4.333vw;}
+	/* 阴影*/
+	.search-top-shadow {box-shadow: 0 4vw 9vw #ccc;}
+	.header .van-popup .search-title{display: flex;justify-content: space-between;}
+	.header .van-popup .search-title div:nth-child(1) {color: #333333;font-size: 4.7vw;font-weight: bold;}
+	.header .van-popup .search-title div:nth-child(2) {width: 3.867vw;height: 3.867vw;position: relative;}
+	.header .van-popup .search-title div:nth-child(2):after {content: "×";position: absolute;transform: translate(-50%,-50%) scale(1.5);color: #B2B2B2;font-size: 3.867vw;top: 50%;}
+	.van-popup .search-info {margin: 5.7vw 0 5.2vw 0;}
+	.van-popup .search-info .keyword {background: #F7F7F7;height: 10.8vw;width: 74vw;border: none;box-sizing: border-box;padding: 2vw;}
+	.van-popup .search-info .searchBtn {background: #FF5B00;width: 17vw; height: 10.8vw;color: #fff;text-align: center;display: inline-block;line-height: 10.8vw;float: right;}
+	.van-popup .keywords {display: flex;flex-wrap: wrap;}
+	.van-popup .keywords div {margin: 0 2.4vw 2.4vw 0;height: 6.4vw;padding: 1.4vw 3.2vw;background: #F7F7F7;color: #999999;font-size: 2.8vw;}
+
+	.info-banner .info-Notice {display: none;}
+	.info-banner {margin: 3.2vw auto;width: 94.4vw;display: flex;justify-content: space-between;align-items: center;height: 40vw;}
+	.info-banner .banner {width: 55vw;height: 100%;border: 1px solid;box-sizing: border-box;}
+	.info-banner .sider-banner {width: 37.8vw; height: 100%;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;}
+	.info-banner .sider-banner div {width: 100%;height: 49%;border: 1px solid;}
+	.info-h5-notice {height: 10vw; border: 1px solid; box-sizing: border-box;margin: 1.6vw auto 3.2vw auto;width: 93.6vw;background: #fff;display: flex;justify-content: space-between;padding: 2.7vw 3.2vw;}
+	.info-h5-notice .h5-notice {font-weight: bold;font-size: 3.6vw;color: #333333;}
+	.info-h5-notice .h5-notice-title ul > li {list-style: disc;}
+	.featured-Articles {height: 53.1vw;padding: 4vw 3.2vw;box-sizing: border-box;background: #fff;width: 94.4vw;margin: 0 auto 4vw auto;}
+	.featured-Articles .featured-title {display: flex;justify-content: space-between;margin-bottom: 10px;border-bottom: 1px solid #CCCCCC;height: 8.8vw;}
+	.featured-Articles .featured-title div:nth-child(1) {color: #333333;font-size: 3.6vw;font-weight: bold;border-bottom: 2px solid #FF5B00;}
+	.featured-Articles .featured-content {height: 34vw;overflow-x: scroll;width: 100%;white-space: nowrap;}
+	.featured-Articles .featured-content .item-content {margin-right:1.6vw;flex-direction: column;border: 1px solid; width: 33.6vw; box-sizing: border-box;height: 100%;display: inline-block;vertical-align: top;}
+	.featured-Articles .featured-content .item-content .item-img {width: 100%;height: 20vw;margin-bottom: 2.4vw;}
+	.featured-Articles .featured-content .item-content .item-title {color: #333333;font-size: 2.8vw;width:100%;overflow: hidden;white-space: normal;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
+
 	.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}
 	#scrollTop{display:none;position:fixed;right:0;;z-index:9999;bottom:4vw;}
@@ -297,7 +411,6 @@ dl,dd,dt{zoom:1}
 	/*	-webkit-filter: invert(54%) sepia(57%) saturate(5587%) hue-rotate(352deg) brightness(90%) contrast(96%);filter: invert(54%) sepia(57%) saturate(5587%) hue-rotate(352deg) brightness(90%) contrast(96%);*/
 	/*}*/
 	.mainData{min-height:68vh}
-	.new-list{background:#FFF;padding-top: 3.2vw;}
 	.new-list .search-tip { display: flex; align-items: center; margin: 0 2.4vw 2.4vw; padding: 2.8vw 2.4vw; font-size: 3vw; color: #4A4F58; background: #FEF6F3; }
 	.new-list .search-tip .content div { display: inline }
 	.new-list .search-tip span { color:#FF5B00; font-weight:bold; }
@@ -333,7 +446,7 @@ dl,dd,dt{zoom:1}
 	.search-section .search__more .search__more_link{ display: block; width: 24.8vw; height: 7.2vw; line-height: 7.2vw; text-align: center; color: #fff; font-size: 3vw; background: #FF5B00; }
 	/* 文章搜索排序 */
 	.search-filter{background: #f5f5f5;padding-bottom: 2vw;}
-	.search-filter .search__content{height: 13.2vw; background: #fff; display: flex;align-items: center;justify-content: space-between; padding: 0 3.2vw; }
+	.search-filter .search__content{height: 13.2vw; background: #fff; display: flex;align-items: center;justify-content: space-between; padding: 0 3.2vw; width: 94.4vw;margin: 0 auto;}
 	.search-filter .search__content .search__tip{font-size: 3.4vw; color: #4A4F58;background: #fff; flex: 1;}
 	.search-filter .search__content .search__tip span{color: #FF5B00; font-weight: bold;}
 	.search-filter .search__content .search__sort { position: relative; z-index: 9; cursor: pointer; user-select: none; width: 24.8vw; height: 8vw; border: 0.2vw solid #eee; box-sizing: border-box;padding-right: 6.8vw;padding-left: 3vw; }
@@ -348,7 +461,7 @@ dl,dd,dt{zoom:1}
 	.search-filter .search__content .search__sort .search__sort_select li.selected { background-color: #FEF6F3; color: #FF5B00; }
 	.search-filter .search__content .search__sort .search__sort_select li.selected::after{ background-image: url("/img/article/h5-icon-search-selected.png") }
 
-	.dataRousce{width:100%;background:#FFF;overflow:hidden}
+	.dataRousce{width:94.4vw;background:#FFF;overflow:hidden;margin: 0 auto;}
 	.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:first-child{border-top: 0;}
 	.dataRousce .row img{position:absolute;left:3.3vw;top:2.3vw;width:30.4vw;height:30.4vw}
@@ -357,7 +470,11 @@ dl,dd,dt{zoom:1}
 	.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}
+	/*查看更多*/
+	.dataRousce .handleMore {width: 100%;border-top: 1px solid #CCCCCC;margin: 0 auto;display: flex;}
+	.dataRousce .handleMore .more {margin: 7.3vw auto 5.3vw auto;}
+
+	.footer{width:100%;padding:4vw 0;background:#262626;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}
@@ -390,13 +507,20 @@ dl,dd,dt{zoom:1}
 	.classify{height:10vw;line-height:10vw;border-left:solid 4px #FF5B00;font-size:3.7vw;color:#333;padding:0 3vw;background:#fff}
 	.article .like{color: #FF5B00;cursor: pointer;display: block;height: 18.4vw;width: 18.4vw;line-height: 27.4vw;margin: 5vw auto;border-radius: 50%;background: #fef6f3;text-align: center;position: relative}
 	.article .like:before{ width: 8vw;height: 8vw;background-position: -14vw -78.4vw;vertical-align: middle;border-radius: 50%;position: absolute;top: 3.2vw}
-	.no-result{text-align: center;padding: 3.2vw 0;}
+	.no-result{text-align: center;padding: 3.2vw 0;background: #fff;width: 94.4vw;margin: 0 auto;}
 	/*ross 广告图*/
-	.article-right-ross{width:100%;height:26vw;float: left; border-radius: 2px;float: left;margin-bottom: 3vw;box-sizing: border-box;padding: 0 3vw;}
+	.article-right-ross{width:94.4vw;margin: 0 auto 3.2vw auto;border-radius: 2px;box-sizing: border-box;}
 	.article-right-ross.none{display: none;}
 	.article-right-ross.show{display: block;}
 	.article-right-ross>a{width: 100%;height: 100%;display: block;border-radius: 2px;}
 	.article-right-ross>a img{width: 100%;height: 100%;display: block;border-radius: 2px;}
+	/*文章列表头*/
+	.listData-select-title {background: #fff;width: 94.4vw;padding: 3.6vw 3.2vw;margin: 0 auto;}
+	.listData-select-title .search-select {display: flex;border-bottom: 1px solid #CCCCCC;}
+	.listData-select-title .search-select div {font-size: 3.6vw;color: #666666;height: 8vw;}
+	.listData-select-title .search-select .now-search-select {color: #333333;font-weight: bold;border-bottom: 2px solid #FF5B00;}
+	.listData-select-title .search-select .select-new {margin-right: 9vw;}
+
 	/*ross宣传弹窗*/
 	.ross-banner-fiexd{width: 100%;height: 113.8vw;position: fixed;z-index: 999;background: url("/img/ross/ross-bg@2x.png");left: 0;right: 0;bottom: -113.8vw;box-sizing: border-box;padding: 40vw 0 4vw 0;background-size: cover;animation: all 1s;}
 	.ross-banner-fiexd.active{animation: rundbottom 0.5s backwards;bottom: 0;opacity: 1;}

src/main/resources/static/css/article/drawer-footer.css

@@ -0,0 +1,102 @@
+#drawer-footer {
+    width: 94.4vw;
+    margin: 0 auto 4vw auto;
+    height: 76.9vw;
+    white-space: nowrap;
+    overflow-x: scroll;
+}
+
+.hot-recommend {
+    display: inline-block;
+    width: 62vw;
+    height: 100%;
+    background: #fff;
+    vertical-align: top;
+    margin-right: 1.6vw;
+    box-sizing: border-box;
+    padding: 3.2vw;
+}
+
+.hot-recommend .hot-recommend-title {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    height: 8vw;
+}
+.hot-recommend .hot-recommend-title div:nth-child(1) {
+    font-size: 3.6vw;
+    font-weight: bold;
+    color: #333333;
+}
+.hot-recommend .hot-recommend-title div:nth-child(2) {
+    width: 4.8vw;
+    height: 4.8vw;
+    background: #E1E1E1;
+    color: #fff;
+    text-align: center;
+    position: relative;
+}
+.hot-recommend .hot-recommend-title div:nth-child(2):after {
+    content: '\276F';
+    font-weight: normal;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 3.6vw;
+}
+
+.hot-recommend .hot-recommend-content {
+    height: calc(100% - 8vw);
+}
+
+.hot-recommend .hot-recommend-content .hot-recommend-content-item {
+    border-top: 1px solid #CCCCCC;
+    box-sizing: border-box;
+    padding: 3.3vw 0;
+    height: 21.4vw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    overflow: hidden;
+}
+
+.hot-recommend .hot-recommend-content .hot-recommend-content-item div:nth-child(1) {
+    width: 21.4vw;
+    height: 14.8vw;
+}
+
+.hot-recommend .hot-recommend-content .hot-recommend-content-item div:nth-child(2) {
+    width: 31.9vw;
+    height: 14.8vw;
+    text-overflow:ellipsis;
+    display:-webkit-box;
+    -webkit-line-clamp:3;
+    -webkit-box-orient:vertical;
+    font-size: 2.9vw;
+    color: #333333;
+}
+
+.advertisement {
+    position: sticky;
+    height: 35.6vw;
+    width: 94.4vw;
+    bottom: 0;
+    margin: 0 auto 18vw auto;
+    overflow-x: scroll;
+    white-space: nowrap;
+}
+.advertisement .advertisement-link {
+    display: inline-block;
+    vertical-align: top;
+    width: 45.6vw;
+    height: 100%;
+    margin-right: 2.4vw;
+    background: #fff;
+}
+.advertisement .advertisement-link img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}

src/main/resources/static/css/base/base.h5.css

@@ -91,7 +91,7 @@
 .baseHeadCenter .search .jqSelect select{width:20vw;height:9.6vw;line-height:9.6vw;border:none;font-size:3.7vw;color:#4A4F58;padding:0 6vw 0 3vw}
 .baseHeadCenter .search .jqSelect:before{right:4vw;line-height:9.6vw}
 .baseHeadCenter .search .jqSelect:after{content:'';position:absolute;right:0;top:3.4vw;width:.5vw;height:2.8vw;background:#BEC2C9}
-.baseHeadCenter .search .keyword{position:absolute;right:0;top:0;border:none;outline:none;width:64.4vw;height:8.6vw;line-height:8.6vw;font-size:3.7vw;color:#4A4F58;text-indent:2.6vw}
+.baseHeadCenter .search .keyword{position:absolute;right:0;top:0;border:none;outline:none;width:72.4vw;height:9.6vw;line-height:9.6vw;font-size:3.7vw;color:#4A4F58;text-indent:2.6vw}
 .baseHeadCenter .search .searchBtn{position:absolute;right:1.2vw;top:0}
 .baseHeadCenter .search .searchBtn:before{content:'';display:block;width:9.6vw;height:9.6vw;background-position:-24vw 1.5vw}
 .baseHeadCenter.account{height:13.4vw;border-bottom:solid 1px #ebecef}

src/main/resources/static/css/base/base.pc.css

@@ -123,7 +123,7 @@ iframe{width:320px !important;height: 280px !important}
 .baseHeadCenter .search .jqSelect{width:104px;height:44px;line-height:44px;border:none}
 .baseHeadCenter .search .jqSelect:before{right:16px}
 .baseHeadCenter .search .jqSelect ul{z-index:999;}
-.baseHeadCenter .keyword{width:478px;height:44px;line-height:44px;text-indent:15px;position:absolute;right:0;top:0;border:none;outline:none}
+.baseHeadCenter .keyword{width:84%;height:44px;line-height:44px;text-indent:15px;position:absolute;right:0;top:0;border:none;outline:none}
 .baseHeadCenter .keyword:focus{outline:none;border:none}
 .baseHeadCenter .searchBtn{position:absolute;right: 0;top: 0;font-size:0;padding: 7px 12px;height: 30px;line-height: 30px;}
 .baseHeadCenter .searchBtn:before{width: 30px;height: 30px;background-position: 4px 4px;}

src/main/resources/static/js/article/drawer-footer.js

@@ -0,0 +1,70 @@
+let drawerFooter = new Vue({
+    el: "#drawer-footer",
+    data: {
+        hotRemendsList: [
+            {
+                id: 1,
+                content: [
+                    {
+                        content: '1223r342'
+                    },
+                    {
+                        content: '1223r342'
+                    },
+                    {
+                        content: '1223r342'
+                    }
+                ]
+            },
+            {
+                id: 2,
+                content: [
+                    {
+                        content: '1223r342'
+                    },
+                    {
+                        content: '1223r342'
+                    },
+                    {
+                        content: '1223r342'
+                    }
+                ]
+            },
+            {
+                id: 3,
+                content: [
+                    {
+                        content: '1223r342'
+                    },
+                    {
+                        content: '1223r342'
+                    },
+                    {
+                        content: '1223r342'
+                    }
+                ]
+            }
+        ],
+    },
+    mounted() {
+    },
+    methods: {
+    //    链接跳转
+        handlerTramp($event) {
+            window.location.href = "/info/articlerecommendation.html"
+        }
+    }
+})
+// // 精选推荐
+// let featured = new Vue({
+//     el: "#featured-Articles",
+//     data: {
+//         featuredList: [{
+//             id: 1,
+//             content: "131546"
+//         }], // 精选推荐列表
+//     },
+//     mounted() {
+//     },
+//     methods: {}
+// })

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

@@ -1,9 +1,9 @@
-$(function () {
-    var coreServer = $('#coreServer').val()
-    if (!coreServer && coreServer.length > 0) {
-        window.location.href = '/info/404.html';
-    }
-})
+// $(function () {
+//     var coreServer = $('#coreServer').val()
+//     if (!coreServer && coreServer.length > 0) {
+//         window.location.href = '/info/404.html';
+//     }
+// })
 
 var errorPage = new Vue({
     el: '#errorPage',
@@ -13,7 +13,7 @@ var errorPage = new Vue({
         timer: null
     },
     mounted: function () {
-        this.onRedirect();
+        // this.onRedirect();
         this.init()
     },
     methods: {
@@ -43,14 +43,14 @@ var errorPage = new Vue({
             });
         },
         // 重定向
-        onRedirect: function(){
-            var self = this;
-            this.timer = setInterval(function () {
-                if(--self.countdown <= 0){
-                    clearInterval(self.timer);
-                    window.location.href = '/info/center-3-1.html'
-                }
-            }, 1000);
-        },
+        // onRedirect: function(){
+        //     var self = this;
+        //     this.timer = setInterval(function () {
+        //         if(--self.countdown <= 0){
+        //             clearInterval(self.timer);
+        //             window.location.href = '/info/center-3-1.html'
+        //         }
+        //     }, 1000);
+        // },
     }
 });

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

@@ -27,7 +27,8 @@ var articleList = new Vue({
             startDate: '',
             endDate: '',
             productFlag: 1, // 是否统计关键词 1 统计 0 不统计
-            linkageFlag: 0 // 关键词来源是否为用户搜索 0 是 1 不是
+            linkageFlag: 0, // 关键词来源是否为用户搜索 0 是 1 不是
+            selectDataRoutes: 1 // 最新 最早
         },
         listData: [],
         listRecord: 0,
@@ -36,6 +37,19 @@ var articleList = new Vue({
         pageInput: '1',
         keyword: '',
         requestType: '', // 请求链接类型keyword | labelId | typeId
+        featuredList: [{
+            id: 1,
+            content: "采美新品奈瑞儿王牌美养项目「温通暖宫」上线，中..."
+        },{
+            id: 2,
+            content: "adadad"
+        },{
+            id: 3,
+            content: "adadad"
+        }], // 精选推荐列表
+        dialogVisible: true, // 弹窗
+        searchKeys: "", // 搜索词
+        isSearchModule: false,
     },
     computed: {
         pageTotal: function () {
@@ -57,6 +71,16 @@ var articleList = new Vue({
             return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
         }
     },
+    watch: {
+        //是否进入搜索
+        'window.location.pathname': {
+            handler() {
+                this.isSearchModule = window.location.pathname.indexOf('search') !== -1
+            },
+            deep: true,
+            immediate: true,
+        }
+    },
     created: function () {
         // 判断登录状态
         var self = this;
@@ -170,6 +194,13 @@ var articleList = new Vue({
             this.getArticleList(requestUrlConfig['keyword'], params);
         },
 
+        // 弹窗缩放
+        handlerPopup() {
+            if (!this.dialogVisible) {
+                this.dialogVisible = !this.dialogVisible;
+            }
+        },
+
         // 高亮关键词
         highlightKeyword: function (str) {
             return str.replace(new RegExp(this.keyword, 'g'), '<span style="color: #FF5B00">' + this.keyword + '</span>')
@@ -321,19 +352,31 @@ var articleList = new Vue({
             } else {
                 $('#scrollTop').hide();
             }
-            if (scrollTop + windowHeight + 100 > documentHeight) {
-                //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
-                if (this.params.num < this.pageTotal) { // 获取列表数据
-                    if (this.requestFlag) {
-                        this.params.num = this.params.num + 1;
-                        this.requestAction(this.requestType);
-                    }
-                } else { //到底了
-                    this.noMore = true;
-                    $('footer').removeClass("noneImportant");
+            // if (scrollTop + windowHeight + 100 > documentHeight) {
+            //     此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
+            //     if (this.params.num < this.pageTotal) { // 获取列表数据
+            //         if (this.requestFlag) {
+            //             this.params.num = this.params.num + 1;
+            //             this.requestAction(this.requestType);
+            //         }
+            //     } else { //到底了
+            //         this.noMore = true;
+            //         $('footer').removeClass("noneImportant");
+            //     }
+            // }
+        }),
+        //获取更多数据
+        handleMore () {
+            if (this.params.num < this.pageTotal) { // 获取列表数据
+                if (this.requestFlag) {
+                    this.params.num = this.params.num + 1;
+                    this.requestAction(this.requestType);
                 }
+            } else { //到底了
+                this.noMore = true;
+                $('footer').removeClass("noneImportant");
             }
-        }),
+        },
 
         // 页面样式初始化
         initPageReset: function () {
@@ -346,6 +389,43 @@ var articleList = new Vue({
     }
 });
 
+let searchTop = new Vue({
+    el: "#info-header",
+    data: {
+        show: false,
+        searchKeys: "",
+    },
+    mounted() {
+    },
+    methods: {
+        // h5弹窗搜索
+        handlerH5Search() {
+            let tip = this.searchKeys === '' ? '请输入文章关键字！' : this.searchKeys.length < 2 ? '请至少输入两个关键字！' : true;
+            if(!tip) {
+                $.confirm({
+                    useBootstrap: false,
+                    boxWidth: (isPC ? '300px' : '70%'),
+                    title: '提示',
+                    content: tip,
+                    closeIcon: true,
+                    animation: 'opacity',
+                    closeAnimation: 'opacity',
+                    animateFromElement: false,
+                    buttons: {
+                        close: {
+                            text: '确定',
+                            btnClass: 'btn-confirm'
+                        }
+                    }
+                });
+            } else {
+                this.show = !this.show;
+                window.location.href = '/info/search-1.html?keyword=' + this.searchKeys
+            }
+        },
+    }
+})
+
 function initFilterSort(option = {}) {
     var sortControl = $(option.el);
     var sortItem = sortControl.find('.search__sort_select li');

src/main/resources/templates/article/components/article-drawer.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="UTF-8">
+  <link th:href="@{/css/article/drawer-footer.css(v=${version})}" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+<input type="hidden" th:value="${coreServer}" id="coreServer">
+<input type="hidden" th:value="${agent}" id="userAgent">
+  <div id="drawer-footer">
+    <div class="hot-recommend" v-for="(item, index) in hotRemendsList" :key="index">
+      <div class="hot-recommend-title">
+        <div>热门推荐</div>
+        <div @click="handlerTramp(item)"></div>
+      </div>
+      <div class="hot-recommend-content">
+        <div class="hot-recommend-content-item" v-for="(i, o) in item.content" :key="o">
+          <div></div>
+          <div>{{ i.content }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+<!--    广告-->
+<div class="advertisement">
+  <a class="advertisement-link" th:each="ad : ${ads}" th:href="${ad.link}">
+    <img th:src="${ad.image}" th:alt="${ad.title}" class="advertisement-img"/>
+  </a>
+</div>
+
+  <script charset="utf-8" type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+  <script charset="utf-8" type="text/javascript" th:src="@{/js/article/drawer-footer.js}"></script>
+</body>
+</html>

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

@@ -1,26 +1,83 @@
-<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>-->
+<header class="header" id="info-header" xmlns:th="http://www.w3.org/1999/xhtml">
+    <div class="head-back">
+        <div class="head">
+            <div class="head-logo"></div>
+            <div class="text">采美商城首页</div>
         </div>
-        <div class="logo">
-            <a href="/" target="_blank"><img src="/img/base/logo_article@2x.png"/></a>
+    </div>
+<!--    搜索头-->
+    <div class="search-top" :class="show ? 'search-top-shadow' : '' ">
+        <div class="info-logo-content">
+            <div class="info-logo"></div>
         </div>
+        <div class="search auto-input" id="topSearch">
+            <div class="search-info">
+                <label>
+                    <input class="keyword" type="text" placeholder="请输入关键词" autocomplete="off" />
+                </label>
+                <a class="searchBtn icon" href="javascript:void(0);">搜索</a>
+            </div>
+            <div class="keywords">
+                <div th:each="label : ${labels}">
+                    <a th:href="'/info/label-' + ${label.id} + '-1.html'" th:text="${label.name}"></a>
+                    <span> / </span>
+                </div>
+            </div>
+        </div>
+        <div class="H5-info-logo"></div>
+        <div class="H5-info-menu">
+            <div @click="show = !show"></div>
+            <div>菜单</div>
+            <div></div>
+        </div>
+    </div>
+    <van-popup v-model="show" position="top" v-cloak>
+        <div class="search-title">
+            <div>搜索</div>
+            <div @click.stop="show = !show"></div>
+        </div>
+        <div class="search-info">
+            <label>
+                <input class="keyword" type="text" placeholder="请输入关键词" autocomplete="off" v-model="searchKeys" />
+            </label>
+            <a class="searchBtn icon" href="javascript:void(0);" @click="handlerH5Search">搜索</a>
+        </div>
+        <div class="keywords">
+            <div th:each="label : ${labels}" @click.stop="show = !show">
+                <a th:href="'/info/label-' + ${label.id} + '-1.html'" th:text="${label.name}"></a>
+            </div>
+        </div>
+    </van-popup>
+    <!--导航栏-->
+    <div class="nav">
+<!--        <div class="h5-head">-->
+<!--            <a class="index" href="/"><img src="/img/info/mall.png"></a>-->
+<!--&lt;!&ndash;            <a class="hotWord" href="javascript:void(0);">热搜词</a>&ndash;&gt;-->
+<!--        </div>-->
+<!--        <div class="logo">-->
+<!--            <a href="/" target="_blank"><img src="/img/base/logo_article@2x.png"/></a>-->
+<!--        </div>-->
         <div class="type">
-            <div>
+            <div class="type-content">
                 <!-- <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 class="type-item" th:each="type,status: *{articleType}" th:typeId="${type.id}" th:class="${typeId==type.id}?'type-item current':'type-item'">
+                    <a class="typeBtn" th:text="${type.name}" th:href="'/info/center-'+${type.id}+'-1.html'"></a>
+                    <div class="type-item-link"></div>
+                    <div class="nav-menu">
+                        <a>美博会</a>
+                        <a>年终大促</a>
+                        <a>美博会专题</a>
+                    </div>
+                </div>
                 <a class="typeBtn" href="/document/beauty-archive.html" target="_blank">美业资料</a>
                 <!-- <a class="typeBtn" href="/encyclopedia/product.html" target="_blank">采美百科</a> -->
             </div>
         </div>
         <!--搜索-->
-        <div class="search auto-input" id="topSearch">
-            <input class="keyword" type="text" placeholder="请输入关键词" autocomplete="off" />
-            <a class="searchBtn icon" href="javascript:void(0);"></a>
-        </div>
+<!--        <div class="search auto-input" id="topSearch">-->
+<!--            <input class="keyword" type="text" placeholder="请输入关键词" autocomplete="off" />-->
+<!--            <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">

src/main/resources/templates/article/components/article-link.html

@@ -7,6 +7,7 @@
     <meta http-equiv="expires" content="0">
     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
     <meta http-equiv="Cache-Control" content="no-transform " />
+    <link rel="stylesheet" th:href="@{/lib/element-ui/element-ui-min.css}" />
     <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">
@@ -14,3 +15,5 @@
     <link href="/lib/datapicker/daterangepicker.css" rel="stylesheet">
     <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">
+<link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
+

src/main/resources/templates/article/components/article-sidebar.html

@@ -4,21 +4,72 @@
 <!--    <div v-if="isPC && isRossShow" class="article-right-ross" :class="isRossShow ? 'show' : 'none'">-->
 <!--        <a href="/supplier-1378.html" v-if="isPC"><img src="/img/ross/ross-image@1x.jpg" alt="深圳艾斯佰丽生物科技有限公司"></a>-->
 <!--    </div>-->
-    <div id="mHotWord">
-        <div class="tags clearfix">
-            <p class="classify">
-                热搜词
-            </p>
-            <div class="tag">
-<!--                    <a v-for="label in labelList"  :href="'/info/label-' + label.id + '-1.html'" :style="'opacity:'+label.sort" v-text="label.name"></a>-->
-                <a th:each="label : ${labels}" th:href="'/info/label-' + ${label.id} + '-1.html'" th:text="${label.name}"></a>
+    <div v-if="isPC" class="recommend">
+        <p class="classify readerSify">
+            热门推荐
+            <span class="nextPreBtn">
+                <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>
+                <span v-if="recommend.prePage" class="pre" @click="getRecommend(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="recommend">
+        <p class="classify readerSify">
+            你可能感兴趣的商品
+            <span class="nextPreBtn">
+                <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>
+                <span v-if="recommend.prePage" class="pre" @click="getRecommend(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="recommend">
+        <p class="classify readerSify">
+            热门推荐
+            <span class="nextPreBtn">
+                <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>
+                <span v-if="recommend.prePage" class="pre" @click="getRecommend(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>
-        <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(typeId, recommend.nextPage)"></span>
                 <span v-if="recommend.prePage" class="pre" @click="getRecommend(typeId, recommend.prePage)"></span>

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

@@ -3,12 +3,13 @@
       xsi:schemaLocation="https://www.thymeleaf.org ">
 <head>
   <title>采美365网</title>
-  <template th:replace="components/head-link"></template>
+  <template th:replace="article/components/article-link"></template>
+  <template th:replace="components/analysis"></template>
   <link th:href="@{/css/article/error.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
-<!-- 引用头部 -->
-<template th:replace="components/header"></template>
+<!--导航栏-->
+<template th:replace="article/components/article-header"></template>
 <input type="hidden" th:value="${labelId}" id="labelId">
 <input type="hidden" th:value="${typeId}" id="typeId">
 <input type="hidden" th:value="${pageNum}" id="pageNum">
@@ -20,7 +21,7 @@
   <!--    <iframe id="errorContent" src="/search_children.html"></iframe>-->
   <div id="errorContent">
     <img src="/img/base/404.png">
-    <p>您访问的页面不存在，<span v-text="countdown"></span>秒后将自动返回首页</p>
+<!--    <p>您访问的页面不存在，<span v-text="countdown"></span>秒后将自动返回首页</p>-->
     <a href="/info/center-3-1.html">返回首页</a>
   </div>
 
@@ -41,8 +42,14 @@
   </div>
 </div>
 <!-- 引入底部 -->
-<template th:replace="components/footer"></template>
+<template th:replace="article/components/article-footer"></template>
 <template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" src="/lib/datapicker/moment-2.29.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/datapicker/jquery.daterangepicker.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/article/common.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/article/list.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/error.js(v=${version})}"></script>
 </body>
 </html>

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

@@ -2,7 +2,7 @@
 <html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="https://www.thymeleaf.org ">
 <head>
-    <title>采美365网</title>
+    <title>信息平台</title>
     <template th:replace="article/components/article-link"></template>
     <template th:replace="components/analysis"></template>
 </head>
@@ -10,6 +10,26 @@
 <div class="cm-modal"></div>
 <!--导航栏-->
 <template th:replace="article/components/article-header"></template>
+<div class="info-banner" id="Info-Banner" th:if="${isSearch}">
+    <div class="banner"></div>
+    <div class="sider-banner">
+        <div></div>
+        <div></div>
+    </div>
+    <div class="info-Notice">
+        <div class="notice-title">
+            <div>公告</div>
+            <div>
+                <a href="/info/articlerecommendation.html">更多 ></a>
+            </div>
+        </div>
+        <div class="notice-content">
+            <ul class="notice-content-list">
+                <li class="notice-content-li">国家药监局关于医用透明质酸钠...</li>
+            </ul>
+        </div>
+    </div>
+</div>
 <div class="tip-bar">
     <!--<div class="tip">提示：产品详情请到采美商城搜索</div> -->
     <!--面包屑-->
@@ -22,6 +42,31 @@
     <!--侧边栏Ross广告图-->
     <div class="mainData">
         <div class="new-list" id="articleList" v-cloak>
+            <!-- h5 公告-->
+            <div class="info-h5-notice" v-if="!isSearchModule">
+                <div class="h5-notice">公告：</div>
+                <div class="h5-notice-title">
+                    <ul>
+                        <li>12月德玛莉直播秒杀活动即将开始</li>
+                    </ul>
+                </div>
+                <div class="h5-notice-more"><a href="/info/articlerecommendation.html">更多 ></a></div>
+            </div>
+            <!--    精选文章推荐-->
+            <div class="featured-Articles" id="featured-Articles" v-if="!isSearchModule">
+                <div class="featured-title">
+                    <div>精选推荐</div>
+                    <div>
+                        <a href="/info/articlerecommendation.html">更多 ></a>
+                    </div>
+                </div>
+                <div class="featured-content">
+                    <div v-for="item in featuredList" :key="item.id" class="item-content">
+                        <div class="item-img"></div>
+                        <div class="item-title">{{item.content}}</div>
+                    </div>
+                </div>
+            </div>
             <div v-if="!isPC && isRossShow" class="article-right-ross" :class="isRossShow ? 'show' : 'none'"><a href="/supplier-1378.html" ><img src="/img/ross/ross-image@2x.jpg" alt="深圳艾斯佰丽生物科技有限公司"></a></div>
             <!-- 产品搜索结果 -->
             <div class="search-section" v-show="params.keyword && productRecord > 0">
@@ -67,6 +112,12 @@
                 </div>
             </div>
             <!-- 文章列表 -->
+            <div class="listData-select-title">
+                <div class="search-select">
+                    <div class="select-new" :class="params.selectDataRoutes === 1 ? 'now-search-select' : '' " @click="params.selectDataRoutes = 1">最新</div>
+                    <div class="select-earliest" :class="params.selectDataRoutes === 0 ? 'now-search-select' : '' " @click="params.selectDataRoutes = 0">最早</div>
+                </div>
+            </div>
             <div v-if="listData.length>0" class="dataRousce">
                 <div class="row" v-for="item in listData">
                     <div class="new-img">
@@ -90,6 +141,9 @@
                         <p v-if="isPC" class="P_img"><em class="pv icon mIcon" v-text="item.pv"></em></p>
                     </div>
                 </div>
+                <div class="handleMore" v-if="!noMore">
+                    <el-button class="more" @click="handleMore">查看更多</el-button>
+                </div>
             </div>
             <div v-if="listLoading" class="loading">
                 <img src="/img/base/loading.gif">
@@ -115,6 +169,10 @@
                 <span>页</span>&nbsp;
                 <a class="btn" :href="paginationUrl(pageInput)">点击跳转</a>
             </div>
+<!--            <div class="side-pop-up" :class="dialogVisible ? 'eject' : 'retract'" @click="handlerPopup">-->
+<!--                <div v-if="dialogVisible">侧边弹窗13-->
+<!--                    <el-button @click.stop="dialogVisible = false"></el-button></div>-->
+<!--            </div>-->
         </div>
     </div>
     <!--侧边栏Ross广告图-->
@@ -130,10 +188,13 @@
     </div>
 </div>
 
+<template th:replace="article/components/article-drawer"></template>
 <template th:replace="article/components/article-footer"></template>
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" src="/lib/datapicker/moment-2.29.min.js"></script>
 <script charset="utf-8" type="text/javascript" src="/lib/datapicker/jquery.daterangepicker.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
+<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/common.js(v=${version})}"></script>

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

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>采美365网</title>
+  <template th:replace="article/components/article-link"></template>
+  <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!--导航栏-->
+<template th:replace="article/components/article-header"></template>
+
+<div class="main" id="Recommendation">
+    123456
+</div>
+
+<template th:replace="article/components/article-footer"></template>
+<template th:replace="components/foot-link"></template>
+</body>
+</html>

src/main/resources/templates/error/404.html

@@ -89,8 +89,13 @@
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
 <script type="text/javascript">
+    const matchInfo = window.location.pathname.indexOf("info") !== -1
     if(!($('#coreServer').val() && $('#coreServer').val().length>0)){
-        window.location.href = '/404.html';
+        if (matchInfo) {
+            window.location.href = '/info/404.html'
+        } else {
+            window.location.href = '/404.html';
+        }
     }
 </script>
 </body>