.page-box {
  position: relative;
  width: 100%;
  // height: 100vh;
  z-index: 101;
}
._padding {
  padding: 0 30rpx;
}
.lunch-outer {
  flex-direction: column;
  height: 100vh;
}
.nav-box {
  position: relative;
  width: 100vw;
  flex: none;
  .additional-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
    width: 100%;
    height: 208rpx;
    image {
      width: 100%;
      height: 208rpx;
    }
  }
}
.nav-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: -1;
}
/* 底部区域 */
.main-box {
  position: relative;
  height: 100rpx;
  margin-top: 20rpx;
  flex: 1;
  z-index: 11;
}
/* 轮播图 */
.swiper-content {
  margin: 24rpx auto 48rpx;
}
.swiper-content,
.swiper-image {
  width: 690rpx;
  height: 200rpx;
  border-radius: 10rpx;
}
/* 店长推荐 */
.recommend-title {
  margin-bottom: 28rpx;
  .text {
    font-size: 32rpx;
    font-weight: 500;
  }
  .img {
    width: 22rpx;
    height: 29rpx;
    margin-right: 12rpx;
  }
}
.recommend-dishes-box {
  height: 313rpx;
  margin-bottom: 45rpx;
}
.recommend-dishes-scroll {
  width: 100%;
  height: 100%;
  .recommend-dish-item {
    &:last-child {
      margin-right: 0;
    }
  }
}
.recommend-dish-item {
  margin-right: 35rpx;
}
.line {
  position: sticky;
  top: 0;
  left: 0;
}
.cate-dish-box {
  width: 100%;
}
/* 分类 */
.cates-box {
  width: 160rpx;
  background: #f6f6f6;
  flex: none;
}
.cates-scroll-view {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 11;
  height: 100%;
}
.cates-item {
  position: relative;
  height: 108rpx;
  line-height: 108rpx;
  text-align: center;
  font-size: 24rpx;
  color: #3C3C3C;
  .cate-bar {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .cate-week {
      font-size: 26rpx;
      font-weight: bold;
      line-height: 1.8;
    }
    .cate-day {
      line-height: 1.8;
    }
  }
}
.cate-selected {
  background-color: #fff;
  color: #52ACFF;
}
.cate-selected::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: #52ACFF;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cate-disabled {
  color: #c8c9cc;
}
/* 菜品 */
.dishes-box {
  margin-left: 24rpx;
  width: calc(100% - 214rpx);
  z-index: 2;
  flex: none;
  margin-bottom: 60rpx;
}
.cur-date {
  height: 66rpx;
  line-height: 66rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .calendar-icon {
    margin-right: 6rpx;
  }
}
.dish-item {
  width: 100%;
  .dish {
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.dish-cate {
  position: sticky;
  top: 0;
  left: 0;
  height: 88rpx;
  font-size: 28rpx;
  color: #3c3c3c;
  line-height: 88rpx;
  z-index: 10;
  background-color: #fff;
  .meal-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }
}
.virtual-box {
  height: 138rpx;
}
.dish {
  margin-bottom: 60rpx;
}
.close-store {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96rpx;
  padding: 12rpx 30rpx;
  background-color: #333;
  color: #fff;
  font-size: 32rpx;
  flex: none;
  white-space: normal;
  word-wrap: break-word;
  z-index: 20;
}
.must-buy {
  background: #fdf6ec;
  padding: 0 20rpx 20rpx;
  border-radius: 8rpx;
  margin: 28rpx 0;
  .dish-cate {
    background-color: transparent;
  }
}
/* 结算框 */
.paystyle {
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom: 36rpx;
  left: 36rpx;
  width: calc(100vw - 72rpx);
  height: 100rpx;
  background: #3c3c3c;
  z-index: 66;
  border-radius: 60rpx;
  justify-content: space-around;
}
.cart-icon {
  position: relative;
  width: 116rpx;
  height: 100%;
  background-color: #3c3c3c;
  border-radius: 54rpx 0 0 54rpx;
  .cart-script {
    transform: translateY(-100%);
  }
  .cart-icon-image {
    position: absolute;
    bottom: 0;
    left: -10rpx;
    width: 116rpx;
    height: 116rpx;
  }
}
.paymeal {
  color: #fff;
  display: flex;
  align-items: center;
}
.paymoney {
  color: #fff;
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  ._flex {
    line-height: 48rpx;
    align-items: baseline;
    .payicon {
      font-size: 22rpx;
      line-height: 22rpx;
    }
    .payprice {
      font-size: 48rpx;
      font-weight: 600;
      margin-left: 5rpx;
      margin-right: 44rpx;
    }
  }
}
.li-btn {
  width: 160rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.liji {
  font-size: 32rpx;
  width: 278rpx;
  height: 100rpx;
  line-height: 70rpx;
  color: #fff;
  border-radius: 50rpx;
  background-color: #3694ec;
  text-align: center;
}
.no-img {
  display: flex;
  flex-direction: row;
  justify-content: center;
  image {
    width: 452rpx;
    height: 452rpx;
  }
}
