From 8084a177e5c1725e5dbc6967381032e29d7d9bc1 Mon Sep 17 00:00:00 2001 From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com> Date: Wed, 23 Jul 2025 18:54:02 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E6=A0=B7=E5=BC=8F):=20=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E6=8B=9B=E7=94=9F=E5=AE=98=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=8F=8A=E6=96=B0=E5=A2=9E=E8=A7=86=E9=A2=91=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=E5=8C=BA=E5=9F=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修改招生官页面多个元素的样式，包括颜色、字体大小和间距 - 新增视频展示区域及相关交互元素样式 - 调整左侧信息栏布局和滚动条样式 - 优化响应式设计，修改图片宽度等细节 --- H5/h5.css | 8 +-- H5/h5.less | 9 +-- css/index.css | 139 ++++++++++++++++++++++++++++++++++++++---- css/index.less | 160 +++++++++++++++++++++++++++++++++++++++++++++---- 4 files changed, 284 insertions(+), 32 deletions(-) diff --git a/H5/h5.css b/H5/h5.css index 1ea39bf..82dae3e 100644 --- a/H5/h5.css +++ b/H5/h5.css @@ -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; diff --git a/H5/h5.less b/H5/h5.less index 4d1e112..aa1a544 100644 --- a/H5/h5.less +++ b/H5/h5.less @@ -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; } } } diff --git a/css/index.css b/css/index.css index 4731df2..67a9ced 100644 --- a/css/index.css +++ b/css/index.css @@ -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; } diff --git a/css/index.less b/css/index.less index 20131d6..93b6279 100644 --- a/css/index.less +++ b/css/index.less @@ -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; }