A1300399510/PCAdmissionOfficer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admission-officer): 修复样式问题并添加视频播放功能

Browse Source 
- 修复列表项样式和间距问题
- 添加链接悬停效果
- 实现视频播放弹窗功能
- 优化圆角边框和交互细节
- 调整图片显示和文本溢出处理
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-07-14 19:00:55 +08:00
parent 9379c50224
commit 14ee9914ca
5 changed files with 514 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
css/index.css
View File

@@ -23,6 +23,12 @@
.admission-officer .flex1 { .admission-officer .flex1 {
flex: 1; flex: 1;
} }
.admission-officer a {
text-decoration: none;
}
.admission-officer a:hover {
text-decoration: underline;
}
.admission-officer .admission-head { .admission-officer .admission-head {
width: 100%; width: 100%;
height: 144px; height: 144px;
@@ -136,7 +142,6 @@
overflow: hidden; overflow: hidden;
} }
.admission-officer .admission-body .interview-box .left .content .img { .admission-officer .admission-body .interview-box .left .content .img {
width: 592px;
height: 333px; height: 333px;
} }
.admission-officer .admission-body .interview-box .left .content .play-btn { .admission-officer .admission-body .interview-box .left .content .play-btn {
@@ -254,12 +259,28 @@
padding-top: 13px; padding-top: 13px;
} }
.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list { .admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list {
padding-left: 49px; margin-left: 49px;
}
.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list .introduce-item {
width: 291px; width: 291px;
font-size: 14px; font-size: 14px;
line-height: 53px; line-height: 52px;
color: #333333; color: #333333;
position: relative; position: relative;
white-space: pre-line;
}
.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list .introduce-item::after {
content: "";
width: 6px;
height: 6px;
background-color: #000000;
border-radius: 50%;
position: absolute;
top: 24px;
left: -16px;
}
.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list .introduce-item:not(:last-child) {
border-bottom: 1px dotted #d7d7d7;
} }
.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .play-btn { .admission-officer .admission-body .interview-box .focus-box .content .introduce-box .play-btn {
width: 126px; width: 126px;
@@ -272,6 +293,8 @@
font-size: 16px; font-size: 16px;
color: #ffffff; color: #ffffff;
margin-left: auto; margin-left: auto;
cursor: pointer;
user-select: none;
} }
.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .play-btn .icon { .admission-officer .admission-body .interview-box .focus-box .content .introduce-box .play-btn .icon {
width: 20px; width: 20px;
@@ -327,6 +350,7 @@
border-radius: 67px; border-radius: 67px;
margin: 0 2px; margin: 0 2px;
transition: all 0.3s; transition: all 0.3s;
cursor: pointer;
} }
.admission-officer .admission-body .preach-box .left .box .indicators .item.pitch { .admission-officer .admission-body .preach-box .left .box .indicators .item.pitch {
margin: 0 3px; margin: 0 3px;
@@ -410,6 +434,7 @@
.admission-officer .admission-body .preach-box .right .img-box .img { .admission-officer .admission-body .preach-box .right .img-box .img {
width: 690px; width: 690px;
height: 293px; height: 293px;
border-radius: 10px;
} }
.admission-officer .admission-body .interview-more { .admission-officer .admission-body .interview-more {
margin-bottom: 102px; margin-bottom: 102px;
@@ -472,6 +497,7 @@
height: 200px; height: 200px;
position: relative; position: relative;
border-radius: 10px; border-radius: 10px;
cursor: pointer;
} }
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item:not(:last-child) { .admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item:not(:last-child) {
margin-right: 10px; margin-right: 10px;
@@ -543,6 +569,7 @@
} }
.admission-officer .admission-body .school-list .school-item .left .img { .admission-officer .admission-body .school-list .school-item .left .img {
width: 505px; width: 505px;
border-radius: 20px;
} }
.admission-officer .admission-body .school-list .school-item .right { .admission-officer .admission-body .school-list .school-item .right {
width: 651px; width: 651px;
@@ -564,6 +591,7 @@
font-size: 20px; font-size: 20px;
color: #000000; color: #000000;
margin-bottom: 6px; margin-bottom: 6px;
display: block;
} }
.admission-officer .admission-body .school-list .school-item .right .info .name .arrows { .admission-officer .admission-body .school-list .school-item .right .info .name .arrows {
width: 12px; width: 12px;
@@ -578,8 +606,13 @@
.admission-officer .admission-body .school-list .school-item .right .introduce { .admission-officer .admission-body .school-list .school-item .right .introduce {
font-size: 14px; font-size: 14px;
color: #555555; color: #555555;
padding-top: 19px; margin-top: 19px;
padding-bottom: 24px; margin-bottom: 24px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
} }
.admission-officer .admission-body .school-list .school-item .right .content { .admission-officer .admission-body .school-list .school-item .right .content {
padding-top: 27px; padding-top: 27px;
@@ -623,6 +656,7 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
fill: #fff;
} }
.admission-officer .admission-body .school-list .school-item .right .content .year .item.pitch { .admission-officer .admission-body .school-list .school-item .right .content .year .item.pitch {
color: #ffffff; color: #ffffff;
@@ -639,11 +673,14 @@
vertical-align: middle; vertical-align: middle;
transition: all 0.3s; transition: all 0.3s;
} }
.admission-officer .admission-body .school-list .school-item .right .content .year .item.more.pitch .arrows {
fill: #fff;
}
.admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold { .admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold {
color: #fff; color: #fff;
} }
.admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold .svg { .admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold .svg {
fill: #76c45e; fill: #76c45e !important;
} }
.admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold .arrows { .admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold .arrows {
fill: #fff; fill: #fff;
@@ -661,7 +698,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
cursor: none; cursor: auto;
display: none; display: none;
} }
.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box { .admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box {
@@ -719,7 +756,6 @@
margin-bottom: 8px; margin-bottom: 8px;
} }
.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .name .label { .admission-officer .admission-body .school-list .school-item .right .content .course-list .item .name .label {
width: 120px;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
background-color: #3c7de9; background-color: #3c7de9;
@@ -786,6 +822,7 @@
align-items: flex-start; align-items: flex-start;
padding: 20px; padding: 20px;
margin-right: 12px; margin-right: 12px;
cursor: pointer;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@@ -809,9 +846,9 @@
} }
.admission-officer .admission-body .retrospect .list .item .bg { .admission-officer .admission-body .retrospect .list .item .bg {
position: absolute; position: absolute;
top: 0; top: 10px;
right: 0; right: 1px;
height: 180px; height: 160px;
display: block; display: block;
z-index: -2; z-index: -2;
} }
@@ -952,6 +989,7 @@
text-align: center; text-align: center;
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
user-select: none;
} }
.admission-officer .admission-body .more-school-mask .more-school .content .year .item .svg { .admission-officer .admission-body .more-school-mask .more-school .content .year .item .svg {
width: 100px; width: 100px;
@@ -960,6 +998,7 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
fill: #fff;
} }
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.pitch { .admission-officer .admission-body .more-school-mask .more-school .content .year .item.pitch {
color: #ffffff; color: #ffffff;
@@ -976,6 +1015,9 @@
vertical-align: middle; vertical-align: middle;
transition: all 0.3s; transition: all 0.3s;
} }
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.pitch .arrows {
fill: #fff;
}
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold { .admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold {
color: #fff; color: #fff;
} }
@@ -998,7 +1040,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
cursor: none; cursor: auto;
display: none; display: none;
} }
.admission-officer .admission-body .more-school-mask .more-school .content .year .item .more-box { .admission-officer .admission-body .more-school-mask .more-school .content .year .item .more-box {
@@ -1122,3 +1164,29 @@
height: 12px; height: 12px;
margin-left: 7px; margin-left: 7px;
} }
.admission-officer .admission-body .paly-box-mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
z-index: 100;
}
.admission-officer .admission-body .paly-box-mask .paly-box {
position: relative;
}
.admission-officer .admission-body .paly-box-mask .paly-box .close {
position: absolute;
top: -20px;
right: -20px;
width: 20px;
height: 20px;
cursor: pointer;
}
.admission-officer .admission-body .paly-box-mask .paly-box .paly-video {
width: 800px;
height: 600px;
background-color: #000000;
border-radius: 10px;
}

