131 lines
2.6 KiB
SCSS
Executable File
131 lines
2.6 KiB
SCSS
Executable File
//tabbar高度
|
|
$tabBarHeight: 110px;
|
|
|
|
.liveroom-page {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
@include page-scroll(0, $tabbar-height);
|
|
&-box {
|
|
display: flex;
|
|
margin: 25px 0px;
|
|
background: #fff;
|
|
}
|
|
&-left {
|
|
position: relative;
|
|
width: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
.left-img {
|
|
width: 100%;
|
|
}
|
|
.left-mengceng {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 88;
|
|
width: 100%;
|
|
height: 50%;
|
|
background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
|
|
}
|
|
.left-state {
|
|
position: absolute;
|
|
left: 7%;
|
|
top: 4%;
|
|
z-index: 99;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.lives {
|
|
border-radius: 50%;
|
|
width: 45px;
|
|
height: 45px;
|
|
position: absolute;
|
|
left: -15px;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.content {
|
|
padding: 0px 15px;
|
|
padding-left: 35px;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
font-size: 24px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
color: #fff;
|
|
border-radius: 80px;
|
|
}
|
|
.icons {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
}
|
|
}
|
|
&-right {
|
|
width: 50%;
|
|
padding: 20px 30px;
|
|
flex-direction: column;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
padding-bottom: 150px;
|
|
position: relative;
|
|
.right-title {
|
|
@include multi-ellipsis(2);
|
|
}
|
|
.right-count {
|
|
color: #999;
|
|
font-size: 24px;
|
|
.fs {
|
|
font-size: 24px;
|
|
}
|
|
.at-countdown__item {
|
|
align-items: baseline;
|
|
}
|
|
.at-countdown__time-box {
|
|
font-size: 26px;
|
|
color: #999;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
}
|
|
.at-countdown__separator {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
.right-btn {
|
|
padding: 10px 30px;
|
|
border-radius: 80px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
position: absolute;
|
|
bottom: 7%;
|
|
right: 5%;
|
|
.icons {
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
.lives {
|
|
background: #F4811F;
|
|
}
|
|
.notice {
|
|
background: #4980FF;
|
|
}
|
|
.return {
|
|
background: #FFFFFF;
|
|
}
|
|
.return-border {
|
|
border: 1px solid #AAAAAA;
|
|
border-radius: 80px;
|
|
color: #222222;
|
|
}
|
|
.notice-border {
|
|
border: 1px solid #4980FF;
|
|
border-radius: 80px;
|
|
color:#4980FF;
|
|
}
|
|
} |