no message
This commit is contained in:
DESKTOP-RQ919RC\Pc
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
713
H5/h5.css
713
H5/h5.css
@@ -1,16 +1,27 @@
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #f6f6f6;
|
||||
overscroll-behavior: contain;
|
||||
/* 防止滚动溢出时的回弹效果 */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
/* 保持iOS上的平滑滚动 */
|
||||
}
|
||||
.admission-officer {
|
||||
min-height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.admission-officer .one-line-display {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.admission-officer * {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
scroll-behavior: smooth;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
}
|
||||
.admission-officer .flexflex {
|
||||
display: flex;
|
||||
@@ -33,7 +44,703 @@ body {
|
||||
.admission-officer a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.admission-officer .aaaa {
|
||||
width: 10rem;
|
||||
height: 6.25rem;
|
||||
.admission-officer .header-box {
|
||||
width: 100vw;
|
||||
height: 4.7rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 1.16rem;
|
||||
}
|
||||
.admission-officer .header-box .header-bj {
|
||||
width: 10rem;
|
||||
height: 4.52rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.admission-officer .header-box .bj-green {
|
||||
width: 10rem;
|
||||
height: 4.62rem;
|
||||
position: absolute;
|
||||
top: 0.08rem;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.admission-officer .header-box .header-img {
|
||||
height: 0.92rem;
|
||||
position: absolute;
|
||||
bottom: 0.98rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 3;
|
||||
width: 4.46rem;
|
||||
}
|
||||
.admission-officer .list .item {
|
||||
width: 9rem;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.admission-officer .list .item:not(:last-of-type) {
|
||||
margin: 0 auto 1.2rem;
|
||||
}
|
||||
.admission-officer .list .item .aa {
|
||||
fill: #0170fe;
|
||||
}
|
||||
.admission-officer .list .item .header {
|
||||
margin-bottom: 0.24rem;
|
||||
position: relative;
|
||||
}
|
||||
.admission-officer .list .item .header .img {
|
||||
width: 9rem;
|
||||
border-radius: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
.admission-officer .list .item .header .abbreviation {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 2rem;
|
||||
height: 0.96rem;
|
||||
}
|
||||
.admission-officer .list .item .header .abbreviation .school-other {
|
||||
position: absolute;
|
||||
top: -0.0133rem;
|
||||
left: -0.0133rem;
|
||||
width: 2rem;
|
||||
height: 0.96rem;
|
||||
z-index: 1;
|
||||
}
|
||||
.admission-officer .list .item .header .abbreviation .text {
|
||||
width: 1.56rem;
|
||||
height: 0.52rem;
|
||||
line-height: 0.52rem;
|
||||
text-align: center;
|
||||
background-color: #7d2882;
|
||||
border-radius: 1.72rem;
|
||||
font-family: "Arial", "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
color: #ffffff;
|
||||
font-size: 0.26rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.admission-officer .list .item .header .header-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
min-height: 1.28rem;
|
||||
background-color: rgba(255, 255, 255, 0.92941176);
|
||||
border-radius: 0.2rem;
|
||||
width: max-content;
|
||||
padding: 0.14rem 0.18rem;
|
||||
max-width: 95%;
|
||||
min-height: 0.78rem;
|
||||
}
|
||||
.admission-officer .list .item .header .header-content .school-img {
|
||||
height: 0.78rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
.admission-officer .list .item .header .header-content .school-name {
|
||||
font-size: 0.48rem;
|
||||
margin-bottom: 0.08rem;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 0.36rem;
|
||||
color: #000000;
|
||||
}
|
||||
.admission-officer .list .item .header .header-content .school-name .arrow {
|
||||
margin-left: 0.1333rem;
|
||||
width: 0.24rem;
|
||||
height: 0.24rem;
|
||||
}
|
||||
.admission-officer .list .item .header .header-content .school-english {
|
||||
font-size: 0.26rem;
|
||||
color: #555555;
|
||||
}
|
||||
.admission-officer .list .item .introduction {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 0.28rem;
|
||||
color: #555555;
|
||||
line-height: 0.48rem;
|
||||
margin-bottom: 0.44rem;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.admission-officer .list .item .year {
|
||||
background-color: #ebebeb;
|
||||
border-radius: 0.16rem;
|
||||
display: inline-flex;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.admission-officer .list .item .year .year-item {
|
||||
width: 1.8rem;
|
||||
height: 0.56rem;
|
||||
line-height: 0.56rem;
|
||||
text-align: center;
|
||||
font-size: 0.28rem;
|
||||
color: #333333;
|
||||
border-radius: 0.16rem;
|
||||
position: relative;
|
||||
}
|
||||
.admission-officer .list .item .year .year-item.pitch {
|
||||
background-color: #7d2882;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
color: #ffffff;
|
||||
}
|
||||
.admission-officer .list .item .year .year-item .triangle {
|
||||
margin-left: 0.19rem;
|
||||
transition: all 0.3s;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 0.09rem solid transparent;
|
||||
border-right: 0.09rem solid transparent;
|
||||
border-top: 0.1rem solid #000;
|
||||
}
|
||||
.admission-officer .list .item .year .year-item.more.pitch .triangle {
|
||||
border-top: 0.1rem solid #fff;
|
||||
}
|
||||
.admission-officer .list .item .year .year-item.more.unfold {
|
||||
color: #fff;
|
||||
background-color: #76c45e;
|
||||
border-radius: 0.16rem 0.16rem 0 0;
|
||||
}
|
||||
.admission-officer .list .item .year .year-item.more.unfold .triangle {
|
||||
border-top: 0.1rem solid #fff;
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
}
|
||||
.admission-officer .list .item .year .year-item.more.unfold .more-mask,
|
||||
.admission-officer .list .item .year .year-item.more.unfold .more-box {
|
||||
display: block;
|
||||
}
|
||||
.admission-officer .list .item .year .year-item .more-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
z-index: 102;
|
||||
}
|
||||
.admission-officer .list .item .year .year-item .more-box {
|
||||
display: none;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
top: 0.56rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #76c45e;
|
||||
border-radius: 0 0 0.2rem 0.2rem;
|
||||
z-index: 102;
|
||||
}
|
||||
.admission-officer .list .item .year .year-item .more-box::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 0.1333rem;
|
||||
display: block;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
transform: translateY(-100%);
|
||||
z-index: -1;
|
||||
}
|
||||
.admission-officer .list .item .year .year-item .more-box .more-item {
|
||||
height: 0.6667rem;
|
||||
line-height: 0.6667rem;
|
||||
font-size: 0.28rem;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
}
|
||||
.admission-officer .list .item .title-box {
|
||||
margin-bottom: 0.36rem;
|
||||
}
|
||||
.admission-officer .list .item .title-box .title-item {
|
||||
margin-bottom: 0.2rem;
|
||||
background-color: #ffffff;
|
||||
flex-direction: column;
|
||||
width: 9rem;
|
||||
border: 0.0133rem solid #f2f2f2;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.24rem 0.2rem;
|
||||
}
|
||||
.admission-officer .list .item .title-box .title-item .icon {
|
||||
background-color: #f3f4f8;
|
||||
border-radius: 50%;
|
||||
width: 0.56rem;
|
||||
height: 0.56rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
.admission-officer .list .item .title-box .title-item .icon .img {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
}
|
||||
.admission-officer .list .item .title-box .title-item .name {
|
||||
width: 100%;
|
||||
font-size: 0.32rem;
|
||||
color: #333333;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.admission-officer .list .item .title-box .title-item .name .text {
|
||||
line-height: 0.56rem;
|
||||
display: inline;
|
||||
}
|
||||
.admission-officer .list .item .title-box .title-item .name .label {
|
||||
height: 0.52rem;
|
||||
line-height: 0.52rem;
|
||||
background-color: #3c7de9;
|
||||
border-radius: 0.06rem;
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
font-size: 0.26rem;
|
||||
font-family: "ArialMT", "Arial", sans-serif;
|
||||
padding: 0 0.12rem;
|
||||
margin-left: 0.24rem;
|
||||
display: inline-flex;
|
||||
}
|
||||
.admission-officer .list .item .title-box .title-item .name .label .arrows {
|
||||
width: 0.18rem;
|
||||
height: 0.32rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
left: -0.08rem;
|
||||
}
|
||||
.admission-officer .list .item .title-box .title-item .bottom {
|
||||
width: 100%;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 0.28rem;
|
||||
color: #000000;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.admission-officer .list .item .title-box .title-item .bottom .btn {
|
||||
width: 1.4rem;
|
||||
height: 0.64rem;
|
||||
background-color: #7d2882;
|
||||
font-size: 0.28rem;
|
||||
border-radius: 1.72rem;
|
||||
font-family: "Arial", "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
color: #ffffff;
|
||||
}
|
||||
.admission-officer .list .item .title-box .title-item .bottom .btn .arrows {
|
||||
width: 0.24rem;
|
||||
height: 0.24rem;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
.admission-officer .end {
|
||||
font-size: 0.26rem;
|
||||
color: #d7d7d7;
|
||||
text-align: center;
|
||||
padding-top: 0.2667rem;
|
||||
padding-bottom: 0.6667rem;
|
||||
}
|
||||
.admission-officer .interview-box {
|
||||
width: 9rem;
|
||||
height: 5.06rem;
|
||||
position: relative;
|
||||
margin: 0 auto 0.54rem;
|
||||
z-index: 1;
|
||||
}
|
||||
.admission-officer .interview-box .head {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 3.48rem;
|
||||
height: 1.24rem;
|
||||
}
|
||||
.admission-officer .interview-box .head .icon {
|
||||
width: 0.54rem;
|
||||
height: 0.72rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.admission-officer .interview-box .head .name {
|
||||
width: 2.22rem;
|
||||
height: 0.64rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.6rem;
|
||||
z-index: 2;
|
||||
}
|
||||
.admission-officer .interview-box .head .head-bj {
|
||||
position: absolute;
|
||||
top: -0.0133rem;
|
||||
left: -0.0133rem;
|
||||
width: 3.48rem;
|
||||
height: 1.24rem;
|
||||
z-index: 1;
|
||||
}
|
||||
.admission-officer .interview-box .ok {
|
||||
position: absolute;
|
||||
top: -1.96rem;
|
||||
right: 0.38rem;
|
||||
width: 1.58rem;
|
||||
height: 2rem;
|
||||
z-index: -1;
|
||||
}
|
||||
.admission-officer .interview-box .img {
|
||||
width: 9rem;
|
||||
height: 5.06rem;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
.admission-officer .interview-box .bottom {
|
||||
position: absolute;
|
||||
color: #ffffff;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 9rem;
|
||||
height: 1.4rem;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, #000000 100%);
|
||||
border-radius: 0 0 0.2rem 0.2rem;
|
||||
padding: 0.24rem 0.44rem 0.22rem;
|
||||
}
|
||||
.admission-officer .interview-box .bottom .title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 0.36rem;
|
||||
margin-bottom: 0.04rem;
|
||||
}
|
||||
.admission-officer .interview-box .bottom .subtitle {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 0.28rem;
|
||||
}
|
||||
.admission-officer .interview-box .play {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.admission-officer .interview-list {
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 1.2rem;
|
||||
overflow: auto;
|
||||
}
|
||||
.admission-officer .interview-list .item {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
width: 3.92rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
.admission-officer .interview-list .item:first-of-type {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.admission-officer .interview-list .item:last-of-type {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.admission-officer .interview-list .item .img {
|
||||
width: 3.92rem;
|
||||
height: 2.2rem;
|
||||
border-radius: 0.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.admission-officer .interview-list .item .title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 0.32rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
.admission-officer .interview-list .item .subtitle {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 0.26rem;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.admission-officer .preach-box {
|
||||
width: 9rem;
|
||||
position: relative;
|
||||
margin: 0 auto 0.54rem;
|
||||
background: linear-gradient(123.15792388deg, #dfeaea 0%, #fbf9f5 100%);
|
||||
border: 0.0133rem solid #e8efee;
|
||||
border-radius: 0.4rem;
|
||||
padding-top: 1.04rem;
|
||||
}
|
||||
.admission-officer .preach-box .head {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 3.68rem;
|
||||
height: 1.24rem;
|
||||
}
|
||||
.admission-officer .preach-box .head .icon {
|
||||
width: 0.52rem;
|
||||
height: 0.36rem;
|
||||
position: absolute;
|
||||
top: 0.16rem;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.admission-officer .preach-box .head .name {
|
||||
width: 2.22rem;
|
||||
height: 0.64rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.68rem;
|
||||
z-index: 2;
|
||||
}
|
||||
.admission-officer .preach-box .head .head-bj {
|
||||
position: absolute;
|
||||
top: -0.0133rem;
|
||||
left: -0.0133rem;
|
||||
width: 3.68rem;
|
||||
height: 1.24rem;
|
||||
z-index: 1;
|
||||
}
|
||||
.admission-officer .preach-box .swiper {
|
||||
width: 9rem;
|
||||
margin: 0 auto 0.2933rem;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.admission-officer .preach-box .swiper::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.admission-officer .preach-box .swiper .swiper-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 9rem;
|
||||
}
|
||||
.admission-officer .preach-box .swiper .swiper-item .item {
|
||||
height: 1.36rem;
|
||||
padding-top: 0.3rem;
|
||||
padding-left: 0.8rem;
|
||||
padding-right: 0.6rem;
|
||||
position: relative;
|
||||
}
|
||||
.admission-officer .preach-box .swiper .swiper-item .item:not(:last-of-type) {
|
||||
border-bottom: 0.0133rem dotted #d7d7d7;
|
||||
}
|
||||
.admission-officer .preach-box .swiper .swiper-item .item .title {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 0.32rem;
|
||||
color: #000000;
|
||||
margin-bottom: 0.06rem;
|
||||
position: relative;
|
||||
width: 9rem;
|
||||
}
|
||||
.admission-officer .preach-box .swiper .swiper-item .item .title::after {
|
||||
content: "";
|
||||
width: 0.16rem;
|
||||
height: 0.16rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -0.44rem;
|
||||
transform: translateY(-50%);
|
||||
background-color: #76c45e;
|
||||
border: 0.0133rem solid #406f30;
|
||||
}
|
||||
.admission-officer .preach-box .swiper .swiper-item .item .title .text {
|
||||
max-width: 7.0133rem;
|
||||
}
|
||||
.admission-officer .preach-box .swiper .swiper-item .item .title .arrow {
|
||||
width: 0.24rem;
|
||||
height: 0.24rem;
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
.admission-officer .preach-box .swiper .swiper-item .item .time {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #555555;
|
||||
font-size: 0.26rem;
|
||||
}
|
||||
.admission-officer .preach-box .indicator {
|
||||
margin: 0 auto 0.42rem;
|
||||
}
|
||||
.admission-officer .preach-box .indicator .item {
|
||||
width: 0.2rem;
|
||||
height: 0.08rem;
|
||||
background-color: #d7d7d7;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
.admission-officer .preach-box .indicator .item.pitch {
|
||||
background: #d35110;
|
||||
}
|
||||
.admission-officer .preach-box .indicator .item:not(:last-of-type) {
|
||||
margin-right: 0.08rem;
|
||||
}
|
||||
.admission-officer .paly-box-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 100;
|
||||
}
|
||||
.admission-officer .paly-box-mask .svg {
|
||||
width: 1.3333rem;
|
||||
height: 1.3333rem;
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.admission-officer .paly-box-mask .paly-box .close {
|
||||
position: absolute;
|
||||
top: -0.8667rem;
|
||||
right: 0;
|
||||
width: 0.8667rem;
|
||||
height: 0.8667rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.admission-officer .paly-box-mask .paly-box .paly-video {
|
||||
position: absolute;
|
||||
top: -7rem;
|
||||
left: 0;
|
||||
width: 94vw;
|
||||
height: 6.3333rem;
|
||||
background-color: #000000;
|
||||
border-radius: 0.1333rem;
|
||||
}
|
||||
.admission-officer .paly-box-mask .paly-box .paly-video .art-video-player,
|
||||
.admission-officer .paly-box-mask .paly-box .paly-video video {
|
||||
border-radius: 0.1333rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
padding: 0 0 0 15px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #3c7de9;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.page-header .logo {
|
||||
display: inline-flex;
|
||||
width: 116px;
|
||||
height: 30px;
|
||||
background-size: 100%;
|
||||
}
|
||||
.page-header .r {
|
||||
display: inline-flex;
|
||||
background: url(../img/menu.png) no-repeat center;
|
||||
background-size: 19px 15px;
|
||||
width: 49px;
|
||||
height: 60px;
|
||||
}
|
||||
.nav-container {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
}
|
||||
.nav-container .page-header {
|
||||
position: relative;
|
||||
}
|
||||
.nav-container .r {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.nav-container .nav-list {
|
||||
padding: 0 23px;
|
||||
width: 100vw;
|
||||
height: calc(100vh - 60px);
|
||||
background: #fff;
|
||||
position: relative;
|
||||
left: 100vw;
|
||||
}
|
||||
.nav-container .nav-list .item {
|
||||
border-bottom: 1px solid #ededed;
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
.nav-container .nav-list .item a {
|
||||
color: inherit;
|
||||
height: 66px;
|
||||
display: flex;
|
||||
padding-left: 17px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.nav-container .nav-list .item .arrow {
|
||||
display: inline-flex;
|
||||
flex: 0 0 7px;
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
background: url(../img/arrow-grey.png) no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.nav-container .nav-list .item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.nav-container .nav-list .active {
|
||||
color: #0170fe;
|
||||
font-weight: bold;
|
||||
}
|
||||
.nav-container .nav-list .active .arrow {
|
||||
background: #ffffff;
|
||||
}
|
||||
.nav-container .nav-list .active:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 25px;
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background-color: #0170fe;
|
||||
}
|
||||
.nav-container .close {
|
||||
position: fixed;
|
||||
left: calc(50vw - 25px);
|
||||
bottom: 50px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: url(../img/helloofficer-close.png) no-repeat center;
|
||||
background-size: 30px 30px;
|
||||
}
|
||||
.active-nav {
|
||||
display: block;
|
||||
}
|
||||
.active-nav .nav-list {
|
||||
animation: toleft 0.3s forwards;
|
||||
}
|
||||
@keyframes toleft {
|
||||
0% {
|
||||
left: 100vw;
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
469
H5/h5.html
469
H5/h5.html
@@ -2,37 +2,472 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="divport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./h5.css" />
|
||||
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
(function (doc, win) {
|
||||
var docEl = doc.documentElement,
|
||||
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
|
||||
recalc = function () {
|
||||
var clientWidth = docEl.clientWidth;
|
||||
if (!clientWidth) return;
|
||||
if (clientWidth >= 750) {
|
||||
docEl.style.fontSize = "100px";
|
||||
(function (window, document) {
|
||||
var sizeUI = 750; // 定义设计图尺寸
|
||||
var remBase = 75; // 定义基准值
|
||||
var docEl = document.documentElement;
|
||||
var bodyEl = document.querySelector("body");
|
||||
|
||||
setRemUnit();
|
||||
|
||||
window.addEventListener("resize", setRemUnit);
|
||||
window.addEventListener("pageshow", function (e) {
|
||||
if (e.persisted) setRemUnit();
|
||||
});
|
||||
|
||||
function setRemUnit() {
|
||||
var docFontSize = (docEl.clientWidth / sizeUI) * remBase;
|
||||
docEl.style.fontSize = docFontSize + "px";
|
||||
bodyEl.style.fontSize = 16 / docFontSize + "rem";
|
||||
handleRemAdapt();
|
||||
}
|
||||
|
||||
function handleRemAdapt() {
|
||||
var currentFontSize = parseInt(docEl.style.fontSize);
|
||||
var temp = currentFontSize;
|
||||
for (var i = 0; i < 100; i++) {
|
||||
var realFontSize = parseInt(window.getComputedStyle(docEl).fontSize);
|
||||
var differ = realFontSize - currentFontSize;
|
||||
if (Math.abs(differ) >= 1) {
|
||||
if (differ > 0) temp--;
|
||||
else temp++;
|
||||
docEl.style.fontSize = temp + "px";
|
||||
} else {
|
||||
docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
|
||||
break;
|
||||
}
|
||||
};
|
||||
if (!doc.addEventListener) return;
|
||||
win.addEventListener(resizeEvt, recalc, false);
|
||||
doc.addEventListener("DOMContentLoaded", recalc, false);
|
||||
})(document, window);
|
||||
}
|
||||
}
|
||||
})(window, document);
|
||||
</script>
|
||||
|
||||
<div id="admission-officer" class="admission-officer" v-cloak>
|
||||
<div id="admission-officer" class="admission-officer" v-cloak class="container">
|
||||
<div class="header-box">
|
||||
<img class="header-bj" src="https://app.gter.net/image/miniApp/offer/admission-bj-blue.svg" />
|
||||
<img class="bj-green" src="https://app.gter.net/image/miniApp/offer/admission-bj-green.svg" />
|
||||
<img class="header-img" src="https://app.gter.net/image/miniApp/offer/admission-text.png" />
|
||||
</div>
|
||||
|
||||
<div class="aaaa"></div>
|
||||
<div class="interview-box" v-if="interviewData" @click="getVideoUrl(interviewData.token)">
|
||||
<div class="head">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/interview-icon.png" />
|
||||
<img class="name" src="https://app.gter.net/image/miniApp/offer/interview-name.png" />
|
||||
<img class="head-bj" src="https://app.gter.net/image/miniApp/offer/interview-other.svg" />
|
||||
</div>
|
||||
<img class="ok" src="https://app.gter.net/image/miniApp/offer/duck-ok.png" />
|
||||
<img class="img" :src="interviewData.video_cover" />
|
||||
<img class="play" src="https://app.gter.net/image/miniApp/offer/play-btn.svg" />
|
||||
<div class="bottom">
|
||||
<div class="title one-line-display">{{ interviewData.title }}</div>
|
||||
<div class="subtitle one-line-display">{{ interviewData.subtitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="interview-list" scroll-x v-if="interviewList.length > 0">
|
||||
<div class="item" v-for="(item,index) in interviewList" :key="index" @click="getVideoUrl(item.token)">
|
||||
<img class="img" :src="item.video_cover" />
|
||||
<div class="title one-line-display">{{ item.title }}</div>
|
||||
<div class="subtitle one-line-display">{{ item.subtitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preach-box" ref="swiperBox" v-if="preachList.length != 0" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
|
||||
<div class="head">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/preach-icon.png" />
|
||||
<img class="name" src="https://app.gter.net/image/miniApp/offer/preach-name.png" />
|
||||
<img class="head-bj" src="https://app.gter.net/image/miniApp/offer/preach-other.svg" />
|
||||
</div>
|
||||
<div class="swiper flexflex" ref="swiperBoxSwiper" :style="{'height': preachList[0].length >= 3 ? '4.08rem' : preachList[0].length * 1.36 + 'rem'}">
|
||||
<div class="swiper-item" v-for="(item,index) in preachList" :key="index">
|
||||
<a class="item" v-for="(it,index) in item" :key="index" :href="it.link_url" target="_blank">
|
||||
<div class="title flexacenter">
|
||||
<div class="one-line-display text">{{ it.title }}</div>
|
||||
<img class="arrow" src="https://app.gter.net/image/miniApp/offer/arrow-return.svg" />
|
||||
</div>
|
||||
<div class="time one-line-display">{{ it.lecture_time || '长期答疑' }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="indicator flexcenter" v-if="preachList.length > 1">
|
||||
<div class="item" :class="{'pitch': swiperCurrent == index}" v-for="(item,index) in preachList" :key="index"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list" v-if="admissionList.length != 0">
|
||||
<div class="item" v-for="(item,index) in admissionList" :key="item.id">
|
||||
<div class="header">
|
||||
<div class="abbreviation">
|
||||
<img class="school-other" src="https://app.gter.net/image/miniApp/offer/school-other.svg" />
|
||||
<div class="text" :style="{backgroundColor: item.color }">{{ item.abbreviation }}</div>
|
||||
</div>
|
||||
<img class="img" :src="item.banner" />
|
||||
<div class="header-content flexacenter">
|
||||
<img class="school-img" :src="item.logo" />
|
||||
<div class="flex1">
|
||||
<div class="school-name">
|
||||
{{ item.name }}
|
||||
<img class="arrow" src="https://app.gter.net/image/miniApp/offer/arrow-return.svg" />
|
||||
</div>
|
||||
<div class="school-english">{{ item.enname }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="introduction">{{ item.introduction }}</div>
|
||||
<div class="year flexacenter">
|
||||
<div class="year-item flexcenter" v-for="(it,i) in item.yList" :key="i" :class="{'pitch': item.pitch == it}" :style="{backgroundColor: item.pitch == it ? item.color : '' }" @click.stop="cutSchoolYear(index,it)">{{ it }}季</div>
|
||||
|
||||
<div class="year-item more flexcenter" :class="[{'unfold': item.state,'pitch': item.isPitchMore}]" :style="{backgroundColor: item.state || item.isPitchMore ? item.color : '' }" @click="openSchoolYearState(index)" v-if="item.yListMore.length > 0">
|
||||
<text>{{ item.isPitchMore ? item.pitch + '季' : '更多' }}</text>
|
||||
<div class="triangle"></div>
|
||||
<div class="more-mask" @click.stop="closeSchoolYearState(index)"></div>
|
||||
<div class="more-box" :style="{backgroundColor: item.color }">
|
||||
<div class="more-item" v-for="(it,i) in item.yListMore" :key="i" @click.stop="selectSchoolYearState(index,it)">{{ it }}季</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title-box">
|
||||
<div class="title-item flexcenter" v-for="(it,index) in item.list[item.pitch]" :key="index">
|
||||
<div class="name flexflex">
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="https://app.gter.net/image/miniApp/offer/course-icon.png" />
|
||||
</div>
|
||||
<div class="text flex1">
|
||||
{{ it.title }}
|
||||
<div class="label" v-if="it.tag">
|
||||
<img class="arrows" src="https://app.gter.net/image/miniApp/offer/arrows-triangle-blue.svg" />
|
||||
{{ it.tag }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="time flexacenter">
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="https://app.gter.net/image/miniApp/offer/time-icon.png" />
|
||||
</div>
|
||||
{{ it.date || '长期答疑' }}
|
||||
</div>
|
||||
<a class="btn flexcenter" :href="it.url" target="_blank" :style="{backgroundColor: item.color }">详情 <img class="arrows" src="https://app.gter.net/image/miniApp/offer/arrows-circle-white.svg" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="end">- End -</div>
|
||||
|
||||
<div class="paly-box-mask flexcenter" v-if="palyState">
|
||||
<div class="paly-box" @click.stop="">
|
||||
<img class="close" src="../img/cross-white.svg" @click="closePalyState" />
|
||||
<div class="paly-video"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 引入了 vue3 js 创建 vue3 实例 -->
|
||||
<script src="../js/vue.global.min.js"></script>
|
||||
<script src="../js/artplayer.js"></script>
|
||||
|
||||
<script>
|
||||
// 创建Vue3实例
|
||||
const { createApp, onMounted, ref, onUnmounted, reactive } = Vue;
|
||||
const admissionApp = createApp({
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
init();
|
||||
getBannerList();
|
||||
getAdmissionLists();
|
||||
});
|
||||
|
||||
let interviewData = ref({}); // 模式一 的第一个访谈
|
||||
|
||||
let interviewList = ref({}); // 访谈 列表
|
||||
|
||||
const init = () => {
|
||||
fetchData("/v1/admissionsOfficer/interview").then((res) => {
|
||||
if (res.code != 200) return;
|
||||
let data = res.data || [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
title: "岭南大学保险",
|
||||
subtitle: "香港商学院硕士都去卖保险了",
|
||||
video_cover: "https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-Z0kdXrqqsgFptxhcq_cQnrlIKYkXFcXBq_D-81qNDQyOQ~~",
|
||||
sid: 350 + i,
|
||||
name: "岭南大学",
|
||||
enname: "Lingnan University",
|
||||
admission_officer_name: "施林佟",
|
||||
admission_officer_rank: "副教授",
|
||||
admission_officer_position: "数据科学学院助理院长",
|
||||
focus_of_this_issue: "寄托建立了具有公信力的品牌评价系统\n致力打造一个华人区最专业的留学交流平台\n成为一个寄托或关于梦想的垂直门户网站",
|
||||
istop: 1,
|
||||
token: "D6zdTJ2cMaKd0g6nFqsa1JR5scupqIIg5Wuab33kATaY-myKGtBtHiygo4F5z8iY_Le6VEcmblBwOvlbiqvh1pyXKaET8hp8OsXbY1fFQwRKjq42OWQ3" + i,
|
||||
});
|
||||
}
|
||||
|
||||
let target = null;
|
||||
const topItems = data.filter((item) => item.istop === 1);
|
||||
|
||||
if (topItems.length > 0) target = topItems[Math.floor(Math.random() * topItems.length)];
|
||||
|
||||
data = data.filter((item) => item.token !== target.token);
|
||||
|
||||
interviewData.value = target;
|
||||
interviewList.value = data || [];
|
||||
});
|
||||
};
|
||||
|
||||
let palyState = ref(false); // 播放弹窗状态
|
||||
|
||||
let art = null; // 播放器实例
|
||||
|
||||
const getVideoUrl = (token) => {
|
||||
fetchData(`/v1/admissionsOfficer/videoUrl?token=${token}`).then((res) => {
|
||||
palyState.value = true;
|
||||
setTimeout(() => {
|
||||
art = new Artplayer({
|
||||
container: ".paly-box-mask .paly-box .paly-video",
|
||||
url: res.data.url,
|
||||
autoplay: true,
|
||||
fullscreen: true,
|
||||
});
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
|
||||
const closePalyState = () => {
|
||||
art?.pause();
|
||||
art?.destroy();
|
||||
palyState.value = false;
|
||||
};
|
||||
|
||||
let admissionList = ref([]); // 学校 招生官 列表
|
||||
|
||||
// 获取 院校 招生官 列表
|
||||
const getAdmissionLists = () => {
|
||||
fetchData(`/v1/admissionsOfficer/lists`).then((res) => {
|
||||
if (res.code != 200) return;
|
||||
const data = res.data;
|
||||
let target = data.data || [];
|
||||
|
||||
target.forEach((item) => {
|
||||
let year = [];
|
||||
let obj = {};
|
||||
item.articles.forEach((e) => {
|
||||
year.push(e.year);
|
||||
obj[e.year] = e.data;
|
||||
});
|
||||
|
||||
item["pitch"] = year[0];
|
||||
item["yList"] = year.slice(0, 4);
|
||||
item["yListMore"] = year.slice(4);
|
||||
item["list"] = obj;
|
||||
});
|
||||
|
||||
admissionList.value = target;
|
||||
});
|
||||
};
|
||||
|
||||
// 切换招生官 院校 的 年份
|
||||
const cutSchoolYear = (index, year) => {
|
||||
admissionList.value[index]["pitch"] = year;
|
||||
};
|
||||
|
||||
// 点击 招生官 年份 更多弹窗
|
||||
const openSchoolYearState = (index) => (admissionList.value[index]["state"] = true);
|
||||
|
||||
// 选择 招生官 年份 更多弹窗
|
||||
const selectSchoolYearState = (index, year) => {
|
||||
admissionList.value[index]["pitch"] = year;
|
||||
admissionList.value[index]["isPitchMore"] = true;
|
||||
admissionList.value[index]["state"] = false;
|
||||
};
|
||||
|
||||
// 关闭 招生官 年份 更多弹窗
|
||||
const closeSchoolYearState = (index) => (admissionList.value[index]["state"] = false);
|
||||
|
||||
let moreSchoolSid = ref(0); // 选中 学校 sid
|
||||
let moreSchoolData = ref({}); // 学校信息
|
||||
let moreSchoolList = ref([]); // 年份下 列表 数据
|
||||
let moreSchoolPitch = ref(0); // 选中年份
|
||||
let moreSchoolYList = ref([]); // 年份 列表
|
||||
let moreSchoolYMList = ref([]); // 年份 更多
|
||||
const openMoreSchool = (sid) => {
|
||||
fetchData(`/v1/admissionsOfficer/articles?sid=${sid}`).then((res) => {
|
||||
if (res.code != 200) return;
|
||||
const data = res.data || {};
|
||||
moreSchoolData.value = data.school;
|
||||
let target = data.data || [];
|
||||
console.log("target", target);
|
||||
let obj = {};
|
||||
let yearList = [];
|
||||
target.forEach((element) => {
|
||||
obj[element.year] = element.data;
|
||||
yearList.push(element.year);
|
||||
});
|
||||
|
||||
moreSchoolYList.value = yearList.slice(0, 4);
|
||||
moreSchoolYMList.value = yearList.slice(4);
|
||||
moreSchoolPitch.value = yearList[0];
|
||||
moreSchoolList.value = obj;
|
||||
moreSchoolSid.value = sid;
|
||||
document.body.style.overflow = "hidden";
|
||||
});
|
||||
};
|
||||
|
||||
let moreYearState = ref(false);
|
||||
|
||||
const openMoreYearState = () => {
|
||||
moreYearState.value = true;
|
||||
};
|
||||
|
||||
const closeMoreSchool = () => {
|
||||
moreSchoolSid.value = 0;
|
||||
document.body.style.overflow = "auto";
|
||||
};
|
||||
|
||||
onUnmounted(() => {});
|
||||
|
||||
let preachList = ref([]); // 宣讲会 列表
|
||||
let preachIndex = ref(0); // 宣讲会 下标
|
||||
let preachI = ref(0); // 宣讲会 下标
|
||||
let preachTimer = null;
|
||||
|
||||
let preachInterval = 3; // 每页 4 条
|
||||
|
||||
const getBannerList = () => {
|
||||
fetchData(`/v1/admissionsOfficer/banner`).then((res) => {
|
||||
if (res.code != 200) return;
|
||||
|
||||
let data = res.data;
|
||||
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
id: i + 20,
|
||||
title: "香港中文大学 | 美国西北大学双硕士学位课程",
|
||||
lecture_time: "2025-07-12 00:00:00",
|
||||
image_url: "https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-Z0rfHjqqsgFptxhT66SWgrlI64uMxcfWaHf9cJWpdxZDnzZ5RLrizQ0Mjk~",
|
||||
image_id: 977797,
|
||||
sort: 1,
|
||||
link_url: "https://www.baidu.com",
|
||||
status: 1,
|
||||
created_at: "2025-07-11 16:59:10",
|
||||
updated_at: "2025-07-11 17:09:33",
|
||||
});
|
||||
}
|
||||
|
||||
// data.forEach((element, index) => (element["id"] = index + 1));
|
||||
data.forEach((element) => (element["lecture_time"] = timeformat(element["lecture_time"])));
|
||||
|
||||
let target = [];
|
||||
for (let i = 0; i < data.length; i += preachInterval) {
|
||||
target.push(data.slice(i, i + preachInterval));
|
||||
}
|
||||
|
||||
preachList.value = target;
|
||||
|
||||
preachListTimeout();
|
||||
});
|
||||
};
|
||||
|
||||
const timeformat = (time) => {
|
||||
time = time.replaceAll("-", "/"); // 修改格式
|
||||
let result = "";
|
||||
var datetime = new Date(time);
|
||||
var Nyear = datetime.getFullYear();
|
||||
var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
|
||||
var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
|
||||
var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
|
||||
var Nmin = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
|
||||
result = `${Nyear}年${Nmonth}月${Ndate}日 ${Nhour}:${Nmin}`;
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const swiperBox = ref(null);
|
||||
const swiperBoxSwiper = ref(null);
|
||||
let swiperCurrent = ref(0); // 宣讲会 下标
|
||||
let preachListTimer = null; // 宣讲会 定时器
|
||||
const preachListTimeout = () => {
|
||||
preachListTimer = setTimeout(() => {
|
||||
const width = swiperBox.value.scrollWidth;
|
||||
swiperCurrent.value++;
|
||||
|
||||
if (swiperCurrent.value >= preachList.value.length) swiperCurrent.value = 0;
|
||||
|
||||
swiperBoxSwiper.value.scrollTo({
|
||||
left: width * swiperCurrent.value,
|
||||
behavior: "smooth",
|
||||
});
|
||||
|
||||
preachListTimeout();
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
// const touchStartX = ref(0);
|
||||
// const touchStartY = ref(0);
|
||||
|
||||
const handleTouchStart = (e) => {
|
||||
clearTimeout(preachListTimer);
|
||||
// touchStartX.value = e.touches[0].clientX;
|
||||
// touchStartY.value = e.touches[0].clientY;
|
||||
};
|
||||
|
||||
const handleTouchEnd = (e) => {
|
||||
preachListTimeout();
|
||||
|
||||
// const touchEndX = e.changedTouches[0].clientX;
|
||||
// const touchEndY = e.changedTouches[0].clientY;
|
||||
// const diffX = touchEndX - touchStartX.value;
|
||||
// const diffY = touchEndY - touchStartY.value;
|
||||
// console.log(`Touch moved X: ${diffX}, Y: ${diffY}`);
|
||||
};
|
||||
|
||||
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 { swiperBoxSwiper, swiperBox, swiperCurrent, closePalyState, getVideoUrl, palyState, interviewList, closeSchoolYearState, selectSchoolYearState, openSchoolYearState, cutSchoolYear, admissionList, moreSchoolYMList, openMoreYearState, moreYearState, moreSchoolPitch, moreSchoolYList, moreSchoolList, moreSchoolData, moreSchoolSid, closeMoreSchool, openMoreSchool, interviewData, preachList, preachIndex, preachI, handleTouchStart, handleTouchEnd };
|
||||
},
|
||||
});
|
||||
// 挂载到页面中的#app元素
|
||||
admissionApp.mount("#admission-officer");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
839
H5/h5.less
839
H5/h5.less
@@ -1,16 +1,26 @@
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
overscroll-behavior: contain; /* 防止滚动溢出时的回弹效果 */
|
||||
-webkit-overflow-scrolling: touch; /* 保持iOS上的平滑滚动 */
|
||||
}
|
||||
.admission-officer {
|
||||
min-height: 100vh;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
|
||||
.one-line-display {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
scroll-behavior: smooth;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.flexflex {
|
||||
@@ -40,8 +50,831 @@ body {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.aaaa {
|
||||
width: 10rem;
|
||||
height: 6.25rem;
|
||||
.header-box {
|
||||
width: 100vw;
|
||||
// height: 6.5333rem;
|
||||
height: 4.7rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 1.16rem;
|
||||
|
||||
.header-bj {
|
||||
width: 10rem;
|
||||
height: 4.52rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.bj-green {
|
||||
width: 10rem;
|
||||
height: 4.62rem;
|
||||
position: absolute;
|
||||
top: 0.08rem;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header-img {
|
||||
// width: 3.56rem;
|
||||
height: 0.92rem;
|
||||
position: absolute;
|
||||
bottom: 0.98rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 3;
|
||||
width: 4.46rem;
|
||||
// height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
.item {
|
||||
width: 9rem;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin: 0 auto 1.2rem;
|
||||
}
|
||||
|
||||
.aa {
|
||||
fill: #0170fe;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 0.24rem;
|
||||
position: relative;
|
||||
|
||||
.img {
|
||||
width: 9rem;
|
||||
// height: .8rem;
|
||||
border-radius: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.abbreviation {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 2rem;
|
||||
height: 0.96rem;
|
||||
|
||||
.school-other {
|
||||
position: absolute;
|
||||
top: -0.0133rem;
|
||||
left: -0.0133rem;
|
||||
width: 2rem;
|
||||
height: 0.96rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 1.56rem;
|
||||
height: 0.52rem;
|
||||
line-height: 0.52rem;
|
||||
text-align: center;
|
||||
background-color: rgba(125, 40, 130, 1);
|
||||
border-radius: 1.72rem;
|
||||
font-family: "Arial", "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
color: #ffffff;
|
||||
font-size: 0.26rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.header-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
min-height: 1.28rem;
|
||||
background-color: rgba(255, 255, 255, 0.929411764705882);
|
||||
border-radius: 0.2rem;
|
||||
width: max-content;
|
||||
padding: 0.14rem 0.18rem;
|
||||
max-width: 95%;
|
||||
min-height: 0.78rem;
|
||||
|
||||
.school-img {
|
||||
// width: 1rem;
|
||||
height: 0.78rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
.school-name {
|
||||
font-weight: 650;
|
||||
font-size: 0.48rem;
|
||||
color: #000000;
|
||||
// line-height: 0.48rem;
|
||||
margin-bottom: 0.08rem;
|
||||
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 0.36rem;
|
||||
color: #000000;
|
||||
|
||||
.arrow {
|
||||
margin-left: 0.1333rem;
|
||||
width: 0.24rem;
|
||||
height: 0.24rem;
|
||||
// transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.school-english {
|
||||
font-size: 0.26rem;
|
||||
color: #555555;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.introduction {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
// font-size: .28rem;
|
||||
font-size: 0.28rem;
|
||||
color: #555555;
|
||||
line-height: 0.48rem;
|
||||
margin-bottom: 0.44rem;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.year {
|
||||
background-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 0.16rem;
|
||||
display: inline-flex;
|
||||
margin-bottom: 0.4rem;
|
||||
|
||||
.year-item {
|
||||
width: 1.8rem;
|
||||
height: 0.56rem;
|
||||
line-height: 0.56rem;
|
||||
text-align: center;
|
||||
font-size: 0.28rem;
|
||||
color: #333333;
|
||||
border-radius: 0.16rem;
|
||||
position: relative;
|
||||
|
||||
&.pitch {
|
||||
background-color: rgba(125, 40, 130, 1);
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
// width: .18rem;
|
||||
// height: .1rem;
|
||||
margin-left: 0.19rem;
|
||||
transition: all 0.3s;
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 0.09rem solid transparent;
|
||||
border-right: 0.09rem solid transparent;
|
||||
border-top: 0.1rem solid #000;
|
||||
}
|
||||
|
||||
&.more {
|
||||
&.pitch {
|
||||
.triangle {
|
||||
border-top: 0.1rem solid #fff;
|
||||
}
|
||||
}
|
||||
&.unfold {
|
||||
color: #fff;
|
||||
background-color: #76c45e;
|
||||
border-radius: 0.16rem 0.16rem 0 0;
|
||||
|
||||
.triangle {
|
||||
border-top: 0.1rem solid #fff;
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
}
|
||||
|
||||
.more-mask,
|
||||
.more-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
// background-color: #0170fe;
|
||||
z-index: 102;
|
||||
}
|
||||
|
||||
.more-box {
|
||||
display: none;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
top: 0.56rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(118, 196, 94, 1);
|
||||
border-radius: 0 0 0.2rem 0.2rem;
|
||||
z-index: 102;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 0.1333rem;
|
||||
display: block;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
transform: translateY(-100%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.more-item {
|
||||
height: 0.6667rem;
|
||||
line-height: 0.6667rem;
|
||||
font-size: 0.28rem;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-box {
|
||||
margin-bottom: 0.36rem;
|
||||
|
||||
.title-item {
|
||||
margin-bottom: 0.2rem;
|
||||
background-color: #ffffff;
|
||||
flex-direction: column;
|
||||
width: 9rem;
|
||||
border: 0.0133rem solid rgba(242, 242, 242, 1);
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.24rem 0.2rem;
|
||||
|
||||
.icon {
|
||||
background-color: #f3f4f8;
|
||||
border-radius: 50%;
|
||||
width: 0.56rem;
|
||||
height: 0.56rem;
|
||||
margin-right: 0.2rem;
|
||||
|
||||
.img {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
font-size: 0.32rem;
|
||||
color: #333333;
|
||||
margin-bottom: 0.2rem;
|
||||
|
||||
.text {
|
||||
line-height: 0.56rem;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.label {
|
||||
height: 0.52rem;
|
||||
line-height: 0.52rem;
|
||||
background-color: #3c7de9;
|
||||
border-radius: 0.06rem;
|
||||
position: relative;
|
||||
color: #ffffff;
|
||||
font-size: 0.26rem;
|
||||
font-family: "ArialMT", "Arial", sans-serif;
|
||||
padding: 0 0.12rem;
|
||||
margin-left: 0.24rem;
|
||||
display: inline-flex;
|
||||
|
||||
.arrows {
|
||||
width: 0.18rem;
|
||||
height: 0.32rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
left: -0.08rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 0.28rem;
|
||||
color: #000000;
|
||||
justify-content: space-between;
|
||||
|
||||
.btn {
|
||||
width: 1.4rem;
|
||||
height: 0.64rem;
|
||||
background-color: rgba(125, 40, 130, 1);
|
||||
font-size: 0.28rem;
|
||||
color: #ffffff;
|
||||
border-radius: 1.72rem;
|
||||
font-family: "Arial", "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
color: #ffffff;
|
||||
|
||||
.arrows {
|
||||
width: 0.24rem;
|
||||
height: 0.24rem;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.end {
|
||||
font-size: 0.26rem;
|
||||
color: #d7d7d7;
|
||||
text-align: center;
|
||||
padding-top: 0.2667rem;
|
||||
padding-bottom: 0.6667rem;
|
||||
}
|
||||
|
||||
.interview-box {
|
||||
width: 9rem;
|
||||
height: 5.06rem;
|
||||
position: relative;
|
||||
margin: 0 auto 0.54rem;
|
||||
z-index: 1;
|
||||
|
||||
.head {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 3.48rem;
|
||||
height: 1.24rem;
|
||||
|
||||
.icon {
|
||||
width: 0.54rem;
|
||||
height: 0.72rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 2.22rem;
|
||||
height: 0.64rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.6rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.head-bj {
|
||||
position: absolute;
|
||||
top: -0.0133rem;
|
||||
left: -0.0133rem;
|
||||
width: 3.48rem;
|
||||
height: 1.24rem;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ok {
|
||||
position: absolute;
|
||||
top: -1.96rem;
|
||||
right: 0.38rem;
|
||||
width: 1.58rem;
|
||||
height: 2rem;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 9rem;
|
||||
height: 5.06rem;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
color: #ffffff;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 9rem;
|
||||
height: 1.4rem;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, #000000 100%);
|
||||
border-radius: 0 0 0.2rem 0.2rem;
|
||||
padding: 0.24rem 0.44rem 0.22rem;
|
||||
|
||||
.title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 0.36rem;
|
||||
margin-bottom: 0.04rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 0.28rem;
|
||||
}
|
||||
}
|
||||
|
||||
.play {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.interview-list {
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 1.2rem;
|
||||
overflow: auto;
|
||||
|
||||
.item {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
width: 3.92rem;
|
||||
margin-right: 0.2rem;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 3.92rem;
|
||||
height: 2.2rem;
|
||||
border-radius: 0.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 0.32rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 0.26rem;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preach-box {
|
||||
width: 9rem;
|
||||
// height: 5.88rem;
|
||||
position: relative;
|
||||
margin: 0 auto 0.54rem;
|
||||
background: linear-gradient(123.157923884672deg, rgba(223, 234, 234, 1) 0%, rgba(251, 249, 245, 1) 100%);
|
||||
border: 0.0133rem solid rgba(232, 239, 238, 1);
|
||||
border-radius: 0.4rem;
|
||||
padding-top: 1.04rem;
|
||||
// padding-bottom: .42rem;
|
||||
|
||||
.head {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 3.68rem;
|
||||
height: 1.24rem;
|
||||
|
||||
.icon {
|
||||
width: 0.52rem;
|
||||
height: 0.36rem;
|
||||
position: absolute;
|
||||
top: 0.16rem;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 2.22rem;
|
||||
height: 0.64rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.68rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.head-bj {
|
||||
position: absolute;
|
||||
top: -0.0133rem;
|
||||
left: -0.0133rem;
|
||||
width: 3.68rem;
|
||||
height: 1.24rem;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 9rem;
|
||||
// width: 7.8rem;
|
||||
// margin: 0 .6rem .2933rem .8rem;
|
||||
margin: 0 auto 0.2933rem;
|
||||
// flex-direction: column;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
// 隐藏滚动条
|
||||
overflow-x: auto;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 9rem;
|
||||
|
||||
.item {
|
||||
height: 1.36rem;
|
||||
padding-top: 0.3rem;
|
||||
padding-left: 0.8rem;
|
||||
padding-right: 0.6rem;
|
||||
position: relative;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 0.0133rem dotted #d7d7d7;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 0.32rem;
|
||||
color: #000000;
|
||||
margin-bottom: 0.06rem;
|
||||
position: relative;
|
||||
width: 9rem;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 0.16rem;
|
||||
height: 0.16rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -0.44rem;
|
||||
transform: translateY(-50%);
|
||||
background-color: #76c45e;
|
||||
border: 0.0133rem solid #406f30;
|
||||
}
|
||||
|
||||
.text {
|
||||
max-width: 7.0133rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 0.24rem;
|
||||
height: 0.24rem;
|
||||
margin-left: 0.2rem;
|
||||
// transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #555555;
|
||||
font-size: 0.26rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
margin: 0 auto 0.42rem;
|
||||
|
||||
.item {
|
||||
width: 0.2rem;
|
||||
height: 0.08rem;
|
||||
background-color: rgba(215, 215, 215, 1);
|
||||
border-radius: 0.4rem;
|
||||
|
||||
&.pitch {
|
||||
background: rgba(211, 81, 16, 1);
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 0.08rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.paly-box-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 100;
|
||||
.svg {
|
||||
width: 1.3333rem;
|
||||
height: 1.3333rem;
|
||||
// 写个动画 无效旋转
|
||||
animation: rotate 1s linear infinite;
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.paly-box {
|
||||
// position: relative;
|
||||
.close {
|
||||
position: absolute;
|
||||
top: -0.8667rem;
|
||||
right: 0;
|
||||
width: 0.8667rem;
|
||||
height: 0.8667rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.paly-video {
|
||||
position: absolute;
|
||||
top: -7rem;
|
||||
left: 0;
|
||||
width: 94vw;
|
||||
height: 6.3333rem;
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
border-radius: 0.1333rem;
|
||||
.art-video-player,
|
||||
video {
|
||||
border-radius: 0.1333rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
padding: 0 0 0 15px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #3c7de9;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
|
||||
.logo {
|
||||
display: inline-flex;
|
||||
width: 116px;
|
||||
height: 30px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.r {
|
||||
display: inline-flex;
|
||||
background: url(../img/menu.png) no-repeat center;
|
||||
background-size: 19px 15px;
|
||||
width: 49px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
|
||||
.page-header {
|
||||
position: relative;
|
||||
.logo {
|
||||
// background: url(../img/helloofficer-logo.png) no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.r {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
padding: 0 23px;
|
||||
width: 100vw;
|
||||
height: calc(100vh - 60px);
|
||||
background: #fff;
|
||||
position: relative;
|
||||
left: 100vw;
|
||||
.item {
|
||||
border-bottom: 1px solid #ededed;
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
height: 66px;
|
||||
display: flex;
|
||||
padding-left: 17px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.arrow {
|
||||
display: inline-flex;
|
||||
flex: 0 0 7px;
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
background: url(../img/arrow-grey.png) no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #0170fe;
|
||||
font-weight: bold;
|
||||
.arrow {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 25px;
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background-color: #0170fe;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
position: fixed;
|
||||
left: calc(50vw - 25px);
|
||||
bottom: 50px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: url(../img/helloofficer-close.png) no-repeat center;
|
||||
background-size: 30px 30px;
|
||||
}
|
||||
}
|
||||
.active-nav {
|
||||
display: block;
|
||||
}
|
||||
.active-nav .nav-list {
|
||||
animation: toleft 0.3s forwards;
|
||||
}
|
||||
@keyframes toleft {
|
||||
0% {
|
||||
left: 100vw;
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ body {
|
||||
min-height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
min-width: 1200px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
}
|
||||
.admission-officer * {
|
||||
padding: 0;
|
||||
@@ -603,7 +604,6 @@ body {
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .info .name .arrows {
|
||||
width: 12px;
|
||||
|
||||
@@ -7,6 +7,7 @@ body {
|
||||
min-height: 100vh;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
min-width: 1200px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@@ -675,7 +676,6 @@ body {
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
.arrows {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
10
img/1.svg
Normal file
10
img/1.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="50" viewBox="0 0 1920 50">
|
||||
<rect width="1920" height="50" fill="transparent" />
|
||||
<path d="
|
||||
M0,0
|
||||
C0,0 420.344,18.463 978.286,18.258
|
||||
C1495.534,18.068 1920,0 1920,0
|
||||
C1920,0 1495.534,28.068 978.286,28.258
|
||||
C420.344,28.463 0,10 0,0
|
||||
" fill="#76c45e" stroke="#76c45e" stroke-width="1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 377 B |
26
index.html
26
index.html
@@ -4,12 +4,17 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<title>Document</title>
|
||||
<title>5222</title>
|
||||
<link rel="stylesheet" href="./css/index.css" />
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.svg1 {
|
||||
width: 100%;
|
||||
min-width: 1920px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -22,6 +27,7 @@
|
||||
<img class="admission-head-2" src="/img/admission-head-gray.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<img class="svg1" style="position: relative; margin-top: -22px" src="./img/1.svg" />
|
||||
<div class="admission-body">
|
||||
<div class="interview-box flexflex" v-if="theme == 1">
|
||||
<img class="bj" src="./img/interview-bj.svg" />
|
||||
@@ -288,20 +294,20 @@
|
||||
<div class="item" v-for="item in moreSchoolList[moreSchoolPitch]">
|
||||
<div class="name flexacenter">
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="./img/course-icon.png" />
|
||||
<img class="img" src="../img/course-icon.png" />
|
||||
</div>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="time flexacenter">
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="./img/time-icon.png" />
|
||||
<img class="img" src="../img/time-icon.png" />
|
||||
</div>
|
||||
{{ item.date || '长期答疑'}}
|
||||
</div>
|
||||
<a class="btn flexcenter" :href="item.url" target="_blank">
|
||||
了解详情
|
||||
<img class="arrows" src="./img/arrows-circle-white.svg" />
|
||||
<img class="arrows" src="../img/arrows-circle-white.svg" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -312,7 +318,7 @@
|
||||
|
||||
<div class="paly-box-mask flexcenter" v-if="palyState">
|
||||
<div class="paly-box">
|
||||
<img class="close" src="./img/cross-white.svg" @click="closePalyState" />
|
||||
<img class="close" src="../img/cross-white.svg" @click="closePalyState" />
|
||||
<div class="paly-video"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -453,15 +459,21 @@
|
||||
};
|
||||
|
||||
// 切换招生官 院校 的 年份
|
||||
const cutSchoolYear = (index, year) => (admissionList.value[index]["pitch"] = year);
|
||||
const cutSchoolYear = (index, year) => {
|
||||
admissionList.value[index]["pitch"] = year;
|
||||
admissionList.value[index]["isPitchMore"] = false;
|
||||
};
|
||||
|
||||
// 点击 招生官 年份 更多弹窗
|
||||
const openSchoolYearState = (index) => (admissionList.value[index]["state"] = true);
|
||||
const openSchoolYearState = (index) => {
|
||||
admissionList.value[index]["state"] = true;
|
||||
};
|
||||
|
||||
// 选择 招生官 年份 更多弹窗
|
||||
const selectSchoolYearState = (index, year) => {
|
||||
admissionList.value[index]["state"] = false;
|
||||
admissionList.value[index]["pitch"] = year;
|
||||
admissionList.value[index]["pitch"] = true;
|
||||
};
|
||||
|
||||
// 关闭 招生官 年份 更多弹窗
|
||||
|
||||
Reference in New Issue
Block a user