135
css/index.less
View File

@@ -26,6 +26,13 @@
flex: 1; flex: 1;
} }
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.admission-head { .admission-head {
width: 100%; width: 100%;
height: 144px; height: 144px;
@@ -139,14 +146,16 @@
height: 36px; height: 36px;
} }
} }
.content { .content {
width: 592px; width: 592px;
height: 333px; height: 333px;
position: relative; position: relative;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
.img { .img {
width: 592px; // width: 592px;
height: 333px; height: 333px;
} }
@@ -277,28 +286,29 @@
padding-top: 13px; padding-top: 13px;
.introduce-list { .introduce-list {
padding-left: 49px; margin-left: 49px;
// .introduce-item { .introduce-item {
width: 291px; width: 291px;
font-size: 14px; font-size: 14px;
line-height: 53px; line-height: 52px;
color: #333333; color: #333333;
// padding: 10px 0; position: relative;
position: relative; white-space: pre-line;
// &::after {
// content: ""; &::after {
// width: 6px; content: "";
// height: 6px; width: 6px;
// background-color: #000000; height: 6px;
// border-radius: 50%; background-color: #000000;
// position: absolute; border-radius: 50%;
// top: 24px; position: absolute;
// left: -16px; top: 24px;
// } left: -16px;
// &:not(:last-child) { }
// border-bottom: 1px dotted #d7d7d7; &:not(:last-child) {
// } border-bottom: 1px dotted #d7d7d7;
// } }
}
} }
.play-btn { .play-btn {
@@ -312,6 +322,8 @@
font-size: 16px; font-size: 16px;
color: #ffffff; color: #ffffff;
margin-left: auto; margin-left: auto;
cursor: pointer;
user-select: none;
.icon { .icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
@@ -372,7 +384,7 @@
border-radius: 67px; border-radius: 67px;
margin: 0 2px; margin: 0 2px;
transition: all 0.3s; transition: all 0.3s;
cursor: pointer;
&.pitch { &.pitch {
margin: 0 3px; margin: 0 3px;
width: 20px; width: 20px;
@@ -474,6 +486,7 @@
.img { .img {
width: 690px; width: 690px;
height: 293px; height: 293px;
border-radius: 10px;
} }
} }
} }
@@ -547,6 +560,7 @@
height: 200px; height: 200px;
position: relative; position: relative;
border-radius: 10px; border-radius: 10px;
cursor: pointer;
&:not(:last-child) { &:not(:last-child) {
margin-right: 10px; margin-right: 10px;
@@ -588,6 +602,7 @@
.school-list { .school-list {
margin-bottom: 90px; margin-bottom: 90px;
.school-item { .school-item {
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 102px; margin-bottom: 102px;
@@ -601,7 +616,7 @@
width: 100px; width: 100px;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
background-color: rgba(125, 40, 130, 1); background-color: #7d2882;
border-radius: 86px; border-radius: 86px;
font-family: "Arial-Black", "Arial Black", sans-serif; font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900; font-weight: 900;
@@ -626,6 +641,7 @@
} }
.img { .img {
width: 505px; width: 505px;
border-radius: 20px;
} }
} }
.right { .right {
@@ -647,6 +663,7 @@
font-size: 20px; font-size: 20px;
color: #000000; color: #000000;
margin-bottom: 6px; margin-bottom: 6px;
display: block;
.arrows { .arrows {
width: 12px; width: 12px;
height: 12px; height: 12px;
@@ -664,8 +681,14 @@
.introduce { .introduce {
font-size: 14px; font-size: 14px;
color: #555555; color: #555555;
padding-top: 19px; margin-top: 19px;
padding-bottom: 24px; margin-bottom: 24px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
} }
.content { .content {
@@ -708,6 +731,7 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
fill: #fff;
} }
&.pitch { &.pitch {
@@ -728,10 +752,15 @@
} }
&.more { &.more {
&.pitch {
.arrows {
fill: #fff;
}
}
&.unfold { &.unfold {
color: #fff; color: #fff;
.svg { .svg {
fill: #76c45e; fill: #76c45e !important;
} }
.arrows { .arrows {
fill: #fff; fill: #fff;
@@ -753,7 +782,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
cursor: none; cursor: auto;
display: none; display: none;
} }
@@ -817,7 +846,6 @@
color: #333333; color: #333333;
margin-bottom: 8px; margin-bottom: 8px;
.label { .label {
width: 120px;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
background-color: rgba(60, 125, 233, 1); background-color: rgba(60, 125, 233, 1);
@@ -853,7 +881,7 @@
width: 100px; width: 100px;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
background-color: rgba(125, 40, 130, 1); background-color: #7d2882;
border-radius: 86px; border-radius: 86px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400; font-weight: 400;
@@ -895,6 +923,7 @@
align-items: flex-start; align-items: flex-start;
padding: 20px; padding: 20px;
margin-right: 12px; margin-right: 12px;
cursor: pointer;
&:not(:nth-last-child(-n + 3)) { &:not(:nth-last-child(-n + 3)) {
margin-bottom: 12px; margin-bottom: 12px;
@@ -921,9 +950,9 @@
.bg { .bg {
position: absolute; position: absolute;
top: 0; top: 10px;
right: 0; right: 1px;
height: 180px; height: 160px;
display: block; display: block;
z-index: -2; z-index: -2;
} }
@@ -1056,6 +1085,7 @@
font-size: 20px; font-size: 20px;
color: #000000; color: #000000;
margin-bottom: 4px; margin-bottom: 4px;
.icon { .icon {
width: 12px; width: 12px;
height: 12px; height: 12px;
@@ -1084,6 +1114,7 @@
text-align: center; text-align: center;
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
user-select: none;
.svg { .svg {
width: 100px; width: 100px;
height: 28px; height: 28px;
@@ -1091,6 +1122,7 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
fill: #fff;
} }
&.pitch { &.pitch {
@@ -1111,6 +1143,11 @@
} }
&.more { &.more {
&.pitch {
.arrows {
fill: #fff;
}
}
&.unfold { &.unfold {
color: #fff; color: #fff;
.svg { .svg {
@@ -1136,7 +1173,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
cursor: none; cursor: auto;
display: none; display: none;
} }
@@ -1278,5 +1315,33 @@
} }
} }
} }
.paly-box-mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
z-index: 100;
.paly-box {
position: relative;
.close {
position: absolute;
top: -20px;
right: -20px;
width: 20px;
height: 20px;
cursor: pointer;
}
.paly-video {
width: 800px;
height: 600px;
background-color: rgba(0, 0, 0, 1);
border-radius: 10px;
}
}
}
} }
} }

11
img/cross-white.svg Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter248">
<feColorMatrix type="matrix" values="1 0 0 0 1 0 1 0 0 1 0 0 1 0 1 0 0 0 1 0 " in="SourceGraphic" />
</filter>
</defs>
<g transform="matrix(1 0 0 1 -1683 -6028 )">
<image preserveAspectRatio="none" style="overflow:visible" width="20" height="20" xlink:href="data:image/png;base64,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" x="1683px" y="6028px" filter="url(#filter248)" />
</g>
</svg>

511
index.html
View File

@@ -22,15 +22,16 @@
</div> </div>
</div> </div>
<div class="admission-body"> <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" /> <img class="bj" src="./img/interview-bj.svg" />
<div class="left"> <div class="left">
<div class="head flexacenter"> <div class="head flexacenter">
<img class="icon" src="./img/interview-icon.png" /> <img class="icon" src="./img/interview-icon.png" />
<img class="name" src="./img/interview-name.png" /> <img class="name" src="./img/interview-name.png" />
</div> </div>
<div class="content"> <div class="content flexcenter">
<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> <!-- <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' }" /> <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="bottom" :style="{ transform: isPlaying ? 'translateY(100%)' : 'translateY(0)', opacity: isPlaying ? '0' : '1' }">
<div class="title">{{ interviewData.title }}</div> <div class="title">{{ interviewData.title }}</div>
@@ -55,14 +56,12 @@
{{ interviewData.admission_officer_name }} {{ interviewData.admission_officer_name }}
<div class="professional">{{ interviewData.admission_officer_rank }}</div> <div class="professional">{{ interviewData.admission_officer_rank }}</div>
</div> </div>
<div class="subheading">香港中文大学（深圳）</div> <div class="subheading">{{ interviewData.name }}</div>
<div class="subheading">{{ interviewData.admission_officer_position }}</div> <div class="subheading">{{ interviewData.admission_officer_position }}</div>
</div> </div>
<div class="introduce-box flexflex"> <div class="introduce-box flexflex">
<div class="introduce-list" v-html="interviewData.focus_of_this_issue"> <div class="introduce-list" v-if="interviewData.focus_of_this_issue">
<!-- <div class="introduce-item">数据科学学院助理院长</div> <div class="introduce-item" v-for="item in interviewData.focus_of_this_issue">{{ item }}</div>
<div class="introduce-item">数据科学学院助理院长</div>
<div class="introduce-item">数据科学学院助理院长</div> -->
</div> </div>
<div class="play-btn flexcenter"> <div class="play-btn flexcenter">
立即播放 立即播放
@@ -72,43 +71,43 @@
</div> </div>
</div> </div>
</div> </div>
<div class="preach-box flexflex"> <div class="preach-box flexflex" v-else>
<img class="bj" src="./img/interview-bj.svg" /> <img class="bj" src="./img/interview-bj.svg" />
<div class="left"> <div class="left">
<div class="head flexacenter"> <div class="head flexacenter">
<img class="icon" src="./img/preach-icon.png" /> <img class="icon" src="./img/preach-icon.png" />
<img class="name" src="./img/preach-name.png" /> <img class="name" src="./img/preach-name.png" />
</div> </div>
<div class="box"> <div class="box" @mouseenter="preachMouseEnter" @mouseleave="preachMouseLeave">
<div class="indicators flexcenter"> <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>
<div class="list"> <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="info flex1">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.title }}{{ item.id }}</div>
<div class="time">{{ item.time }}</div> <div class="time">{{ item.lecture_time }}</div>
</div> </div>
<img class="icon" src="./img/arrows-full-circle-white.svg" /> <img class="icon" src="./img/arrows-full-circle-white.svg" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="right"> <div class="right" @mouseenter="preachMouseEnter" @mouseleave="preachMouseLeave">
<img class="ok" src="./img/ok.png" /> <img class="ok" src="./img/ok.png" />
<div class="img-box flexacenter"> <div class="img-box flexacenter" ref="rightImgBox">
<div class="item" v-for="item in 10"> <a class="item" v-for="(item, index) in preachList[preachIndex]" target="_blank" :href="item.link_url">
<img class="img" src="https://axure-file.lanhuapp.com/md5__0a8d9a0165b1f5f8eba3cb48a7e16374.svg" /> <img class="img" :src="item.image_url" />
</div> </a>
</div> </div>
</div> </div>
</div> </div>
<div class="interview-more flexacenter"> <div class="interview-more flexacenter" v-if="interviewList.length">
<div class="case flexcenter" v-if="false"> <div class="case flexcenter" v-if="theme == 1">
<div class="name">更多访谈</div> <div class="name">更多访谈</div>
<div class="english">More interviews</div> <div class="english">More interviews</div>
</div> </div>
<div class="case preach flexcenter"> <div class="case preach flexcenter" v-else>
<div class="name">招生官访谈</div> <div class="name">招生官访谈</div>
<div class="english">Interview video</div> <div class="english">Interview video</div>
</div> </div>
@@ -120,83 +119,74 @@
<img class="arrows" src="./img/arrows-black.svg" /> <img class="arrows" src="./img/arrows-black.svg" />
</div> </div>
<div class="swiper flexacenter" ref="swiperRef"> <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" /> <img class="img" src="https://axure-file.lanhuapp.com/md5__d360c330dfaa81d2fad4ef78a5e74bb1.svg" />
<div class="bottom"> <div class="bottom">
<div class="title">大标题大标题</div> <div class="title">{{ item.title }}</div>
<div class="subtitle">副标题副标题，副标题副标题副标题</div> <div class="subtitle">{{ item.subtitle }}</div>
</div> </div>
</div> </div>
</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="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="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>
<div class="right"> <div class="right">
<div class="info flexacenter"> <div class="info flexacenter">
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkCLRSBaR7ec6NYmTHuZYPMKxNHJQuwf83NTE2" /> <a :href="`https://schools.gter.net/details/${item.sid}`" target="_blank">
<div class=""> <img class="img" :src="item.logo" />
<div class="name"> </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" /> <img class="arrows" src="./img/arrows-circle-black.svg" />
</div> </a>
<div class="english">The Chinese University of Hong Kong</div> <a class="english" :href="`https://schools.gter.net/details/${item.sid}`" target="_blank">{{ item.enname }}</a>
</div> </div>
</div> </div>
<div class="introduce">香港中文大学成立于1963年，是香港第二所成立的大学，亦是香港八所受政府香港大学教育资助委员会资助并可颁授学位的高等教育院校之一。中大是由新亚书院（1949年成立）、崇基学院...</div> <div class="introduce">{{ item.introduction }}</div>
<div class="content"> <div class="content">
<div class="year flexacenter"> <div class="year flexacenter">
<div class="item pitch"> <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: dynamicColor }"> <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> <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>
2026季 {{ it }}季
</div> </div>
<div class="item"> <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" fill="#ffffff"> <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> <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>
2026季 <!-- 更多 -->
</div> {{ item.yListMore.includes(item.pitch) ? `${ item.pitch }季` : '更多' }}
<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"> <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> <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> </svg>
<div class="more-mask"></div> <div class="more-mask" @click.stop="closeSchoolYearState(index)"></div>
<div class="more-box"> <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>
</div> </div>
<div class="course-list"> <div class="course-list">
<div class="item"> <div class="item" v-for="it in item.list[item.pitch]">
<div class="name flexacenter"> <div class="name flexacenter">
<div class="icon flexcenter"> <div class="icon flexcenter">
<img class="img" src="./img/course-icon.png" /> <img class="img" src="./img/course-icon.png" />
</div> </div>
公共政策社会科学硕士课程 {{ it.title }}
<div class="label"> <div class="label" v-if="it.tag">
<img class="arrows" src="./img/arrows-triangle-blue.svg" /> <img class="arrows" src="./img/arrows-triangle-blue.svg" />
2025入学现正招生 {{ it.tag }}
</div> </div>
</div> </div>
<div class="bottom flexacenter"> <div class="bottom flexacenter">
@@ -204,32 +194,12 @@
<div class="icon flexcenter"> <div class="icon flexcenter">
<img class="img" src="./img/time-icon.png" /> <img class="img" src="./img/time-icon.png" />
</div> </div>
长期答疑 {{ it.date || '长期答疑'}}
</div> </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" /> <img class="arrows" src="./img/arrows-circle-white.svg" />
</div> </a>
</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>
@@ -237,41 +207,24 @@
</div> </div>
</div> </div>
</div> </div>
<div class="retrospect"> <div class="retrospect">
<img class="more-icon" src="./img/more-name.png" /> <img class="more-icon" src="./img/more-name.png" />
<div class="list flexflex"> <div class="list flexflex">
<div class="item flexflex" v-for="item in 6"> <div class="item flexflex" v-for="item in retrospectList.slice((retrospectPage - 1) * retrospectInterval, retrospectPage * retrospectInterval)" @click="openMoreSchool(item.sid)">
<img class="bg" src="https://oss.x-php.com/school/J6BSwE-VfCFkDLVSBaR7ec6NYmSUtp5bNP9NHJQuwf83NTE2" /> <img class="bg" :src="item.logo" />
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkDLVSBaR7ec6NYmSUtp5bNP9NHJQuwf83NTE2" /> <img class="img" :src="item.logo" />
<div class="right"> <div class="right">
<div class="name">岭南大学</div> <div class="name">{{ item.name }}</div>
<div class="english">Lingnan University</div> <div class="english">{{ item.enname }}</div>
<div class="year flexacenter"> <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"> <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> <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> </svg>
2026季 {{ it }}季
</div> </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>
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"> <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> <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> </svg>
@@ -283,57 +236,56 @@
</div> </div>
</div> </div>
<div class="pages flexcenter"> <div class="pages flexcenter">
<img class="arrows gray" src="./img/arrows-thin-gray.svg" /> <img v-if="retrospectPage == 1" class="arrows gray" src="./img/arrows-thin-gray.svg" />
<img class="arrows rotate180" src="./img/arrows-thin-black.svg" /> <img v-else class="arrows rotate180" @click="retrospectPage--" src="./img/arrows-thin-black.svg" />
<div class="item flexcenter" :class="{'pitch': item == 1}" v-for="item in 3">{{ item }}</div> <div class="item flexcenter" :class="{'pitch': item == retrospectPage}" v-for="item in retrospectPages" @click="retrospectPage = item">{{ item }}</div>
<img class="arrows gray rotate180" src="./img/arrows-thin-gray.svg" /> <img v-if="retrospectPage == retrospectPages" class="arrows gray rotate180" src="./img/arrows-thin-gray.svg" />
<img class="arrows" src="./img/arrows-thin-black.svg" /> <img v-else class="arrows" @click="retrospectPage++" src="./img/arrows-thin-black.svg" />
</div> </div>
</div> </div>
<div class="more-school-mask flexcenter" style="display: none"> <div class="more-school-mask flexcenter" v-if="moreSchoolSid > 0" @click="closeMoreSchool">
<div class="more-school"> <div class="more-school" @click.stop="">
<img class="close" src="./img/cross.png" /> <img class="close" @click.stop="closeMoreSchool" src="./img/cross.png" />
<div class="head flexacenter"> <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="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" /> <img class="icon" src="./img/arrows-circle-black.svg" />
</div> </a>
<div class="english">The Hong Kong Polytechnic University</div> <a class="english" :href="`https://schools.gter.net/details/${moreSchoolSid}`" target="_blank">{{ moreSchoolData.enname }}</a>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div class="year flexacenter"> <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"> <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> <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>
2026季 {{ item }}季
</div> </div>
<!-- unfold --> <div class="item more" :class="[{'unfold': moreYearState},{'pitch': moreSchoolYMList.includes(moreSchoolPitch)}]" v-if="moreSchoolYMList.length > 0" @click="openMoreYearState">
<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"> <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> <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>
更多 {{ 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"> <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> <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> </svg>
<div class="more-mask"></div> <div class="more-mask" @click.stop="moreYearState = false"></div>
<div class="more-box"> <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>
</div> </div>
<div class="list"> <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="name flexacenter">
<div class="icon flexcenter"> <div class="icon flexcenter">
<img class="img" src="./img/course-icon.png" /> <img class="img" src="./img/course-icon.png" />
</div> </div>
公共政策社会科学硕士课程 {{ item.title }}
</div> </div>
<div class="bottom flexacenter"> <div class="bottom flexacenter">
<div class="time flexacenter"> <div class="time flexacenter">
@@ -342,21 +294,29 @@
</div> </div>
长期答疑 长期答疑
</div> </div>
<div class="btn flexcenter"> <a class="btn flexcenter" :href="item.url" target="_blank">
了解详情 了解详情
<img class="arrows" src="./img/arrows-circle-white.svg" /> <img class="arrows" src="./img/arrows-circle-white.svg" />
</div> </a>
</div> </div>
</div> </div>
</div> </div>
</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>
</div> </div>
<!-- 引入了 vue3 js 创建 vue3 实例 --> <!-- 引入了 vue3 js 创建 vue3 实例 -->
<script src="./js/vue.global.min.js"></script> <script src="./js/vue.global.min.js"></script>
<script src="./js/artplayer.js"></script>
<script> <script>
// 创建Vue3实例 // 创建Vue3实例
@@ -385,12 +345,11 @@
}; };
const scrollLeft = () => { const scrollLeft = () => {
if (swiperRef.value) { if (!swiperRef.value) return;
swiperRef.value.scrollTo({ swiperRef.value.scrollTo({
left: swiperRef.value.scrollLeft - 366, left: swiperRef.value.scrollLeft - 366,
behavior: "smooth", behavior: "smooth",
}); });
}
}; };
const scrollRight = () => { const scrollRight = () => {
@@ -405,82 +364,241 @@
const theme = ref(1); // 主题 1 2 const theme = ref(1); // 主题 1 2
onMounted(() => { onMounted(() => {
if (swiperRef.value) {
swiperRef.value.addEventListener("scroll", checkBtnVisibility);
checkBtnVisibility();
}
openPreachSwiper();
init(); init();
if (theme.value == 2) getBannerList();
getAdmissionLists();
getRetrospectList();
}); });
let interviewData = ref({}); // 模式一 的第一个访谈 let interviewData = ref({}); // 模式一 的第一个访谈
let interviewList = ref({}); // 访谈 列表
const init = () => { const init = () => {
fetchData("/v1/admissionsOfficer/interview").then((res) => { fetchData("/v1/admissionsOfficer/interview").then((res) => {
console.log("res", res);
if (res.code != 200) return; if (res.code != 200) return;
const data = res.data || [];
// 随机一条 data let data = res.data || [];
const random = Math.floor(Math.random() * data.length);
// const randomData = data[random]; data.forEach((element) => (element.focus_of_this_issue = element.focus_of_this_issue.split(/\r?\n/)));
// console.log("randomData", randomData);
interviewData.value = data[random] || {}; 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(() => { onUnmounted(() => {
if (swiperRef.value) swiperRef.value.removeEventListener("scroll", checkBtnVisibility); if (swiperRef.value) swiperRef.value.removeEventListener("scroll", checkBtnVisibility);
}); });
let preachList = ref([ 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 preachIndex = ref(0); // 宣讲会 下标
let preachI = ref(1); // 宣讲会 下标 let preachI = ref(0); // 宣讲会 下标
let preachTimer = null; 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 = () => { const openPreachSwiper = () => {
return; clearTimeout(preachTimer);
preachTimer = setTimeout(() => { preachTimer = setTimeout(() => {
preachI.value += 1; 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(); 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) => { 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元素 // 挂载到页面中的#app元素

8
js/artplayer.js Normal file
View File

File diff suppressed because one or more lines are too long