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

feat(样式): 调整招生官页面样式及新增视频展示区域

Browse Source 
- 修改招生官页面多个元素的样式，包括颜色、字体大小和间距
- 新增视频展示区域及相关交互元素样式
- 调整左侧信息栏布局和滚动条样式
- 优化响应式设计，修改图片宽度等细节
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-07-23 18:54:02 +08:00
parent 693a0465ff
commit 8084a177e5
4 changed files with 284 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
H5/h5.css
View File

@@ -497,8 +497,8 @@ body {
width: 9rem;
position: relative;
margin: 1.2rem auto 0;
background: linear-gradient(123.15792388deg, #dfeaea 0%, #fbf9f5 100%);
border: 0.0133rem solid #e8efee;
background: linear-gradient(123.15792388deg, #dfeaea 0%, #f1eee5 100%);
border: 0.0133rem solid #dfefed;
border-radius: 0.4rem;
padding-top: 1.04rem;
}
@@ -564,7 +564,7 @@ body {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.32rem;
font-size: 0.3467rem;
color: #000000;
margin-bottom: 0.06rem;
position: relative;
@@ -595,7 +595,7 @@ body {
font-weight: 400;
font-style: normal;
color: #555555;
font-size: 0.26rem;
font-size: 0.2933rem;
}
.admission-officer .preach-box .indicator {
margin: 0 auto 0.42rem;

9
H5/h5.less
View File

@@ -584,8 +584,9 @@ body {
// height: 5.88rem;
position: relative;
margin: 1.2rem auto 0;
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);
// background: linear-gradient(123.157923884672deg, rgba(223, 234, 234, 1) 0%, rgba(251, 249, 245, 1) 100%);
background: linear-gradient(123.15792388deg, #dfeaea 0%, #f1eee5 100%);
border: 0.0133rem solid #dfefed;
border-radius: 0.4rem;
padding-top: 1.04rem;
// padding-bottom: .42rem;
@@ -662,7 +663,7 @@ body {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.32rem;
font-size: .3467rem;
color: #000000;
margin-bottom: 0.06rem;
position: relative;
@@ -698,7 +699,7 @@ body {
font-weight: 400;
font-style: normal;
color: #555555;
font-size: 0.26rem;
font-size: .2933rem;
}
}
}

139
css/index.css
View File

@@ -324,21 +324,20 @@ body {
z-index: -1;
}
.admission-officer .admission-body .preach-box .left {
padding-top: 21px;
padding-top: 14px;
padding-left: 20px;
margin-right: 20px;
}
.admission-officer .admission-body .preach-box .left .head {
margin-bottom: 24px;
margin-bottom: 17px;
}
.admission-officer .admission-body .preach-box .left .head .icon {
width: 33px;
height: 22px;
width: 38px;
height: 50px;
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;
@@ -369,17 +368,12 @@ body {
margin: 0 auto;
overflow: auto;
height: 280px;
/* 隐藏垂直滚动条 */
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE 和 Edge */
overflow-y: auto;
/* 确保内容可滚动 */
}
.admission-officer .admission-body .preach-box .left .box .list::-webkit-scrollbar {
display: none;
/* 隐藏滚动条 */
}
.admission-officer .admission-body .preach-box .left .box .list .item {
height: 70px;
@@ -447,6 +441,129 @@ body {
height: 293px;
overflow: hidden;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img {
position: relative;
width: 690px;
height: 293px;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img::after {
content: "";
width: 100%;
height: 19px;
background-color: #000000;
border-radius: 10px 10px 0 0;
display: block;
position: absolute;
top: 0;
left: 0;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img::before {
content: "";
width: 100%;
height: 19px;
background-color: #000000;
border-radius: 0 0 10px 10px;
display: block;
position: absolute;
bottom: 0;
left: 0;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .play-btn {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 241px;
transform: translateY(-50%);
cursor: pointer;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .img {
width: 521px;
height: 293px;
border-radius: 10px;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .bottom {
position: absolute;
left: 0;
bottom: 0;
width: 521px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, #000000 100%);
padding: 17px 22px 13px;
border-radius: 0 0 10px 10px;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .bottom .title {
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #ffffff;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
margin-bottom: 5px;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .bottom .subtitle {
font-size: 13px;
color: #ffffff;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info {
width: 169px;
height: 293px;
z-index: 1;
position: relative;
flex-direction: column;
justify-content: center;
padding-left: 13px;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-side-bj {
position: absolute;
top: 0;
right: 0;
width: 198px;
height: 293px;
z-index: -1;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 15px;
color: #ffffff;
text-align: center;
position: relative;
width: 140px;
height: 21px;
margin-bottom: 20px;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-title .interview-title-icon {
width: 140px;
height: 21px;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-name {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #ffffff;
margin-bottom: 10px;
align-items: flex-end;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-name .interview-professional {
color: #ffffff;
font-size: 13px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
margin-left: 12px;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .margin-b-10 {
margin-bottom: 10px;
}
.admission-officer .admission-body .preach-box .right .img-box .video-img .interview-info .interview-subheading {
font-size: 13px;
color: #ffffff;
}
.admission-officer .admission-body .preach-box .right .img-box .item {
width: 690px;
height: 293px;
@@ -545,7 +662,7 @@ body {
margin-right: 10px;
}
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .img {
width: 471px;
width: 356px;
height: 200px;
border-radius: 10px;
}

160
css/index.less
View File

@@ -399,20 +399,20 @@ body {
z-index: -1;
}
.left {
padding-top: 21px;
padding-top: 14px;
padding-left: 20px;
margin-right: 20px;
.head {
margin-bottom: 24px;
margin-bottom: 17px;
.icon {
width: 33px;
height: 22px;
width: 38px;
height: 50px;
margin-right: 10px;
}
.name {
width: 125px;
height: 36px;
// height: 36px;
}
}
@@ -446,18 +446,15 @@ body {
margin: 0 auto;
overflow: auto;
height: 280px;
/* 隐藏垂直滚动条 */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 和 Edge */
overflow-y: auto; /* 确保内容可滚动 */
scrollbar-width: none;
-ms-overflow-style: none;
overflow-y: auto;
&::-webkit-scrollbar {
display: none; /* 隐藏滚动条 */
display: none;
}
.item {
// width: 404px;
height: 70px;
padding-left: 18px;
padding-right: 20px;
@@ -538,6 +535,143 @@ body {
height: 293px;
overflow: hidden;
.video-img {
position: relative;
width: 690px;
height: 293px;
&::after {
content: "";
width: 100%;
height: 19px;
background-color: rgba(0, 0, 0, 1);
border-radius: 10px 10px 0 0;
display: block;
position: absolute;
top: 0;
left: 0;
}
&::before {
content: "";
width: 100%;
height: 19px;
background-color: rgba(0, 0, 0, 1);
border-radius: 0 0 10px 10px;
display: block;
position: absolute;
bottom: 0;
left: 0;
}
.play-btn {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 241px;
transform: translateY(-50%);
cursor: pointer;
}
.img {
width: 521px;
height: 293px;
border-radius: 10px;
}
.bottom {
position: absolute;
left: 0;
bottom: 0;
width: 521px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, #000000 100%);
padding: 17px 22px 13px;
border-radius: 0 0 10px 10px;
.title {
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #ffffff;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
margin-bottom: 5px;
}
.subtitle {
font-size: 13px;
color: #ffffff;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
}
}
.interview-info {
width: 169px;
height: 293px;
z-index: 1;
position: relative;
flex-direction: column;
justify-content: center;
padding-left: 13px;
.interview-side-bj {
position: absolute;
top: 0;
right: 0;
width: 198px;
height: 293px;
z-index: -1;
}
.interview-title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 15px;
color: #ffffff;
text-align: center;
position: relative;
width: 140px;
height: 21px;
margin-bottom: 20px;
.interview-title-icon {
width: 140px;
height: 21px;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.interview-name {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #ffffff;
margin-bottom: 10px;
align-items: flex-end;
.interview-professional {
color: #ffffff;
font-size: 13px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
margin-left: 12px;
}
}
.margin-b-10 {
margin-bottom: 10px;
}
.interview-subheading {
font-size: 13px;
color: #ffffff;
}
}
}
.item {
width: 690px;
height: 293px;
@@ -652,7 +786,7 @@ body {
}
.img {
width: 471px;
width: 356px;
height: 200px;
border-radius: 10px;
}