parent
9c60cacb37
commit
48231526ac
@ -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