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

feat(招生官页面): 新增宣讲会模块并优化访谈页面样式

Browse Source 
添加宣讲会轮播列表和图片展示区域
优化访谈视频播放区域的交互样式
调整页面布局和间距，增加圆角效果
新增白色箭头图标资源
使用v-cloak防止页面加载时闪烁
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-07-11 19:06:39 +08:00
parent 39073eabdf
commit 9379c50224
4 changed files with 418 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
css/index.css
View File

@@ -146,6 +146,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.admission-officer .admission-body .interview-box .left .content .bottom {
position: absolute;
@@ -254,28 +255,12 @@
}
.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list {
padding-left: 49px;
}
.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list .introduce-item {
width: 291px;
font-size: 14px;
line-height: 33px;
line-height: 53px;
color: #333333;
padding: 10px 0;
position: relative;
}
.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list .introduce-item::after {
content: "";
width: 6px;
height: 6px;
background-color: #000000;
border-radius: 50%;
position: absolute;
top: 24px;
left: -16px;
}
.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list .introduce-item:not(:last-child) {
border-bottom: 1px dotted #d7d7d7;
}
.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .play-btn {
width: 126px;
height: 34px;
@@ -309,22 +294,123 @@
z-index: -1;
}
.admission-officer .admission-body .preach-box .left {
padding-top: 14px;
padding-top: 21px;
padding-left: 20px;
margin-right: 20px;
}
.admission-officer .admission-body .preach-box .left .head {
margin-bottom: 11px;
margin-bottom: 24px;
}
.admission-officer .admission-body .preach-box .left .head .icon {
width: 38px;
height: 50px;
margin-right: 1px;
width: 33px;
height: 22px;
margin-right: 10px;
}
.admission-officer .admission-body .preach-box .left .head .name {
width: 125px;
height: 36px;
}
.admission-officer .admission-body .preach-box .left .box {
width: 444px;
height: 327px;
background-color: #f6f6f6;
border-radius: 10px;
}
.admission-officer .admission-body .preach-box .left .box .indicators {
padding-top: 12px;
padding-bottom: 16px;
}
.admission-officer .admission-body .preach-box .left .box .indicators .item {
width: 6px;
height: 6px;
background-color: #d7d7d7;
border-radius: 67px;
margin: 0 2px;
transition: all 0.3s;
}
.admission-officer .admission-body .preach-box .left .box .indicators .item.pitch {
margin: 0 3px;
width: 20px;
background-color: #d35110;
}
.admission-officer .admission-body .preach-box .left .box .list {
width: 404px;
margin: 0 auto;
}
.admission-officer .admission-body .preach-box .left .box .list .item {
width: 404px;
height: 73px;
padding-left: 18px;
padding-right: 20px;
cursor: pointer;
}
.admission-officer .admission-body .preach-box .left .box .list .item.pitch-last {
border-bottom: 1px dotted transparent !important;
}
.admission-officer .admission-body .preach-box .left .box .list .item.pitch {
background-color: #76c45e;
border-radius: 10px;
border-bottom: 1px dotted #76c45e !important;
}
.admission-officer .admission-body .preach-box .left .box .list .item.pitch .info .name {
color: #fff;
}
.admission-officer .admission-body .preach-box .left .box .list .item.pitch .info .time {
color: #fff;
}
.admission-officer .admission-body .preach-box .left .box .list .item.pitch .icon {
display: block;
}
.admission-officer .admission-body .preach-box .left .box .list .item:not(:last-of-type) {
border-bottom: 1px dotted #d7d7d7;
}
.admission-officer .admission-body .preach-box .left .box .list .item .info .name {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-size: 15px;
color: #000000;
margin-bottom: 4px;
}
.admission-officer .admission-body .preach-box .left .box .list .item .info .time {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
color: #555555;
font-size: 13px;
}
.admission-officer .admission-body .preach-box .left .box .list .item .icon {
display: none;
width: 16px;
height: 16px;
}
.admission-officer .admission-body .preach-box .right {
width: 690px;
height: 293px;
background-color: #fbfbfb;
border-radius: 10px;
margin-top: 115px;
position: relative;
}
.admission-officer .admission-body .preach-box .right .ok {
width: 101px;
height: 127px;
position: absolute;
top: -122px;
right: 45px;
z-index: -1;
}
.admission-officer .admission-body .preach-box .right .img-box {
width: 690px;
height: 293px;
overflow: hidden;
}
.admission-officer .admission-body .preach-box .right .img-box .item {
width: 690px;
height: 293px;
}
.admission-officer .admission-body .preach-box .right .img-box .img {
width: 690px;
height: 293px;
}
.admission-officer .admission-body .interview-more {
margin-bottom: 102px;
}
@@ -336,6 +422,9 @@
flex-direction: column;
margin-right: 10px;
}
.admission-officer .admission-body .interview-more .case.preach {
background-color: #3c7de9;
}
.admission-officer .admission-body .interview-more .case .name {
font-weight: 650;
font-style: normal;
@@ -390,6 +479,7 @@
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .img {
width: 356px;
height: 200px;
border-radius: 10px;
}
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .bottom {
position: absolute;

181
css/index.less
View File

@@ -157,6 +157,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.bottom {
position: absolute;
@@ -277,27 +278,27 @@
.introduce-list {
padding-left: 49px;
.introduce-item {
width: 291px;
font-size: 14px;
line-height: 33px;
color: #333333;
padding: 10px 0;
position: relative;
&::after {
content: "";
width: 6px;
height: 6px;
background-color: #000000;
border-radius: 50%;
position: absolute;
top: 24px;
left: -16px;
}
&:not(:last-child) {
border-bottom: 1px dotted #d7d7d7;
}
}
// .introduce-item {
width: 291px;
font-size: 14px;
line-height: 53px;
color: #333333;
// padding: 10px 0;
position: relative;
// &::after {
// content: "";
// width: 6px;
// height: 6px;
// background-color: #000000;
// border-radius: 50%;
// position: absolute;
// top: 24px;
// left: -16px;
// }
// &:not(:last-child) {
// border-bottom: 1px dotted #d7d7d7;
// }
// }
}
.play-btn {
@@ -338,22 +339,143 @@
z-index: -1;
}
.left {
padding-top: 14px;
padding-top: 21px;
padding-left: 20px;
margin-right: 20px;
.head {
margin-bottom: 11px;
margin-bottom: 24px;
.icon {
width: 38px;
height: 50px;
margin-right: 1px;
width: 33px;
height: 22px;
margin-right: 10px;
}
.name {
width: 125px;
height: 36px;
}
}
.box {
width: 444px;
height: 327px;
background-color: rgba(246, 246, 246, 1);
border-radius: 10px;
.indicators {
padding-top: 12px;
padding-bottom: 16px;
.item {
width: 6px;
height: 6px;
background-color: rgba(215, 215, 215, 1);
border-radius: 67px;
margin: 0 2px;
transition: all 0.3s;
&.pitch {
margin: 0 3px;
width: 20px;
background-color: rgba(211, 81, 16, 1);
}
}
}
.list {
width: 404px;
margin: 0 auto;
.item {
width: 404px;
height: 73px;
padding-left: 18px;
padding-right: 20px;
cursor: pointer;
&.pitch-last {
border-bottom: 1px dotted transparent !important;
}
&.pitch {
background-color: #76c45e;
border-radius: 10px;
border-bottom: 1px dotted #76c45e !important;
.info {
.name {
color: #fff;
}
.time {
color: #fff;
}
}
.icon {
display: block;
}
}
&:not(:last-of-type) {
border-bottom: 1px dotted #d7d7d7;
}
.info {
.name {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-size: 15px;
color: #000000;
margin-bottom: 4px;
}
.time {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
color: #555555;
font-size: 13px;
}
}
.icon {
display: none;
width: 16px;
height: 16px;
}
}
}
}
}
.right {
width: 690px;
height: 293px;
background-color: rgba(251, 251, 251, 1);
border-radius: 10px;
margin-top: 115px;
position: relative;
.ok {
width: 101px;
height: 127px;
position: absolute;
top: -122px;
right: 45px;
z-index: -1;
}
.img-box {
width: 690px;
height: 293px;
overflow: hidden;
.item {
width: 690px;
height: 293px;
}
.img {
width: 690px;
height: 293px;
}
}
}
}
@@ -368,6 +490,10 @@
flex-direction: column;
margin-right: 10px;
&.preach {
background-color: rgba(60, 125, 233, 1);
}
.name {
font-weight: 650;
font-style: normal;
@@ -421,7 +547,7 @@
height: 200px;
position: relative;
border-radius: 10px;
// overflow-x: auto;
&:not(:last-child) {
margin-right: 10px;
}
@@ -429,6 +555,7 @@
.img {
width: 356px;
height: 200px;
border-radius: 10px;
}
.bottom {