.wrapper {
      position: absolute;
      top:0;
      left:0;      
      width: 400px;
    }

    .container {
      position: relative;
      margin-bottom: 10px;
      height: 200px;
      border-radius: 4px;
      border: 2px solid #a0a0a0;
      cursor: pointer;
    }

    .container .upload {
      display: none;
    }

    .container img {
      position: absolute;
      width: 30%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .container img.preview {
      position: absolute;
      opacity: 0.5;
      width: 90%;
      height: 90%;
      object-fit: contain;
    }

    .container label {
      margin-left: 8px;
      width: 90%;
      align-items: center;
      position: absolute;
      bottom: 5px;
    }

    .container label progress {
      margin-right: 10px;
    }

    .container.select .select {
      display: block;
    }

    .container.select .preview {
      display: none;
    }

    .container.preview .preview {
      display: flex;
    }

    .container.preview .select {
      display: none;
    }

    .container.result img.preview {
      display: flex;
    }

    .container.result img.preview {
      opacity: 1;
    }

    .container.result .select,
    label {
      display: none;
    }

    .operate {
      display: flex;
      justify-content: space-evenly;
    }