diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index/index.css b/01-index/index.css similarity index 100% rename from index/index.css rename to 01-index/index.css diff --git a/index/index.html b/01-index/index.html similarity index 100% rename from index/index.html rename to 01-index/index.html diff --git a/index/index.less b/01-index/index.less similarity index 100% rename from index/index.less rename to 01-index/index.less diff --git a/school/school.css b/02-school/school.css similarity index 100% rename from school/school.css rename to 02-school/school.css diff --git a/school/school.html b/02-school/school.html similarity index 100% rename from school/school.html rename to 02-school/school.html diff --git a/school/school.less b/02-school/school.less similarity index 100% rename from school/school.less rename to 02-school/school.less diff --git a/subject/subject.css b/03-subject/subject.css similarity index 100% rename from subject/subject.css rename to 03-subject/subject.css diff --git a/subject/subject.html b/03-subject/subject.html similarity index 100% rename from subject/subject.html rename to 03-subject/subject.html diff --git a/subject/subject.less b/03-subject/subject.less similarity index 100% rename from subject/subject.less rename to 03-subject/subject.less diff --git a/04-details/details.css b/04-details/details.css new file mode 100644 index 0000000..c93a547 --- /dev/null +++ b/04-details/details.css @@ -0,0 +1,771 @@ +* { + 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 .box { + width: 1200px; + background-color: #fbfbfb; + border-radius: 12px; + position: relative; + margin-bottom: 20px; +} +.main .box::after { + content: ""; + position: absolute; + top: -5px; + left: 0; + width: 100%; + height: 66px; + background: -webkit-linear-gradient(0deg, #7b8cd3 0%, #dae3fd 99%); + background: -moz-linear-gradient(90deg, #7b8cd3 0%, #dae3fd 99%); + background: linear-gradient(90deg, #7b8cd3 0%, #dae3fd 99%); + border-radius: 18px; + z-index: -1; +} +.main .box .tab { + height: 60px; + font-size: 14px; + color: #7f7f7f; + border-bottom: 1px dotted #ebebeb; + padding-left: 24px; +} +.main .box .tab .img { + width: 6px; + height: 10px; + margin: 0 15px; +} +.main .box .tab .current { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 14px; + color: #000000; +} +.main .box .details { + padding: 31px 60px; +} +.main .box .details .logo { + width: 120px; + height: 120px; + position: relative; + z-index: 1; + padding-right: 10px; + padding-bottom: 7px; + margin-right: 39px; + display: inline-flex; +} +.main .box .details .right .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 32px; + color: #000000; + margin-bottom: 6px; +} +.main .box .details .right .name-en { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #7f7f7f; + margin-bottom: 15px; +} +.main .box .details .right .school { + font-size: 16px; + color: #333333; + margin-bottom: 15px; +} +.main .box .details .right .school .icon { + height: 20px; + margin-right: 9px; +} +.main .box .details .right .school .line { + margin: 0 13px; + color: #d7d7d7; +} +.main .box .details .right .word { + margin-bottom: 15px; + font-size: 14px; + color: #7f7f7f; +} +.main .box .details .right .word .img { + width: 20px; + height: 14px; + margin-right: 6px; + margin-bottom: 8px; +} +.main .box .details .right .tag .tag-item { + width: fit-content; + height: 24px; + line-height: 24px; + background-color: #f9f8f8; + border: 1px solid #aaaaaa; + border-radius: 6px; + padding: 0 9px; + font-size: 14px; + color: #7f7f7f; + margin-right: 10px; +} +.main .box .details .right .tag .tag-item.gray { + background-color: #333333; + color: #ffffff; +} +.main .box .details .right .tag .tag-item.semester { + color: #ffffff; + background-color: #f95d5d; +} +.main .content { + height: 1214px; + background-color: #ffffff; + border: 1px solid #f2f2f2; + border-radius: 12px; + margin-right: 10px; +} +.main .content .side { + border-radius: 12px 0 0 0; + width: 141px; + height: 500px; + overflow: hidden; + flex-direction: column; +} +.main .content .side .item { + width: 100%; + height: 56px; + font-size: 15px; + color: #555555; + cursor: pointer; + border-right: 1px solid #ebebeb; +} +.main .content .side .item.pitch { + background-color: #fbfbfb; + border-top: 1px solid #ebebeb; + border-bottom: 1px solid #ebebeb; + border-right: none; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #000000; + position: relative; +} +.main .content .side .item.pitch:first-of-type { + border-top: none; +} +.main .content .side .item.pitch::after { + content: ""; + width: 5px; + height: 100%; + display: block; + background-color: #6fc16d; + position: absolute; + left: 0; + top: 0; +} +.main .content .details-box { + padding-top: 40px; + padding-left: 50px; + padding-right: 30px; + background-color: #fbfbfb; + border-radius: 0 12px 0 0; +} +.main .content .details-box .block { + background-color: #ffffff; + border: 1px solid #ebebeb; + border-radius: 12px; +} +.main .content .details-box .item-header { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + justify-content: space-between; + margin-bottom: 22px; + position: relative; +} +.main .content .details-box .item-header::after { + content: ""; + width: 6px; + height: 16px; + background-color: #fddf6d; + border: 1px solid #cab157; + border-radius: 5px; + margin-right: 14px; + position: absolute; + top: 4px; + left: -20px; + display: block; + box-sizing: border-box; +} +.main .content .details-box .item-header .list-btn { + font-weight: 400; + font-size: 14px; + color: #000000; +} +.main .content .details-box .item-header .list-btn .icon { + width: 16px; + height: 16px; + margin-left: 8px; +} +.main .content .details-box .ranking { + margin-bottom: 40px; +} +.main .content .details-box .ranking .item { + height: 76px; + border: 1px solid #ebebeb; + border-radius: 6px; + overflow: hidden; +} +.main .content .details-box .ranking .item:not(:last-of-type) { + margin-bottom: 10px; +} +.main .content .details-box .ranking .item .rank { + background-color: #ffffff; + padding: 0 22px; + justify-content: space-between; +} +.main .content .details-box .ranking .item .rank .logo { + height: 24px; +} +.main .content .details-box .ranking .item .rank .number { + width: 90px; + height: 30px; + line-height: 30px; + background-color: #f7a602; + border-radius: 4px; + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-size: 18px; + color: #ffffff; +} +.main .content .details-box .ranking .item .rank-box { + background-color: #f6f6f6; + flex-direction: column; + justify-content: center; +} +.main .content .details-box .ranking .item .rank-box .itemm { + font-size: 14px; + padding-left: 20px; +} +.main .content .details-box .ranking .item .rank-box .itemm .key { + color: #7f7f7f; +} +.main .content .details-box .ranking .item .rank-box .itemm .value { + color: #333333; +} +.main .content .details-box .ranking .item .rank-box .itemm:first-of-type { + margin-bottom: 9px; +} +.main .content .details-box .application-schedule { + margin-bottom: 40px; +} +.main .content .details-box .application-schedule .list .time { + padding-top: 19px; + padding-bottom: 22px; + text-align: center; +} +.main .content .details-box .application-schedule .list .time .item:first-of-type { + border-right: 1px dotted #ebebeb; +} +.main .content .details-box .application-schedule .list .time .item .name { + font-size: 16px; + color: #000000; + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + margin-bottom: 14px; +} +.main .content .details-box .application-schedule .list .time .item .value { + font-size: 14px; + color: #555555; +} +.main .content .details-box .application-schedule .application-else { + background-color: #f6f6f6; + border-radius: 6px; + padding: 14px 10px; + margin: 0 20px 20px; +} +.main .content .details-box .application-schedule .application-else .item:not(:last-of-type) { + margin-bottom: 10px; +} +.main .content .details-box .application-schedule .application-else .item .name { + font-size: 14px; + color: #7f7f7f; + margin-right: 11px; +} +.main .content .details-box .application-schedule .application-else .item .value { + font-size: 14px; + color: #333333; +} +.main .content .details-box .demand { + margin-bottom: 40px; + padding: 17px 20px; +} +.main .content .details-box .demand .text { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 15px; + color: #000000; + line-height: 32px; + word-break: break-word; + white-space: pre-line; + margin-bottom: 32px; +} +.main .content .details-box .demand .title { + font-weight: 650; + font-style: normal; + font-size: 18px; + color: #000000; + margin-bottom: 10px; +} +.main .content .details-box .demand .hint { + font-size: 15px; + color: #333333; + margin-bottom: 21px; +} +.main .content .details-box .demand .list .item { + background-color: #f6f6f6; + border-radius: 6px; + padding: 14px 0 14px 28px; + position: relative; + flex-direction: column; + justify-content: center; +} +.main .content .details-box .demand .list .item .triangle { + position: absolute; + transform: rotate(270deg); + top: 27px; + left: 7px; +} +.main .content .details-box .demand .list .item:not(:last-of-type) { + margin-bottom: 10px; +} +.main .content .details-box .demand .list .item .name { + font-size: 15px; + color: #7f7f7f; + margin-bottom: 8px; +} +.main .content .details-box .demand .list .item .value { + font-size: 16px; + color: #000000; +} +.main .content .details-box .tuition { + width: 451px; + height: 140px; + padding-right: 10px; +} +.main .content .details-box .tuition .tuition-left { + height: 100%; + position: relative; + flex-direction: column; +} +.main .content .details-box .tuition .tuition-left .unit { + position: absolute; + top: 10px; + left: 10px; + width: 42px; + height: 20px; + background-color: #f95d5d; + border-radius: 15px; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-size: 14px; + color: #ffffff; + text-align: center; +} +.main .content .details-box .tuition .tuition-left .number { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-style: normal; + font-size: 20px; + color: #000000; + margin-bottom: 9px; + text-align: center; +} +.main .content .details-box .tuition .tuition-left .text { + font-size: 15px; + color: #555555; + text-align: center; +} +.main .content .details-box .tuition .tuition-right { + width: 240px; + height: 120px; + background-color: #f6f6f6; + border-radius: 6px; + padding: 16px 11px; +} +.main .content .details-box .tuition .tuition-right .item { + justify-content: space-between; +} +.main .content .details-box .tuition .tuition-right .item:not(:last-of-type) { + margin-bottom: 12px; +} +.main .content .details-box .tuition .tuition-right .item .key { + font-size: 15px; + color: #555555; +} +.main .content .details-box .tuition .tuition-right .item .value { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-style: normal; + font-size: 16px; + color: #000000; +} +.main .content .details-box .tuition-scholarships { + margin-bottom: 40px; +} +.main .content .details-box .tuition-scholarships .left { + margin-right: 39px; +} +.main .content .details-box .tuition-scholarships .right .scholarships { + width: 180px; + height: 140px; + font-size: 15px; + color: #000000; + line-height: 34px; + text-align: center; +} +.main .content .details-box .pattern { + padding: 20px 16px 33px; +} +.main .content .details-box .pattern .tab { + width: 180px; + height: 40px; + background-color: #f2f2f2; + border: 1px solid #ebebeb; + border-radius: 114px; + margin: 0 auto 33px; +} +.main .content .details-box .pattern .tab .item { + height: 100%; + font-size: 16px; + color: #555555; + cursor: pointer; +} +.main .content .details-box .pattern .tab .item.pitch { + background-color: #6fc16d; + border-radius: 22px; + color: #ffffff; +} +.main .content .details-box .pattern .introduce .item { + text-align: center; +} +.main .content .details-box .pattern .introduce .item:not(:last-of-type) { + border-right: 1px dotted #ebebeb; +} +.main .content .details-box .pattern .introduce .item .value { + font-size: 16px; + color: #000000; + font-family: "Arial-Black", "Arial Black", "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 900; + margin-bottom: 14.5px; +} +.main .content .details-box .pattern .introduce .item .name { + font-size: 14px; + color: #555555; +} +.main .content .details-box .course { + position: relative; + padding-top: 19px; + margin-bottom: 20px; + font-size: 14px; +} +.main .content .details-box .course .icon { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 16px; + height: 9px; +} +.main .content .details-box .course .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 18px; + color: #000000; + text-align: center; + margin-bottom: 9px; +} +.main .content .details-box .course .hint { + color: #555555; + line-height: 22px; + text-align: center; + margin-bottom: 21px; +} +.main .content .details-box .course .table-head { + background-color: #f6f6f6; + border-top: 1px solid #ebebeb; + border-bottom: 1px solid #ebebeb; +} +.main .content .details-box .course .table-head .item { + height: 40px; + line-height: 40px; +} +.main .content .details-box .course .table-body .list:not(:last-of-type) { + border-bottom: 1px solid #ebebeb; +} +.main .content .details-box .course .table-body .item { + color: #333333; + padding: 12px 4px; +} +.main .content .details-box .course .table-body .item.name { + color: #000000; + text-align: left; +} +.main .content .details-box .course .table-body .item.name .english { + font-family: "Arial Normal", "Arial", sans-serif; + color: #aaaaaa; +} +.main .content .details-box .course .table-body .item.credit { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-style: normal; + font-size: 14px; + color: #000000; +} +.main .content .details-box .course .item { + text-align: center; +} +.main .content .details-box .course .item.number { + width: 134px; + border-right: 1px solid #ebebeb; +} +.main .content .details-box .course .item.name { + border-right: 1px solid #ebebeb; +} +.main .content .details-box .course .item.credit { + width: 80px; +} +.main .content .details-box .link { + font-size: 15px; + padding: 17px 20px 24px 15px; +} +.main .content .details-box .link.brochure .img { + width: 70px; + height: 70px; +} +.main .content .details-box .link.brochure .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + color: #000000; + line-height: normal; + margin-bottom: 10px; +} +.main .content .details-box .link.brochure .name { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 13px; + color: #555555; +} +.main .content .details-box .link .title { + color: #000000; + line-height: 34px; + margin-bottom: 8px; +} +.main .content .details-box .link .text { + text-decoration: underline; + line-height: 24px; + color: #333333; + margin-bottom: 20px; +} +.main .content .details-box .link .btn { + width: 127px; + height: 40px; + line-height: 40px; + cursor: pointer; + background-color: #f6f6f6; + border: 1px solid #d7d7d7; + border-radius: 115px; + color: #333333; + margin-left: 10px; +} +.main .content .details-box .link .btn .icon { + width: 18px; + height: 18px; + margin-right: 6px; +} +.main .content .details-box .link .btn.open { + border: none; + background-color: #6fc16d; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + color: #ffffff; +} +.main .content .details-box .degree { + text-align: center; + padding: 16px 0 24px; +} +.main .content .details-box .degree .title { + width: 103px; + height: 30px; + position: relative; + z-index: 1; + font-size: 16px; + color: #ffffff; + margin: 0 auto 16px; +} +.main .content .details-box .degree .title .icon { + width: 103px; + height: 30px; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +.main .content .details-box .degree .name { + font-size: 16px; + color: #000000; + line-height: 34px; + margin-bottom: 10px; +} +.main .content .details-box .degree .english { + font-size: 14px; + color: #7f7f7f; +} +.main .content .details-box .issue-bj { + z-index: 1; + position: relative; +} +.main .content .details-box .issue-bj .issue { + padding: 0 26px 0 41px; + margin-left: 5px; + position: relative; +} +.main .content .details-box .issue-bj .issue .index-bj { + position: absolute; + width: 27px; + height: 24px; + top: 35px; + left: -5px; + z-index: -1; +} +.main .content .details-box .issue-bj .issue .index { + width: 30px; + height: 26px; + background-color: #f95d5d; + border-radius: 0 5px 5px 0; + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + color: #ffffff; + position: absolute; + top: 21px; + left: -5px; +} +.main .content .details-box .issue-bj .issue .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #000000; + padding-top: 20px; + padding-bottom: 15px; + border-bottom: 1px dotted #ebebeb; + line-height: 28px; +} +.main .content .details-box .issue-bj .issue .text { + font-size: 15px; + color: #555555; + line-height: 32px; + padding: 19px 0; +} +.main .else { + width: 290px; + height: 20px; +} +.main .base { + width: 640px; + height: 60px; + background-color: #7b8cd3; + border-radius: 153px; + position: fixed; + bottom: 15px; + left: 50%; + transform: translateX(-50%); +} +.main .base .left { + width: 450px; + height: 50px; + background-color: #fff; + border-radius: 153px 15px 15px 153px; + margin-right: 5px; + padding: 0 20px; +} +.main .base .left .text { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; + color: rgba(170, 170, 170, 0.90196078); +} +.main .base .left .img { + width: 20px; + height: 20px; +} +.main .base .rigth { + width: 175px; + height: 50px; + background-color: #fff; + border-radius: 15px 153px 153px 15px; + padding-left: 19px; +} +.main .base .rigth .img { + width: 25px; + height: 22px; + margin-right: 5px; +} +.main .base .rigth .text { + font-size: 16px; + color: #333333; + margin-right: 9px; +} +.main .base .rigth .number { + height: 20px; + line-height: 20px; + background-color: #f2f2f2; + border-radius: 150px; + font-size: 13px; + color: #f95d5d; + padding: 0 8px; +} diff --git a/04-details/details.html b/04-details/details.html new file mode 100644 index 0000000..36a2581 --- /dev/null +++ b/04-details/details.html @@ -0,0 +1,383 @@ + + + + + + Document + + + +
+ + +
+
+ 首页 + + 按学科查看 + + 商业及管理 + +
理学硕士（金融学）
+
+
+ +
+
理学硕士（金融学）
+
The University of Hong Kong
+
+
+ + 香港大学 +
+
|
+ 商学院 +
|
+ 经济与金融学系 +
+ +
+ + 一句话描述独特之处，一句话描述独特之处。 +
+ +
+
招生官项目
+
+
+
+
+ +
+
+
+
基本信息
+
基本信息
+
基本信息
+
+
+
+
+
+
+
专业排名
+
+ 榜单 + +
+
+
+
+
+ +
+ 70 + +
+
+
+
+
年份：
+
2024
+
+
+
学科：
+
Accounting & Finance
+
+
+
+
+
+ +
+ 70 + +
+
+
+
+
年份：
+
2024
+
+
+
学科：
+
Accounting & Finance
+
+
+
+
+
+ +
+ 70 + +
+
+
+
+
年份：
+
2024
+
+
+
学科：
+
Accounting & Finance
+
+
+
+
+
+ +
+ 70 + +
+
+
+
+
年份：
+
2024
+
+
+
学科：
+
Accounting & Finance
+
+
+
+
+
申请日程
+
+
+
+
+
2024-01-05
+
开始申请日期
+
+
+
2024-01-05
+
截止申请日期
+
+
+
+
+
+
面试时间：
+
2024-01-05
+
+
+
结果通知时间：
+
2024-01-05
+
+
+
+
最低入学要求
+ +
+
· 申请人必须持有认可大学颁发的学士学位； · 最好拥有超过1年的相关行业工作经验； · 如申请人的学士学位在非英语授课的院校获得，则需满足以下英语能力要求：
+
英语能力要求
+
满足以下其中一项即可
+
+
+ +
托福网考
+
总分 79 分以上
+
+
+ +
全国大学英语六级考试
+
总分 6.5 分以上
+
+
+
+ +
+
+
+ 费用 +
+
+
+
HK$
+
待确认
+
总学费
+
+
+
+
每学分学费
+
-
+
+
+
申请费
+
-
+
+
+
入学保证金
+
-
+
+
+
+
+
+
奖学金
+
非本地学生无
+
+
+ +
学习模式
+
+
+
全日制
+
兼读制
+
+ +
+
+
-
+
教学语言
+
+
+
-
+
正常学习时长
+
+
+
待确认
+
最长学习时长
+
+
+ + +
+ +
+ +
必修课程
+
（共 24 学分）
+
+
课程编号
+
课程名称
+
学分
+
+
+
+
EF5042
+
+
公司金融
+
Corporate Finance
+
+
3
+
+
+
EF5042
+
+
公司金融
+
Corporate Finance
+
+
3
+
+
+
EF5042
+
+
公司金融
+
Corporate Finance
+
+
3
+
+
+
EF5042
+
+
公司金融
+
Corporate Finance
+
+
3
+
+
+
+
+ +
+
项目目录项目详情
+
https://www.cityu.edu.hk/catalogue/pg/202324/programme/MSF.html
+
+
+ + 复制链接 +
+
打开链接
+
+
+ +
学位
+
+
+ + 学位名称 +
+
理学硕士（金融学）
+
Master of Science in Finance
+
+ +
+
+
1
+ +
我需要拥有“与商业相关”的学位吗？
+
申请人如果在非金融或非商业专业拥有优秀的学术记录，也会被考虑。
+
+
+ +
宣传册
+
+
+ +
+
宣传册
+
MSF-MSFE_A4_poster_chi_2024.pdf
+
+
+
+
+ + 下载文件 +
+
打开文件
+
+
+
+
+
+ +
+
+ + +
+
+
搜索项目
+ +
+
+ +
项目对比
+
16
+
+
+
+ + + diff --git a/04-details/details.less b/04-details/details.less new file mode 100644 index 0000000..6fd593a --- /dev/null +++ b/04-details/details.less @@ -0,0 +1,890 @@ +* { + 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: rgba(238, 242, 245, 1); + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; +} + +.main { + width: 1200px; + margin: 0 auto; + + .index-icon { + width: 184px; + height: 42px; + margin-top: 37px; + margin-bottom: 40px; + } + + .box { + width: 1200px; + background-color: rgba(251, 251, 251, 1); + border-radius: 12px; + position: relative; + margin-bottom: 20px; + + &::after { + content: ""; + position: absolute; + top: -5px; + left: 0; + width: 100%; + height: 66px; + background: -webkit-linear-gradient(0deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); + background: -moz-linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); + background: linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); + border-radius: 18px; + z-index: -1; + } + .tab { + height: 60px; + font-size: 14px; + color: #7f7f7f; + border-bottom: 1px dotted rgb(235, 235, 235); + padding-left: 24px; + .img { + width: 6px; + height: 10px; + margin: 0 15px; + } + + .current { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 14px; + color: #000000; + } + } + .details { + padding: 31px 60px; + .logo { + width: 120px; + height: 120px; + position: relative; + z-index: 1; + padding-right: 10px; + padding-bottom: 7px; + margin-right: 39px; + display: inline-flex; + } + + .right { + .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 32px; + color: #000000; + margin-bottom: 6px; + } + + .name-en { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #7f7f7f; + margin-bottom: 15px; + } + + .school { + .icon { + height: 20px; + margin-right: 9px; + } + + font-size: 16px; + color: #333333; + margin-bottom: 15px; + + .line { + margin: 0 13px; + color: rgb(215, 215, 215); + } + } + + .word { + margin-bottom: 15px; + + .img { + width: 20px; + height: 14px; + margin-right: 6px; + margin-bottom: 8px; + } + font-size: 14px; + color: #7f7f7f; + } + + .tag { + .tag-item { + width: fit-content; + height: 24px; + line-height: 24px; + background-color: rgba(249, 248, 248, 1); + border: 1px solid rgba(170, 170, 170, 1); + border-radius: 6px; + padding: 0 9px; + font-size: 14px; + color: #7f7f7f; + margin-right: 10px; + + &.gray { + background-color: rgba(51, 51, 51, 1); + color: #ffffff; + } + + &.semester { + color: #ffffff; + background-color: rgba(249, 93, 93, 1); + } + } + } + } + } + } + + .body { + } + + .content { + height: 1214px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(242, 242, 242, 1); + border-radius: 12px; + margin-right: 10px; + + .side { + border-radius: 12px 0 0 0; + width: 141px; + height: 500px; + overflow: hidden; + flex-direction: column; + .item { + width: 100%; + height: 56px; + font-size: 15px; + color: #555555; + cursor: pointer; + border-right: 1px solid rgba(235, 235, 235, 1); + + &.pitch { + &:first-of-type { + border-top: none; + } + background-color: rgba(251, 251, 251, 1); + border-top: 1px solid rgba(235, 235, 235, 1); + border-bottom: 1px solid rgba(235, 235, 235, 1); + border-right: none; + + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #000000; + position: relative; + &::after { + content: ""; + width: 5px; + height: 100%; + display: block; + background-color: rgba(111, 193, 109, 1); + position: absolute; + left: 0; + top: 0; + } + } + } + } + + .details-box { + padding-top: 40px; + padding-left: 50px; + padding-right: 30px; + background-color: #fbfbfb; + border-radius: 0 12px 0 0; + + .block { + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 12px; + } + + .item-header { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + justify-content: space-between; + margin-bottom: 22px; + position: relative; + &::after { + content: ""; + width: 6px; + height: 16px; + background-color: rgba(253, 223, 109, 1); + border: 1px solid rgba(202, 177, 87, 1); + border-radius: 5px; + margin-right: 14px; + position: absolute; + top: 4px; + left: -20px; + display: block; + box-sizing: border-box; + } + + .list-btn { + font-weight: 400; + font-size: 14px; + color: #000000; + .icon { + width: 16px; + height: 16px; + margin-left: 8px; + } + } + } + + .ranking { + margin-bottom: 40px; + .item { + height: 76px; + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 6px; + overflow: hidden; + + &:not(:last-of-type) { + margin-bottom: 10px; + } + .rank { + background-color: rgba(255, 255, 255, 1); + padding: 0 22px; + justify-content: space-between; + .logo { + height: 24px; + } + .number { + width: 90px; + height: 30px; + line-height: 30px; + background-color: rgba(247, 166, 2, 1); + border-radius: 4px; + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-size: 18px; + color: #ffffff; + .triangle { + } + } + } + + .rank-box { + background-color: rgba(246, 246, 246, 1); + flex-direction: column; + justify-content: center; + + .itemm { + font-size: 14px; + padding-left: 20px; + .key { + color: #7f7f7f; + } + .value { + color: #333333; + } + + &:first-of-type { + margin-bottom: 9px; + } + } + } + } + } + + .application-schedule { + margin-bottom: 40px; + .list { + .time { + padding-top: 19px; + padding-bottom: 22px; + text-align: center; + + .item { + &:first-of-type { + border-right: 1px dotted rgb(235, 235, 235); + } + .name { + font-size: 16px; + color: #000000; + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + margin-bottom: 14px; + } + + .value { + font-size: 14px; + color: #555555; + } + } + } + } + .application-else { + background-color: rgba(246, 246, 246, 1); + border-radius: 6px; + padding: 14px 10px; + margin: 0 20px 20px; + + .item { + &:not(:last-of-type) { + margin-bottom: 10px; + } + + .name { + font-size: 14px; + color: #7f7f7f; + margin-right: 11px; + } + + .value { + font-size: 14px; + color: #333333; + } + } + } + } + + .demand { + margin-bottom: 40px; + padding: 17px 20px; + + .text { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 15px; + color: #000000; + line-height: 32px; + word-break: break-word; + white-space: pre-line; + margin-bottom: 32px; + } + + .title { + font-weight: 650; + font-style: normal; + font-size: 18px; + color: #000000; + margin-bottom: 10px; + } + + .hint { + font-size: 15px; + color: #333333; + margin-bottom: 21px; + } + + .list { + .item { + background-color: rgba(246, 246, 246, 1); + border-radius: 6px; + padding: 14px 0 14px 28px; + position: relative; + flex-direction: column; + justify-content: center; + + .triangle { + position: absolute; + transform: rotate(270deg); + top: 27px; + left: 7px; + } + + &:not(:last-of-type) { + margin-bottom: 10px; + } + + .name { + font-size: 15px; + color: #7f7f7f; + margin-bottom: 8px; + } + + .value { + font-size: 16px; + color: #000000; + } + } + } + } + + .tuition { + width: 451px; + height: 140px; + padding-right: 10px; + .tuition-left { + height: 100%; + position: relative; + .unit { + position: absolute; + top: 10px; + left: 10px; + width: 42px; + height: 20px; + background-color: rgba(249, 93, 93, 1); + border-radius: 15px; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-size: 14px; + color: #ffffff; + text-align: center; + } + flex-direction: column; + + .number { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-style: normal; + font-size: 20px; + color: #000000; + margin-bottom: 9px; + text-align: center; + } + + .text { + font-size: 15px; + color: #555555; + text-align: center; + } + } + + .tuition-right { + width: 240px; + height: 120px; + background-color: rgba(246, 246, 246, 1); + border-radius: 6px; + + padding: 16px 11px; + .item { + justify-content: space-between; + &:not(:last-of-type) { + margin-bottom: 12px; + } + .key { + font-size: 15px; + color: #555555; + } + .value { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-style: normal; + font-size: 16px; + color: #000000; + } + } + } + } + + .tuition-scholarships { + margin-bottom: 40px; + + .left { + margin-right: 39px; + } + + .right { + .scholarships { + width: 180px; + height: 140px; + font-size: 15px; + color: #000000; + line-height: 34px; + text-align: center; + } + } + } + + .pattern { + padding: 20px 16px 33px; + .tab { + width: 180px; + height: 40px; + background-color: rgba(242, 242, 242, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 114px; + margin: 0 auto 33px; + + .item { + height: 100%; + font-size: 16px; + color: #555555; + cursor: pointer; + &.pitch { + background-color: rgba(111, 193, 109, 1); + border-radius: 22px; + color: #ffffff; + } + } + } + + .introduce { + .item { + text-align: center; + + &:not(:last-of-type) { + border-right: 1px dotted rgb(235, 235, 235); + } + + .value { + font-size: 16px; + color: #000000; + font-family: "Arial-Black", "Arial Black", "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 900; + margin-bottom: 14.5px; + } + + .name { + font-size: 14px; + color: #555555; + } + } + } + } + + .course { + position: relative; + padding-top: 19px; + margin-bottom: 20px; + + .icon { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 16px; + height: 9px; + } + + .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 18px; + color: #000000; + text-align: center; + margin-bottom: 9px; + } + + .hint { + color: #555555; + line-height: 22px; + text-align: center; + margin-bottom: 21px; + } + font-size: 14px; + .table-head { + background-color: rgb(246, 246, 246); + border-top: 1px solid rgb(235, 235, 235); + border-bottom: 1px solid rgb(235, 235, 235); + .item { + height: 40px; + line-height: 40px; + } + } + + .table-body { + .list { + &:not(:last-of-type) { + border-bottom: 1px solid #ebebeb; + } + } + .item { + // height: 100%; + color: #333333; + padding: 12px 4px; + + &.name { + color: #000000; + .english { + font-family: "Arial Normal", "Arial", sans-serif; + color: #aaaaaa; + } + text-align: left; + } + + &.credit { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-style: normal; + font-size: 14px; + color: #000000; + } + } + } + + .item { + text-align: center; + &.number { + width: 134px; + border-right: 1px solid rgb(235, 235, 235); + } + + &.name { + border-right: 1px solid rgb(235, 235, 235); + } + + &.credit { + width: 80px; + } + } + } + + .link { + font-size: 15px; + padding: 17px 20px 24px 15px; + &.brochure { + .img { + width: 70px; + height: 70px; + } + .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + color: #000000; + line-height: normal; + margin-bottom: 10px; + } + .name { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 13px; + color: #555555; + } + } + .title { + color: #000000; + line-height: 34px; + margin-bottom: 8px; + } + .text { + text-decoration: underline; + text-decoration: underline; + line-height: 24px; + color: #333333; + margin-bottom: 20px; + } + + .btn { + width: 127px; + height: 40px; + line-height: 40px; + cursor: pointer; + background-color: rgba(246, 246, 246, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 115px; + color: #333333; + margin-left: 10px; + .icon { + width: 18px; + height: 18px; + margin-right: 6px; + } + + &.open { + border: none; + background-color: rgba(111, 193, 109, 1); + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + color: #ffffff; + } + } + } + + .degree { + text-align: center; + padding: 16px 0 24px; + + .title { + width: 103px; + height: 30px; + position: relative; + z-index: 1; + font-size: 16px; + color: #ffffff; + margin: 0 auto 16px; + .icon { + width: 103px; + height: 30px; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + } + + .name { + font-size: 16px; + color: #000000; + line-height: 34px; + margin-bottom: 10px; + } + + .english { + font-size: 14px; + color: #7f7f7f; + } + } + + .issue-bj { + z-index: 1; + position: relative; + .issue { + padding: 0 26px 0 41px; + margin-left: 5px; + position: relative; + .index-bj { + position: absolute; + width: 27px; + height: 24px; + top: 35px; + left: -5px; + z-index: -1; + } + .index { + width: 30px; + height: 26px; + background-color: rgba(249, 93, 93, 1); + border-radius: 0 5px 5px 0; + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + color: #ffffff; + position: absolute; + top: 21px; + left: -5px; + } + .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #000000; + padding-top: 20px; + padding-bottom: 15px; + border-bottom: 1px dotted rgb(235, 235, 235); + line-height: 28px; + } + + .text { + font-size: 15px; + color: #555555; + line-height: 32px; + padding: 19px 0; + } + } + } + } + } + + .else { + width: 290px; + height: 20px; + } + + .base { + width: 640px; + height: 60px; + background-color: rgba(123, 140, 211, 1); + border-radius: 153px; + position: fixed; + bottom: 15px; + left: 50%; + transform: translateX(-50%); + .left { + width: 450px; + height: 50px; + background-color: #fff; + border-radius: 153px 15px 15px 153px; + margin-right: 5px; + padding: 0 20px; + .text { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; + color: rgba(170, 170, 170, 0.901960784313726); + } + + .img { + width: 20px; + height: 20px; + } + } + + .rigth { + width: 175px; + height: 50px; + background-color: #fff; + border-radius: 15px 153px 153px 15px; + padding-left: 19px; + + .img { + width: 25px; + height: 22px; + margin-right: 5px; + } + + .text { + font-size: 16px; + color: #333333; + margin-right: 9px; + } + + .number { + height: 20px; + line-height: 20px; + background-color: rgba(242, 242, 242, 1); + border-radius: 150px; + font-size: 13px; + color: #f95d5d; + padding: 0 8px; + } + } + } +} diff --git a/img/details-icon.png b/img/details-icon.png new file mode 100644 index 0000000..2088b06 Binary files /dev/null and b/img/details-icon.png differ diff --git a/img/download-icon.png b/img/download-icon.png new file mode 100644 index 0000000..fc07d12 Binary files /dev/null and b/img/download-icon.png differ diff --git a/img/pdf-icon.svg b/img/pdf-icon.svg new file mode 100644 index 0000000..f5d8cd9 --- /dev/null +++ b/img/pdf-icon.svg @@ -0,0 +1,45 @@ + + + + + + + + + \ No newline at end of file diff --git a/img/quotation-mark.png b/img/quotation-mark.png new file mode 100644 index 0000000..1c7d8ae Binary files /dev/null and b/img/quotation-mark.png differ