updated

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

@@ -110,8 +110,8 @@ dl,dd,dt{zoom:1}
 	.header .nav .type-content .type-item:hover .type-item-link {background-position: -110px -742px;}
 	.header .nav .type-content .type-item:hover {background: rgba(0,0,0,0.2);}
 	.header .nav .type-content .type-item a:hover {background: none;}
-	.header .nav .type-content .type-item .nav-menu {display: none;flex-direction: column;position: absolute;bottom: 0;left: 0;width: 100%;background: #fff;z-index:-1;padding-top: 62px;transition: .3s;}
-	.header .nav .type-content .type-item:hover .nav-menu {top: 0;bottom: unset;display: flex;padding: 70px 0 6px 0;box-shadow: 0 0 10px #ccc;}
+	.header .nav .type-content .type-item .nav-menu {flex-direction: column;position: absolute;bottom: unset;left: 0;top: -50%;width: 100%;background: #fff;z-index:-1;display: flex;padding: 70px 0 6px 0;transition: .2s;transform: rotateX(90deg);}
+	.header .nav .type-content .type-item:hover .nav-menu {box-shadow: 0 0 10px #ccc;transform: rotateX(0deg);top: 0;}
 	.header .nav .type-content .type-item .nav-menu a {width: 100%;height: 40px;color: #4A4F58;display: flex;align-items: center;font-size: 14px;padding-left: 10px;}
 	.header .nav .type-content .type-item .nav-menu a:hover {background: #FFF4EE;color: #FF5B00;}
 
@@ -119,7 +119,8 @@ dl,dd,dt{zoom:1}
 	.nav .type .type-content .moreLink:hover {background: rgba(0,0,0,0.2);}
 	.nav .type a{height:64px;line-height:64px;font-size:16px;color:#fff;text-align:center;display:table-cell;vertical-align:top;white-space:nowrap; box-sizing: border-box;}
 	.type a:hover{background-color:#e96c1c;border-bottom-color: #fec19a}
-	/*.header .nav .type-content .current{background-color:rgba(0,0,0,0.2);padding-right: 16px;}*/
+	.header .nav .type-content .current{background-color:rgba(0,0,0,0.2);padding-right: 16px;}
+	.header .nav .type-content .type-item:hover .current{background:none !important;}
 	/*.nav .search{position:relative;display:table-cell;vertical-align:top;width:200px;height:32px;margin-left:39px}*/
 	/*.nav .search .keyword{width:200px;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}
@@ -398,9 +399,9 @@ dl,dd,dt{zoom:1}
 
 	.info-Notice {display: none;}
 	.info-banner {margin: 3.2vw auto;width: 94.4vw;display: flex;justify-content: space-between;align-items: center;height: 40vw;}
-	.info-banner .banner {width: 55vw;height: 100%;border: 1px solid;box-sizing: border-box;}
+	.info-banner .banner {width: 55vw;height: 100%;box-sizing: border-box;}
 	.info-banner .sider-banner {width: 37.8vw; height: 100%;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;}
-	.info-banner .sider-banner div {width: 100%;height: 49%;border: 1px solid;}
+	.info-banner .sider-banner div {width: 100%;height: 49%;}
 	.info-h5-notice {height: 10vw;box-sizing: border-box;margin: 1.6vw auto 3.2vw auto;width: 93.6vw;background: #fff;display: flex;justify-content: space-between;padding: 2.7vw 3.2vw;}
 	.info-h5-notice .h5-notice {font-weight: bold;font-size: 3.6vw;color: #333333;}
 	.info-h5-notice .h5-notice-title ul > li {list-style: disc;white-space: nowrap;text-overflow: ellipsis;width: 60vw;overflow: hidden;font-size: 3.2vw;}
@@ -550,7 +551,7 @@ dl,dd,dt{zoom:1}
 	/*.article .like:before{height:10vw;width:10vw;background-position:-75.3vw -38.6vw;vertical-align:middle;margin-right:1vw}*/
 	.classify{height:10vw;line-height:10vw;border-left:solid 4px #FF5B00;font-size:3.7vw;color:#333;padding:0 3vw;background:#fff}
 	.article .like{color: #FF5B00;cursor: pointer;display: block;height: 18.4vw;width: 18.4vw;line-height: 27.4vw;margin: 5vw auto;border-radius: 50%;background: #fef6f3;text-align: center;position: relative}
-	.article .like:before{ width: 8vw;height: 8vw;background-position: -14vw -78.4vw;vertical-align: middle;border-radius: 50%;position: absolute;top: 3.2vw}
+	.article .like:before{left: 50%;transform: translateX(-50%);width: 8vw;height: 8vw;background-position: -14vw -78.4vw;vertical-align: middle;border-radius: 50%;position: absolute;top: 3.2vw}
 	.no-result{text-align: center;padding: 3.2vw 0;background: #fff;width: 94.4vw;margin: 0 auto;}
 	/*ross 广告图*/
 	.article-right-ross{width:94.4vw;margin: 0 auto 3.2vw auto;border-radius: 2px;box-sizing: border-box;}

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

@@ -180,7 +180,11 @@ var recommendation = new Vue({
         },
         // 链接跳转
         handleTramp(id) {
-            window.location.href = '/info/detail-' + id + '-1.html'
+            if (this.state === 2) {
+                window.location.href = '/news/details.html?id=' + id
+            } else {
+                window.location.href = '/info/detail-' + id + '-1.html'
+            }
         }
     }
 })

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

@@ -71,9 +71,9 @@
 <!--            <a href="/" target="_blank"><img src="/img/base/logo_article@2x.png"/></a>-->
 <!--        </div>-->
         <div class="type">
-            <div class="type-content">
+            <div class="type-content" th:if="${articleType}">
                 <!-- <a class="home" href="/" target="_blank">商城</a> -->
-                <div class="type-item" th:each="type,status: *{articleType}" th:typeId="${type.id}" th:class="${typeId==type.id}?'type-item current':'type-item'">
+                <div class="type-item" th:each="type,status: *{articleType}" th:typeId="${type.id}" th:class="${typeId==type.id}?'type-item current':'type-item'" th:if="${status.index} < 10">
                     <a class="typeBtn" th:text="${type.name}" th:href="'/info/center-'+${type.id}+'-1.html'"></a>
                     <div class="type-item-link" th:if="${type.linkList}"></div>
                     <div class="nav-menu" th:if="${type.linkList}">

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

@@ -37,14 +37,14 @@
             </a>
         </div>
     </div>
-    <div class="info-Notice" id="infoNotice" v-cloak>
+    <div class="info-Notice" id="infoNotice">
         <div class="notice-title">
             <div>公告</div>
             <div>
                 <a href="/info/articlerecommendation-3-1.html?isNotice">更多 ></a>
             </div>
         </div>
-        <div class="notice-content">
+        <div class="notice-content" v-cloak>
             <ul class="notice-content-list">
                 <li class="notice-content-li" v-for="(list ,index) in newsList" :key="index" @click="hanldDetails(list.id)">
                     {{ list.title }}

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

@@ -83,7 +83,7 @@
                 </div>
                 <div class="list-mainData">
                     <ul v-if="state == 2">
-                        <li class="item" v-for="item in listData" :key="item.id">
+                        <li class="item" v-for="item in listData" :key="item.id" @click="handleTramp(item.id)">
                             <div>{{item.title}}</div>
                             <div>{{item.creationtime}}</div>
                         </li>