BJ-JTL/后台/src/components/Z_upFileMore/index.module.scss

.Z_upFileMore {
  position: relative;
  width: 100%;
  height: 100%;

  :global {
    .fileBoxRow_up {
      color: #a6a6a6;
      border-radius: 3px;
      cursor: pointer;
      font-size: 30px;
      width: 100px;
      height: 100px;
      border: 1px dashed #797979;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .fileImgListBox {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;

      &>div {
        margin: 15px 20px 0px 0;
      }
    }

    .fileBoxRow_r_img {
      position: relative;

      .sortInpBox {
        position: absolute;
        bottom: 20px;
        left: 0;
        z-index: 99;
        width: 100px;
        height: 30px;
        line-height: 20px;



        .clickOk {
          text-align: center;
          opacity: .6;
          cursor: pointer;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background-color: green;
          color: #fff;
          position: absolute;
          z-index: 10;
          right: 23px;
          top: 2px;
          font-size: 14px;

          &:hover {
            opacity: 1;
          }
        }

        .clickX {
          text-align: center;
          opacity: .6;
          cursor: pointer;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background-color: #ff4d4d;
          color: #fff;
          position: absolute;
          z-index: 10;
          right: 3px;
          top: 2px;
          font-size: 14px;

          &:hover {
            opacity: 1;
          }
        }

        input {
          padding-left: 3px;
          width: 100%;
          height: 20px;
          line-height: 20px;

          &:focus {
            outline: none;
          }
        }
      }

      .fileImgListLDBox {
        height: 26px;
        background-color: rgba(0, 0, 0, .6);
        color: #fff;
        display: flex;
        justify-content: space-around;
        font-size: 16px;

        &>a {
          color: #fff;
        }

        .sortBox {
          cursor: pointer;
        }
      }


      .clearCover {
        cursor: pointer;
        position: absolute;
        z-index: 99;
        right: -10px;
        top: -10px;
        background-color: rgba(0, 0, 0, .8);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        font-size: 16px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .dangXBox {
        cursor: pointer;
        position: absolute;
        z-index: 99;
        left: 2px;
        top: 2px;
        background-color: rgba(0, 0, 0, .8);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        font-size: 16px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .fileTit {
      font-size: 14px;
      color: rgb(126, 124, 124);

      .noUpThumb {
        position: relative;
        overflow: hidden;
        opacity: 0;
        transition: top .2s;
        color: #ff4d4f;
        top: -10px;
      }



      .noUpThumbAc {
        top: 0;
        opacity: 1;
      }
    }
  }
}