feat: 新增宣讲会模块和学校详情弹窗
新增宣讲会模块的HTML结构和样式 添加学校详情弹窗的HTML、CSS和交互逻辑 更新学校列表和回顾部分的样式和交互 新增多个SVG图标资源
This commit is contained in:
DESKTOP-RQ919RC\Pc
parent
a13e64dd4e
commit
39073eabdf
372
css/index.css
372
css/index.css
@ -293,6 +293,38 @@
|
||||
height: 20px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.admission-officer .admission-body .preach-box {
|
||||
width: 100%;
|
||||
height: 435px;
|
||||
margin: 0 auto 22px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.admission-officer .admission-body .preach-box .bj {
|
||||
width: 100%;
|
||||
height: 435px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.admission-officer .admission-body .preach-box .left {
|
||||
padding-top: 14px;
|
||||
padding-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.admission-officer .admission-body .preach-box .left .head {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
.admission-officer .admission-body .preach-box .left .head .icon {
|
||||
width: 38px;
|
||||
height: 50px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.admission-officer .admission-body .preach-box .left .head .name {
|
||||
width: 125px;
|
||||
height: 36px;
|
||||
}
|
||||
.admission-officer .admission-body .interview-more {
|
||||
margin-bottom: 102px;
|
||||
}
|
||||
@ -390,7 +422,8 @@
|
||||
.admission-officer .admission-body .school-list .school-item .left {
|
||||
position: relative;
|
||||
margin-right: 45px;
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
width: 505px;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .left .abbreviation {
|
||||
width: 100px;
|
||||
@ -418,8 +451,12 @@
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .left .img {
|
||||
width: 505px;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right {
|
||||
width: 651px;
|
||||
z-index: 2;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .info {
|
||||
padding-bottom: 24px;
|
||||
@ -438,6 +475,11 @@
|
||||
color: #000000;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .info .name .arrows {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .info .english {
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
@ -505,18 +547,43 @@
|
||||
height: 5px;
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .content .year .item:hover .more-box {
|
||||
.admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold {
|
||||
color: #fff;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold .svg {
|
||||
fill: #76c45e;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold .arrows {
|
||||
fill: #fff;
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold .more-mask {
|
||||
display: block;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .content .year .item.more.unfold .more-box {
|
||||
display: block;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: none;
|
||||
display: none;
|
||||
}
|
||||
.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);
|
||||
top: 28px;
|
||||
left: 0;
|
||||
width: 92px;
|
||||
background-color: #76c45e;
|
||||
border-radius: 0 0 10px 10px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box::after {
|
||||
content: "";
|
||||
@ -531,13 +598,12 @@
|
||||
.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box .more-item {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
}
|
||||
.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;
|
||||
@ -621,20 +687,44 @@
|
||||
}
|
||||
.admission-officer .admission-body .retrospect .list {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 29px;
|
||||
}
|
||||
.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;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.admission-officer .admission-body .retrospect .list .item:not(:nth-last-child(-n + 3)) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.admission-officer .admission-body .retrospect .list .item::after {
|
||||
content: "";
|
||||
background: linear-gradient(90deg, #d6e5e5 0%, rgba(246, 242, 234, 0.976));
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
border-radius: 15px;
|
||||
z-index: -1;
|
||||
}
|
||||
.admission-officer .admission-body .retrospect .list .item:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.admission-officer .admission-body .retrospect .list .item .bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 180px;
|
||||
display: block;
|
||||
z-index: -2;
|
||||
}
|
||||
.admission-officer .admission-body .retrospect .list .item .img {
|
||||
width: 47px;
|
||||
margin-right: 10px;
|
||||
@ -682,3 +772,263 @@
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.admission-officer .admission-body .retrospect .pages .arrows {
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
margin: 0 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.admission-officer .admission-body .retrospect .pages .arrows.rotate180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.admission-officer .admission-body .retrospect .pages .item {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin: 0 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.admission-officer .admission-body .retrospect .pages .item.pitch {
|
||||
background-color: #3c7de9;
|
||||
color: #fff;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
z-index: 100;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school {
|
||||
width: 706px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(90deg, #d6e5e5 0%, #f6f2ea 100%);
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .close {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .head {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
padding-left: 36px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .head .img {
|
||||
height: 47px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .head .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: 4px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .head .info .name .icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .head .info .english {
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content {
|
||||
padding: 29px 13px 31px 36px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .year {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .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 .more-school-mask .more-school .content .year .item .svg {
|
||||
width: 100px;
|
||||
height: 28px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.pitch {
|
||||
color: #ffffff;
|
||||
font-weight: 650;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.pitch .svg {
|
||||
fill: #3c7de9;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .year .item .arrows {
|
||||
transform: translateY(-50%);
|
||||
width: 9px;
|
||||
height: 5px;
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold {
|
||||
color: #fff;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .svg {
|
||||
fill: #76c45e;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .arrows {
|
||||
fill: #fff;
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .more-mask {
|
||||
display: block;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.unfold .more-box {
|
||||
display: block;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .year .item .more-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: none;
|
||||
display: none;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .year .item .more-box {
|
||||
display: none;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 0;
|
||||
width: 92px;
|
||||
background-color: #76c45e;
|
||||
border-radius: 0 0 10px 10px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .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 .more-school-mask .more-school .content .year .item .more-box .more-item {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .year .item .more-box .more-item:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .list {
|
||||
height: 448px;
|
||||
overflow: auto;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .list::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .list::-webkit-scrollbar-thumb {
|
||||
background: #d7d7d7;
|
||||
border-radius: 3.5px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .list::-webkit-scrollbar-thumb:hover {
|
||||
background: #c4c4c4;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .list .item {
|
||||
padding: 12px 10px 10px 20px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .list .item:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .list .item .icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-color: #f3f4f8;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .list .item .icon .img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .list .item .name {
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .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 .more-school-mask .more-school .content .list .item .name .label .arrows {
|
||||
position: absolute;
|
||||
width: 9px;
|
||||
height: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
left: -4px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .list .item .bottom {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .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 .more-school-mask .more-school .content .list .item .bottom .btn {
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background-color: #76c45e;
|
||||
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 .more-school-mask .more-school .content .list .item .bottom .btn .arrows {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
418
css/index.less
418
css/index.less
@ -322,6 +322,41 @@
|
||||
}
|
||||
}
|
||||
|
||||
.preach-box {
|
||||
width: 100%;
|
||||
height: 435px;
|
||||
margin: 0 auto 22px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.bj {
|
||||
width: 100%;
|
||||
height: 435px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.left {
|
||||
padding-top: 14px;
|
||||
padding-left: 20px;
|
||||
margin-right: 20px;
|
||||
|
||||
.head {
|
||||
margin-bottom: 11px;
|
||||
.icon {
|
||||
width: 38px;
|
||||
height: 50px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.name {
|
||||
width: 125px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.interview-more {
|
||||
margin-bottom: 102px;
|
||||
|
||||
@ -433,7 +468,8 @@
|
||||
.left {
|
||||
position: relative;
|
||||
margin-right: 45px;
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
width: 505px;
|
||||
.abbreviation {
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
@ -461,9 +497,13 @@
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.img {
|
||||
width: 505px;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 651px;
|
||||
z-index: 2;
|
||||
.info {
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
@ -480,6 +520,11 @@
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
margin-bottom: 6px;
|
||||
.arrows {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.english {
|
||||
@ -552,22 +597,49 @@
|
||||
height: 5px;
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&.more {
|
||||
&.unfold {
|
||||
color: #fff;
|
||||
.svg {
|
||||
fill: #76c45e;
|
||||
}
|
||||
.arrows {
|
||||
fill: #fff;
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
}
|
||||
.more-mask {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.more-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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);
|
||||
top: 28px;
|
||||
left: 0;
|
||||
width: 92px;
|
||||
background-color: rgba(118, 196, 94, 1);
|
||||
border-radius: 0 0 10px 10px;
|
||||
padding-top: 6px;
|
||||
&::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
@ -581,14 +653,11 @@
|
||||
.more-item {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
|
||||
font-size: 14px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -691,21 +760,47 @@
|
||||
|
||||
.list {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 29px;
|
||||
.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;
|
||||
|
||||
&:not(:nth-last-child(-n + 3)) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&::after {
|
||||
content: "";
|
||||
background: linear-gradient(90deg, #d6e5e5 0%, rgba(246, 242, 234, 0.976));
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
border-radius: 15px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 180px;
|
||||
display: block;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 47px;
|
||||
margin-right: 10px;
|
||||
@ -760,6 +855,301 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pages {
|
||||
.arrows {
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
margin: 0 24px;
|
||||
cursor: pointer;
|
||||
&.rotate180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.item {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin: 0 2px;
|
||||
cursor: pointer;
|
||||
|
||||
&.pitch {
|
||||
background-color: #3c7de9;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-school-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
z-index: 100;
|
||||
|
||||
.more-school {
|
||||
width: 706px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(90deg, rgba(214, 229, 229, 1) 0%, rgba(246, 242, 234, 1) 100%);
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
|
||||
.close {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
padding-left: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
|
||||
.img {
|
||||
height: 47px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.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: 4px;
|
||||
.icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.english {
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 29px 13px 31px 36px;
|
||||
|
||||
.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: #3c7de9;
|
||||
}
|
||||
}
|
||||
|
||||
.arrows {
|
||||
transform: translateY(-50%);
|
||||
width: 9px;
|
||||
height: 5px;
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&.more {
|
||||
&.unfold {
|
||||
color: #fff;
|
||||
.svg {
|
||||
fill: #76c45e;
|
||||
}
|
||||
.arrows {
|
||||
fill: #fff;
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
}
|
||||
.more-mask {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.more-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.more-box {
|
||||
display: none;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 0;
|
||||
width: 92px;
|
||||
background-color: rgba(118, 196, 94, 1);
|
||||
border-radius: 0 0 10px 10px;
|
||||
padding-top: 6px;
|
||||
&::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;
|
||||
font-size: 14px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
height: 448px;
|
||||
overflow: auto;
|
||||
padding-right: 20px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #d7d7d7;
|
||||
border-radius: 3.5px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: #c4c4c4;
|
||||
}
|
||||
|
||||
.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(118, 196, 94, 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
6
img/arrows-circle-black.svg
Normal file
6
img/arrows-circle-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="12px" height="12px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1111 -961 )">
|
||||
<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="#000000" stroke="none" transform="matrix(1 0 0 1 1111 961 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
img/arrows-thin-black.svg
Normal file
6
img/arrows-thin-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="7px" height="12px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1017 -3419 )">
|
||||
<path d="M 6.87972508591065 5.72344689378758 C 6.95990836197022 5.80360721442886 7 5.89579158316633 7 6 C 7 6.10420841683367 6.95990836197022 6.19639278557114 6.87972508591065 6.27655310621242 L 1.27491408934708 11.8797595190381 C 1.19473081328751 11.9599198396794 1.10252004581901 12 0.998281786941581 12 C 0.894043528064147 12 0.801832760595647 11.9599198396794 0.721649484536082 11.8797595190381 L 0.120274914089347 11.2785571142285 C 0.0400916380297824 11.1983967935872 0 11.1062124248497 0 11.002004008016 C 0 10.8977955911824 0.0400916380297824 10.8056112224449 0.120274914089347 10.7254509018036 L 4.84707903780069 6 L 0.120274914089347 1.27454909819639 C 0.0400916380297824 1.19438877755511 0 1.10220440881763 0 0.997995991983968 C 0 0.893787575150299 0.0400916380297824 0.801603206412824 0.120274914089347 0.721442885771542 L 0.721649484536082 0.120240480961924 C 0.801832760595647 0.0400801603206409 0.894043528064147 0 0.998281786941581 0 C 1.10252004581901 0 1.19473081328751 0.0400801603206409 1.27491408934708 0.120240480961924 L 6.87972508591065 5.72344689378758 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 1017 3419 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
img/arrows-thin-gray.svg
Normal file
6
img/arrows-thin-gray.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="7px" height="12px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -896 -3419 )">
|
||||
<path d="M 6.87972508591065 0.721442885771542 C 6.95990836197022 0.801603206412824 7 0.893787575150299 7 0.997995991983968 C 7 1.10220440881763 6.95990836197022 1.19438877755511 6.87972508591065 1.27454909819639 L 2.15292096219931 6 L 6.87972508591065 10.7254509018036 C 6.95990836197022 10.8056112224449 7 10.8977955911824 7 11.002004008016 C 7 11.1062124248497 6.95990836197022 11.1983967935872 6.87972508591065 11.2785571142285 L 6.27835051546392 11.8797595190381 C 6.19816723940435 11.9599198396794 6.10595647193585 12 6.00171821305842 12 C 5.89747995418099 12 5.80526918671249 11.9599198396794 5.72508591065292 11.8797595190381 L 0.120274914089347 6.27655310621242 C 0.0400916380297824 6.19639278557114 0 6.10420841683367 0 6 C 0 5.89579158316633 0.0400916380297824 5.80360721442886 0.120274914089347 5.72344689378758 L 5.72508591065292 0.120240480961924 C 5.80526918671249 0.0400801603206409 5.89747995418099 0 6.00171821305842 0 C 6.10595647193585 0 6.19816723940435 0.0400801603206409 6.27835051546392 0.120240480961924 L 6.87972508591065 0.721442885771542 Z " fill-rule="nonzero" fill="#d7d7d7" stroke="none" transform="matrix(1 0 0 1 896 3419 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
img/cross.png
Normal file
BIN
img/cross.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 489 B |
BIN
img/preach-icon.png
Normal file
BIN
img/preach-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
img/preach-name.png
Normal file
BIN
img/preach-name.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
96
index.html
96
index.html
@ -67,7 +67,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="interview-more flexacenter">
|
||||
<div class="preach-box flexflex">
|
||||
<img class="bj" src="./img/interview-bj.svg" />
|
||||
<div class="left">
|
||||
<div class="head flexacenter">
|
||||
<img class="icon" src="./img/interview-icon.png" />
|
||||
<img class="name" src="./img/interview-name.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="interview-more flexacenter" style="display: none">
|
||||
<div class="case flexcenter">
|
||||
<div class="name">更多访谈</div>
|
||||
<div class="english">More interviews</div>
|
||||
@ -90,7 +99,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="school-list">
|
||||
<div class="school-list" style="display: none">
|
||||
<div class="school-item flexflex">
|
||||
<div class="left">
|
||||
<div class="abbreviation flexcenter" :style="{ color: dynamicColor }">CUHK</div>
|
||||
@ -101,7 +110,10 @@
|
||||
<div class="info flexacenter">
|
||||
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkCLRSBaR7ec6NYmTHuZYPMKxNHJQuwf83NTE2" />
|
||||
<div class="">
|
||||
<div class="name">香港中文大学</div>
|
||||
<div class="name">
|
||||
香港中文大学
|
||||
<img class="arrows" src="./img/arrows-circle-black.svg" />
|
||||
</div>
|
||||
<div class="english">The Chinese University of Hong Kong</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -128,12 +140,16 @@
|
||||
</svg>
|
||||
2026季
|
||||
</div>
|
||||
<!-- unfold -->
|
||||
<div class="item more">
|
||||
<svg class="svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="28px" fill="#ffffff">
|
||||
<g transform="matrix(1 0 0 1 -910 -1138 )"><path d="M 910 1166 L 918.4 1138 L 1010 1138 L 1001.6 1166 L 910 1166 Z " fill-rule="nonzero" stroke="none" /></g>
|
||||
</svg>
|
||||
更多
|
||||
<img class="arrows" src="./img/arrows-triangle-black.svg" />
|
||||
<svg class="arrows" fill="#000000" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="5px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1370 -1149 )"><path d="M 8.8330078125 0.164930555555556 C 8.9443359375 0.274884259259259 9 0.405092592592591 9 0.555555555555556 C 9 0.706018518518518 8.9443359375 0.836226851851851 8.8330078125 0.946180555555556 L 4.8955078125 4.83506944444444 C 4.7841796875 4.94502314814815 4.65234375 5 4.5 5 C 4.34765625 5 4.2158203125 4.94502314814815 4.1044921875 4.83506944444444 L 0.1669921875 0.946180555555556 C 0.0556640625 0.836226851851851 0 0.706018518518518 0 0.555555555555556 C 0 0.405092592592591 0.0556640625 0.274884259259259 0.1669921875 0.164930555555556 C 0.2783203125 0.0549768518518512 0.41015625 0 0.5625 0 L 8.4375 0 C 8.58984375 0 8.7216796875 0.0549768518518512 8.8330078125 0.164930555555556 Z " fill-rule="nonzero" stroke="none" transform="matrix(1 0 0 1 1370 1149 )" /></g>
|
||||
</svg>
|
||||
<div class="more-mask"></div>
|
||||
<div class="more-box">
|
||||
<div class="more-item" v-for="item in 10">2025季</div>
|
||||
</div>
|
||||
@ -193,7 +209,8 @@
|
||||
<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">
|
||||
<div class="item flexflex" v-for="item in 6">
|
||||
<img class="bg" src="https://oss.x-php.com/school/J6BSwE-VfCFkDLVSBaR7ec6NYmSUtp5bNP9NHJQuwf83NTE2" />
|
||||
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkDLVSBaR7ec6NYmSUtp5bNP9NHJQuwf83NTE2" />
|
||||
<div class="right">
|
||||
<div class="name">岭南大学</div>
|
||||
@ -234,6 +251,75 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pages flexcenter">
|
||||
<img class="arrows gray" src="./img/arrows-thin-gray.svg" />
|
||||
<img class="arrows rotate180" src="./img/arrows-thin-black.svg" />
|
||||
<div class="item flexcenter" :class="{'pitch': item == 1}" v-for="item in 3">{{ item }}</div>
|
||||
<img class="arrows gray rotate180" src="./img/arrows-thin-gray.svg" />
|
||||
<img class="arrows" src="./img/arrows-thin-black.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="more-school-mask flexcenter" style="display: none">
|
||||
<div class="more-school">
|
||||
<img class="close" src="./img/cross.png" />
|
||||
<div class="head flexacenter">
|
||||
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkDLVSBaR7ec6NYmSUtp5bNP9NHJQuwf83NTE2" />
|
||||
<div class="info">
|
||||
<div class="name flexacenter">
|
||||
岭南大学
|
||||
<img class="icon" src="./img/arrows-circle-black.svg" />
|
||||
</div>
|
||||
<div class="english">The Hong Kong Polytechnic University</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="year flexacenter">
|
||||
<div class="item pitch">
|
||||
<svg class="svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="28px" fill="#3c7de9">
|
||||
<g transform="matrix(1 0 0 1 -910 -1138 )"><path d="M 910 1166 L 918.4 1138 L 1010 1138 L 1001.6 1166 L 910 1166 Z " fill-rule="nonzero" stroke="none" /></g>
|
||||
</svg>
|
||||
2026季
|
||||
</div>
|
||||
<!-- unfold -->
|
||||
<div class="item more">
|
||||
<svg class="svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="28px" fill="#ffffff">
|
||||
<g transform="matrix(1 0 0 1 -910 -1138 )"><path d="M 910 1166 L 918.4 1138 L 1010 1138 L 1001.6 1166 L 910 1166 Z " fill-rule="nonzero" stroke="none" /></g>
|
||||
</svg>
|
||||
更多
|
||||
<svg class="arrows" fill="#000000" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="5px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1370 -1149 )"><path d="M 8.8330078125 0.164930555555556 C 8.9443359375 0.274884259259259 9 0.405092592592591 9 0.555555555555556 C 9 0.706018518518518 8.9443359375 0.836226851851851 8.8330078125 0.946180555555556 L 4.8955078125 4.83506944444444 C 4.7841796875 4.94502314814815 4.65234375 5 4.5 5 C 4.34765625 5 4.2158203125 4.94502314814815 4.1044921875 4.83506944444444 L 0.1669921875 0.946180555555556 C 0.0556640625 0.836226851851851 0 0.706018518518518 0 0.555555555555556 C 0 0.405092592592591 0.0556640625 0.274884259259259 0.1669921875 0.164930555555556 C 0.2783203125 0.0549768518518512 0.41015625 0 0.5625 0 L 8.4375 0 C 8.58984375 0 8.7216796875 0.0549768518518512 8.8330078125 0.164930555555556 Z " fill-rule="nonzero" stroke="none" transform="matrix(1 0 0 1 1370 1149 )" /></g>
|
||||
</svg>
|
||||
<div class="more-mask"></div>
|
||||
<div class="more-box">
|
||||
<div class="more-item" v-for="item in 10">2025季</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item" v-for="item in 10">
|
||||
<div class="name flexacenter">
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="./img/course-icon.png" />
|
||||
</div>
|
||||
公共政策社会科学硕士课程
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="time flexacenter">
|
||||
<div class="icon flexcenter">
|
||||
<img class="img" src="./img/time-icon.png" />
|
||||
</div>
|
||||
长期答疑
|
||||
</div>
|
||||
<div class="btn flexcenter">
|
||||
了解详情
|
||||
<img class="arrows" src="./img/arrows-circle-white.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user