page {
  --height: 44px;
  --right: 190rpx;
}

.navigation-bar {
  overflow: hidden;
}

.navigation-bar .android {
  --height: 48px;
  --right: 222rpx;
}

.navigation-bar-placeholder {
  position: relative;
  height: var(--height);
  z-index: 50;
}

.navigation-bar-inner {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding-right: var(--right);
  width: calc(100% - var(--right));
  height: var(--height);
  z-index: 5001;
}

.navigation-bar-inner .navigation-bar-left {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 8px;
  box-sizing: border-box;
}

.navigation-bar-inner .navigation-bar-left .btn-back {
  width: 17px;
  height: 17px;
}

.navigation-bar-inner .navigation-bar-left .btn-back .icon-back {
  width: 100%;
  height: 100%;
}

/* 放大焦点 */

.nice-focus {
  position: relative;
}

.nice-focus::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -35rpx;
  margin-left: -35rpx;
  margin-right: -35rpx;
  width: 70rpx;
  height: 70rpx;
}

.navigation-bar-inner .navigation-bar-center {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  width: 0;
  overflow: hidden;
}

/* 标题 */

.navigation-bar-inner .title {
  display: block;
  flex: 1;
  margin-top: -1px;
  width: 0;
  height: 24px;
  line-height: 24px;
  font-size: 34rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 标题loading */

.navigation-bar-inner .navigation-bar-loading:before {
  content: "";
  display: inline-block;
  position: relative;
  top: -1px;
  margin-right: 3px;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  animation: loading 1s steps(12, end) infinite;
  background: transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") no-repeat;
  background-size: 100%;
}

@keyframes loading {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}