wanyu_frontend/static/css/common.scss

.flex-direction-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-direction-column-start {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.flex-c {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-r {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-l {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.line-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

//超出两行显示省略号
.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin line() {
  content: '';
  position: absolute;
  width: 200%;
  height: 1px;
  background: var(--dividingLineColor);
  transform: scale(0.5);
  transform-origin: 0 0;
}
// 元素前添加分割线 元素需为：position: relative
.line-before::before {
  @include line();
  top: 0;
  left: 0;
}
// 元素后添加分割线 元素需为：position: relative
.line-after::after {
  @include line();
  bottom: 0;
  left: 0;
}

@mixin verticalLine() {
  content: '';
  position: absolute;
  width: 1px;
  height: 200%;
  background: var(--dividingLineColor);
  transform: scale(0.5);
  transform-origin: 0 0;
}

// 元素左侧添加竖线 元素需为：position: relative
.line-left::before {
  @include verticalLine();
  top: 0;
  left: 0;
}

// 元素右侧添加竖线 元素需为：position: relative
.line-right::after {
  @include verticalLine();
  top: 0;
  right: 0;
}

.transition-all {
  transition: all .3s ease;
}
@keyframes animation-fade-out {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}
.animation-fade-out {
  animation: animation-fade-out 1s ease-out 0s 1;
}

@mixin auto-mask-layer() {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fixed-mask-layer-radius4{
  position: relative;
}
.fixed-mask-layer-radius4::after {
  @include auto-mask-layer();
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 8rpx;
}

.fixed-mask-layer-radius8{
  position: relative;
}
.fixed-mask-layer-radius8::after {
  @include auto-mask-layer();
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 16rpx;
}

.auto-mask-layer-radius0{
  position: relative;
}
.auto-mask-layer-radius0::after {
  @include auto-mask-layer();
  background-color: var(--hotZoneBgColor);
  border-radius: 0;
}
.auto-mask-layer-radius4{
  position: relative;
}
.auto-mask-layer-radius4::after {
  @include auto-mask-layer();
  background-color: var(--hotZoneBgColor);
  border-radius: 8rpx;
}

.auto-mask-layer-radius8{
  position: relative;
}
.auto-mask-layer-radius8::after {
  @include auto-mask-layer();
  background-color: var(--hotZoneBgColor);
  border-radius: 16rpx;
}

.auto-mask-layer-radius-b8{
  position: relative;
}
.auto-mask-layer-radius-b8::after {
  @include auto-mask-layer();
  background-color: var(--hotZoneBgColor);
  border-radius: 0rpx 0rpx 16rpx 16rpx;
}

.auto-mask-layer-radius-lb8{
  position: relative;
}
.auto-mask-layer-radius-lb8::after {
  @include auto-mask-layer();
  background-color: var(--hotZoneBgColor);
  border-radius: 0rpx 0rpx 0rpx 16rpx;
}

.auto-mask-layer-radius-rb8{
  position: relative;
}
.auto-mask-layer-radius-rb8::after {
  @include auto-mask-layer();
  background-color: var(--hotZoneBgColor);
  border-radius: 0rpx 0rpx 16rpx 0rpx;
}

.margin-bottom0 {
  margin-bottom: 0 !important;
}

//弹出动画
.animation-popup {
  animation: animation-popup 0.2s ease-out 0s 1;
}

@keyframes animation-popup {
  0% {
    opacity: 0.25;
    transform: scale(0.25);
  }

  25% {
    opacity: 0.5;
    transform: scale(0.5);
  }

  50% {
    opacity: 0.75;
    transform: scale(0.75);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.clickable-text {
  color: var(--themeColor);
}
.clickable-text:active {
  color: var(--themeColorClick);
}

.placeholder-class {
  color: var(--contentColor30);
}

swiper .wx-swiper-dots .wx-swiper-dot{
  width: 10rpx;
  height: 10rpx;
  border-radius: 5rpx;
  margin-bottom: 20rpx;
}