press-pix/popup-battle-explain/css/bp.less

基于 PixUI 的 Press 组件库

.bp-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.bp-list {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  scrollbar-width: 0;
  overflow: scroll;
}

.bp-title {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  width: 100%;
  height: .32rem;
  margin-bottom: .13rem;
  background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/bp-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bp-order,
.bp-name {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: GameFont;
  font-size: .2rem;
  color: #fff;
}

.bp-queue,
.bp-order {
  width: 1.32rem;
  flex-shrink: 0;
}

.bp-name,
.bp-text {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.bp-item {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  width: 100%;
  height: .42rem;
  margin-bottom: .06rem;
  background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/bp-item.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bp-queue,
.bp-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: .2rem;
  color: #4286ed;
}

.bp-red {
  color: #e7692b;
}