zarm/es/image-preview/style/index.css

基于 React 的移动端UI库

.za-image-preview {
  --footer-padding: var(--za-image-preview-footer-padding, var(--za-padding-v-lg) var(--za-padding-h-lg));
  --pagination-text-color: var(--za-image-preview-pagination-text-color, var(--za-color-text-inverse));
  --pagination-font-size: var(--za-image-preview-pagination-font-size, var(--za-font-size-lg));
  padding: 0;
}
.za-image-preview__title {
  text-align: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  height: 60px;
  line-height: 60px;
  font-size: var(--title-font-size);
  font-weight: var(--title-font-weight);
  color: var(--za-color-text-inverse);
}

.za-image-preview__content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.za-image-preview__item img {
  max-width: 100%;
  max-height: 100%;
  display: none;
}

.za-image-preview__loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.za-image-preview__footer {
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  padding: var(--footer-padding);
}

.za-image-preview__pagination {
  flex: 1;
  text-align: right;
  color: var(--pagination-text-color);
  font-size: var(--pagination-font-size);
}

.za-image-preview .za-popup {
  width: 100%;
  height: 100%;
}
.za-image-preview .za-carousel {
  height: 100%;
  width: 100%;
}
.za-image-preview .za-carousel__items {
  height: 100%;
}