信息中心

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

@@ -91,8 +91,8 @@ dl,dd,dt{zoom:1}
 .row .new-blurb .title{width:570px;font-size:20px;line-height:30px;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 em{display:inline-block;min-width:100px}
-.P_img em:before{width:24px;height:24px;background-position:-100px -579px;vertical-align:top;margin-right:5px}
+.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}
 .new-blurb a:hover{color:#e15616}
 .new-blurb a.none:hover{color:#333;cursor:default}
@@ -114,8 +114,8 @@ dl,dd,dt{zoom:1}
 .content .classify .pre:hover,.content .classify .next:hover{background:#e15616}
 .tags{background:#fff}
 .tag{max-height:437px;overflow:hidden;padding:18px 7px 2px 19px;border-top:solid 1px #ededed;margin-bottom:20px}
-.tag span{float:left;font-size:14px;color:#fff;height:32px;line-height:32px;padding:0 12px;background:#e15616;text-align:center;border-radius:4px;margin:2px 12px 18px 0;cursor:pointer}
-.tag span:hover{padding:0 13px;height:35px;line-height:35px;margin:0px 10px 17px 0}
+.tag a{float:left;font-size:14px;color:#fff;height:32px;line-height:32px;padding:0 12px;background:#e15616;text-align:center;border-radius:4px;margin:2px 12px 18px 0;cursor:pointer}
+.tag a:hover{padding:0 13px;height:35px;line-height:35px;margin:0px 10px 17px 0}
 .other .recommend{background:#fff;margin-bottom:20px}
 .other .recommend .row{padding:15px;border-top:solid 1px #ededed;border-bottom:none;padding-bottom:21px}
 .row .new-img.xiao{width:100px;height:70px}
@@ -149,27 +149,47 @@ dl,dd,dt{zoom:1}
 */
 @media screen and (max-width:768px){
 .header .logo,.header .home{display:none}
-.mIcon:before{content:'';display:inline-block;font-size:0;background:url(/static/img/base/icon_m11.png) no-repeat;background-size:75vw auto;transition:all .5s}
+.mIcon:before{content:'';display:inline-block;font-size:0;background:url(/img/base/icon_m.png) no-repeat;background-size:100vw auto;transition:all .5s}
 .loading{box-sizing:border-box;padding:20vw 0;text-align:center}
 .header{position:relative}
 .h5-head{box-sizing:border-box;width:100%;background:#FFF;height:13.6vw;margin-bottom:2.6vw;padding:0 2.6vw;position:relative}
 .h5-head .index{float:left;width:9vw;line-height:3.4vw;text-align:center;font-size:3.7vw;color:#333}
 .h5-head .index img{width:100%}
 .h5-head .hotWord{float:right;background-color:#e15616;color:#fff;text-align:center;border-radius:5px;width:16vw;height:9.6vw;line-height:9.6vw;font-size:3.7vw;margin-top:2vw}
-.header .search{position:absolute;top:2vw;left:15vw;width:64vw;height:9.6vw;line-height:9.6vw;margin:0 auto;box-sizing:border-box;border:1px solid #FFE6DC;border-radius:5px;overflow:hidden}
-.header .search .keyword{position:absolute;left:0;top:0;border:none;outline:none;width:48vw;height:9.6vw;font-size:3.7vw;color:#4A4F58;text-indent:7.6vw;background:#FFF url(/img/info/search-m.png) no-repeat 1.6vw center;background-size:auto 60%}
-.header .search .searchBtn{position:absolute;right:0;top:0;width:16vw;height:9.6vw;font-size:3.7vw;color:#fff;text-align:center;background-color:#e15616}
-.header .search .searchBtn:before{content:'搜索'}
+.search{position:absolute;top:2vw;left:15vw;width:64vw;height:9.6vw;line-height:9.6vw;margin:0 auto;box-sizing:border-box;border:1px solid #FFE6DC;border-radius:5px;overflow:hidden}
+.search .keyword{position:absolute;left:0;top:0;border:none;outline:none;width:48vw;height:9.6vw;font-size:3.7vw;color:#4A4F58;text-indent:7.6vw;background:#FFF url(/img/info/search-m.png) no-repeat 1.6vw center;background-size:auto 60%}
+.search .searchBtn{position:absolute;right:0;top:0;width:16vw;height:9.6vw;font-size:3.7vw;color:#fff;text-align:center;background-color:#e15616}
+.search .searchBtn:before{content:'搜索'}
 #mHotWord{display:none;position:fixed;bottom:0;left:0;width:100%;height:100%;margin:0 auto;overflow-y:scroll;background-color:rgba(74,79,88,.7);z-index:999;-webkit-overflow-scrolling:touch}
 #mHotWord .tags{background:#fff;border-bottom:1px solid #e9e9e9;-webkit-box-shadow:#e7e7e7 0px 4px 8px;-moz-box-shadow:#e7e7e7 0px 4px 8px;box-shadow:#e7e7e7 0px 4px 8px;padding:2.6vw}
 #mHotWord .classify{border-left:solid 4px #e15616;height:4.6vw;font-size:4.6vw;line-height:4.6vw;padding-left:2vw;margin:3vw 0;color:#333}
 #mHotWord .tag{border-top:1px solid #ddd;padding-top:2.6vw;line-height:8vw}
-#mHotWord .tag span{display:inline-block;padding:0 2vw;line-height:6vw;font-size:3.7vw;color:#333}
+#mHotWord .tag a{display:inline-block;padding:0 2vw;line-height:6vw;font-size:3.7vw;color:#E15616}
 #mHotWord .close{position:absolute;right:3.6vw;top:2.6vw}
 #mHotWord .close:after{content:'\2715';font-size:4.5vw;font-weight:bold}
-.header .type{width:100%;background:#FFF;white-space:nowrap;overflow-x:scroll;height:12vw;line-height:12vw;position:relative}
+.header .type{width:100%;background:#FFF;white-space:nowrap;height:12vw;line-height:12vw;position:relative;overflow-x:auto}
 .header .type a{display:inline-block;margin-right:1vw;padding:0 2vw;font-size:3.7vw}
-.header .type:after{content:'';position:absolute;right:0;width:6vw;background-image:linear-gradient(to right,rgba(255,255,255,.5),rgba(255,255,255,1));height:100%}
+.header .type a.current{color:#e15616}
+.header .type:after{content:'';position:absolute;top:0;right:0;width:6vw;background-image:linear-gradient(to right,rgba(255,255,255,.5),rgba(255,255,255,1));height:100%}
+.bar,.new-list .classify{height:8vw;line-height:8vw;font-size:3.1vw;overflow:hidden;color:#93979F;padding:0 2vw}
+.new-list .classify em{color:#E15616;font-weight:bold;margin-right:1vw;font-size:3.7vw}
+.new-list{min-height:68vh}
+.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 img{position:absolute;left:3.3vw;top:2.3vw;width:30.4vw;height:30.4vw}
+.dataRousce .row .title{margin-bottom:2vw;color:#2D3036;font-size:3.4vw;max-height:9.6vw;line-height:4.8vw;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.dataRousce .row .xinxi{margin-bottom:2vw;color:#93979f;max-height:8.4vw;line-height:4.2vw;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.dataRousce .row .xinxi em{margin-right:2vw}
+.dataRousce .row .write:before{width:4vw;height:4vw;vertical-align:top;background-position:-22.5vw -17.5vw;margin-right:1vw}
+.dataRousce .row .time:before{width:4vw;height:4vw;vertical-align:top;background-position:-37.5vw -17.5vw;margin-right:1vw}
+.dataRousce .row .pv:before{width:4vw;height:4vw;vertical-align:top;background-position:-30vw -17.5vw;margin-right:1vw}
+.dataRousce .row .hotspot:before{width:4vw;height:4vw;vertical-align:top;background-position:-15vw -17.5vw;margin-right:1vw}
+.dataRousce .row .hotspot a{color:#93979f}
+.dataRousce .row .introduction{height:7vw;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.footer{width:100%;padding:4vw 0;background:#262626;margin-top:4vw;text-align:center}
+.footer .logo img{width:9.2vw;height:8vw;vertical-align:middle}
+.footer .dizhi{display:inline-table;color:#ccc;font-size:3.1vw;line-height:4.8vw;vertical-align:super}
+
 
 
 

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

@@ -1,3 +1,4 @@
+/*var articleTypeNav = new Swiper('#articleTypeNav');*/
 var articleSide = new Vue({
     el: '#articleSide',
     data: {
@@ -65,6 +66,12 @@ var articleSide = new Vue({
             this.getRecommend(this.typeId, 1);
             this.getAds();
         }
+        if (this.labelId>0) {
+            // 添加一个标签点击量
+            $.get("/article/label/click", {id: this.labelId}, function(res){
+                console.log(res);
+            });
+        }
 
     }
 });

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

@@ -9,8 +9,10 @@
             <a href="/" target="_blank"><img src="/img/info/nav-logo.png"/></a>
         </div>
         <div class="type">
-            <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>
+            <div>
+                <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>
+            </div>
         </div>
         <!--搜索-->
         <div class="search" id="topSearch">

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

@@ -1,11 +1,11 @@
-<div class="other" id="articleSide">
+<div class="other" id="articleSide" v-cloak>
     <div id="mHotWord">
         <div class="tags clearfix">
             <p class="classify">
                 热搜词
             </p>
             <div class="tag">
-                <span v-for="label in labelList" @click="labelInfo(label.id,label.typeId,label.link)" :style="'opacity:'+label.sort" v-text="label.name"></span>
+                <a v-for="label in labelList"  :href="'/info/label-' + label.id + '-1.html'" :style="'opacity:'+label.sort" v-text="label.name"></a>
             </div>
         </div>
         <a href="javascript:void(0);" class="close"></a>

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

@@ -104,7 +104,7 @@
 </div>
 <template th:replace="article/components/footer"></template>
 <template th:replace="components/foot-link"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/article/side.js(v=${version})}"></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/detail.js(v=${version})}"></script>
 </body>
 </html>

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

@@ -31,17 +31,18 @@
 </div>
 <!--主体内容-->
 <div class="content clearfix">
-    <div class="new-list" id="articleList">
+    <div class="new-list" id="articleList" v-cloak>
         <div v-if="params.keyword" class="search">
             <div class="serachBox" id="topSearch">
                 <input class="keyword" type="text" :value="params.keyword" placeholder="请输入关键词" />
                 <a class="searchBtn" href="javascript:void(0);">搜索</a>
             </div>
-            <p class="result">为您找到相关结果<b v-text="listRecord">0</b>条</p>
+            <p v-if="isPC" class="result" v-html="'为您找到相关结果<b>'+listRecord+'</b>条'"></p>
         </div>
         <p v-else-if="params.labelId" class="classify biaoqian">
             <em id="labelTxt"></em>相关的文章
         </p>
+        <p v-if="params.keyword && !isPC" class="classify" v-html="'为您找到相关结果<b>'+listRecord+'</b>条'"></p>
         <div v-if="listData.length>0" class="dataRousce">
             <div class="row" v-for="item in listData">
                 <div class="new-img">
@@ -54,14 +55,15 @@
                         <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 class="time icon mIcon" v-text="item.publishDate"></em>
+                        <em 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?'，':''}}<span v-if="item.labels[i]" v-text="item.labels[i]" @click="labelInfo(id)"></span></template>
+                            <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 class="P_img"><em class="pv icon mIcon" v-text="item.pv"></em></p>
+                    <p v-if="isPC" class="P_img"><em class="pv icon mIcon" v-text="item.pv"></em></p>
                 </div>
             </div>
         </div>
@@ -96,7 +98,7 @@
 </div>
 <template th:replace="article/components/footer"></template>
 <template th:replace="components/foot-link"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/article/side.js(v=${version})}"></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>

src/main/resources/templates/single-page/live.html

@@ -22,16 +22,16 @@
         <div class="pageFloor">
             <div class="title">
                 <span>直播专栏</span>
-                <a href="javascript:void(0);" class="more">查看更多>>></a>
+                <a href="/info/center-1-1.html" class="more">查看更多>>></a>
             </div>
             <ul class="article clear">
                 <li v-for="item in liveArticles">
-                    <a :href="item.id"><img :src="item.image" alt="item.title"></a>
-                    <h5><a :href="item.id" v-text="item.title"></a></h5>
+                    <a :href="'/info/detail-'+item.id+'-1.html'"><img :src="item.image" alt="item.title"></a>
+                    <h5><a :href="'/info/detail-'+item.id+'-1.html'" v-text="item.title"></a></h5>
                     <div class="label">
                         <span class="author icon mIcon" v-text="item.publisher"></span>
                         <span class="tags icon mIcon">
-                            <template v-for="(id,i) in item.labelIds">{{i>0?'，':''}}<a v-if="item.labels[i]" v-text="item.labels[i]"href="javascript:void(0);"></a></template>
+                            <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>
                         </span>
                     </div>
                     <p v-text="item.intro"></p>