press-pix
Version:
基于 PixUI 的 Press 组件库
389 lines (371 loc) • 9.72 kB
text/less
.sche-page {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 90;
background-color: #fff;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/record/record-list-bg.jpg?t=1);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
.sche-page-wrap {
width: 15.6rem;
height: 7.2rem;
display: flex;
flex-direction: column;
}
// 带侧边栏样式覆盖
.sche-page-wrap-nav {
.content-tab {
.content-tab-wrap {
margin-left: -.2rem;
}
}
.content {
margin-left: -.2rem;
}
}
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: .52rem;
margin-bottom: .2rem;
margin-top: .16rem;
.header-left {
display: flex;
flex-direction: row;
align-items: center;
margin-left: .89rem;
}
.btn-back{
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;
margin-right: .23rem;
}
.title {
font-size: .28rem;
font-family: GameFont;
position: relative;
top: .02rem;
}
.btn-my-sche {
height: .31rem;
border: 1px solid #547FE6;
padding: 0 .13rem;
display: flex;
flex-direction: row;
align-items: center;
.btn-my-sche-text {
font-size: .2rem;
color: #0c32a6;
font-family: GameFont;
position: relative;
top: .02rem;
.btn-my-sche-text-number {
color: #de6707;
}
}
.btn-my-sche-icon {
width: .12rem;
height: .2rem;
margin-left: .08rem;
}
.btn-subscribe-icon {
width: .2rem;
height: .2rem;
margin-right: .08rem;
position: relative;
top: .01rem;
}
}
}
.sche-tree-content-wrap {
flex-grow: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.reward-page-bar {
width: 2.01rem;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
flex-shrink: 0;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/bar-bg2.png);
background-repeat: no-repeat;
background-size: contain;
padding-top: .46rem;
margin-right: .46rem;
overflow: scroll;
scrollbar-color: transparent;
scrollbar-width: 0;
.reward-page-bar-item {
width: 1.89rem;
height: .9rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
font-size: .24rem;
color: #294391;
padding-right: .29rem;
position: relative;
padding-top: .06rem;
flex-shrink: 0;
.reward-page-bar-text {
font-family: GameFont;
position: relative;
top: .02rem;
}
&.item-active {
color: #FFFFFF;
&::before {
content: '';
position: absolute;
width: 1.89rem;
height: 1.12rem;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/bar-active.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
}
.tab-switch-right {
max-width: 13.8rem;
flex-grow: 1;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
}
.tab-switch-wrap{
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
flex-shrink: 0;
.tab-switch {
display: flex;
flex-direction: row;
margin-bottom: .19rem;
flex-shrink: 0;
.tab-item {
width: 3.35rem;
height: .34rem;
display: flex;
justify-content: center;
align-items: center;
background: rgba(169, 191, 242, .3);
.tab-item-text {
font-size: .22rem;
color: #6B89DF;
font-family: GameFont;
position: relative;
top: .02rem;
}
&.tab-active {
background: url(https://image-1251917893.file.myqcloud.com/Esports/schedule/sche-type-bg.png) no-repeat;
background-size: 100% 110%;
background-position: center center;
.tab-item-text {
color: #060B19;
}
}
}
}
}
.group-tab-switch-wrap{
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
flex-shrink: 0;
overflow: scroll;
scrollbar-color: transparent;
scrollbar-width: 0;
.group-tab-switch {
display: flex;
flex-direction: row;
margin-bottom: .19rem;
flex-shrink: 0;
.group-tab-item {
width: 1.54rem;
height: .34rem;
display: flex;
justify-content: center;
align-items: center;
background: rgba(169, 191, 242, .3);
.group-tab-item-text {
font-size: .22rem;
color: #6B89DF;
font-family: GameFont;
position: relative;
top: .02rem;
}
&.group-tab-active {
background: url(https://image-1251917893.file.myqcloud.com/Esports/schedule/sche-type-bg.png) no-repeat;
background-size: 100% 110%;
background-position: center center;
.group-tab-item-text {
color: #060B19;
}
}
}
}
}
.content-tab {
width: 100%;
overflow: hidden;
height: .7rem;
.content-tab-wrap {
height: .5rem;
flex-shrink: 0;
transition: left .5s ease-in-out;
position: relative;
.content-tab-item {
width: 3.62rem;
height: .5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
flex-shrink: 0;
.content-tab-item-line {
width: 100%;
height: .01rem;
background-color: #C4D4FB;
position: absolute;
top: .12rem;
left: 0;
}
.content-tab-item-dot {
width: .18rem;
height: .18rem;
background: url(https://image-1251917893.file.myqcloud.com/Esports/schedule/dot1.png) no-repeat center center;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
overflow: hidden;
position: relative;
flex-shrink: 0;
z-index: 10;
}
.content-tab-item-text {
font-size: .2rem;
color: #8099D7;
font-family: GameFont;
position: relative;
top: .02rem;
display: flex;
flex-direction: row;
align-items: center;
}
.content-tab-item-tag {
width: .7rem;
height: .2rem;
background: #3DC1C9;
border-radius: .1rem 0 .1rem 0;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
margin-left: .05rem;
.content-tab-item-tag-text {
font-size: .16rem;
color: #FFFFFF;
font-family: GameFont;
position: relative;
top: .01rem;
}
}
// 已结束
&.ended {
.content-tab-item-dot {
background: url(https://image-1251917893.file.myqcloud.com/Esports/schedule/dot2.png) no-repeat center center;
background-size: 100% 100%;
}
.content-tab-item-line {
background-color: #4F84FF;
}
.content-tab-item-text {
color: #15307F;
}
}
// 进行中
&.in-progress {
.content-tab-item-dot {
background: url(https://image-1251917893.file.myqcloud.com/Esports/schedule/dot3.png) no-repeat center center;
background-size: 100% 100%;
}
.content-tab-item-text {
color: #1255F0;
}
.content-tab-item-line {
background-color: #4F84FF;
}
}
}
}
}
.content {
flex-grow: 1;
overflow: scroll;
scrollbar-color: transparent;
scrollbar-width: 0;
.content-wrap {
flex-shrink: 0;
overflow: hidden;
width: 100%;
display: flex;
flex-direction: row;
transition: opacity 0.3s ease-in-out,
}
.content-item {
width: 3.62rem;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: .28rem;
flex-shrink: 0;
.sche-item-line {
width: .02rem;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-image: url(https://image-1251917893.file.myqcloud.com/Esports/schedule/tree-line1.png);
background-position: right top;
background-size: 25px 25px;
background-repeat: repeat;
}
.sche-item {
width: 3rem;
height: 1.5rem;
display: flex;
flex-direction: column;
flex-shrink: 0;
position: relative;
margin-bottom: .24rem;
}
}
}
}