yky-wx-components1/src/components/index.less

Taro实现微信小程序红包雨效果

// @base-url: "http://121.196.213.113:8080/wx/assets/images/";
// @import '../src/assets/style/dinMedium/stylesheet.less';
// @import '../src/assets/style/pingfang/stylesheet.less';
// @import '../src/assets/style/Farrington7B_Qiqi/stylesheet.less';

@base-url: "http://121.196.213.113:8080/wx/assets/images/";
//  page{
//   -webkit-overflow-scrolling:touch;
//  }
/* tabs标签加载更多 */
.dragUpdatePage {
    position: relative;
    overflow: hidden;
  }
  
  .downDragBox {
    width: 100%;
    top: 0px;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    position: absolute;
  }
  .tab-container {
    height: 100vh;
    // overflow: scroll;
    position: absolute;
  }
  .upDragBox {
    height: 30vh;
  }
  // 公共样式
  .clearfix:after{
    display: inline-block;
    content: '';
    clear: both;
  }
  // nav-bar 白底
  .nav-box-white{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    .status {
      background: #fff;
    }
    .navbar{
      position: relative;
      background: #fff;
      .homeIcon{    
        width: 40rpx;    
        height: 40rpx;    
        position: absolute;    
        transform: translateY(-50%);    
        top: 50%;    
        left: 14%;
        display: flex;
      }
      .back-icon{
        position: absolute;    
        transform: translateY(-50%);    
        top: 50%;    
        width: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .nav-title{
        position: absolute;
        transform: translate(-50%, -50%);    
        left: 50%;    
        top: 50%;
        font-weight: 500;
        color: #333;
      }
    }
  }
  // nav-bar 蓝底
  .nav-box-blue{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    .status {
      background: #407CE9;
    }
    .navbar{
      position: relative;
      background: #407CE9;
      .homeIcon{    
        width: 40rpx;    
        height: 40rpx;    
        position: absolute;    
        transform: translateY(-50%);    
        top: 50%;    
        left: 14%;
        display: flex;
      }
      .back-icon{
        position: absolute;    
        transform: translateY(-50%);    
        top: 50%;    
        width: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .nav-title{
        position: absolute;
        transform: translate(-50%, -50%);    
        left: 50%;    
        top: 50%;
        font-weight: 500;
        color: #fff;
      }
    }
  }
  // 详情页头部卡片蓝色渐变背景
  .bg{
    background:linear-gradient(180deg,rgba(64,124,233,1) 0%,rgba(118,160,237,1) 37%,rgba(246,246,246,1) 57%);
  }
  //详情页顶部显示合同编号
  .contractNO{
    color: #fff;
    font-size: 28rpx;
    margin-left: 44rpx;
    padding: 30rpx 0;
  }
  // 详情页头部卡片
  .details-header{
    width:100%;
    border: none;
    .at-card{
      border: none;
    }
    .at-card__header{
      display: none;
    }
    .at-card__content{
      padding: 20rpx 30rpx;
      .top-con{
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        .left{
          width: 80%;
          > view:nth-child(1){
            font-size:32rpx;
            color:#090909;
            margin-bottom:8rpx;
            
          }
          > view:nth-child(2){
            vertical-align: middle;
            font-size:20rpx;
            color:#7E7E7E;
            >image{
              height: 24rpx;
              width: 24rpx;
              vertical-align: middle;
              margin-right: 14rpx;
            }
          }
        }
        .right{
          width: 80rpx;
          height: 80rpx;
        }
      }
      .bottom-con{
        overflow: hidden;
        margin-top:30rpx;
        display: flex;
        justify-content: space-between;
        border-top: 2rpx solid rgba(216,216,216,0.25);;
        padding-top: 30rpx;
        .left{
          color: #333;
          font-family:PingFangSC-Medium,PingFang SC;
        }
        .right{
          font-family:PingFangSC-Regular,PingFang SC;
          color: #2F79F1;
          .at-icon {
            margin-top: -6rpx;
          }
        }
      }
    }
  }
  // 详情页通栏tab且可固定顶部
  .sec-tab-wrap{
    z-index: 2;
    position: sticky;
    margin-top: 10rpx;
    background: #f7f7f7;
    // margin-right: 30rpx;
    transition: all 0.5s;
    &.active{
      background:#fff;
      transition: all 0.5s;
    }
    .marTB-10{
      margin-bottom: -10rpx;
      transition: all 0.5s;
      &.active{
        background:#FFFFFF;
        padding-bottom: 8rpx;
        border-bottom: 1rpx solid #e5e5e5;
        transition: all 0.5s;
      }
    }
    .at-tabs__header{
      margin-left: 30rpx;
      background-color:transparent;
      font-size: 28rpx;
      color: #666;
      padding-right:34rpx;
    }
    .at-tabs__item.at-tabs__item--active{
      font-weight: 500;
    }
    .at-tabs__underline{
      background-color: transparent;
    }
    .at-tabs__item-underline{
      width: 32rpx;
      height: 8rpx;
      // margin-top: 20rpx;
      border-radius: 8rpx;
      left: 40%;
      background:linear-gradient(45deg,rgba(55,126,244,1) 0%,rgba(38,116,238,1) 100%);
      
    }
  }
  .sec-tab-wrap::after{
    position: absolute;
    right: 0;
    top: 8rpx;
    content: '';
    width: 28rpx;
    height: 80rpx;
    background: url("@{base-url}/approvel/trans.png")no-repeat center/cover;
  }
  //详情页基础信息卡片
  .basic-card{
    margin: 28rpx 30rpx;
    box-shadow:0rpx 2rpx 8rpx -1rpx rgba(0,0,0,0.06);
    border-radius:12rpx;
    border: none;
    .at-card__header{
      display: none;
    }
    .at-card__content{
      padding:30rpx 30rpx ;
      .at-article__h3{
        margin: 0;
        margin-bottom: 40rpx;
        font-weight:500;
        >text{
          width: 74%;
          text-align: right;
        }
      }
      .basic-con{
        display:block;
        transition:display 1s;
        .basic-list{
          display: flex;
          justify-content: space-between;
          margin-bottom: 20rpx;
          font-size: 28rpx;
          color: rgba(0, 0, 0, .9);
          >View:first-child{
            width: 35%;
            color: rgba(0, 0, 0, .6);
          }
          >View:last-child{
            width: 65%;
            text-align: right;
          }
          // >View:first-child{
          //   width: 40%;
          //   color: rgba(0, 0, 0, .6);
          // }
          // >View:last-child{
          //   width: 60%;
          //   text-align: right;
          // }
        }
        .huanhang{
          word-wrap: break-word;
        }
        &.additional{
          display:none;
          transition:display 1s;
        }
      }
      
    }
    .more{
      text-align: center;
      padding-top: 20rpx;
      border-top: 2rpx solid rgba(216,216,216,0.25);
      color: rgba(0,0,0,0.3);
      font-size: 24rpx;
    }
  }
  //详情页银行卡信息卡片
  .bank-card{
    margin: 30rpx;
    box-shadow:0rpx 2rpx 8rpx -1rpx rgba(0,0,0,0.06);
    border-radius:12rpx;
    border: none;
    overflow: hidden;
    .at-card__header{
      display: none;
    }
    .at-card__content{
      padding:30rpx 30rpx ;
      padding-right: 0;
      .at-article__h3{
        margin: 0;
        margin-bottom: 40rpx;
        font-weight:600;
      }
    }
    .test-h{
      height: 336rpx;
      .bank-add{
        width: 90%;
        height: 98%;
        border-radius: 12rpx;
        border: 2rpx dashed rgba(0,0,0,0.2);
        text-align: center;
        image{
          width: 72rpx;
          height: 72rpx;
          margin-top: 100rpx;
          border-radius: 50%;
          background: url("@{base-url}/lending/add-bankcard.png")no-repeat center/cover;
          margin-bottom: 8rpx;
        }
        .add-text{
          color: rgba(0,0,0,0.5);
          font-size: 28rpx;
          >text{
            font-size: 24rpx;
          }
        }
      }
      .bank-list{
        position: relative;
        width: 544rpx;
        height: 100%;
        background-image: url("@{base-url}/card-bg1.png");
        // background-image: url(../../../assets/images/card-bg1.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 112%;
        box-shadow:0px 4rpx 10rpx -2rpx rgba(113,67,33,0.15);
        border-radius: 12rpx;
        >View.bank-list-t1{
          display: flex;
          justify-content: space-around;
          padding: 28rpx 30rpx 0;
          >View:first-child{
            color: #090909;
            font-size: 28rpx;
            vertical-align: middle;
            flex-basis: 380rpx;
            >image{
              vertical-align: middle;
              margin-right: 16rpx;
            }
          }
          >View:last-child{
            color: #666;
            font-size: 24rpx;
          }
        }
        >View.bank-list-t2{
          padding-left: 30rpx;
          letter-spacing: 10rpx;
          margin-top: 38rpx;
          margin-bottom: 20rpx;
          color: #333333;
          font-size:26rpx;
          font-family:Farrington-7B-Qiqi-,Farrington-7B-Qiqi;
        }
        >View.bank-list-t3{
          margin-left: 30rpx;
          color: #A3A3A3;
          font-size: 24rpx;
          >View{
            color: #090909;
            margin-top: 4rpx;
          }
        }
        >View.bank-list-t4{
          position: absolute;
          bottom: 0;
          width: 100%;
          // margin-top: 34rpx;
          line-height: 72rpx;
          height: 72rpx;
          text-align: center;
          color: #5C2D12;
          vertical-align: middle;
          image{
            vertical-align: middle;
            margin-right: 8rpx;
            margin-top: -8rpx;
          }
        }
        .edit{
          position: absolute;
          bottom: 90rpx;
          right: 50rpx;
          border: 2rpx solid #407CE9;
          color: #407CE9;
          font-size: 26rpx;
          border-radius: 40rpx;
          padding: 6rpx 30rpx;
        }
      }
      .bank-list-notbg{
        // background-image: url(../../../assets/images/card-bg2.png);
        background-image:url("@{base-url}/card-bg2.png");
      }
    }
  }
  //详情页费用信息卡片
  .assure-message-card{
    margin: 30rpx;
    box-shadow:0rpx 2rpx 8rpx -1rpx rgba(0,0,0,0.06);
    border-radius:12rpx;
    border: none;
    overflow: hidden;
    .at-card__header{
      display: none;
    }
    .at-card__content{
      padding:30rpx 30rpx ;
      .at-article__h3{
        margin: 0;
        margin-bottom: 40rpx;
        font-weight:600;
      }
    }
    .assure-message-con{
      height: 154rpx;
      .assure-list{
        text-align: center;
        // background: #666;
        .assure-icon{
          position: relative;
          >View{
            position: absolute;
            top: 0;
            right: 0;
            color: #518DFA;
            font-size: 20rpx;
          }
        }
        .assure-text{
          margin-top: 28rpx;
        }
      }
    }
    .arrow{
      position: relative;
    }
    
    .arrow::after{
      display: inline-block;
      position: absolute;
      bottom: -30rpx;
      left: 50%;
      margin-left: -20rpx;
      content: "";  
      width: 0;
      height: 0;
      border-bottom: 16rpx solid #F7F7F7;
      border-top: 16rpx solid transparent;
      border-right: 16rpx solid transparent;
      border-left: 16rpx solid transparent; 
    
    }
    
  }
  //详情页担保信息卡片
  .cost-message-card{
    margin: 30rpx;
    box-shadow:0rpx 2rpx 8rpx -1rpx rgba(0,0,0,0.06);
    border-radius:12rpx;
    border: none;
    overflow: hidden;
    .at-card__header{
      display: none;
    }
    .at-card__content{
      padding:30rpx 30rpx ;
      padding-bottom: 0;
      .at-article__h3{
        margin: 0;
        margin-bottom: 40rpx;
        font-weight:600;
      }
    }
    .cost-message-top{
      height: 160rpx;
      .cost-list{
        text-align: center;
        opacity:0.6;
        // background: #666;
        .cost-icon{
          position: relative;
          >View{
            position: absolute;
            top: 0;
            right: 0;
            color: #518DFA;
            font-size: 20rpx;
          }
        }
        .cost-text{
          margin-top: 20rpx;
          color: #333;
          // opacity:0.65;
        
        }
        &.active{
          opacity: 1;
        }
      }
    }
    .cost-message-bottom{
      // max-height: 300rpx;
      font-family:PingFangSC-Regular,PingFang SC;
      .cost-list{
        // position: relative;
        height: 230rpx;
        overflow-x: scroll;
        background: #F7F7F7;
        border-radius:10rpx;
        // min-height: 240rpx;
        .basic-con{
          padding: 34rpx 30rpx 14rpx;
          .basic-list{
            display: flex;
            justify-content: space-between;
            margin-bottom: 20rpx;
            >View:first-child{
              width: 40%;
            }
            >View:last-child{
              width: 60%;
              text-align: right;
            }
          }
        }
      }
    }
  }
  //底部同意驳回BAR
  .tezr{
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    padding: 26rpx 30rpx 24rpx 30rpx;
    .at-tab-bar__item--active{
      color: #333;
    }
    >View{
      flex: none;
      padding: 0;
      height: 68rpx;
      width: 20%;
      text-align: center;
      line-height: 108rpx;
      font-size: 20rpx;
    }
    >View:nth-child(1){
  
      background-image: url('@{base-url}accessory.png');
      background-repeat: no-repeat;
      background-size: 30%;
      background-position: center -2rpx;
    }
    >View:nth-child(2){
   
      background-image: url('@{base-url}examine.png');
      background-repeat: no-repeat;
      background-size: 30%;
      background-position: center -2rpx;
    }
    >View:nth-child(3){
      width: 30%;
      background:#f5f5f5;
      border-radius:8rpx 0px 0px 8rpx;
      line-height: 68rpx;
      color: #2F79F1;
      border: 2rpx solid #e5e5e5;
      box-sizing: border-box;
    }
    >View:nth-child(3)::before{
      display: inline-block;
      content: '驳回';
      width: 120rpx;
      height: 68rpx;
      font-size: 32rpx ;
    }
    >View:nth-child(4){
      width: 30%;
      background:linear-gradient(225deg,rgba(170,196,252,1) 0%,rgba(68,133,249,1) 100%,rgba(68,133,249,1) 100%);
      border-radius:0px 8rpx 8rpx 0px;
      line-height: 68rpx;
      color: #fff;
      border: 2rpx solid #5f91e0;
      box-sizing: border-box;
    }
    >View:nth-child(4)::before{
      display: inline-block;
      content: '同意';
      width: 120rpx;
      height: 68rpx;
      font-size: 32rpx;
    }
    @media screen and (min-device-height: 812px) and (max-device-height: 896px) {
      padding-bottom: 64rpx;
    }
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
      padding-bottom: 64rpx;
    }
  }
  
  //审批进程弹窗
  .model-course{
    .at-float-layout__container {
      border-top-left-radius: 16rpx;
      border-top-right-radius: 16rpx;
    }
    .layout-body{
      padding: 0;
    }
    .approvelprocessBtn{
      width:100%;
      position:fixed;
      bottom:0;
      left:0;
    }
    .course-title{
      position: fixed;
      width: 100%;
      top: 0;
      background: #fff;
      z-index: 2;
      text-align: center;
      line-height: 104rpx;
      font-size: 32rpx;
      height: 104rpx;
      border-bottom: 2rpx solid #E8E8E8;
      border-top-left-radius: 10rpx;
      border-top-right-radius: 16rpx;
    }
    .course-con{
      max-height: 700rpx;
      padding: 120rpx 40rpx 20rpx;
      .course-list{
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;
        >View:first-child{
          // padding-left: 40rpx;
          width: 65%;
          .l1{
            // padding-left: 40rpx;
            display: flex;
            justify-content: flex-start;
            >View:first-child{
              font-size: 28rpx;
              vertical-align: middle;
            }
            >View:last-child{
              font-size: 22rpx;
              color: #666;
              margin-left: 20rpx;
              vertical-align: middle;
              line-height: 32rpx;
            }
          }
         .l2{
            padding-left: 32rpx;
            margin-left: 12rpx;
            min-height: 100rpx;
            // padding-bottom: 34rpx;
            margin-top: 16rpx;
            font-size: 24rpx;
            color: #666;
            border-left: 2px dotted #CDCDCD;
          }
        }
        >View:last-child{
          text-align: right;
          >View:first-child{
            color: #333;
            font-size: 30rpx;
          }
          >View:last-child{
            margin-top: 10rpx;
            color: #A9A9A9;
            font-size: 24rpx;
          }
        }
      }
      .course-list:last-child{
        > View:first-child{
          margin-bottom: 80rpx;
        }
         > View:first-child .l2{
           border-left: none;
         }
      }
    }
    .btn{
      position: fixed;
      width: 100%;
      bottom: 0;
      z-index: 2;
    }
  }
  //同意驳回弹窗
  .model-idea{
    .at-float-layout__container {
      border-top-left-radius: 16rpx;
      border-top-right-radius: 16rpx;
      min-height: auto;
    }
    .layout-header{
      border-top-left-radius: 16rpx;
      border-top-right-radius: 16rpx;
      text-align: center;
      padding: 30rpx 0;
      font-size:34rpx;
      background: #fff;
      border-bottom: 2rpx solid  rgba(0,0,0,0.05);
    }
    .layout-body{
      padding: 0;
      min-height: auto;
      max-height: auto;
      .layout-body__content{
        min-height: auto;
        max-height: auto;
      }
      .con{
        padding: 0 40rpx ;
        .choice-node{
          display: flex;
          justify-content: space-between;
          border-bottom: 2rpx solid  rgba(0,0,0,0.05);
          padding: 40rpx 0;
          font-size: 30rpx;
          .lef{
            text.grey{
              color: rgba(0,0,0,0.5);
            }
            text.node-name{
              display: inline-block;
              background: #FDAD89;
              border-radius: 50%;
              font-size: 16rpx;
              color: #fff;
              height: 40rpx;
              width: 40rpx;
              text-align: center;
              line-height: 40rpx;
              vertical-align: middle;
              margin-right: 24rpx;
            }
            text.img{
              display: inline-block;
              height: 40rpx;
              width: 40rpx;
              border-radius: 50%;
              background:url('@{base-url}manaIcon1.png')no-repeat center/cover;
              vertical-align: middle;
              margin-right: 24rpx;
            }
          }
          .rig{
            color:rgba(0,0,0,0.5);
          }
        }
        .at-textarea{
          border: none;
          padding: 40rpx 0;
          border-bottom: 2rpx solid rgba(0,0,0,0.05);
          margin-bottom: 40rpx;
        }
      }
    }
    .btn{
      box-shadow:0px -2rpx 10rpx 0px rgba(0,0,0,0.12);
      padding: 20rpx 30rpx;
      .at-button--primary{
        background: linear-gradient(90deg, #446aee 0%, #528cf1 100%);
      }
      button{
        background:linear-gradient(90deg,rgba(68,106,238,1) 0%,rgba(82,140,241,1) 100%);
      }
    }
    @media screen and (min-device-height: 812px) and (max-device-height: 896px) {
      .btn {
          padding-bottom: 60rpx;
      }
    }
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
      .btn {
        padding-bottom: 60rpx;
      }
    }
  }
  //头部搜索框统一样式
  .search-bar{
    padding: 30rpx;
    .at-search-bar__input-cnt{
      height: 64rpx;
      border-radius: 12rpx;
      background-color: #F4F5F7;
      .at-search-bar__placeholder-wrap{
        height: 64rpx;
        justify-content:left;
        .at-icon-search:before{
          display: inline-block;
          content: '';
          width: 38rpx;
          height: 38rpx;
          background: url('@{base-url}financing/search.png')no-repeat center/cover;
        }
        .at-search-bar__placeholder{
          color:rgba(0,0,0,0.3);
          font-size: 24rpx;
        }
      }
      .at-search-bar__input{
        height: 68rpx !important;
      }
      .at-search-bar__clear{
        top:8rpx;
      }
      .at-icon-close-circle:before{
        display: inline-block;
        content: '';
        height: 32rpx;
        width: 32rpx;
        background: url('@{base-url}financing/clear-s.svg')no-repeat center/cover;
      }
    }
    .at-search-bar__action{
      margin-left: 30rpx;
      padding: 0;
      font-weight:400;
      color:rgba(0,0,0,0.9);
      font-size: 28rpx;
      background-color: transparent;
    }
  }

  .choice1.at-radio::after,.choice1.at-checkbox::after{
    border-bottom:none;
  }
  .choice1.at-radio::before,.choice1.at-checkbox::before{
    border-top: none;
  }


  //付款选择弹窗样式
  .model-list{
    .at-float-layout__container {
      border-top-left-radius: 16rpx;
      border-top-right-radius: 16rpx;
      min-height: auto;
      // max-height: 452rpx;
    }
    .layout-header{
      border-top-left-radius: 16rpx;
      border-top-right-radius: 16rpx;
      text-align: center;
      padding: 30rpx 0;
      font-size:34rpx;
    }
    .layout-body{
      padding: 0 40rpx 40rpx;
      min-height: auto;
      max-height: auto;
      .layout-body__content{
        min-height: auto;
        max-height: auto;
      }
      .list{
        position: relative;
        border-bottom: 2rpx solid rgba(0,0,0,0.05);
        padding: 30rpx 0;
        image{
          position: absolute;
          right: 0;
          top: 30rpx;
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
    
  }