upload-img-qm/lib/Uploadimg.less

react upload img

.upload{
  width: 100px;
  height: 100px;
  border: 2px dashed #666666;
  border-radius: 5px;
  position: relative;
  float: left;
  margin-right: 10px;
  i{
    position: absolute;
    top: 26px;
    left: 46px;
  }
  .uptext{
    position: absolute;
    top: 46px;
    left: 23px;
  }
  input{
    display:none;
  }
}
.imgList{
  width: auto;
  height: 100px;
  //overflow: hidden;
  float: left;
  margin-right: 10px;
  .imgbox{
    position: relative;
    margin-right: 10px;
    width: 100px;
    height: 100px;
    float: left;
    &:hover{
      .viewimgicon{
        position: absolute;
        left: 38%;
        top:30%;
        font-size: 20px;
        color:#fff;
        cursor: pointer;
        opacity: 1;
      }
      .preview{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #666;
        opacity: 0.7;
      }
    }
    .viewimgicon{
      position: absolute;
      left: 38%;
      top:41%;
      opacity: 0;
    }
    .preview{
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .delimg{
      position: absolute;
      top: -5px;
      right: -5px;
      cursor: pointer;
      color:#000;
    }

    img{
      width: 100px;
      height: 100px;
    }
  }
  .loadingStatus{
    width: 100px;
    height: 100px;
    border: 2px dashed rgb(102,102,102);
    border-radius: 5px;
    float: right;
  }
  .hide{
    display: none;
  }
}
.previewModal{
  width: 1000px;
  height: 600px;
  z-index: 9999999;
  margin-left: -500px;
  position: fixed;
  left: 50%;
  top:60px;
  overflow-y: scroll;
  .closemodal{
    position: absolute;
    top: 0;
    right: 18px;
    font-size: 22px;
    color:#fff;
    cursor: pointer;
    z-index: 99999999;
  }
  .modalimg{
    width: 1000px;
    overflow-y: scroll;
    height: 600px;
    img{
      width: 100%;
      height: auto;
    }
  }
}
#hoverwrap{
  position: fixed;
  width: 100%;
  top: 0;
  height: 100%;
  background-color: #666;
  z-index: 999999;
  opacity: 0.6;
}
@import "./style.css";