fixed:信息平台原有样式修改

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

@@ -94,37 +94,38 @@ dl,dd,dt{zoom:1}
 	.header .search-top{display:flex;width:1185px;margin:0 auto; height: 100px;align-items: center;}
 	.search-top .info-logo-content {width: 168px;height: 76px;background: url(/img/article/h5-logo.png);background-size: contain;}
 	.search-top .search{position:relative;display:flex;width:685px;margin-left:134px;flex-direction: column;}
-	.search-top .search .search-info {width: 100%;height: 44px;border:2px solid #FF5B00;box-sizing: border-box;border-radius:2px;overflow: hidden;}
+	.search-top .search .search-info {width: 100%;height: 44px;border:1px solid #FF5B00;box-sizing: border-box;border-radius:2px;overflow: hidden;}
 	.search-top .search .keyword{width:100%;height:100%;border: none;color:#B2B2B2;font-size:14px; padding: 0 80px 0 16px;}
+	.search-top .search .search-info .label-keyword {height: 100%;width: 604px;padding: 0 10px; border: none;color:#B2B2B2;}
 	.search-top .search .keywords {display: flex;flex-wrap: wrap;}
 	.search-top .search .keywords span {margin-right: 4px;}
 
 	.header .nav{display:table;width:100%;background:#FF5B00;}
 	/*.nav .logo{display:table-cell;vertical-align:top;height:48px;padding:11px 0;margin-right: 16px;}*/
 	/*.nav .logo img{width:168px;height:56px}*/
-	.nav .type{display:table-cell;vertical-align:top;height:70px}
-	.nav .type .type-content {width: 1185px; margin: 0 auto;display: flex;}
+	.nav .type{display:table-cell;vertical-align:top;height:64px}
+	.nav .type .type-content {width: 1185px; margin: 0 auto;display: flex;height: 64px;}
 	.header .nav .type-content .type-item {cursor: pointer;display: flex;justify-content: space-around;align-items: center;position: relative;padding: 0 16px;}
 	.header .nav .type-content .type-item .type-item-link {box-sizing: border-box;background: url(/img/article/PC.png);width: 24px; height: 24px;background-position: -76px -742px;}
 	.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: 78px;transition: .3s;}
-	.header .nav .type-content .type-item:hover .nav-menu {top: 0;bottom: unset;display: flex;}
+	.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 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;}
 
-	.nav .type a{height:78px;line-height:78px;font-size:16px;color:#fff;text-align:center;display:table-cell;vertical-align:top;white-space:nowrap; box-sizing: border-box;}
+	.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;}*/
 	/*.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}
 	.search .searchBtn{position:absolute;display: block;top: 0; right: 0;width: 80px;height: 44px;background: #FF5B00;color:#fff;line-height:44px;text-align: center;}
-	.search .keyword::-webkit-input-placeholder{color:#fff}
-	.search .keyword:-moz-placeholder{color:#fff}
-	.search .keyword::-moz-placeholder{color:#fff}
-	.search .keyword:-ms-input-placeholder{color:#fff}
+	.search .keyword::-webkit-input-placeholder,
+	.search .keyword:-moz-placeholder,
+	.search .keyword::-moz-placeholder,
+	.search .keyword:-ms-input-placeholder{color:#B2B2B2}
 	/* .content.sea-top{margin-top:110px} */
 	.foot{width:100%;height:174px;background:#262626;}
 	.footer{width:1185px;margin:0 auto;text-align:center;height: 174px;box-sizing: border-box;padding: 39px 0;}
@@ -187,9 +188,9 @@ dl,dd,dt{zoom:1}
 	.info-Notice .notice-content .notice-content-li:hover:before {background: #FF5B00;}
 
 	.new-list .row{position:relative;display:table;width:800px;height:150px;margin:0 30px;padding:24px 0;border-bottom:solid 1px #ededed}
-	.row .new-img{position:absolute;width:210px;height:150px;margin-right:20px;background:#FFF url(/img/base/placeholder.png) no-repeat center center;}
+	.row .new-img{position:absolute;width:210px;height:150px;margin-right:20px;}
 	.row .campaign{position:absolute;top:35px;left:5px;width:56px;height:24px;line-height:24px;font-size:16px;color:#fff;text-align:center;border-radius:2px;background-color:#FF5B00;opacity:.7;z-index:99}
-	.row .new-img img{width:100%;height:100%;background-color:#FFF;background-size:80%}
+	.row .new-img img{width:100%;height:100%;background-size:80%}
 	.row .new-img img:hover{border:solid 2px #FF5B00;opacity:0.8}
 	.row .new-img img.none:hover{border:none;opacity:1;cursor:default}
 	.row .new-blurb{padding-left:230px;min-height:150px;margin-top:-5px;overflow:hidden}
@@ -216,7 +217,7 @@ dl,dd,dt{zoom:1}
 	.article .write{margin-left:5px;margin-right:30px}
 	.row .new-blurb .introduction{margin-top: 10px; color:#777;font-size:14px;line-height:26px;min-height:52px;overflow :hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 	.other{width:284px;float:right}
-	.classify{height:50px;line-height:50px;border-left:solid 4px #FF5B00;font-size:20px;color:#333;padding-left:15px;padding-right:5px;background:#fff; display: flex;justify-content: space-between;}
+	.classify{height:50px;line-height:50px;border-left:solid 4px #FF5B00;font-size: 16px;font-weight: bold;color: #333333;;padding-left:15px;padding-right:5px;background:#fff; display: flex;justify-content: space-between;}
 
 
 	.classify .pre,.content .classify .next{display:inline-block;width:16px;height:16px;line-height:16px;color:#fff;text-align:center;float:right;margin-right:10px;margin-top:20px;cursor:pointer;background:#ccc;font-size:12px;font-weight:normal}
@@ -239,8 +240,8 @@ dl,dd,dt{zoom:1}
 	.row .new-img.xiao img:hover{border:solid 1px #FF5B00}
 	.row .new-blurb.xiao{padding-left:110px;min-height:70px !important}
 	.row .new-blurb .shuoming{font-size:14px;line-height:25px;max-height:78px;overflow :hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
-	.tui .tui-img{display:block;position: relative; width:284px;max-height:434px;margin-bottom:20px;overflow:hidden;background:#FFF url(/img/base/placeholder.png) no-repeat center center;background-size:80%}
-	.tui .tui-img img{width:100%;max-height:432px}
+	.tui .tui-img{display:block;position: relative; width:284px;height: 222px;margin-bottom:20px;overflow:hidden;background:#FFF url(/img/base/placeholder.png) no-repeat center center;background-size:80%}
+	.tui .tui-img img{width:100%;height: 100%;object-fit: contain;}
 	.tui .tui-img::after{content: "";opacity: 0;width: 100%;height: 100%; position: absolute; left: 0;top: 0;box-sizing: border-box;border: 1px solid #FF5B00; transition: all 0.2s;}
 	.tui .tui-img:hover::after{opacity: 1;}
 	/*.tui .tui-img img:hover{opacity:0.8;border:solid 1px #FF5B00} */

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

@@ -13,14 +13,14 @@
         <div class="search auto-input" id="topSearch">
             <div class="search-info">
                 <label>
-                    <input class="keyword" type="text" placeholder="请输入关键词" autocomplete="off" />
+                    <input class="keyword label-keyword" type="search" placeholder="搜索文章" autocomplete="off" />
                 </label>
                 <a class="searchBtn icon" href="javascript:void(0);">搜索</a>
             </div>
             <div class="keywords">
-                <div th:each="label,count : ${labels}">
+                <div th:each="label,count : ${labels}" th:if="${count.index} le 7">
                     <a th:href="'/info/label-' + ${label.id} + '-1.html'" th:text="${label.name}"></a>
-                    <span th:if="${!count.last}"> / </span>
+                    <span th:if="${count.index} le 6"> / </span>
                 </div>
             </div>
         </div>
@@ -40,7 +40,7 @@
         </div>
         <div class="search-info">
             <label>
-                <input class="keyword" type="text" placeholder="请输入关键词" autocomplete="off" v-model="searchKeys" />
+                <input class="keyword" type="search" placeholder="搜索文章" autocomplete="off" v-model="searchKeys" />
             </label>
             <a class="searchBtn icon" href="javascript:void(0);" @click="handlerH5Search">搜索</a>
         </div>
@@ -76,11 +76,11 @@
                 <div class="type-item" th:each="type,status: *{articleType}" th:typeId="${type.id}" th:class="${typeId==type.id}?'type-item current':'type-item'">
                     <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">
+                    <div class="nav-menu" th:if="${type.linkList}">
                         <a th:each="link: *{type.linkList}" th:href="'/info/center-'+${link.id}+'-1.html'" th:text="${link.name}"></a>
                     </div>
                 </div>
-                <a class="typeBtn" href="/document/beauty-archive.html" target="_blank">美业资料</a>
+<!--                <a class="typeBtn" href="/document/beauty-archive.html" target="_blank">美业资料</a>-->
                 <!-- <a class="typeBtn" href="/encyclopedia/product.html" target="_blank">采美百科</a> -->
             </div>
         </div>

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

@@ -62,13 +62,14 @@
                     <a th:href="'/info/detail-'+${item.id}+'-1.html'" target="_blank">
                         <p class="title" th:utext="${item.title}"></p>
                     </a>
+                    <p class="introduction" th:utext="${item.intro}"></p>
                     <p class="xinxi">
                         <em v-if="!isPC" class="pv icon mIcon" th:utext="${item.pv}"></em>
                         <em class="write icon mIcon" th:text="${item.publisher}"></em>
                         <em th:if="${item.publishDate}" class="time icon mIcon" th:text="${item.publishDate}"></em>
+                        <em class="pv icon mIcon" th:text="${item.pv}"></em>
                     </p>
-                    <p class="introduction" th:utext="${item.intro}"></p>
-                    <p v-if="isPC" class="P_img"><em class="pv icon mIcon" th:text="${item.pv}"></em></p>
+<!--                    <p v-if="isPC" class="P_img"></p>-->
                 </div>
             </div>
             <div id="scrollTop">

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

@@ -151,15 +151,19 @@
                             <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">
+                            <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">
                             <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">
-                                <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>
+                            <em v-if="isPC" class="pv icon mIcon" v-text="item.pv"></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?'，':''}}<a v-if="item.labels[i]" v-text="item.labels[i]" :href="'/info/label-' +id+ '-1.html'"></a></template>-->
+<!--                            </em>-->
                         </p>
-                        <p v-if="isPC" 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 class="handleMore" v-if="!noMore">

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

@@ -43,7 +43,7 @@
                                         </div>
                                         <div class="group">
                                             <div class="label-icon-2 icon"></div>
-                                            <div class="label-text">采美网</div>
+                                            <div class="label-text">{{ item.publisher }}</div>
                                         </div>
                                         <div class="group">
                                             <div class="label-icon-3 icon"></div>