updated

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

@@ -79,7 +79,7 @@ public class ArticleController extends BaseController {
         model.addAttribute("typeId", 0);
         model.addAttribute("labelId", id);
         model.addAttribute("pageNum", pageNum);
-        model.addAttribute("isSearch", true);
+        model.addAttribute("isSearch", false);
         //model.addAttribute("pagePath", String.format("/info/label-%s-1.html", id));
         return ARTICLE_LIST_PATH;
     }

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

@@ -340,20 +340,36 @@ dl,dd,dt{zoom:1}
 	.search-top .H5-info-menu {width: 29vw; height: 100%;box-sizing: border-box;display: flex;align-items: center;justify-content: space-between; font-size: 3.2vw;}
 	.search-top .H5-info-menu div {width: 7.2vw; height: 7.2vw;display: flex;justify-content: center;align-items: center;color: #FF5B00;}
 	.search-top .H5-info-menu div:nth-child(1) {background: url(/img/article/H5.png);background-size: 119vw 158vw;background-position: -27vw 37vw;}
-	.search-top .H5-info-menu div:nth-child(3) {background: url(/img/article/H5.png);background-position: 0vw 36vw;background-size: 101vw 158vw;}
+	.search-top .H5-info-menu .right_drawer_close {background: url(/img/article/H5.png);background-size: 119vw 158vw;background-position: -10vw 36vw;}
+	.search-top .H5-info-menu .right_drawer_open {background: url(/img/article/H5.png);background-size: 119vw 158vw;background-position: 0vw 36vw;}
 	.header .van-overlay {z-index: -1 !important;}
-	.header .van-popup {z-index: -1 !important;padding: 22.6vw 4.333vw 5.6vw 4.333vw;}
+	.header .searchPopup {z-index: -1 !important;padding: 22.6vw 4.333vw 5.6vw 4.333vw;}
 	/* 阴影*/
 	.search-top-shadow {box-shadow: 0 4vw 9vw #ccc;}
-	.header .van-popup .search-title{display: flex;justify-content: space-between;}
-	.header .van-popup .search-title div:nth-child(1) {color: #333333;font-size: 4.7vw;font-weight: bold;}
-	.header .van-popup .search-title div:nth-child(2) {width: 3.867vw;height: 3.867vw;position: relative;}
-	.header .van-popup .search-title div:nth-child(2):after {content: "×";position: absolute;transform: translate(-50%,-50%) scale(1.5);color: #B2B2B2;font-size: 3.867vw;top: 50%;}
-	.van-popup .search-info {margin: 5.7vw 0 5.2vw 0;}
-	.van-popup .search-info .keyword {background: #F7F7F7;height: 10.8vw;width: 74vw;border: none;box-sizing: border-box;padding: 2vw;}
-	.van-popup .search-info .searchBtn {background: #FF5B00;width: 17vw; height: 10.8vw;color: #fff;text-align: center;display: inline-block;line-height: 10.8vw;float: right;}
-	.van-popup .keywords {display: flex;flex-wrap: wrap;}
-	.van-popup .keywords div {margin: 0 2.4vw 2.4vw 0;height: 6.4vw;padding: 1.4vw 3.2vw;background: #F7F7F7;color: #999999;font-size: 2.8vw;}
+	/*搜索头弹窗*/
+	.header .searchPopup .search-title{display: flex;justify-content: space-between;}
+	.header .searchPopup .search-title div:nth-child(1) {color: #333333;font-size: 4.7vw;font-weight: bold;}
+	.header .searchPopup .search-title div:nth-child(2) {width: 3.867vw;height: 3.867vw;position: relative;}
+	.header .searchPopup .search-title div:nth-child(2):after {content: "×";position: absolute;transform: translate(-50%,-50%) scale(1.5);color: #B2B2B2;font-size: 3.867vw;top: 50%;}
+	.searchPopup .search-info {margin: 5.7vw 0 5.2vw 0;}
+	.searchPopup .search-info .keyword {background: #F7F7F7;height: 10.8vw;width: 74vw;border: none;box-sizing: border-box;padding: 2vw;}
+	.searchPopup .search-info .searchBtn {background: #FF5B00;width: 17vw; height: 10.8vw;color: #fff;text-align: center;display: inline-block;line-height: 10.8vw;float: right;}
+	.searchPopup .keywords {display: flex;flex-wrap: wrap;}
+	.searchPopup .keywords div {margin: 0 2.4vw 2.4vw 0;height: 6.4vw;padding: 1.4vw 3.2vw;background: #F7F7F7;color: #999999;font-size: 2.8vw;}
+
+	/*侧边弹窗*/
+	.van-popup--right {width: 70vw;height: 100%;z-index: -1 !important;}
+	.navPopup {padding: 22.6vw 0 0 6.4vw;}
+	.navPopup .nav-popup-item {height: 14vw;box-sizing: border-box;border-bottom: 1px solid #D8D8D8;color: #333333;font-size: 3.6vw;display: flex;align-items: center;justify-content: space-between;transition: all 1s;}
+	.navPopup .nav-popup-item .nav-popup-link {color: #333333;position: relative;height: 14vw;line-height: 14vw;}
+	.navPopup .nav-popup-child {height: 0;display: none;overflow: hidden;transition: height .3s ease-in-out;will-change: height;}
+	.navPopup .nav-popup-item .select-nav {width: 12.4vw;height:6.4vw;}
+	.navPopup .nav-popup-item .select-nav:after{content: "\276F";position: absolute;right: 5vw;transform: rotate(90deg);transition: .3s;}
+	.navPopup .nav-popup-item:hover .select-nav:after {transform: rotate(270deg);}
+	.navPopup .van-cell {height: 14vw;padding: 0 5vw 0 0;font-size: 3.6vw;line-height: 14vw;border-bottom: 1px solid #D8D8D8;}
+	.navPopup .van-cell__right-icon {height: 14vw;line-height: 14vw;}
+	.van-collapse-item__content {padding: 0 !important;}
+	.van-collapse-item__content .van-collapse-nav {padding: 3vw 0 0 3vw;display: block;font-size: 3.2vw;}
 
 	.info-banner .info-Notice {display: none;}
 	.info-banner {margin: 3.2vw auto;width: 94.4vw;display: flex;justify-content: space-between;align-items: center;height: 40vw;}
@@ -430,7 +446,7 @@ dl,dd,dt{zoom:1}
 	.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 { background: #F5F5F5; padding-bottom: 2vw; width: 94.4vw; margin: 0 auto;}
 	.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: #FF5B00; font-weight: bold; }
@@ -515,7 +531,7 @@ dl,dd,dt{zoom:1}
 	.article-right-ross>a{width: 100%;height: 100%;display: block;border-radius: 2px;}
 	.article-right-ross>a img{width: 100%;height: 100%;display: block;border-radius: 2px;}
 	/*文章列表头*/
-	.listData-select-title {background: #fff;width: 94.4vw;padding: 3.6vw 3.2vw;margin: 0 auto;}
+	.listData-select-title {background: #fff;width: 94.4vw;padding: 3.6vw 3.2vw;margin: 3vw auto 0 auto;}
 	.listData-select-title .search-select {display: flex;border-bottom: 1px solid #CCCCCC;}
 	.listData-select-title .search-select div {font-size: 3.6vw;color: #666666;height: 8vw;}
 	.listData-select-title .search-select .now-search-select {color: #333333;font-weight: bold;border-bottom: 2px solid #FF5B00;}

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

@@ -0,0 +1,11 @@
+.pageWrap{width:100%;text-align:center;padding:20px 0 36px;background: #fff;}
+.pageWrap a{box-sizing:border-box;display:inline-block;width:40px;height:40px;line-height:40px;border:1px solid #EBECEF;font-size:16px;margin:0 5px;color:#2D3036;background:#fff;border-radius:2px}
+.pageWrap a.on{background:#FF5B00;color:#fff;border:1px solid #FF5B00}
+.pageWrap a:hover{color:#FF5B00}
+.pageWrap a.on:hover{color:#fff;opacity:.8}
+.pageWrap a.btn{width:auto;color:#FF5B00;background:none;border:none}
+.pageWrap .prev:before{content:'\276E'}
+.pageWrap .next:before{content:'\276F'}
+.pageWrap span{display:inline-block;height:40px;line-height:40px;margin:0 5px;color:#93979F}
+.pageWrap b{color:#2D3036;font-weight:normal}
+.pageWrap input{box-sizing:border-box;width:80px;height:40px;line-height:40px;font-size:16px;border:1px solid #EBECEF;outline:none;border-radius:2px;text-align:center}

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

@@ -55,16 +55,4 @@ let drawerFooter = new Vue({
         }
     }
 })
-// // 精选推荐
-// let featured = new Vue({
-//     el: "#featured-Articles",
-//     data: {
-//         featuredList: [{
-//             id: 1,
-//             content: "131546"
-//         }], // 精选推荐列表
-//     },
-//     mounted() {
-//     },
-//     methods: {}
-// })
+

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

@@ -49,7 +49,6 @@ var articleList = new Vue({
         }], // 精选推荐列表
         dialogVisible: true, // 弹窗
         searchKeys: "", // 搜索词
-        isSearchModule: false,
     },
     computed: {
         pageTotal: function () {
@@ -72,14 +71,6 @@ var articleList = new Vue({
         }
     },
     watch: {
-        //是否进入搜索
-        'window.location.pathname': {
-            handler() {
-                this.isSearchModule = window.location.pathname.indexOf('search') !== -1
-            },
-            deep: true,
-            immediate: true,
-        }
     },
     created: function () {
         // 判断登录状态
@@ -394,6 +385,8 @@ let searchTop = new Vue({
     data: {
         show: false,
         searchKeys: "",
+        right_drawer: false,
+        activeNames: '', // active names
     },
     mounted() {
     },

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

@@ -0,0 +1,8 @@
+let Recommendation = new Vue({
+    el: "Recommendation",
+    data: {},
+    mounted() {
+        console.log("这个是更多")
+    },
+    methods: {}
+})

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

@@ -6,7 +6,7 @@
         </div>
     </div>
 <!--    搜索头-->
-    <div class="search-top" :class="show ? 'search-top-shadow' : '' ">
+    <div class="search-top" :class="(show || right_drawer) ? 'search-top-shadow' : '' ">
         <div class="info-logo-content">
             <div class="info-logo"></div>
         </div>
@@ -26,12 +26,14 @@
         </div>
         <div class="H5-info-logo"></div>
         <div class="H5-info-menu">
-            <div @click="show = !show"></div>
+            <div @click="(right_drawer = false), (show = !show)"></div>
             <div>菜单</div>
-            <div></div>
+            <div :class="right_drawer ? 'right_drawer_close' : 'right_drawer_open'" @click="(right_drawer = !right_drawer), (show = false)"></div>
         </div>
     </div>
-    <van-popup v-model="show" position="top" v-cloak>
+
+<!--    搜索头弹窗-->
+    <van-popup class="searchPopup" v-model="show" position="top" v-cloak>
         <div class="search-title">
             <div>搜索</div>
             <div @click.stop="show = !show"></div>
@@ -48,6 +50,31 @@
             </div>
         </div>
     </van-popup>
+
+<!--   导航栏弹窗-->
+    <van-popup class="navPopup" v-model="right_drawer" position="right" v-cloak>
+<!--        <div th:each="type,status: *{articleType}" th:typeId="${type.id}" style="position:relative;">-->
+<!--            <div class="nav-popup-item">-->
+<!--                <a class="nav-popup-link" th:text="${type.name}" th:href="'/info/center-'+${type.id}+'-1.html'"></a>-->
+<!--                <div class="select-nav" ></div>-->
+<!--            </div>-->
+<!--            <div class="nav-popup-child">-->
+<!--                <div th:onclick="|handlerClick(${type.id}, this)|" th:text="${type.name}"></div>-->
+<!--                <div>132456</div>-->
+<!--                <div>132456</div>-->
+<!--                <div>132456</div>-->
+<!--            </div>-->
+<!--        </div>-->
+        <van-collapse accordion v-model="activeNames">
+            <van-collapse-item th:title="${type.name}" th:name="${type.id}" th:each="type,status: *{articleType}" th:typeId="${type.id}">
+                <a th:href="'/info/center-'+${type.id}+'-1.html'" th:text="${type.name}" class="van-collapse-nav"></a>
+                <a class="van-collapse-nav">132456</a>
+                <a class="van-collapse-nav">132456</a>
+                <a class="van-collapse-nav">132456</a>
+            </van-collapse-item>
+        </van-collapse>
+    </van-popup>
+
     <!--导航栏-->
     <div class="nav">
 <!--        <div class="h5-head">-->
@@ -85,3 +112,9 @@
     <input type="hidden" th:value="${coreServer}" id="coreServer">
     <input type="hidden" th:value="${agent}" id="userAgent">
 </header>
+
+<script type="text/javascript">
+ const handlerClick = (e, t) => {
+
+ }
+</script>

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

@@ -15,5 +15,6 @@
     <link href="/lib/datapicker/daterangepicker.css" rel="stylesheet">
     <link th:href="@{/css/base/init.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/article/article.css(v=${version})}" rel="stylesheet" type="text/css">
-<link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
+    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
+    <link th:href="@{/css/article/recommendation.css(v=${version})}" rel="stylesheet" type="text/css">
 

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

@@ -43,7 +43,7 @@
     <div class="mainData">
         <div class="new-list" id="articleList" v-cloak>
             <!-- h5 公告-->
-            <div class="info-h5-notice" v-if="!isSearchModule">
+            <div class="info-h5-notice" th:if="${isSearch}">
                 <div class="h5-notice">公告：</div>
                 <div class="h5-notice-title">
                     <ul>
@@ -53,7 +53,7 @@
                 <div class="h5-notice-more"><a href="/info/articlerecommendation.html">更多 ></a></div>
             </div>
             <!--    精选文章推荐-->
-            <div class="featured-Articles" id="featured-Articles" v-if="!isSearchModule">
+            <div class="featured-Articles" id="featured-Articles" th:if="${isSearch}">
                 <div class="featured-title">
                     <div>精选推荐</div>
                     <div>

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

@@ -1,20 +1,35 @@
-<!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
 <head>
-  <meta charset="UTF-8">
-  <title>采美365网</title>
+  <title>信息平台</title>
   <template th:replace="article/components/article-link"></template>
   <template th:replace="components/analysis"></template>
 </head>
-<body>
+<body class="home listData">
 <!--导航栏-->
 <template th:replace="article/components/article-header"></template>
 
-<div class="main" id="Recommendation">
-    123456
+<div class="mainData" id="Recommendation">
+<!--    <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>
 
 <template th:replace="article/components/article-footer"></template>
 <template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
+<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/article/list.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/article/recommendation.js(v=${version})}"></script>
 </body>
 </html>