新闻样式调整

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/assets/css/index.css

@@ -1528,6 +1528,31 @@ td.inquiry_btn:hover a{
     font-size: 14px;
     text-align: left;
 }
+.x_content_head_text p.x_first.x_gray_overflow{
+    width: 180px;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+.x_content_head_text p.x_gray_text a{
+    font-size: 14px;
+    color: #999;
+}
+.x_content_head_text p.x_gray_text:hover a{
+    color: #e41f2b;
+}
+.x_content_head_text p.x_gray_text.x_gray_overflow{
+    width: 180px;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 9;
+    overflow: hidden;
+}
 a.x_gray_text{
     float: right;
 }
@@ -1549,6 +1574,36 @@ a.x_gray_text{
 .x_gray_text a.detail:hover {
     color: #e41f2b;
 }
+.x_content_footer_list .x_gray_overflow{
+    width: 270px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.x_content_footer_list p.x_gray_overflow:hover{
+    color: #999;
+}
+.x_content_footer_list a.x_gray_overflow{
+    display: inline-block;
+}
+.x_content_footer_list dd:hover a.x_gray_overflow{
+    font-weight: bold;
+    color: #e41f2b;
+}
+.x_hot{
+    overflow: hidden;
+}
+.x_hot .x_left{
+    position: relative;
+    float: left;
+    max-width: 272px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.x_hot .x_gray_text{
+    float: right;
+}
 /*第一列下部*/
 .x_content_footer {
     margin-top: 20px;
@@ -1614,14 +1669,14 @@ a.x_gray_text{
     font-size: 14px;
     margin-bottom: 10px;
 }
-.x_item_list li:before {
-    display: inline-block;
-    content: '';
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: #eee;
-}
+/*.x_item_list li:before {*/
+    /*display: inline-block;*/
+    /*content: '';*/
+    /*width: 6px;*/
+    /*height: 6px;*/
+    /*border-radius: 50%;*/
+    /*background: #eee;*/
+/*}*/
 .x_item_list li a {
     display: inline-block;
     margin-left: 6px;
@@ -1630,7 +1685,7 @@ a.x_gray_text{
 .x_item_list li a:before{
     content: "";
     position: absolute;
-    bottom: -2px;
+    bottom: 0px;
     left: 50%;
     height: 1px;
     border-bottom: 2px solid #e41f2b;
@@ -1736,6 +1791,26 @@ a.x_gray_text{
     font-size: 14px;
     color: #000;
 }
+.hot_info_list dd a.x_gray_overflow{
+    width: 285px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+}
+.hot_info_list dd:hover a.x_gray_overflow{
+    font-weight: bold;
+    color: #fff;
+}
+.hot_info_list dd p.x_gray_overflow{
+    width: 285px;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
 .hot_info_list dd p {
     margin-top: 10px;
 }

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/index.html

@@ -857,9 +857,9 @@
 							<#list page.getList() as content>
 								<img src="${content.thumbnail!}" alt="${content.title!}">
 								<div class="x_content_head_text">
-									<p>${content.title!}</p>
-									<p class="x_gray_text">
-										${content.remarks!}
+									<p class="x_first x_gray_overflow">${content.title!}</p>
+									<p class="x_gray_text x_gray_overflow">
+										<a href="${content.flag!}">${content.remarks!}</a>
 										<a href="${content.flag!}" class="detail">[详情]</a>
 									</p>
 								</div>
@@ -885,8 +885,8 @@
 									<p class="x_gray_text">/${item.month}</p>
 									</dt>
 									<dd>
-										<a href="${item.url}">${item.title}</a>
-										<p class="x_gray_text">
+										<a href="${item.url}" class="x_gray_overflow">${item.title}</a>
+										<p class="x_gray_text x_gray_overflow">
 											${item.description}...
 										</p>
 									</dd>
@@ -936,8 +936,8 @@
 							</#assign>
 							<#assign json=text?eval />
 							<#list json.data.list as item>
-								<li>
-									<a href="${item.url}">${item.title}</a>
+								<li class="x_hot">
+									<div class="x_left"><a href="${item.url}">${item.title}</a></div>
 									<span class="x_gray_text">${item.month}-${item.day}</span>
 								</li>
 							</#list>
@@ -971,8 +971,8 @@
                                     <span class="x_gray_text">${item.year}.${item.month}</span>
                                     </dt>
                                     <dd>
-                                        <a href="${item.url}">${item.title}</a>
-                                        <p class="x_gray_text">
+                                        <a href="${item.url}" class="x_gray_overflow">${item.title}</a>
+                                        <p class="x_gray_text x_gray_overflow">
                                             ${item.description}
                                         </p>
                                     </dd>
@@ -994,8 +994,8 @@
                                     <span class="x_gray_text">${item.year}.${item.month}</span>
                                     </dt>
                                     <dd>
-                                        <a href="${item.url}">${item.title}</a>
-                                        <p class="x_gray_text">
+                                        <a class="x_gray_overflow" href="${item.url}">${item.title}</a>
+                                        <p class="x_gray_text x_gray_overflow">
                                             ${item.description}
                                         </p>
                                     </dd>