#index {
|
color: #d3d6dd;
|
background-color: #000000;
|
width: 100%;
|
height: 100%;
|
|
.bg {
|
padding: 0.2rem 0.2rem 0 0.2rem;
|
|
background-size: cover;
|
background-position: center center;
|
}
|
|
.host-body {
|
.title {
|
position: relative;
|
width: 6.25rem;
|
text-align: center;
|
background-size: cover;
|
background-repeat: no-repeat;
|
|
.title-text {
|
font-size: 0.3rem;
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translate(-50%);
|
}
|
|
.title-bototm {
|
position: absolute;
|
bottom: -0.375rem;
|
left: 50%;
|
transform: translate(-50%);
|
}
|
}
|
|
// 平行四边形
|
.react-left {
|
cursor: pointer;
|
font-size: 0.225rem;
|
width: 3.75rem;
|
height: 0.625rem;
|
line-height: 0.625rem;
|
text-align: center;
|
transform: skewX(-45deg);
|
|
.react-after {
|
position: absolute;
|
right: -0.3125rem;
|
top: 0;
|
height: 0.625rem;
|
width: 0.625rem;
|
background-color: #0f1325;
|
transform: skewX(45deg);
|
}
|
|
.text {
|
display: inline-block;
|
transform: skewX(45deg);
|
}
|
}
|
|
.react-right {
|
cursor: pointer;
|
font-size: 0.225rem;
|
width: 3.75rem;
|
height: 0.625rem;
|
line-height: 0.625rem;
|
text-align: center;
|
transform: skewX(45deg);
|
|
.react-before {
|
position: absolute;
|
left: -0.3125rem;
|
top: 0;
|
height: 0.625rem;
|
width: 0.625rem;
|
background-color: #0f1325;
|
transform: skewX(-45deg);
|
}
|
|
.text {
|
display: inline-block;
|
transform: skewX(-45deg);
|
}
|
}
|
|
.body-box {
|
margin-top: 0.2rem;
|
display: flex;
|
flex-direction: column;
|
|
//下方区域的布局 顾梦炀 修改记录
|
.content-box {
|
display: grid;
|
// grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
|
|
grid-template-columns: 2fr 3fr 5fr 3fr;
|
|
}
|
|
// 底部数据
|
.bototm-box {
|
margin-top: 0.125rem;
|
display: grid;
|
grid-template-columns: repeat(2, 50%);
|
}
|
}
|
}
|
}
|
