feat(招生官页面): 新增宣讲会模块并优化访谈页面样式
添加宣讲会轮播列表和图片展示区域 优化访谈视频播放区域的交互样式 调整页面布局和间距，增加圆角效果 新增白色箭头图标资源 使用v-cloak防止页面加载时闪烁
This commit is contained in:
DESKTOP-RQ919RC\Pc
parent
39073eabdf
commit
9379c50224
134
css/index.css
134
css/index.css
@ -146,6 +146,7 @@
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.admission-officer .admission-body .interview-box .left .content .bottom {
|
.admission-officer .admission-body .interview-box .left .content .bottom {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -254,28 +255,12 @@
|
|||||||
}
|
}
|
||||||
.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;
|
padding-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: 33px;
|
line-height: 53px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
padding: 10px 0;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.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;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
@ -309,22 +294,123 @@
|
|||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.admission-officer .admission-body .preach-box .left {
|
.admission-officer .admission-body .preach-box .left {
|
||||||
padding-top: 14px;
|
padding-top: 21px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
.admission-officer .admission-body .preach-box .left .head {
|
.admission-officer .admission-body .preach-box .left .head {
|
||||||
margin-bottom: 11px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
.admission-officer .admission-body .preach-box .left .head .icon {
|
.admission-officer .admission-body .preach-box .left .head .icon {
|
||||||
width: 38px;
|
width: 33px;
|
||||||
height: 50px;
|
height: 22px;
|
||||||
margin-right: 1px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
.admission-officer .admission-body .preach-box .left .head .name {
|
.admission-officer .admission-body .preach-box .left .head .name {
|
||||||
width: 125px;
|
width: 125px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
}
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .left .box {
|
||||||
|
width: 444px;
|
||||||
|
height: 327px;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .left .box .indicators {
|
||||||
|
padding-top: 12px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .left .box .indicators .item {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background-color: #d7d7d7;
|
||||||
|
border-radius: 67px;
|
||||||
|
margin: 0 2px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .left .box .indicators .item.pitch {
|
||||||
|
margin: 0 3px;
|
||||||
|
width: 20px;
|
||||||
|
background-color: #d35110;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .left .box .list {
|
||||||
|
width: 404px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .left .box .list .item {
|
||||||
|
width: 404px;
|
||||||
|
height: 73px;
|
||||||
|
padding-left: 18px;
|
||||||
|
padding-right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .left .box .list .item.pitch-last {
|
||||||
|
border-bottom: 1px dotted transparent !important;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .left .box .list .item.pitch {
|
||||||
|
background-color: #76c45e;
|
||||||
|
border-radius: 10px;
|
||||||
|
border-bottom: 1px dotted #76c45e !important;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .left .box .list .item.pitch .info .name {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .left .box .list .item.pitch .info .time {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .left .box .list .item.pitch .icon {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .left .box .list .item:not(:last-of-type) {
|
||||||
|
border-bottom: 1px dotted #d7d7d7;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .left .box .list .item .info .name {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .left .box .list .item .info .time {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
color: #555555;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .left .box .list .item .icon {
|
||||||
|
display: none;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .right {
|
||||||
|
width: 690px;
|
||||||
|
height: 293px;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-top: 115px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .right .ok {
|
||||||
|
width: 101px;
|
||||||
|
height: 127px;
|
||||||
|
position: absolute;
|
||||||
|
top: -122px;
|
||||||
|
right: 45px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .right .img-box {
|
||||||
|
width: 690px;
|
||||||
|
height: 293px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .right .img-box .item {
|
||||||
|
width: 690px;
|
||||||
|
height: 293px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .preach-box .right .img-box .img {
|
||||||
|
width: 690px;
|
||||||
|
height: 293px;
|
||||||
|
}
|
||||||
.admission-officer .admission-body .interview-more {
|
.admission-officer .admission-body .interview-more {
|
||||||
margin-bottom: 102px;
|
margin-bottom: 102px;
|
||||||
}
|
}
|
||||||
@ -336,6 +422,9 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .case.preach {
|
||||||
|
background-color: #3c7de9;
|
||||||
|
}
|
||||||
.admission-officer .admission-body .interview-more .case .name {
|
.admission-officer .admission-body .interview-more .case .name {
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -390,6 +479,7 @@
|
|||||||
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .img {
|
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .img {
|
||||||
width: 356px;
|
width: 356px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .bottom {
|
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .bottom {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
181
css/index.less
181
css/index.less
@ -157,6 +157,7 @@
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.bottom {
|
.bottom {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -277,27 +278,27 @@
|
|||||||
|
|
||||||
.introduce-list {
|
.introduce-list {
|
||||||
padding-left: 49px;
|
padding-left: 49px;
|
||||||
.introduce-item {
|
// .introduce-item {
|
||||||
width: 291px;
|
width: 291px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 33px;
|
line-height: 53px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
padding: 10px 0;
|
// padding: 10px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
&::after {
|
// &::after {
|
||||||
content: "";
|
// content: "";
|
||||||
width: 6px;
|
// width: 6px;
|
||||||
height: 6px;
|
// height: 6px;
|
||||||
background-color: #000000;
|
// background-color: #000000;
|
||||||
border-radius: 50%;
|
// border-radius: 50%;
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 24px;
|
// top: 24px;
|
||||||
left: -16px;
|
// left: -16px;
|
||||||
}
|
// }
|
||||||
&:not(:last-child) {
|
// &:not(:last-child) {
|
||||||
border-bottom: 1px dotted #d7d7d7;
|
// border-bottom: 1px dotted #d7d7d7;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
.play-btn {
|
.play-btn {
|
||||||
@ -338,22 +339,143 @@
|
|||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.left {
|
.left {
|
||||||
padding-top: 14px;
|
padding-top: 21px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
|
|
||||||
.head {
|
.head {
|
||||||
margin-bottom: 11px;
|
margin-bottom: 24px;
|
||||||
.icon {
|
.icon {
|
||||||
width: 38px;
|
width: 33px;
|
||||||
height: 50px;
|
height: 22px;
|
||||||
margin-right: 1px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
.name {
|
.name {
|
||||||
width: 125px;
|
width: 125px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
width: 444px;
|
||||||
|
height: 327px;
|
||||||
|
background-color: rgba(246, 246, 246, 1);
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
.indicators {
|
||||||
|
padding-top: 12px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
.item {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background-color: rgba(215, 215, 215, 1);
|
||||||
|
border-radius: 67px;
|
||||||
|
margin: 0 2px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&.pitch {
|
||||||
|
margin: 0 3px;
|
||||||
|
width: 20px;
|
||||||
|
background-color: rgba(211, 81, 16, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
width: 404px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 404px;
|
||||||
|
height: 73px;
|
||||||
|
padding-left: 18px;
|
||||||
|
padding-right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.pitch-last {
|
||||||
|
border-bottom: 1px dotted transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.pitch {
|
||||||
|
background-color: #76c45e;
|
||||||
|
border-radius: 10px;
|
||||||
|
border-bottom: 1px dotted #76c45e !important;
|
||||||
|
|
||||||
|
.info {
|
||||||
|
.name {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(:last-of-type) {
|
||||||
|
border-bottom: 1px dotted #d7d7d7;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
.name {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
color: #555555;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: none;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: 690px;
|
||||||
|
height: 293px;
|
||||||
|
background-color: rgba(251, 251, 251, 1);
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-top: 115px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.ok {
|
||||||
|
width: 101px;
|
||||||
|
height: 127px;
|
||||||
|
position: absolute;
|
||||||
|
top: -122px;
|
||||||
|
right: 45px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-box {
|
||||||
|
width: 690px;
|
||||||
|
height: 293px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 690px;
|
||||||
|
height: 293px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 690px;
|
||||||
|
height: 293px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -368,6 +490,10 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|
||||||
|
&.preach {
|
||||||
|
background-color: rgba(60, 125, 233, 1);
|
||||||
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -421,7 +547,7 @@
|
|||||||
height: 200px;
|
height: 200px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
// overflow-x: auto;
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
@ -429,6 +555,7 @@
|
|||||||
.img {
|
.img {
|
||||||
width: 356px;
|
width: 356px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom {
|
.bottom {
|
||||||
|
|||||||
6
img/arrows-full-circle-white.svg
Normal file
6
img/arrows-full-circle-white.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -821 -4109 )">
|
||||||
|
<path d="M 13.1979166666667 8.46875 C 13.3229166666667 8.34375 13.3854166666667 8.1875 13.3854166666667 8 C 13.3854166666667 7.8125 13.3229166666667 7.65625 13.1979166666667 7.53125 L 12.25 6.58333333333333 L 8.47916666666667 2.8125 C 8.35416666666667 2.6875 8.19791666666667 2.625 8.01041666666667 2.625 C 7.82291666666667 2.625 7.66666666666667 2.6875 7.54166666666667 2.8125 L 6.59375 3.76041666666667 C 6.46875 3.88541666666667 6.40625 4.04166666666667 6.40625 4.22916666666667 C 6.40625 4.41666666666667 6.46875 4.57291666666667 6.59375 4.69791666666667 L 8.5625 6.66666666666667 L 3.33333333333333 6.66666666666667 C 3.15277777777778 6.66666666666667 2.99652777777778 6.73263888888889 2.86458333333333 6.86458333333333 C 2.73263888888889 6.99652777777778 2.66666666666667 7.15277777777778 2.66666666666667 7.33333333333333 L 2.66666666666667 8.66666666666667 C 2.66666666666667 8.84722222222222 2.73263888888889 9.00347222222222 2.86458333333333 9.13541666666667 C 2.99652777777778 9.26736111111111 3.15277777777778 9.33333333333333 3.33333333333333 9.33333333333333 L 8.5625 9.33333333333333 L 6.59375 11.3020833333333 C 6.46180555555556 11.4340277777778 6.39583333333333 11.5902777777778 6.39583333333333 11.7708333333333 C 6.39583333333333 11.9513888888889 6.46180555555556 12.1076388888889 6.59375 12.2395833333333 L 7.54166666666667 13.1875 C 7.66666666666667 13.3125 7.82291666666667 13.375 8.01041666666667 13.375 C 8.19791666666667 13.375 8.35416666666667 13.3125 8.47916666666667 13.1875 L 12.25 9.41666666666667 L 13.1979166666667 8.46875 Z M 14.9270833333333 3.984375 C 15.6423611111111 5.21006944444444 16 6.54861111111111 16 8 C 16 9.45138888888889 15.6423611111111 10.7899305555556 14.9270833333333 12.015625 C 14.2118055555556 13.2413194444444 13.2413194444444 14.2118055555556 12.015625 14.9270833333333 C 10.7899305555556 15.6423611111111 9.45138888888889 16 8 16 C 6.54861111111111 16 5.21006944444444 15.6423611111111 3.984375 14.9270833333333 C 2.75868055555556 14.2118055555556 1.78819444444444 13.2413194444444 1.07291666666667 12.015625 C 0.357638888888889 10.7899305555556 0 9.45138888888889 0 8 C 0 6.54861111111111 0.357638888888889 5.21006944444444 1.07291666666667 3.984375 C 1.78819444444444 2.75868055555556 2.75868055555556 1.78819444444444 3.984375 1.07291666666667 C 5.21006944444444 0.357638888888888 6.54861111111111 0 8 0 C 9.45138888888889 0 10.7899305555556 0.357638888888888 12.015625 1.07291666666667 C 13.2413194444444 1.78819444444444 14.2118055555556 2.75868055555556 14.9270833333333 3.984375 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 821 4109 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
161
index.html
161
index.html
@ -5,9 +5,14 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
<link rel="stylesheet" href="./css/index.css" />
|
<link rel="stylesheet" href="./css/index.css" />
|
||||||
|
<style>
|
||||||
|
[v-cloak] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="admission-officer" class="admission-officer">
|
<div id="admission-officer" class="admission-officer" v-cloak>
|
||||||
<div class="admission-head">
|
<div class="admission-head">
|
||||||
<div class="admission-head-box">
|
<div class="admission-head-box">
|
||||||
<img class="admission-head-logo" src="./img/admission-head-logo.png" />
|
<img class="admission-head-logo" src="./img/admission-head-logo.png" />
|
||||||
@ -28,8 +33,8 @@
|
|||||||
<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://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' }" />
|
<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">大标题大标题</div>
|
<div class="title">{{ interviewData.title }}</div>
|
||||||
<div class="subtitle">副标题副标题，副标题副标题副标题</div>
|
<div class="subtitle">{{ interviewData.subtitle }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -47,17 +52,17 @@
|
|||||||
招生官
|
招生官
|
||||||
</div>
|
</div>
|
||||||
<div class="name flexflex">
|
<div class="name flexflex">
|
||||||
施林佟
|
{{ interviewData.admission_officer_name }}
|
||||||
<div class="professional">副教授</div>
|
<div class="professional">{{ interviewData.admission_officer_rank }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="subheading">香港中文大学（深圳）</div>
|
<div class="subheading">香港中文大学（深圳）</div>
|
||||||
<div class="subheading">数据科学学院助理院长</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">
|
<div class="introduce-list" v-html="interviewData.focus_of_this_issue">
|
||||||
<div class="introduce-item">数据科学学院助理院长</div>
|
<!-- <div class="introduce-item">数据科学学院助理院长</div>
|
||||||
<div class="introduce-item">数据科学学院助理院长</div>
|
|
||||||
<div class="introduce-item">数据科学学院助理院长</div>
|
<div class="introduce-item">数据科学学院助理院长</div>
|
||||||
|
<div class="introduce-item">数据科学学院助理院长</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="play-btn flexcenter">
|
<div class="play-btn flexcenter">
|
||||||
立即播放
|
立即播放
|
||||||
@ -71,17 +76,43 @@
|
|||||||
<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/preach-icon.png" />
|
||||||
<img class="name" src="./img/interview-name.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>
|
||||||
</div>
|
</div>
|
||||||
<div class="interview-more flexacenter" style="display: none">
|
<div class="interview-more flexacenter">
|
||||||
<div class="case flexcenter">
|
<div class="case flexcenter" v-if="false">
|
||||||
<div class="name">更多访谈</div>
|
<div class="name">更多访谈</div>
|
||||||
<div class="english">More interviews</div>
|
<div class="english">More interviews</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="swiper-box" style="">
|
<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">
|
<div class="btn left flexcenter" @click="scrollLeft" v-if="showLeftBtn">
|
||||||
<img class="arrows" src="./img/arrows-black.svg" />
|
<img class="arrows" src="./img/arrows-black.svg" />
|
||||||
</div>
|
</div>
|
||||||
@ -371,18 +402,118 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const theme = ref(1); // 主题 1 2
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (swiperRef.value) {
|
if (swiperRef.value) {
|
||||||
swiperRef.value.addEventListener("scroll", checkBtnVisibility);
|
swiperRef.value.addEventListener("scroll", checkBtnVisibility);
|
||||||
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(() => {
|
onUnmounted(() => {
|
||||||
if (swiperRef.value) swiperRef.value.removeEventListener("scroll", checkBtnVisibility);
|
if (swiperRef.value) swiperRef.value.removeEventListener("scroll", checkBtnVisibility);
|
||||||
});
|
});
|
||||||
|
|
||||||
return { isPlaying, togglePlay, scrollLeft, scrollRight, swiperRef, showLeftBtn, showRightBtn };
|
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元素
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user