* { padding: 0; margin: 0; box-sizing: border-box; } .flexflex { display: flex; } .flexcenter { display: flex; justify-content: center; align-items: center; } .flexjcenter { display: flex; justify-content: center; } .flexacenter { display: flex; align-items: center; } .flex1 { flex: 1; } .flexcolumn { display: flex; flex-direction: column; } body { background-color: #eef2f5; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; } .main { width: 1200px; margin: 0 auto; } .main .index-icon { width: 184px; height: 42px; margin-top: 37px; margin-bottom: 40px; } .main .header-box { width: 100%; height: 130px; padding: 0 50px; border-radius: 12px; justify-content: space-between; position: relative; margin-bottom: 20px; } .main .header-box:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; background-image: linear-gradient(to right, rgba(60, 26, 94, 0.717647), rgba(53, 60, 90, 0.886275)); z-index: -1; } .main .header-box .bj { position: absolute; top: 0; left: 0; z-index: -2; } .main .header-box .search { width: 610px; height: 48px; background-color: rgba(255, 255, 255, 0.4); border-radius: 183px; padding: 0 20px; cursor: pointer; } .main .header-box .search .input { height: 48px; line-height: 48px; background-color: transparent; color: #ffffff; } .main .header-box .search .search-icon { width: 22px; height: 22px; } .main .header-box .btn .item { width: 160px; height: 40px; background: -webkit-linear-gradient(194.03624347deg, #dbe3fd 0%, #eef7f5 100%); background: -moz-linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%); background: linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%); border-radius: 70px; margin-left: 20px; font-size: 16px; color: #000000; cursor: pointer; } .main .header-box .btn .item .icon { height: 22px; margin-right: 8px; } .main .screen { margin-bottom: 20px; } .main .screen .block { background-color: #ffffff; border-radius: 12px; padding: 24px 34px 32px; } .main .screen .block .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-size: 18px; color: #000000; margin-bottom: 26px; } .main .screen .block .title .icon { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; } .main .screen .block .title .icon .img { width: 24px; } .main .screen .block .list .item { width: fit-content; height: 36px; line-height: 36px; background-color: #fbfbfb; border: 1px solid #ebebeb; border-radius: 12px; font-size: 14px; color: #333; cursor: pointer; } .main .screen .block.school { width: 500px; margin-right: 20px; } .main .screen .block.school .title .icon { background-color: #d5f1f7; } .main .screen .block.school .list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .main .screen .block.school .list .item { width: 78px; } .main .screen .block.subject { padding-bottom: 22px; } .main .screen .block.subject .title .icon { background-color: #fdefbc; } .main .screen .block.subject .list { flex-wrap: wrap; } .main .screen .block.subject .list .item { padding: 0 17px; margin-right: 10px; margin-bottom: 10px; } .main .fate { width: 100%; background-color: #ffffff; border-radius: 12px; margin-bottom: 20px; padding: 31px 37px 10px; } .main .fate .title { justify-content: space-between; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-size: 18px; color: #000000; margin-bottom: 6px; } .main .fate .title .btn { font-weight: 400; color: #555555; font-size: 14px; cursor: pointer; } .main .fate .title .btn .icon { width: 16px; height: 16px; margin-right: 8px; } .main .fate .list { justify-content: space-between; flex-wrap: wrap; } .main .fate .list .item { width: 530px; margin-left: 20px; padding-top: 22px; padding-bottom: 22px; justify-content: space-between; } .main .fate .list .item:not(:nth-last-child(-n + 2)) { border-bottom: 1px dotted #ebebeb; } .main .fate .list .item .left .name { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-size: 16px; color: #000000; margin-bottom: 6px; position: relative; } .main .fate .list .item .left .name::after { content: ""; position: absolute; top: 50%; left: -20px; transform: translateY(-50%); width: 8px; height: 8px; background-color: #f2f2f2; border: 1px solid #d7d7d7; border-radius: 39px; } .main .fate .list .item .left .message { color: #7f7f7f; font-size: 14px; } .main .fate .list .item .left .message .virgule { color: #d7d7d7; } .main .fate .list .item .btn { width: 110px; height: 32px; background: -webkit-linear-gradient(196.2201937deg, #dbe3fd 0%, #eef7f5 100%); background: -moz-linear-gradient(253.7798063deg, #dbe3fd 0%, #eef7f5 100%); background: linear-gradient(253.7798063deg, #dbe3fd 0%, #eef7f5 100%); border-radius: 61px; font-size: 14px; color: #000000; cursor: pointer; } .main .fate .list .item .btn .add { width: 24px; height: 24px; background-color: #ffffff; border: 1px solid #dbe3fd; border-radius: 20px; margin: 0 3px; } .main .fate .list .item .btn .add .icon { width: 10px; height: 10px; } .main .recruit { width: 100%; height: 502px; background: linear-gradient(-36.49404556deg, #cfe0f9 -23%, #f1f2df 39%, #eef7f5 114%); border: 1px solid #ebebeb; border-radius: 16px; padding: 24px 30px 24px; margin-bottom: 20px; } .main .recruit .title { justify-content: space-between; margin-bottom: 20px; } .main .recruit .title .img { width: 100px; height: 26px; } .main .recruit .title .btn { font-size: 14px; color: #333333; cursor: pointer; } .main .recruit .title .btn .icon { width: 16px; height: 16px; margin-left: 7px; transform: rotate(270deg); } .main .recruit .list { overflow: hidden; margin-bottom: 20px; } .main .recruit .list .list-item { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .main .recruit .list .item { width: 565px; height: 180px; background-color: #ffffff; border: 1px solid #ebebeb; border-radius: 12px; padding: 25px 24px; align-items: flex-start; } .main .recruit .list .item .avatar { width: 32px; object-fit: contain; margin-right: 10px; } .main .recruit .list .item .info .school { font-size: 14px; color: #333333; margin-bottom: 10px; } .main .recruit .list .item .info .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-size: 16px; color: #000000; margin-bottom: 10px; } .main .recruit .list .item .info .name-en { font-size: 14px; color: #7f7f7f; margin-bottom: 15px; } .main .recruit .list .item .info .aq { width: 477px; height: 36px; line-height: 36px; background-color: #f9f8f8; border-radius: 3px; padding: 0 10px; } .main .recruit .list .item .info .aq .text { font-size: 14px; color: #e4c762; margin-right: 10px; } .main .recruit .list .item .info .aq .value { font-size: 15px; color: #333333; } .main .recruit .list .item .info .aq .icon { width: 20px; height: 20px; } .main .recruit .indicate { line-height: 12px; } .main .recruit .indicate .icon { width: 7px; height: 12px; cursor: pointer; } .main .recruit .indicate .text { color: #555555; font-size: 13px; margin: 0 12px; } .main .data .fall { width: 285px; display: block; } .main .data .item { width: 285px; height: 332px; background-color: #ffffff; border: 1px solid #ebebeb; border-radius: 12px; } .main .data .item .school { font-size: 14px; color: #333333; } .main .data .item .school .img { height: 20px; margin-right: 8px; } .main .data .item .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #000000; } .main .data .item .name-en { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; color: #555555; } .main .data .item .introduce { color: #555555; font-size: 14px; } .main .data .item .introduce .quantity { font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; color: #000000; margin-left: 8px; } .main .data .item .introduce .line { color: #d7d7d7; margin: 0 10px; }