linkmore-design/es/upload-oss/style/index-pure.less

🌈 🚀lm组件库。🚀

@import '../../style/themes/index.less';

.lm_upload_btn {

  display: inline-flex;

  .upload_body {
    font-size: 12px;

    .upload_diy {
      position: relative;

      .upload_input {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        opacity: 0;
      }

      &:hover .upload_btn {
        color: @primary-color;
        border-color: @primary-color;
      }
    }

    .upload_btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      height: 32px;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
      padding: 0 12px;
      transition: 0.3s;

      &.small {
        height: 24px;
      }

      .upload_btn_icon {
        margin-right: 4px;
      }
    }
  }
}

.lm_upload_img {
  display: inline-flex;

  .upload_body {
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1;

    .view_box {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #d9d9d9;
      padding: 8px;

      .view_item_thum {
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          opacity: 0;
          transition: 0.3s;
          z-index: 1;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        // 遮罩
        .view_item_action {
          position: absolute;
          left: 0;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          text-align: center;
          opacity: 0;
          z-index: 2;
          color: #fff;

          .view_item_action_icon {
            display: flex;
            justify-content: center;
            margin: 8px 0;

            &>div {
              padding: 0 4px;
              cursor: pointer;
            }
          }
        }
      }

      &:hover {
        .view_item_thum {
          &::before {
            opacity: 1;
          }

          .view_item_action {
            opacity: 1;
          }
        }
      }
    }

    .upload_card_box {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border: 1px dashed #d9d9d9;
      transition: all 0.3s;

      .upload_input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }

      &:hover {
        border-color: @primary-color;
      }
    }
  }
}