683 lines
43 KiB
HTML
683 lines
43 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="referrer" content="no-referrer" />
|
|
<title>5222</title>
|
|
<link rel="stylesheet" href="./css/index.css" />
|
|
<style>
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
|
|
.svg1 {
|
|
width: 100%;
|
|
min-width: 1920px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<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" />
|
|
<div class="admission-head-gray"></div>
|
|
<img class="admission-head-1" src="/img/admission-head-green.svg" />
|
|
<img class="admission-head-2" src="/img/admission-head-gray.svg" />
|
|
</div>
|
|
</div>
|
|
<img class="svg1" style="position: relative; margin-top: -22px" src="./img/1.svg" />
|
|
<div class="admission-body">
|
|
<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 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> -->
|
|
<!-- <video class="img" autoplay src="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" @pause="isPlaying = false"></video> -->
|
|
<img class="img" :src="interviewData.video_cover" />
|
|
<img class="play-btn" src="./img/play-btn.svg" @click="getVideoUrl(interviewData.token)" :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>
|
|
<div class="subtitle">{{ interviewData.subtitle }}</div>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
{{ interviewData.admission_officer_name }}
|
|
<div class="professional">{{ interviewData.admission_officer_rank }}</div>
|
|
</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-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" @click="getVideoUrl(interviewData.token)">
|
|
立即播放
|
|
<img class="icon" src="./img/play-btn.svg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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" @mouseenter="preachMouseEnter" @mouseleave="preachMouseLeave">
|
|
<div class="indicators flexcenter">
|
|
<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]" @click="preachI = index">
|
|
<div class="info flex1">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right" @mouseenter="preachMouseEnter" @mouseleave="preachMouseLeave">
|
|
<img class="ok" src="./img/ok.png" />
|
|
<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" 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" v-else>
|
|
<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>
|
|
<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 interviewList" @click="getVideoUrl(item.token)">
|
|
<img class="img" :src="item.video_cover" />
|
|
<div class="bottom">
|
|
<div class="title">{{ item.title }}</div>
|
|
<div class="subtitle">{{ item.subtitle }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else style="margin-bottom: 50px"></div>
|
|
|
|
<div class="school-list">
|
|
<div class="school-item flexflex" v-for="(item, index) in admissionList">
|
|
<div class="left">
|
|
<div class="abbreviation flexcenter" :style="{ backgroundColor:item.color }">{{ item.abbreviation }}</div>
|
|
<img class="icon" src="./img/malformation-icon.svg" />
|
|
<img class="img" :src="item.banner" />
|
|
</div>
|
|
<div class="right">
|
|
<div class="info flexacenter">
|
|
<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" />
|
|
</a>
|
|
<a class="english" :href="`https://schools.gter.net/details/${item.sid}`" target="_blank">{{ item.enname }}</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="introduce">{{ item.introduction }}</div>
|
|
|
|
<div class="content">
|
|
<div class="year flexacenter">
|
|
<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>
|
|
{{ it }}季
|
|
</div>
|
|
<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>
|
|
<!-- 更多 -->
|
|
{{ 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" @click.stop="closeSchoolYearState(index)"></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 flexflex">
|
|
<div class="icon flexcenter">
|
|
<img class="img" src="./img/course-icon.png" />
|
|
</div>
|
|
<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">
|
|
<div class="time flexacenter">
|
|
<div class="icon flexcenter">
|
|
<img class="img" src="./img/time-icon.png" />
|
|
</div>
|
|
{{ it.date || '长期答疑'}}
|
|
</div>
|
|
<a class="btn flexcenter" :style="{ 'background-color': item.color }" target="_blank" :href="it.url">
|
|
了解详情
|
|
<img class="arrows" src="./img/arrows-circle-white.svg" />
|
|
</a>
|
|
</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 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">{{ item.name }}</div>
|
|
<div class="english">{{ item.enname }}</div>
|
|
<div class="year flexacenter">
|
|
<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>
|
|
{{ it }}季
|
|
</div>
|
|
<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>
|
|
更多
|
|
<img class="arrows" src="./img/arrows-triangle-black.svg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pages flexcenter">
|
|
<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" 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">
|
|
<a :href="`https://schools.gter.net/details/${moreSchoolSid}`" target="_blank"><img class="img" :src="moreSchoolData.logo" /></a>
|
|
<div class="info">
|
|
<a class="name flexacenter" :href="`https://schools.gter.net/details/${moreSchoolSid}`" target="_blank">
|
|
{{ moreSchoolData.name }}
|
|
<img class="icon" src="./img/arrows-circle-black.svg" />
|
|
</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" :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>
|
|
{{ item }}季
|
|
</div>
|
|
<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" @click.stop="moreYearState = false"></div>
|
|
<div class="more-box">
|
|
<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 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">
|
|
<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">
|
|
了解详情
|
|
<img class="arrows" src="../img/arrows-circle-white.svg" />
|
|
</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" @click="closePalyState" />
|
|
<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实例
|
|
const { createApp, onMounted, ref, onUnmounted } = Vue;
|
|
const admissionApp = createApp({
|
|
setup() {
|
|
const isPlaying = ref(false);
|
|
const swiperRef = ref(null);
|
|
const showLeftBtn = ref(true);
|
|
const showRightBtn = ref(true);
|
|
|
|
const togglePlay = (token) => {
|
|
console.log("token", token);
|
|
|
|
// 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) return;
|
|
swiperRef.value.scrollTo({
|
|
left: swiperRef.value.scrollLeft - 366,
|
|
behavior: "smooth",
|
|
});
|
|
};
|
|
|
|
const scrollRight = () => {
|
|
if (!swiperRef.value) return;
|
|
swiperRef.value.scrollTo({
|
|
left: swiperRef.value.scrollLeft + 366,
|
|
behavior: "smooth",
|
|
});
|
|
};
|
|
|
|
const theme = ref(2); // 主题 1 2
|
|
|
|
onMounted(() => {
|
|
init();
|
|
if (theme.value == 2) getBannerList();
|
|
getAdmissionLists();
|
|
getRetrospectList();
|
|
});
|
|
|
|
let interviewData = ref({}); // 模式一 的第一个访谈
|
|
let interviewList = ref({}); // 访谈 列表
|
|
|
|
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.id !== target.id);
|
|
interviewData.value = target;
|
|
}
|
|
|
|
interviewList.value = data || [];
|
|
|
|
setTimeout(() => {
|
|
if (!swiperRef.value) return;
|
|
swiperRef.value.addEventListener("scroll", checkBtnVisibility);
|
|
checkBtnVisibility();
|
|
}, 400);
|
|
});
|
|
};
|
|
|
|
let palyState = ref(false); // 播放弹窗状态
|
|
|
|
let art = null; // 播放器实例
|
|
|
|
const getVideoUrl = (token) => {
|
|
fetchData(`/v1/admissionsOfficer/videoUrl?token=${token}`).then((res) => {
|
|
console.log("res", res);
|
|
palyState.value = true;
|
|
setTimeout(() => {
|
|
art = new Artplayer({
|
|
container: ".paly-box-mask .paly-box .paly-video",
|
|
url: res.data.url,
|
|
autoplay: true,
|
|
});
|
|
}, 500);
|
|
});
|
|
};
|
|
|
|
const closePalyState = () => {
|
|
art.pause();
|
|
art.destroy();
|
|
palyState.value = false;
|
|
};
|
|
|
|
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;
|
|
admissionList.value[index]["isPitchMore"] = false;
|
|
};
|
|
|
|
// 点击 招生官 年份 更多弹窗
|
|
const openSchoolYearState = (index) => {
|
|
admissionList.value[index]["state"] = true;
|
|
};
|
|
|
|
// 选择 招生官 年份 更多弹窗
|
|
const selectSchoolYearState = (index, year) => {
|
|
admissionList.value[index]["state"] = false;
|
|
admissionList.value[index]["pitch"] = year;
|
|
admissionList.value[index]["pitch"] = true;
|
|
};
|
|
|
|
// 关闭 招生官 年份 更多弹窗
|
|
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([]); // 宣讲会 列表
|
|
let preachIndex = ref(0); // 宣讲会 下标
|
|
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));
|
|
data.forEach((element) => (element["lecture_time"] = timeformat(element["lecture_time"])));
|
|
|
|
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 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);
|
|
|
|
// 宣讲会 轮播图 的 定时器
|
|
const openPreachSwiper = () => {
|
|
clearTimeout(preachTimer);
|
|
|
|
preachTimer = setTimeout(() => {
|
|
preachI.value += 1;
|
|
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();
|
|
|
|
setTimeout(() => {
|
|
rightImgBox.value.scrollTo({
|
|
left: 690 * preachI.value,
|
|
behavior: "smooth",
|
|
});
|
|
}, 100);
|
|
}, 2000);
|
|
};
|
|
|
|
// 鼠标 移入 轮播图
|
|
const preachMouseEnter = () => {
|
|
clearTimeout(preachTimer);
|
|
};
|
|
|
|
// 鼠标 离开 轮播图
|
|
const preachMouseLeave = () => {
|
|
openPreachSwiper();
|
|
};
|
|
|
|
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();
|
|
});
|
|
};
|
|
|
|
let dynamicColor = ref("");
|
|
return { closePalyState, getVideoUrl, 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元素
|
|
admissionApp.mount("#admission-officer");
|
|
</script>
|
|
</body>
|
|
</html>
|