press-pix
Version:
基于 PixUI 的 Press 组件库
110 lines (106 loc) • 2.49 kB
text/less
.record-item {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 1.12rem;
flex-shrink: 0;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/rank-item-bg.png);
background-size: 100% 100%;
margin-bottom: .06rem;
font-size: .2rem;
text-align: left;
color: #294391;
flex-shrink: 0;
}
.record-col-item {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
justify-content: center;
line-height: .2rem;
font-family: gamefontyahei;
&:nth-child(1) {
width: 3.6rem;
justify-content: flex-start;
padding-left: .26rem;
}
&:nth-child(2) {
width: 2.4rem;
}
&:nth-child(3) {
width: 2.4rem;
}
&:nth-child(4) {
width: 3rem;
}
&:nth-child(5) {
width: 2.2rem;
}
.record-img-box {
width: .8rem;
height: .8rem;
background: #c7d1e9;
display: flex;
justify-content: center;
align-items: center;
position: relative;
flex-shrink: 0;
.record-img {
object-fit: contain;
width: .66rem;
height: .66rem;
}
.record-img-text {
font-size: .2rem;
color: #060B19;
font-family: GameFont;
position: absolute;
bottom: .02rem;
right: .06rem;
}
}
.record-img-text {
margin-left: .15rem;
}
.record-status-text {
width: 1.38rem;
height: .56rem;
display: flex;
align-items: center;
justify-content: center;
font-size: .22rem;
position: relative;
top: .02rem;
color: #2F140D;
font-family: GameFont;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/btn/third-yellow-btn.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
line-clamp: 2;
&.record-status-text-disabled {
background-image: unset;
font-size: .2rem;
color: #888888;
}
&.record-status-text-delivered {
background-image: unset;
font-size: .2rem;
color: #6883C8;
}
&.record-status-text-progress {
background-image: unset;
font-size: .2rem;
color: #E7692B;
}
&.record-status-text-failure {
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/btn/third-blue-btn-disabled.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
color: #4A609A;
}
}
}