image.scss 550 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. .cl-image {
  2. flex-shrink: 0;
  3. &__target {
  4. height: 100%;
  5. width: 100%;
  6. max-height: 100%;
  7. max-width: 100%;
  8. }
  9. &__placeholder {
  10. display: flex;
  11. justify-content: center;
  12. align-items: center;
  13. height: 100%;
  14. width: 100%;
  15. }
  16. .cl-icon-image {
  17. font-size: 40rpx;
  18. }
  19. &__error {
  20. display: flex;
  21. justify-content: center;
  22. align-items: center;
  23. height: 100%;
  24. width: 100%;
  25. font-size: 24rpx;
  26. text-align: center;
  27. }
  28. &.is-round {
  29. .cl-image__placeholder,
  30. .cl-image__error,
  31. .cl-image__target {
  32. border-radius: 100%;
  33. }
  34. }
  35. }