feat: 添加推荐主题和标签搜索页面
refactor: 优化CSS媒体查询和响应式布局 fix: 移除重复的媒体查询规则 style: 调整搜索框和侧边栏样式 docs: 更新HTML文档结构和元信息
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -335,6 +335,7 @@ body {
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
margin-bottom: 7px;
|
||||
display: block;
|
||||
}
|
||||
.item-box.item-summary .message {
|
||||
font-size: 14px;
|
||||
@@ -2106,6 +2107,11 @@ td {
|
||||
margin: 0 auto;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
@media screen and (max-width: 1218px) {
|
||||
.index-footer {
|
||||
min-width: inherit !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
header.page-header {
|
||||
min-width: auto !important;
|
||||
@@ -2121,9 +2127,6 @@ td {
|
||||
.head-top.flexacenter .input-box {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.index-footer {
|
||||
min-width: inherit !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
header.page-header {
|
||||
@@ -2138,25 +2141,6 @@ td {
|
||||
.head-top .post-list {
|
||||
display: none !important;
|
||||
}
|
||||
#search .search-box {
|
||||
width: auto !important;
|
||||
margin: 0 10px 20px;
|
||||
height: 40px !important;
|
||||
}
|
||||
#search .classify {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#search .matter .matter-content {
|
||||
margin: 0 10px;
|
||||
}
|
||||
#search .matter .sidebar-box {
|
||||
display: none;
|
||||
}
|
||||
#search .matter .search-box {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.item-box {
|
||||
padding: 18px 10px 0;
|
||||
}
|
||||
@@ -2167,15 +2151,6 @@ td {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
#search .classify .item {
|
||||
min-width: inherit;
|
||||
font-size: 13px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
.head-top.flexacenter {
|
||||
margin-bottom: 10px !important;
|
||||
@@ -2188,11 +2163,6 @@ td {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 450px) {
|
||||
#search .classify .item {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
.huddle-box {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
@@ -3,8 +3,6 @@
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
// font-weight: 400;
|
||||
// font-style: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@@ -406,13 +404,14 @@ body {
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
margin-bottom: 7px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.total {
|
||||
@@ -2530,6 +2529,12 @@ td {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1218px) {
|
||||
.index-footer {
|
||||
min-width: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
header.page-header {
|
||||
min-width: auto !important;
|
||||
@@ -2547,10 +2552,6 @@ td {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.index-footer {
|
||||
min-width: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 媒体查询 最大宽度 768px 时
|
||||
@@ -2573,32 +2574,6 @@ td {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#search {
|
||||
.search-box {
|
||||
width: auto !important;
|
||||
margin: 0 10px 20px;
|
||||
height: 40px !important;
|
||||
}
|
||||
.classify {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.matter {
|
||||
.matter-content {
|
||||
margin: 0 10px;
|
||||
}
|
||||
.sidebar-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-box {
|
||||
padding: 18px 10px 0;
|
||||
.comment .text {
|
||||
@@ -2610,16 +2585,6 @@ td {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
#search .classify .item {
|
||||
min-width: inherit;
|
||||
font-size: 13px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.head-top.flexacenter {
|
||||
margin-bottom: 10px !important;
|
||||
@@ -2635,12 +2600,6 @@ td {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
#search .classify .item {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.huddle-box {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
#search-tag {
|
||||
width: 1200px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#search-tag .label-title {
|
||||
@@ -125,6 +125,7 @@
|
||||
align-items: flex-start;
|
||||
}
|
||||
#search-tag .matter .matter-content {
|
||||
min-width: 0;
|
||||
margin-right: 12px;
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
@@ -215,3 +216,72 @@
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
@media screen and (max-width: 805px) {
|
||||
.item-box .bottom .bottom-item:not(:last-child) {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#search-tag .search-box {
|
||||
width: auto !important;
|
||||
margin: 0 10px 20px;
|
||||
height: 40px !important;
|
||||
}
|
||||
#search-tag .classify {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#search-tag .matter .matter-content {
|
||||
margin: 0;
|
||||
}
|
||||
#search-tag .matter .sidebar-box {
|
||||
display: none;
|
||||
}
|
||||
#search-tag .matter .search-box {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#search-tag {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 630px) {
|
||||
.sign-in.flexacenter {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
#search-tag .classify .item {
|
||||
min-width: inherit;
|
||||
font-size: 13px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
.item-box .bottom .bottom-item:not(:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.head-top.flexacenter .input-box {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 5px;
|
||||
}
|
||||
.head-top.flexacenter .input-box .input {
|
||||
display: none;
|
||||
}
|
||||
.head-top.flexacenter .input-box .placeholder {
|
||||
display: none;
|
||||
}
|
||||
.head-top.flexacenter .input-box .icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 450px) {
|
||||
#search-tag .classify .item {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
#search-tag {
|
||||
width: 1200px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.label-title {
|
||||
@@ -7,7 +7,6 @@
|
||||
|
||||
.icon {
|
||||
width: 25px;
|
||||
// height: 20px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
@@ -148,6 +147,7 @@
|
||||
align-items: flex-start;
|
||||
|
||||
.matter-content {
|
||||
min-width: 0;
|
||||
margin-right: 12px;
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
@@ -256,3 +256,89 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 805px) {
|
||||
.item-box .bottom .bottom-item:not(:last-child) {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#search-tag {
|
||||
.search-box {
|
||||
width: auto !important;
|
||||
margin: 0 10px 20px;
|
||||
height: 40px !important;
|
||||
}
|
||||
.classify {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.matter {
|
||||
.matter-content {
|
||||
margin: 0;
|
||||
}
|
||||
.sidebar-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search-tag {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 630px) {
|
||||
.sign-in.flexacenter {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
#search-tag .classify .item {
|
||||
min-width: inherit;
|
||||
font-size: 13px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.item-box .bottom .bottom-item:not(:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.head-top.flexacenter .input-box {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 5px;
|
||||
|
||||
.input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
#search-tag .classify .item {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -276,6 +276,25 @@
|
||||
margin-right: 10px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#search .search-box {
|
||||
width: auto !important;
|
||||
margin: 0 10px 20px;
|
||||
height: 40px !important;
|
||||
}
|
||||
#search .classify {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#search .matter .matter-content {
|
||||
margin: 0;
|
||||
}
|
||||
#search .matter .sidebar-box {
|
||||
display: none;
|
||||
}
|
||||
#search .matter .search-box {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#search {
|
||||
padding: 0 10px;
|
||||
}
|
||||
@@ -330,3 +349,17 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
#search .classify .item {
|
||||
min-width: inherit;
|
||||
font-size: 13px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 450px) {
|
||||
#search .classify .item {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -340,15 +340,42 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#search {
|
||||
.search-box {
|
||||
width: auto !important;
|
||||
margin: 0 10px 20px;
|
||||
height: 40px !important;
|
||||
}
|
||||
.classify {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.matter {
|
||||
.matter-content {
|
||||
margin: 0;
|
||||
}
|
||||
.sidebar-box {
|
||||
display: none;
|
||||
}
|
||||
.search-box {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#search .search-no .earth-icon {
|
||||
width: 60%;
|
||||
max-width: 220px;
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#search .search-no .input-box {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
@@ -395,3 +422,19 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
#search .classify .item {
|
||||
min-width: inherit;
|
||||
font-size: 13px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
#search .classify .item {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user