fix(样式): 修复移动端布局问题并优化样式
修复移动端搜索页面的布局问题，优化响应式设计 调整头部导航栏的z-index防止遮挡 统一处理签到组件的显示逻辑 修复搜索推荐框宽度问题 优化媒体查询断点设置
This commit is contained in:
DESKTOP-RQ919RC\Pc
149
css/index.css
149
css/index.css
@@ -17,6 +17,9 @@
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .adv-list .adv-item {
|
||||
width: calc((100% - 12px) / 2);
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .adv-list .adv-item:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
@@ -148,7 +151,7 @@
|
||||
color: #000000;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box {
|
||||
width: calc((100% - 12px) * 0.662);
|
||||
width: calc((100% - 12px) * 0.675);
|
||||
height: 320px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
@@ -222,8 +225,6 @@
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item {
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item:not(:last-of-type) {
|
||||
margin-bottom: 12px;
|
||||
@@ -234,12 +235,10 @@
|
||||
margin-right: 10px;
|
||||
background: #30b0d5;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text {
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
}
|
||||
@@ -511,12 +510,12 @@
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding-left: 70px;
|
||||
padding-top: 20px;
|
||||
padding-right: 2px;
|
||||
padding-bottom: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -588,7 +587,95 @@
|
||||
#appIndex .matter .sidebar .side-box.interviewexperience-side-box {
|
||||
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
|
||||
}
|
||||
@media screen and (max-width: 910px) {
|
||||
#appIndex .header-content-box .header-content-left {
|
||||
width: 100%;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list {
|
||||
margin-right: 15px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right {
|
||||
display: none;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.head-top .input-box {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 5px;
|
||||
}
|
||||
.head-top .input-box .placeholder {
|
||||
display: none;
|
||||
}
|
||||
.head-top .input-box .input {
|
||||
display: none;
|
||||
}
|
||||
.head-top .input-box .icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
.head-top .post-list {
|
||||
display: none !important;
|
||||
}
|
||||
.head-top .sign-in {
|
||||
display: none !important;
|
||||
}
|
||||
#appIndex {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
#appIndex .admission .admission-list {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
#appIndex .admission .admission-list .admission-item {
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
height: 80px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
#appIndex .admission .admission-list .admission-item:not(:nth-last-child(-n + 4)) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#appIndex .admission .admission-list .admission-item img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
#appIndex .matter {
|
||||
flex-direction: column;
|
||||
}
|
||||
#appIndex .matter .matter-content {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list .img {
|
||||
display: none;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list .list .line {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0 !important;
|
||||
height: auto;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list .list .line .item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#appIndex .matter .sidebar {
|
||||
display: none;
|
||||
}
|
||||
#appIndex .pop-list {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 620px) {
|
||||
.head-top {
|
||||
width: 100% !important;
|
||||
padding: 0 10px;
|
||||
@@ -667,52 +754,6 @@
|
||||
#appIndex .header-content-box .header-content-right {
|
||||
display: none;
|
||||
}
|
||||
#appIndex .admission .admission-list {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
#appIndex .admission .admission-list .admission-item {
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
height: 80px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
#appIndex .admission .admission-list .admission-item:not(:nth-last-child(-n + 4)) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#appIndex .admission .admission-list .admission-item img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
#appIndex .pop-list {
|
||||
display: block;
|
||||
}
|
||||
#appIndex .matter {
|
||||
flex-direction: column;
|
||||
}
|
||||
#appIndex .matter .matter-content {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list .img {
|
||||
display: none;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list .list .line {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0 !important;
|
||||
height: auto;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list .list .line .item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#appIndex .matter .sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.pop-list {
|
||||
width: 100%;
|
||||
@@ -734,7 +775,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 70px;
|
||||
height: 55px;
|
||||
}
|
||||
.pop-list .list .item:nth-of-type(1) {
|
||||
flex: 95;
|
||||
|
||||
Reference in New Issue
Block a user