From 2fd55c3e61be2535ee5468472156083e41396afc Mon Sep 17 00:00:00 2001 From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com> Date: Tue, 23 Dec 2025 14:37:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=8E=A8=E8=8D=90?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=92=8C=E6=A0=87=E7=AD=BE=E6=90=9C=E7=B4=A2?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refactor: 优化CSS媒体查询和响应式布局 fix: 移除重复的媒体查询规则 style: 调整搜索框和侧边栏样式 docs: 更新HTML文档结构和元信息 --- component/item-bottom/item-bottom.js | 2 +- css/public.css | 42 +-- css/public.less | 57 +--- css/search-tag.css | 72 +++- css/search-tag.less | 90 ++++- css/search.css | 33 ++ css/search.less | 43 +++ recommend-V2.html | 480 ++++++++++++++++++++++++++ search-tag-V2.html | 482 +++++++++++++++++++++++++++ 9 files changed, 1212 insertions(+), 89 deletions(-) create mode 100644 recommend-V2.html create mode 100644 search-tag-V2.html diff --git a/component/item-bottom/item-bottom.js b/component/item-bottom/item-bottom.js index 415ef92..0974f8a 100644 --- a/component/item-bottom/item-bottom.js +++ b/component/item-bottom/item-bottom.js @@ -65,7 +65,7 @@ export const itemBottom = defineComponent({ } let data = res.data; - creationAlertBox("success", res.message); + // creationAlertBox("success", res.message); item.value["is_like"] = data.status; item.value["likes"] = data.likes; diff --git a/css/public.css b/css/public.css index adce5cd..3aaf104 100644 --- a/css/public.css +++ b/css/public.css @@ -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; diff --git a/css/public.less b/css/public.less index 60efe5c..6f9e344 100644 --- a/css/public.less +++ b/css/public.less @@ -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; diff --git a/css/search-tag.css b/css/search-tag.css index 38ef21c..ea8948f 100644 --- a/css/search-tag.css +++ b/css/search-tag.css @@ -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; + } +} diff --git a/css/search-tag.less b/css/search-tag.less index 0f4d96a..2313704 100644 --- a/css/search-tag.less +++ b/css/search-tag.less @@ -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; + } +} diff --git a/css/search.css b/css/search.css index 0043d55..4e93821 100644 --- a/css/search.css +++ b/css/search.css @@ -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; + } +} diff --git a/css/search.less b/css/search.less index 9d5c293..ece4141 100644 --- a/css/search.less +++ b/css/search.less @@ -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; + } +} diff --git a/recommend-V2.html b/recommend-V2.html new file mode 100644 index 0000000..beef2b6 --- /dev/null +++ b/recommend-V2.html @@ -0,0 +1,480 @@ + + + + + + + + 推荐主题 - 寄托天下 -- 寄托天下 + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + +
+
+
+
+
+ + +
+
历史搜索
+
+
+
+ +
+ +
+ +
+ +
+ + +
+ + + + +
+
+
+ + + +
+ +
编辑推荐
+
+ +
+
{{ item }}
+
+ +
+
+
+
+
+
+
+ +
+
+
+ {{ tabList[tabValue] }} +
+ 共 +
{{ count }}
+ 条 + +
+
+
{{ currentSortText }}
+ +
+ +
+
+
按综合排序
+
按最新发布排序
+
+
+
+ +
+ +
+ + + +
+ +
- 暂无内容 -
+
+ +
+ + + +
{{ item }}
+ + + +
+
+
+ + + + +
+
+
+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/search-tag-V2.html b/search-tag-V2.html new file mode 100644 index 0000000..56298da --- /dev/null +++ b/search-tag-V2.html @@ -0,0 +1,482 @@ + + + + + + + + 标签:硕士 -- 寄托天下 + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + +
+
+
+
+
+ + +
+
历史搜索
+
+
+
+ +
+ +
+ +
+ +
+ + +
+ + + + +
+
硕士
+
+
+ +
硕士
+
+ +
+
{{ item }}
+
+ +
+
+
+
+
+
+
+ +
+
+
+ {{ tabList[tabValue] }} +
+ 共 +
{{ count }}
+ 条 +
+
+
{{ currentSortText }}
+ +
+ +
+
+
按综合排序
+
按最新发布排序
+
+
+
+ +
+ +
+ + + +
+ +
- 暂无内容 -
+
+ +
+ + + +
{{ item }}
+ + + +
+
+
+
+ + +
编辑推荐
+ + + +
精华帖
+ +
+ + + + +
+
+
+ + + + + + + + + + + + + + + + + + \ No newline at end of file