updated

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

@@ -177,15 +177,17 @@ public class ArticleController extends BaseController {
     /**
      * 文章推荐和文章
      */
-    @GetMapping("/info/articlerecommendation.html")
-    public String toArticleRecommendation(final Model model) {
+    @GetMapping("/info/articlerecommendation-{id}-{pageNum}.html")
+    public String toArticleRecommendation(@PathVariable("id") Integer id, @PathVariable("pageNum") Integer pageNum, final Model model) {
         List<BaseLink> typeList = articleService.getArticleTypes();
         List<BaseLink> data = articleService.getArticleLabels().getData();
         List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
         model.addAttribute("ads", Ads);
         model.addAttribute("labels", data);
         model.addAttribute("articleType", typeList);
-        model.addAttribute("typeId", 0);
+        model.addAttribute("pageNum", pageNum);
+        model.addAttribute("typeId", id);
+//        model.addAttribute("typeId", 0);
         model.addAttribute("labelId", 0);
         return ARTICLE_RECOMMENDATION;
     }

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

@@ -1,11 +1,208 @@
-.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}
+@media screen and (min-width:768px) {
+    #Recommendation {
+        padding-top: 16px;
+    }
+
+    .content {
+        width: 1185px;
+        margin: 0 auto;
+        position: relative;
+    }
+
+    .content .mainData {
+        float: left;
+        width: 884px;
+        background: #f5f5f5;
+        min-height: 900px;
+        border: 1px solid;
+    }
+
+    /*公告和文件*/
+    .infomationlist {
+        width: 1185px;
+        margin: 0 auto 16px auto;
+        background: #fff;
+        padding: 22px 24px;
+    }
+
+    .infomationlist .title {
+        width: 100%;
+        color: #333;
+        font-size: 18px;
+        height: 34px;
+        border-bottom: 1px solid #F0F0F0;
+        margin-bottom: 28px;
+        font-weight: bold;
+    }
+
+    .infomationlist .list-mainData ul .item {
+        zoom: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        padding: 21px 0 21px 10px;
+        color: #333333;
+        font-size: 16px;
+        border-bottom: 1px solid #F0F0F0;
+        position: relative;
+    }
+    .infomationlist .list-mainData ul .item:before {
+        content: "";
+        position: absolute;
+        left: -10px;
+        font-size: 40px;
+        color: #CCCCCC;
+        width: 6px;
+        height: 6px;
+        background: #CCCCCC;
+        border-radius: 50%;
+    }
+
+    .infomationlist .list-mainData ul .item div:nth-child(2) {
+        color: #CCCCCC;
+    }
+
+    .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
+    }
+}
+
+@media screen and (max-width:768px) {
+    /*#drawer-footer, .advertisement {*/
+    /*    display: none;*/
+    /*}*/
+    .infomationlist {
+        margin: 1.6vw 0 12.4vw 0;
+        background: #fff;
+        padding: 4.8vw 4vw;
+    }
+    .infomationlist .title {
+        color: #333333;
+        font-size: 3.6vw;
+        font-weight: bold;
+        height: 7.2vw;
+        border-bottom: 1px solid #CCCCCC;
+        display: flex;
+        margin-bottom: 6.9vw;
+    }
+    .infomationlist .title div{
+        height: 100%;
+        border-bottom: 3px solid #FF5B00;
+    }
+    .infomationlist ul .item {
+        height: 12vw;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: relative;
+        border-bottom: 1px solid #CCCCCC;
+    }
+    .infomationlist ul .item:before {
+        content: " ";
+        position: absolute;
+        width: 1.2vw;
+        height: 1.2vw;
+        border-radius: 50%;
+        background: #CCCCCC;
+    }
+
+    .infomationlist ul .item div:nth-child(1) {
+        color: #333333;
+        font-size: 3.2vw;
+        margin-left: 3vw;
+    }
+    .infomationlist ul .item div:nth-child(2) {
+        color: #999999;
+        font-size: 2.8vw;
+    }
+
+    .infomationlist ul .info-item {
+        height: 20.5vw;
+        border-bottom: 1px solid #ccc;
+        display: flex;
+        align-items: center;
+    }
+
+    .infomationlist ul .info-item:nth-child(1) {
+        width: 11.125vw;
+        height: 12.136vw;
+        border: 1px solid #ccc;
+    }
+
+    .infomationlist ul .info-item:nth-child(2) {
+        margin-left: 4.2vw;
+    }
+}

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

