upload.scss 920 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. .cl-upload-list {
  2. display: flex;
  3. flex-wrap: wrap;
  4. .cl-upload {
  5. display: flex;
  6. align-items: center;
  7. justify-content: center;
  8. border-radius: 10rpx;
  9. border-width: 1rpx;
  10. border-style: dashed;
  11. border-color: #d9d9d9;
  12. box-sizing: border-box;
  13. position: relative;
  14. margin-right: 20rpx;
  15. margin-bottom: 20rpx;
  16. .cl-upload__add {
  17. font-size: 50rpx;
  18. color: #8c939d;
  19. }
  20. &__target {
  21. height: 100%;
  22. width: 100%;
  23. border-radius: 10rpx;
  24. }
  25. &__remove {
  26. position: absolute;
  27. right: 10rpx;
  28. top: 10rpx;
  29. color: $cl-color-error;
  30. z-index: 1;
  31. line-height: normal;
  32. font-size: 40rpx;
  33. }
  34. }
  35. &:not(.is-disabled) {
  36. .cl-upload {
  37. &:active {
  38. border-color: $cl-color-primary;
  39. .cl-upload__add {
  40. color: $cl-color-primary;
  41. }
  42. }
  43. }
  44. }
  45. &.is-disabled {
  46. .cl-upload {
  47. background-color: #f5f7fa;
  48. .cl-upload__add {
  49. transform: rotate(45deg);
  50. }
  51. }
  52. }
  53. }