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-11-06 19:05:28 +08:00
parent bc9734adfa
commit a9b932f19d
10 changed files with 595 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
css/details.css
View File

@ -94,7 +94,6 @@
align-items: flex-start; align-items: flex-start;
} }
.content { .content {
height: 1214px;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #f2f2f2; border: 1px solid #f2f2f2;
border-radius: 12px; border-radius: 12px;
@ -186,6 +185,9 @@
height: 16px; height: 16px;
margin-left: 8px; margin-left: 8px;
} }
.content .details-box .mb40 {
margin-bottom: 40px;
}
.content .details-box .ranking { .content .details-box .ranking {
margin-bottom: 40px; margin-bottom: 40px;
} }
@ -202,6 +204,7 @@
background-color: #ffffff; background-color: #ffffff;
padding: 0 22px; padding: 0 22px;
justify-content: space-between; justify-content: space-between;
width: 252px;
} }
.content .details-box .ranking .item .rank .logo { .content .details-box .ranking .item .rank .logo {
height: 24px; height: 24px;
@ -235,6 +238,72 @@
.content .details-box .ranking .item .rank-box .itemm:first-of-type { .content .details-box .ranking .item .rank-box .itemm:first-of-type {
margin-bottom: 9px; 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 { .content .details-box .application-schedule {
margin-bottom: 40px; margin-bottom: 40px;
} }

80
css/details.less
View File

@ -107,7 +107,6 @@
} }
.content { .content {
height: 1214px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(242, 242, 242, 1); border: 1px solid rgba(242, 242, 242, 1);
border-radius: 12px; border-radius: 12px;
@ -205,6 +204,10 @@
} }
} }
.mb40 {
margin-bottom: 40px;
}
.ranking { .ranking {
margin-bottom: 40px; margin-bottom: 40px;
.item { .item {
@ -220,6 +223,7 @@
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
padding: 0 22px; padding: 0 22px;
justify-content: space-between; justify-content: space-between;
width: 252px;
.logo { .logo {
height: 24px; 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 { .application-schedule {
margin-bottom: 40px; margin-bottom: 40px;
.list { .list {
@ -884,7 +961,6 @@
width: 251px; width: 251px;
border-radius: 6px; border-radius: 6px;
background-color: rgba(247, 247, 247, 1); background-color: rgba(247, 247, 247, 1);
} }
.brief { .brief {
display: inline-block; display: inline-block;

358
html/details.html
View File

@ -6,9 +6,14 @@
<title>Document</title> <title>Document</title>
<link rel="stylesheet" href="/css/common.css" /> <link rel="stylesheet" href="/css/common.css" />
<link rel="stylesheet" href="/css/details.css" /> <link rel="stylesheet" href="/css/details.css" />
<script src="/js/axios.min.js"></script>
<script src="/js/vue.global.js"></script>
<script src="/js/common.js"></script>
<script src="/js/base.js"></script>
<script src="/js/crypto-js.js"></script>
</head> </head>
<body> <body>
<div class="main"> <div class="main" id="app">
<img class="index-icon" src="/img/index-icon.png" /> <img class="index-icon" src="/img/index-icon.png" />
<div class="box"> <div class="box">
@ -17,33 +22,39 @@
<img class="img" src="/img/arrows.svg" /> <img class="img" src="/img/arrows.svg" />
按学科查看 按学科查看
<img class="img" src="/img/arrows.svg" /> <img class="img" src="/img/arrows.svg" />
商业及管理 {{ disciplineObj[info.disciplineid]?.label || '' }}
<img class="img" src="/img/arrows.svg" /> <img class="img" src="/img/arrows.svg" />
<div class="current">理学硕士（金融学）</div> <div class="current">{{ info.name_zh }}</div>
</div> </div>
<div class="details flexflex"> <div class="details flexflex">
<img class="logo" src="/img/details-icon.png" /> <img class="logo" src="/img/details-icon.png" />
<div class="right"> <div class="right">
<div class="name">理学硕士（金融学）</div> <div class="name">{{ info.name_zh }}</div>
<div class="name-en">The University of Hong Kong</div> <div class="name-en">{{ info.name_en }}</div>
<div class="school flexacenter"> <div class="school flexacenter">
<div class="flexacenter"> <div class="flexacenter">
<img class="icon" src="https://axure-file.lanhuapp.com/md5__68256768938198d279381608ea82d345.png" /> <img class="icon" :src="info.schoollogo" />
香港大学 {{ info.schoolname || '' }}
</div> </div>
<template v-if="info.au0">
<div class="line">|</div> <div class="line">|</div>
商学院 {{ info.au0 }}
</template>
<template v-if="info.au1">
<div class="line">|</div> <div class="line">|</div>
经济与金融学系 {{ info.au1 }}
</template>
</div> </div>
<div class="word flexacenter"> <div class="word flexacenter">
<img class="img" src="/img/quotation-mark.png" /> <img class="img" src="/img/quotation-mark.png" />
一句话描述独特之处，一句话描述独特之处。 111111111111111111111111111
</div> </div>
<div class="tag flexflex"> <div class="tag flexflex">
<div class="tag-item admissions">招生官项目</div> <div class="tag-item admissions" v-if="info.admissionsproject">招生官项目</div>
<div class="tag-item gray" :class="{'semester': info.semesterState}">{{ info?.semester?.text }}</div>
<div class="tag-item" v-for="item in info.tags">{{ item }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -52,14 +63,10 @@
<div class="body flexflex"> <div class="body flexflex">
<div class="content flex1 flexflex"> <div class="content flex1 flexflex">
<div class="side flexflex"> <div class="side flexflex">
<div class="item flexcenter pitch">基本信息</div> <div class="item flexcenter" :class="{'pitch': sideKey == key}" v-for="(item,key) in side">{{ item }}</div>
<div class="item flexcenter">基本信息</div>
<div class="item flexcenter">基本信息</div>
<div class="item flex1"></div>
</div> </div>
<div class="details-box flex1"> <div class="details-box flex1">
<div class="side-item"> <div class="side-item">
<div style="display: none;">
<div class="item-header flexacenter"> <div class="item-header flexacenter">
<div>专业排名</div> <div>专业排名</div>
<div class="list-btn flexacenter"> <div class="list-btn flexacenter">
@ -68,84 +75,33 @@
</div> </div>
</div> </div>
<div class="ranking"> <div class="ranking">
<div class="item flexflex"> <div class="item flexflex" v-for="item in info.rankings">
<div class="rank flexacenter"> <div class="rank flexacenter">
<img class="logo" /> <img class="logo" :src="'/img/' + rankingsObj[item.system].alias + '.png'" />
<div class="number flexcenter"> <div class="number flexcenter">
70 {{ item.total_score }}
<img class="triangle" src="https://app.gter.net/image/miniApp/offer/triangle-qs.svg" /> <img class="triangle" src="https://app.gter.net/image/miniApp/offer/triangle-qs.svg" />
</div> </div>
</div> </div>
<div class="rank-box flexflex flex1"> <div class="rank-box flexflex flex1">
<div class="itemm flexacenter"> <div class="itemm flexacenter">
<div class="key">年份：</div> <div class="key">年份：</div>
<div class="value flex1">2024</div> <div class="value flex1">{{ item.year }}</div>
</div> </div>
<div class="itemm flexacenter"> <div class="itemm flexacenter">
<div class="key">学科：</div> <div class="key">学科：</div>
<div class="value flex1">Accounting & Finance</div> <div class="value flex1">{{ item.subject }}</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> </div>
</div> </div>
<div class="item-header flexacenter">申请日程</div> <div class="item-header flexacenter">项目简介</div>
<text-module :text="info.intro || ' - '" class="mb40"></text-module>
<div class="item-header flexacenter">专业资格认证</div>
<text-module :text="info.accreditation || '无'" class="mb40"></text-module>
<div class="item-header flexacenter">还没 申请日程</div>
<div class="application-schedule block"> <div class="application-schedule block">
<div class="list"> <div class="list">
<div class="time flexflex"> <div class="time flexflex">
@ -170,26 +126,28 @@
</div> </div>
</div> </div>
</div> </div>
<div class="item-header flexacenter">最低入学要求</div>
<div class="item-header flexacenter">最低入学要求</div>
<div class="demand block"> <div class="demand block">
<div class="text">· 申请人必须持有认可大学颁发的学士学位； · 最好拥有超过1年的相关行业工作经验； · 如申请人的学士学位在非英语授课的院校获得，则需满足以下英语能力要求：</div> <div class="text">{{ info.entrance_requirements || '-' }}</div>
<template v-if="info.english_proficiency">
<div class="title">英语能力要求</div> <div class="title">英语能力要求</div>
<div class="hint">满足以下其中一项即可</div> <div class="hint">满足以下其中一项即可</div>
<div class="list"> <div class="list">
<div class="item flexflex"> <div class="item flexflex" v-for="item in info.english_proficiency">
<img class="triangle" src="https://app.gter.net/image/miniApp/offer/triangle-red.svg" /> <img class="triangle" src="https://app.gter.net/image/miniApp/offer/triangle-red.svg" />
<div class="name">托福网考</div> <div class="name">{{ item.name_zh }}</div>
<div class="value">总分 79 分以上</div> <div class="value">总分 {{ item.total }} 分以上</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>
</template>
</div> </div>
<template v-if="info.documents_required">
<div class="item-header flexacenter">必须文件</div>
<text-module :text="info.documents_required || '无'" class="mb40"></text-module>
</template>
<div class="tuition-scholarships flexflex"> <div class="tuition-scholarships flexflex">
<div class="left"> <div class="left">
<div class="item-header flexacenter"> <div class="item-header flexacenter">
@ -197,70 +155,87 @@
</div> </div>
<div class="tuition block flexacenter"> <div class="tuition block flexacenter">
<div class="tuition-left flex1 flexjcenter"> <div class="tuition-left flex1 flexjcenter">
<div class="unit">HK$</div> <div class="unit">{{ info.tuition_currency || 'HK$' }}</div>
<div class="number">待确认</div> <div class="number">{{ info.tuition_fee_text || '待确认' }}</div>
<div class="text">总学费</div> <div class="text">总学费</div>
</div> </div>
<div class="tuition-right"> <div class="tuition-right">
<div class="item flexacenter"> <div class="item flexacenter">
<div class="key">每学分学费</div> <div class="key">每学分学费</div>
<div class="value">-</div> <div class="value">{{ info.tuition_fee_per_credit_text || '-' }}</div>
</div> </div>
<div class="item flexacenter"> <div class="item flexacenter">
<div class="key">申请费</div> <div class="key">申请费</div>
<div class="value">-</div> <div class="value">{{ info.application_fee_text || '-' }}</div>
</div> </div>
<div class="item flexacenter"> <div class="item flexacenter">
<div class="key">入学保证金</div> <div class="key">入学保证金</div>
<div class="value">-</div> <div class="value">{{ info.admission_deposit_text || '-' }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<div class="item-header flexacenter">奖学金</div> <div class="item-header flexacenter">奖学金</div>
<div class="scholarships block flexcenter">非本地学生无</div> <div class="scholarships block flexcenter">{{ info.scholarships || '-' }}</div>
</div> </div>
</div> </div>
<template v-if="info.selection_criteria">
<div class="item-header flexacenter">录取选择标准</div>
<text-module :text="info.selection_criteria || '- 暂无 -'" class="mb40"></text-module>
</template>
<template v-if="info.recent_admission">
<div class="item-header flexacenter">近期录取信息</div>
<text-module :text="info.recent_admission || '- 暂无 -'" class="mb40"></text-module>
</template>
<div class="item-header flexacenter">学习模式</div> <div class="item-header flexacenter">学习模式</div>
<div class="pattern block"> <div class="pattern block mb40">
<div class="tab flexacenter"> <div class="tab flexacenter">
<div class="item flex1 flexcenter pitch">全日制</div> <div class="item flex1 flexcenter" :class="{'pitch': studyMode == 'ft'}" @click="cutStudyMode('ft')">全日制</div>
<div class="item flex1 flexcenter">兼读制</div> <div class="item flex1 flexcenter" :class="{'pitch': studyMode == 'pt'}" @click="cutStudyMode('pt')">兼读制</div>
</div> </div>
<div class="introduce flexflex"> <div class="introduce flexflex" v-if="studyMode == 'ft'">
<div class="item flex1"> <div class="item flex1">
<div class="value">-</div> <div class="value">{{ info.language_of_instruction_text || '-' }}</div>
<div class="name">教学语言</div> <div class="name">教学语言</div>
</div> </div>
<div class="item flex1"> <div class="item flex1">
<div class="value">-</div> <div class="value">{{ info.ft_normal_period || '-' }}</div>
<div class="name">正常学习时长</div> <div class="name">正常学习时长</div>
</div> </div>
<div class="item flex1"> <div class="item flex1">
<div class="value">待确认</div> <div class="value">{{ info.ft_maximum_period || '待确认' }}</div>
<div class="name">最长学习时长</div> <div class="name">最长学习时长</div>
</div> </div>
</div> </div>
<!-- <div class="introduce flexflex"> <div class="introduce flexflex" v-else>
<div class="item flex1"> <div class="item flex1">
<div class="value">-</div> <div class="value">{{ info.language_of_instruction_text || '-' }}</div>
<div class="name">教学语言</div> <div class="name">教学语言</div>
</div> </div>
<div class="item flex1"> <div class="item flex1">
<div class="value">-</div> <div class="value">{{ info.pt_normal_period || '-' }}</div>
<div class="name">正常学习时长</div> <div class="name">正常学习时长</div>
</div> </div>
<div class="item flex1"> <div class="item flex1">
<div class="value">待确认</div> <div class="value">{{ info.pt_maximum_period || '待确认' }}</div>
<div class="name">最长学习时长</div> <div class="name">最长学习时长</div>
</div> </div>
</div> --> </div>
</div> </div>
<template v-if="info.time_of_class">
<div class="item-header flexacenter">上课时间</div>
<text-module :text="info.time_of_class || '- 暂无 -'" class="mb40"></text-module>
</template>
<div v-if="course.required.length != 0 || course.required.length != 0" class="item-header flexacenter">课程设置</div>
<div class="course block"> <div class="course block">
<img class="icon" src="https://app.gter.net/image/miniApp/offer/triangle-red.svg" /> <img class="icon" src="https://app.gter.net/image/miniApp/offer/triangle-red.svg" />
<div class="title">必修课程</div> <div class="title">必修课程</div>
@ -305,7 +280,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="link block"> <div class="link block">
<div class="title">项目目录项目详情</div> <div class="title">项目目录项目详情</div>
@ -448,9 +422,173 @@
</div> </div>
</div> </div>
<script> <script>
function name() { const { createApp, ref, onMounted, nextTick, onUnmounted, computed, defineProps } = Vue
return "123" const subject = createApp({
setup() {
let side = ref({
// pivotal: "关键信息",
basic: "基本信息",
apply: "申请信息",
attend: "就读信息",
graduate: "毕业&就业",
issue: "常见问题",
links: "相关链接",
})
let rankingsObj = ref({})
let disciplineObj = ref({})
const uniqid = "fOzLnH48yS5C"
onMounted(() => {
// window.addEventListener("scroll", handleScroll)
getBaseData().then(data => {
rankingsObj.value = data.rankings
disciplineObj.value = data.discipline
getData()
})
})
let info = ref({})
let remark = ref("")
let sideKey = ref("pivotal")
let contras = ref({})
let course = ref({})
const getData = () => {
$ajaxget("/api/project.detail", {
uniqid,
}).then(res => {
const data = res.data
decodeKey(data.info).then(res => {
data.info = res
let courseObj = {
required: [],
requiredCount: 0,
elective: [],
electiveCount: 0,
} }
const infoObj = data.info || {}
const fields = ["tuition_fee", "tuition_fee_per_credit", "application_fee", "admission_deposit"]
fields.forEach(field => {
const textKey = `${field}_text`
infoObj[textKey] = formatNumberWithSpaces(info[field] || "")
})
const curriculum = infoObj.curriculum || []
if (infoObj.language_of_instruction) {
let strOutput = infoObj.language_of_instruction.join(",")
infoObj["language_of_instruction_text"] = strOutput
}
curriculum.forEach(element => {
if (element.credit == "N/A") element.credit = 0
element.type === "必修课" ? (courseObj.required.push(element), (courseObj.requiredCount += element.credit)) : (courseObj.elective.push(element), (courseObj.electiveCount += element.credit))
})
let contrasObj = data.contras
if (Array.isArray(contrasObj)) contrasObj = {}
remark.value = contrasObj.remarks || ""
// 算出最后申请时间
infoObj["application_end"] = calculateApplicaDeadline(infoObj.nonlocal_application_end || {})
// 算出面试轮时间
infoObj["interviewRounds"] = calculateInterviewRound(infoObj.nonlocal_application_end || {})
if (typeof infoObj.mode_of_study == "string") infoObj.mode_of_study = JSON.parse(info.mode_of_study)
let sideObj = side.value
// 判断是否常见问题 ，没有则删除左侧
if (!infoObj.faq || infoObj.faq.length == 0) delete sideObj.issue
// 判断 毕业就业 没有则删除左侧
if (!info.award_zh && !infoObj.graduation_requirements && !infoObj.domains && !infoObj.employers && !infoObj.positions) delete sideObj.graduate
// 判断奖学金文案
if (infoObj.scholarship) infoObj["scholarshipText"] = JudgmentScholarshipText(infoObj.scholarship)
if (infoObj.leaflet_url) {
const leaflet_url = decodeURIComponent(infoObj.leaflet_url)
const urlWithoutParams = leaflet_url.split("?")[0]
const urlParts = urlWithoutParams.split("/")
const fileName = urlParts[urlParts.length - 1]
infoObj["leaflet_name"] = fileName
}
// const isadmission = info.admissionsproject || 0
// if (isadmission == 1) this.getAdmissionList()
const date = new Date()
const month = date.getMonth() + 1
const year = date.getFullYear()
const semester = infoObj.semester || {}
if (month > semester.month && year + 1 <= semester.year) infoObj["semesterState"] = true
console.log("infoObj", infoObj.rankings)
info.value = infoObj
side.value = sideObj
sideKey.value = "basic"
course.value = courseObj
contras.value = contrasObj
})
})
}
// 判断奖学金文案
const JudgmentScholarshipText = obj => {
let text = ""
if (obj.local && obj.nonlocal) text = "均有"
else if (!obj.local && !obj.nonlocal) text = "均无"
else if (obj.local && !obj.nonlocal) text = "非本地学生无"
else if (!obj.local && obj.nonlocal) text = "非本地学生有"
return text
}
// 计算出外地申请截止时间
const calculateApplicaDeadline = obj => {
// 初始化变量来存储最大时间点的属性和日期
let maxDate = null
// 遍历对象的属性
for (const item in obj) {
// 如果当前日期是最大日期或是第一个日期，则更新最大日期和属性
if (maxDate === null || obj[item] > maxDate) maxDate = obj[item]
}
return maxDate
}
// 计算出面试轮的数组
const calculateInterviewRound = obj => {
let rounds = []
const chineseNumbers = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"]
const formatTime = (time, index) => {
return {
text: `第${chineseNumbers[index]}轮`,
time,
}
}
Object.keys(obj).forEach((key, index) => {
rounds.push(formatTime(obj[key], index))
})
if (rounds.length == 0) rounds = [{}]
return rounds || [{}]
}
let studyMode = ref("ft") // 'ft', // 学习模式显示状态 ft 全日制 pt 兼读制
const cutStudyMode = type => {
studyMode.value = type
}
return { side, sideKey, info, disciplineObj, rankingsObj, cutStudyMode, studyMode }
},
})
subject.component("text-module", textModule)
subject.mount("#app")
</script> </script>
</body> </body>
</html> </html>

BIN
img/arrows-triangle-red.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
img/qs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

BIN
img/ruanke.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
img/times.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

6
img/triangle-red.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="7px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -369 -1147 )">
<path d="M 11.77734375 0.230902777777778 C 11.92578125 0.384837962962962 12 0.567129629629628 12 0.777777777777778 C 12 0.988425925925925 11.92578125 1.17071759259259 11.77734375 1.32465277777778 L 6.52734375 6.76909722222222 C 6.37890625 6.92303240740741 6.203125 7 6 7 C 5.796875 7 5.62109375 6.92303240740741 5.47265625 6.76909722222222 L 0.22265625 1.32465277777778 C 0.07421875 1.17071759259259 0 0.988425925925925 0 0.777777777777778 C 0 0.567129629629628 0.07421875 0.384837962962962 0.22265625 0.230902777777778 C 0.37109375 0.0769675925925917 0.546875 0 0.75 0 L 11.25 0 C 11.453125 0 11.62890625 0.0769675925925917 11.77734375 0.230902777777778 Z " fill-rule="nonzero" fill="#f95d5d" stroke="none" transform="matrix(1 0 0 1 369 1147 )" />
</g>
</svg>

BIN
img/usnews.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

78
js/base.js
View File

@ -17,7 +17,7 @@ const base = {
hideIcon: false, hideIcon: false,
top: 0, top: 0,
left: 0, left: 0,
count:0, count: 0,
} }
}, },
methods: { methods: {
@ -63,3 +63,79 @@ const base = {
}, },
}, },
} }
const textModule = {
template: `<div class="text-box block">
<div ref="textRef" class="text textRef">{{ text }}</div>
<div class="text-head" v-if="title">
<img class="text-icon" src="/img/triangle-red.svg" />
{{ title }}
</div>
<div v-if="!isswiper" class="text" :class="{'text-center': text.length < 3}">{{ text }}</div>
<div v-else class="text-list" ref="listRef">
<div class="text" v-for="(item,index) in page" :style="{'transform': 'translateY(-' + index * h + 'px)'}">{{ text }}</div>
</div>
<div v-if="isswiper" class="indicate flexcenter">
<img class="icon" @click="cutHotListPage('left')" :src="reversedMessage('left')" />
<div class="text">{{ current }}/{{ page.length }}</div>
<img class="icon btn-right" @click="cutHotListPage('right')" :src="reversedMessage('right')" />
</div>
</div>`,
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 }
},
}