@@ -25,6 +25,7 @@ var articleSide = new Vue({
         //     });
         // },
         getRecommend: function(typeId, pageNum){
+            console.log(typeId, pageNum);
             var _self = this;
             $.getJSON("/article/recommend",{
                 typeId: typeId,

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

@@ -1,6 +1,64 @@
 let Recommendation = new Vue({
-    el: "Recommendation",
-    data: {},
+    el: "#Recommendation",
+    data: {
+        status: {
+            'isDocument': 0, // 文件
+            'isSelected': 1, // 精选
+            'isNotice': 2, // 公告
+        },
+        state: null,
+        params: {
+            size: 8,
+            num: 1,
+            typeId: '',
+            labelId: '',
+            keyword: '',
+            status: 1,
+            startDate: '',
+            endDate: '',
+            productFlag: 1, // 是否统计关键词 1 统计 0 不统计
+            linkageFlag: 0, // 关键词来源是否为用户搜索 0 是 1 不是
+            selectDataRoutes: 1 // 最新 最早
+        },
+        listData: [],
+        listRecord: 0,
+        productRecord: 0,
+        productList: [],
+        pageInput: '1',
+        keyword: '',
+        isRossShow: false,
+    },
+    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];
+        }
+    },
+    watch: {
+        'window.location.pathname': {
+            handler() {
+                const query = window.location.search.split('?')[1]
+                this.state = this.status[query]
+                console.log(this.state)
+            },
+            deep: true,
+            immediate: true
+        }
+    },
     mounted() {
         console.log("这个是更多")
     },

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

@@ -1,4 +1,4 @@
-<header class="header" id="info-header" xmlns:th="http://www.w3.org/1999/xhtml">
+<header class="header" id="info-header" xmlns:th="http://www.w3isRossShow.org/1999/xhtml">
     <div class="head-back">
         <div class="head">
             <div class="head-logo"></div>

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

@@ -46,6 +46,8 @@
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" src="/lib/datapicker/moment-2.29.min.js"></script>
 <script charset="utf-8" type="text/javascript" src="/lib/datapicker/jquery.daterangepicker.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
+<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/common.js(v=${version})}"></script>

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

@@ -20,7 +20,7 @@
         <div class="notice-title">
             <div>公告</div>
             <div>
-                <a href="/info/articlerecommendation.html">更多 ></a>
+                <a href="/info/articlerecommendation-3-1.html?isNotice">更多 ></a>
             </div>
         </div>
         <div class="notice-content">
@@ -50,14 +50,14 @@
                         <li>12月德玛莉直播秒杀活动即将开始</li>
                     </ul>
                 </div>
-                <div class="h5-notice-more"><a href="/info/articlerecommendation.html">更多 ></a></div>
+                <div class="h5-notice-more"><a href="/info/articlerecommendation-3-1.html?isNotice">更多 ></a></div>
             </div>
             <!--    精选文章推荐-->
             <div class="featured-Articles" id="featured-Articles" th:if="${isSearch}">
                 <div class="featured-title">
                     <div>精选推荐</div>
                     <div>
-                        <a href="/info/articlerecommendation.html">更多 ></a>
+                        <a href="/info/articlerecommendation-3-1.html?isSelected">更多 ></a>
                     </div>
                 </div>
                 <div class="featured-content">

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

@@ -9,26 +9,61 @@
 <!--导航栏-->
 <template th:replace="article/components/article-header"></template>
 
-<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 id="Recommendation" v-cloak>
+  <div class="content clearfix" v-if="state == 1">
+    <div class="mainData">
+      <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>
+    <!--侧边栏Ross广告图-->
+    <div v-if="isPC && isRossShow" class="article-right-ross" :class="isRossShow ? 'show' : 'none'">
+      <a href="/supplier-1378.html" v-if="isPC"><img src="/img/ross/ross-image@1x.jpg" alt="深圳艾斯佰丽生物科技有限公司"></a>
+    </div>
+  </div>
+  <div class="infomationlist" v-if="state == 2 || state == 0">
+    <div class="title" v-if="state == 2">
+      <div>所有公告</div>
+    </div>
+    <div class="list-mainData">
+      <ul v-if="state == 2">
+        <li class="item">
+          <div>12月德玛莉直播秒杀活动即将开始</div>
+          <div>2023年08月02日</div>
+        </li>
+      </ul>
+      <ul v-else>
+        <li class="info-item">
+          <div></div>
+          <div>润百颜透明质酸原液精华导入玻尿酸涂抹式水光针可 微针7ml*10瓶 润百颜微针.pdf</div>
+        </li>
+      </ul>
+    </div>
+  </div>
 </div>
 
+
+
+<template th:replace="article/components/article-drawer"></template>
 <template th:replace="article/components/article-footer"></template>
 <template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" src="/lib/datapicker/moment-2.29.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/datapicker/jquery.daterangepicker.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
 <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/article/common.js(v=${version})}"></script>
 <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>