Merge remote-tracking branch 'origin/developer' into developerB

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

@@ -24,6 +24,8 @@ import java.util.List;
 @Controller
 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 ArticleService articleService;
@@ -95,7 +97,8 @@ public class ArticleController extends BaseController {
         List<BaseLink> typeList = articleService.getArticleTypes();
         Article article = articleService.getArticleInfo(id);
         if(article == null){
-            return super.errorPath();
+            // return super.errorPath();
+            return "redirect:/info/404.html";
         }
         List<BaseLink> data = articleService.getArticleLabels().getData();
         List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
@@ -111,6 +114,17 @@ public class ArticleController extends BaseController {
         return ARTICLE_DETAIL_PATH;
     }
 
+    /**
+     *  404
+     */
+    @GetMapping("/info/404.html")
+    public String errorPage(final Model model) {
+        model.addAttribute("msg", "404页面");
+        model.addAttribute("type", "article");
+        return ERROR_PATH;
+    }
+
+
     /**
      * 获取文章热门标签
      */

src/main/resources/config/dev/application-dev.yml

@@ -11,7 +11,7 @@ spring:
     url: jdbc:mysql://120.79.25.27:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
     username: developer
     password: J5p3tgOVazNl4ydf
-    type: com.zaxxer.hikari.HikariDataSource
+    #type: com.zaxxer.hikari.HikariDataSource
     hikari:
       minimum-idle: 5
       maximum-pool-size: 15
@@ -57,7 +57,7 @@ caimei:
   coreServer: https://core-b.caimei365.com
   #coreServer: http://192.168.2.67:18002
   #coreServer: http://192.168.2.75:18002
-#  coreServer: http://192.168.2.100:18002
+  #coreServer: http://192.168.2.200:18002
   imageDomain: https://img-b.caimei365.com
   wwwDomain: http://localhost:8009
   destPath: classpath:/
@@ -68,7 +68,7 @@ caimei:
 # 阿里云oss配置
 aliyunOss:
   # 文件上传目录
-  ossBucket: dev
+  ossBucket: beta
 
 #DFS配置
 fdfs:

src/main/resources/static/css/activity/beautyTopic.css

@@ -29,7 +29,8 @@ a{color:#333;text-decoration:none}
 .cm-container{width:100%;margin:0 auto}
 [class*='cm-col-']{float:left;-webkit-box-sizing:border-box;box-sizing:border-box}
 .cm-floor .swiper-slide{ height: auto;}
-@media (max-width:560px){.cm-col-xs-1{width:1.66667%}
+@media (max-width:560px){
+.cm-col-xs-1{width:1.66667%}
 .cm-col-xs-2{width:3.33333%}
 .cm-col-xs-3{width:5%}
 .cm-col-xs-4{width:6.66667%}
@@ -366,14 +367,18 @@ a{color:#333;text-decoration:none}
 .banner-container .cm-container{height:100%;padding: 0;}
 .banner-container img{display:block;height:100%;width: 100%;}
 .has-player{position:absolute;top:0;left:0;width:100%;height:100%;}
-.has-player::before{content:'';display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:6vw;height:6vw; background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 6vw;}
+.has-player::before{content:'';cursor: pointer; display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:6vw;height:6vw; background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 6vw;}
 .cm-to-top{width:12vw;height:12vw;position:fixed;z-index:999;bottom:5%;right:15px;border-radius:6px;text-align:center;background:#fff;cursor:pointer;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
 .cm-to-top .cm-icon-bar{display:block;margin:0 auto;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
 .cm-to-top .cm-icon-bar:nth-child(1){width:6vw;height:1vw;background:#999999;margin-top:4vw;}
 .cm-to-top .cm-icon-bar:nth-child(2){width:0;height:0;border-left:3vw solid transparent;border-right:3vw solid transparent;border-bottom:2vw solid #999999}
 .cm-to-top .cm-icon-bar:nth-child(3){width:10px;height:10px;background:#999999}
-}@media (max-width:992px){.cm-swiper-button-prev,.cm-swiper-button-next{display:none}
-}@media (min-width:560px){.cm-col-md-1{width:1.66667%}
+}
+@media (max-width:992px){
+.cm-swiper-button-prev,.cm-swiper-button-next{display:none}
+}
+@media (min-width:560px){
+.cm-col-md-1{width:1.66667%}
 .cm-col-md-2{width:3.33333%}
 .cm-col-md-3{width:5%}
 .cm-col-md-4{width:6.66667%}
@@ -669,7 +674,7 @@ a{color:#333;text-decoration:none}
 .hover-class{-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
 .hover-class:hover{-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.2);box-shadow:0 0 15px rgba(0,0,0,0.2)}
 .has-player{position:absolute;top:0;left:0;width:100%;height:100%;}
-.has-player::before{content:'';display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:40px;height:40px;background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 40px 40px; }
+.has-player::before{content:'';cursor: pointer;display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:40px;height:40px;background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 40px 40px; }
 .cm-btn-box{text-align:center}
 .cm-btn-box .cm-toggle-btn{width:98px;height:32px;border:1px solid #ccc;color:#909090;display:inline-block;text-align:center;line-height:32px;font-size:14px;cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
 .cm-btn-box .cm-toggle-btn::after{content:'';display:inline-block;width:20px;height:16px;margin-right:2px;vertical-align:middle;background:url(/img/activity/icon.png) no-repeat;background-position-y:-2px}
@@ -719,8 +724,11 @@ a{color:#333;text-decoration:none}
 .cm-to-top:hover{background:#ff5c00}
 .cm-to-top:hover .cm-icon-bar:nth-child(1),.cm-to-top:hover .cm-icon-bar:nth-child(3){background:#fff !important}
 .cm-to-top:hover .cm-icon-bar:nth-child(2){border-bottom-color:#fff}
-}@media (min-width:1200px){.cm-container{width:1140px}
-}.cm-tags{white-space:nowrap}
+}
+@media (min-width:1200px){
+.cm-container{width:1140px}
+}
+.cm-tags{white-space:nowrap}
 .cm-tags .cm-tag{display:inline-block;padding:1px 4px;font-size:12px;border:1px solid #999;border-radius:2px}
 .cm-tags .cm-tag.color1{border-color:#aaa;background-color:#fff;color:#888}
 .cm-tags .cm-tag.color2{border-color:#f94b4b;background-color:#fff1eb;color:#f94b4b}
@@ -745,3 +753,19 @@ a{color:#333;text-decoration:none}
 .cm-tabs .cm-tab.on{color:#fff;background-color:#ff5c00}
 .cm-loading{z-index:99999;width:100vw;height:100vh;position:fixed;top:0;background:#fff}
 .cm-prodcut-price .red { color: #f94b4b;}
+
+@media screen and (min-width: 768px) {
+.video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: rgba(0,0,0,0.8);z-index: 99999}
+/*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+.video-popup .content{width: 944px;height: 642px; position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
+.video-popup .content video{width: 100%;height: 100%;display: block;}
+.video-popup .close {position: absolute;right: 30px;top: 30px; width: 36px;height: 36px;background: url(/img/activity/pc_close.png);background-size: 36px;cursor: pointer;}
+}
+
+@media screen and (max-width: 768px) {
+.video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
+/*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+.video-popup .content{width: 100%;height: 100%;position: absolute;left: 0; top: 0;}
+.video-popup .content video{width: 100%;height: 100%;display: block;}
+.video-popup .close {position: absolute;right: 3.6vw;top: 3.6vw; z-index: 1; width: 7.2vw;height: 7.2vw;background: url(/img/activity/pc_close.png);background-size: 7.2vw;cursor: pointer;}
+}

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

@@ -38,6 +38,7 @@ dl,dd,dt{zoom:1}
 @-webkit-keyframes pointerFlashing {from{opacity: 1} to{opacity: 0.1}}
 @keyframes pointerFlashing {from{opacity: 1} to{opacity: 0.1}}
 
+
 @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}
 	/* 分享，回到顶部 */
@@ -67,16 +68,16 @@ dl,dd,dt{zoom:1}
 	.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}
+	.header{position:sticky;width:100%;background:#e15616;top:0;left:0;z-index:999}
+	.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: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 .type a{padding:0 16px;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; border-bottom: 2px solid #e15616;box-sizing: border-box;}
+	.type a:hover{background-color:#e96c1c;border-bottom-color: #fec19a}
+	.type a.current{background-color:#e96c1c;border-bottom-color: #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:16px;background:#eb7941;color:#fff;font-size:14px}
+	.nav .search .keyword{width:280px;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 .keyword::-webkit-input-placeholder{color:#fff}
@@ -85,19 +86,19 @@ dl,dd,dt{zoom:1}
 	.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;height: 130px;box-sizing: border-box;padding: 39px 0;}
+	.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}
 	.footer p span a{color: #FFFFFF;}
 	.footer p span a:hover{color: #E15621;}
 	.footer p span img.icp{width: 18px;height: 18px;display: inline-block;}
-	.tip-bar{padding: 80px 0 5px}
-	.bar,.tip{width:1190px;margin:0 auto;padding-bottom:5px}
+	.tip-bar{padding: 16px 0;}
+	.bar,.tip{width:1185px;margin:0 auto;padding-bottom:5px}
 	.tip{color: #777;}
 	.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;background:#ffffff;}
+	.content{width:1185px;margin:0 auto;position:relative;}
+	.content .mainData{float:left;width: 884px;background:#ffffff;}
 	.content .new-list{width:100%;background:#ffffff;}
 	.content .row:nth-last-child(1){border-bottom:0}
 	.new-list .row{position:relative;display:table;width:800px;height:150px;margin:0 30px;padding:24px 0;border-bottom:solid 1px #ededed}
@@ -107,9 +108,9 @@ dl,dd,dt{zoom:1}
 	.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{width:570px;font-size:18px;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{width:33px;height:20px;line-height:20px;margin-right:20px;display:inline-block;}
 	.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}
@@ -128,8 +129,8 @@ dl,dd,dt{zoom:1}
 	.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}
+	.row .new-blurb .introduction{margin-top: 10px; color:#777;font-size:14px;line-height:26px;min-height:52px;overflow :hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+	.content .other{width:284px;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"}
@@ -146,11 +147,13 @@ dl,dd,dt{zoom:1}
 	.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{display:block;position: relative; width:284px;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::after{content: "";opacity: 0;width: 100%;height: 100%; position: absolute; left: 0;top: 0;box-sizing: border-box;border: 1px solid #e15616; transition: all 0.2s;}
+	.tui .tui-img:hover::after{opacity: 1;}
+	/*.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;padding:0 30px;border-bottom:solid 1px #ededed}*/
+	/*.new-list .search{width:884px;padding:0 30px;border-bottom:solid 1px #ededed}*/
 	/*.new-list .search .search-box{position:relative;width:796px;height:50px;margin-top:30px;}*/
 	/*.new-list .search-box .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 .search-box .keyword:focus{border:1px solid #ddd;border-right:none;outline:medium}*/
@@ -163,7 +166,7 @@ dl,dd,dt{zoom:1}
 	.new-list .search-tip span { color:#E15616; font-weight:bold; margin: 0 2px; }
 	.new-list .search-tip a { display: block; width: 88px; height: 32px; background: #E15616; color: #fff; text-align: center; line-height: 32px; margin-left: 12px; }
 	/* 搜索结果排序 */
-	.new-list .filter-sort { display: flex; justify-content: flex-start; align-items: center; padding-left: 32px; line-height: 36px; margin-top: 32px; }
+	/* .new-list .filter-sort { display: flex; justify-content: flex-start; align-items: center; padding-left: 32px; line-height: 36px; margin-top: 32px; }
 	.new-list .filter-sort .filter__label { font-size: 16px; color: #4A4F58; margin-right: 24px;}
 	.new-list .filter-sort .filter__item_list { color: #8A8A8A; }
 	.new-list .filter-sort .filter__item_list .filter__item { display: inline-block; margin-right: 24px; box-sizing: border-box; padding: 0 16px 0 40px; position: relative; cursor: pointer; }
@@ -175,8 +178,41 @@ dl,dd,dt{zoom:1}
 	.new-list .filter-sort .filter__item_list .filter__item.date::after { background-image: url("/img/base/pc-icon-sort-date.png"); }
 	.new-list .filter-sort .filter__item_list .filter__item.normal.active::after { background-image: url("/img/base/pc-icon-sort-normal-active.png"); }
 	.new-list .filter-sort .filter__item_list .filter__item.date.active::after { background-image: url("/img/base/pc-icon-sort-date-active.png"); }
+	*/
+	/* 文章搜索信息 */
+	.search-section { display: flex;align-items: center;justify-content: space-between; width: 884px; background: #F5F5F5; padding-bottom: 16px; overflow: hidden; }
+	.search-section .search__product_list{flex: 1; height: 178px; background: #fff; transition: all 0.4s; box-sizing: border-box; padding: 0 32px;}
+	.search-section .search__product_list .search__tip{ margin: 12px 0; font-size: 16px; color: #4A4F58;}
+	.search-section .search__product_list .search__tip span{ color: #E15616; font-weight: bold; }
+	.search-section .search__product_list .search__content {display: flex;}
+	.search-section .search__product_list .search__product{display: block; width: 90px; margin-left: 17px;}
+	.search-section .search__product_list .search__product:first-child{ margin-left: 0;}
+	.search-section .search__product_list .search__product .search__product_cover{width: 100%; height: 90px; box-sizing: border-box; border: 1px dashed #EEEFF1;}
+	.search-section .search__product_list .search__product .search__product_cover img{display: block; width: 88px; height: 88px;}
+	.search-section .search__product_list .search__product .search__product_name{width: 100%; margin-top: 10px; font-size: 14px; color: #4A4F58; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
+	.search-section .search__more { width: 180px; height: 178px; margin-left: 16px; display: flex; justify-content: center;align-items: center; flex-direction: column; background: url("/img/article/pc-icon-search-more-bg.png") no-repeat center; background-size: 180px 178px;}
+	.search-section .search__more .search__more_tip{ font-size: 14px; color: #4A4F58; }
+	.search-section .search__more .search__more_line{ width: 14px; height: 2px; background: #E15616; margin: 18px 0 20px;}
+	.search-section .search__more .search__more_link{ display: block; width: 144px; height: 36px; line-height: 36px; text-align: center; color: #fff; font-size: 16px; background: #E15616; }
+	/* 文章搜索排序 */
+	.search-filter{background: #f5f5f5;padding-bottom: 16px;}
+	.search-filter .search__content{height: 56px; background: #fff; display: flex;align-items: center;justify-content: space-between; padding: 0 32px; }
+	.search-filter .search__content .search__tip{font-size: 16px; color: #4A4F58;background: #fff; flex: 1;}
+	.search-filter .search__content .search__tip span{color: #E15616; font-weight: bold;}
+	.search-filter .search__content .search__sort { position: relative; z-index: 9; cursor: pointer; user-select: none; width: 112px; height: 32px; border: 1px solid #eee; box-sizing: border-box;padding-right: 24px;padding-left: 14px; }
+	.search-filter .search__content .search__sort::after{content:""; display: block;width: 24px; height: 24px; position: absolute; top: 3px; right: 4px; background: url("/img/article/pc-icon-search-drap-down.png") no-repeat center; background-size: 24px 24px; }
+	.search-filter .search__content .search__sort.active::after{ background-image: url("/img/article/pc-icon-search-drap-up.png") }
+	.search-filter .search__content .search__sort .search__sort_current{font-size: 14px; color: #4A4F58;line-height: 30px;}
+	.search-filter .search__content .search__sort .search__sort_select{ position: absolute;display: none;padding: 8px 0; top: 36px; left: 50%; transform: translateX(-50%); width: 136px; background-color: #fff;box-shadow: 0px 6px 16px 1px rgba(0,0,0,0.1); border-radius: 2px; }
+	@keyframes searchSortSlide { from {opacity: 0.5; top: 60px} to{opacity: 1; top: 36px;}}
+	.search-filter .search__content .search__sort.active .search__sort_select{ display: block; animation: searchSortSlide 0.4s forwards ease-in-out; }
+	.search-filter .search__content .search__sort .search__sort_select li{position: relative; height: 40px; line-height: 40px; text-align: center; font-size: 14px; color: #4A4F58; padding-right: 40px;}
+	.search-filter .search__content .search__sort .search__sort_select li::after{ content:""; display: block;width: 20px; height: 20px; position: absolute; top: 10px; right: 16px; background: no-repeat center; background-size: 20px 20px; }
+	.search-filter .search__content .search__sort .search__sort_select li.selected,
+	.search-filter .search__content .search__sort .search__sort_select li:hover{ background-color: #FEF6F3; color: #E15616; }
+	.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:860px;height:500px;text-align:center;padding-top:100px}
+	.no-result{width:884px;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}
@@ -259,6 +295,38 @@ dl,dd,dt{zoom:1}
 	.new-list .filter-sort .filter__item_list .filter__item.normal.active::after { background-image: url("/img/base/h5-icon-sort-normal-active.png"); }
 	.new-list .filter-sort .filter__item_list .filter__item.date.active::after { background-image: url("/img/base/h5-icon-sort-date-active.png"); }
 
+	/* 文章搜索信息 */
+	.search-section { width: 100%; background: #F5F5F5; padding-bottom: 2vw; }
+	.search-section .search__product_list{ background: #fff; transition: all 0.4s; box-sizing: border-box;}
+	.search-section .search__product_list .search__tip{ margin: 4.4vw 0 3.2vw; font-size: 3.4vw; color: #4A4F58; padding: 0 3.2vw;}
+	.search-section .search__product_list .search__tip span{ color: #E15616; font-weight: bold; }
+	.search-section .search__product_list .search__content {display: flex; overflow-y: scroll; padding-bottom: 3.5vw;}
+	.search-section .search__product_list .search__product{flex-shrink: 0; display: block; width: 26vw; margin-left: 2.4vw;}
+	.search-section .search__product_list .search__product:first-child{ margin-left: 3.3vw;}
+	.search-section .search__product_list .search__product .search__product_cover{width: 100%; height: 24vw; box-sizing: border-box; border: 0.2vw dashed #EEEFF1;}
+	.search-section .search__product_list .search__product .search__product_cover img{display: block; width: 23.6vw; height: 23.6vw;}
+	.search-section .search__product_list .search__product .search__product_name{width: 100%; margin-top: 2.4vw; font-size: 3vw; color: #4A4F58; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
+	.search-section .search__more { flex-shrink: 0;  width: 30.8vw; height: 30.8vw; margin-left: 4vw; margin-right: 3.3vw; display: flex; justify-content: center;align-items: center; flex-direction: column; background: url("/img/article/h5-icon-search-more-bg.png") no-repeat center; background-size: 30.8vw 30.8vw;}
+	.search-section .search__more .search__more_tip{ font-size: 3vw; color: #4A4F58; }
+	.search-section .search__more .search__more_line{ width: 2.4vw; height: 0.3vw; background: #E15616; margin: 3.5vw 0 3.7vw;}
+	.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: #E15616; }
+	/* 文章搜索排序 */
+	.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 .search__tip{font-size: 3.4vw; color: #4A4F58;background: #fff; flex: 1;}
+	.search-filter .search__content .search__tip span{color: #E15616; 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; }
+	.search-filter .search__content .search__sort::after{content:""; display: block;width: 5.4vw; height: 5.4vw; position: absolute; top: 1.3vw; right: 1.4vw; background: url("/img/article/h5-icon-search-drap-down.png") no-repeat center; background-size: 5.4vw 5.4vw; }
+	.search-filter .search__content .search__sort.active::after{ background-image: url("/img/article/h5-icon-search-drap-up.png") }
+	.search-filter .search__content .search__sort .search__sort_current{font-size: 3vw; color: #4A4F58;line-height: 7.6vw;}
+	.search-filter .search__content .search__sort .search__sort_select{ position: absolute;display: none;padding: 1.6vw 0; top: 10vw; left: 50%; transform: translateX(-50%); width: 24.8vw; background-color: #fff;box-shadow: 0px 0.4vw 2.4vw 0.1vw rgba(0,0,0,0.1); border-radius: 0.2vw; }
+	@keyframes searchSortSlide { from {opacity: 0.5; top: 11vw} to{opacity: 1; top: 10vw;}}
+	.search-filter .search__content .search__sort.active .search__sort_select{ display: block; animation: searchSortSlide 0.4s forwards ease-in-out; }
+	.search-filter .search__content .search__sort .search__sort_select li{position: relative; height: 10vw; line-height: 10vw; text-align: center; font-size: 3vw; color: #4A4F58; padding-right: 6.4vw;}
+	.search-filter .search__content .search__sort .search__sort_select li::after{ content:""; display: block;width: 4vw; height: 4vw; position: absolute; top: 3vw; right: 2.4vw; background: no-repeat center; background-size: 4vw 4vw; }
+	.search-filter .search__content .search__sort .search__sort_select li.selected { background-color: #FEF6F3; color: #E15616; }
+	.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 .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;}

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

@@ -0,0 +1,42 @@
+body{background:#f6f6f6;position:relative}
+
+@media screen and (min-width:768px){
+body{min-width:1184px}
+    #errorContent{width:1200px !important;min-height:500px !important;height:auto !important;overflow:hidden;border:none;margin:auto;padding:160px 0 40px;}
+    #errorContent p{color:#666666;font-size:20px;padding:60px 0}
+    #errorContent p span{color: #E15616;}
+    #errorContent a{width:190px;height:44px;text-align:center;background:#e15616;color:#fff;display:inline-block;line-height:44px;border-radius:2px}
+    .recommend{ position: relative; width:1200px; margin: 0 auto; padding: 100px 0 66px;}
+    .recommend .title{font-size: 16px; color: #4A4F58; text-align: left; margin-bottom: 24px; font-weight: bold;}
+    .recommend .list{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
+    .recommend .list .item{ width: 486px; display: flex; align-items: center;  margin-bottom: 32px; cursor: pointer;}
+    .recommend .list .item .cover{width: 98px;height: 68px; box-sizing: border-box; border: 1px dashed #EEEFF1;}
+    .recommend .list .item .cover img{display: block; width: 96px; height: 66px; flex-shrink: 0;}
+    .recommend .list .item .name{ font-size: 16px; color: #4A4F58; margin-left: 16px; flex: 1; line-height: 32px; text-align: justify;}
+    .recommend .list .item .name:hover{ color: #E15616; }
+    .recommend .page{position: absolute; right: 0; top: 100px; font-size: 0;}
+    .recommend .page span{position:relative; display: inline-block; width: 16px; height: 16px; background-color: #E2E2E2; margin-left: 16px; cursor: pointer; font-size: 0;}
+    .recommend .page span::after{ content: ""; display: block; width: 12px; height: 12px; position: absolute; left: 2px; top: 2px; background: url("/img/article/pc-icon-prev.png") no-repeat center; background-size: 12px;}
+    .recommend .page span.next::after{background-image: url("/img/article/pc-icon-next.png")}
+    .recommend .page span:hover{background-color: #e15616; }
+}
+@media screen and (max-width:768px){
+    #errorContent{width:100% !important;overflow:hidden;border:none;padding-top:23.7vw}
+    #errorContent img{width:53.7vw;height:23.2vw}
+    #errorContent p{font-size:3.4vw;color:#666666;padding:7.8vw 7.8vw 5vw}
+    #errorContent p span{color: #E15616;}
+    #errorContent a{width:36vw;height:11.2vw;line-height:11.2vw;color:#fff;background:#e15616;border-radius:.53vw;display:inline-block}
+
+    .recommend{ position: relative; margin-top: 22vw;margin-bottom: 3.2vw;}
+    .recommend .title{font-size: 4vw; color: #4A4F58; text-align: left; margin-bottom: 4.8vw; font-weight: bold; padding: 0 4vw;}
+    .recommend .list{ padding: 0 4vw 8vw; }
+    .recommend .list .item{ display: flex; align-items: center;  margin-bottom: 3.2vw; cursor: pointer;}
+    .recommend .list .item .cover{ box-sizing: border-box; border: 0.2vw dashed #EEEFF1;}
+    .recommend .list .item .cover img{display: block; width: 25.8vw;height: 18vw; flex-shrink: 0;}
+    .recommend .list .item .name{ font-size: 3.4vw; color: #4A4F58; margin-left: 4vw; flex: 1; line-height: 6.4vw; text-align: justify;}
+    .recommend .page{position: absolute; right: 4vw; top: 0; font-size: 0;}
+    .recommend .page span{position:relative; display: inline-block; width: 4.8vw; height: 4.8vw; background-color: #E2E2E2; margin-left: 4vw; cursor: pointer; }
+    .recommend .page span::after{ content: ""; display: block; width: 3.2vw; height: 3.2vw; position: absolute; left: 0.8vw; top: 0.8vw; background: url("/img/article/h5-icon-prev.png") no-repeat center; background-size: 3.2vw;}
+    .recommend .page span.next::after{background-image: url("/img/article/h5-icon-next.png")}
+    .recommend .page span:hover{background-color: #e15616; }
+}

src/main/resources/static/js/activity/beautyTopic.js

@@ -1,4 +1,7 @@
 'use strict';
+
+
+
 var activeApp = (function () {
     return new Vue({
         el: '#app',
@@ -40,6 +43,12 @@ var activeApp = (function () {
         mounted: function mounted() {
             this.pageLoaded();
             // this.showCouponEntry = true 优惠券弹窗入口2
+            // 关闭视频播放
+            this.$nextTick(function(){
+                $('#video-popup .close').on('click', function(){
+                    $(this).parents('#video-popup').hide();
+                });
+            })
         }
         ,
         created: function created() {
@@ -215,9 +224,15 @@ var activeApp = (function () {
                 };
             }
             ,
+            // 播放视频
+            onPlayVideo(link){
+                $('#video-popup video').attr('src', link);
+                $('#video-popup').show();
+            },
             // 处理link
             reallink: function reallink(link) {
-                return link ? link : 'javascript:void(0)';
+                if(!link) return 'javascript:void(0)';
+                return link;
             }
             ,
             handleToggleActive: function handleToggleActive(flag) {

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

@@ -1 +1,4 @@
 
+class VideoPlayer extends HTMLElement {
+
+}

src/main/resources/static/js/activity/beautyTopic/layout.js

@@ -295,6 +295,26 @@ var layoutMapping = function () {
 			mobile: 0.51,
 			pc: 0.613,
 			swiper: '1-2-2-1'
+		},
+		'template-30': {
+			mobile: 0.78,
+			pc: 0.7,
+			swiper: '2-3-2-2'
+		},
+		'template-31': {
+			mobile: 0.778,
+			pc: 0.775,
+			swiper: '1-4-1-1'
+		},
+		'template-32': {
+			mobile: 0.6,
+			pc: 0.613,
+			swiper: '2-2-2-2'
+		},
+		'template-33': {
+			mobile: 0.51,
+			pc: 0.613,
+			swiper: '1-2-2-1'
 		}
 	};
 

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

@@ -0,0 +1,56 @@
+$(function () {
+    var coreServer = $('#coreServer').val()
+    if (!coreServer && coreServer.length > 0) {
+        window.location.href = '/404.html';
+    }
+})
+
+var errorPage = new Vue({
+    el: '#errorPage',
+    data: {
+        recommend: [],
+        countdown: 2,
+        timer: null
+    },
+    mounted: function () {
+        this.onRedirect();
+        this.init()
+    },
+    methods: {
+        init() {
+            var _self = this;
+            this.typeId = $("#typeId").val() * 1;
+            this.labelId = $("#labelId").val() * 1;
+            this.getRecommend(this.typeId, 1);
+            //换一批15秒请求一次
+            setInterval(function () {
+                if (_self.recommend.hasNextPage) {
+                    _self.getRecommend(_self.typeId, _self.recommend.nextPage);
+                } else {
+                    _self.getRecommend(_self.typeId, 1);
+                }
+            }, 10000);
+        },
+        getRecommend: function (typeId, pageNum) {
+            var _self = this;
+            $.getJSON("/article/recommend", {
+                typeId: typeId,
+                pageNum: pageNum
+            }, function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.recommend = r.data;
+                }
+            });
+        },
+        // 重定向
+        onRedirect: function(){
+            var self = this;
+            this.timer = setInterval(function () {
+                if(--self.countdown <= 0){
+                    clearInterval(self.timer);
+                    window.location.href = '/'
+                }
+            }, 1000);
+        },
+    }
+});

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

@@ -6,6 +6,11 @@ var requestUrlConfig = {
 
 var articleList = new Vue({
     el: '#articleList',
+    filters:{
+        keywordSlice: function(keyword){
+            return keyword.length > 6 ? keyword.slice(0,6) + '…' : keyword;
+        }
+    },
     data: {
         loginStatus: false,
         listLoading: true,
@@ -24,6 +29,7 @@ var articleList = new Vue({
         listData: [],
         listRecord: 0,
         productRecord: 0,
+        productList: [],
         pageInput: '1',
         keyword: '',
         requestType: '', // 请求链接类型keyword | labelId | typeId
@@ -86,7 +92,8 @@ var articleList = new Vue({
                 this.requestType = 'labelId'
             } else if (this.params.keyword) {
                 this.requestType = 'keyword'
-                $("header").find("#topSearch").remove();
+                $('#topSearch .keyword').val(this.params.keyword);
+                $('.tip-bar').css('padding-bottom', 0);
             }
             this.requestAction(this.requestType);
             this.initPageReset();
@@ -135,6 +142,11 @@ var articleList = new Vue({
             this.getArticleList(requestUrlConfig['keyword'], params);
         },
 
+        // 高亮关键词
+        highlightKeyword: function(str){
+            return str.replaceAll(this.keyword, '<span style="color: #E15616">'+ this.keyword +'</span>')
+        },
+
         // 获取文章列表
         getArticleList: function (url, params) {
             var self = this;
@@ -158,8 +170,14 @@ var articleList = new Vue({
                             publishDate: item.publishDate
                         });
                     });
+                    // 处理标题和描述
+                    resultData = resultData.map(function (item){
+                        item.title = self.highlightKeyword(item.title);
+                        item.intro = self.highlightKeyword(item.intro);
+                        return item
+                    });
                     if (isPC) {
-                        self.listData = resultData;
+                        self.listData = resultData
                     } else {
                         self.listData = self.listData.concat(resultData);
                     }
@@ -237,14 +255,19 @@ var articleList = new Vue({
             }, function (res) {
                 res = JSON.parse(res.data);
                 self.productRecord = res.total;
+                if (res.total > 8) {
+                    self.productList = res.items.slice(0, 6);
+                } else {
+                    self.productList = res.items.slice(0, 8);
+                }
             })
         },
 
         // 初始化排序控件
         initSortControl: function () {
             var self = this;
-            initFilter({
-                el: '#filter-sort',
+            initFilterSort({
+                el: '#searchSortControl',
                 confirm(result) {
                     console.log('确定')
                     self.listLoading = true;
@@ -285,122 +308,30 @@ var articleList = new Vue({
                     }
                 });
             }
-            $("body").on("click", ".header .hotWord", function () {
-                $("#mHotWord").show();
-            }).on("click", "#mHotWord .close,#mHotWord", function () {
-                $("#mHotWord").hide();
-            }).on("click", "#mHotWord .tags", function (e) {
-                e.stopPropagation();
-            })
         },
     }
 });
 
-function initFilter(option){
-    var comEl = $(option.el);
-    comEl.find('.filter__item').on('click', function(){
-        $(this).siblings('.filter__item').removeClass('active');
-        $(this).addClass('active');
-        var status = $(this).attr('data-sort-status') && parseInt($(this).attr('data-sort-status'));
-        option.confirm && option.confirm({ status: status });
-    })
-}
-
-/*
-function initFilter(option) {
-    var comEl = $(option.el);
-    var dropBtn = comEl.find('.cm-drop-btn');
-    var dropDown = comEl.find('.cm-drop-down');
-    var datePicker = comEl.find('.cm-date-picker');
-    var dateFilter = comEl.find('.cm-filter-date');
-    var slideNav = comEl.find('.cm-slide');
-    var slideAlert = comEl.find('.cm-sub-slide');
-    var startDate = datePicker.find('.cm-date-begin');
-    var endDate = datePicker.find('.cm-date-end');
+function initFilterSort(option = {}){
+    var sortControl = $(option.el);
+    var sortItem = sortControl.find('.search__sort_select li');
+    var sotrCurrent = sortControl.find('.search__sort_current');
 
-    $(window).on('click', function (el) {
-        if (comEl.has(el.target).length > 0) return;
-        dropDown.fadeOut();
-        dropBtn.removeClass('cm-active');
+    $(window).on('click', function(el){
+        console.log(el);
+        if (sortControl.has(el.target).length > 0) return;
+        sortControl.removeClass('active');
     })
 
-    dropBtn.on('click', function () {
-        dropDown.fadeToggle();
-        dropBtn.toggleClass('cm-active');
+    sortControl.on('click', function(){
+        $(this).toggleClass('active');
     })
 
-    slideNav.on('click', function () {
-        $(this).addClass('cm-active').siblings('.cm-slide').removeClass('cm-active').find('.cm-sub-slide').hide();
-        slideAlert.hide();
-        $($(this).attr('data-target')).show();
+    sortItem.on('click', function(el){
+        $(this).addClass('selected').siblings('li').removeClass('selected');
+        var status = parseInt($(this).attr('data-type'));
+        console.log(status)
+        sotrCurrent.text($(this).text());
+        option.confirm && option.confirm({status: status});
     })
-
-    slideNav.each(function (index, el) {
-        var confirmBtn = $($(el).attr('data-target')).find('.cm-confirm');
-        var cancelBtn = $($(el).attr('data-target')).find('.cm-cancel');
-        if (cancelBtn.length > 0) {
-            cancelBtn.on('click', function () {
-                option.cancel && option.cancel();
-                dropDown.fadeOut();
-                dropBtn.removeClass('cm-active');
-            });
-        }
-        if (confirmBtn.length > 0) {
-            confirmBtn.on('click', function () {
-                option.confirm && option.confirm({status: 2});
-                dropDown.fadeOut();
-                dropBtn.removeClass('cm-active');
-                dropBtn.text($(el).find('.cm-slide-name').text())
-            });
-        } else {
-            $(el).on('click', function () {
-                option.confirm && option.confirm({status: 1});
-                dropDown.fadeOut();
-                dropBtn.removeClass('cm-active');
-                dropBtn.text($(el).find('.cm-slide-name').text())
-            })
-        }
-    })
-
-    function generageDateStr(type) {
-        var dayTimestamp = 24 * 60 * 60 * 1000;
-        var result = {
-            week: 7,
-            month: 30,
-            halfYear: 182,
-            year: 365,
-        };
-        return moment(Date.now() - result[type] * dayTimestamp).format('YYYY-MM-DD');
-    }
-
-    dateFilter.find('.cm-item').on('click', function () {
-        $(this).siblings('.cm-item').removeClass('cm-active');
-        $(this).addClass('cm-active');
-        var days = $(this).attr('data-last-date');
-        var start = generageDateStr(days);
-        var end = moment().format('YYYY-MM-DD');
-        var date = start + ' to ' + end;
-        option.getDate && option.getDate({date, start, end});
-    });
-
-    datePicker.on('click', function () {
-        dateFilter.find('.cm-item').removeClass('cm-active');
-    });
-
-    // 初始化时间选择器
-    datePicker.dateRangePicker({
-        language: 'cn',
-        format: 'YYYY-MM-DD',
-        autoClose: isPC,
-        showShortcuts: false,
-        isNowrap: false,
-        getValue: function () {
-            return option.setDate ? option.setDate() : ''
-        },
-        setValue: function (date, start, end) {
-            option.getDate && option.getDate({date, start, end})
-            startDate.text(start)
-            endDate.text(end)
-        },
-    });
-}*/
+}

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

@@ -0,0 +1,406 @@
+var requestUrlConfig = {
+    keyword: coreServer + "/commodity/search/query/article",
+    labelId: coreServer + "/commodity/search/query/article/label",
+    typeId: coreServer + "/commodity/search/query/article/type"
+};
+
+var articleList = new Vue({
+    el: '#articleList',
+    data: {
+        loginStatus: false,
+        listLoading: true,
+        requestFlag: true,
+        noMore: false,
+        params: {
+            size: 8,
+            num: 1,
+            typeId: '',
+            labelId: '',
+            keyword: '',
+            status: 1,
+            startDate: '',
+            endDate: ''
+        },
+        listData: [],
+        listRecord: 0,
+        productRecord: 0,
+        pageInput: '1',
+        keyword: '',
+        requestType: '', // 请求链接类型keyword | labelId | typeId
+    },
+    computed: {
+        pageTotal: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            total = total > 0 ? total : 1;
+            var index = this.params.num, arr = [];
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
+    },
+    created: function () {
+        // 判断登录状态
+        if (globalUserData.token) {
+            this.loginStatus = true;
+        }
+        var self = this;
+        this.$nextTick(function () {
+            self.initQueryParam();
+            self.initBase();
+        });
+    },
+    methods: {
+        // 初始化链接参数
+        initQueryParam() {
+            if (isPC) {
+                this.params.size = getUrlParam("pageSize") ? getUrlParam("pageSize") * 1 : 8;
+                this.params.num = $("#pageNum").val() ? $("#pageNum").val() * 1 : 1;
+            } else {
+                this.params.size = 8;
+                this.params.num = 1;
+            }
+            this.keyword = getUrlParam("keyword") ? getUrlParam("keyword") : '';
+            this.params.keyword = this.keyword;
+        },
+
+        //初始化页面
+        initBase: function () {
+            this.params.typeId = $("#typeId").val() * 1;
+            this.params.labelId = $("#labelId").val() * 1;
+            if (!this.params.typeId) {
+                $(".content").addClass("sea-top");
+            }
+            if (this.params.typeId) {
+                this.requestType = 'typeId'
+            } else if (this.params.labelId) {
+                this.requestType = 'labelId'
+            } else if (this.params.keyword) {
+                this.requestType = 'keyword'
+                $("header").find("#topSearch").remove();
+            }
+            this.requestAction(this.requestType);
+            this.initPageReset();
+            this.initSortControl();
+            this.fetchProductList();
+        },
+
+        // 发起文章列表请求
+        requestAction: function (type) {
+            var requestAction = {
+                'typeId': this.initWithTypeId,
+                'labelId': this.initWithLabelId,
+                'keyword': this.initWithKeyword,
+            };
+            requestAction[type]();
+        },
+
+        // 文章分类查询列表
+        initWithTypeId: function () {
+            var params = {
+                id: this.params.typeId,
+                pageSize: this.params.size,
+                pageNum: this.params.num
+            }
+            this.getArticleList(requestUrlConfig['typeId'], params);
+        },
+
+        //文章标签查询文章列表
+        initWithLabelId: function () {
+            var params = {
+                id: this.params.labelId,
+                pageSize: this.params.size,
+                pageNum: this.params.num
+            }
+            this.getArticleList(requestUrlConfig['labelId'], params);
+        },
+
+        // 关键词查询文章列表
+        initWithKeyword: function () {
+            var params = {
+                keyword: this.params.keyword,
+                pageSize: this.params.size,
+                pageNum: this.params.num,
+                status: this.params.status
+            }
+            this.getArticleList(requestUrlConfig['keyword'], params);
+        },
+
+        // 获取文章列表
+        getArticleList: function (url, params) {
+            var self = this;
+            $.getJSON(url, params, function (r) {
+                if (r.code === 0 && r.data) {
+                    var result = JSON.parse(r.data);
+                    self.listRecord = result.total;
+                    var resultData = [];
+                    result.items.map(function (item) {
+                        resultData.push({
+                            id: item.articleId,
+                            title: item.title,
+                            image: item.image,
+                            intro: item.intro,
+                            typeId: item.typeId,
+                            type: item.typeText,
+                            labelIds: item.labelIds.replace(/[^[\d|\S]]*/g, ',').split(","),
+                            labels: item.labelText.replace(/[^[\d|\S]]*/g, ',').split(","),
+                            pv: item.pv,
+                            publisher: item.publisher,
+                            publishDate: item.publishDate
+                        });
+                    });
+                    if (isPC) {
+                        self.listData = resultData;
+                    } else {
+                        self.listData = self.listData.concat(resultData);
+                    }
+                }
+                self.listLoading = false;
+                self.requestFlag = true;
+            })
+        },
+
+        // 搜索
+        onSearchEnter: function () {
+            if (this.keyword === '') {
+                $.confirm({
+                    useBootstrap: false,
+                    boxWidth: (isPC ? '300px' : '70%'),
+                    title: '提示',
+                    content: '请输入文章关键字！',
+                    closeIcon: true,
+                    animation: 'opacity',
+                    closeAnimation: 'opacity',
+                    animateFromElement: false,
+                    buttons: {
+                        close: {
+                            text: '确定',
+                            btnClass: 'btn-confirm'
+                        }
+                    }
+                });
+                return;
+            }
+            var query = param({
+                keyword: this.keyword,
+            })
+            window.location.href = '/info/search-1.html?' + query;
+        },
+
+        // 页码跳转
+        toPagination: function (pageNum) {
+            if (pageNum <= this.pageTotal) {
+                var params = {pageNum: pageNum};
+                window.location.href = updateUrlParam(params);
+            }
+        },
+
+        // 页码链接处理
+        paginationUrl: function (pageNum) {
+            var path = window.location.href;
+            var paramsArr = window.location.pathname.split(".")[0].split("-");
+            var pageId = paramsArr.length >= 1 ? paramsArr[1] : '';
+            if (paramsArr[0].indexOf('/info/search') >= 0) {
+                var search = window.location.search;
+                path = '/info/search-' + pageNum + '.html' + search;
+            } else if (paramsArr[0].indexOf('/info/center') >= 0) {
+                path = '/info/center-' + pageId + '-' + pageNum + '.html';
+            } else if (paramsArr[0].indexOf('/info/label') >= 0) {
+                path = '/info/label-' + pageId + '-' + pageNum + '.html';
+            }
+            return path;
+        },
+
+        // 页面修改
+        checkNum: function () {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+
+        // 获取产品列表
+        fetchProductList: function () {
+            var self = this;
+            ProductApi.GetProductSearchList({
+                keyword: this.params.keyword
+            }, function (res) {
+                res = JSON.parse(res.data);
+                self.productRecord = res.total;
+            })
+        },
+
+        // 初始化排序控件
+        initSortControl: function () {
+            var self = this;
+            initFilter({
+                el: '#filter-sort',
+                confirm(result) {
+                    console.log('确定')
+                    self.listLoading = true;
+                    self.requestFlag = false;
+                    self.listData = [];
+                    self.listRecord = 0;
+                    self.params.status = result.status;
+                    self.params.num = 1;
+                    self.requestAction(self.requestType);
+                },
+            })
+        },
+
+        // 页面样式初始化
+        initPageReset: function () {
+            var self = this;
+            if (!isPC) {
+                $('footer').addClass("noneImportant");
+                //移动端上垃加载更多
+                $('body').on('scroll', function () {
+                    var scrollTop = $(this).scrollTop();
+                    var documentHeight = $(document).height();
+                    var windowHeight = $(this).height();
+                    // alert(scrollTop + windowHeight == documentHeight)
+                    if (scrollTop + windowHeight + 100 > documentHeight) {
+                        //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
+                        var totalPage = Math.ceil(self.listRecord / self.params.size) ? Math.ceil(self.listRecord / self.params.size) : 1;
+                        self.params.num = self.params.num + 1;
+                        if (next <= totalPage) { // 获取列表数据
+                            if (self.requestFlag) {
+                                self.requestAction(self.requestType);
+                            }
+                            self.requestFlag = false;
+                        } else { //到底了
+                            self.noMore = false;
+                            $('footer').removeClass("noneImportant");
+                        }
+                    }
+                });
+            }
+            $("body").on("click", ".header .hotWord", function () {
+                $("#mHotWord").show();
+            }).on("click", "#mHotWord .close,#mHotWord", function () {
+                $("#mHotWord").hide();
+            }).on("click", "#mHotWord .tags", function (e) {
+                e.stopPropagation();
+            })
+        },
+    }
+});
+
+function initFilter(option){
+    var comEl = $(option.el);
+    comEl.find('.filter__item').on('click', function(){
+        $(this).siblings('.filter__item').removeClass('active');
+        $(this).addClass('active');
+        var status = $(this).attr('data-sort-status') && parseInt($(this).attr('data-sort-status'));
+        option.confirm && option.confirm({ status: status });
+    })
+}
+
+/*
+function initFilter(option) {
+    var comEl = $(option.el);
+    var dropBtn = comEl.find('.cm-drop-btn');
+    var dropDown = comEl.find('.cm-drop-down');
+    var datePicker = comEl.find('.cm-date-picker');
+    var dateFilter = comEl.find('.cm-filter-date');
+    var slideNav = comEl.find('.cm-slide');
+    var slideAlert = comEl.find('.cm-sub-slide');
+    var startDate = datePicker.find('.cm-date-begin');
+    var endDate = datePicker.find('.cm-date-end');
+
+    $(window).on('click', function (el) {
+        if (comEl.has(el.target).length > 0) return;
+        dropDown.fadeOut();
+        dropBtn.removeClass('cm-active');
+    })
+
+    dropBtn.on('click', function () {
+        dropDown.fadeToggle();
+        dropBtn.toggleClass('cm-active');
+    })
+
+    slideNav.on('click', function () {
+        $(this).addClass('cm-active').siblings('.cm-slide').removeClass('cm-active').find('.cm-sub-slide').hide();
+        slideAlert.hide();
+        $($(this).attr('data-target')).show();
+    })
+
+    slideNav.each(function (index, el) {
+        var confirmBtn = $($(el).attr('data-target')).find('.cm-confirm');
+        var cancelBtn = $($(el).attr('data-target')).find('.cm-cancel');
+        if (cancelBtn.length > 0) {
+            cancelBtn.on('click', function () {
+                option.cancel && option.cancel();
+                dropDown.fadeOut();
+                dropBtn.removeClass('cm-active');
+            });
+        }
+        if (confirmBtn.length > 0) {
+            confirmBtn.on('click', function () {
+                option.confirm && option.confirm({status: 2});
+                dropDown.fadeOut();
+                dropBtn.removeClass('cm-active');
+                dropBtn.text($(el).find('.cm-slide-name').text())
+            });
+        } else {
+            $(el).on('click', function () {
+                option.confirm && option.confirm({status: 1});
+                dropDown.fadeOut();
+                dropBtn.removeClass('cm-active');
+                dropBtn.text($(el).find('.cm-slide-name').text())
+            })
+        }
+    })
+
+    function generageDateStr(type) {
+        var dayTimestamp = 24 * 60 * 60 * 1000;
+        var result = {
+            week: 7,
+            month: 30,
+            halfYear: 182,
+            year: 365,
+        };
+        return moment(Date.now() - result[type] * dayTimestamp).format('YYYY-MM-DD');
+    }
+
+    dateFilter.find('.cm-item').on('click', function () {
+        $(this).siblings('.cm-item').removeClass('cm-active');
+        $(this).addClass('cm-active');
+        var days = $(this).attr('data-last-date');
+        var start = generageDateStr(days);
+        var end = moment().format('YYYY-MM-DD');
+        var date = start + ' to ' + end;
+        option.getDate && option.getDate({date, start, end});
+    });
+
+    datePicker.on('click', function () {
+        dateFilter.find('.cm-item').removeClass('cm-active');
+    });
+
+    // 初始化时间选择器
+    datePicker.dateRangePicker({
+        language: 'cn',
+        format: 'YYYY-MM-DD',
+        autoClose: isPC,
+        showShortcuts: false,
+        isNowrap: false,
+        getValue: function () {
+            return option.setDate ? option.setDate() : ''
+        },
+        setValue: function (date, start, end) {
+            option.getDate && option.getDate({date, start, end})
+            startDate.text(start)
+            endDate.text(end)
+        },
+    });
+}*/

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

@@ -408,16 +408,21 @@ $(function(){
         }
     });
     // 顶部搜索框
-    $('#topSearch').on("click", '.searchBtn', function(){
-        var type = isPC ? $('#topSearch').find('[data-select]').attr("data-select")*1 : $('#topSearch').find('select').val()*1;
+    $('#topSearch').on("click", '.searchBtn', function () {
+        /*
+        * 搜索类型 type
+        * 0:产品  1:供应商  2:项目仪器  NaN:文章
+        * 关键词 keyword
+        * */
+        var type = isPC ? $('#topSearch').find('[data-select]').attr("data-select") * 1 : $('#topSearch').find('select').val() * 1;
         var keyword = $.trim($('#topSearch').find('.keyword').val());
-        // 商品,文章
-        if (keyword.length < 2 && (type === 0 || type > 2)) {
+        var tip = isNaN(type) ? '请输入文章关键字！' : '请至少输入两个关键字！';
+        if ((type === 0 && keyword.length < 2) || (!type && !keyword)) {
             $.confirm({
                 useBootstrap: false,
-                boxWidth: (isPC?'300px':'70%'),
-                title:'提示',
-                content:'请至少输入两个关键字！',
+                boxWidth: (isPC ? '300px' : '70%'),
+                title: '提示',
+                content: tip,
                 closeIcon: true,
                 animation: 'opacity',
                 closeAnimation: 'opacity',
@@ -432,51 +437,33 @@ $(function(){
             return false;
         }
         if (type === 0) {
-            window.location.href = '/product/list.html?keyword='+encodeURIComponent(keyword);
-        } else if(type === 1) {
+            // 产品
+            window.location.href = '/product/list.html?keyword=' + encodeURIComponent(keyword);
+        } else if (type === 1) {
             // 供应商
-            if( keyword === '' ){
+            if (!keyword) {
                 window.location.href = '/supplier/list.html';
-            }else{
-                window.location.href = '/supplier/list.html?keyword='+encodeURIComponent(keyword);
+            } else {
+                window.location.href = '/supplier/list.html?keyword=' + encodeURIComponent(keyword);
             }
         } else if (type === 2) {
             // 项目仪器
-            if( keyword === '' ){
+            if (!keyword) {
                 window.location.href = '/equipment/list.html';
-            }else{
+            } else {
                 window.location.href = '/equipment/list.html?keyword=' + encodeURIComponent(keyword);
             }
-        } else{
-            if( keyword === '' ){
-                $.confirm({
-                    useBootstrap: false,
-                    boxWidth: (isPC?'300px':'70%'),
-                    title:'提示',
-                    content:'请至少输入文章关键字！',
-                    closeIcon: true,
-                    animation: 'opacity',
-                    closeAnimation: 'opacity',
-                    animateFromElement: false,
-                    buttons: {
-                        close: {
-                            text: '确定',
-                            btnClass: 'btn-confirm'
-                        }
-                    }
-                });
-                return;
-            }
+        } else {
             // 文章
             window.location.href = '/info/search-1.html?keyword=' + encodeURIComponent(keyword);
         }
-    }).on('keyup', '.keyword', function(event) {
+    }).on('keyup', '.keyword', function (event) {
         // 搜索输入框 按回车键搜索
         var keyCode = event.keyCode || event.which;
-        if(keyCode === 13){
+        if (keyCode === 13) {
             $(this).parents('#topSearch').find('.searchBtn').trigger("click");
         }
-    }).on("click", '.hotKey .word', function(){
+    }).on("click", '.hotKey .word', function () {
         // 点击热词 触发搜索
         $(this).parents('#topSearch').find('.keyword').val($(this).text());
         $(this).parents('#topSearch').find('.searchBtn').trigger("click");

src/main/resources/static/js/document/beauty-archive.js

@@ -140,7 +140,12 @@ var beautyArchive = new Vue({
                 window.location.href = '/404.html'
             }
             if (product.redirectType === 1) {
-                url = '/product-' + product.productId +'-'+globalUserData.userId+ '.html?open=caimei365';
+                const globalUserData = window.globalUserData || null;
+                if(globalUserData){
+                    url = '/product-' + product.productId +'-'+globalUserData.userId+ '.html?open=caimei365';
+                }else{
+                    url = '/product-' + product.productId + '.html?open=caimei365';
+                }
             } else if (product.redirectType === 2) {
                 url = '/document/archive-detail.html' + '?id=' + product.archiveId;
             } else {

src/main/resources/templates/activity/beautyTopic.html

@@ -549,11 +549,11 @@
                 </template>
                 <!-- 图片楼层1 2 7 8 9 10  -->
                 <!-- fetchTemplate([1,2,7,8,9,10],floorData.floorContent.templateType) -->
-                <template v-if="fetchTemplate([1,2,7,8,9,10,26,27,28,29],floorData.floorContent.templateType)">
+                <template v-if="fetchTemplate([1,2,7,8,9,10,26,27,28,29,30,31,32,33],floorData.floorContent.templateType)">
                     <!-- 轮播式 mobile(1 2 9) pc(全部)-->
                     <div
                             class="cm-row cm-relative cm-swiper"
-                            v-show="!isMobile || (fetchTemplate([1,2,9,26,28,29],floorData.floorContent.templateType) && isMobile)"
+                            v-show="!isMobile || (fetchTemplate([1,2,9,26,28,29,30,32,33],floorData.floorContent.templateType) && isMobile)"
                     >
                         <div class="cm-p-a-4">
                             <template v-if="fetchTemplate([7,8,10],floorData.floorContent.templateType)">
@@ -573,8 +573,15 @@
                                                 class="bg-white hover-class aspect cm-relative"
                                                 :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc"
                                         >
-                                            <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
-                                                <img width="100%" height="100%" :src="item.appletsImage" alt=""
+                                            <div v-if="fetchTemplate([30,31,32,33],floorData.floorContent.templateType)" @click="onPlayVideo(item.link)">
+                                                <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
+                                                     v-if="isMobile"/>
+                                                <img width="100%" height="100%" :src="item.image" alt="" v-else/>
+                                                <div class="has-player"
+                                                     v-if="floorData.floorContent.templateClassify == 4"></div>
+                                            </div>
+                                            <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)" v-else>
+                                                <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
                                                      v-if="isMobile"/>
                                                 <img width="100%" height="100%" :src="item.image" alt="" v-else/>
                                                 <div class="has-player"
@@ -602,7 +609,7 @@
                                     <div class="bg-white aspect"
                                          :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
                                         <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
-                                            <img width="100%" height="100%" :src="item.appletsImage" alt=""
+                                            <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
                                                  v-if="isMobile"/>
                                             <img width="100%" height="100%" :src="item.image" alt="" v-else/>
                                         </a>
@@ -621,16 +628,23 @@
                             </div>
                         </div>
                     </div>
-                    <!-- 左右滑动式 mobile 7-->
-                    <div class="cm-row" v-show="fetchTemplate([7,27],floorData.floorContent.templateType) && isMobile">
+                    <!-- 左右滑动式 mobile 7 27 31-->
+                    <div class="cm-row" v-show="fetchTemplate([7,27,31],floorData.floorContent.templateType) && isMobile">
                         <div class="cm-p-a-4">
                             <div class="cm-scroll-container">
                                 <div class="cm-scroll-item" v-for="(item, item_index) in floorData.floorImageList"
                                      :key="item_index">
                                     <div class="bg-white aspect cm-relative"
                                          :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
-                                        <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
-                                            <img width="100%" height="100%" :src="item.appletsImage" alt=""
+                                        <div v-if="fetchTemplate([31],floorData.floorContent.templateType)" @click="onPlayVideo(item.link)">
+                                            <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
+                                                 v-if="isMobile"/>
+                                            <img width="100%" height="100%" :src="item.image" alt="" v-else/>
+                                            <div class="has-player"
+                                                 v-if="floorData.floorContent.templateClassify == 4"></div>
+                                        </div>
+                                        <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)" v-else>
+                                            <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
                                                  v-if="isMobile"/>
                                             <img width="100%" height="100%" :src="item.image" alt="" v-else/>
                                             <div class="has-player"
@@ -800,6 +814,15 @@
         </div>
     </div>
 
+    <!-- 视频播放弹窗 -->
+    <div class="video-popup" style="display: none;" id="video-popup">
+        <div class="mask"></div>
+        <span class="close"></span>
+        <div class="content">
+            <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls></video>
+        </div>
+    </div>
+
     <!-- 返回顶部 -->
     <div class="cm-to-top" id="cm-to-top" v-show="showScrollTop">
         <span class="cm-icon-bar"></span>

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

@@ -10,7 +10,7 @@
         </div>
         <div class="type">
             <div>
-                <a class="home" href="/" target="_blank">商城</a>
+                <!-- <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>
                 <a class="typeBtn" href="/document/beauty-archive.html" target="_blank">美业资料</a>
                 <!-- <a class="typeBtn" href="/encyclopedia/product.html" target="_blank">采美百科</a> -->

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

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+  <title>采美365网</title>
+  <template th:replace="components/head-link"></template>
+  <link th:href="@{/css/article/error.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/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">
+<input type="hidden" th:value="${coreServer}" id="coreServer">
+<input type="hidden" th:value="${agent}" id="userAgent">
+
+<!-- 404页面 -->
+<div style="text-align:center;background: #fff" id="errorPage">
+  <!--    <iframe id="errorContent" src="/search_children.html"></iframe>-->
+  <div id="errorContent">
+    <img src="/img/base/404.png">
+    <p>您访问的页面不存在，<span v-text="countdown"></span>秒后将自动返回首页</p>
+    <a href="/index.html">返回首页</a>
+  </div>
+
+  <div class="recommend">
+    <div class="title">相关推荐</div>
+    <div class="page">
+      <span v-if="recommend.prePage" class="prev" @click="getRecommend(typeId, recommend.prePage)"></span>
+      <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>
+    </div>
+    <div class="list">
+      <template v-for="(item, index) in recommend.list">
+        <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank" class="item" :key="index">
+          <div class="cover"><img :src="item.image" alt="item.title"/></div>
+          <div class="name" v-text="item.title"></div>
+        </a>
+      </template>
+    </div>
+  </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<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

@@ -21,81 +21,50 @@
 <div class="content clearfix" id="ArticleContent">
     <div class="mainData">
         <div class="new-list" id="articleList" v-cloak>
-            <div v-if="params.keyword" class="search">
-                <div class="search-box" id="topSearch">
-                    <input class="keyword" type="text" v-model="keyword" placeholder="请输入关键词"
-                           @keyup.enter="onSearchEnter"/>
-                    <a class="search-btn" href="javascript:void(0)" @click="onSearchEnter">搜索</a>
-                </div>
-                <!-- PC端文章搜索提示 -->
-                <div class="search-tip" v-if="isPC">
-                    <div>为您找到相关文章<span v-text="listRecord">200</span>条</div>
-                    <template v-if="productRecord > 0">
-                        <div>，</div>
-                        <div>同时为您找到相关产品<span v-text="productRecord">200</span>条。</div>
-                        <a target="_blank" :href="'/product/list.html?keyword=' + params.keyword">点击前往</a>
-                    </template>
-                </div>
-            </div>
-            <p v-else-if="params.labelId" class="classify biaoqian">
-                <em id="labelTxt"></em>相关的文章
-            </p>
-            <!-- 移动端文章搜索提示 -->
-            <div class="search-tip" v-if="params.keyword && !isPC">
-                <div class="content">
-                    <div>为您找到相关文章<span v-text="listRecord">200</span>条</div>
-                    <template v-if="productRecord > 0">
-                        <div>，</div>
-                        <div>同时为您找到相关产品<span v-text="productRecord">200</span>条。</div>
-                    </template>
-                </div>
-                <a target="_blank" :href="'/product/list.html?keyword=' + params.keyword" v-if="productRecord">点击前往</a>
-            </div>
-            <!-- 排序 -->
-            <!--
-            <div class="cm-filter-sort" id="cm-filter-sort" v-show="params.keyword">
-                <div class="cm-tip cm-drop-btn">综合排序</div>
-                <div class="cm-drop-down" style="display: none">
-                    <div class="cm-slide-nav">
-                        <div class="cm-slide cm-active" data-sort-status="1">
-                            <div class="cm-slide-name">综合排序</div>
-                        </div>
-                        <div class="cm-slide" data-target="#cm-filter-date" data-sort-status="2">
-                            <div class="cm-slide-name">按时间排序</div>
-                        </div>
-                    </div>
-                    <div class="cm-slide-alert">
-                        <div class="cm-sub-slide cm-filter-date" id="cm-filter-date" style="display: none">
-                            <div class="cm-row">
-                                <div class="cm-item" data-last-date="week">近一周</div>
-                                <div class="cm-item" data-last-date="month">近一月</div>
-                                <div class="cm-item" data-last-date="halfYear">近半年</div>
-                                <div class="cm-item" data-last-date="year">近一年</div>
-                            </div>
-                            <div class="cm-date-picker">
-                                <input type="text" hidden/>
-                                <div class="cm-label">自定义：</div>
-                                <div class="cm-date-choose cm-date-begin">开始时间</div>
-                                <div class="cm-divider">-</div>
-                                <div class="cm-date-choose cm-date-end">结束时间</div>
-                            </div>
-                            <div class="cm-control">
-                                <div class="cm-btn cm-cancel">取消</div>
-                                <div class="cm-btn cm-confirm">确定</div>
+            <!-- 产品搜索结果 -->
+            <div class="search-section" v-show="params.keyword && productRecord > 0">
+                <div class="search__product_list">
+                    <div class="search__tip">为您找到相关产品<span v-text="productRecord"></span>个</div>
+                    <div class="search__content">
+                        <template v-for="product in productList">
+                            <a :href="'/product-' + product.productId + '.html'" class="search__product" :key="product.productId" target="_blank">
+                                <div class="search__product_cover"><img :src="product.image" :alt="product.name"/></div>
+                                <div class="search__product_name" v-html="product.name"></div>
+                            </a>
+                        </template>
+                        <template v-if="isPC && 8 - productRecord > 0">
+                            <div class="search__product" v-for="i in (8 - productRecord)" :key="'empty' + i">
+                                <div class="search__product_cover"><img src="/img/base/placeholder.png"/></div>
+                                <div class="search__product_name"></div>
                             </div>
+                        </template>
+                        <div class="search__more" v-if="!isPC && productRecord > 8">
+                            <span class="search__more_tip">更多{{keyword | keywordSlice}}产品</span>
+                            <span class="search__more_line"></span>
+                            <a class="search__more_link" :href="'/product/list.html?keyword=' + keyword" target="_blank">查看全部</a>
                         </div>
                     </div>
                 </div>
+                <div class="search__more" v-if="isPC && productRecord > 8">
+                    <span class="search__more_tip">更多{{keyword | keywordSlice}}产品</span>
+                    <span class="search__more_line"></span>
+                    <a class="search__more_link" :href="'/product/list.html?keyword=' + keyword" target="_blank">查看全部</a>
+                </div>
             </div>
-            -->
-            <!-- 排序 -->
-            <div class="filter-sort" id="filter-sort" v-show="params.keyword">
-                <div class="filter__label">文章排序：</div>
-                <div class="filter__item_list">
-                    <div class="filter__item normal active" data-sort-status="1"><span></span>综合排序</div>
-                    <div class="filter__item date" data-sort-status="2"><span></span>时间排序</div>
+            <!-- 文章筛选 -->
+            <div class="search-filter" v-show="params.keyword">
+                <div class="search__content">
+                    <div class="search__tip">为您找到相关文章<span v-text="listRecord"></span>条</div>
+                    <div class="search__sort" id="searchSortControl">
+                        <div class="search__sort_current">文章排序</div>
+                        <ul class="search__sort_select">
+                            <li class="selected" data-type="1">综合排序</li>
+                            <li data-type="2">时间排序</li>
+                        </ul>
+                    </div>
                 </div>
             </div>
+            <!-- 文章列表 -->
             <div v-if="listData.length>0" class="dataRousce">
                 <div class="row" v-for="item in listData">
                     <div class="new-img">
@@ -107,6 +76,7 @@
                         <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
                             <p class="title" v-html="item.title"></p>
                         </a>
+                        <p class="introduction" v-html="item.intro"></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>
@@ -115,7 +85,6 @@
                                 <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>
                         </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>
@@ -129,21 +98,8 @@
                 <p class="nofound">很抱歉，没有找到 “<span v-text="params.keyword"></span>” 相关结果！</p>
                 <p class="change">请修改或者尝试其他搜索词</p>
             </div>
-            <!--分页-->
             <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
-<!--            <div v-if="isPC && pageTotal>1" class="pageWrap clear">-->
-<!--                <a v-if="params.num>1" class="prev" @click="toPagination(params.num*1-1)" href="javascript:void(0);"></a>-->
-<!--                <template v-for="n in showPageBtn">-->
-<!--                    <a v-if="n" :class="{'on':(n==params.num)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>-->
-<!--                    <span v-else>···</span>-->
-<!--                </template>-->
-<!--                <a v-if="params.num<pageTotal" class="next" @click="toPagination(params.num*1+1)" href="javascript:void(0);"></a>-->
-<!--                <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>-->
-<!--                <span>跳至</span>-->
-<!--                <input v-model="pageInput" @blur="checkNum()"/>-->
-<!--                <span>页</span>&nbsp;-->
-<!--                <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>-->
-<!--            </div>-->
+            <!--分页-->
             <div v-if="isPC && pageTotal>1" class="pageWrap clear">
                 <a v-if="params.num>1" class="prev" :href="paginationUrl(params.num*1-1)"></a>
                 <template v-for="n in showPageBtn">

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

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+  <title>采美365网</title>
+  <template th:replace="article/components/article-link"></template>
+  <template th:replace="components/analysis"></template>
+</head>
+<body class="home listData">
+<div class="cm-modal"></div>
+<!--导航栏-->
+<template th:replace="article/components/article-header"></template>
+<div class="tip-bar">
+  <!--<div class="tip">提示：产品详情请到采美商城搜索</div> -->
+  <!--面包屑-->
+  <div th:if="${typeId}>0" class="bar">
+    <a href="/" target="_blank">首页</a>&gt; <a  th:each="type: ${articleType}" th:if="${typeId}==${type.id}" th:text="${type.name}" href="javascript:void(0);" class="title newTitle"></a>
+  </div>
+</div>
+<!--主体内容-->
+<div class="content clearfix" id="ArticleContent">
+  <div class="mainData">
+    <div class="new-list" id="articleList" v-cloak>
+      <div v-if="params.keyword" class="search">
+        <div class="search-box" id="topSearch">
+          <input class="keyword" type="text" v-model="keyword" placeholder="请输入关键词"
+                 @keyup.enter="onSearchEnter"/>
+          <a class="search-btn" href="javascript:void(0)" @click="onSearchEnter">搜索</a>
+        </div>
+        <!-- PC端文章搜索提示 -->
+        <div class="search-tip" v-if="isPC">
+          <div>为您找到相关文章<span v-text="listRecord">200</span>条</div>
+          <template v-if="productRecord > 0">
+            <div>，</div>
+            <div>同时为您找到相关产品<span v-text="productRecord">200</span>条。</div>
+            <a target="_blank" :href="'/product/list.html?keyword=' + params.keyword">点击前往</a>
+          </template>
+        </div>
+      </div>
+      <p v-else-if="params.labelId" class="classify biaoqian">
+        <em id="labelTxt"></em>相关的文章
+      </p>
+      <!-- 移动端文章搜索提示 -->
+      <div class="search-tip" v-if="params.keyword && !isPC">
+        <div class="content">
+          <div>为您找到相关文章<span v-text="listRecord">200</span>条</div>
+          <template v-if="productRecord > 0">
+            <div>，</div>
+            <div>同时为您找到相关产品<span v-text="productRecord">200</span>条。</div>
+          </template>
+        </div>
+        <a target="_blank" :href="'/product/list.html?keyword=' + params.keyword" v-if="productRecord">点击前往</a>
+      </div>
+      <!-- 排序 -->
+      <!--
+      <div class="cm-filter-sort" id="cm-filter-sort" v-show="params.keyword">
+          <div class="cm-tip cm-drop-btn">综合排序</div>
+          <div class="cm-drop-down" style="display: none">
+              <div class="cm-slide-nav">
+                  <div class="cm-slide cm-active" data-sort-status="1">
+                      <div class="cm-slide-name">综合排序</div>
+                  </div>
+                  <div class="cm-slide" data-target="#cm-filter-date" data-sort-status="2">
+                      <div class="cm-slide-name">按时间排序</div>
+                  </div>
+              </div>
+              <div class="cm-slide-alert">
+                  <div class="cm-sub-slide cm-filter-date" id="cm-filter-date" style="display: none">
+                      <div class="cm-row">
+                          <div class="cm-item" data-last-date="week">近一周</div>
+                          <div class="cm-item" data-last-date="month">近一月</div>
+                          <div class="cm-item" data-last-date="halfYear">近半年</div>
+                          <div class="cm-item" data-last-date="year">近一年</div>
+                      </div>
+                      <div class="cm-date-picker">
+                          <input type="text" hidden/>
+                          <div class="cm-label">自定义：</div>
+                          <div class="cm-date-choose cm-date-begin">开始时间</div>
+                          <div class="cm-divider">-</div>
+                          <div class="cm-date-choose cm-date-end">结束时间</div>
+                      </div>
+                      <div class="cm-control">
+                          <div class="cm-btn cm-cancel">取消</div>
+                          <div class="cm-btn cm-confirm">确定</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      -->
+      <!-- 排序 -->
+      <div class="filter-sort" id="filter-sort" v-show="params.keyword">
+        <div class="filter__label">文章排序：</div>
+        <div class="filter__item_list">
+          <div class="filter__item normal active" data-sort-status="1"><span></span>综合排序</div>
+          <div class="filter__item date" data-sort-status="2"><span></span>时间排序</div>
+        </div>
+      </div>
+      <div v-if="listData.length>0" class="dataRousce">
+        <div class="row" v-for="item in listData">
+          <div class="new-img">
+            <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+              <img :src="item.image"/>
+            </a>
+          </div>
+          <div class="new-blurb">
+            <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+              <p class="title" v-html="item.title"></p>
+            </a>
+            <p class="xinxi">
+              <em 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>
+              <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>
+            </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>
+      <div v-if="listLoading" class="loading">
+        <img src="/img/base/loading.gif">
+      </div>
+      <!-- 如果没有搜索结果。显示此div -->
+      <div v-else-if="listRecord==0" class="no-result">
+        <p><img src="/img/info/kuqi.jpg"></p>
+        <p class="nofound">很抱歉，没有找到 “<span v-text="params.keyword"></span>” 相关结果！</p>
+        <p class="change">请修改或者尝试其他搜索词</p>
+      </div>
+      <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
+      <!--分页-->
+      <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+        <a v-if="params.num>1" class="prev" :href="paginationUrl(params.num*1-1)"></a>
+        <template v-for="n in showPageBtn">
+          <a v-if="n" :class="{'on':(n==params.num)}" :href="paginationUrl(n)" v-text="n"></a>
+          <span v-else>···</span>
+        </template>
+        <a v-if="params.num<pageTotal" class="next" :href="paginationUrl(params.num*1+1)"></a>
+        <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+        <span>跳至</span>
+        <input v-model="pageInput" @blur="checkNum()"/>
+        <span>页</span>&nbsp;
+        <a class="btn" :href="paginationUrl(pageInput)">点击跳转</a>
+      </div>
+    </div>
+  </div>
+  <!--侧边栏-->
+  <template th:replace="article/components/article-sidebar"></template>
+  <div id="scrollTop">
+    <div class="item">
+      <span class="toTop icon mIcon">置顶</span>
+    </div>
+  </div>
+</div>
+
+<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>
+</body>
+</html>