采美信息中心搜索页面修改

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}
+	.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}
 	.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 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; 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/js/article/list.js

@@ -24,6 +24,7 @@ var articleList = new Vue({
         listData: [],
         listRecord: 0,
         productRecord: 0,
+        productList: [],
         pageInput: '1',
         keyword: '',
         requestType: '', // 请求链接类型keyword | labelId | typeId
@@ -86,7 +87,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();
@@ -237,14 +239,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 +292,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();
-    })
-
-    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())
-            })
-        }
+    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});
     })
-
-    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/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/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-text="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">更多优斐斯产品</span>
+                            <span class="search__more_line"></span>
+                            <a class="search__more_link" href="/product/list.html?keyword=测试" target="_blank">查看全部</a>
                         </div>
                     </div>
                 </div>
+                <div class="search__more" v-if="isPC && productRecord > 8">
+                    <span class="search__more_tip">更多优斐斯产品</span>
+                    <span class="search__more_line"></span>
+                    <a class="search__more_link" href="/product/list.html?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>