press-pix/popup-chat/css/index.less

基于 PixUI 的 Press 组件库

.chat-page{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  font-size: .2rem;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;

  // &.active{
  //   .chat-box{
  //     left: 0;
  //   }
  // }
}

.chat-box{
  width: 8.79rem;
  height: 100%;
  padding: .2rem;
  padding-left: .4rem;
  border: 1px solid black;
  background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/chat-bg.png);
  background-size: 100% 100%;
  font-size: .2rem;
  position: relative;
  // left: -10rem;
  // transition: all 0.3s;
}
.chat-a{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 6.3rem;
  margin-top: .14rem;
  overflow: scroll;
  scrollbar-color: transparent;
  scrollbar-width: 0;
}

.chat-box-user-logo{
  width: .09rem;
  height: .1rem;
  background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/velentine-left.png);
  background-size: 100%;
  position: absolute;
  left: .75rem;
  top: .55rem;
}
// me是代表本人
.chat-box-user-me{
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  width: 100%;
  margin-bottom: .3rem;
  background-size: 100%;
}
.chat-box-user-logo-me{
  width: .09rem;
  height: .1rem;
  background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/velentine-right.png);
  background-size: 100%;
  position: absolute;
  top: .55rem;
  right: .75rem;
}
.chat-box-user-info-me{
  width: 5rem;
  display: flex;
  margin-right: .1rem;
  flex-direction: column;
}
.chat-box-user-name-me{
  display: flex;
  flex-direction: row-reverse;
  color: #DE6707;

}
.chat-box-user-title-me{
  width:5rem;
  margin-top: .05rem;
  display: flex;
  flex-direction: row-reverse;

}
.chat-box-user-text-me{
  display: block;
  word-break: break-all;
  padding: .08rem .1rem;
  background-color: #FFFCEB;
  border: .02rem solid #FFE8A0;
}
.chat-box-user{
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  width: 100%;
  // height: 1.06rem;
  margin-bottom: .3rem;
  background-size: 100%;
}
.chat-box-user-inner{
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  width: 100%;
  background-size: 100%;
}
.chat-box-user-info{
  width: 5rem;
  display: flex;
  flex-direction: column;
  margin-left: .1rem;
}
.chat-box-user-name{
  margin: 0;
  color: #547FE6;
}
.chat-box-user-title{
  width:5rem;
  margin-top: 0.05rem;
}
.chat-box-user-text{
  display: block;
  word-break: break-all;
  padding: .08rem .1rem;
  background-color: #E5F1FF;
  border: .02rem solid #CDDDFF;
}
.chat-box-user-img{
  width: .72rem;
  height: .72rem;
}
.chat-back{
  width: 0.38rem;
  height: 2.54rem;
  position: absolute;
  margin-top: -1.27rem;
  top: 50%;
  right: -0.38rem;
  background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/velentine-lt-back.png);
  background-size: 100% 100%;
}
.chat-box-shadow{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 8.74rem;
  height: 1rem;
  background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/valentine-lt-b.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.chat-bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 8.74rem;
  height: 0.8rem;
  background-color: #fff;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-bottom: .10rem;
}

.chat-inp{
  width: 80%;
  height: .53rem;
  font-size: .2rem;
  background-color: #C9CFDC;
  padding-left: .2rem;
  padding-right: .2rem;
}
.chat-btn{
  width: 1.36rem;
  height: .6rem;
  font-size: .2rem;
  color: #f0f0f0;
  background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/velentine-btn-t.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 0.06rem;
}
.chat-btn-b{
  width: 1.36rem;
  height: .6rem;
  font-size: .2rem;
  color: #f0f0f0;
  background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/velentine-btn-f.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.07rem;
  padding-bottom: 0.04rem;
}
.btn-disabled{
  width: 10%;
  font-size: .2rem;
  padding-top: .13rem;
  padding-left: 0.2rem;
  background-color: #ffffff;
  color: #ccc;

}