diff --git a/css/index.css b/css/index.css index e6280c7..22a49d2 100644 --- a/css/index.css +++ b/css/index.css @@ -293,6 +293,38 @@ height: 20px; margin-left: 6px; } +.admission-officer .admission-body .preach-box { + width: 100%; + height: 435px; + margin: 0 auto 22px; + position: relative; + z-index: 1; +} +.admission-officer .admission-body .preach-box .bj { + width: 100%; + height: 435px; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +.admission-officer .admission-body .preach-box .left { + padding-top: 14px; + padding-left: 20px; + margin-right: 20px; +} +.admission-officer .admission-body .preach-box .left .head { + margin-bottom: 11px; +} +.admission-officer .admission-body .preach-box .left .head .icon { + width: 38px; + height: 50px; + margin-right: 1px; +} +.admission-officer .admission-body .preach-box .left .head .name { + width: 125px; + height: 36px; +} .admission-officer .admission-body .interview-more { margin-bottom: 102px; } @@ -390,7 +422,8 @@ .admission-officer .admission-body .school-list .school-item .left { position: relative; margin-right: 45px; - z-index: 2; + z-index: 3; + width: 505px; } .admission-officer .admission-body .school-list .school-item .left .abbreviation { width: 100px; @@ -418,8 +451,12 @@ left: 0; z-index: 1; } +.admission-officer .admission-body .school-list .school-item .left .img { + width: 505px; +} .admission-officer .admission-body .school-list .school-item .right { width: 651px; + z-index: 2; } .admission-officer .admission-body .school-list .school-item .right .info { padding-bottom: 24px; @@ -438,6 +475,11 @@ color: #000000; margin-bottom: 6px; } +.admission-officer .admission-body .school-list .school-item .right .info .name .arrows { + width: 12px; + height: 12px; + margin-left: 10px; +} .admission-officer .admission-body .school-list .school-item .right .info .english { color: #555555; font-size: 13px; @@ -505,18 +547,43 @@ height: 5px; margin-left: 5px; vertical-align: middle; + transition: all 0.3s; } -.admission-officer .admission-body .school-list .school-item .right .content .year .item:hover .more-box { +.admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold { + color: #fff; +} +.admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold .svg { + fill: #76c45e; +} +.admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold .arrows { + fill: #fff; + transform: translateY(-50%) rotate(180deg); +} +.admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold .more-mask { display: block; } +.admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold .more-box { + display: block; +} +.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: none; + display: none; +} .admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box { display: none; - border-radius: 7px; background: #fff; position: absolute; - width: 100%; - top: 32px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.118); + top: 28px; + left: 0; + width: 92px; + background-color: #76c45e; + border-radius: 0 0 10px 10px; + padding-top: 6px; } .admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box::after { content: ""; @@ -531,13 +598,12 @@ .admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box .more-item { height: 32px; line-height: 32px; + font-size: 14px; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; } .admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box .more-item:hover { text-decoration: underline; } -.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box .more-item:not(:last-child) { - border-bottom: 1px dotted #d7d7d7; -} .admission-officer .admission-body .school-list .school-item .right .content .course-list .item { padding: 12px 10px 10px 20px; background-color: #ffffff; @@ -621,20 +687,44 @@ } .admission-officer .admission-body .retrospect .list { flex-wrap: wrap; + margin-bottom: 29px; } .admission-officer .admission-body .retrospect .list .item { width: 392px; height: 180px; border-radius: 15px; - background: linear-gradient(90deg, #d6e5e5 0%, rgba(246, 242, 234, 0.988) 100%); align-items: flex-start; padding: 20px; - margin-bottom: 12px; margin-right: 12px; + position: relative; + z-index: 1; +} +.admission-officer .admission-body .retrospect .list .item:not(:nth-last-child(-n + 3)) { + margin-bottom: 12px; +} +.admission-officer .admission-body .retrospect .list .item::after { + content: ""; + background: linear-gradient(90deg, #d6e5e5 0%, rgba(246, 242, 234, 0.976)); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + border-radius: 15px; + z-index: -1; } .admission-officer .admission-body .retrospect .list .item:nth-child(3n) { margin-right: 0; } +.admission-officer .admission-body .retrospect .list .item .bg { + position: absolute; + top: 0; + right: 0; + height: 180px; + display: block; + z-index: -2; +} .admission-officer .admission-body .retrospect .list .item .img { width: 47px; margin-right: 10px; @@ -682,3 +772,263 @@ margin-left: 5px; vertical-align: middle; } +.admission-officer .admission-body .retrospect .pages .arrows { + width: 7px; + height: 12px; + margin: 0 24px; + cursor: pointer; +} +.admission-officer .admission-body .retrospect .pages .arrows.rotate180 { + transform: rotate(180deg); +} +.admission-officer .admission-body .retrospect .pages .item { + width: 24px; + height: 24px; + line-height: 24px; + border-radius: 50%; + font-size: 14px; + color: #555555; + margin: 0 2px; + cursor: pointer; +} +.admission-officer .admission-body .retrospect .pages .item.pitch { + background-color: #3c7de9; + color: #fff; +} +.admission-officer .admission-body .more-school-mask { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.2); + z-index: 100; +} +.admission-officer .admission-body .more-school-mask .more-school { + width: 706px; + overflow: hidden; + background: linear-gradient(90deg, #d6e5e5 0%, #f6f2ea 100%); + border-radius: 20px; + position: relative; +} +.admission-officer .admission-body .more-school-mask .more-school .close { + width: 12px; + height: 12px; + position: absolute; + top: 20px; + right: 20px; + cursor: pointer; +} +.admission-officer .admission-body .more-school-mask .more-school .head { + width: 100%; + height: 100px; + padding-left: 36px; + background-color: #ffffff; +} +.admission-officer .admission-body .more-school-mask .more-school .head .img { + height: 47px; + margin-right: 10px; +} +.admission-officer .admission-body .more-school-mask .more-school .head .info .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 20px; + color: #000000; + margin-bottom: 4px; +} +.admission-officer .admission-body .more-school-mask .more-school .head .info .name .icon { + width: 12px; + height: 12px; + margin-left: 10px; +} +.admission-officer .admission-body .more-school-mask .more-school .head .info .english { + color: #555555; + font-size: 13px; +} +.admission-officer .admission-body .more-school-mask .more-school .content { + padding: 29px 13px 31px 36px; +} +.admission-officer .admission-body .more-school-mask .more-school .content .year { + margin-bottom: 24px; +} +.admission-officer .admission-body .more-school-mask .more-school .content .year .item { + width: 100px; + height: 28px; + line-height: 28px; + position: relative; + font-size: 14px; + color: #333333; + text-align: center; + z-index: 1; + cursor: pointer; +} +.admission-officer .admission-body .more-school-mask .more-school .content .year .item .svg { + width: 100px; + height: 28px; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +.admission-officer .admission-body .more-school-mask .more-school .content .year .item.pitch { + color: #ffffff; + font-weight: 650; +} +.admission-officer .admission-body .more-school-mask .more-school .content .year .item.pitch .svg { + fill: #3c7de9; +} +.admission-officer .admission-body .more-school-mask .more-school .content .year .item .arrows { + transform: translateY(-50%); + width: 9px; + height: 5px; + margin-left: 5px; + vertical-align: middle; + transition: all 0.3s; +} +.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold { + color: #fff; +} +.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .svg { + fill: #76c45e; +} +.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .arrows { + fill: #fff; + transform: translateY(-50%) rotate(180deg); +} +.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .more-mask { + display: block; +} +.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .more-box { + display: block; +} +.admission-officer .admission-body .more-school-mask .more-school .content .year .item .more-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: none; + display: none; +} +.admission-officer .admission-body .more-school-mask .more-school .content .year .item .more-box { + display: none; + background: #fff; + position: absolute; + top: 28px; + left: 0; + width: 92px; + background-color: #76c45e; + border-radius: 0 0 10px 10px; + padding-top: 6px; +} +.admission-officer .admission-body .more-school-mask .more-school .content .year .item .more-box::after { + content: ""; + width: 100%; + height: 10px; + display: block; + top: 0; + position: absolute; + transform: translateY(-100%); + z-index: -1; +} +.admission-officer .admission-body .more-school-mask .more-school .content .year .item .more-box .more-item { + height: 32px; + line-height: 32px; + font-size: 14px; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; +} +.admission-officer .admission-body .more-school-mask .more-school .content .year .item .more-box .more-item:hover { + text-decoration: underline; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list { + height: 448px; + overflow: auto; + padding-right: 20px; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list::-webkit-scrollbar { + width: 7px; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list::-webkit-scrollbar-track { + background: transparent; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list::-webkit-scrollbar-thumb { + background: #d7d7d7; + border-radius: 3.5px; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list::-webkit-scrollbar-thumb:hover { + background: #c4c4c4; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list .item { + padding: 12px 10px 10px 20px; + background-color: #ffffff; + border-radius: 10px; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list .item:not(:last-child) { + margin-bottom: 10px; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list .item .icon { + width: 28px; + height: 28px; + background-color: #f3f4f8; + border-radius: 50%; + margin-right: 10px; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list .item .icon .img { + width: 20px; + height: 20px; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list .item .name { + font-size: 16px; + color: #333333; + margin-bottom: 8px; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list .item .name .label { + width: 120px; + height: 26px; + line-height: 26px; + background-color: #3c7de9; + border-radius: 3px; + position: relative; + color: #ffffff; + font-size: 13px; + font-family: "ArialMT", "Arial", sans-serif; + padding: 0 6px; + margin-left: 12px; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list .item .name .label .arrows { + position: absolute; + width: 9px; + height: 16px; + top: 50%; + transform: translateY(-50%) rotate(180deg); + left: -4px; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list .item .bottom { + justify-content: space-between; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list .item .bottom .time { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 14px; + color: #000000; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list .item .bottom .btn { + width: 100px; + height: 32px; + line-height: 32px; + background-color: #76c45e; + border-radius: 86px; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #ffffff; + cursor: pointer; +} +.admission-officer .admission-body .more-school-mask .more-school .content .list .item .bottom .btn .arrows { + width: 12px; + height: 12px; + margin-left: 7px; +} diff --git a/css/index.less b/css/index.less index a01bccb..d688cf1 100644 --- a/css/index.less +++ b/css/index.less @@ -322,6 +322,41 @@ } } + .preach-box { + width: 100%; + height: 435px; + margin: 0 auto 22px; + position: relative; + z-index: 1; + + .bj { + width: 100%; + height: 435px; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + .left { + padding-top: 14px; + padding-left: 20px; + margin-right: 20px; + + .head { + margin-bottom: 11px; + .icon { + width: 38px; + height: 50px; + margin-right: 1px; + } + .name { + width: 125px; + height: 36px; + } + } + } + } + .interview-more { margin-bottom: 102px; @@ -433,7 +468,8 @@ .left { position: relative; margin-right: 45px; - z-index: 2; + z-index: 3; + width: 505px; .abbreviation { width: 100px; height: 32px; @@ -461,9 +497,13 @@ left: 0; z-index: 1; } + .img { + width: 505px; + } } .right { width: 651px; + z-index: 2; .info { padding-bottom: 24px; border-bottom: 1px dotted #d7d7d7; @@ -480,6 +520,11 @@ font-size: 20px; color: #000000; margin-bottom: 6px; + .arrows { + width: 12px; + height: 12px; + margin-left: 10px; + } } .english { @@ -552,22 +597,49 @@ height: 5px; margin-left: 5px; vertical-align: middle; + transition: all 0.3s; } - &:hover { - .more-box { - display: block; + &.more { + &.unfold { + color: #fff; + .svg { + fill: #76c45e; + } + .arrows { + fill: #fff; + transform: translateY(-50%) rotate(180deg); + } + .more-mask { + display: block; + } + + .more-box { + display: block; + } } } + .more-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: none; + display: none; + } + .more-box { display: none; - border-radius: 7px; background: #fff; position: absolute; - width: 100%; - top: 32px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.118); + top: 28px; + left: 0; + width: 92px; + background-color: rgba(118, 196, 94, 1); + border-radius: 0 0 10px 10px; + padding-top: 6px; &::after { content: ""; width: 100%; @@ -581,14 +653,11 @@ .more-item { height: 32px; line-height: 32px; - + font-size: 14px; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; &:hover { text-decoration: underline; } - - &:not(:last-child) { - border-bottom: 1px dotted #d7d7d7; - } } } } @@ -691,21 +760,47 @@ .list { flex-wrap: wrap; + margin-bottom: 29px; .item { width: 392px; height: 180px; border-radius: 15px; - background: linear-gradient(90deg, #d6e5e5 0%, rgba(246, 242, 234, 0.988) 100%); align-items: flex-start; padding: 20px; - margin-bottom: 12px; - margin-right: 12px; + &:not(:nth-last-child(-n + 3)) { + margin-bottom: 12px; + } + + position: relative; + z-index: 1; + &::after { + content: ""; + background: linear-gradient(90deg, #d6e5e5 0%, rgba(246, 242, 234, 0.976)); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + border-radius: 15px; + z-index: -1; + } + &:nth-child(3n) { margin-right: 0; } + .bg { + position: absolute; + top: 0; + right: 0; + height: 180px; + display: block; + z-index: -2; + } + .img { width: 47px; margin-right: 10px; @@ -760,6 +855,301 @@ } } } + + .pages { + .arrows { + width: 7px; + height: 12px; + margin: 0 24px; + cursor: pointer; + &.rotate180 { + transform: rotate(180deg); + } + } + .item { + width: 24px; + height: 24px; + line-height: 24px; + border-radius: 50%; + font-size: 14px; + color: #555555; + margin: 0 2px; + cursor: pointer; + + &.pitch { + background-color: #3c7de9; + color: #fff; + } + } + } + } + + .more-school-mask { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.2); + z-index: 100; + + .more-school { + width: 706px; + border-radius: 20px; + overflow: hidden; + background: linear-gradient(90deg, rgba(214, 229, 229, 1) 0%, rgba(246, 242, 234, 1) 100%); + border-radius: 20px; + position: relative; + + .close { + width: 12px; + height: 12px; + position: absolute; + top: 20px; + right: 20px; + cursor: pointer; + } + + .head { + width: 100%; + height: 100px; + padding-left: 36px; + background-color: rgba(255, 255, 255, 1); + + .img { + height: 47px; + margin-right: 10px; + } + + .info { + .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 20px; + color: #000000; + margin-bottom: 4px; + .icon { + width: 12px; + height: 12px; + margin-left: 10px; + } + } + .english { + color: #555555; + font-size: 13px; + } + } + } + + .content { + padding: 29px 13px 31px 36px; + + .year { + margin-bottom: 24px; + .item { + width: 100px; + height: 28px; + line-height: 28px; + position: relative; + font-size: 14px; + color: #333333; + text-align: center; + z-index: 1; + cursor: pointer; + .svg { + width: 100px; + height: 28px; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + + &.pitch { + color: #ffffff; + font-weight: 650; + .svg { + fill: #3c7de9; + } + } + + .arrows { + transform: translateY(-50%); + width: 9px; + height: 5px; + margin-left: 5px; + vertical-align: middle; + transition: all 0.3s; + } + + &.more { + &.unfold { + color: #fff; + .svg { + fill: #76c45e; + } + .arrows { + fill: #fff; + transform: translateY(-50%) rotate(180deg); + } + .more-mask { + display: block; + } + + .more-box { + display: block; + } + } + } + + .more-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: none; + display: none; + } + + .more-box { + display: none; + background: #fff; + position: absolute; + top: 28px; + left: 0; + width: 92px; + background-color: rgba(118, 196, 94, 1); + border-radius: 0 0 10px 10px; + padding-top: 6px; + &::after { + content: ""; + width: 100%; + height: 10px; + display: block; + top: 0; + position: absolute; + transform: translateY(-100%); + z-index: -1; + } + .more-item { + height: 32px; + line-height: 32px; + font-size: 14px; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + &:hover { + text-decoration: underline; + } + } + } + } + } + + .list { + height: 448px; + overflow: auto; + padding-right: 20px; + + &::-webkit-scrollbar { + width: 7px; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb { + background: #d7d7d7; + border-radius: 3.5px; + } + + &::-webkit-scrollbar-thumb:hover { + background: #c4c4c4; + } + + .item { + padding: 12px 10px 10px 20px; + background-color: #ffffff; + border-radius: 10px; + + &:not(:last-child) { + margin-bottom: 10px; + } + + .icon { + width: 28px; + height: 28px; + background-color: #f3f4f8; + border-radius: 50%; + margin-right: 10px; + .img { + width: 20px; + height: 20px; + } + } + + .name { + font-size: 16px; + color: #333333; + margin-bottom: 8px; + .label { + width: 120px; + height: 26px; + line-height: 26px; + background-color: rgba(60, 125, 233, 1); + border-radius: 3px; + position: relative; + color: #ffffff; + font-size: 13px; + font-family: "ArialMT", "Arial", sans-serif; + padding: 0 6px; + margin-left: 12px; + + .arrows { + position: absolute; + width: 9px; + height: 16px; + top: 50%; + transform: translateY(-50%) rotate(180deg); + left: -4px; + } + } + } + + .bottom { + justify-content: space-between; + .time { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 14px; + color: #000000; + } + .btn { + width: 100px; + height: 32px; + line-height: 32px; + background-color: rgba(118, 196, 94, 1); + border-radius: 86px; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #ffffff; + cursor: pointer; + + .arrows { + width: 12px; + height: 12px; + margin-left: 7px; + } + } + } + } + } + } + } } } } diff --git a/img/arrows-circle-black.svg b/img/arrows-circle-black.svg new file mode 100644 index 0000000..b5c25ee --- /dev/null +++ b/img/arrows-circle-black.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/img/arrows-thin-black.svg b/img/arrows-thin-black.svg new file mode 100644 index 0000000..8052bd9 --- /dev/null +++ b/img/arrows-thin-black.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/img/arrows-thin-gray.svg b/img/arrows-thin-gray.svg new file mode 100644 index 0000000..d81c6fa --- /dev/null +++ b/img/arrows-thin-gray.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/img/cross.png b/img/cross.png new file mode 100644 index 0000000..369f94f Binary files /dev/null and b/img/cross.png differ diff --git a/img/preach-icon.png b/img/preach-icon.png new file mode 100644 index 0000000..a605837 Binary files /dev/null and b/img/preach-icon.png differ diff --git a/img/preach-name.png b/img/preach-name.png new file mode 100644 index 0000000..7f3fd86 Binary files /dev/null and b/img/preach-name.png differ diff --git a/index.html b/index.html index 138fa44..3077070 100644 --- a/index.html +++ b/index.html @@ -67,7 +67,16 @@ -
+
+ +
+
+ + +
+
+
+
-
+