page {
  background-color: #eee;
}
.BarCode {
  position: relative;
  .BackTag {
    position: absolute;
    right: 0;
    top: 354px;
    width: 40px;
    height: 140px;
    background-color: rgba($color: #000000, $alpha: 0.7);
    border-radius: 8px 0 0 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .icon {
      width: 22px;
      height: 18px;
      margin-bottom: 10px;
    }
    .text {
      width: 22px;
      font-size: 22px;
      line-height: 22px;
      color: #fff;
    }
  }
  .OrderBox {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0 32px;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.5);
  }
  .blur {
    filter: blur(10px);
  }
  .BarCodeBox {
    position: relative;
    background-color: #fff;
    width: 100%;
    height: 260px;
    transition: all 0.28s;
    display: flex;
  }
  .BarCodeBoxBig {
    height: 436px;
  }
  .BarCodeImg {
    position: relative;
    z-index: 1;
    flex: 1;
    margin: 26px 52px 46px;
    background-color: #fff;
    transition: all 0.28s;
  }
  .BarCodeImgBig {
    margin: 26px 26px 46px;
  }
  .BarCodeBox-refresh {
    position: absolute;
    right: 44px;
    bottom: -58px;
    width: 176px;
    height: 96px;
  }
  .BarCodeCav {
    display: none;
    width: 100%;
    height: 100%;
  }
  .BarCodeCav.show {
    display: block;
  }
  .toggleBtn {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 40px);
    background-color: #fff;
    box-sizing: border-box;
    width: 136px;
    height: 45px;
    border-radius: 0 0 20px 20px;
    .arricon {
      width: 24px;
      height: 24px;
      transition: all 400ms ease-in-out;
    }
    .rever {
      transform: rotate(180deg);
    }
  }
  .warnning {
    margin: 80px 20px 0;
    color: #f10000;
  }
}
