A1300399510/PCAdmissionOfficer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(招生官页面): 新增宣讲会模块并优化访谈页面样式

Browse Source 
添加宣讲会轮播列表和图片展示区域
优化访谈视频播放区域的交互样式
调整页面布局和间距，增加圆角效果
新增白色箭头图标资源
使用v-cloak防止页面加载时闪烁
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-07-11 19:06:39 +08:00
parent 39073eabdf
commit 9379c50224
4 changed files with 418 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
index.html
View File

@@ -5,9 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/index.css" />
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="admission-officer" class="admission-officer">
<div id="admission-officer" class="admission-officer" v-cloak>
<div class="admission-head">
<div class="admission-head-box">
<img class="admission-head-logo" src="./img/admission-head-logo.png" />
@@ -28,8 +33,8 @@
<video class="img" :controls="isPlaying ? true : false" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_ZItdXnqqsgFptxhcq_cQnrlcfcjCgAUBq_D-81qNDQyOQ~~" preload="none" poster="https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_5otcn_qqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MtdWWmQtw3_-kU8uRQ0NDI5" @pause="isPlaying = false"></video>
<img class="play-btn" src="./img/play-btn.svg" @click="togglePlay" :style="{ display: isPlaying ? 'none' : 'block' }" />
<div class="bottom" :style="{ transform: isPlaying ? 'translateY(100%)' : 'translateY(0)', opacity: isPlaying ? '0' : '1' }">
<div class="title">大标题大标题</div>
<div class="subtitle">副标题副标题，副标题副标题副标题</div>
<div class="title">{{ interviewData.title }}</div>
<div class="subtitle">{{ interviewData.subtitle }}</div>
</div>
</div>
</div>
@@ -47,17 +52,17 @@
招生官
</div>
<div class="name flexflex">
施林佟
<div class="professional">副教授</div>
{{ interviewData.admission_officer_name }}
<div class="professional">{{ interviewData.admission_officer_rank }}</div>
</div>
<div class="subheading">香港中文大学（深圳）</div>
<div class="subheading">数据科学学院助理院长</div>
<div class="subheading">{{ interviewData.admission_officer_position }}</div>
</div>
<div class="introduce-box flexflex">
<div class="introduce-list">
<div class="introduce-item">数据科学学院助理院长</div>
<div class="introduce-item">数据科学学院助理院长</div>
<div class="introduce-list" v-html="interviewData.focus_of_this_issue">
<!-- <div class="introduce-item">数据科学学院助理院长</div>
<div class="introduce-item">数据科学学院助理院长</div>
<div class="introduce-item">数据科学学院助理院长</div> -->
</div>
<div class="play-btn flexcenter">
立即播放
@@ -71,17 +76,43 @@
<img class="bj" src="./img/interview-bj.svg" />
<div class="left">
<div class="head flexacenter">
<img class="icon" src="./img/interview-icon.png" />
<img class="name" src="./img/interview-name.png" />
<img class="icon" src="./img/preach-icon.png" />
<img class="name" src="./img/preach-name.png" />
</div>
<div class="box">
<div class="indicators flexcenter">
<div class="item" v-for="(item, index) in 10"></div>
</div>
<div class="list">
<div class="item flexacenter" :class="[{'pitch': preachI == index},{'pitch-last': preachI - 1 == index}]" v-for="(item, index) in preachList[preachIndex]">
<div class="info flex1">
<div class="name">{{ item.name }}</div>
<div class="time">{{ item.time }}</div>
</div>
<img class="icon" src="./img/arrows-full-circle-white.svg" />
</div>
</div>
</div>
</div>
<div class="right">
<img class="ok" src="./img/ok.png" />
<div class="img-box flexacenter">
<div class="item" v-for="item in 10">
<img class="img" src="https://axure-file.lanhuapp.com/md5__0a8d9a0165b1f5f8eba3cb48a7e16374.svg" />
</div>
</div>
</div>
</div>
<div class="interview-more flexacenter" style="display: none">
<div class="case flexcenter">
<div class="interview-more flexacenter">
<div class="case flexcenter" v-if="false">
<div class="name">更多访谈</div>
<div class="english">More interviews</div>
</div>
<div class="swiper-box" style="">
<div class="case preach flexcenter">
<div class="name">招生官访谈</div>
<div class="english">Interview video</div>
</div>
<div class="swiper-box">
<div class="btn left flexcenter" @click="scrollLeft" v-if="showLeftBtn">
<img class="arrows" src="./img/arrows-black.svg" />
</div>
@@ -371,18 +402,118 @@
}
};
const theme = ref(1); // 主题 1 2
onMounted(() => {
if (swiperRef.value) {
swiperRef.value.addEventListener("scroll", checkBtnVisibility);
checkBtnVisibility();
}
openPreachSwiper();
init();
});
let interviewData = ref({}); // 模式一 的第一个访谈
const init = () => {
fetchData("/v1/admissionsOfficer/interview").then((res) => {
console.log("res", res);
if (res.code != 200) return;
const data = res.data || [];
// 随机一条 data
const random = Math.floor(Math.random() * data.length);
// const randomData = data[random];
// console.log("randomData", randomData);
interviewData.value = data[random] || {};
});
};
onUnmounted(() => {
if (swiperRef.value) swiperRef.value.removeEventListener("scroll", checkBtnVisibility);
});
return { isPlaying, togglePlay, scrollLeft, scrollRight, swiperRef, showLeftBtn, showRightBtn };
let preachList = ref([
[
{
name: "香港中文大学 | 美国西北大学双硕士学位课程",
time: "2025年7月12日 19:00",
},
{
name: "香港城市大学 | 经济学理学硕士课程",
time: "2025年7月12日 19:00",
},
{
name: "香港教育大学 | 跨文化传意及翻译文学硕士课程",
time: "2025年7月12日 19:00",
},
{
name: "香港中文大学 | 美国西北大学双硕士学位课程",
time: "2025年7月12日 19:00",
},
],
[
{
name: "香港中文大学 | 美国西北大学双硕士学位课程",
time: "2025年7月12日 19:00",
},
{
name: "香港城市大学 | 经济学理学硕士课程",
time: "2025年7月12日 19:00",
},
{
name: "香港教育大学 | 跨文化传意及翻译文学硕士课程",
time: "2025年7月12日 19:00",
},
{
name: "香港中文大学 | 美国西北大学双硕士学位课程",
time: "2025年7月12日 19:00",
},
],
]);
let preachIndex = ref(0); // 宣讲会 下标
let preachI = ref(1); // 宣讲会 下标
let preachTimer = null;
// 宣讲会 轮播图 的 定时器
const openPreachSwiper = () => {
return;
preachTimer = setTimeout(() => {
preachI.value += 1;
console.log(preachI.value);
openPreachSwiper();
}, 3000);
};
const fetchData = (url, data) => {
return new Promise((resolve, reject) => {
const baseUrl = "https://api.gter.net";
if (url.indexOf("http") == -1) url = baseUrl + url;
// 构建查询字符串
const queryString = Object.keys(data || {})
.map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
.join("&");
// 将查询字符串添加到URL
if (queryString) url += (url.indexOf("?") === -1 ? "?" : "&") + queryString;
var xhr = new XMLHttpRequest();
xhr.responseType = "json";
xhr.withCredentials = true;
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let response = xhr.response;
resolve(response);
}
};
xhr.send();
});
};
return { interviewData, preachList, preachIndex, preachI, isPlaying, togglePlay, scrollLeft, scrollRight, swiperRef, showLeftBtn, showRightBtn };
},
});
// 挂载到页面中的#app元素