updated：相关推荐

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

@@ -233,6 +233,7 @@ public class ArticleController extends BaseController {
         model.addAttribute("typeId", (article != null ? article.getTypeId() : 0));
         model.addAttribute("labelId", 0);
         model.addAttribute("isSelectInfo", true);
+        model.addAttribute("isDetail", true);
         return ARTICLE_DETAIL_PATH;
     }
 

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

@@ -563,6 +563,7 @@ dl,dd,dt{zoom:1}
 	.article-right-ross.show{display: block;}
 	.article-right-ross>a{width: 100%;height: 100%;display: block;border-radius: 2px;}
 	.article-right-ross>a img{width: 100%;height: 100%;display: block;border-radius: 2px;}
+	.article-PC {display:none;}
 	/*文章列表头*/
 	.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;}

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

@@ -1,6 +1,6 @@
 #drawer-footer {
     width: 94.4vw;
-    margin: 0 auto 4vw auto;
+    margin: 4vw auto;
     height: 76.9vw;
     white-space: nowrap;
     overflow-x: scroll;
@@ -84,14 +84,14 @@
 }
 
 .advertisement {
-    position: sticky;
+    /*position: sticky;*/
     height: 35.6vw;
     width: 94.4vw;
-    bottom: -36vw;
+    /*bottom: -36vw;*/
     margin: 0 auto 18vw auto;
     overflow-x: scroll;
     white-space: nowrap;
-    animation: AdvsFrames .5s linear forwards;
+    /*animation: AdvsFrames .5s linear forwards;*/
 }
 .advertisement .advertisement-link {
     display: inline-block;
@@ -106,11 +106,270 @@
     height: 100%;
     object-fit: contain;
 }
