gter.net/xg-project-library
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
A1300399510 2024-10-30 19:12:42 +08:00
parent aaf6f19f0c
commit 546339b256
17 changed files with 2092 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}

0
index/index.css → 01-index/index.css
View File

0
index/index.html → 01-index/index.html
View File

0
index/index.less → 01-index/index.less
View File

0
school/school.css → 02-school/school.css
View File

0
school/school.html → 02-school/school.html
View File

0
school/school.less → 02-school/school.less
View File

0
subject/subject.css → 03-subject/subject.css
View File

0
subject/subject.html → 03-subject/subject.html
View File

0
subject/subject.less → 03-subject/subject.less
View File

771
04-details/details.css Normal file
View File

@ -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;
}

383
04-details/details.html Normal file
View File

@ -0,0 +1,383 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./details.css" />
</head>
<body>
<div class="main">
<img class="index-icon" src="/img/index-icon.png" />
<div class="box">
<div class="tab flexacenter">
首页
<img class="img" src="/img/arrows.svg" />
按学科查看
<img class="img" src="/img/arrows.svg" />
商业及管理
<img class="img" src="/img/arrows.svg" />
<div class="current">理学硕士（金融学）</div>
</div>
<div class="details flexflex">
<img class="logo" src="/img/details-icon.png" />
<div class="right">
<div class="name">理学硕士（金融学）</div>
<div class="name-en">The University of Hong Kong</div>
<div class="school flexacenter">
<div class="flexacenter">
<img class="icon" src="https://axure-file.lanhuapp.com/md5__68256768938198d279381608ea82d345.png" />
香港大学
</div>
<div class="line">|</div>
商学院
<div class="line">|</div>
经济与金融学系
</div>
<div class="word flexacenter">
<img class="img" src="/img/quotation-mark.png" />
一句话描述独特之处，一句话描述独特之处。
</div>
<div class="tag flexflex">
<div class="tag-item admissions">招生官项目</div>
</div>
</div>
</div>
</div>
<div class="body flexflex">
<div class="content flex1 flexflex">
<div class="side flexflex">
<div class="item flexcenter pitch">基本信息</div>
<div class="item flexcenter">基本信息</div>
<div class="item flexcenter">基本信息</div>
<div class="item flex1"></div>
</div>
<div class="details-box flex1">
<div class="side-item">
<div style="display: none;">
<div class="item-header flexacenter">
<div>专业排名</div>
<div class="list-btn flexacenter">
榜单
<image class="icon" mode="widthFix" src="/img/arrows-circle-black.svg"> </image>
</div>
</div>
<div class="ranking">
<div class="item flexflex">
<div class="rank flexacenter">
<img class="logo" />
<div class="number flexcenter">
70
<img class="triangle" src="https://app.gter.net/image/miniApp/offer/triangle-qs.svg" />
</div>
</div>
<div class="rank-box flexflex flex1">
<div class="itemm flexacenter">
<div class="key">年份：</div>
<div class="value flex1">2024</div>
</div>
<div class="itemm flexacenter">
<div class="key">学科：</div>
<div class="value flex1">Accounting & Finance</div>
</div>
</div>
</div>
<div class="item flexflex">
<div class="rank flexacenter">
<img class="logo" />
<div class="number flexcenter">
70
<img class="triangle" src="https://app.gter.net/image/miniApp/offer/triangle-qs.svg" />
</div>
</div>
<div class="rank-box flexflex flex1">
<div class="itemm flexacenter">
<div class="key">年份：</div>
<div class="value flex1">2024</div>
</div>
<div class="itemm flexacenter">
<div class="key">学科：</div>
<div class="value flex1">Accounting & Finance</div>
</div>
</div>
</div>
<div class="item flexflex">
<div class="rank flexacenter">
<img class="logo" />
<div class="number flexcenter">
70
<img class="triangle" src="https://app.gter.net/image/miniApp/offer/triangle-qs.svg" />
</div>
</div>
<div class="rank-box flexflex flex1">
<div class="itemm flexacenter">
<div class="key">年份：</div>
<div class="value flex1">2024</div>
</div>
<div class="itemm flexacenter">
<div class="key">学科：</div>
<div class="value flex1">Accounting & Finance</div>
</div>
</div>
</div>
<div class="item flexflex">
<div class="rank flexacenter">
<img class="logo" />
<div class="number flexcenter">
70
<img class="triangle" src="https://app.gter.net/image/miniApp/offer/triangle-qs.svg" />
</div>
</div>
<div class="rank-box flexflex flex1">
<div class="itemm flexacenter">
<div class="key">年份：</div>
<div class="value flex1">2024</div>
</div>
<div class="itemm flexacenter">
<div class="key">学科：</div>
<div class="value flex1">Accounting & Finance</div>
</div>
</div>
</div>
</div>
<div class="item-header flexacenter">申请日程</div>
<div class="application-schedule block">
<div class="list">
<div class="time flexflex">
<div class="item flex1">
<div class="name">2024-01-05</div>
<div class="value">开始申请日期</div>
</div>
<div class="item flex1">
<div class="name">2024-01-05</div>
<div class="value">截止申请日期</div>
</div>
</div>
</div>
<div class="application-else">
<div class="item flexacenter">
<div class="name">面试时间：</div>
<div class="value flex1">2024-01-05</div>
</div>
<div class="item flexacenter">
<div class="name">结果通知时间：</div>
<div class="value flex1">2024-01-05</div>
</div>
</div>
</div>
<div class="item-header flexacenter">最低入学要求</div>
<div class="demand block">
<div class="text">· 申请人必须持有认可大学颁发的学士学位； · 最好拥有超过1年的相关行业工作经验； · 如申请人的学士学位在非英语授课的院校获得，则需满足以下英语能力要求：</div>
<div class="title">英语能力要求</div>
<div class="hint">满足以下其中一项即可</div>
<div class="list">
<div class="item flexflex">
<img class="triangle" src="https://app.gter.net/image/miniApp/offer/triangle-red.svg" />
<div class="name">托福网考</div>
<div class="value">总分 79 分以上</div>
</div>
<div class="item flexflex">
<img class="triangle" src="https://app.gter.net/image/miniApp/offer/triangle-red.svg" />
<div class="name">全国大学英语六级考试</div>
<div class="value">总分 6.5 分以上</div>
</div>
</div>
</div>
<div class="tuition-scholarships flexflex">
<div class="left">
<div class="item-header flexacenter">
费用
</div>
<div class="tuition block flexacenter">
<div class="tuition-left flex1 flexjcenter">
<div class="unit">HK$</div>
<div class="number">待确认</div>
<div class="text">总学费</div>
</div>
<div class="tuition-right">
<div class="item flexacenter">
<div class="key">每学分学费</div>
<div class="value">-</div>
</div>
<div class="item flexacenter">
<div class="key">申请费</div>
<div class="value">-</div>
</div>
<div class="item flexacenter">
<div class="key">入学保证金</div>
<div class="value">-</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="item-header flexacenter">奖学金</div>
<div class="scholarships block flexcenter">非本地学生无</div>
</div>
</div>
<div class="item-header flexacenter">学习模式</div>
<div class="pattern block">
<div class="tab flexacenter">
<div class="item flex1 flexcenter pitch">全日制</div>
<div class="item flex1 flexcenter">兼读制</div>
</div>
<div class="introduce flexflex">
<div class="item flex1">
<div class="value">-</div>
<div class="name">教学语言</div>
</div>
<div class="item flex1">
<div class="value">-</div>
<div class="name">正常学习时长</div>
</div>
<div class="item flex1">
<div class="value">待确认</div>
<div class="name">最长学习时长</div>
</div>
</div>
<!-- <div class="introduce flexflex">
<div class="item flex1">
<div class="value">-</div>
<div class="name">教学语言</div>
</div>
<div class="item flex1">
<div class="value">-</div>
<div class="name">正常学习时长</div>
</div>
<div class="item flex1">
<div class="value">待确认</div>
<div class="name">最长学习时长</div>
</div>
</div> -->
</div>
<div class="course block">
<img class="icon" src="https://app.gter.net/image/miniApp/offer/triangle-red.svg" />
<div class="title">必修课程</div>
<div class="hint">（共 24 学分）</div>
<div class="table-head flexacenter">
<div class="item number">课程编号</div>
<div class="item name flex1">课程名称</div>
<div class="item credit">学分</div>
</div>
<div class="table-body">
<div class="list flexflex">
<div class="item number flexcenter">EF5042</div>
<div class="item name flex1">
<div class="text">公司金融</div>
<div class="english">Corporate Finance</div>
</div>
<div class="item credit flexcenter">3</div>
</div>
<div class="list flexflex">
<div class="item number flexcenter">EF5042</div>
<div class="item name flex1">
<div class="text">公司金融</div>
<div class="english">Corporate Finance</div>
</div>
<div class="item credit flexcenter">3</div>
</div>
<div class="list flexflex">
<div class="item number flexcenter">EF5042</div>
<div class="item name flex1">
<div class="text">公司金融</div>
<div class="english">Corporate Finance</div>
</div>
<div class="item credit flexcenter">3</div>
</div>
<div class="list flexflex">
<div class="item number flexcenter">EF5042</div>
<div class="item name flex1">
<div class="text">公司金融</div>
<div class="english">Corporate Finance</div>
</div>
<div class="item credit flexcenter">3</div>
</div>
</div>
</div>
</div>
<div class="link block">
<div class="title">项目目录项目详情</div>
<div class="text">https://www.cityu.edu.hk/catalogue/pg/202324/programme/MSF.html</div>
<div class="flexflex" style="justify-content: flex-end;">
<div class="btn flexcenter">
<img class="icon" src="https://app.gter.net/image/miniApp/offer/copy-icon.png" mode="widthFix" />
复制链接
</div>
<div class="btn open flexcenter">打开链接</div>
</div>
</div>
<div class="item-header flexacenter">学位</div>
<div class="degree block">
<div class="title flexcenter">
<img class="icon" src="https://app.gter.net/image/miniApp/offer/name-bj.svg" mode="widthFix" />
学位名称
</div>
<div class="name">理学硕士（金融学）</div>
<div class="english">Master of Science in Finance</div>
</div>
<div class="issue-bj">
<div class="issue block">
<div class="index flexcenter">1</div>
<img class="index-bj" src="https://app.gter.net/image/miniApp/offer/index-bj.svg" />
<div class="title">我需要拥有“与商业相关”的学位吗？</div>
<div class="text">申请人如果在非金融或非商业专业拥有优秀的学术记录，也会被考虑。</div>
</div>
</div>
<div class="item-header flexacenter">宣传册</div>
<div class="link brochure block">
<div class="top flexacenter">
<img class="img" src="/img/pdf-icon.svg" />
<div class="right">
<div class="title">宣传册</div>
<div class="name">MSF-MSFE_A4_poster_chi_2024.pdf</div>
</div>
</div>
<div class="flexflex" style="justify-content: flex-end;">
<div class="btn flexcenter">
<img class="icon" src="/img/download-icon.png" />
下载文件
</div>
<div class="btn open flexcenter">打开文件</div>
</div>
</div>
</div>
</div>
</div>
<div class="else"></div>
</div>
<!-- 底部 -->
<div class="base flexcenter">
<div class="left flexacenter">
<div class="text flex1">搜索项目</div>
<img class="img" src="/img/search-black-icon.svg" />
</div>
<div class="rigth flexacenter">
<img class="img" src="/img/contrast-icon.png" />
<div class="text">项目对比</div>
<div class="number">16</div>
</div>
</div>
</div>
<script>
function name() {
return "123"
}
</script>
</body>
</html>

890
04-details/details.less Normal file
View File

@ -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;
}
}
}
}

BIN
img/details-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 327 KiB

BIN
img/download-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

45
img/pdf-icon.svg Normal file
View File

File diff suppressed because one or more lines are too long

BIN
img/quotation-mark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 995 B