diff --git a/css/details.css b/css/details.css index 03d34a2..64ac9fe 100644 --- a/css/details.css +++ b/css/details.css @@ -94,7 +94,6 @@ align-items: flex-start; } .content { - height: 1214px; background-color: #ffffff; border: 1px solid #f2f2f2; border-radius: 12px; @@ -186,6 +185,9 @@ height: 16px; margin-left: 8px; } +.content .details-box .mb40 { + margin-bottom: 40px; +} .content .details-box .ranking { margin-bottom: 40px; } @@ -202,6 +204,7 @@ background-color: #ffffff; padding: 0 22px; justify-content: space-between; + width: 252px; } .content .details-box .ranking .item .rank .logo { height: 24px; @@ -235,6 +238,72 @@ .content .details-box .ranking .item .rank-box .itemm:first-of-type { margin-bottom: 9px; } +.content .details-box .text-box { + padding: 20px 16px 20px; + position: relative; + overflow: hidden; +} +.content .details-box .text-box .text-head { + 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; + display: flex; + flex-direction: column; + margin-bottom: 20px; +} +.content .details-box .text-box .text-head .text-icon { + width: 16px; + height: 9px; + margin: auto auto 11px; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); +} +.content .details-box .text-box .text-list { + width: 640px; + height: 320px; + overflow: hidden; + white-space: nowrap; +} +.content .details-box .text-box .text { + display: inline-block; + font-size: 15px; + color: #000000; + line-height: 32px; + white-space: pre-line; +} +.content .details-box .text-box .text.text-center { + width: 100%; + text-align: center; +} +.content .details-box .text-box .text.textRef { + position: absolute; + color: transparent; + top: -10000%; + padding: 20px 16px; +} +.content .details-box .text-box .indicate { + line-height: 12px; + margin-top: 24px; +} +.content .details-box .text-box .indicate .icon { + width: 7px; + height: 12px; + cursor: pointer; +} +.content .details-box .text-box .indicate .icon.btn-right { + transform: rotate(180deg); +} +.content .details-box .text-box .indicate .text { + color: #555555; + font-size: 13px; + margin: 0 12px; + line-height: normal; +} .content .details-box .application-schedule { margin-bottom: 40px; } diff --git a/css/details.less b/css/details.less index 41133d6..4a0a398 100644 --- a/css/details.less +++ b/css/details.less @@ -107,7 +107,6 @@ } .content { - height: 1214px; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(242, 242, 242, 1); border-radius: 12px; @@ -205,6 +204,10 @@ } } + .mb40 { + margin-bottom: 40px; + } + .ranking { margin-bottom: 40px; .item { @@ -220,6 +223,7 @@ background-color: rgba(255, 255, 255, 1); padding: 0 22px; justify-content: space-between; + width: 252px; .logo { height: 24px; } @@ -261,6 +265,79 @@ } } + .text-box { + padding: 20px 16px 20px; + position: relative; + overflow: hidden; + .text-head { + .text-icon { + width: 16px; + height: 9px; + margin: auto auto 11px; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + } + 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; + display: flex; + flex-direction: column; + margin-bottom: 20px; + } + .text-list { + width: 640px; + height: 320px; + overflow: hidden; + white-space: nowrap; + } + .text { + display: inline-block; + // margin: 20px 0; + font-size: 15px; + color: #000000; + line-height: 32px; + white-space: pre-line; + + &.text-center { + width: 100%; + text-align: center; + } + &.textRef { + position: absolute; + color: transparent; + top: -10000%; + padding: 20px 16px; + } + } + + .indicate { + line-height: 12px; + margin-top: 24px; + + .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; + } + } + } + .application-schedule { margin-bottom: 40px; .list { @@ -884,7 +961,6 @@ width: 251px; border-radius: 6px; background-color: rgba(247, 247, 247, 1); - } .brief { display: inline-block; diff --git a/html/details.html b/html/details.html index c768fa7..7c9de3e 100644 --- a/html/details.html +++ b/html/details.html @@ -6,9 +6,14 @@ Document + + + + + -
+
@@ -17,33 +22,39 @@ 按学科查看 - 商业及管理 + {{ disciplineObj[info.disciplineid]?.label || '' }} -
理学硕士（金融学）
+
{{ info.name_zh }}
-
理学硕士（金融学）
-
The University of Hong Kong
+
{{ info.name_zh }}
+
{{ info.name_en }}
- - 香港大学 + + {{ info.schoolname || '' }}
-
|
- 商学院 -
|
- 经济与金融学系 + +
- 一句话描述独特之处，一句话描述独特之处。 + 111111111111111111111111111
-
招生官项目
+
招生官项目
+
{{ info?.semester?.text }}
+
{{ item }}
@@ -52,257 +63,220 @@
-
基本信息
-
基本信息
-
基本信息
-
+
{{ item }}
-
-
-
专业排名
-
- 榜单 - -
+
+
专业排名
+
+ 榜单 +
-
-
-
- -
- 70 - -
-
-
-
-
年份：
-
2024
-
-
-
学科：
-
Accounting & Finance
-
+
+
+
+
+ +
+ {{ item.total_score }} +
-
-
- -
- 70 - -
+
+
+
年份：
+
{{ item.year }}
-
-
-
年份：
-
2024
-
-
-
学科：
-
Accounting & Finance
-
-
-
-
-
- -
- 70 - -
-
-
-
-
年份：
-
2024
-
-
-
学科：
-
Accounting & Finance
-
-
-
-
-
- -
- 70 - -
-
-
-
-
年份：
-
2024
-
-
-
学科：
-
Accounting & Finance
-
+
+
学科：
+
{{ item.subject }}
-
申请日程
-
-
-
-
-
2024-01-05
-
开始申请日期
-
-
-
2024-01-05
-
截止申请日期
-
-
-
-
-
-
面试时间：
-
2024-01-05
-
-
-
结果通知时间：
-
2024-01-05
-
-
-
-
最低入学要求
+
+
项目简介
+ -
-
· 申请人必须持有认可大学颁发的学士学位； · 最好拥有超过1年的相关行业工作经验； · 如申请人的学士学位在非英语授课的院校获得，则需满足以下英语能力要求：
+
专业资格认证
+ + +
还没 申请日程
+
+
+
+
+
2024-01-05
+
开始申请日期
+
+
+
2024-01-05
+
截止申请日期
+
+
+
+
+
+
面试时间：
+
2024-01-05
+
+
+
结果通知时间：
+
2024-01-05
+
+
+
+ +
最低入学要求
+
+
{{ info.entrance_requirements || '-' }}
+ +
-
-
-
- 费用 + + +
+
+
+ 费用 +
+
+
+
{{ info.tuition_currency || 'HK$' }}
+
{{ info.tuition_fee_text || '待确认' }}
+
总学费
-
-
-
HK$
-
待确认
-
总学费
+
+
+
每学分学费
+
{{ info.tuition_fee_per_credit_text || '-' }}
-
-
-
每学分学费
-
-
-
-
-
申请费
-
-
-
-
-
入学保证金
-
-
-
+
+
申请费
+
{{ info.application_fee_text || '-' }}
+
+
+
入学保证金
+
{{ info.admission_deposit_text || '-' }}
-
-
奖学金
-
非本地学生无
-
+
+
+
奖学金
+
{{ info.scholarships || '-' }}
+
+
+ + + + + +
学习模式
+
+
+
全日制
+
兼读制
-
学习模式
-
-
-
全日制
-
兼读制
-
- -
-
-
-
-
教学语言
-
-
-
-
-
正常学习时长
-
-
-
待确认
-
最长学习时长
-
-
- -
-
- -
必修课程
-
（共 24 学分）
-
-
课程编号
-
课程名称
-
学分
+
+
+
{{ info.language_of_instruction_text || '-' }}
+
教学语言
-
-
-
EF5042
-
-
公司金融
-
Corporate Finance
-
-
3
+
+
{{ info.pt_normal_period || '-' }}
+
正常学习时长
+
+
+
{{ info.pt_maximum_period || '待确认' }}
+
最长学习时长
+
+
+
+ + + + +
课程设置
+
+ +
必修课程
+
（共 24 学分）
+
+
课程编号
+
课程名称
+
学分
+
+
+
+
EF5042
+
+
公司金融
+
Corporate Finance
-
-
EF5042
-
-
公司金融
-
Corporate Finance
-
-
3
+
3
+
+
+
EF5042
+
+
公司金融
+
Corporate Finance
-
-
EF5042
-
-
公司金融
-
Corporate Finance
-
-
3
+
3
+
+
+
EF5042
+
+
公司金融
+
Corporate Finance
-
-
EF5042
-
-
公司金融
-
Corporate Finance
-
-
3
+
3
+
+
+
EF5042
+
+
公司金融
+
Corporate Finance
+
3
@@ -448,9 +422,173 @@
diff --git a/img/arrows-triangle-red.png b/img/arrows-triangle-red.png new file mode 100644 index 0000000..039f44f Binary files /dev/null and b/img/arrows-triangle-red.png differ diff --git a/img/qs.png b/img/qs.png new file mode 100644 index 0000000..06b1eb9 Binary files /dev/null and b/img/qs.png differ diff --git a/img/ruanke.png b/img/ruanke.png new file mode 100644 index 0000000..a0b3358 Binary files /dev/null and b/img/ruanke.png differ diff --git a/img/times.png b/img/times.png new file mode 100644 index 0000000..c842459 Binary files /dev/null and b/img/times.png differ diff --git a/img/triangle-red.svg b/img/triangle-red.svg new file mode 100644 index 0000000..840f36b --- /dev/null +++ b/img/triangle-red.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/img/usnews.png b/img/usnews.png new file mode 100644 index 0000000..e7c2d20 Binary files /dev/null and b/img/usnews.png differ diff --git a/js/base.js b/js/base.js index 5704a1f..b9e112c 100644 --- a/js/base.js +++ b/js/base.js @@ -17,7 +17,7 @@ const base = { hideIcon: false, top: 0, left: 0, - count:0, + count: 0, } }, methods: { @@ -63,3 +63,79 @@ const base = { }, }, } + +const textModule = { + template: `
+
{{ text }}
+
+ + {{ title }} +
+
{{ text }}
+
+
{{ text }}
+
+
+ +
{{ current }}/{{ page.length }}
+ +
+
`, + props: ["text", "title"], + setup(props) { + console.log(props.text) + // let text = ref(`55`) + const textRef = ref(null) + let page = ref(0) + let h = ref(0) + let isswiper = ref(false) + + onMounted(() => { + console.log("props", props) + if (props.text.length < 20) return + const lineHeight = 32 + const height = lineHeight * 10 + + const pagecount = textRef.value.clientHeight / height + + let arr = [] + + for (let i = 0; i < Math.floor(pagecount); i++) { + arr.push(height) + } + + const decimalPart = parseFloat("0." + pagecount.toString().split(".")[1]) + if (decimalPart > 0) arr.push(height * decimalPart) + page.value = arr + h.value = height + isswiper.value = arr.length > 1 ? true : false + }) + + const listRef = ref(null) + let current = ref(1) + const cutHotListPage = type => { + if (type == "left") { + if (current.value > 1) current.value-- + } else { + if (current.value < page.value.length) current.value++ + } + listRef.value.scrollTo({ + left: 640 * (current.value - 1), + behavior: "smooth", + }) + } + + // 计算 + const reversedMessage = type => { + if (type == "left") { + if (current.value == 1) return "/img/arrows-triangle-gray.svg" + else return "/img/arrows-triangle-red.png" + } else { + if (current.value == page.value.length) return "/img/arrows-triangle-gray.svg" + else return "/img/arrows-triangle-red.png" + } + } + + return { reversedMessage, cutHotListPage, textRef, isswiper, h, page, current, listRef } + }, +}