press-pix/live-page/css/index.less

基于 PixUI 的 Press 组件库

// 向下移动
@keyframes slideDownFadeIn {
  from {
    opacity: 0;
    transform: translate(0, -60px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
// 向上消失
@keyframes slideDownFadeOut {
  from {
    opacity: 1;
    transform: translate(0, 0);
  }
  to {
    opacity: 0;
    transform: translate(0, -60px);
  }
}
// 向上移动
@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translate(0, 200px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
// 向下消失
@keyframes slideUpFadeOut {
  from {
    opacity: 1;
    transform: translate(0, 0);
  }
  to {
    opacity: 0;
    transform: translate(0, 200px);
  }
}
// 透明度
@keyframes opacityFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
// 向左移动
@keyframes slideLeftFadeIn {
  from {
    opacity: 0;
    transform: translate(-200px, 0);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
// 向右移动
@keyframes slideRightFadeIn {
  from {
    opacity: 0;
    transform: translate(200px, 0);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
// 基础样式
.live-page {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/live-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  .live-page-inner{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 13.6rem;
    height: 7.2rem;
    z-index: 9;
  }
  .live-page-title{
    position: absolute;
    top: 0;
    left: .26rem;
    font-size: .28rem;
    font-family: GameFont;
    display: flex;
    flex-direction: column;
    animation: slideDownFadeIn .5s ease-in-out forwards;
    opacity: 0;
    .match-name {
      font-size: .28rem;
      color: #060B19;
      font-family: GameFont;
      position: relative;
      top: .02rem;
      left: .2rem;
      line-clamp: 1;
    }
  }
  .btn-back {
    position: absolute;
    top: 0;
    left: -.36rem;
    width: .62rem;
    height: .3rem;
    background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/velentine-back-h.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 10;
    &.fixed-back {
      position: fixed;
      top: .23rem;
      left: .75rem;
    }
  }
}

.live-page-battle{
  margin-top: .6rem;
  display: flex;
  flex-direction: row;
  width: 14rem;
  position: relative;
  left: -0.4rem;
}
.battle-team{
  width: 10.43rem;
  height: .81rem;
  background: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/battle-bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: .4rem;
  padding-right: .6rem;

  flex-direction: row;
}
.team-item{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 4rem;
}
.team-b{
  justify-content: flex-end;
}
.team-img{
  width: .56rem;
  height: .56rem;
  border: .02rem solid #0C2F9C;
  border-radius: 50%;
  margin: 0 .2rem;
}
.team-name{
  font-size: .26rem;
  color: #fff;
  font-family: GameFont;
  position: relative;
  top: .02rem;
  max-width: 2.2rem;
  line-clamp: 1;
}
.team-vs{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: .1rem;
  flex-grow: 1;
}
.vs-rand{
  font-size: .16rem;
  color: #060B19;
}
.vs-score{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: .08rem;
}
.score-text{
  font-size: .36rem;
  font-family: GameFont;
  position: relative;
  top: .02rem;
  color: #060B19;
}
.score-colon{
  margin: 0 .04rem;
}
.extra-info{
  display: flex;
  flex-direction: row;
  align-items: center;
  align-items: flex-end;
  justify-content: flex-end;
  width: 4rem;
  flex-shrink: 0;
  padding-bottom: .08rem;
}
.info-item{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.narrate-icon{
  width: .22rem;
  height: .22rem;
  background: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/headset-icon.png) no-repeat;
  background-size: 100% 100%;
  margin-right: .04rem;
}
.audience-icon{
  width: .24rem;
  height: .18rem;
  background: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/spectator-icon.png) no-repeat;
  background-size: 100% 100%;
  margin-left: .3rem;
  margin-right: .04rem;
}
.extra-text{
  max-width: 100%;
  line-clamp: 1;
  font-size: .18rem;
  color: #798DC6;
  font-family: GameFont;
  white-space: nowrap;
  line-clamp: 1;
  position: relative;
  top: .02rem;
}

.info-audience{
  flex-shrink: 0;
}
.live-detail{
  display: flex;
  flex-direction: row;
  z-index: 11;
}
// 聊天区域
.msg-box{
    display: flex;
    flex-direction: column;
  .msg-content{
    width: 4.1rem;
    height: 4.64rem;
    border: .01rem solid #9DAEDE;
    padding-left: .2rem;
    display: flex;
    flex-direction: column;
  }
  .msg-title{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: .14rem 0;
  }
  .msg-title-icon{
    background: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/sound-icon.png) no-repeat;
    background-size: 100% 100%;
    width: .24rem;
    height: .2rem;
    margin-right: .08rem;
    position: relative;
    top: .01rem;
  }
  .msg-title-text{
    font-size: .2rem;
    color: #060B19;
  }
  .msg-content-box{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: scroll;
    background: rgba(243, 247, 255, 0.85);
    padding-bottom: .04rem;
    scrollbar-width: none;
  }
  .msg-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    word-break: break-all;
    flex-shrink: 0;
    font-size: .2rem;
    color: #060B19;
    width: 3.8rem;
    margin-top: .06rem;
    line-height: .28rem;
    position: relative;
  }
  .msg-item-type-box{
    width: .44rem;
    height: .24rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #2667FF;
    position: absolute;
    top: -.04rem;
    &.msg-item-type-box-gray {
      background: #5C6F86;
    }
  }
  .msg-item-type{
    color: #fff;
    font-size: .16rem;
    position: relative;
    top: .01rem;
  }
  .msg-item-msg{
    line-height: .24rem;
  }
  .extra-text-user-neme{
    flex-shrink: 0;
    font-size: .2rem;
    color: #798DC6;
  }
  .extra-text-user-type{
    flex-shrink: 0;
    font-size: .2rem;
    color: #DE6707;
  }

  .extra-text-user-msg{
    flex-shrink: 0;
    font-size: .2rem;
    color: #060B19;
  }
  .live-chat{
    width: 4.1rem;
    height: .48rem;
    margin-top: .11rem;
    border: .01rem solid #B2C5FA;
    background: rgba(45, 71, 146, 0.6);
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .chat-type{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: .9rem;
  }
  .chat-type-text{
    color: #C1CFF6;
    font-size: .2rem;
  }
  .chat-switchover{
    background: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/switchover-icon.png) no-repeat;
    background-size: 100% 100%;
    width: .21rem;
    height: .17rem;
    margin-left: .04rem;
  }
  .chat-partition{
    width: .01rem;
    height: .3rem;
    background: #C1CFF6;
    margin-right: .2rem;
  }
  .chat-content{
    height: 100%;
    color: #C1CFF6;
    font-size: .2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
  }
  .chat-content::-moz-placeholder {
    color: #C1CFF6;
    position: relative;
    top: .02rem;
  }
  .chat-content::-webkit-input-placeholder {
    color: #C1CFF6;
    position: relative;
    top: .02rem;
  }
  .chat-content::-ms-input-placeholder {
    color: #C1CFF6;
    position: relative;
    top: .02rem;
  }
}

// 视频区域
.live-content{
  width: 9.4rem;
  height: 5.23rem;
  background-color: #000;
  margin-right: .1rem;
  position: relative;
  overflow: hidden;
}
.live-content-spread{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 11;
  .live-bottom{
    height: 2rem;
    padding-top: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.video-title{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: .3rem;
  animation: slideDownFadeIn .2s ease-out forwards;
}
.video-title-hide{
  animation: slideDownFadeOut .2s ease-out forwards;
  pointer-events: none;
}
.live-page-video{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
  z-index: 1;
}
.video-back{
  width: .62rem;
  height: .3rem;
  background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/velentine-back.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.video-title-text{
  color: #fff;
  font-size: .24rem;
  font-family: GameFont;
  position: relative;
  top: .02rem;
  margin-left: .3rem;
}
.live-bottom{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  z-index: 2;
  background: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/video-mask-bottom.png) no-repeat;
  background-size: cover;
  width: 100%;
  height: 1.2rem;
  padding-top: .4rem;
  padding-left: .3rem;
  padding-right: .3rem;
  animation: slideUpFadeIn .2s ease-out forwards;
}
.live-bottom-hide{
  animation: slideUpFadeOut .2s ease-out forwards;
  pointer-events: none;
}

.live-play-icon{
  background: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/play-icon.png) no-repeat;
  background-size: 100% 100%;
  width: .34rem;
  height: .34rem;
}
.live-pause-icon{
  background: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/pause-icon.png) no-repeat;
  background-size: 100% 100%;
  width: .34rem;
  height: .34rem;
}


.live-control{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.live-definition-btn{
  color: #fff;
  font-size: .24rem;
  font-family: GameFont;
  position: relative;
  top: .01rem;
  margin-right: .34rem;
}
.live-spread-icon{
  background: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/spread-icon.png) no-repeat;
  background-size: 100% 100%;
  width: .34rem;
  height: .34rem;
}

.live-shrink-icon{
  background: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/shrink-icon.png) no-repeat;
  background-size: 100% 100%;
  width: .34rem;
  height: .34rem;
}
.live-definition-set{
  background: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/video-mask-right.png) no-repeat;
  background-size: 100% 100%;
  width: 5rem;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  padding-top: .3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: .18rem;
  animation: slideRightFadeIn .2s ease-out forwards;
}
.live-content-spread{
  .live-definition-set{
    width: 7.46rem;
    padding-top: .9rem;
    padding-right: .64rem;
  }
  .live-definition-title{
    width: 3.89rem;
  }
  .live-definition-item{
    width: 3.89rem;
  }
  .live-definition-line{
    width: 3.89rem;
  }
  .live-definition-title-text{
    font-size: .26rem;
  }
}
.live-definition-title{
  width: 2.89rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.live-definition-title-text{
  color: #fff;
  font-size: .22rem;
  font-family: GameFont;
  position: relative;
  top: .01rem;
}
.live-definition-title-close{
  background: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/close-icon.png) no-repeat;
  background-size: 100% 100%;
  width: .18rem;
  height: .18rem;
}
.live-definition-line{
  width: 2.89rem;
  height: .04rem;
  background: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/definition-line.png) no-repeat;
  background-size: 100% 100%;
  margin-top: .16rem;
  margin-bottom: .04rem;
}
.live-definition-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.live-definition-item{
  position: relative;
  width: 2.89rem;
  height: .7rem;
  margin-top: .21rem;
  padding: 0 .2rem;
  background: rgba(43, 56, 95, 0.36);
}
.live-definition-item-active{
  background: rgba(41, 67, 145, 0.8);
  border:  .01rem solid #4774DD;
}
.definition-item-decorate-left{
  position: absolute;
  top: -.12rem;
  left: 0;
  background: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/decorate-left.png) no-repeat;
  background-size: 100% 100%;
  width: .8rem;
  height: .48rem;
  z-index: 1;
}
.definition-item-decorate-right{
  position: absolute;
  right: -.1rem;
  bottom: 0;
  background: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/live/decorate-right.png) no-repeat;
  background-size: 100% 100%;
  width: .6rem;
  height: .53rem;
  z-index: 1;
}
.definition-item-decorate-center{
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: .22rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 2;
  position: relative;
}
.definition-item-hot{
  position: absolute;
  right: 0;
  width: .57rem;
  height: .28rem;
  border: .01rem solid #F5B74C;
  border-radius: .03rem;
  color: #F5B74C;
  font-size: .18rem;
  font-family: GameFont;
  text-align: center;
  line-height: .28rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.definition-item-hot-text{
  position: relative;
  top: .01rem;
}
.definition-item-desc{
  margin-left: .2rem;
  font-family: GameFont;
  position: relative;
  top: .01rem;
}
.definition-item-name{
  font-family: GameFont;
  position: relative;
  top: .01rem;
}