feat: 新增招生官页面交互功能与样式优化
style: 调整页面布局与滚动行为 refactor: 重构视频播放控制逻辑 fix: 修复滑动按钮显示问题 docs: 更新CSS样式注释
This commit is contained in:
DESKTOP-RQ919RC\Pc
parent
a3da5622fd
commit
a13e64dd4e
523
css/index.css
523
css/index.css
@ -2,6 +2,7 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
.admission-officer {
|
.admission-officer {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@ -51,12 +52,13 @@
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
height: 91px;
|
height: 91px;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
.admission-officer .admission-head .admission-head-gray::after {
|
.admission-officer .admission-head .admission-head-gray::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 1px;
|
||||||
height: 91px;
|
height: 91px;
|
||||||
width: calc((100vw - 1920px) / 2);
|
width: calc((100vw - 1920px) / 2);
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
@ -66,7 +68,7 @@
|
|||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 1px;
|
||||||
height: 91px;
|
height: 91px;
|
||||||
width: calc((100vw - 1920px) / 2);
|
width: calc((100vw - 1920px) / 2);
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
@ -97,7 +99,7 @@
|
|||||||
.admission-officer .admission-body .interview-box {
|
.admission-officer .admission-body .interview-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 435px;
|
height: 435px;
|
||||||
margin: 0 auto;
|
margin: 0 auto 22px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
@ -112,6 +114,7 @@
|
|||||||
.admission-officer .admission-body .interview-box .left {
|
.admission-officer .admission-body .interview-box .left {
|
||||||
padding-top: 14px;
|
padding-top: 14px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
.admission-officer .admission-body .interview-box .left .head {
|
.admission-officer .admission-body .interview-box .left .head {
|
||||||
margin-bottom: 11px;
|
margin-bottom: 11px;
|
||||||
@ -151,6 +154,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, #000000 100%);
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, #000000 100%);
|
||||||
padding: 17px 22px 13px;
|
padding: 17px 22px 13px;
|
||||||
|
transition: all 0.3s;
|
||||||
}
|
}
|
||||||
.admission-officer .admission-body .interview-box .left .content .bottom .title {
|
.admission-officer .admission-body .interview-box .left .content .bottom .title {
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
@ -165,3 +169,516 @@
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
}
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box {
|
||||||
|
width: 552px;
|
||||||
|
height: 293px;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-top: 115px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box .ok {
|
||||||
|
width: 101px;
|
||||||
|
height: 127px;
|
||||||
|
position: absolute;
|
||||||
|
top: -122px;
|
||||||
|
right: 45px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box .head {
|
||||||
|
width: 100%;
|
||||||
|
height: 36px;
|
||||||
|
background-color: #dceed5;
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box .head .arrows {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box .head .name {
|
||||||
|
width: 79px;
|
||||||
|
height: 27px;
|
||||||
|
margin: 0 31px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box .content {
|
||||||
|
height: 257px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box .content .info {
|
||||||
|
border-right: 1px solid #ebebeb;
|
||||||
|
width: 193px;
|
||||||
|
padding: 25px 24px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box .content .info .label {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: 72px;
|
||||||
|
height: 21px;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box .content .info .label .icon {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
width: 72px;
|
||||||
|
height: 21px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box .content .info .name {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 11px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box .content .info .name .professional {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box .content .info .subheading {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
margin-bottom: 11px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box .content .introduce-box {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-top: 13px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list {
|
||||||
|
padding-left: 49px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list .introduce-item {
|
||||||
|
width: 291px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 33px;
|
||||||
|
color: #333333;
|
||||||
|
padding: 10px 0;
|
||||||
|
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 {
|
||||||
|
width: 126px;
|
||||||
|
height: 34px;
|
||||||
|
background-color: #d35110;
|
||||||
|
border-radius: 86px;
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .play-btn .icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more {
|
||||||
|
margin-bottom: 102px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .case {
|
||||||
|
width: 139px;
|
||||||
|
height: 200px;
|
||||||
|
background-color: #76c45e;
|
||||||
|
border-radius: 10px;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .case .name {
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .case .english {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .swiper-box {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .swiper-box .btn {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .swiper-box .btn.left {
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .swiper-box .btn.right {
|
||||||
|
right: 10px;
|
||||||
|
transform: translateY(-50%) rotate(180deg);
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .swiper-box .btn .arrows {
|
||||||
|
width: 13px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .swiper-box .swiper {
|
||||||
|
width: 1052px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item {
|
||||||
|
width: 356px;
|
||||||
|
height: 200px;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item:not(:last-child) {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .img {
|
||||||
|
width: 356px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .bottom {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, #000000 100%);
|
||||||
|
padding: 17px 22px 13px;
|
||||||
|
border-radius: 0 0 10px 10px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .bottom .title {
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .bottom .subtitle {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list {
|
||||||
|
margin-bottom: 90px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item:not(:last-child) {
|
||||||
|
margin-bottom: 102px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .left {
|
||||||
|
position: relative;
|
||||||
|
margin-right: 45px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .left .abbreviation {
|
||||||
|
width: 100px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
background-color: #7d2882;
|
||||||
|
border-radius: 86px;
|
||||||
|
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
|
font-weight: 900;
|
||||||
|
font-style: normal;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 13px;
|
||||||
|
display: inline-flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .left .icon {
|
||||||
|
width: 130px;
|
||||||
|
height: 62px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right {
|
||||||
|
width: 651px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .info {
|
||||||
|
padding-bottom: 24px;
|
||||||
|
border-bottom: 1px dotted #d7d7d7;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .info .img {
|
||||||
|
width: 60px;
|
||||||
|
height: 47px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .info .name {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .info .english {
|
||||||
|
color: #555555;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: "ArialMT", "Arial", sans-serif;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .introduce {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
padding-top: 19px;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content {
|
||||||
|
padding-top: 27px;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-bottom: 31px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content::after {
|
||||||
|
content: "";
|
||||||
|
width: 1051px;
|
||||||
|
height: 100%;
|
||||||
|
background: -webkit-linear-gradient(0deg, #d6e5e5 0%, #f6f2ea 100%);
|
||||||
|
background: -moz-linear-gradient(90deg, #d6e5e5 0%, #f6f2ea 100%);
|
||||||
|
background: linear-gradient(90deg, #d6e5e5 0%, #f6f2ea 100%);
|
||||||
|
border-radius: 20px;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .year {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .year .item {
|
||||||
|
width: 100px;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
position: relative;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .year .item .svg {
|
||||||
|
width: 100px;
|
||||||
|
height: 28px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .year .item.pitch {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 650;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .year .item.pitch .svg {
|
||||||
|
fill: #7d2882;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .year .item .arrows {
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 9px;
|
||||||
|
height: 5px;
|
||||||
|
margin-left: 5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .year .item:hover .more-box {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box {
|
||||||
|
display: none;
|
||||||
|
border-radius: 7px;
|
||||||
|
background: #fff;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
top: 32px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.118);
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box::after {
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
height: 10px;
|
||||||
|
display: block;
|
||||||
|
top: 0;
|
||||||
|
position: absolute;
|
||||||
|
transform: translateY(-100%);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box .more-item {
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box .more-item:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box .more-item:not(:last-child) {
|
||||||
|
border-bottom: 1px dotted #d7d7d7;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .course-list .item {
|
||||||
|
padding: 12px 10px 10px 20px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .course-list .item:not(:last-child) {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .icon {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background-color: #f3f4f8;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .icon .img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .name {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .name .label {
|
||||||
|
width: 120px;
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
background-color: #3c7de9;
|
||||||
|
border-radius: 3px;
|
||||||
|
position: relative;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: "ArialMT", "Arial", sans-serif;
|
||||||
|
padding: 0 6px;
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .name .label .arrows {
|
||||||
|
position: absolute;
|
||||||
|
width: 9px;
|
||||||
|
height: 16px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%) rotate(180deg);
|
||||||
|
left: -4px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .bottom {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .bottom .time {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .bottom .btn {
|
||||||
|
width: 100px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
background-color: #7d2882;
|
||||||
|
border-radius: 86px;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .bottom .btn .arrows {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
margin-left: 7px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .retrospect {
|
||||||
|
padding-bottom: 108px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .retrospect .more-icon {
|
||||||
|
width: 112px;
|
||||||
|
height: 40px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .retrospect .list {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .retrospect .list .item {
|
||||||
|
width: 392px;
|
||||||
|
height: 180px;
|
||||||
|
border-radius: 15px;
|
||||||
|
background: linear-gradient(90deg, #d6e5e5 0%, rgba(246, 242, 234, 0.988) 100%);
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .retrospect .list .item:nth-child(3n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .retrospect .list .item .img {
|
||||||
|
width: 47px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .retrospect .list .item .right .name {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .retrospect .list .item .right .english {
|
||||||
|
color: #555555;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .retrospect .list .item .right .year {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .retrospect .list .item .right .year .year-item {
|
||||||
|
width: 80px;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
position: relative;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .retrospect .list .item .right .year .year-item .svg {
|
||||||
|
width: 80px;
|
||||||
|
height: 24px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.admission-officer .admission-body .retrospect .list .item .right .year .year-item .arrows {
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 9px;
|
||||||
|
height: 5px;
|
||||||
|
margin-left: 5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|||||||
589
css/index.less
589
css/index.less
@ -2,6 +2,7 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
.admission-officer {
|
.admission-officer {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@ -56,12 +57,13 @@
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
height: 91px;
|
height: 91px;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 1px;
|
||||||
height: 91px;
|
height: 91px;
|
||||||
width: calc((100vw - 1920px) / 2);
|
width: calc((100vw - 1920px) / 2);
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
@ -72,7 +74,7 @@
|
|||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 1px;
|
||||||
height: 91px;
|
height: 91px;
|
||||||
width: calc((100vw - 1920px) / 2);
|
width: calc((100vw - 1920px) / 2);
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
@ -107,9 +109,10 @@
|
|||||||
.interview-box {
|
.interview-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 435px;
|
height: 435px;
|
||||||
margin: 0 auto;
|
margin: 0 auto 22px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
.bj {
|
.bj {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 435px;
|
height: 435px;
|
||||||
@ -122,6 +125,8 @@
|
|||||||
.left {
|
.left {
|
||||||
padding-top: 14px;
|
padding-top: 14px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
|
||||||
.head {
|
.head {
|
||||||
margin-bottom: 11px;
|
margin-bottom: 11px;
|
||||||
.icon {
|
.icon {
|
||||||
@ -160,6 +165,245 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, rgba(0, 0, 0, 1) 100%);
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, rgba(0, 0, 0, 1) 100%);
|
||||||
padding: 17px 22px 13px;
|
padding: 17px 22px 13px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.focus-box {
|
||||||
|
width: 552px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head {
|
||||||
|
width: 100%;
|
||||||
|
height: 36px;
|
||||||
|
background-color: rgba(220, 238, 213, 1);
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
|
||||||
|
.arrows {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
width: 79px;
|
||||||
|
height: 27px;
|
||||||
|
margin: 0 31px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
height: 257px;
|
||||||
|
.info {
|
||||||
|
border-right: 1px solid #ebebeb;
|
||||||
|
width: 193px;
|
||||||
|
padding: 25px 24px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: 72px;
|
||||||
|
height: 21px;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
width: 72px;
|
||||||
|
height: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 11px;
|
||||||
|
|
||||||
|
.professional {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subheading {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
margin-bottom: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.introduce-box {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-top: 13px;
|
||||||
|
|
||||||
|
.introduce-list {
|
||||||
|
padding-left: 49px;
|
||||||
|
.introduce-item {
|
||||||
|
width: 291px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 33px;
|
||||||
|
color: #333333;
|
||||||
|
padding: 10px 0;
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background-color: #000000;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 24px;
|
||||||
|
left: -16px;
|
||||||
|
}
|
||||||
|
&:not(:last-child) {
|
||||||
|
border-bottom: 1px dotted #d7d7d7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-btn {
|
||||||
|
width: 126px;
|
||||||
|
height: 34px;
|
||||||
|
background-color: rgba(211, 81, 16, 1);
|
||||||
|
border-radius: 86px;
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-left: auto;
|
||||||
|
.icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.interview-more {
|
||||||
|
margin-bottom: 102px;
|
||||||
|
|
||||||
|
.case {
|
||||||
|
width: 139px;
|
||||||
|
height: 200px;
|
||||||
|
background-color: rgba(118, 196, 94, 1);
|
||||||
|
border-radius: 10px;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.english {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-box {
|
||||||
|
position: relative;
|
||||||
|
.btn {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
&.left {
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
right: 10px;
|
||||||
|
transform: translateY(-50%) rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrows {
|
||||||
|
width: 13px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper {
|
||||||
|
width: 1052px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.swiper-item {
|
||||||
|
width: 356px;
|
||||||
|
height: 200px;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 10px;
|
||||||
|
// overflow-x: auto;
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 356px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, rgba(0, 0, 0, 1) 100%);
|
||||||
|
padding: 17px 22px 13px;
|
||||||
|
border-radius: 0 0 10px 10px;
|
||||||
.title {
|
.title {
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -179,4 +423,343 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.school-list {
|
||||||
|
margin-bottom: 90px;
|
||||||
|
.school-item {
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: 102px;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
position: relative;
|
||||||
|
margin-right: 45px;
|
||||||
|
z-index: 2;
|
||||||
|
.abbreviation {
|
||||||
|
width: 100px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
background-color: rgba(125, 40, 130, 1);
|
||||||
|
border-radius: 86px;
|
||||||
|
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
|
font-weight: 900;
|
||||||
|
font-style: normal;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 13px;
|
||||||
|
display: inline-flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 130px;
|
||||||
|
height: 62px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 651px;
|
||||||
|
.info {
|
||||||
|
padding-bottom: 24px;
|
||||||
|
border-bottom: 1px dotted #d7d7d7;
|
||||||
|
.img {
|
||||||
|
width: 60px;
|
||||||
|
height: 47px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.english {
|
||||||
|
color: #555555;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: "ArialMT", "Arial", sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.introduce {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
padding-top: 19px;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding-top: 27px;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-bottom: 31px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
width: 1051px;
|
||||||
|
height: 100%;
|
||||||
|
background: -webkit-linear-gradient(0deg, rgba(214, 229, 229, 1) 0%, rgba(246, 242, 234, 1) 100%);
|
||||||
|
background: -moz-linear-gradient(90deg, rgba(214, 229, 229, 1) 0%, rgba(246, 242, 234, 1) 100%);
|
||||||
|
background: linear-gradient(90deg, rgba(214, 229, 229, 1) 0%, rgba(246, 242, 234, 1) 100%);
|
||||||
|
border-radius: 20px;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.year {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
.item {
|
||||||
|
width: 100px;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
position: relative;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
.svg {
|
||||||
|
width: 100px;
|
||||||
|
height: 28px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.pitch {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 650;
|
||||||
|
.svg {
|
||||||
|
fill: #7d2882;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrows {
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 9px;
|
||||||
|
height: 5px;
|
||||||
|
margin-left: 5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.more-box {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-box {
|
||||||
|
display: none;
|
||||||
|
border-radius: 7px;
|
||||||
|
background: #fff;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
top: 32px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.118);
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
height: 10px;
|
||||||
|
display: block;
|
||||||
|
top: 0;
|
||||||
|
position: absolute;
|
||||||
|
transform: translateY(-100%);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.more-item {
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
border-bottom: 1px dotted #d7d7d7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-list {
|
||||||
|
.item {
|
||||||
|
padding: 12px 10px 10px 20px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background-color: #f3f4f8;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 10px;
|
||||||
|
.img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
.label {
|
||||||
|
width: 120px;
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
background-color: rgba(60, 125, 233, 1);
|
||||||
|
border-radius: 3px;
|
||||||
|
position: relative;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: "ArialMT", "Arial", sans-serif;
|
||||||
|
padding: 0 6px;
|
||||||
|
margin-left: 12px;
|
||||||
|
|
||||||
|
.arrows {
|
||||||
|
position: absolute;
|
||||||
|
width: 9px;
|
||||||
|
height: 16px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%) rotate(180deg);
|
||||||
|
left: -4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
justify-content: space-between;
|
||||||
|
.time {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
width: 100px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
background-color: rgba(125, 40, 130, 1);
|
||||||
|
border-radius: 86px;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.arrows {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
margin-left: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.retrospect {
|
||||||
|
padding-bottom: 108px;
|
||||||
|
|
||||||
|
.more-icon {
|
||||||
|
width: 112px;
|
||||||
|
height: 40px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.item {
|
||||||
|
width: 392px;
|
||||||
|
height: 180px;
|
||||||
|
border-radius: 15px;
|
||||||
|
background: linear-gradient(90deg, #d6e5e5 0%, rgba(246, 242, 234, 0.988) 100%);
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
margin-right: 12px;
|
||||||
|
|
||||||
|
&:nth-child(3n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 47px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
.name {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.english {
|
||||||
|
color: #555555;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.year {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.year-item {
|
||||||
|
width: 80px;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
position: relative;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
.svg {
|
||||||
|
width: 80px;
|
||||||
|
height: 24px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.arrows {
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 9px;
|
||||||
|
height: 5px;
|
||||||
|
margin-left: 5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
6
img/arrows-black.svg
Normal file
6
img/arrows-black.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="13px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -532 -743 )">
|
||||||
|
<path d="M 0 10 C 0 10.2150537634409 0.0794723294723291 10.4011579818031 0.238416988416989 10.5583126550868 L 9.5492277992278 19.7642679900744 C 9.70817245817246 19.9214226633581 9.8963963963964 20 10.1138996138996 20 C 10.3314028314028 20 10.5196267696268 19.9214226633581 10.6785714285714 19.7642679900744 L 12.761583011583 17.7047146401985 C 12.9205276705277 17.5475599669148 13 17.3614557485525 13 17.1464019851117 C 13 16.9313482216708 12.9205276705277 16.7452440033085 12.761583011583 16.5880893300248 L 6.0984555984556 10 L 12.761583011583 3.41191066997519 C 12.9205276705277 3.25475599669148 13 3.0686517783292 13 2.85359801488834 C 13 2.63854425144747 12.9205276705277 2.45244003308519 12.761583011583 2.29528535980149 L 10.6785714285714 0.235732009925558 C 10.5196267696268 0.0785773366418518 10.3314028314028 0 10.1138996138996 0 C 9.8963963963964 0 9.70817245817246 0.0785773366418518 9.5492277992278 0.235732009925558 L 0.238416988416989 9.44168734491315 C 0.0794723294723291 9.59884201819686 0 9.78494623655914 0 10 Z " fill-rule="nonzero" fill="#333333" stroke="none" transform="matrix(1 0 0 1 532 743 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
img/arrows-circle-white.svg
Normal file
6
img/arrows-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="12px" height="12px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1506 -2306 )">
|
||||||
|
<path d="M 5.25 10.046875 C 5.38541666666667 10.046875 5.50260416666667 9.99739583333333 5.6015625 9.8984375 L 9.1484375 6.3515625 C 9.24739583333333 6.25260416666667 9.296875 6.13541666666667 9.296875 6 C 9.296875 5.86458333333333 9.24739583333333 5.74739583333333 9.1484375 5.6484375 L 5.6015625 2.1015625 C 5.50260416666667 2.00260416666667 5.38541666666667 1.953125 5.25 1.953125 C 5.11458333333333 1.953125 4.99739583333333 2.00260416666667 4.8984375 2.1015625 L 4.1015625 2.8984375 C 4.00260416666667 2.99739583333333 3.953125 3.11458333333333 3.953125 3.25 C 3.953125 3.38541666666667 4.00260416666667 3.50260416666667 4.1015625 3.6015625 L 6.5 6 L 4.1015625 8.3984375 C 4.00260416666667 8.49739583333333 3.953125 8.61458333333333 3.953125 8.75 C 3.953125 8.88541666666667 4.00260416666667 9.00260416666667 4.1015625 9.1015625 L 4.8984375 9.8984375 C 4.99739583333333 9.99739583333333 5.11458333333333 10.046875 5.25 10.046875 Z M 11.1953125 2.98828125 C 11.7317708333333 3.90755208333333 12 4.91145833333333 12 6 C 12 7.08854166666667 11.7317708333333 8.09244791666667 11.1953125 9.01171875 C 10.6588541666667 9.93098958333333 9.93098958333333 10.6588541666667 9.01171875 11.1953125 C 8.09244791666667 11.7317708333333 7.08854166666667 12 6 12 C 4.91145833333333 12 3.90755208333333 11.7317708333333 2.98828125 11.1953125 C 2.06901041666667 10.6588541666667 1.34114583333333 9.93098958333333 0.8046875 9.01171875 C 0.268229166666667 8.09244791666667 0 7.08854166666667 0 6 C 0 4.91145833333333 0.268229166666667 3.90755208333333 0.8046875 2.98828125 C 1.34114583333333 2.06901041666667 2.06901041666667 1.34114583333333 2.98828125 0.8046875 C 3.90755208333333 0.268229166666666 4.91145833333333 0 6 0 C 7.08854166666667 0 8.09244791666667 0.268229166666666 9.01171875 0.8046875 C 9.93098958333333 1.34114583333333 10.6588541666667 2.06901041666667 11.1953125 2.98828125 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1506 2306 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/arrows-three-black.png
Normal file
BIN
img/arrows-three-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
6
img/arrows-triangle-black.svg
Normal file
6
img/arrows-triangle-black.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="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" fill="#000000" stroke="none" transform="matrix(1 0 0 1 1370 1149 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
img/arrows-triangle-blue.svg
Normal file
6
img/arrows-triangle-blue.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="9px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1121 -1508 )">
|
||||||
|
<path d="M 8.703125 7.296875 C 8.90104166666667 7.49479166666667 9 7.72916666666667 9 8 C 9 8.27083333333333 8.90104166666667 8.50520833333333 8.703125 8.703125 L 1.703125 15.703125 C 1.50520833333333 15.9010416666667 1.27083333333333 16 1 16 C 0.729166666666667 16 0.494791666666667 15.9010416666667 0.296875 15.703125 C 0.0989583333333333 15.5052083333333 0 15.2708333333333 0 15 L 0 1 C 0 0.729166666666664 0.0989583333333333 0.494791666666664 0.296875 0.296875 C 0.494791666666667 0.0989583333333321 0.729166666666667 0 1 0 C 1.27083333333333 0 1.50520833333333 0.0989583333333321 1.703125 0.296875 L 8.703125 7.296875 Z " fill-rule="nonzero" fill="#3c7de9" stroke="none" transform="matrix(1 0 0 1 1121 1508 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/course-icon.png
Normal file
BIN
img/course-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
img/focus-name.png
Normal file
BIN
img/focus-name.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
6
img/malformation-icon.svg
Normal file
6
img/malformation-icon.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="130px" height="62px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -360 -2013 )">
|
||||||
|
<path d="M 0 42 L 19.9826836002801 42 C 8.79999999999995 42 0 50.8000000000002 0 62 L 0 42 Z M 90 42 L 19.983126962615 42 L 0 42 L 0 0 L 110 0 L 110 22 C 110 33.2 101.2 42 90 42 Z M 110 20 C 110 8.80000000000018 118.8 0 129.98268360028 0 L 110 0 L 110 20 Z " fill-rule="nonzero" fill="#f6f6f6" stroke="none" transform="matrix(1 0 0 1 360 2013 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/more-name.png
Normal file
BIN
img/more-name.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
img/ok.png
Normal file
BIN
img/ok.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
6
img/quadrangle-blue.svg
Normal file
6
img/quadrangle-blue.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="72px" height="21px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1016 -372 )">
|
||||||
|
<path d="M 1016 393 L 1022.3 372 L 1088 372 L 1081.7 393 L 1016 393 Z " fill-rule="nonzero" fill="#3c7de9" stroke="none" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/time-icon.png
Normal file
BIN
img/time-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
275
index.html
275
index.html
@ -7,7 +7,7 @@
|
|||||||
<link rel="stylesheet" href="./css/index.css" />
|
<link rel="stylesheet" href="./css/index.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="admission-officer">
|
<div id="admission-officer" class="admission-officer">
|
||||||
<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" />
|
||||||
@ -17,7 +17,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="admission-body">
|
<div class="admission-body">
|
||||||
<div class="interview-box">
|
<div class="interview-box flexflex">
|
||||||
<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">
|
||||||
@ -25,17 +25,282 @@
|
|||||||
<img class="name" src="./img/interview-name.png" />
|
<img class="name" src="./img/interview-name.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<img class="img" src="https://axure-file.lanhuapp.com/md5__d360c330dfaa81d2fad4ef78a5e74bb1.svg">
|
<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" />
|
<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">大标题大标题</div>
|
||||||
|
<div class="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">
|
||||||
|
施林佟
|
||||||
|
<div class="professional">副教授</div>
|
||||||
|
</div>
|
||||||
|
<div class="subheading">香港中文大学（深圳）</div>
|
||||||
|
<div class="subheading">数据科学学院助理院长</div>
|
||||||
|
</div>
|
||||||
|
<div class="introduce-box flexflex">
|
||||||
|
<div class="introduce-list">
|
||||||
|
<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="interview-more flexacenter">
|
||||||
|
<div class="case flexcenter">
|
||||||
|
<div class="name">更多访谈</div>
|
||||||
|
<div class="english">More interviews</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-box" style="">
|
||||||
|
<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="bottom">
|
||||||
<div class="title">大标题大标题</div>
|
<div class="title">大标题大标题</div>
|
||||||
<div class="subtitle">副标题副标题，副标题副标题副标题</div>
|
<div class="subtitle">副标题副标题，副标题副标题副标题</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right"></div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="school-list">
|
||||||
|
<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">香港中文大学</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>
|
||||||
|
<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>
|
||||||
|
更多
|
||||||
|
<img class="arrows" src="./img/arrows-triangle-black.svg" />
|
||||||
|
<div class="more-box">
|
||||||
|
<div class="more-item" v-for="item in 10">2025季</div>
|
||||||
</div>
|
</div>
|
||||||
</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 9">
|
||||||
|
<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>
|
||||||
|
</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",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (swiperRef.value) {
|
||||||
|
swiperRef.value.addEventListener("scroll", checkBtnVisibility);
|
||||||
|
checkBtnVisibility();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (swiperRef.value) swiperRef.value.removeEventListener("scroll", checkBtnVisibility);
|
||||||
|
});
|
||||||
|
|
||||||
|
return { isPlaying, togglePlay, scrollLeft, scrollRight, swiperRef, showLeftBtn, showRightBtn };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// 挂载到页面中的#app元素
|
||||||
|
app.mount("#admission-officer");
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
80
js/vue.cjs.js
Normal file
80
js/vue.cjs.js
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
/**
|
||||||
|
* vue v3.5.17
|
||||||
|
* (c) 2018-present Yuxi (Evan) You and Vue contributors
|
||||||
|
* @license MIT
|
||||||
|
**/
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
Object.defineProperty(exports, '__esModule', { value: true });
|
||||||
|
|
||||||
|
var compilerDom = require('@vue/compiler-dom');
|
||||||
|
var runtimeDom = require('@vue/runtime-dom');
|
||||||
|
var shared = require('@vue/shared');
|
||||||
|
|
||||||
|
function _interopNamespaceDefault(e) {
|
||||||
|
var n = Object.create(null);
|
||||||
|
if (e) {
|
||||||
|
for (var k in e) {
|
||||||
|
n[k] = e[k];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
n.default = e;
|
||||||
|
return Object.freeze(n);
|
||||||
|
}
|
||||||
|
|
||||||
|
var runtimeDom__namespace = /*#__PURE__*/_interopNamespaceDefault(runtimeDom);
|
||||||
|
|
||||||
|
const compileCache = /* @__PURE__ */ Object.create(null);
|
||||||
|
function compileToFunction(template, options) {
|
||||||
|
if (!shared.isString(template)) {
|
||||||
|
if (template.nodeType) {
|
||||||
|
template = template.innerHTML;
|
||||||
|
} else {
|
||||||
|
runtimeDom.warn(`invalid template option: `, template);
|
||||||
|
return shared.NOOP;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const key = shared.genCacheKey(template, options);
|
||||||
|
const cached = compileCache[key];
|
||||||
|
if (cached) {
|
||||||
|
return cached;
|
||||||
|
}
|
||||||
|
if (template[0] === "#") {
|
||||||
|
const el = document.querySelector(template);
|
||||||
|
if (!el) {
|
||||||
|
runtimeDom.warn(`Template element not found or is empty: ${template}`);
|
||||||
|
}
|
||||||
|
template = el ? el.innerHTML : ``;
|
||||||
|
}
|
||||||
|
const opts = shared.extend(
|
||||||
|
{
|
||||||
|
hoistStatic: true,
|
||||||
|
onError: onError ,
|
||||||
|
onWarn: (e) => onError(e, true)
|
||||||
|
},
|
||||||
|
options
|
||||||
|
);
|
||||||
|
if (!opts.isCustomElement && typeof customElements !== "undefined") {
|
||||||
|
opts.isCustomElement = (tag) => !!customElements.get(tag);
|
||||||
|
}
|
||||||
|
const { code } = compilerDom.compile(template, opts);
|
||||||
|
function onError(err, asWarning = false) {
|
||||||
|
const message = asWarning ? err.message : `Template compilation error: ${err.message}`;
|
||||||
|
const codeFrame = err.loc && shared.generateCodeFrame(
|
||||||
|
template,
|
||||||
|
err.loc.start.offset,
|
||||||
|
err.loc.end.offset
|
||||||
|
);
|
||||||
|
runtimeDom.warn(codeFrame ? `${message}
|
||||||
|
${codeFrame}` : message);
|
||||||
|
}
|
||||||
|
const render = new Function("Vue", code)(runtimeDom__namespace);
|
||||||
|
render._rc = true;
|
||||||
|
return compileCache[key] = render;
|
||||||
|
}
|
||||||
|
runtimeDom.registerRuntimeCompiler(compileToFunction);
|
||||||
|
|
||||||
|
exports.compile = compileToFunction;
|
||||||
|
Object.keys(runtimeDom).forEach(function (k) {
|
||||||
|
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = runtimeDom[k];
|
||||||
|
});
|
||||||
25
js/vue.global.min.js
vendored
Normal file
25
js/vue.global.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user