index.less 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. @import '../style/var';
  2. .van-image-preview {
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. width: 100%;
  7. height: 100%;
  8. &__swipe {
  9. height: 100%;
  10. &-item {
  11. display: flex;
  12. align-items: center;
  13. justify-content: center;
  14. overflow: hidden;
  15. }
  16. }
  17. &__cover {
  18. position: absolute;
  19. top: 0;
  20. left: 0;
  21. }
  22. &__image {
  23. width: 100%;
  24. transition-property: transform;
  25. &--vertical {
  26. width: auto;
  27. height: 100%;
  28. }
  29. img {
  30. // disable desktop browser image drag
  31. -webkit-user-drag: none;
  32. }
  33. .van-image {
  34. &__error {
  35. top: 30%;
  36. height: 40%;
  37. }
  38. &__error-icon {
  39. font-size: 36px;
  40. }
  41. &__loading {
  42. background-color: transparent;
  43. }
  44. }
  45. }
  46. &__index {
  47. position: absolute;
  48. top: @padding-md;
  49. left: 50%;
  50. color: @image-preview-index-text-color;
  51. font-size: @image-preview-index-font-size;
  52. line-height: @image-preview-index-line-height;
  53. text-shadow: @image-preview-index-text-shadow;
  54. transform: translate(-50%, 0);
  55. }
  56. &__overlay {
  57. background-color: @image-preview-overlay-background-color;
  58. }
  59. &__close-icon {
  60. position: absolute;
  61. z-index: @image-preview-close-icon-z-index;
  62. color: @image-preview-close-icon-color;
  63. font-size: @image-preview-close-icon-size;
  64. cursor: pointer;
  65. &:active {
  66. color: @image-preview-close-icon-active-color;
  67. }
  68. &--top-left {
  69. top: @image-preview-close-icon-margin;
  70. left: @image-preview-close-icon-margin;
  71. }
  72. &--top-right {
  73. top: @image-preview-close-icon-margin;
  74. right: @image-preview-close-icon-margin;
  75. }
  76. &--bottom-left {
  77. bottom: @image-preview-close-icon-margin;
  78. left: @image-preview-close-icon-margin;
  79. }
  80. &--bottom-right {
  81. right: @image-preview-close-icon-margin;
  82. bottom: @image-preview-close-icon-margin;
  83. }
  84. }
  85. }