fix(admission-officer): 修复样式问题并添加视频播放功能
- 修复列表项样式和间距问题 - 添加链接悬停效果 - 实现视频播放弹窗功能 - 优化圆角边框和交互细节 - 调整图片显示和文本溢出处理
This commit is contained in:
DESKTOP-RQ919RC\Pc
511
index.html
511
index.html
@@ -22,15 +22,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="admission-body">
|
||||
<div class="interview-box flexflex">
|
||||
<div class="interview-box flexflex" v-if="theme == 1">
|
||||
<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" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<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>
|
||||
<div class="content flexcenter">
|
||||
<!-- <video class="img" :controls="isPlaying ? true : false" 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=1752491453&u=100031698&s=524288000&d=vip-3070654841-cg2ys1g7vy7k4dxg0-1-0&c=2&f=1&k=efc45551ccbd233122fe5dc2c53b5b53&us=5242880000&uc=10&v=1" preload="none" poster="https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_5otcn_qqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MtdWWmQtw3_-kU8uRQ0NDI5" @pause="isPlaying = false"></video> -->
|
||||
<img class="img" :src="interviewData.video_cover" />
|
||||
<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">{{ interviewData.title }}</div>
|
||||
@@ -55,14 +56,12 @@
|
||||
{{ interviewData.admission_officer_name }}
|
||||
<div class="professional">{{ interviewData.admission_officer_rank }}</div>
|
||||
</div>
|
||||
<div class="subheading">香港中文大学（深圳）</div>
|
||||
<div class="subheading">{{ interviewData.name }}</div>
|
||||
<div class="subheading">{{ interviewData.admission_officer_position }}</div>
|
||||
</div>
|
||||
<div class="introduce-box flexflex">
|
||||
<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 class="introduce-list" v-if="interviewData.focus_of_this_issue">
|
||||
<div class="introduce-item" v-for="item in interviewData.focus_of_this_issue">{{ item }}</div>
|
||||
</div>
|
||||
<div class="play-btn flexcenter">
|
||||
立即播放
|
||||
@@ -72,43 +71,43 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preach-box flexflex">
|
||||
<div class="preach-box flexflex" v-else>
|
||||
<img class="bj" src="./img/interview-bj.svg" />
|
||||
<div class="left">
|
||||
<div class="head flexacenter">
|
||||
<img class="icon" src="./img/preach-icon.png" />
|
||||
<img class="name" src="./img/preach-name.png" />
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box" @mouseenter="preachMouseEnter" @mouseleave="preachMouseLeave">
|
||||
<div class="indicators flexcenter">
|
||||
<div class="item" v-for="(item, index) in 10"></div>
|
||||
<div class="item" :class="{'pitch': index == preachIndex}" v-for="(item, index) in preachList.length" @click="preachIndex = index;preachI = 0"></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="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.name }}</div>
|
||||
<div class="time">{{ item.time }}</div>
|
||||
<div class="name">{{ item.title }}{{ item.id }}</div>
|
||||
<div class="time">{{ item.lecture_time }}</div>
|
||||
</div>
|
||||
<img class="icon" src="./img/arrows-full-circle-white.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right" @mouseenter="preachMouseEnter" @mouseleave="preachMouseLeave">
|
||||
<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 class="img-box flexacenter" ref="rightImgBox">
|
||||
<a class="item" v-for="(item, index) in preachList[preachIndex]" target="_blank" :href="item.link_url">
|
||||
<img class="img" :src="item.image_url" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="interview-more flexacenter">
|
||||
<div class="case flexcenter" v-if="false">
|
||||
<div class="interview-more flexacenter" v-if="interviewList.length">
|
||||
<div class="case flexcenter" v-if="theme == 1">
|
||||
<div class="name">更多访谈</div>
|
||||
<div class="english">More interviews</div>
|
||||
</div>
|
||||
<div class="case preach flexcenter">
|
||||
<div class="case preach flexcenter" v-else>
|
||||
<div class="name">招生官访谈</div>
|
||||
<div class="english">Interview video</div>
|
||||
</div>
|
||||
@@ -120,83 +119,74 @@
|
||||
<img class="arrows" src="./img/arrows-black.svg" />
|
||||
</div>
|
||||
<div class="swiper flexacenter" ref="swiperRef">
|
||||
<div class="swiper-item" v-for="item in 10">
|
||||
<div class="swiper-item" v-for="item in interviewList">
|
||||
<img class="img" src="https://axure-file.lanhuapp.com/md5__d360c330dfaa81d2fad4ef78a5e74bb1.svg" />
|
||||
<div class="bottom">
|
||||
<div class="title">大标题大标题</div>
|
||||
<div class="subtitle">副标题副标题，副标题副标题副标题</div>
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="subtitle">{{ item.subtitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="school-list" style="display: none">
|
||||
<div class="school-item flexflex">
|
||||
|
||||
<div class="school-list">
|
||||
<div class="school-item flexflex" v-for="(item, index) in admissionList">
|
||||
<div class="left">
|
||||
<div class="abbreviation flexcenter" :style="{ color: dynamicColor }">CUHK</div>
|
||||
<div class="abbreviation flexcenter" :style="{ backgroundColor:item.color }">{{ item.abbreviation }}</div>
|
||||
<img class="icon" src="./img/malformation-icon.svg" />
|
||||
<img class="img" src="https://axure-file.lanhuapp.com/md5__2e4af5b341ed2a4a7d83bfe157779ecc.svg" />
|
||||
<img class="img" :src="item.banner" />
|
||||
</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">
|
||||
香港中文大学
|
||||
<a :href="`https://schools.gter.net/details/${item.sid}`" target="_blank">
|
||||
<img class="img" :src="item.logo" />
|
||||
</a>
|
||||
<div class="flexflex" style="flex-direction: column">
|
||||
<a class="name" :href="`https://schools.gter.net/details/${item.sid}`" target="_blank">
|
||||
{{ item.name }}
|
||||
<img class="arrows" src="./img/arrows-circle-black.svg" />
|
||||
</div>
|
||||
<div class="english">The Chinese University of Hong Kong</div>
|
||||
</a>
|
||||
<a class="english" :href="`https://schools.gter.net/details/${item.sid}`" target="_blank">{{ item.enname }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="introduce">香港中文大学成立于1963年，是香港第二所成立的大学，亦是香港八所受政府香港大学教育资助委员会资助并可颁授学位的高等教育院校之一。中大是由新亚书院（1949年成立）、崇基学院...</div>
|
||||
<div class="introduce">{{ item.introduction }}</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 }">
|
||||
<div class="item" :class="{'pitch': item.pitch == it}" v-for="it in item.yList" @click="cutSchoolYear(index, it)">
|
||||
<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: item.pitch == it ? item.color : '#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季
|
||||
{{ it }}季
|
||||
</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">
|
||||
<div class="item more" :class="[{'unfold': item.state}, {'pitch': item.yListMore.includes(item.pitch)}]" v-if="item.yListMore.length > 0" @click="openSchoolYearState(index)">
|
||||
<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: item.yListMore.includes(item.pitch) ? item.color : '' }">
|
||||
<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>
|
||||
<!-- unfold -->
|
||||
<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>
|
||||
更多
|
||||
<!-- 更多 -->
|
||||
{{ item.yListMore.includes(item.pitch) ? `${ item.pitch }季` : '更多' }}
|
||||
<svg class="arrows" fill="#000000" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="5px" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"></div>
|
||||
<div class="more-mask" @click.stop="closeSchoolYearState(index)"></div>
|
||||
<div class="more-box">
|
||||
<div class="more-item" v-for="item in 10">2025季</div>
|
||||
<div class="more-item" v-for="it in item.yListMore" @click.stop="selectSchoolYearState(index, it)">{{ it }}季</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course-list">
|
||||
<div class="item">
|
||||
<div class="item" v-for="it in item.list[item.pitch]">
|
||||
<div class="name flexacenter">
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="./img/course-icon.png" />
|
||||
</div>
|
||||
公共政策社会科学硕士课程
|
||||
<div class="label">
|
||||
{{ it.title }}
|
||||
<div class="label" v-if="it.tag">
|
||||
<img class="arrows" src="./img/arrows-triangle-blue.svg" />
|
||||
2025入学现正招生
|
||||
{{ it.tag }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
@@ -204,32 +194,12 @@
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="./img/time-icon.png" />
|
||||
</div>
|
||||
长期答疑
|
||||
{{ it.date || '长期答疑'}}
|
||||
</div>
|
||||
<div class="btn flexcenter" :style="{ color: dynamicColor }">
|
||||
<a class="btn flexcenter" :style="{ 'background-color': item.color }" target="_blank" :href="it.url">
|
||||
了解详情
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -237,41 +207,24 @@
|
||||
</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 6">
|
||||
<img class="bg" src="https://oss.x-php.com/school/J6BSwE-VfCFkDLVSBaR7ec6NYmSUtp5bNP9NHJQuwf83NTE2" />
|
||||
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkDLVSBaR7ec6NYmSUtp5bNP9NHJQuwf83NTE2" />
|
||||
<div class="item flexflex" v-for="item in retrospectList.slice((retrospectPage - 1) * retrospectInterval, retrospectPage * retrospectInterval)" @click="openMoreSchool(item.sid)">
|
||||
<img class="bg" :src="item.logo" />
|
||||
<img class="img" :src="item.logo" />
|
||||
<div class="right">
|
||||
<div class="name">岭南大学</div>
|
||||
<div class="english">Lingnan University</div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="english">{{ item.enname }}</div>
|
||||
<div class="year flexacenter">
|
||||
<div class="year-item pitch">
|
||||
<div class="year-item" v-for="it in item.year.slice(0,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>
|
||||
2026季
|
||||
{{ it }}季
|
||||
</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">
|
||||
<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>
|
||||
@@ -283,57 +236,56 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="pages flexcenter">
|
||||
<img class="arrows gray" src="./img/arrows-thin-gray.svg" />
|
||||
<img class="arrows rotate180" src="./img/arrows-thin-black.svg" />
|
||||
<div class="item flexcenter" :class="{'pitch': item == 1}" v-for="item in 3">{{ item }}</div>
|
||||
<img class="arrows gray rotate180" src="./img/arrows-thin-gray.svg" />
|
||||
<img class="arrows" src="./img/arrows-thin-black.svg" />
|
||||
<img v-if="retrospectPage == 1" class="arrows gray" src="./img/arrows-thin-gray.svg" />
|
||||
<img v-else class="arrows rotate180" @click="retrospectPage--" src="./img/arrows-thin-black.svg" />
|
||||
<div class="item flexcenter" :class="{'pitch': item == retrospectPage}" v-for="item in retrospectPages" @click="retrospectPage = item">{{ item }}</div>
|
||||
<img v-if="retrospectPage == retrospectPages" class="arrows gray rotate180" src="./img/arrows-thin-gray.svg" />
|
||||
<img v-else class="arrows" @click="retrospectPage++" src="./img/arrows-thin-black.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="more-school-mask flexcenter" style="display: none">
|
||||
<div class="more-school">
|
||||
<img class="close" src="./img/cross.png" />
|
||||
<div class="more-school-mask flexcenter" v-if="moreSchoolSid > 0" @click="closeMoreSchool">
|
||||
<div class="more-school" @click.stop="">
|
||||
<img class="close" @click.stop="closeMoreSchool" src="./img/cross.png" />
|
||||
<div class="head flexacenter">
|
||||
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkDLVSBaR7ec6NYmSUtp5bNP9NHJQuwf83NTE2" />
|
||||
<a :href="`https://schools.gter.net/details/${moreSchoolSid}`" target="_blank"><img class="img" :src="moreSchoolData.logo" /></a>
|
||||
<div class="info">
|
||||
<div class="name flexacenter">
|
||||
岭南大学
|
||||
<a class="name flexacenter" :href="`https://schools.gter.net/details/${moreSchoolSid}`" target="_blank">
|
||||
{{ moreSchoolData.name }}
|
||||
<img class="icon" src="./img/arrows-circle-black.svg" />
|
||||
</div>
|
||||
<div class="english">The Hong Kong Polytechnic University</div>
|
||||
</a>
|
||||
<a class="english" :href="`https://schools.gter.net/details/${moreSchoolSid}`" target="_blank">{{ moreSchoolData.enname }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="year flexacenter">
|
||||
<div class="item pitch">
|
||||
<div class="item" :class="{'pitch': item == moreSchoolPitch}" v-for="(item,index) in moreSchoolYList" @click="moreSchoolPitch = 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="#3c7de9">
|
||||
<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季
|
||||
{{ item }}季
|
||||
</div>
|
||||
<!-- unfold -->
|
||||
<div class="item more">
|
||||
<div class="item more" :class="[{'unfold': moreYearState},{'pitch': moreSchoolYMList.includes(moreSchoolPitch)}]" v-if="moreSchoolYMList.length > 0" @click="openMoreYearState">
|
||||
<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>
|
||||
更多
|
||||
{{ moreSchoolYMList.includes(moreSchoolPitch) ? `${ moreSchoolPitch }季` : '更多' }}
|
||||
<svg class="arrows" fill="#000000" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="5px" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"></div>
|
||||
<div class="more-mask" @click.stop="moreYearState = false"></div>
|
||||
<div class="more-box">
|
||||
<div class="more-item" v-for="item in 10">2025季</div>
|
||||
<div class="more-item" v-for="it in moreSchoolYMList" @click.stop="moreSchoolPitch = it;moreYearState = false;">{{ it }}季</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item" v-for="item in 10">
|
||||
<div class="item" v-for="item in moreSchoolList[moreSchoolPitch]">
|
||||
<div class="name flexacenter">
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="./img/course-icon.png" />
|
||||
</div>
|
||||
公共政策社会科学硕士课程
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="time flexacenter">
|
||||
@@ -342,21 +294,29 @@
|
||||
</div>
|
||||
长期答疑
|
||||
</div>
|
||||
<div class="btn flexcenter">
|
||||
<a class="btn flexcenter" :href="item.url" target="_blank">
|
||||
了解详情
|
||||
<img class="arrows" src="./img/arrows-circle-white.svg" />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="paly-box-mask flexcenter" v-if="palyState">
|
||||
<div class="paly-box">
|
||||
<img class="close" src="./img/cross-white.svg" />
|
||||
<div class="paly-video"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 引入了 vue3 js 创建 vue3 实例 -->
|
||||
<script src="./js/vue.global.min.js"></script>
|
||||
<script src="./js/artplayer.js"></script>
|
||||
|
||||
<script>
|
||||
// 创建Vue3实例
|
||||
@@ -385,12 +345,11 @@
|
||||
};
|
||||
|
||||
const scrollLeft = () => {
|
||||
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 scrollRight = () => {
|
||||
@@ -405,82 +364,241 @@
|
||||
const theme = ref(1); // 主题 1 2
|
||||
|
||||
onMounted(() => {
|
||||
if (swiperRef.value) {
|
||||
swiperRef.value.addEventListener("scroll", checkBtnVisibility);
|
||||
checkBtnVisibility();
|
||||
}
|
||||
openPreachSwiper();
|
||||
init();
|
||||
if (theme.value == 2) getBannerList();
|
||||
getAdmissionLists();
|
||||
getRetrospectList();
|
||||
});
|
||||
|
||||
let interviewData = ref({}); // 模式一 的第一个访谈
|
||||
let interviewList = 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] || {};
|
||||
|
||||
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));
|
||||
interviewData.value = target;
|
||||
getVideoUrl(target.token);
|
||||
}
|
||||
|
||||
interviewList.value = data || [];
|
||||
|
||||
setTimeout(() => {
|
||||
if (!swiperRef.value) return;
|
||||
swiperRef.value.addEventListener("scroll", checkBtnVisibility);
|
||||
checkBtnVisibility();
|
||||
}, 400);
|
||||
});
|
||||
};
|
||||
|
||||
let palyState = ref(false); // 播放弹窗状态
|
||||
|
||||
const getVideoUrl = (token) => {
|
||||
fetchData(`/v1/admissionsOfficer/videoUrl?token=${token}`).then((res) => {
|
||||
// console.log("res", res);
|
||||
// const art = new Artplayer({
|
||||
// container: ".interview-box .left .content .img",
|
||||
// url: res.data.url,
|
||||
// });
|
||||
});
|
||||
};
|
||||
|
||||
let admissionList = ref([]); // 学校 招生官 列表
|
||||
|
||||
// 获取 院校 招生官 列表
|
||||
const getAdmissionLists = () => {
|
||||
fetchData(`/v1/admissionsOfficer/lists`).then((res) => {
|
||||
if (res.code != 200) return;
|
||||
const data = res.data;
|
||||
let target = data.data || [];
|
||||
|
||||
target.forEach((item) => {
|
||||
let year = [];
|
||||
let obj = {};
|
||||
item.articles.forEach((e) => {
|
||||
year.push(e.year);
|
||||
obj[e.year] = e.data;
|
||||
});
|
||||
|
||||
item["pitch"] = year[0];
|
||||
item["yList"] = year.slice(0, 4);
|
||||
item["yListMore"] = year.slice(4);
|
||||
item["list"] = obj;
|
||||
});
|
||||
|
||||
admissionList.value = target;
|
||||
});
|
||||
};
|
||||
|
||||
// 切换招生官 院校 的 年份
|
||||
const cutSchoolYear = (index, year) => (admissionList.value[index]["pitch"] = year);
|
||||
|
||||
// 点击 招生官 年份 更多弹窗
|
||||
const openSchoolYearState = (index) => (admissionList.value[index]["state"] = true);
|
||||
|
||||
// 选择 招生官 年份 更多弹窗
|
||||
const selectSchoolYearState = (index, year) => {
|
||||
admissionList.value[index]["state"] = false;
|
||||
admissionList.value[index]["pitch"] = year;
|
||||
};
|
||||
|
||||
// 关闭 招生官 年份 更多弹窗
|
||||
const closeSchoolYearState = (index) => (admissionList.value[index]["state"] = false);
|
||||
|
||||
let retrospectCount = ref([]);
|
||||
let retrospectList = ref([]);
|
||||
let retrospectPage = ref(1);
|
||||
let retrospectPages = ref(9);
|
||||
let retrospectInterval = ref(9);
|
||||
|
||||
// 获取 更多回顾 数据
|
||||
const getRetrospectList = () => {
|
||||
fetchData("/v1/admissionsOfficer/listsPast").then((res) => {
|
||||
if (res.code != 200) return;
|
||||
const data = res.data || {};
|
||||
let target = data.data || [];
|
||||
target.forEach((item) => (item.year = item.year.sort((a, b) => b - a)));
|
||||
|
||||
const count = data.count || 0;
|
||||
const pages = Math.ceil(count / retrospectInterval.value);
|
||||
|
||||
retrospectPages.value = pages;
|
||||
retrospectCount.value = count;
|
||||
retrospectList.value = target;
|
||||
});
|
||||
};
|
||||
let moreSchoolSid = ref(0); // 选中 学校 sid
|
||||
let moreSchoolData = ref({}); // 学校信息
|
||||
let moreSchoolList = ref([]); // 年份下 列表 数据
|
||||
let moreSchoolPitch = ref(0); // 选中年份
|
||||
let moreSchoolYList = ref([]); // 年份 列表
|
||||
let moreSchoolYMList = ref([]); // 年份 更多
|
||||
const openMoreSchool = (sid) => {
|
||||
fetchData(`/v1/admissionsOfficer/articles?sid=${sid}`).then((res) => {
|
||||
if (res.code != 200) return;
|
||||
const data = res.data || {};
|
||||
moreSchoolData.value = data.school;
|
||||
let target = data.data || [];
|
||||
console.log("target", target);
|
||||
let obj = {};
|
||||
let yearList = [];
|
||||
target.forEach((element) => {
|
||||
obj[element.year] = element.data;
|
||||
yearList.push(element.year);
|
||||
});
|
||||
|
||||
moreSchoolYList.value = yearList.slice(0, 4);
|
||||
moreSchoolYMList.value = yearList.slice(4);
|
||||
moreSchoolPitch.value = yearList[0];
|
||||
moreSchoolList.value = obj;
|
||||
moreSchoolSid.value = sid;
|
||||
document.body.style.overflow = "hidden";
|
||||
});
|
||||
};
|
||||
|
||||
let moreYearState = ref(false);
|
||||
|
||||
const openMoreYearState = () => {
|
||||
moreYearState.value = true;
|
||||
};
|
||||
|
||||
const closeMoreSchool = () => {
|
||||
moreSchoolSid.value = 0;
|
||||
document.body.style.overflow = "auto";
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
if (swiperRef.value) swiperRef.value.removeEventListener("scroll", checkBtnVisibility);
|
||||
});
|
||||
|
||||
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 preachList = ref([]); // 宣讲会 列表
|
||||
let preachIndex = ref(0); // 宣讲会 下标
|
||||
let preachI = ref(1); // 宣讲会 下标
|
||||
let preachI = ref(0); // 宣讲会 下标
|
||||
let preachTimer = null;
|
||||
|
||||
let preachInterval = 4; // 每页 4 条
|
||||
|
||||
const getBannerList = () => {
|
||||
fetchData(`/v1/admissionsOfficer/banner`).then((res) => {
|
||||
if (res.code != 200) return;
|
||||
|
||||
for (let i = 0; i < 25; i++) {
|
||||
res.data.push({
|
||||
id: 1,
|
||||
title: "香港中文大学 | 美国西北大学双硕士学位课程",
|
||||
lecture_time: "2025-07-12 00:00:00",
|
||||
image_url: "https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-Z0rfHjqqsgFptxhT66SWgrlI64uMxcfWaHf9cJWpdxZDnzZ5RLrizQ0Mjk~",
|
||||
image_id: 977797,
|
||||
sort: 1,
|
||||
link_url: "https://www.baidu.com",
|
||||
status: 1,
|
||||
created_at: "2025-07-11 16:59:10",
|
||||
updated_at: "2025-07-11 17:09:33",
|
||||
});
|
||||
}
|
||||
|
||||
const data = res.data;
|
||||
data.forEach((element, index) => (element["id"] = index + 1));
|
||||
|
||||
let target = [];
|
||||
for (let i = 0; i < data.length; i += preachInterval) {
|
||||
target.push(data.slice(i, i + preachInterval));
|
||||
}
|
||||
|
||||
console.log("target", target);
|
||||
|
||||
preachList.value = target;
|
||||
|
||||
openPreachSwiper();
|
||||
});
|
||||
};
|
||||
|
||||
const rightImgBox = ref(null);
|
||||
|
||||
// 宣讲会 轮播图 的 定时器
|
||||
const openPreachSwiper = () => {
|
||||
return;
|
||||
clearTimeout(preachTimer);
|
||||
|
||||
preachTimer = setTimeout(() => {
|
||||
preachI.value += 1;
|
||||
console.log(preachI.value);
|
||||
if (preachI.value >= preachList.value[preachIndex.value].length) {
|
||||
preachIndex.value += 1;
|
||||
preachI.value = 0;
|
||||
}
|
||||
|
||||
if (preachIndex.value >= preachList.value.length) {
|
||||
preachIndex.value = 0;
|
||||
preachI.value = 0;
|
||||
}
|
||||
|
||||
openPreachSwiper();
|
||||
}, 3000);
|
||||
|
||||
setTimeout(() => {
|
||||
rightImgBox.value.scrollTo({
|
||||
left: 690 * preachI.value,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}, 100);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
// 鼠标 移入 轮播图
|
||||
const preachMouseEnter = () => {
|
||||
clearTimeout(preachTimer);
|
||||
};
|
||||
|
||||
// 鼠标 离开 轮播图
|
||||
const preachMouseLeave = () => {
|
||||
openPreachSwiper();
|
||||
};
|
||||
|
||||
const fetchData = (url, data) => {
|
||||
@@ -513,7 +631,8 @@
|
||||
});
|
||||
};
|
||||
|
||||
return { interviewData, preachList, preachIndex, preachI, isPlaying, togglePlay, scrollLeft, scrollRight, swiperRef, showLeftBtn, showRightBtn };
|
||||
let dynamicColor = ref("");
|
||||
return { preachMouseEnter, preachMouseLeave, rightImgBox, palyState, theme, interviewList, closeSchoolYearState, selectSchoolYearState, openSchoolYearState, cutSchoolYear, admissionList, moreSchoolYMList, openMoreYearState, moreYearState, moreSchoolPitch, moreSchoolYList, dynamicColor, moreSchoolList, moreSchoolData, moreSchoolSid, closeMoreSchool, openMoreSchool, retrospectInterval, retrospectPage, retrospectPages, retrospectList, retrospectCount, retrospectList, interviewData, preachList, preachIndex, preachI, isPlaying, togglePlay, scrollLeft, scrollRight, swiperRef, showLeftBtn, showRightBtn };
|
||||
},
|
||||
});
|
||||
// 挂载到页面中的#app元素
|
||||
|
||||
Reference in New Issue
Block a user