小程序新请假界面

朱雀 2021-09-17 04:12 430阅读 0赞

![标题图][1240]

> 小程序新请假界面

效果:

![效果图][1240 1]

.wxml:

.wxss:

Page {
      background-color: #f1f1f1;
    }
    
    .head_item {
      width: 374rpx;
      text-align: center;
      font-size: 34rpx;
      color: #999;
      letter-spacing: 0;
    }
    
    .head_itemActive {
      color: #30d1ff;
    }
    
    .ring {
      width: 2rpx;
      height: 100%;
      background-color: rgba(204, 204, 204, 1);
    }
    
    .head {
      width: 100%;
      height: 100rpx;
      background-color: rgba(255, 255, 255, 1);
      border-bottom: 1rpx solid rgba(204, 204, 204, 1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: fixed;
      top: 0;
      z-index: 10;
    }
    
    .main {
      position: absolute;
      width: 100%;
      height: 100%;
      display: block;
      box-sizing: border-box;
      padding-top: 100rpx;
      top: 0;
    }
    
    .show {
      display: block;
      text-align: center;
    }
    
    .hidden {
      display: none;
      text-align: center;
    }
    
    /* 新请假 */
    
    .uploader {
      position: relative;
      width: 168rpx;
      height: 168rpx;
      background: #f0f0f2;
      border-radius: 10rpx;
    }
    
    .uploaderpic {
      width: 168rpx;
      height: 168rpx;
      margin-top: 10rpx;
      border-radius: 10rpx;
    }
    
    .add-icon {
      position: absolute;
      font-size: 105rpx;
      top: -23rpx;
      left: 50rpx;
      color: #a3a3a3;
    }
    
    .title {
      position: absolute;
      bottom: 30rpx;
      left: 32rpx;
      color: #a3a3a3;
      font-size: 28rpx;
    }
    
    .upload-img {
      width: 95%;
      height: 95%;
      border-radius: 10rpx;
    }
    
    .bg {
      margin: 40rpx;
      background-color: #fff;
      border: 2rpx dotted #ccc;
      border-radius: 15rpx;
      height: 100%;
    }
    
    .item {
      display: flex;
      flex-direction: row;
      font-size: 30rpx;
      margin: 25rpx;
      align-items: center;
    }
    
    .btn {
      background-color: #79caff;
      color: #fff;
      width: 120rpx;
      font-size: 30rpx;
      margin-top: 30rpx;
    }
    
    .bk {
      border-radius: 10rpx;
      border: 2rpx solid #ccc;
      padding: 10rpx;
      width: 65%;
    }

.js

.json

{
      "navigationBarTitleText": "请假"
    }

> 往后余生，唯独有你  
> 简书作者：达叔小生  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[1240]: /images/20210724/a858b98babcd4568b0905e115c10a9d7.png
[1240 1]: /images/20210724/7d78fae1eb504b839331a2437d52ee28.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1