diff --git a/css/details.css b/css/details.css index f941b76..c3f5466 100644 --- a/css/details.css +++ b/css/details.css @@ -407,6 +407,67 @@ .content .details-box .side-item:not(:last-of-type) { border-bottom: 1px solid #ebebeb; } +.content .details-box .side-head { + background-color: #04b0d5; + color: #7f7f7f; + font-size: 13px; + height: 24px; + background-color: #ebebeb; + border-radius: 4px; + margin-bottom: 43px; + width: 690px; + margin-left: -26px; +} +.content .details-box .file { + margin-bottom: 40px; +} +.content .details-box .file .file-list { + padding-top: 20px; + padding-left: 38px; + padding-right: 20px; + padding-bottom: 31px; +} +.content .details-box .file .file-list .file-item:not(:last-of-type) { + margin-bottom: 27px; +} +.content .details-box .file .file-list .file-item .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + margin-bottom: 12px; +} +.content .details-box .file .file-list .file-item .name .icon { + position: absolute; + top: 21px; + left: 12px; + width: 8px; + height: 8px; +} +.content .details-box .file .file-list .file-item .name .tag { + width: 46px; + height: 24px; + background-color: #6fc16d; + border-radius: 20px; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-size: 14px; + color: #ffffff; + font-weight: 400; + margin-left: 10px; +} +.content .details-box .file .file-list .file-item .name .tag.selectable { + color: #333333; + border: 1px solid #d7d7d7; + background-color: #fff; +} +.content .details-box .file .file-list .file-item .hint { + font-size: 14px; + color: #555555; +} +.content .details-box .file .indicate { + margin-bottom: 24px; +} .content .details-box .block { background-color: #ffffff; border: 1px solid #ebebeb; @@ -672,19 +733,19 @@ top: -10000%; width: calc(100% - 32px); } -.content .details-box .text-box .indicate { +.content .details-box .indicate { line-height: 12px; margin-top: 24px; } -.content .details-box .text-box .indicate .icon { +.content .details-box .indicate .icon { width: 7px; height: 12px; cursor: pointer; } -.content .details-box .text-box .indicate .icon.btn-right { +.content .details-box .indicate .icon.btn-right { transform: rotate(180deg); } -.content .details-box .text-box .indicate .text { +.content .details-box .indicate .text { color: #555555; font-size: 13px; margin: 0 12px; @@ -812,6 +873,83 @@ .content .details-box .demand .list .item .value { color: #000000; } +.content .details-box .demand.demand-new { + padding-bottom: 0; +} +.content .details-box .demand .ability-item { + background-color: #f6f6f6; + border-radius: 6px; + padding: 23px 20px; + margin-bottom: 20px; +} +.content .details-box .demand .ability-item .head { + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + margin-bottom: 17px; +} +.content .details-box .demand .ability-item .head .index { + width: 20px; + height: 20px; + background-color: #f95d5d; + border-radius: 20px; + color: #ffffff; + margin-right: 11px; +} +.content .details-box .demand .ability-item .head .tag { + height: 24px; + text-align: center; + padding: 0 6px; + font-size: 14px; + color: #333333; + border: 1px solid #d7d7d7; + border-radius: 30px; + margin-left: 10px; +} +.content .details-box .demand .ability-item .head .tag.recommended { + color: #fff; + background-color: #04b0d5; + border-color: #04b0d5; +} +.content .details-box .demand .ability-item .head .tag.required { + color: #fff; + background-color: #6fc16d; + border-color: #6fc16d; +} +.content .details-box .demand .ability-item .description { + background-color: #fbfbfb; + border-radius: 6px; + color: #333333; + font-size: 14px; + line-height: 26px; + padding: 12px 15px; +} +.content .details-box .demand .ability-item .list .item { + padding-left: 32px; + padding-right: 10px; + background-color: #fbfbfb; +} +.content .details-box .demand .ability-item .list .item .triangle { + top: 21px; + left: 12px; + width: 8px; + height: 8px; +} +.content .details-box .demand .ability-item .list .item .remarks { + margin-top: 12px; + padding-top: 12px; + border-top: 1px dotted #d7d7d7; +} +.content .details-box .demand .demand-bottom { + height: 48px; + cursor: pointer; +} +.content .details-box .demand .demand-bottom .bottom-icon { + width: 20px; + height: 20px; + transform: rotate(90deg); +} .content .details-box .tuition { height: 140px; padding-right: 10px; @@ -886,6 +1024,26 @@ line-height: 34px; text-align: center; } +.content .details-box .tuition-remark { + padding: 26px 21px 21px; + font-size: 14px; + color: #555555; + line-height: 22px; + margin-bottom: 40px; +} +.content .details-box .tuition-remark .head { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-style: normal; + font-size: 16px; + color: #000000; + margin-bottom: 10px; +} +.content .details-box .tuition-remark .head .icon { + width: 16px; + height: 16px; + margin-right: 8px; +} .content .details-box .pattern { padding: 18px 16px 33px; } @@ -941,6 +1099,66 @@ font-size: 14px; color: #555555; } +.content .details-box .scholarships-list { + margin-bottom: 40px; +} +.content .details-box .scholarships { + padding: 19px 19px 26px; +} +.content .details-box .scholarships:not(:last-of-type) { + margin-bottom: 20px; +} +.content .details-box .scholarships .name-en { + font-weight: 650; + font-size: 20px; + color: #000000; + text-align: center; + line-height: 34px; + margin-bottom: 9px; +} +.content .details-box .scholarships .name-zh { + font-size: 14px; + color: #aaaaaa; + text-align: center; + margin-bottom: 20px; +} +.content .details-box .scholarships .text { + font-size: 14px; + color: #555555; + line-height: 36px; + position: relative; + background-image: url(/img/dotted-line.png); + background-size: 100% 36px; + background-repeat: repeat-y; + background-position: 0 0; + margin-bottom: 26px; +} +.content .details-box .scholarships .text::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + display: block; + width: 100%; + height: 1px; + background-image: url(/img/dotted-line.png); + background-size: 100% 36px; + background-repeat: repeat-y; +} +.content .details-box .scholarships .radius .key { + font-size: 14px; + color: #ffffff; + height: 24px; + line-height: 24px; + background-color: #7b8cd3; + border-radius: 8px; + padding: 0 7px; + margin-right: 10px; +} +.content .details-box .scholarships .radius .value { + font-size: 14px; + color: #000000; +} .content .details-box .course { position: relative; padding-top: 19px; diff --git a/css/details.less b/css/details.less index c0b8bed..af9e1f6 100644 --- a/css/details.less +++ b/css/details.less @@ -465,6 +465,76 @@ } } + .side-head { + background-color: #04b0d5; + color: #7f7f7f; + font-size: 13px; + height: 24px; + background-color: rgba(235, 235, 235, 1); + border-radius: 4px; + margin-bottom: 43px; + width: 690px; + margin-left: -26px; + } + + .file { + margin-bottom: 40px; + .file-list { + padding-top: 20px; + padding-left: 38px; + padding-right: 20px; + padding-bottom: 31px; + .file-item { + &:not(:last-of-type) { + margin-bottom: 27px; + } + + .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + margin-bottom: 12px; + + .icon { + position: absolute; + top: 21px; + left: 12px; + width: 8px; + height: 8px; + } + + .tag { + width: 46px; + height: 24px; + background-color: rgba(111, 193, 109, 1); + border-radius: 20px; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-size: 14px; + color: #ffffff; + font-weight: 400; + margin-left: 10px; + + &.selectable { + color: #333333; + border: 1px solid rgba(215, 215, 215, 1); + background-color: #fff; + } + } + } + + .hint { + font-size: 14px; + color: #555555; + } + } + } + .indicate { + margin-bottom: 24px; + } + } + .block { background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(235, 235, 235, 1); @@ -763,29 +833,29 @@ width: calc(100% - 32px); } } + } - .indicate { - line-height: 12px; - margin-top: 24px; + .indicate { + line-height: 12px; + margin-top: 24px; - .icon { - width: 7px; - height: 12px; - cursor: pointer; + .icon { + width: 7px; + height: 12px; + cursor: pointer; - &.btn-right { - transform: rotate(180deg); - } - } - .text { - color: #555555; - font-size: 13px; - margin: 0 12px; - // padding: 24px 0 0; - line-height: normal; - width: fit-content; + &.btn-right { + transform: rotate(180deg); } } + .text { + color: #555555; + font-size: 13px; + margin: 0 12px; + // padding: 24px 0 0; + line-height: normal; + width: fit-content; + } } .application-schedule { @@ -928,6 +998,94 @@ } } } + + &.demand-new { + padding-bottom: 0; + } + + .ability-item { + background-color: rgba(246, 246, 246, 1); + border-radius: 6px; + padding: 23px 20px; + margin-bottom: 20px; + .head { + .index { + width: 20px; + height: 20px; + background-color: rgba(249, 93, 93, 1); + border-radius: 20px; + color: #ffffff; + margin-right: 11px; + } + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + margin-bottom: 17px; + + .tag { + height: 24px; + text-align: center; + padding: 0 6px; + font-size: 14px; + color: #333333; + border: 1px solid #d7d7d7; + border-radius: 30px; + margin-left: 10px; + + &.recommended { + color: #fff; + background-color: rgba(4, 176, 213, 1); + border-color: rgba(4, 176, 213, 1); + } + + &.required { + color: #fff; + background-color: rgba(111, 193, 109, 1); + border-color: rgba(111, 193, 109, 1); + } + } + } + + .description { + background-color: #fbfbfb; + border-radius: 6px; + color: #333333; + font-size: 14px; + line-height: 26px; + padding: 12px 15px; + } + + .list { + .item { + padding-left: 32px; + padding-right: 10px; + background-color: rgba(251, 251, 251, 1); + .triangle { + top: 21px; + left: 12px; + width: 8px; + height: 8px; + } + .remarks { + margin-top: 12px; + padding-top: 12px; + border-top: 1px dotted #d7d7d7; + } + } + } + } + + .demand-bottom { + height: 48px; + cursor: pointer; + + .bottom-icon { + width: 20px; + height: 20px; + transform: rotate(90deg); + } + } } .tuition { @@ -1017,6 +1175,28 @@ } } + .tuition-remark { + padding: 26px 21px 21px; + font-size: 14px; + color: #555555; + line-height: 22px; + margin-bottom: 40px; + .head { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-style: normal; + font-size: 16px; + color: #000000; + margin-bottom: 10px; + + .icon { + width: 16px; + height: 16px; + margin-right: 8px; + } + } + } + .pattern { padding: 18px 16px 33px; .tab { @@ -1082,6 +1262,74 @@ } } + .scholarships-list { + margin-bottom: 40px; + } + .scholarships { + padding: 19px 19px 26px; + + &:not(:last-of-type) { + margin-bottom: 20px; + } + .name-en { + font-weight: 650; + font-size: 20px; + color: #000000; + text-align: center; + line-height: 34px; + margin-bottom: 9px; + } + + .name-zh { + font-size: 14px; + color: #aaaaaa; + text-align: center; + margin-bottom: 20px; + } + + .text { + font-size: 14px; + color: #555555; + line-height: 36px; + position: relative; + background-image: url(/img/dotted-line.png); + background-size: 100% 36px; + background-repeat: repeat-y; + background-position: 0 0; + margin-bottom: 26px; + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + display: block; + width: 100%; + height: 1px; + background-image: url(/img/dotted-line.png); + background-size: 100% 36px; + background-repeat: repeat-y; + } + } + + .radius { + .key { + font-size: 14px; + color: #ffffff; + height: 24px; + line-height: 24px; + background-color: rgba(123, 140, 211, 1); + border-radius: 8px; + padding: 0 7px; + margin-right: 10px; + } + .value { + font-size: 14px; + color: #000000; + } + } + } + .course { position: relative; padding-top: 19px; diff --git a/html/details.html b/html/details.html index d77c2d0..7651599 100644 --- a/html/details.html +++ b/html/details.html @@ -81,6 +81,81 @@