文章组件优化

src/components/content/information/articleItem.vue

@@ -149,7 +149,6 @@ img {
   padding-bottom: 0.84em;
   position: relative;
   overflow: hidden;
-  width: 100%;
   box-sizing: border-box;
   .img {
     width: 100%;
@@ -235,7 +234,7 @@ img {
 }
 // 大图模式
 .articleItem1 {
-  margin-top: 10px;
+  margin: 10px 10px 0;
   .img {
     height: 140px;
   }
@@ -260,9 +259,11 @@ img {
 .articleItem3 {
   display: inline-block;
   margin-top: 0;
-  width: 49%;
+  width: calc(50% - 15px);
+  box-sizing: border-box;
   vertical-align: top;
   white-space: normal;
+  margin-left: 10px;
   .img {
     height: 140px;
   }
@@ -281,7 +282,7 @@ img {
   }
 }
 .articleItem3:nth-child(2n) {
-  margin-left: 2%;
+  margin-left: 10px;
 }
 .articleItem3:not(:nth-child(-1n + 2)) {
   margin-top: 10px;
@@ -293,6 +294,7 @@ img {
   width: 42%;
   vertical-align: top;
   white-space: normal;
+  margin-left: 10px;
   .img {
     height: 140px;
   }
@@ -312,6 +314,7 @@ img {
 }
 .articleItem4:not(:first-of-type) {
   margin-left: 2%;
+  margin-right: 10px;
 }
 // 一大多小
 .articleItem5 {

src/components/content/information/index.vue

@@ -21,15 +21,6 @@
       <div
         class="articleList clearfix"
         :class="[cartStyle==2&&listStyle==5?'my-hairline--all':'',listStyle==4?'articleList-wibkit':'',listStyle==4?'articleListNowrap':'']"
-        :style="
-        {'box-shadow':cartStyle==1&&listStyle==5?'0px 0px 5px 0px #ccc':'',
-        '--border_color':'#D8D8D8',
-        'border-radius':cartRadius==1&&listStyle==5?'8px':'',
-        '--border_radius':cartRadius==1&&listStyle==5?'8px':'',
-        'background':listStyle==5?bgColor:'',
-        'overflow':listStyle==5?'hidden':'',
-        'position':listStyle==2?'relative':''}
-      "
       >
         <div v-if="listStyle==4">
           <div class="prev-btn" v-if="loading">
@@ -39,7 +30,15 @@
             <i class="ant-fanhui-line"></i>
           </div>
         </div>
-        <div v-if="listStyle!=2">
+        <div v-if="listStyle!=2" :class="['articleList'+listStyle]" :style="
+          {'box-shadow':cartStyle==1&&listStyle==5?'0px 0px 5px 0px #ccc':'',
+          '--border_color':'#D8D8D8',
+          'border-radius':cartRadius==1&&listStyle==5?'8px':'',
+          '--border_radius':cartRadius==1&&listStyle==5?'8px':'',
+          'background':listStyle==5?bgColor:'',
+          'overflow':listStyle==5?'hidden':'',
+          'position':listStyle==2?'relative':''}
+        ">
           <articleItem
             v-for="(item,index) in articityList"
             :key="index"
@@ -68,6 +67,7 @@
                   ></articleItem>
                 </div>
               </div>
+              <div class="center"></div>
               <div class="right">
                 <div v-for="(item,index) in articityList" :key="index">
                   <articleItem
@@ -519,7 +519,6 @@ export default {
 
 <style lang="scss" scoped>
 .information {
-  padding: 10px;
   font-size: 12px;
 }
 
@@ -580,6 +579,7 @@ export default {
   .articleList {
     width: 100%;
     margin-top: 10px;
+    box-sizing: border-box;
     .prev-btn,
     .next-btn {
       position: absolute;
@@ -614,13 +614,31 @@ export default {
   .articleList-wibkit::-webkit-scrollbar {
     display: none;
   }
+  // 一行两个
+  .articleList3{
+    display: flex;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+  }
+  // 一大多小、详细列表
+  .articleList5,.articleList6{
+    margin: 0 10px;
+  }
   // 瀑布流
   .waterfallFlow{
     display: flex;
-    justify-content: space-between;
     .left,.right{
       width: 49%;
     }
+    .center{
+      width: 10px;
+    }
+    .left{
+      padding-left: 10px;
+    }
+    .right{
+      padding-right: 10px;
+    }
   }
 }
 </style>