parent
93b7702aa6
commit
ca1f531322
@ -0,0 +1,202 @@
|
|||||||
|
/* 假设我们为背景容器添加一个类名，比如 .background-container */
|
||||||
|
.background-container {
|
||||||
|
display: flex;
|
||||||
|
width: 1703px;
|
||||||
|
height: 1151px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 242px 575px 242px 574px;
|
||||||
|
background: #FFF;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.outcontainer {
|
||||||
|
position: absolute;
|
||||||
|
top: 170px;
|
||||||
|
right: 156px;
|
||||||
|
bottom: 392px;
|
||||||
|
left: 150px;
|
||||||
|
display: flex;
|
||||||
|
width: 248px;
|
||||||
|
padding: 10px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outcontainer1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.firstcontainer {
|
||||||
|
position: relative;
|
||||||
|
width: 554px;
|
||||||
|
height: 667px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0px 0px 73px 27px rgba(0, 0, 0, 0.25);
|
||||||
|
background: #FFF;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 17px;
|
||||||
|
right: 32px;
|
||||||
|
bottom: 549.67px;
|
||||||
|
left: 388px;
|
||||||
|
fill: #9747FF;
|
||||||
|
width: 134px;
|
||||||
|
height: 100.333px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 196px;
|
||||||
|
right: 416.1px;
|
||||||
|
bottom: 416.57px;
|
||||||
|
left: 86px;
|
||||||
|
fill: #9747FF;
|
||||||
|
width: 134px;
|
||||||
|
height: 100.333px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
fill: #9747FF;
|
||||||
|
width: 51.904px;
|
||||||
|
height: 54.43px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 338px;
|
||||||
|
right: 415.39px;
|
||||||
|
bottom: 281.03px;
|
||||||
|
left: 92px;
|
||||||
|
fill: #9747FF;
|
||||||
|
width: 46.608px;
|
||||||
|
height: 47.972px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon3 {
|
||||||
|
position: absolute;
|
||||||
|
top: 483px;
|
||||||
|
right: 421.39px;
|
||||||
|
bottom: 134.18px;
|
||||||
|
left: 86px;
|
||||||
|
fill: #9747FF;
|
||||||
|
width: 46.608px;
|
||||||
|
height: 49.817px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: absolute;
|
||||||
|
top: 52px;
|
||||||
|
bottom: 564px;
|
||||||
|
left: 18px;
|
||||||
|
right: 166px;
|
||||||
|
width: 370px;
|
||||||
|
height: 51px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #000;
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 40px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 14px 4px 4px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.getexcel {
|
||||||
|
display: flex;
|
||||||
|
width: 228px;
|
||||||
|
height: 85px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 7px;
|
||||||
|
background: linear-gradient(0deg, rgba(148, 236, 36, 0.99) 0%, rgba(148, 236, 36, 0.99) 100%), #FFF;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
width: 63px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #FFF;
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 15px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outcontainer2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 319px;
|
||||||
|
bottom: 263px;
|
||||||
|
left: 160px;
|
||||||
|
right: 166px;
|
||||||
|
display: flex;
|
||||||
|
width: 228px;
|
||||||
|
height: 85px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 7px;
|
||||||
|
background: linear-gradient(0deg, rgba(164, 163, 211, 0.99) 0%, rgba(164, 163, 211, 0.99) 100%), #FFF;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text2 {
|
||||||
|
width: 63px;
|
||||||
|
height: 18px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #FFF;
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 15px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outcontainer3 {
|
||||||
|
position: absolute;
|
||||||
|
top: 465px;
|
||||||
|
bottom: 117px;
|
||||||
|
left: 160px;
|
||||||
|
right: 166px;
|
||||||
|
display: flex;
|
||||||
|
width: 228px;
|
||||||
|
height: 85px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 7px;
|
||||||
|
background: linear-gradient(0deg, rgba(42, 38, 223, 0.99) 0%, rgba(42, 38, 223, 0.99) 100%), #FFF;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text3 {
|
||||||
|
width: 63px;
|
||||||
|
height: 18px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #FFF;
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 15px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue