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;
- }
- }
- }
|