| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 | @import '../style/var';.van-image-preview {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  &__swipe {    height: 100%;    &-item {      display: flex;      align-items: center;      justify-content: center;      overflow: hidden;    }  }  &__cover {    position: absolute;    top: 0;    left: 0;  }  &__image {    width: 100%;    transition-property: transform;    &--vertical {      width: auto;      height: 100%;    }    img {      // disable desktop browser image drag      -webkit-user-drag: none;    }    .van-image {      &__error {        top: 30%;        height: 40%;      }      &__error-icon {        font-size: 36px;      }      &__loading {        background-color: transparent;      }    }  }  &__index {    position: absolute;    top: @padding-md;    left: 50%;    color: @image-preview-index-text-color;    font-size: @image-preview-index-font-size;    line-height: @image-preview-index-line-height;    text-shadow: @image-preview-index-text-shadow;    transform: translate(-50%, 0);  }  &__overlay {    background-color: @image-preview-overlay-background-color;  }  &__close-icon {    position: absolute;    z-index: @image-preview-close-icon-z-index;    color: @image-preview-close-icon-color;    font-size: @image-preview-close-icon-size;    cursor: pointer;    &:active {      color: @image-preview-close-icon-active-color;    }    &--top-left {      top: @image-preview-close-icon-margin;      left: @image-preview-close-icon-margin;    }    &--top-right {      top: @image-preview-close-icon-margin;      right: @image-preview-close-icon-margin;    }    &--bottom-left {      bottom: @image-preview-close-icon-margin;      left: @image-preview-close-icon-margin;    }    &--bottom-right {      right: @image-preview-close-icon-margin;      bottom: @image-preview-close-icon-margin;    }  }}
 |