flex 常用写法
uni-app 2019-04-21 21:27:19

 1、 原生native页面中：

WX20190421-213303@2x.png

html结构：

XML/HTML Code复制内容到剪贴板
  1. <div>  
  2.     <div class="uni-list-item" @click="onClick">  
  3.         <div class="uni-list-item__container">  
  4.               
  5.             <text class="zg-title">整改部位：河桥拆复建</text>  
  6.               
  7.             <div class="zg-wrapper">  
  8.                 <text class="zg-desc">涟水xx建筑劳务分包有限公司，经检查，xx国际机场xx航站楼改扩建工程北指廊S3-1区2层顶板钢筋工程施工存在如下质量问题： 1.部分次梁底部排筋未绑扎； 2.部分次梁主筋弯曲严重； 3.部分次梁箍筋加密区箍筋过少； 4.部分拉钩弯钩绑扎位置不符合要求，且与腰筋不垂直； 5.部分次梁与主梁节点底部排筋断开，锚固长度不足37d； 6.部分结构柱“7型”钢筋未与劲性柱焊接。 现要求，你公司立即停工整改，经验收通过后书面报请项目部签字同意后方可进行下一步工序施工。</text>  
  9.             </div>  
  10.               
  11.             <div class="zg-wrapper">  
  12.                 <div class="zg-info">  
  13.                     <text class="zg-fqr">发起人：xx1</text>  
  14.                     <text class="zg-zrw">责任人：xx2</text>  
  15.                 </div>  
  16.             </div>  
  17.               
  18.             <div class="zg-wrapper">  
  19.                 <text class="zg-date">发布日期：2018-12-23</text>  
  20.             </div>  
  21.   
  22.               
  23.         </div>  
  24.     </div>  
  25. </div>  

 

style 样式：

XML/HTML Code复制内容到剪贴板
  1. <style>  
  2.     .uni-list-item {  
  3.         width: 750px;  
  4.         padding: 0 30px;  
  5.         background-color: #eeedf2;  
  6.     }  
  7.     .uni-list-item__container {  
  8.         flex: 1;  
  9.         flex-direction: column;  
  10.         padding: 20px;  
  11.         border-radius: 15upx;  
  12.         margin-top: 32upx;  
  13.         background-color: #FFFFFF;  
  14.     }  
  15.       
  16.     /* 标题 */  
  17.     .zg-title{  
  18.         flex: 1;  
  19.         lines: 3;  
  20.         text-overflow: ellipsis;  
  21.         font-size: 32px;  
  22.         color: #555555;  
  23.         padding-bottom: 6px;  
  24.         margin-bottom: 3px;  
  25.         border-bottom-width: 1px;  
  26.         border-style: solid;  
  27.         border-color: #EEEEEE;  
  28.     }  
  29.       
  30.     .zg-wrapper {  
  31.         margin-top: 20px;  
  32.         flex-direction: row;  
  33.         justify-content: space-between;  
  34.     }  
  35.     .zg-info {  
  36.         flex-direction: row;  
  37.     }  
  38.       
  39.     .zg-desc{  
  40.         flex: 1;  
  41.         lines: 3;  
  42.         text-overflow: ellipsis;  
  43.         font-size: 26upx;  
  44.         color: #555555;  
  45.         margin-bottom: 8px;  
  46.     }  
  47.     /* 整改发起人 / 责任人 */  
  48.     .zg-info{  
  49.         flex-direction: row;  
  50.         justify-content: space-between;  
  51.     }  
  52.     .zg-fqr{  
  53.         font-size: 26upx;  
  54.         width: 300upx;  
  55.     }  
  56.     .zg-zrw{  
  57.         font-size: 26upx;  
  58.     }  
  59.       
  60.     /* 整改时间 */  
  61.     .zg-date{  
  62.         color: #999999;  
  63.         font-size: 24px;  
  64.     }  
  65. </style>  

 

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/uniapp/433.html

上一篇 tabbar-native.nvue原生加uni.request闪退
下一篇 uni-app底部凸起实现
相关的文章
Powered by yoyo苏ICP备15045725号