欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序填写提交包裹预报页面设计制作开发教程(2)

    2018-08-03 09:40 来源/作者:懒人模板 分类:小程序教程  « »
     
    二、wxss样式文件代码如下:
    /* pages/packagePredictTrans/packagePredictTrans.wxss */
    .top{
      display:flex;
    padding:10px 20px;
    justify-content:space-between;
    background-color: #ffffff;
    
    }
    .left{
    width: 33%;
    border-right:1px solid transparent; 
    border-image:linear-gradient( #ffffff, #d3d3d3,#ffffff) 2;
    
    }
    .center{
    width: 33%;
    border-right:1px solid transparent; 
    border-image:linear-gradient( #ffffff, #d3d3d3,#ffffff) 2;
    
    }
    .right{
    width: 33%;
    
    }
    .special{
    border-radius:40px;
    line-height:26px;
    font-size:13px;
    
    
    }
    .common{
      border: 1px solid #f9364f;
    line-height:26px;
    border-radius:40px;
    font-size:13px;
    
    
    
    }
    /*middle  */
    
    .middle-form{
    background-color:#ffffff;
    padding:15px;
    margin-top:5px;
    
    
    }
    .top-wrap{
    background-color:#999999;
    display:flex;
    padding:10px 10px;
    font-weight:bold;
    border-radius:4px;
    
    
    }
    .img{
    width:18px;
    height:18px;
    
    
    }
    .word-tip{
    color:#ffffff;
    margin-left:5px;
    font-weight: bold;
    
    }
    .form{
    margin-top:15px;
    
    }
    .row{
    
    display:flex;
    justify-content:space-between;
    
    }
    .red{
    color:red;
    position:relative;
    top:4px;
    
    
    }
    .fleft{
    
    color:#848484;
    width: 25%;
    }
    .fright{
    width: 75%;
    
    }
    .arrow{
    
    width:20px;
    height:10px;
    
    }
    .row-3{
    display:flex;
    align-items:center;
    
    
    
    
    }
    .fleft-3{
    color:#848484;
    display:inline-block;
    width:30%;
    
    
    }
    .input{
    display:inline-block;
    height:15px;
    line-height:15px;
    margin-left:5%;
    
    width:50%;
    
    
    }
    .table{
      background-color:#eeeeee;
      padding:10px;
    
    }
    .tr{
      width:100%;
    display:flex;
    justify-content:space-between;
    text-align:center;
    margin-bottom:5px;
    align-items:center;
    
    }
    .good-name{
      width:30%;
      
    }
    .count{
      width:15%;
    
    }
    .value{
      width:25%;
    
    }
    .action{
      width:20%;
    
    }
    .tinput{
      background-color: #ffffff;
      border: 1px  solid #eeeeee;
    }
    .btn{
      line-height:22px;
    color:#0d9fe7;
    background-color:#bebebe;
    border-radius:0;
    font-size: 13px;
    }
    .add-good{
      margin-top:5px;
      display:flex;
    align-items:center;
    justify-content:flex-start;
    
    }
    .add-btn{
    padding:5px;
    width:70px;
    font-size:15px;
    line-height:12px;
    background-color:#f9364f;
    color:#ffffff;
    margin:0 5px 0 0;
    
    }
    .add-tip{
    
    font-size:12px;
    color:#f9364f;
    
    }
    .remark{
    display:flex;
    margin-top:15px;
    
    }
    .re-left{
    width:12%;
    color:#6a6a6a;
    position: relative;
    top: 10px;
    
    
    }
    .re-right{
    width:80%;
    
    }
    .textarea{
    height: 100px;
    border: 1px solid #6a6a6a;
    padding: 10px;
    width: 100%;
    font-size: 12px;
    }
    .submit{
      margin-top:20px;
    padding:0 15px;
    margin-bottom:40px;
    
    }

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议