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

- 修改招生官页面多个元素的样式，包括颜色、字体大小和间距
- 新增视频展示区域及相关交互元素样式
- 调整左侧信息栏布局和滚动条样式
- 优化响应式设计，修改图片宽度等细节

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%);
+  background: linear-gradient(123.15792388deg, #dfeaea 0%, #f1eee5 100%);
-  border: 0.0133rem solid #e8efee;
+  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;

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%);
+        // 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.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;
                     }
                 }
             }

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;
+  width: 38px;
-  height: 22px;
+  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;
 }

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;
+                        width: 38px;
-                        height: 22px;
+                        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;
-                        /* 隐藏垂直滚动条 */
+                        -ms-overflow-style: none;
-                        scrollbar-width: none; /* Firefox */
+                        overflow-y: auto;
-                        -ms-overflow-style: none; /* IE 和 Edge */
-                        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;
                         }