.scroll-view_H{
  white-space: nowrap;
  position: fixed;
  top: 80rpx;
  left: 0;
  z-index: 10;
  background:#2b2b2b;
}
.scroll-view-item{
  height: 300rpx;
}
.scroll-view-item_H{
  position: relative;
  display: inline-block;
  padding: 10rpx 28rpx;
  height: 40rpx;
  font-size: 28rpx;
  color: #777777;
  background: #2b2b2b;


}
.scroll-view-item_H:after {
  content: '';
  position: absolute;
  width: 70%;
  height: 4rpx;
  left: 15%;
  bottom: 6rpx;
  background: transparent;
}
.scroll-view-item_H.active {
  color: #fff
}
.scroll-view-item_H.active:after {
  background: #fff;
}



.scroll-view_auto {
  display: flex;
  z-index: 10;
  align-items:center;
  overflow-x: auto;
  position: fixed;
  top: 80rpx;
  left: 0;
  width: 100%;
  white-space: nowrap;
  background:#2b2b2b;
}
.scroll-view-item_auto {
  display: inline-block;
  position: relative;
  padding: 10rpx 28rpx;
  min-width: 56rpx;
  height: 40rpx;
  font-size: 28rpx;
  color: #777777;
  background: #2b2b2b;
  text-align: center;

  flex-grow: 1;
  flex-shrink: 0;
}
.scroll-view-item_auto.active .scroll-view_name {
  color: #fff
}
.scroll-view-item_auto.active .scroll-view_name:after {
  background: #fff;
}


.scroll-view_name {
  display: inline-block;
  position: relative;
}
.scroll-view_name:after {
  content: '';
  position: absolute;
  left: -10rpx;
  right: -10rpx;
  bottom: -8rpx;
  /* width: 70%; */
  height: 4rpx;
  /* left: 15%; */
  background: transparent;
}