524 lines
33 KiB
HTML
524 lines
33 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<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" 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>
|
||
<div class="admission-body">
|
||
<div class="interview-box flexflex">
|
||
<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>
|
||
<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>
|
||
<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">香港中文大学（深圳）</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>
|
||
<div class="play-btn flexcenter">
|
||
立即播放
|
||
<img class="icon" src="./img/play-btn.svg" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="preach-box flexflex">
|
||
<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="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">
|
||
<div class="case flexcenter" v-if="false">
|
||
<div class="name">更多访谈</div>
|
||
<div class="english">More interviews</div>
|
||
</div>
|
||
<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>
|
||
<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" style="display: none">
|
||
<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">
|
||
香港中文大学
|
||
<img class="arrows" src="./img/arrows-circle-black.svg" />
|
||
</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>
|
||
<!-- 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>
|
||
更多
|
||
<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-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 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="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 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" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="more-school-mask flexcenter" style="display: none">
|
||
<div class="more-school">
|
||
<img class="close" src="./img/cross.png" />
|
||
<div class="head flexacenter">
|
||
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkDLVSBaR7ec6NYmSUtp5bNP9NHJQuwf83NTE2" />
|
||
<div class="info">
|
||
<div class="name flexacenter">
|
||
岭南大学
|
||
<img class="icon" src="./img/arrows-circle-black.svg" />
|
||
</div>
|
||
<div class="english">The Hong Kong Polytechnic University</div>
|
||
</div>
|
||
</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" 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季
|
||
</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>
|
||
更多
|
||
<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-box">
|
||
<div class="more-item" v-for="item in 10">2025季</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="list">
|
||
<div class="item" v-for="item in 10">
|
||
<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>
|
||
|
||
<!-- 引入了 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",
|
||
});
|
||
}
|
||
};
|
||
|
||
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);
|
||
});
|
||
|
||
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元素
|
||
app.mount("#admission-officer");
|
||
</script>
|
||
</body>
|
||
</html>
|