| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 | 
							-   
 
-  page {
 
-    background: #f5f5f5;
 
-    height: 100%;
 
-  }
 
-  .container{
 
-    height: 100%;
 
-  } 
 
-   
 
-   /*单行文本溢出省略号*/
 
-   .one-t {
 
-     overflow: hidden;
 
-     white-space: nowrap;
 
-     text-overflow: ellipsis;
 
-     transition: all linear 0.2s;
 
-   }
 
-   
 
-   /*多行文本溢出省略号*/
 
-   .more-t {
 
-     overflow: hidden;
 
-     text-overflow: ellipsis;
 
-     display: -webkit-box;
 
-     -webkit-line-clamp: 2;
 
-     -webkit-box-orient: vertical;
 
-     transition: all linear 0.2s;
 
-   }
 
-   
 
-   /* ==================
 
-             flex布局(colorui里面也有相关基础样式)
 
-    ==================== */
 
-   /* x水平排列*/
 
-   .x-f {
 
-     display: flex;
 
-     align-items: center;
 
-   }
 
-   
 
-   /*x两端且水平居中*/
 
-   .x-bc {
 
-     display: flex;
 
-     justify-content: space-between;
 
-     align-items: center;
 
-   }
 
-   
 
-   /*x平分且水平居中*/
 
-   .x-ac {
 
-     display: flex;
 
-     justify-content: space-around;
 
-     align-items: center;
 
-   }
 
-   
 
-   /*x水平靠上对齐*/
 
-   .x-start {
 
-     display: flex;
 
-     align-items: flex-start;
 
-   }
 
-   
 
-   /*x水平靠下对齐*/
 
-   .x-end {
 
-     display: flex;
 
-     align-items: flex-end;
 
-   }
 
-   
 
-   /*上下左右居中*/
 
-   .x-c {
 
-     display: flex;
 
-     justify-content: center;
 
-     align-items: center;
 
-   }
 
-   
 
-   /*y竖直靠左*/
 
-   .y-start {
 
-     display: flex;
 
-     flex-direction: column;
 
-     align-items: flex-start;
 
-   }
 
-   
 
-   /*y竖直靠右*/
 
-   .y-end {
 
-     display: flex;
 
-     flex-direction: column;
 
-     align-items: flex-end;
 
-   }
 
-   
 
-   /*y竖直居中*/
 
-   .y-f {
 
-     display: flex;
 
-     flex-direction: column;
 
-     align-items: center;
 
-   }
 
-   
 
-   // y竖直两端
 
-   .y-b {
 
-     display: flex;
 
-     flex-direction: column;
 
-     justify-content: space-between;
 
-   }
 
-   
 
-   /*y竖直两端居中*/
 
-   .y-bc {
 
-     display: flex;
 
-     flex-direction: column;
 
-     align-items: center;
 
-     justify-content: space-between;
 
-   }
 
-  /* layout */
 
-  .acea-row {
 
-    display: flex;
 
-    flex-wrap: wrap;
 
-    /* 辅助类 */
 
-  }
 
-  .acea-row.row-middle {
 
-    align-items: center;
 
-  }
 
-  .acea-row.row-top {
 
-    align-items: flex-start;
 
-  }
 
-  .acea-row.row-bottom {
 
-    align-items: flex-end;
 
-  }
 
-  .acea-row.row-center {
 
-    justify-content: center;
 
-  }
 
-  .acea-row.row-right {
 
-    justify-content: flex-end;
 
-  }
 
-  .acea-row.row-left {
 
-    justify-content: flex-start;
 
-  }
 
-  .acea-row.row-between {
 
-    justify-content: space-between;
 
-  }
 
-  .acea-row.row-around {
 
-    justify-content: space-around;
 
-  }
 
-  .acea-row.row-column-around {
 
-    flex-direction: column;
 
-    justify-content: space-around;
 
-  }
 
-  .acea-row.row-column {
 
-    flex-direction: column;
 
-  }
 
-  .acea-row.row-column-between {
 
-    flex-direction: column;
 
-    justify-content: space-between;
 
-  }
 
-  /* 上下左右垂直居中 */
 
-  .acea-row.row-center-wrapper {
 
-    align-items: center;
 
-    justify-content: center;
 
-  }
 
-  /* 上下两边居中对齐 */
 
-  .acea-row.row-between-wrapper {
 
-    align-items: center;
 
-    justify-content: space-between;
 
-  }
 
-   
 
 
  |