feat: 新增招生官页面交互功能与样式优化
style: 调整页面布局与滚动行为 refactor: 重构视频播放控制逻辑 fix: 修复滑动按钮显示问题 docs: 更新CSS样式注释
This commit is contained in:
DESKTOP-RQ919RC\Pc
277
index.html
277
index.html
@@ -7,7 +7,7 @@
|
||||
<link rel="stylesheet" href="./css/index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="admission-officer">
|
||||
<div id="admission-officer" class="admission-officer">
|
||||
<div class="admission-head">
|
||||
<div class="admission-head-box">
|
||||
<img class="admission-head-logo" src="./img/admission-head-logo.png" />
|
||||
@@ -17,7 +17,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="admission-body">
|
||||
<div class="interview-box">
|
||||
<div class="interview-box flexflex">
|
||||
<img class="bj" src="./img/interview-bj.svg" />
|
||||
<div class="left">
|
||||
<div class="head flexacenter">
|
||||
@@ -25,17 +25,282 @@
|
||||
<img class="name" src="./img/interview-name.png" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<img class="img" src="https://axure-file.lanhuapp.com/md5__d360c330dfaa81d2fad4ef78a5e74bb1.svg">
|
||||
<img class="play-btn" src="./img/play-btn.svg" />
|
||||
<div class="bottom">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
<div class="focus-box">
|
||||
<img class="ok" src="./img/ok.png" />
|
||||
<div class="head flexcenter">
|
||||
<img class="arrows" src="./img/arrows-three-black.png" />
|
||||
<img class="name" src="./img/focus-name.png" />
|
||||
<img class="arrows" style="transform: rotate(180deg)" src="./img/arrows-three-black.png" />
|
||||
</div>
|
||||
<div class="content flexflex">
|
||||
<div class="info">
|
||||
<div class="label flexcenter">
|
||||
<img class="icon" src="./img/quadrangle-blue.svg" />
|
||||
招生官
|
||||
</div>
|
||||
<div class="name flexflex">
|
||||
施林佟
|
||||
<div class="professional">副教授</div>
|
||||
</div>
|
||||
<div class="subheading">香港中文大学（深圳）</div>
|
||||
<div class="subheading">数据科学学院助理院长</div>
|
||||
</div>
|
||||
<div class="introduce-box flexflex">
|
||||
<div class="introduce-list">
|
||||
<div class="introduce-item">数据科学学院助理院长</div>
|
||||
<div class="introduce-item">数据科学学院助理院长</div>
|
||||
<div class="introduce-item">数据科学学院助理院长</div>
|
||||
</div>
|
||||
<div class="play-btn flexcenter">
|
||||
立即播放
|
||||
<img class="icon" src="./img/play-btn.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="interview-more flexacenter">
|
||||
<div class="case flexcenter">
|
||||
<div class="name">更多访谈</div>
|
||||
<div class="english">More interviews</div>
|
||||
</div>
|
||||
<div class="swiper-box" style="">
|
||||
<div class="btn left flexcenter" @click="scrollLeft" v-if="showLeftBtn">
|
||||
<img class="arrows" src="./img/arrows-black.svg" />
|
||||
</div>
|
||||
<div class="btn right flexcenter" @click="scrollRight" v-if="showRightBtn">
|
||||
<img class="arrows" src="./img/arrows-black.svg" />
|
||||
</div>
|
||||
<div class="swiper flexacenter" ref="swiperRef">
|
||||
<div class="swiper-item" v-for="item in 10">
|
||||
<img class="img" src="https://axure-file.lanhuapp.com/md5__d360c330dfaa81d2fad4ef78a5e74bb1.svg" />
|
||||
<div class="bottom">
|
||||
<div class="title">大标题大标题</div>
|
||||
<div class="subtitle">副标题副标题，副标题副标题副标题</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="school-list">
|
||||
<div class="school-item flexflex">
|
||||
<div class="left">
|
||||
<div class="abbreviation flexcenter" :style="{ color: dynamicColor }">CUHK</div>
|
||||
<img class="icon" src="./img/malformation-icon.svg" />
|
||||
<img class="img" src="https://axure-file.lanhuapp.com/md5__2e4af5b341ed2a4a7d83bfe157779ecc.svg" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="info flexacenter">
|
||||
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkCLRSBaR7ec6NYmTHuZYPMKxNHJQuwf83NTE2" />
|
||||
<div class="">
|
||||
<div class="name">香港中文大学</div>
|
||||
<div class="english">The Chinese University of Hong Kong</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="introduce">香港中文大学成立于1963年，是香港第二所成立的大学，亦是香港八所受政府香港大学教育资助委员会资助并可颁授学位的高等教育院校之一。中大是由新亚书院（1949年成立）、崇基学院...</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="year flexacenter">
|
||||
<div class="item pitch">
|
||||
<svg class="svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="28px" :style="{ fill: dynamicColor }">
|
||||
<g transform="matrix(1 0 0 1 -910 -1138 )"><path d="M 910 1166 L 918.4 1138 L 1010 1138 L 1001.6 1166 L 910 1166 Z " fill-rule="nonzero" stroke="none" /></g>
|
||||
</svg>
|
||||
2026季
|
||||
</div>
|
||||
<div class="item">
|
||||
<svg class="svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="28px" fill="#ffffff">
|
||||
<g transform="matrix(1 0 0 1 -910 -1138 )"><path d="M 910 1166 L 918.4 1138 L 1010 1138 L 1001.6 1166 L 910 1166 Z " fill-rule="nonzero" stroke="none" /></g>
|
||||
</svg>
|
||||
2026季
|
||||
</div>
|
||||
<div class="item">
|
||||
<svg class="svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="28px" fill="#ffffff">
|
||||
<g transform="matrix(1 0 0 1 -910 -1138 )"><path d="M 910 1166 L 918.4 1138 L 1010 1138 L 1001.6 1166 L 910 1166 Z " fill-rule="nonzero" stroke="none" /></g>
|
||||
</svg>
|
||||
2026季
|
||||
</div>
|
||||
<div class="item more">
|
||||
<svg class="svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="28px" fill="#ffffff">
|
||||
<g transform="matrix(1 0 0 1 -910 -1138 )"><path d="M 910 1166 L 918.4 1138 L 1010 1138 L 1001.6 1166 L 910 1166 Z " fill-rule="nonzero" stroke="none" /></g>
|
||||
</svg>
|
||||
更多
|
||||
<img class="arrows" src="./img/arrows-triangle-black.svg" />
|
||||
<div class="more-box">
|
||||
<div class="more-item" v-for="item in 10">2025季</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course-list">
|
||||
<div class="item">
|
||||
<div class="name flexacenter">
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="./img/course-icon.png" />
|
||||
</div>
|
||||
公共政策社会科学硕士课程
|
||||
<div class="label">
|
||||
<img class="arrows" src="./img/arrows-triangle-blue.svg" />
|
||||
2025入学现正招生
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="time flexacenter">
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="./img/time-icon.png" />
|
||||
</div>
|
||||
长期答疑
|
||||
</div>
|
||||
<div class="btn flexcenter" :style="{ color: dynamicColor }">
|
||||
了解详情
|
||||
<img class="arrows" src="./img/arrows-circle-white.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="name flexacenter">
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="./img/course-icon.png" />
|
||||
</div>
|
||||
公共政策社会科学硕士课程
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="time flexacenter">
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="./img/time-icon.png" />
|
||||
</div>
|
||||
长期答疑
|
||||
</div>
|
||||
<div class="btn flexcenter">
|
||||
了解详情
|
||||
<img class="arrows" src="./img/arrows-circle-white.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="retrospect">
|
||||
<img class="more-icon" src="./img/more-name.png" />
|
||||
<div class="list flexflex">
|
||||
<div class="item flexflex" v-for="item in 9">
|
||||
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkDLVSBaR7ec6NYmSUtp5bNP9NHJQuwf83NTE2" />
|
||||
<div class="right">
|
||||
<div class="name">岭南大学</div>
|
||||
<div class="english">Lingnan University</div>
|
||||
<div class="year flexacenter">
|
||||
<div class="year-item pitch">
|
||||
<svg class="svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="80px" height="24px">
|
||||
<g transform="matrix(1 0 0 1 -841 -2919 )"><path d="M 841 2943 L 848.2 2919 L 921 2919 L 913.8 2943 L 841 2943 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" /></g>
|
||||
</svg>
|
||||
2026季
|
||||
</div>
|
||||
<div class="year-item">
|
||||
<svg class="svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="80px" height="24px">
|
||||
<g transform="matrix(1 0 0 1 -841 -2919 )"><path d="M 841 2943 L 848.2 2919 L 921 2919 L 913.8 2943 L 841 2943 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" /></g>
|
||||
</svg>
|
||||
2026季
|
||||
</div>
|
||||
<div class="year-item">
|
||||
<svg class="svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="80px" height="24px">
|
||||
<g transform="matrix(1 0 0 1 -841 -2919 )"><path d="M 841 2943 L 848.2 2919 L 921 2919 L 913.8 2943 L 841 2943 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" /></g>
|
||||
</svg>
|
||||
2026季
|
||||
</div>
|
||||
<div class="year-item">
|
||||
<svg class="svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="80px" height="24px">
|
||||
<g transform="matrix(1 0 0 1 -841 -2919 )"><path d="M 841 2943 L 848.2 2919 L 921 2919 L 913.8 2943 L 841 2943 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" /></g>
|
||||
</svg>
|
||||
2026季
|
||||
</div>
|
||||
<div class="year-item">
|
||||
<svg class="svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="80px" height="24px">
|
||||
<g transform="matrix(1 0 0 1 -841 -2919 )"><path d="M 841 2943 L 848.2 2919 L 921 2919 L 913.8 2943 L 841 2943 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" /></g>
|
||||
</svg>
|
||||
更多
|
||||
<img class="arrows" src="./img/arrows-triangle-black.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 引入了 vue3 js 创建 vue3 实例 -->
|
||||
<script src="./js/vue.global.min.js"></script>
|
||||
|
||||
<script>
|
||||
// 创建Vue3实例
|
||||
const { createApp, onMounted, ref, onUnmounted } = Vue;
|
||||
const app = createApp({
|
||||
setup() {
|
||||
const isPlaying = ref(false);
|
||||
const swiperRef = ref(null);
|
||||
const showLeftBtn = ref(true);
|
||||
const showRightBtn = ref(true);
|
||||
|
||||
const togglePlay = () => {
|
||||
const video = document.querySelector(".content video");
|
||||
if (isPlaying.value) video.pause();
|
||||
else video.play();
|
||||
|
||||
isPlaying.value = !isPlaying.value;
|
||||
};
|
||||
|
||||
const checkBtnVisibility = () => {
|
||||
if (swiperRef.value) {
|
||||
const { scrollLeft, scrollWidth, clientWidth } = swiperRef.value;
|
||||
showLeftBtn.value = scrollLeft > 0;
|
||||
showRightBtn.value = scrollLeft + clientWidth < scrollWidth;
|
||||
}
|
||||
};
|
||||
|
||||
const scrollLeft = () => {
|
||||
if (swiperRef.value) {
|
||||
swiperRef.value.scrollTo({
|
||||
left: swiperRef.value.scrollLeft - 366,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const scrollRight = () => {
|
||||
if (swiperRef.value) {
|
||||
swiperRef.value.scrollTo({
|
||||
left: swiperRef.value.scrollLeft + 366,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (swiperRef.value) {
|
||||
swiperRef.value.addEventListener("scroll", checkBtnVisibility);
|
||||
checkBtnVisibility();
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (swiperRef.value) swiperRef.value.removeEventListener("scroll", checkBtnVisibility);
|
||||
});
|
||||
|
||||
return { isPlaying, togglePlay, scrollLeft, scrollRight, swiperRef, showLeftBtn, showRightBtn };
|
||||
},
|
||||
});
|
||||
// 挂载到页面中的#app元素
|
||||
app.mount("#admission-officer");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user