style: 优化CSS样式和布局调整
- 调整头部样式和布局 - 优化列表和卡片样式 - 修复滚动条显示问题 - 更新颜色和间距 - 添加边框和阴影效果
This commit is contained in:
DESKTOP-RQ919RC\Pc
153
css/index.css
153
css/index.css
@@ -38,11 +38,18 @@ body {
|
||||
.admission-officer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.admission-officer .one-line-display {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.admission-officer .admission-head {
|
||||
width: 100%;
|
||||
height: 144px;
|
||||
background-color: #3c7de9;
|
||||
position: relative;
|
||||
margin-top: -50px;
|
||||
}
|
||||
.admission-officer .admission-head .admission-head-logo {
|
||||
width: 223px;
|
||||
@@ -50,6 +57,7 @@ body {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: calc((100vw - 1200px) / 2);
|
||||
z-index: 1;
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
.admission-officer .admission-head .admission-head-logo {
|
||||
@@ -65,50 +73,14 @@ body {
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
.admission-officer .admission-head .admission-head-gray {
|
||||
position: absolute;
|
||||
top: 122px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1920px;
|
||||
height: 91px;
|
||||
z-index: 1;
|
||||
}
|
||||
.admission-officer .admission-head .admission-head-gray::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 1px;
|
||||
height: 91px;
|
||||
width: calc((100vw - 1920px) / 2);
|
||||
background-color: #f6f6f6;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.admission-officer .admission-head .admission-head-gray::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 1px;
|
||||
height: 91px;
|
||||
width: calc((100vw - 1920px) / 2);
|
||||
background-color: #f6f6f6;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.admission-officer .admission-head .admission-head-1 {
|
||||
position: absolute;
|
||||
top: 122px;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1920px;
|
||||
height: 68px;
|
||||
}
|
||||
.admission-officer .admission-head .admission-head-2 {
|
||||
position: absolute;
|
||||
top: 122px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1920px;
|
||||
height: 91px;
|
||||
min-width: 1920px;
|
||||
height: 216px;
|
||||
width: 100%;
|
||||
}
|
||||
.admission-officer .admission-body {
|
||||
width: 1200px;
|
||||
@@ -119,7 +91,7 @@ body {
|
||||
.admission-officer .admission-body .interview-box {
|
||||
width: 100%;
|
||||
height: 435px;
|
||||
margin: 0 auto 22px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -141,12 +113,10 @@ body {
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .left .head .icon {
|
||||
width: 38px;
|
||||
height: 50px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .left .head .name {
|
||||
width: 125px;
|
||||
height: 36px;
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .left .content {
|
||||
width: 592px;
|
||||
@@ -155,7 +125,30 @@ body {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .left .content::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 .interview-box .left .content::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 .interview-box .left .content .img {
|
||||
width: 592px;
|
||||
height: 333px;
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .left .content .play-btn {
|
||||
@@ -318,7 +311,7 @@ body {
|
||||
.admission-officer .admission-body .preach-box {
|
||||
width: 100%;
|
||||
height: 435px;
|
||||
margin: 0 auto 22px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -374,10 +367,22 @@ body {
|
||||
.admission-officer .admission-body .preach-box .left .box .list {
|
||||
width: 404px;
|
||||
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 {
|
||||
width: 404px;
|
||||
height: 73px;
|
||||
height: 70px;
|
||||
padding-left: 18px;
|
||||
padding-right: 20px;
|
||||
cursor: pointer;
|
||||
@@ -407,6 +412,7 @@ body {
|
||||
font-size: 15px;
|
||||
color: #000000;
|
||||
margin-bottom: 4px;
|
||||
width: 355px;
|
||||
}
|
||||
.admission-officer .admission-body .preach-box .left .box .list .item .info .time {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
@@ -451,7 +457,7 @@ body {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.admission-officer .admission-body .interview-more {
|
||||
margin-bottom: 102px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
.admission-officer .admission-body .interview-more .case {
|
||||
width: 139px;
|
||||
@@ -507,17 +513,39 @@ body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item {
|
||||
width: 356px;
|
||||
width: 471px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
background-color: #000000;
|
||||
border-radius: 10px 10px 0 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
background-color: #000000;
|
||||
border-radius: 0 0 10px 10px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .img {
|
||||
width: 356px;
|
||||
width: 471px;
|
||||
height: 200px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
@@ -544,6 +572,7 @@ body {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
}
|
||||
.admission-officer .admission-body .school-list {
|
||||
margin-top: 102px;
|
||||
margin-bottom: 90px;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item:not(:last-child) {
|
||||
@@ -596,6 +625,7 @@ body {
|
||||
.admission-officer .admission-body .school-list .school-item .right .info .img {
|
||||
height: 47px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .info .name {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
@@ -604,6 +634,7 @@ body {
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
margin-bottom: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .info .name .arrows {
|
||||
width: 12px;
|
||||
@@ -614,6 +645,7 @@ body {
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
font-family: "ArialMT", "Arial", sans-serif;
|
||||
cursor: pointer;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .introduce {
|
||||
font-size: 14px;
|
||||
@@ -670,6 +702,9 @@ body {
|
||||
z-index: -1;
|
||||
fill: #fff;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .content .year .item.unfold .svg {
|
||||
fill: #7d2882;
|
||||
}
|
||||
.admission-officer .admission-body .school-list .school-item .right .content .year .item.pitch {
|
||||
color: #ffffff;
|
||||
font-weight: 650;
|
||||
@@ -717,7 +752,7 @@ body {
|
||||
top: 28px;
|
||||
left: 0;
|
||||
width: 92px;
|
||||
background-color: #76c45e;
|
||||
background-color: #7d2882;
|
||||
border-radius: 0 0 10px 10px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
@@ -845,7 +880,8 @@ body {
|
||||
}
|
||||
.admission-officer .admission-body .retrospect .list .item::after {
|
||||
content: "";
|
||||
background: linear-gradient(90deg, #d6e5e5 0%, rgba(246, 242, 234, 0.976));
|
||||
background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.9686) 100%);
|
||||
border: 1px solid #f2f2f2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -943,12 +979,12 @@ body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
z-index: 100;
|
||||
z-index: 10000;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school {
|
||||
width: 706px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(90deg, #d6e5e5 0%, #f6f2ea 100%);
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
}
|
||||
@@ -965,6 +1001,7 @@ body {
|
||||
height: 100px;
|
||||
padding-left: 36px;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .head .img {
|
||||
height: 47px;
|
||||
@@ -1012,7 +1049,7 @@ body {
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
fill: #fff;
|
||||
fill: #ebebeb;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.pitch {
|
||||
color: #ffffff;
|
||||
@@ -1028,6 +1065,7 @@ body {
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
transition: all 0.3s;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .year .item.more.pitch .arrows {
|
||||
fill: #fff;
|
||||
@@ -1088,7 +1126,8 @@ body {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .list {
|
||||
height: 448px;
|
||||
max-height: 448px;
|
||||
min-height: 138px;
|
||||
overflow: auto;
|
||||
padding-right: 20px;
|
||||
}
|
||||
@@ -1107,7 +1146,7 @@ body {
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .list .item {
|
||||
padding: 12px 10px 10px 20px;
|
||||
background-color: #ffffff;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.admission-officer .admission-body .more-school-mask .more-school .content .list .item:not(:last-child) {
|
||||
@@ -1185,7 +1224,7 @@ body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 100;
|
||||
z-index: 10000;
|
||||
}
|
||||
.admission-officer .admission-body .paly-box-mask .paly-box {
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user