新增代码高亮,完善文章浏览体验

public/static/css/index.articles.css

@@ -1,62 +1,60 @@
-
-.main-container{
+.main-container {
   margin-top: 15px;
 }
 
-.nav-left-container{
+.nav-left-container {
   margin-top: 15px;
 }
 
-.nav-left-list{
+.nav-left-list {
   text-align: center;
 }
 
-.nav-left-list a{
+.nav-left-list a {
   display: block;
   padding: 10px 15px;
   border-radius: 5px;
   margin: 5px 20px;
 }
 
-.nav-left-list a:hover,.nav-left-list a.current{
+.nav-left-list a:hover, .nav-left-list a.current {
   background-color: #6699CC;
   color: #fff;
 }
 
-.logo{
+.logo {
   text-align: center;
 }
 
-.logo img{
+.logo img {
   max-width: 60%;
 }
 
-.session{
+.session {
   margin-top: 15px;
   background-color: #99CCFF;
   padding: 15px;
 }
 
-.session.border{
+.session.border {
   border-top: 2px solid #6699CC;
 }
 
-.session .header{
+.session .header {
   font-size: 18px;
   font-weight: 600;
   color: #036;
 }
 
-.search-container{
+.search-container {
   display: flex;
 }
 
-
-.layui-btn{
+.layui-btn {
   background-color: #6699CC;
 }
 
-.nav-more-list a{
+.nav-more-list a {
   display: inline-block;
   white-space: nowrap;
   color: #036;
@@ -64,34 +62,32 @@
   margin-top: 15px;
 }
 
-.session .info p{
+.session .info p {
   margin: 5px 0;
 }
 
-#banner img{
+#banner img {
   width: 100%;
 }
 
-.tab-list{
+.tab-list {
   border-bottom: 1px solid #ddd;
   margin-top: 15px;
   font-size: 16px;
-  
 }
 
-.tab-list a{
+.tab-list a {
   margin-right: 15px;
   border-bottom: 2px solid transparent;
   padding-bottom: 10px;
   display: inline-block;
 }
 
-.tab-list a.current{
+.tab-list a.current {
   border-color: #6699CC;
 }
 
-
-.post-item,.plus-post-item{
+.post-item, .plus-post-item {
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -100,7 +96,11 @@
   border-bottom: 1px solid #ddd;
 }
 
-.post-item .poster,.plus-post-item .poster{
+a.post-item>div:nth-child(2) {
+  width: calc(100% - 160px);
+}
+
+.post-item .poster, .plus-post-item .poster {
   width: 160px;
   height: 100px;
   background-size: cover;
@@ -109,45 +109,62 @@
   margin-right: 15px;
 }
 
-.plus-post-item .poster{
+.plus-post-item .poster {
   width: 60px;
   height: 60px;
 }
 
-.plus-post-item .title{
+.plus-post-item .title {
   font-size: 14px;
 }
 
-.post-item .info .title{
-  font-size: 22px;
-  font-weight: 600;
+.post-item .info .title {
+  font-size: 20px;
+  line-height: 1.3;
+  margin-bottom: 4px;
+  font-weight: 700;
+  max-height: 52px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.post-item .info .plus-info{
+.post-item .info .plus-info {
   margin-top: 5px;
 }
 
-.nodata{
-  
+.nodata {
   margin: 60px auto;
   display: block;
   width: 40%;
 }
 
-.content-container .title{
-  font-size: 22px;
-  font-weight: 600;
-  
+.content-container .title {
+  font-size: 34px;
+  font-weight: 700;
+  line-height: 44px;
+  color: #222;
 }
 
+.content-container .info {
+  margin-top: 12px;
+  font-size: 13px;
+  color: #777;
+}
 
-
-@media screen and (max-width: 768px){
-  .nav-left-list{
+@media screen and (max-width: 768px) {
+  .nav-left-list {
     text-align: left;
   }
-  .nav-left-list a{
+  .nav-left-list a {
     display: inline-block;
     margin: 5px;
   }
+}
+
+@media screen and (min-width:1200px) {
+  .layui-container {
+    width: 1280px;
+  }
 }