1.0版本完成

This commit is contained in:
MTrunning
2020-03-18 21:27:37 +08:00
parent 77b384b613
commit a6d8dbd8eb
6 changed files with 580 additions and 104 deletions
+86 -85
View File
@@ -12,99 +12,100 @@
background-image: url("../assets/pageBg.png");
}
.title {
position: relative;
width: 500px;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
.host-body {
.title {
position: relative;
width: 500px;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
.title-text {
font-size: 2rem;
position: absolute;
bottom: 0px;
left: 50%;
transform: translate(-50%);
.title-text {
font-size: 2rem;
position: absolute;
bottom: 0px;
left: 50%;
transform: translate(-50%);
}
.title-bototm {
position: absolute;
bottom: -30px;
left: 50%;
transform: translate(-50%);
}
}
.title-bototm {
position: absolute;
bottom: -30px;
left: 50%;
transform: translate(-50%);
}
}
// 平行四边形
.react-left {
cursor: pointer;
font-size: 1.3rem;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
transform: skewX(-45deg);
.react-after {
position: absolute;
right: -25px;
top: 0px;
// 平行四边形
.react-left {
cursor: pointer;
font-size: 1.3rem;
width: 300px;
height: 50px;
width: 50px;
background-color: #0f1325;
transform: skewX(45deg);
}
.text {
display: inline-block;
transform: skewX(45deg);
}
}
.react-right {
cursor: pointer;
font-size: 1.3rem;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
transform: skewX(45deg);
.react-before {
position: absolute;
left: -25px;
top: 0px;
height: 50px;
width: 50px;
background-color: #0f1325;
line-height: 50px;
text-align: center;
transform: skewX(-45deg);
.react-after {
position: absolute;
right: -25px;
top: 0px;
height: 50px;
width: 50px;
background-color: #0f1325;
transform: skewX(45deg);
}
.text {
display: inline-block;
transform: skewX(45deg);
}
}
.text {
display: inline-block;
transform: skewX(-45deg);
.react-right {
cursor: pointer;
font-size: 1.3rem;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
transform: skewX(45deg);
.react-before {
position: absolute;
left: -25px;
top: 0px;
height: 50px;
width: 50px;
background-color: #0f1325;
transform: skewX(-45deg);
}
.text {
display: inline-block;
transform: skewX(-45deg);
}
}
.body-box {
margin-top: 1rem;
display: flex;
flex-direction: column;
//下方区域的布局
.content-box {
display: grid;
grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
}
// 底部数据
.bototm-box {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(2, 50%);
}
}
}
.body-box {
margin-top: 1rem;
display: flex;
flex-direction: column;
//下方区域的布局
.content-box {
display: grid;
grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
}
// 底部数据
.bototm-box {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(2, 50%);
}
}
}