index.less 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. @import './var.less';
  2. :root {
  3. --van-image-placeholder-text-color: @image-placeholder-text-color;
  4. --van-image-placeholder-font-size: @image-placeholder-font-size;
  5. --van-image-placeholder-background-color: @image-placeholder-background-color;
  6. --van-image-loading-icon-size: @image-loading-icon-size;
  7. --van-image-loading-icon-color: @image-loading-icon-color;
  8. --van-image-error-icon-size: @image-error-icon-size;
  9. --van-image-error-icon-color: @image-error-icon-color;
  10. }
  11. .van-image {
  12. position: relative;
  13. display: inline-block;
  14. &--round {
  15. overflow: hidden;
  16. border-radius: var(--van-border-radius-max);
  17. .van-image__img {
  18. border-radius: inherit;
  19. }
  20. }
  21. &--block {
  22. display: block;
  23. }
  24. &__img,
  25. &__error,
  26. &__loading {
  27. display: block;
  28. width: 100%;
  29. height: 100%;
  30. }
  31. &__error,
  32. &__loading {
  33. position: absolute;
  34. top: 0;
  35. left: 0;
  36. display: flex;
  37. flex-direction: column;
  38. align-items: center;
  39. justify-content: center;
  40. color: var(--van-image-placeholder-text-color);
  41. font-size: var(--van-image-placeholder-font-size);
  42. background: var(--van-image-placeholder-background-color);
  43. }
  44. &__loading-icon {
  45. color: var(--van-image-loading-icon-color);
  46. font-size: var(--van-image-loading-icon-size);
  47. }
  48. &__error-icon {
  49. color: var(--van-image-error-icon-color);
  50. font-size: var(--van-image-error-icon-size);
  51. }
  52. }