ClassroomRollCallSystem/style.css

/* 假设我们为背景容器添加一个类名，比如 .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;
}