uploadimage_alioss/style.less

Front desk realization of Ali cloud picture uploading

@import "~antd/lib/style/themes/default.less";
.Divider{
  span{
    font-size:14px;
  }
}
.cardspace{
   margin-bottom:20px;
}
.stepForm {
  margin: 40px auto 0;
  max-width: 560px;
}
.stepFormText {
  margin-bottom: 24px;
  :global {
    .ant-form-item-label,
    .ant-form-item-control {
      line-height: 22px;
    }
  }
}

.result {
  margin: 0 auto;
  max-width: 560px;
  padding: 24px 0 8px;
}

.desc {
  padding: 0 56px;
  color: @text-color-secondary;
  h3 {
    font-size: 16px;
    margin: 0 0 12px 0;
    color: @text-color-secondary;
    line-height: 32px;
  }
  h4 {
    margin: 0 0 4px 0;
    color: @text-color-secondary;
    font-size: 14px;
    line-height: 22px;
  }
  p {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 22px;
  }
}

@media screen and (max-width: @screen-md) {
  .desc {
    padding: 0;
  }
}

.information {
  line-height: 22px;
  :global {
    .ant-row:not(:last-child) {
      margin-bottom: 24px;
    }
  }
  .label {
    color: @heading-color;
    text-align: right;
    padding-right: 8px;
  }
}

.money {
  font-family: Helvetica Neue;
  font-weight: 500;
  font-size: 20px;
  line-height: 14px;
}

.uppercase {
  font-size: 12px;
}

.stepForm4{
  margin:30px 0;
   h2{
     font-weight:bold;
     font-size:16px;
     margin-bottom:20px;
   }
}
.stepForm4inner{
   padding:20px;
  border:1px dashed #dfdfdf;
}


.change{
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 0;
    opacity: 0;
}
.reporate{
         display:none;
         position:absolute;
         left:0;
         top:0;
         width:100%;
         height:100%;
         &:after{
            content:'';
            position:absolute;
            display:block;
            width:100%;
            height:100%;
            background-color:#000000;
            opacity:0.5;
            z-index: 1;
            left: 0;
            top: 0;
        }
        .inconWrap{
            position: absolute;
            left: 50%;
            top: 50%;
            z-index:2;
            transform: translate(-50%, -50%);
            width:48px;
           .icons{
              color:#ffffff;
              position:relative;
              z-index:2;
              width:16px;
              margin:0 4px;
              cursor:pointer;
            }
        }
       
      }
.block{
     width:100px;
     height:100px;
     border:1px dashed #dfdfdf;
     padding:5px;
     background-color:#ffffff;
     overflow:hidden;
     display:inline-block;
     margin-right:8px;
     margin-bottom:8px;
} 
.upload{
   width:100px;
     height:100px;
     border:1px dashed #dfdfdf;
     padding:5px;
     background-color:#ffffff;
     overflow:hidden;
     display:inline-block;
     margin-right:8px;
     margin-bottom:8px;
    position: relative;
    line-height:90px;
    text-decoration: none;
    color: #666;
    text-align:center;
}     
.blockinner{
  position:relative;
  &:hover{
      .reporate{
         display:block
      }
  }

}

.uploadState{
     position:absolute;
     left:0;
     bottom:0;
     z-index:3;
     text-align:center;
    
}
.error{
    color:#ff0000;
 }