.navbar {
    box-sizing: border-box;
    line-height: 34px;
    height: 34px;
    font-size: 13px;
    white-space: nowrap;
    flex: none;
    -webkit-overflow-scrolling: touch;
}
.view.common{
  color: dimgray;
  text-align: center;
  display: inline-block;
  height: 34px;
  line-height: 34px;
}
.view.nav {
  box-sizing: border-box;
  border-bottom: 2px solid transparent;
  transition: all 0.26s ease;
}
.view.nav.active{
    color: #0590f0;
    font-size: 15px;
    font-weight: bold;
    border-bottom: 2px solid  #0590f0;
}
.view.plain{
  transition: all 0.26s ease;
}
.view.plain.active{
  color: #0590f0;
  font-size: 15px;
  font-weight: bold;
}
.view.cap{
  border-radius: 36px;
  background: #dfdfdf;
  padding: 0 14px;
  height: 28px;
  line-height: 28px;
  margin: 3px 0;
}
.view.cap.active{
  background: #00a0f0;
  color: white;
}

.view.line{
  position: relative;
}
.text.line{
  display: flex;
  justify-content: center;
  transition: all 0.26s ease;
}
.text.line.active{
  font-size: 15px;
  color: #00b0f0;
  font-weight: bold;
}
.text.line::after{
 transition: all 0.26s ease;
 width: 0px;
 height: 3.2px;
 position: absolute;
 content: "";
 bottom: 0;
 border-radius: 10px;
}
.text.line.active::after{
  width: 22px;
  background: #00a0f0;
}