tdesign-mobile-vue/esm/_common/style/mobile/components/image-viewer/v2/_index.less

tdesign-mobile-vue

@import "../../../base.less";

@import "./_var.less";

.@{image-viewer} {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1001;
  height: 100%;
  transform: translateZ(0);
  overflow: hidden;

  &__mask {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: @image-viewer-mask-bg-color;
  }

  &__content {
    width: 100vw;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1005;
    border-radius: 0;
  }

  &__swiper-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__img {
    height: auto;
    max-width: 100%;
  }

  &__nav {
    width: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: @image-viewer-nav-height; // 操作条高度
    background-color: @image-viewer-nav-bg-color; // 操作条背景色
    left: 0;
    color: @image-viewer-nav-color; // 操作条文本颜色
    z-index: 1005;

    &-close {
      margin-left: @image-viewer-close-margin-left; // 关闭操作按钮左部间距
    }

    &-delete {
      margin-right: @image-viewer-delete-margin-right; // 删除操作按钮右部间距
    }

    &-close,
    &-delete {
      width: @image-viewer-icon-font-size;
      font-size: @image-viewer-icon-font-size;
    }

    &-index {
      flex: 1;
      font-size: @image-viewer-nav-index-font-size; // 索引文本大小
      text-align: center;
    }
  }
}