.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(--dividerColor);
  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(--dividerColor);
  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(--contentBgColor);
  border-radius: 0;
}
.auto-mask-layer-radius4{
  position: relative;
}
.auto-mask-layer-radius4::after {
  @include auto-mask-layer();
  background-color: var(--contentBgColor);
  border-radius: 8rpx;
}

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

.auto-mask-layer-radius100{
  position: relative;
}
.auto-mask-layer-radius100::after {
  @include auto-mask-layer();
  background-color: var(--contentBgColor);
  border-radius: 200rpx;
}

.auto-mask-layer-radius-b8{
  position: relative;
}
.auto-mask-layer-radius-b8::after {
  @include auto-mask-layer();
  background-color: var(--contentBgColor);
  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(--contentBgColor);
  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(--contentBgColor);
  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);
}

.placeholder-class {
  color: var(--descriptionColor) !important;
}

.title-class {
  color: var(--titleColor) !important;
  font-weight: 500;
}

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

.order-item {
  width: 100%;
  background: var(--containerBgColor);
  border-radius: 16rpx;
  padding: 20rpx;
  box-sizing: border-box;
  margin-top: 32rpx;
  .top {
    min-height: 80rpx;
    .type,.price {
      width: 323rpx;
      min-height: 80rpx;
      padding: 8rpx 0;
      box-sizing: border-box;
    }
    .type {
      font-weight: 500;
      font-size: 34rpx;
      color: var(--titleColor);
      line-height: 48rpx;
    }
    .price {
      font-size: 30rpx;
      color: var(--summaryColor);
      font-weight: 500;
    }
    .important-color {
      color: var(--importantColor) !important;
    }
  }
  .content {
    width: 100%;
    min-height: 160rpx;
    .left {
      width: 466rpx;
      .address-name {
        width: 100%;
        min-height: 60rpx;
        font-size: 30rpx;
        color: var(--titleColor);
        line-height: 44rpx;
      }
      .address {
        width: 100%;
        min-height: 60rpx;
        font-size: 28rpx;
        color: var(--summaryColor);
        line-height: 44rpx;
      }
      .time-ctr {
        width: 100%;
        min-height: 80rpx;
        font-size: 28rpx;
        color: var(--themeColor);
        line-height: 44rpx;
        .time {
          margin-left: 8rpx;
        }
      }
    }
    .right {
      width: 180rpx;
      .icon-ctr {
        width: 100%;
        height: 60rpx;
      }
      .distance {
        width: 100%;
        height: 44rpx;
        font-size: 28rpx;
        color: var(--titleColor);
        line-height: 44rpx;
        margin-top: 32rpx;
      }
    }
  }
  .discount {
    width: 100%;
    height: 64rpx;
    background: rgba(230,82,31,0.1);
    border-radius: 16rpx;
    font-size: 28rpx;
    color: var(--importantColor);
    padding: 0 16rpx;
    box-sizing: border-box;
  }
  .btn-ctr {
    width: 100%;
    height: 126rpx;
    box-sizing: border-box;
    margin-top: 10rpx;
  }
  .user {
    width: 100%;
    height: 140rpx;
    background: var(--auxiliaryBgColor);
    border-radius: 16rpx;
    padding: 20rpx 20rpx 20rpx 32rpx;
    box-sizing: border-box;
    .left {
      .user-name,.phone {
        width: 422rpx;
        height: 50rpx;
        font-size: 28rpx;
        color: var(--titleColor);
        line-height: 28rpx;
      }
      .user-name {
        .name {
          margin-left: 8rpx;
        }
      }
    }
    .right {
      width: 140rpx;
      height: 100rpx;
      .icon-ctr {
        width: 100rpx;
        height: 100rpx;
      }
    }
  }
  .operate-ctr {
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    margin-top: 20rpx;
    .status-ctr,.operate {
      width: 50%;
    }
    .status-ctr {
      .text {
        margin-left: 8rpx;
        font-size: 30rpx;
        color: #E18F00;
      }
    }
    .operate {
      .btn {
        width: 186rpx;
        height: 76rpx;
        background: #E18F00;
        border-radius: 16rpx;
        font-size: 28rpx;
        color: #FFFFFF;
      }
    }
  }
}