-@keyframes AdvsFrames {
-    0% {
-        bottom: -36vw;
+/*@keyframes AdvsFrames {*/
+/*    0% {*/
+/*        bottom: -36vw;*/
+/*    }*/
+/*    100% {*/
+/*        bottom: 0;*/
+/*    }*/
+/*}*/
+.bg-filter {
+    width: 100%;
+    backdrop-filter: blur(33px);
+    background-color: rgba(255, 255, 255, 0.4);
+}
+@media screen and (min-width:768px) {
+    .related-Reading {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 200px;
+        animation: retractAnimation 1s ease-in-out forwards;
+    }
+    .related-Reading .related-content {
+        width: 1185px;
+        height: 100%;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+    }
+    .related-content-title {
+        color: #333;
+        font-size: 16px;
+        font-weight: bold;
+        margin: 31px 0 20px 0;
+        width: 100%;
+        position: relative;
+    }
+    .related-content-close {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        border: 1px solid;
+        right: 100px;
+        top: 16px;
+        border-radius: 50%;
+        font-size: 17px;
+        cursor: pointer;
+        text-align: center;
+    }
+    .related-content-close :hover {
+        color: #FF5B00;
+        border: 1px solid #FF5B00;
+    }
+    .related-content-item {
+        height: 80px;
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+    .related-content-item .reading-content {
+        width: 336px;
+        height: 80px;
+        display: flex;
+        justify-content: space-between;
+    }
+    .related-content-item .reading-content img {
+        width: 128px;
+        height: 100%;
+        box-sizing: border-box;
+    }
+    .related-content-item .reading-content img:hover {
+        border: 1px solid #FF5B00;
+    }
+    .related-content-item .reading-content .content-text {
+        height: 100%;
+        width: 192px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+    .related-content-item .reading-content .content-text .content-title {
+        text-overflow:ellipsis;
+        display:-webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient:vertical;
+        font-size: 16px;
+        color: #333333;
+        white-space: pre-wrap;
+        overflow: hidden;
+        height: 45px;
+    }
+    .related-content-item .reading-content .content-text .content-title:hover {
+        color: #FF5B00;
+    }
+    .related-content-item .reading-content .content-text .content-icon {
+        display: flex;
+        align-items: center;
+    }
+    .related-content-item .reading-content .content-text .content-icon .icon-recommend {
+        width: 56px;
+        height: 24px;
+        background: #FFF4EE;
+        color: #FF5B00;
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        margin-right: 24px;
+        border-right: 2px;
+    }
+    .related-content-item .reading-content .content-text .content-icon .icon-recommend div:nth-child(1) {
+        background: url(/img/article/PC-fire.png) no-repeat;
+        width: 12px;
+        height: 12px;
+        background-size: 100% 100%;
+    }
+    .related-content-item .reading-content .content-text .content-icon .icon-group {
+        display: flex;
+        align-items: center;
+    }
+    .related-content-item .reading-content .content-text .content-icon .icon-group .icon-text {
+        color: #B2B2B2;
+        font-size: 14px;
+    }
+    .related-content-item .reading-content .content-text .content-icon .icon-pv {
+        width:24px;
+        height:24px;
+        vertical-align:top;
+        background: url(/img/base/icon.png) no-repeat -185px -329px;
     }
-    100% {
+    @keyframes retractAnimation {
+        0% {
+            bottom: -200px;
+        }
+        100% {
+            border: 0;
+        }
+    }
+}
+
+@media screen and (max-width:768px) {
+    .related-Reading {
+        position: fixed;
         bottom: 0;
+        left: 0;
+        width: 100%;
+        animation: retractAnimation .5s ease-in-out forwards;
+        box-sizing: border-box;
+        padding: 3.6vw 3.6vw 8.3vw 3.6vw;
+    }
+    .related-Reading .related-content {
+        width: 100%;
+        height: 100%;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+    }
+    .related-content-title {
+        color: #4A4F58;
+        font-size: 4vw;
+        font-weight: bold;
+        margin: 3.6vw 0 0 1vw;
+        width: 100%;
+        position: relative;
+    }
+    .related-content-close {
+        position: absolute;
+        width: 6vw;
+        height: 6vw;
+        border: 1px solid #343131;
+        right: 5.7vw;
+        top: 3.2vw;
+        border-radius: 50%;
+        font-size: 17px;
+        cursor: pointer;
+        text-align: center;
+        color: #343131;
+        line-height: 6vw;
+    }
+    .related-content-close :hover {
+        color: #FF5B00;
+        border: 1px solid #FF5B00;
+    }
+    .related-content-item {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+    .related-content-item .reading-content {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 4.8vw;
+    }
+    .related-content-item .reading-content img {
+        width: 25.8vw;
+        height: 18.1vw;
+        box-sizing: border-box;
+    }
+    .related-content-item .reading-content img:hover {
+        border: 1px solid #FF5B00;
+    }
+    .related-content-item .reading-content .content-text {
+        height: 100%;
+        width: 61.9vw;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+    .related-content-item .reading-content .content-text .content-title {
+        text-overflow:ellipsis;
+        display:-webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient:vertical;
+        font-size: 3.4vw;
+        color: #333333;
+        white-space: pre-wrap;
+        overflow: hidden;
+        height: 10.9vw;
+    }
+    .related-content-item .reading-content .content-text .content-title:hover {
+        color: #FF5B00;
+    }
+    .related-content-item .reading-content .content-text .content-icon {
+        display: flex;
+        align-items: center;
+    }
+    .related-content-item .reading-content .content-text .content-icon .icon-recommend {
+        width: 11.8vw;
+        height: 4.8vw;
+        background: #FFF4EE;
+        color: #FF5B00;
+        font-size: 2.4vw;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        margin-right: 4.8vw;
+    }
+    .related-content-item .reading-content .content-text .content-icon .icon-recommend div:nth-child(1) {
+        background: url(/img/article/PC-fire.png) no-repeat;
+        width: 2.4vw;
+        height: 2.4vw;
+        background-size: 100% 100%;
+    }
+    .related-content-item .reading-content .content-text .content-icon .icon-group {
+        display: flex;
+        align-items: center;
+    }
+    .related-content-item .reading-content .content-text .content-icon .icon-group .icon-text {
+        color: #B2B2B2;
+        font-size: 14px;
+        vertical-align: bottom;
+    }
+    .related-content-item .reading-content .content-text .content-icon .icon-pv {
+        width:24px;
+        height:24px;
+        vertical-align:top;
+        background: url(/img/base/icon.png) no-repeat -185px -329px;
+    }
+    @keyframes retractAnimation {
+        0% {
+            bottom: -91vw;
+        }
+        100% {
+            border: 0;
+        }
     }
 }

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

@@ -64,19 +64,20 @@ var articleRelated = new Vue({
         // 文章浏览量+1
         $.get("/article/pv", {id: this.infoId}, function(res){
             if(res.code === 0){
-                console.log('浏览量+1')
                 // 更新文章索引
                 $.post(coreServer + "/commodity/search/index/update/article", {articleId: _self.infoId}, function(res){
                     console.log(res.msg);
                 });
             }
         });
-        $('#qrcode').qrcode({
-            "render": "canvas",
-            "width": '120',
-            "height": '120',
-            "color": "#3a3",
-            "text": thisUri
-        });
+        if ($('#qrcode').qrcode) {
+            $('#qrcode').qrcode({
+                "render": "canvas",
+                "width": '120',
+                "height": '120',
+                "color": "#3a3",
+                "text": thisUri
+            });
+        }
     }
 });

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

@@ -1,47 +0,0 @@
-
-var drawerFooter = new Vue({
-    el: "#drawer-footer",
-    data: {
-        recommend: [],
-        typeId: 0,
-        labelId: 0,
-    },
-    mounted() {
-        this.typeId = $("#typeId").val()*1;
-        this.labelId = $("#labelId").val()*1;
-        this.getRecommend(this.typeId, 1);
-        //换一批15秒请求一次
-        setInterval(function(){
-            if (this.recommend.hasNextPage) {
-                this.getRecommend(this.typeId, this.recommend.nextPage);
-            } else {
-                this.getRecommend(this.typeId, 1);
-            }
-        },15000);
-        if (this.labelId>0) {
-            // 添加一个标签点击量
-            $.get("/article/label/click", {id: this.labelId}, function(res){
-                console.log(res);
-            });
-        }
-    },
-    methods: {
-    //    链接跳转
-        handlerTramp($event) {
-            window.location.href = "/info/articlerecommendation.html"
-        },
-        getRecommend: function(typeId, pageNum){
-            console.log(typeId, pageNum);
-            var _self = this;
-            $.getJSON("/article/recommend",{
-                typeId: typeId,
-                pageNum: pageNum
-            }, function (r) {
-                if (r.code === 0 && r.data) {
-                    _self.recommend= r.data;
-                }
-            });
-        },
-    }
-})
-

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

@@ -9,7 +9,7 @@ var recommendation = new Vue({
         },
         state: null,
         params: {
-            size: 20,
+            size: 10,
             num: 1,
             typeId: '',
             labelId: '',
@@ -50,7 +50,7 @@ var recommendation = new Vue({
             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': {
@@ -84,7 +84,6 @@ var recommendation = new Vue({
                 let paramsArr = window.location.pathname.split(".")[0].split("-");
                 this.params.num = paramsArr[2]
                 $.getJSON("/info/articlerecommendation/" + id + "/" + this.params.num, {}, function (r) {
-                    console.log(r.data)
                     if (r.code === 0 && r.data) {
                         _self.stateObj = r.data
                         _self.articlerecommendationData = r.data.results;

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

@@ -9,7 +9,7 @@
 <input type="hidden" th:value="${coreServer}" id="coreServer">
 <input type="hidden" th:value="${agent}" id="userAgent">
   <div id="drawer-footer" th:if="${isSelectInfo}">
-    <div class="hot-recommend" v-if="recommend.list.length > 0">
+    <div class="hot-recommend" v-if="recommend.list && recommend.list.length > 0">
       <div class="hot-recommend-title">
         <div>热门推荐</div>
         <div>
@@ -80,5 +80,32 @@
     <img th:src="${ad.image}" th:alt="${ad.title}" class="advertisement-img"/>
   </a>
 </div>
+<!--相关阅读-->
+<div class="related-Reading bg-filter" id="related-Reading" th:if="${isDetail} and ${#arrays.length(articles) > 0}">
+  <div class="related-content">
+    <div class="related-content-title">相关阅读</div>
+    <div class="related-content-close">&#10006</div>
+    <div class="related-content-item">
+      <div class="reading-content" th:each="item : ${articles}">
+        <a th:href="'/info/detail-'+${item.id}+'-1.html'" target="_blank">
+          <img th:src="${item.image}"/>
+        </a>
+        <div class="content-text">
+          <a th:href="'/info/detail-'+${item.id}+'-1.html'" class="content-title" target="_blank" th:text="${item.title}"></a>
+          <div class="content-icon">
+            <div class="icon-recommend">
+              <div></div>
+              <div>推荐</div>
+            </div>
+            <div class="icon-group">
+              <div class="icon-pv"></div>
+              <div class="icon-text" th:text="${item.pv}"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 </body>
 </html>

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

@@ -4,7 +4,7 @@
 <!--    <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 v-if="isPC && recommend.list.length > 0" class="recommend">
+    <div v-if="isPC && recommend.list && recommend.list.length > 0" class="recommend">
         <p class="classify readerSify">
             热门推荐
             <span class="nextPreBtn">

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

@@ -58,7 +58,7 @@
             </div>
         </div>
         <!--相关阅读-->
-        <div class="new-list dataRousce" id="articleRelated">
+        <div class="new-list dataRousce" id="articleRelated" th:if="${#arrays.length(articles) > 0}">
             <p class="classify biaoqian">相关阅读</p>
             <div class="row" th:each="item : ${articles}">
                 <div class="new-img">
@@ -98,7 +98,7 @@
         </div>
     </div>
     <!--侧边栏Ross广告图-->
-    <div v-if="isPC && isRossShow" class="article-right-ross" :class="isRossShow ? 'show' : 'none'">
+    <div v-if="isPC && isRossShow" class="article-right-ross article-PC" :class="isRossShow ? 'show' : 'none'">
         <a href="/supplier-1378.html" v-if="isPC"><img src="/img/ross/ross-image@1x.jpg" alt="深圳艾斯佰丽生物科技有限公司"></a>
     </div>
     <!--侧边栏-->
@@ -112,12 +112,33 @@
 <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 type="text/javascript" src="/lib/element-ui/element-ui.min.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/jquery.qrcode.min.js}"></script>
 <script type="text/javascript" src="/lib/element-ui/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/detail.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript">
+    const closeContent = document.getElementsByClassName("related-content-close")[0]
+    const article = document.getElementById("articleRelated")
+    const handleClose = () => {
+        const relatedContent = document.getElementById("related-Reading");
+        relatedContent.style.display = "none"
+    }
+    closeContent.addEventListener('click', handleClose)
+    const handlerArticleEl = () => {
+        const observer = new IntersectionObserver((mutation) => {
+            const status = mutation[0].isIntersecting
+            if (status) {
+                handleClose()
+            }
+        })
+        observer.observe(article)
+    }
+    handlerArticleEl()
+    window.addEventListener('scroll', handlerArticleEl, false)
+    window.addEventListener('DOMMouseScroll', handlerArticleEl, false)
+</script>
 </body>
 </html>

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

@@ -142,7 +142,7 @@
                     <div class="select-earliest" :class="params.sortType === 2 ? 'now-search-select' : '' " @click="selectListNew(2)">最早</div>
                 </div>
             </div>
-            <div v-if="listData.length>0" class="dataRousce">
+            <div v-if="listData && 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">
@@ -154,7 +154,7 @@
                             <p class="title" v-html="item.title"></p>
                         </a>
                         <p class="introduction" v-html="item.intro"></p>
-                        <p class="xinxi"><em v-if="item.labels.length>0&&item.labels[0]" class="hotspot icon mIcon">
+                        <p class="xinxi"><em v-if="item.labels && 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="xinxi">
@@ -219,7 +219,7 @@
         </div>
     </div>
     <!--侧边栏Ross广告图-->
-    <div v-if="isPC && isRossShow" class="article-right-ross" :class="isRossShow ? 'show' : 'none'">
+    <div v-if="isPC && isRossShow" class="article-right-ross article-PC" :class="isRossShow ? 'show' : 'none'">
         <a href="/supplier-1378.html" v-if="isPC"><img src="/img/ross/ross-image@1x.jpg" alt="深圳艾斯佰丽生物科技有限公司"></a>
     </div>
     <!--侧边栏-->

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

@@ -96,7 +96,7 @@
           <div class="filter__item date" data-sort-status="2"><span></span>时间排序</div>
         </div>
       </div>
-      <div v-if="listData.length>0" class="dataRousce">
+      <div v-if="listData&&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">
@@ -111,7 +111,7 @@
               <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">
+              <em v-if="item.labels && 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>

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

@@ -62,7 +62,8 @@
                     <div class="pageWrap clear" v-if="isPC && stateObj.totalRecord > 0">
                         <a class="prev" :href="'/info/articlerecommendation-1-' + (stateObj.pageNum - 1) + '.html?isSelected'" v-if="stateObj.hasPreviousPage"></a>
                         <template v-for="item in stateObj.totalPage">
-                            <a :href="'/info/articlerecommendation-1-' + item + '.html?isSelected'" v-text="item"></a>
+                            <a v-if="item" :href="'/info/articlerecommendation-1-' + item + '.html?isSelected'" v-text="item"></a>
+                            <span v-else>···</span>
                         </template>
                         <a class="next" v-if="stateObj.hasNextPage" :href="'/info/articlerecommendation-1-' + (stateObj.pageNum + 1) + '.html?isSelected'"></a>
                         <span>共<b v-text="stateObj.totalPage"></b>页</span>
@@ -102,7 +103,7 @@
                     </ul>
                     <div class="pageWrap clear" v-if="isPC && state !== 2">
                         <a class="prev" :href="'/info/articlerecommendation-0-' + (stateObj.pageNum - 1) + '.html?isDocument'" v-if="stateObj.hasPreviousPage"></a>
-                        <template v-for="n in stateObj.totalPage">
+                        <template v-for="n in showPageBtn">
                             <a v-if="n" :class="{'on':(n==params.num)}" :href="'/info/articlerecommendation-0-' + n + '.html?isDocument'" v-text="n"></a>
                             <span v-else>···</span>
                         </template>