feat: 优化招生官页面样式和功能
- 新增H5页面相关文件 - 调整CSS样式，修复移动端适配问题 - 优化宣讲会列表显示和时间格式化 - 改进视频播放器交互逻辑 - 修复课程标签显示问题
This commit is contained in:
DESKTOP-RQ919RC\Pc
73
index.html
73
index.html
@@ -87,8 +87,8 @@
|
||||
<div class="list">
|
||||
<div class="item flexacenter" :class="[{'pitch': preachI == index},{'pitch-last': preachI - 1 == index}]" v-for="(item, index) in preachList[preachIndex]" @click="preachI = index">
|
||||
<div class="info flex1">
|
||||
<div class="name">{{ item.title }}{{ item.id }}</div>
|
||||
<div class="time">{{ item.lecture_time }}</div>
|
||||
<div class="name">{{ item.title }}</div>
|
||||
<div class="time">{{ item.lecture_time || '长期答疑' }}</div>
|
||||
</div>
|
||||
<img class="icon" src="./img/arrows-full-circle-white.svg" />
|
||||
</div>
|
||||
@@ -122,7 +122,7 @@
|
||||
</div>
|
||||
<div class="swiper flexacenter" ref="swiperRef">
|
||||
<div class="swiper-item" v-for="item in interviewList" @click="getVideoUrl(item.token)">
|
||||
<img class="img" src="https://axure-file.lanhuapp.com/md5__d360c330dfaa81d2fad4ef78a5e74bb1.svg" />
|
||||
<img class="img" :src="item.video_cover" />
|
||||
<div class="bottom">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="subtitle">{{ item.subtitle }}</div>
|
||||
@@ -174,22 +174,24 @@
|
||||
<g transform="matrix(1 0 0 1 -1370 -1149 )"><path d="M 8.8330078125 0.164930555555556 C 8.9443359375 0.274884259259259 9 0.405092592592591 9 0.555555555555556 C 9 0.706018518518518 8.9443359375 0.836226851851851 8.8330078125 0.946180555555556 L 4.8955078125 4.83506944444444 C 4.7841796875 4.94502314814815 4.65234375 5 4.5 5 C 4.34765625 5 4.2158203125 4.94502314814815 4.1044921875 4.83506944444444 L 0.1669921875 0.946180555555556 C 0.0556640625 0.836226851851851 0 0.706018518518518 0 0.555555555555556 C 0 0.405092592592591 0.0556640625 0.274884259259259 0.1669921875 0.164930555555556 C 0.2783203125 0.0549768518518512 0.41015625 0 0.5625 0 L 8.4375 0 C 8.58984375 0 8.7216796875 0.0549768518518512 8.8330078125 0.164930555555556 Z " fill-rule="nonzero" stroke="none" transform="matrix(1 0 0 1 1370 1149 )" /></g>
|
||||
</svg>
|
||||
<div class="more-mask" @click.stop="closeSchoolYearState(index)"></div>
|
||||
<div class="more-box">
|
||||
<div class="more-item" v-for="it in item.yListMore" @click.stop="selectSchoolYearState(index, it)">{{ it }}季</div>
|
||||
<div class="more-box" :style="{ backgroundColor: item.color }">
|
||||
<div class="more-item" v-for="it in item.yListMore" @click.stop="selectSchoolYearState(index, it)">{{ it }}季1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course-list">
|
||||
<div class="item" v-for="it in item.list[item.pitch]">
|
||||
<div class="name flexacenter">
|
||||
<div class="name flexflex">
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="./img/course-icon.png" />
|
||||
</div>
|
||||
{{ it.title }}
|
||||
<div class="label" v-if="it.tag">
|
||||
<img class="arrows" src="./img/arrows-triangle-blue.svg" />
|
||||
{{ it.tag }}
|
||||
<div class="text flex1">
|
||||
{{ it.title }}
|
||||
<div class="label" v-if="it.tag">
|
||||
<img class="arrows" src="./img/arrows-triangle-blue.svg" />
|
||||
{{ it.tag }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
@@ -227,7 +229,7 @@
|
||||
</svg>
|
||||
{{ it }}季
|
||||
</div>
|
||||
<div class="year-item" v-if=" item.year.length > 4">
|
||||
<div class="year-item" v-if="item.year.length > 4">
|
||||
<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>
|
||||
@@ -295,7 +297,7 @@
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="./img/time-icon.png" />
|
||||
</div>
|
||||
长期答疑
|
||||
{{ item.date || '长期答疑'}}
|
||||
</div>
|
||||
<a class="btn flexcenter" :href="item.url" target="_blank">
|
||||
了解详情
|
||||
@@ -312,7 +314,6 @@
|
||||
<div class="paly-box">
|
||||
<img class="close" src="./img/cross-white.svg" @click="closePalyState" />
|
||||
<div class="paly-video"></div>
|
||||
<!-- <video src="https://cdnfhnfile.115cdn.net/6870d9500edfa26822026f57689fdaa03fc219f0/%E5%B2%AD%E5%8D%97%E5%A4%A7%E5%AD%A6%E4%BF%9D%E9%99%A9.mp4?t=1752554944&u=100031698&s=524288000&d=vip-3070654841-cg2ys1g7vy7k4dxg0-1-0&c=2&f=1&k=c82d0e21cd73d578a6881d6386bdeb4d&us=5242880000&uc=10&v=1"></video> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -325,7 +326,7 @@
|
||||
<script>
|
||||
// 创建Vue3实例
|
||||
const { createApp, onMounted, ref, onUnmounted } = Vue;
|
||||
const app = createApp({
|
||||
const admissionApp = createApp({
|
||||
setup() {
|
||||
const isPlaying = ref(false);
|
||||
const swiperRef = ref(null);
|
||||
@@ -358,15 +359,14 @@
|
||||
};
|
||||
|
||||
const scrollRight = () => {
|
||||
if (swiperRef.value) {
|
||||
swiperRef.value.scrollTo({
|
||||
left: swiperRef.value.scrollLeft + 366,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
if (!swiperRef.value) return;
|
||||
swiperRef.value.scrollTo({
|
||||
left: swiperRef.value.scrollLeft + 366,
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
|
||||
const theme = ref(1); // 主题 1 2
|
||||
const theme = ref(2); // 主题 1 2
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
@@ -381,16 +381,13 @@
|
||||
const init = () => {
|
||||
fetchData("/v1/admissionsOfficer/interview").then((res) => {
|
||||
if (res.code != 200) return;
|
||||
|
||||
let data = res.data || [];
|
||||
|
||||
data.forEach((element) => (element.focus_of_this_issue = element.focus_of_this_issue.split(/\r?\n/)));
|
||||
|
||||
if (theme.value == 1) {
|
||||
let target = null;
|
||||
const topItems = data.filter((item) => item.istop === 1);
|
||||
if (topItems.length > 0) target = topItems[Math.floor(Math.random() * topItems.length)];
|
||||
data = data.filter((item) => !(item.istop === 1 && item.id === target.id));
|
||||
data = data.filter((item) => item.id !== target.id);
|
||||
interviewData.value = target;
|
||||
}
|
||||
|
||||
@@ -412,10 +409,6 @@
|
||||
fetchData(`/v1/admissionsOfficer/videoUrl?token=${token}`).then((res) => {
|
||||
console.log("res", res);
|
||||
palyState.value = true;
|
||||
// res.data.url = "https://dl1-v6.aliyundrive.cloud/dC9ELbBd%2F988690082%2F6870d948ef3b30d87fa84bc3a32fd16370f37c2e%2F6870d948f17001272f7c4c17b11d759a137ca234?ap=b8c990e60b18446eb07f5dca30398e8a&callback=eyJjYWxsYmFja1VybCI6Imh0dHA6Ly9iajI5LmFwaS1ocC5hbGl5dW5wZHMuY29tL3YyL2ZpbGUvZG93bmxvYWRfY2FsbGJhY2siLCJjYWxsYmFja0JvZHkiOiJodHRwSGVhZGVyLnJhbmdlPSR7aHR0cEhlYWRlci5yYW5nZX1cdTAwMjZidWNrZXQ9JHtidWNrZXR9XHUwMDI2b2JqZWN0PSR7b2JqZWN0fVx1MDAyNmRvbWFpbl9pZD0ke3g6ZG9tYWluX2lkfVx1MDAyNnVzZXJfaWQ9JHt4OnVzZXJfaWR9XHUwMDI2ZHJpdmVfaWQ9JHt4OmRyaXZlX2lkfVx1MDAyNmZpbGVfaWQ9JHt4OmZpbGVfaWR9XHUwMDI2cGRzX3BhcmFtcz0ke3g6cGRzX3BhcmFtc31cdTAwMjZ2ZXJzaW9uPSR7eDp2ZXJzaW9ufSIsImNhbGxiYWNrQm9keVR5cGUiOiJhcHBsaWNhdGlvbi94LXd3dy1mb3JtLXVybGVuY29kZWQiLCJjYWxsYmFja1N0YWdlIjoiYmVmb3JlLWV4ZWN1dGUiLCJjYWxsYmFja0ZhaWx1cmVBY3Rpb24iOiJpZ25vcmUifQ%3D%3D&callback-var=eyJ4OmRvbWFpbl9pZCI6ImJqMjkiLCJ4OnVzZXJfaWQiOiI3MDg3MzAwYmU2ZDM0OGMwODliOTU4NDM1MDVlN2U3MiIsIng6ZHJpdmVfaWQiOiI5ODg2OTAwODIiLCJ4OmZpbGVfaWQiOiI2ODcwZGViOTI4MTdiODljNGFmOTQyM2E5NWY0ZGU1MmY2YjA0N2M1IiwieDpwZHNfcGFyYW1zIjoie1wiYXBcIjpcImI4Yzk5MGU2MGIxODQ0NmViMDdmNWRjYTMwMzk4ZThhXCJ9IiwieDp2ZXJzaW9uIjoidjMifQ%3D%3D&di=bj29&dr=988690082&f=6870deb92817b89c4af9423a95f4de52f6b047c5&op=d&pds-params=%7B%22ap%22%3A%22b8c990e60b18446eb07f5dca30398e8a%22%7D&response-content-disposition=attachment%3B%20filename%2A%3DUTF-8%27%27%25E5%25B2%25AD%25E5%258D%2597%25E5%25A4%25A7%25E5%25AD%25A6%25E4%25BF%259D%25E9%2599%25A9.mp4&security-token=CAISvgJ1q6Ft5B2yfSjIr5nDE%2FfhmY5U8Kbeb0DZi1A7WMdt2fOZrjz2IHhMf3NpBOkZvvQ1lGlU6%2Fcalq5rR4QAXlDfNVT2OWG%2BqlHPWZHInuDox55m4cTXNAr%2BIhr%2F29CoEIedZdjBe%2FCrRknZnytou9XTfimjWFrXWv%2Fgy%2BQQDLItUxK%2FcCBNCfpPOwJms7V6D3bKMuu3OROY6Qi5TmgQ41Uh1jgjtPzkkpfFtkGF1GeXkLFF%2B97DRbG%2FdNRpMZtFVNO44fd7bKKp0lQLs0ARrv4r1fMUqW2X543AUgFLhy2KKMPY99xpFgh9a7j0iCbSGyUu%2FhcRm5sw9%2Byfo34lVYnewzJcyhXOy4IClLcc%2BmqdsRIvJzWstJ7Gf9LWqChvSgk4TxhhcNFKSTQrInFCB0%2BcRObJl16iK%2BF7UPXtuMkagAFphP8r3Ae8eUgHGTFSUZ16y1LK9OcgxB5wF%2B1Y%2F2WkLq22JaopX124joWne0xEWtK%2BD3nQ57EtFJXAH5XFVSpL8ey6q7%2B0SYYKfnDvV4AlMij6c73j2p%2BFZfWoqOtRPih9DHBr8rG%2FGUthBwtO1PmFMMhnhUaPX0LH3mDT7kxj4yAA&u=7087300be6d348c089b95843505e7e72&x-oss-access-key-id=STS.NZvXMUtQuGd5mfhoPnTHA662L&x-oss-expires=1752561724&x-oss-signature=%2FVN5mf0vGLN3W4Sothr0YCBJ1gs1pWpKt2zZE0Vw9v8%3D&x-oss-signature-version=OSS2"
|
||||
// res.data.url = "https://cdnfhnfile.115cdn.net/6870d9500edfa26822026f57689fdaa03fc219f0/%E5%B2%AD%E5%8D%97%E5%A4%A7%E5%AD%A6%E4%BF%9D%E9%99%A9.mp4?t=1752560553&u=100031698&s=524288000&d=vip-3070654841-cg2ys1g7vy7k4dxg0-1-0&c=2&f=1&k=4c18afc0b99a18676660772f1dbcb9a3&us=5242880000&uc=10&v=1";
|
||||
// res.data.url = "https://cdnfhnfile.115cdn.net/6870d9500edfa26822026f57689fdaa03fc219f0/%E5%B2%AD%E5%8D%97%E5%A4%A7%E5%AD%A6%E4%BF%9D%E9%99%A9.mp4?t=1752561030&u=100031698&s=524288000&d=vip-3070654841-cg2ys1g7vy7k4dxg0-1-0&c=2&f=1&k=badb58d16389675c2bf6170d319cc39e&us=5242880000&uc=10&v=1"
|
||||
// res.data.url = "https://media-sxty-fy-person01.sx3oss.ctyunxs.cn/PERSONCLOUD/ee46316a-1dd0-48f0-9387-d8f985051a55.mp4?x-amz-CLIENTTYPEIN=PC&AWSAccessKeyId=0Lg7dAq3ZfHvePP8DKEU&x-amz-userLevel=0&x-amz-limitrate=51200&response-content-type=video/mp4&x-amz-UID=290668618&response-content-disposition=attachment%3Bfilename%3D%22%E5%B2%AD%E5%8D%97%E5%A4%A7%E5%AD%A6%E4%BF%9D%E9%99%A9.mp4%22%3Bfilename*%3DUTF-8%27%27%25E5%25B2%25AD%25E5%258D%2597%25E5%25A4%25A7%25E5%25AD%25A6%25E4%25BF%259D%25E9%2599%25A9.mp4&x-amz-CLIENTNETWORK=UNKNOWN&x-amz-CLOUDTYPEIN=PERSON&Signature=6cJ2bBQlhBvZbBpGIv2MHQT6wA0%3D&Expires=1752563182&x-amz-FSIZE=157484787&x-amz-UFID=924511202880537274"
|
||||
setTimeout(() => {
|
||||
art = new Artplayer({
|
||||
container: ".paly-box-mask .paly-box .paly-video",
|
||||
@@ -427,10 +420,7 @@
|
||||
};
|
||||
|
||||
const closePalyState = () => {
|
||||
// 暂停播放
|
||||
art.pause();
|
||||
|
||||
// 释放播放器资源（重要！）
|
||||
art.destroy();
|
||||
palyState.value = false;
|
||||
};
|
||||
@@ -571,6 +561,7 @@
|
||||
|
||||
const data = res.data;
|
||||
data.forEach((element, index) => (element["id"] = index + 1));
|
||||
data.forEach((element) => (element["lecture_time"] = timeformat(element["lecture_time"])));
|
||||
|
||||
let target = [];
|
||||
for (let i = 0; i < data.length; i += preachInterval) {
|
||||
@@ -585,6 +576,20 @@
|
||||
});
|
||||
};
|
||||
|
||||
const timeformat = (time) => {
|
||||
time = time.replaceAll("-", "/"); // 修改格式
|
||||
let result = "";
|
||||
var datetime = new Date(time);
|
||||
var Nyear = datetime.getFullYear();
|
||||
var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
|
||||
var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
|
||||
var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
|
||||
var Nmin = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
|
||||
result = `${Nyear}年${Nmonth}月${Ndate}日 ${Nhour}:${Nmin}`;
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const rightImgBox = ref(null);
|
||||
|
||||
// 宣讲会 轮播图 的 定时器
|
||||
@@ -611,7 +616,7 @@
|
||||
behavior: "smooth",
|
||||
});
|
||||
}, 100);
|
||||
}, 1000);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
// 鼠标 移入 轮播图
|
||||
@@ -659,7 +664,7 @@
|
||||
},
|
||||
});
|
||||
// 挂载到页面中的#app元素
|
||||
app.mount("#admission-officer");
|
||||
admissionApp.mount("#admission-officer");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user