index.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. .nut-uploader {
  2. position: relative;
  3. display: flex;
  4. flex-wrap: wrap;
  5. .upload {
  6. position: relative;
  7. background: $uploader-background;
  8. width: $uploader-width;
  9. height: $uploader-height;
  10. display: flex;
  11. align-items: center;
  12. justify-content: center;
  13. input {
  14. position: absolute;
  15. top: 0;
  16. left: 0;
  17. width: 100%;
  18. height: 100%;
  19. overflow: hidden;
  20. cursor: pointer;
  21. opacity: 0;
  22. &:disabled {
  23. cursor: not-allowed;
  24. }
  25. }
  26. }
  27. .preview {
  28. width: $uploader-width;
  29. height: $uploader-height;
  30. display: flex;
  31. align-items: center;
  32. justify-content: center;
  33. margin-right: 10px;
  34. margin-bottom: 10px;
  35. &-img {
  36. position: relative;
  37. width: 100%;
  38. height: 100%;
  39. .close {
  40. position: absolute;
  41. right: 0;
  42. top: 0;
  43. transform: translate(50%, -50%);
  44. }
  45. .tips {
  46. position: absolute;
  47. bottom: 0;
  48. left: 0;
  49. right: 0;
  50. text-align: center;
  51. font-size: 12px;
  52. color: $white;
  53. height: 30px;
  54. line-height: 30px;
  55. text-align: c;
  56. background: rgba(0, 0, 0, 0.54);
  57. }
  58. }
  59. img {
  60. height: 100%;
  61. width: 100%;
  62. }
  63. }
  64. }