fix(样式): 修复移动端布局问题并优化样式
修复移动端搜索页面的布局问题，优化响应式设计 调整头部导航栏的z-index防止遮挡 统一处理签到组件的显示逻辑 修复搜索推荐框宽度问题 优化媒体查询断点设置
This commit is contained in:
DESKTOP-RQ919RC\Pc
195
css/index.less
195
css/index.less
@@ -18,6 +18,9 @@
|
||||
|
||||
.adv-item {
|
||||
width: calc((100% - 12px) / 2);
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
@@ -183,7 +186,7 @@
|
||||
}
|
||||
|
||||
.selectives-box {
|
||||
width: calc((100% - 12px) * 0.662);
|
||||
width: calc((100% - 12px) * 0.675);
|
||||
height: 320px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
@@ -233,7 +236,7 @@
|
||||
.header-left-bottom-box {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
background-color: rgb(255, 255, 255);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
@@ -269,8 +272,6 @@
|
||||
|
||||
.item {
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 12px;
|
||||
@@ -282,13 +283,11 @@
|
||||
margin-right: 10px;
|
||||
background: #30b0d5;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
|
||||
@@ -625,14 +624,13 @@
|
||||
|
||||
.forum-sections-list {
|
||||
position: relative;
|
||||
// flex: 1;
|
||||
flex: 1;
|
||||
// height: 240px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding-left: 70px;
|
||||
padding-top: 20px;
|
||||
padding-right: 2px;
|
||||
padding-bottom: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@@ -728,7 +726,121 @@
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
|
||||
.placeholder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.post-list {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sign-in {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
#appIndex {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
|
||||
.admission {
|
||||
.admission-list {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
|
||||
.admission-item {
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
height: 80px;
|
||||
margin-right: 12px;
|
||||
|
||||
&:not(:nth-last-child(-n + 4)) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.matter {
|
||||
flex-direction: column;
|
||||
|
||||
.matter-content {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
|
||||
.forum-sections-list {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
|
||||
.img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list {
|
||||
.line {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0 !important;
|
||||
height: auto;
|
||||
|
||||
.item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pop-list {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 620px) {
|
||||
.head-top {
|
||||
width: 100% !important;
|
||||
padding: 0 10px;
|
||||
@@ -827,68 +939,6 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.admission {
|
||||
.admission-list {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
|
||||
.admission-item {
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
height: 80px;
|
||||
margin-right: 12px;
|
||||
|
||||
&:not(:nth-last-child(-n + 4)) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pop-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.matter {
|
||||
flex-direction: column;
|
||||
|
||||
.matter-content {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
|
||||
.forum-sections-list {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
|
||||
.img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list {
|
||||
.line {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0 !important;
|
||||
height: auto;
|
||||
|
||||
.item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -908,7 +958,6 @@
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 15px;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -916,7 +965,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 70px;
|
||||
height: 55px;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
flex: 95;
|
||||
|
||||
Reference in New Issue
Block a user