From aa5a7058ad0538dc496d590dc771fceddb5a90ad Mon Sep 17 00:00:00 2001 From: A1300399510 <1300399510@qq.com> Date: Sat, 8 Nov 2025 22:22:44 +0800 Subject: [PATCH] no message --- 1.html | 204 +++++++++++++++++++ bi.html | 93 +++++++++ component/head-top/head-top.js | 54 ++++- component/head-top/head-top.txt | 15 +- component/item-bottom/item-bottom.js | 2 +- component/item-bottom/item-bottom.txt | 4 +- component/item-head/item-head.js | 5 +- component/item-head/item-head.txt | 2 +- component/item-summary/item-summary.js | 9 +- component/item-summary/item-summary.txt | 32 +-- css/bi.css | 203 +++++++++++++++++++ css/bi.less | 259 ++++++++++++++++++++++++ css/details.css | 20 +- css/details.less | 21 +- css/public.css | 43 +++- css/public.less | 47 ++++- css/search.css | 10 +- css/search.less | 16 +- js/index.js | 1 - js/search.js | 109 ++++++---- search.html | 143 ++++++------- simple_scroll.html | 92 +++++++++ 22 files changed, 1222 insertions(+), 162 deletions(-) create mode 100644 1.html create mode 100644 bi.html create mode 100644 css/bi.css create mode 100644 css/bi.less create mode 100644 simple_scroll.html diff --git a/1.html b/1.html new file mode 100644 index 0000000..b22cc45 --- /dev/null +++ b/1.html @@ -0,0 +1,204 @@ + + + + + + 滚动触底固定 + + + +
+
+ +

左侧内容（较短）

+
这是左侧内容的第一行。
+
左侧内容相对较短，所以在滚动时会先触底。
+
当滚动到一定程度时，左侧会固定在底部。
+
此时右侧内容可以继续正常滚动。
+
固定后，左侧内容不再随页面滚动。
+
这是左侧的最后一行内容。
+
+ +
+ +

右侧内容（较长）

+
这是右侧内容的第一行。
+
右侧内容相对较长，可以滚动更多内容。
+
右侧内容继续...这是第3行。
+
右侧内容继续...这是第4行。
+
右侧内容继续...这是第5行。
+
右侧内容继续...这是第6行。
+
右侧内容继续...这是第7行。
+
右侧内容继续...这是第8行。
+
右侧内容继续...这是第9行。
+
右侧内容继续...这是第10行。
+
右侧内容继续...这是第11行。
+
右侧内容继续...这是第12行。
+
右侧内容继续...这是第13行。
+
右侧内容继续...这是第14行。
+
右侧内容继续...这是第15行。
+
右侧内容继续...这是第16行。
+
右侧内容继续...这是第17行。
+
右侧内容继续...这是第18行。
+
右侧内容继续...这是第19行。
+
右侧内容继续...这是第20行。
+
+
+ + + + diff --git a/bi.html b/bi.html new file mode 100644 index 0000000..1738130 --- /dev/null +++ b/bi.html @@ -0,0 +1,93 @@ + + + + + + 寄托币说明 + + + +
+
+ 图标 +

如何获得寄托币？

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
事件奖励寄托币奖励上限
发布帖子/总结/面经/投票+3币/篇3篇/天
报Offer+10币/篇不限
发布评论/讨论+1币/次10次/天
发布的内容被标为精华+40币/篇不限
发布的内容被标为推荐+20币/篇不限
登录+1币/次1次/天
签到随机奖励1-6币/次，前十分名额额外奖励2-5币/次1次/天
手机认证+20币仅1次
邮箱认证+15币仅1次
+
+

补充说明：

+ +
+
+
+
+ 图标 +

寄托币的用途：

+
+ +
+
+ + diff --git a/component/head-top/head-top.js b/component/head-top/head-top.js index e5dfe27..58e2673 100644 --- a/component/head-top/head-top.js +++ b/component/head-top/head-top.js @@ -13,12 +13,15 @@ export const headTop = defineComponent({ }, setup(props) { - onMounted(() => {}); + onMounted(() => { + getHistorySearch(); + }); let state = ref(0); // 是否已经签到 let userInfoWinTimerCount = 0; const userInfoWinTimer = setInterval(() => { + if (location.host == "127.0.0.1:5501") return; if (todaysignedState) { state.value = todaysigned; clearInterval(userInfoWinTimer); @@ -40,21 +43,52 @@ export const headTop = defineComponent({ }); }; - let input = ref(""); - let defaultSearchText = ref("屯特"); - const goSearch = () => { - const searchText = input.value || defaultSearchText.value; - redirectToExternalWebsite("/search/" + searchText); - }; - let pitchState = ref(false); let page = ref(...props.page); // console.log("page", page.value); - return { page, pitchState, state, signIn, input, defaultSearchText, goSearch }; + let input = ref(""); + let defaultSearchText = ref("屯特"); + + let historySearchList = ref([]); // 历史搜索数据 + // 获取历史搜索 + const getHistorySearch = () => { + const data = JSON.parse(localStorage.getItem("history-search")) || []; + console.log("data", data); + historySearchList.value = data; + }; + + // 跳转搜索 + const searchEvent = (value) => { + const kw = value || input.value || defaultSearchText.value; + historySearchList.value.unshift(kw); + historySearchList.value = [...new Set(historySearchList.value)]; + if (historySearchList.value.length > 10) historySearchList.value = historySearchList.value.splice(0, 10); + localStorage.setItem("history-search", JSON.stringify(historySearchList.value)); + + redirectToExternalWebsite("/search/" + kw); + searchInputBlur(); + }; + + let searchHistoryShowState = ref(false); // 历史记录的展开状态 + let searchInputState = ref(false); // 搜索框的状态 + // 切换历史记录展示状态 + const searchInputFocus = () => { + searchInputState.value = true; + if (historySearchList.value.length == 0) return; + searchHistoryShowState.value = true; + }; + const searchInputBlur = () => { + setTimeout(() => { + searchInputState.value = false; + searchHistoryShowState.value = false; + }, 200); + }; + + return { historySearchList, searchEvent, searchInputState, searchHistoryShowState, searchInputFocus, searchInputBlur, page, pitchState, state, signIn, input, defaultSearchText }; }, - template: `
`, + template: `
历史搜索
{{ item }}
`, }); diff --git a/component/head-top/head-top.txt b/component/head-top/head-top.txt index 45abe97..f567c12 100644 --- a/component/head-top/head-top.txt +++ b/component/head-top/head-top.txt @@ -3,9 +3,16 @@
-
- - +
+ + + +
+
历史搜索
+
+
{{ item }}
+
+
@@ -43,4 +50,4 @@ 已签到，明天再来
-
\ No newline at end of file + diff --git a/component/item-bottom/item-bottom.js b/component/item-bottom/item-bottom.js index b9903ec..2c6b511 100644 --- a/component/item-bottom/item-bottom.js +++ b/component/item-bottom/item-bottom.js @@ -121,5 +121,5 @@ export const itemBottom = defineComponent({ like, }, - template: `
{{ item?.commentreviews?.content || "[图]" }}
{{ item.likes || "赞" }}
{{ item.collections || "收藏" }}
{{ item.comments || "讨论" }}
{{ item.coins || "投币" }}
转发
`, + template: `
{{ item?.commentreviews?.content || "[图]" }}
{{ item.likes || "赞" }}
{{ item.collections || "收藏" }}
{{ item.comments || "讨论" }}
{{ item.coins || "投币" }}
转发
`, }); diff --git a/component/item-bottom/item-bottom.txt b/component/item-bottom/item-bottom.txt index 5aa4410..667290e 100644 --- a/component/item-bottom/item-bottom.txt +++ b/component/item-bottom/item-bottom.txt @@ -32,7 +32,7 @@
- +
转发
- \ No newline at end of file + diff --git a/component/item-head/item-head.js b/component/item-head/item-head.js index 7f56106..ca956d1 100644 --- a/component/item-head/item-head.js +++ b/component/item-head/item-head.js @@ -33,7 +33,6 @@ export const itemHead = defineComponent({ sectionn.value = item.value.sectionn || []; const sectionNameSet = new Set(sectionn.value.map((item) => item.name)); - console.log(item.value.tags, "tags"); tags.value = item.value?.tags || []; tags.value = tags.value?.filter((tagName) => !sectionNameSet.has(tagName)) || []; @@ -101,7 +100,6 @@ export const itemHead = defineComponent({ // 删除 const deleteItem = () => { const target = item.value; - console.log("deleteItem", target, target.token); managerDelete(target.token) .then(() => { const targetNode = itemHead.value; @@ -139,7 +137,6 @@ export const itemHead = defineComponent({ }; const cutAnonymousState = (state) => { - console.log("state", state); const target = item.value; ajax("/v2/api/forum/postTopicAnonymousStatus", { token: target.token, @@ -165,5 +162,5 @@ export const itemHead = defineComponent({ report, }, - template: `
{{ item?.user?.nickname || item.nickname || "匿名用户" }}
{{ timestamp }}
公开 匿名
{{ item.views }}
举报
删除
{{ item.name }} {{ item }}
`, + template: `
{{ item?.user?.nickname || item.nickname || "匿名用户" }}
{{ timestamp }}
公开 匿名
{{ item.views }}
举报
删除
{{ item.name }} {{ item }}
`, }); diff --git a/component/item-head/item-head.txt b/component/item-head/item-head.txt index 5275f19..890c7d1 100644 --- a/component/item-head/item-head.txt +++ b/component/item-head/item-head.txt @@ -2,7 +2,7 @@
{{ item?.user?.nickname || item.nickname || "匿名用户" }}
- +
{{ timestamp }}
diff --git a/component/item-summary/item-summary.js b/component/item-summary/item-summary.js index f788bd8..24a49f3 100644 --- a/component/item-summary/item-summary.js +++ b/component/item-summary/item-summary.js @@ -20,6 +20,13 @@ export const itemSummary = defineComponent({ setup(props) { let item = ref({ ...props.itemdata }); + + // console.log("item", item.value.data);offerlist + // item.value?.data?.offerlist?.length = 2; + // if (item.value?.data?.offerlist?.length > 2) { + // item.value.data.offerlist.length = 2; + // } + item.value['url'] = '/details/' + item.value.uniqid; return { item }; @@ -30,5 +37,5 @@ export const itemSummary = defineComponent({ itemHead, }, - template: `
{{ item.title }} {{ item.content }}
共
{{ item.data.offercount }}
个Offer
{{ it.schoolname }}
{{ it.professional }}
{{ it.semester || '25Fall' }}
{{ it.degree || 'MSc' }}
{{ it.apply_results_text || 'Offer' }}
查看更多
`, + template: `
{{ item.title }} {{ item.content }}
共
{{ item.data.offercount }}
个Offer
查看更多
`, }); diff --git a/component/item-summary/item-summary.txt b/component/item-summary/item-summary.txt index 5a40b02..9742e37 100644 --- a/component/item-summary/item-summary.txt +++ b/component/item-summary/item-summary.txt @@ -8,24 +8,26 @@
个Offer
-
-
-
- -
{{ it.schoolname }}
-
-
{{ it.professional }}
-
- {{ it.semester || '25Fall' }} -
- {{ it.degree || 'MSc' }} -
-
{{ it.apply_results_text || 'Offer' }}
+ -
-
+
查看更多
diff --git a/css/bi.css b/css/bi.css new file mode 100644 index 0000000..7fd8139 --- /dev/null +++ b/css/bi.css @@ -0,0 +1,203 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + font-size: 14px; + color: #333; + margin: 0; + padding: 0; +} +.container { + width: 1027px; + height: 755px; + border: 1px solid #e4e4e4; + border-radius: 11px; + margin: 20px; + padding-top: 22px; +} +.container * { + padding: 0; + margin: 0; +} +.title { + display: flex; + align-items: center; + margin: 0 12px 20px; +} +.title img { + width: 29px; + height: 34px; + margin-right: 8px; +} +.title h2 { + font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + line-height: 30px; +} +/* 主标题样式扩展 */ +.bi-main-title { + display: flex; + align-items: center; + margin: 0 12px 20px; +} +.bi-main-title-icon { + width: 29px; + height: 34px; + margin-right: 8px; +} +.bi-main-title-heading { + font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + line-height: 30px; +} +/* 寄托币表格样式扩展 */ +.bi-table { + width: calc(100% - 24px); + border-collapse: collapse; + margin: 0 12px 25px; +} +.bi-table-header { + background-color: #f5f5f5; + font-weight: bold; + font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 14px; + color: #000000; + text-align: center; + height: 33px; +} +.bi-table-header.bi-table-event { + /* 事件列特殊样式 */ +} +.bi-table-header.bi-table-reward { + /* 奖励列特殊样式 */ +} +.bi-table-header.bi-table-limit { + /* 上限列特殊样式 */ +} +.bi-table-body { + /* 表格主体样式 */ +} +.bi-table-row:nth-child(even) { + background-color: #f5f5f5; +} +.bi-table-cell { + color: #333333; + font-size: 14px; + text-align: center; + height: 33px; +} +.bi-table-cell.bi-table-event { + /* 事件单元格样式 */ +} +.bi-table-cell.bi-table-reward { + /* 奖励单元格样式 */ +} +.bi-table-cell.bi-table-limit { + /* 上限单元格样式 */ +} +.supplement { + margin: 0 12px 30px; +} +.supplement h3 { + font-weight: bold; + font-size: 14px; + line-height: 25px; +} +.supplement ul { + list-style-type: none; + padding: 0; + margin: 0; +} +.supplement li { + font-size: 14px; + line-height: 25px; +} +/* 补充说明样式扩展 */ +.bi-supplement { + margin: 0 12px 30px; +} +.bi-supplement-title { + font-weight: bold; + font-size: 14px; + line-height: 25px; +} +.bi-supplement-list { + list-style-type: none; + padding: 0; + margin: 0; +} +.bi-supplement-item { + font-size: 14px; + line-height: 25px; +} +.divider { + height: 1px; + background-color: #eee; + margin-bottom: 37px; +} +.usage { + display: flex; + flex-direction: column; + margin-bottom: 8px; +} +.usage img { + width: 29px; + height: 34px; + margin-right: 8px; +} +.usage h3 { + font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + line-height: 30px; +} +.usage ul { + list-style-type: none; + padding: 0 0 0 32px; + margin: 0; +} +.usage li { + margin-bottom: 4px; +} +/* 寄托币用途样式扩展 */ +.bi-usage { + display: flex; + flex-direction: column; + margin-bottom: 8px; +} +.bi-usage-title { + display: flex; + align-items: center; + margin-bottom: 10px; +} +.bi-usage-icon { + width: 29px; + height: 34px; + margin-right: 8px; +} +.bi-usage-heading { + font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + line-height: 30px; +} +.bi-usage-list { + list-style-type: none; + padding: 0 0 0 32px; + margin: 0; +} +.bi-usage-item { + margin-bottom: 4px; + font-size: 14px; + color: #333; +} diff --git a/css/bi.less b/css/bi.less new file mode 100644 index 0000000..a299887 --- /dev/null +++ b/css/bi.less @@ -0,0 +1,259 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + font-size: 14px; + color: #333; + margin: 0; + padding: 0; +} +.container { + width: 1027px; + height: 755px; + border: 1px solid rgb(228, 228, 228); + border-radius: 11px; + margin: 20px; + padding-top: 22px; + * { + padding: 0; + margin: 0; + } +} +.title { + display: flex; + align-items: center; + margin: 0 12px 20px; + + img { + width: 29px; + height: 34px; + margin-right: 8px; + } + h2 { + font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: rgb(0, 0, 0); + line-height: 30px; + } +} + +/* 主标题样式扩展 */ +.bi-main-title { + display: flex; + align-items: center; + margin: 0 12px 20px; + + &-icon { + width: 29px; + height: 34px; + margin-right: 8px; + } + + &-heading { + font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: rgb(0, 0, 0); + line-height: 30px; + } +} + +// .table { +// width: calc(100% - 24px); +// border-collapse: collapse; +// margin: 0 12px 25px; +// } +// .table th, +// .table td { +// text-align: center; +// height: 33px; +// } +// .table th { +// background-color: #f5f5f5; +// font-weight: bold; +// font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif; +// font-weight: 650; +// font-style: normal; +// font-size: 14px; +// color: rgb(0, 0, 0); +// } + +// .table td { +// color: rgb(51, 51, 51); +// font-size: 14px; +// } + +// .table tr:nth-child(even) { +// background-color: rgb(245, 245, 245); +// } + +/* 寄托币表格样式扩展 */ +.bi-table { + width: calc(100% - 24px); + border-collapse: collapse; + margin: 0 12px 25px; + + &-header { + background-color: #f5f5f5; + font-weight: bold; + font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 14px; + color: rgb(0, 0, 0); + text-align: center; + height: 33px; + + &.bi-table-event { + /* 事件列特殊样式 */ + } + + &.bi-table-reward { + /* 奖励列特殊样式 */ + } + + &.bi-table-limit { + /* 上限列特殊样式 */ + } + } + + &-body { + /* 表格主体样式 */ + } + + &-row { + &:nth-child(even) { + background-color: rgb(245, 245, 245); + } + } + + &-cell { + color: rgb(51, 51, 51); + font-size: 14px; + text-align: center; + height: 33px; + + &.bi-table-event { + /* 事件单元格样式 */ + } + + &.bi-table-reward { + /* 奖励单元格样式 */ + } + + &.bi-table-limit { + /* 上限单元格样式 */ + } + } +} +.supplement { + margin: 0 12px 30px; +} +.supplement h3 { + font-weight: bold; + font-size: 14px; + line-height: 25px; +} +.supplement ul { + list-style-type: none; + padding: 0; + margin: 0; +} +.supplement li { + font-size: 14px; + line-height: 25px; +} + +/* 补充说明样式扩展 */ +.bi-supplement { + margin: 0 12px 30px; + + &-title { + font-weight: bold; + font-size: 14px; + line-height: 25px; + } + + &-list { + list-style-type: none; + padding: 0; + margin: 0; + } + + &-item { + font-size: 14px; + line-height: 25px; + } +} +.divider { + height: 1px; + background-color: #eee; + margin-bottom: 37px; +} +.usage { + display: flex; + flex-direction: column; + margin-bottom: 8px; +} +.usage img { + width: 29px; + height: 34px; + margin-right: 8px; +} +.usage h3 { + font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: rgb(0, 0, 0); + line-height: 30px; +} +.usage ul { + list-style-type: none; + padding: 0 0 0 32px; + margin: 0; +} +.usage li { + margin-bottom: 4px; +} + +/* 寄托币用途样式扩展 */ +.bi-usage { + display: flex; + flex-direction: column; + margin-bottom: 8px; + + &-title { + display: flex; + align-items: center; + margin-bottom: 10px; + } + + &-icon { + width: 29px; + height: 34px; + margin-right: 8px; + } + + &-heading { + font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: rgb(0, 0, 0); + line-height: 30px; + } + + &-list { + list-style-type: none; + padding: 0 0 0 32px; + margin: 0; + } + + &-item { + margin-bottom: 4px; + font-size: 14px; + color: #333; + } +} diff --git a/css/details.css b/css/details.css index 4c5fc96..12dc3aa 100644 --- a/css/details.css +++ b/css/details.css @@ -211,7 +211,7 @@ position: absolute; left: 50%; transform: translateX(-50%); - bottom: 42px; + bottom: 48px; width: 130px; height: 100px; background-color: #ffffff; @@ -220,10 +220,22 @@ flex-direction: column; display: none; } +#details .matter .matter-left .action-bar .action-bar-item .share-box::after { + content: ""; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 8px solid #000000; + position: absolute; + bottom: -8px; + left: 50%; + transform: translateX(-50%); +} #details .matter .matter-left .action-bar .action-bar-item .share-box .share-item { width: 100%; height: 40px; - color: #555555; + color: #333; font-size: 14px; } #details .matter .matter-left .action-bar .action-bar-item .share-box .share-item:hover { @@ -689,7 +701,7 @@ cursor: pointer; } .answer-discuss .input-box .bottom { - padding: 0 20px; + padding: 0 20px 20px; justify-content: flex-end; } .answer-discuss .input-box .bottom .operate .item { @@ -1146,7 +1158,7 @@ margin-right: 5px; } .answer-discuss .no-discussion-box { - margin: 36px 0; + margin: 72px 0; color: #7f7f7f; font-size: 15px; flex-direction: column; diff --git a/css/details.less b/css/details.less index 6a66ff7..6711867 100644 --- a/css/details.less +++ b/css/details.less @@ -244,7 +244,7 @@ position: absolute; left: 50%; transform: translateX(-50%); - bottom: 42px; + bottom: 48px; width: 130px; height: 100px; background-color: rgba(255, 255, 255, 1); @@ -253,10 +253,23 @@ flex-direction: column; display: none; + &::after { + content: ""; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 8px solid #000000; + position: absolute; + bottom: -8px; + left: 50%; + transform: translateX(-50%); + } + .share-item { width: 100%; height: 40px; - color: #555555; + color: #333; font-size: 14px; &:hover { @@ -810,7 +823,7 @@ .answer-discuss .input-box .bottom { // height: 52px; - padding: 0 20px; + padding: 0 20px 20px; justify-content: flex-end; } @@ -1340,7 +1353,7 @@ } .answer-discuss .no-discussion-box { - margin: 36px 0; + margin: 72px 0; color: #7f7f7f; font-size: 15px; flex-direction: column; diff --git a/css/public.css b/css/public.css index 894edf5..307860d 100644 --- a/css/public.css +++ b/css/public.css @@ -627,7 +627,7 @@ body { position: absolute; left: 50%; transform: translateX(-50%); - bottom: 42px; + bottom: 48px; width: 130px; height: 100px; background-color: #ffffff; @@ -636,10 +636,22 @@ body { flex-direction: column; display: none; } +.item-box .bottom .bottom-item .share-box::after { + content: ""; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 8px solid #000000; + position: absolute; + bottom: -8px; + left: 50%; + transform: translateX(-50%); +} .item-box .bottom .bottom-item .share-box .share-item { width: 100%; height: 40px; - color: #555555; + color: #333; font-size: 14px; } .item-box .bottom .bottom-item .share-box .share-item:hover { @@ -1448,6 +1460,7 @@ body { justify-content: space-between; margin-right: 20px; transition: all 0.3s; + position: relative; } .head-top .input-box.pitch { border-color: #000; @@ -1465,6 +1478,32 @@ body { margin-left: 15px; cursor: pointer; } +.head-top .input-box .search-box-history { + width: 460px; + /* height: 267px; */ + background-color: #ffffff; + border: 1px solid #ebebeb; + border-radius: 10px; + position: absolute; + top: 50px; + left: 0; + padding: 16px; + z-index: 1; +} +.head-top .input-box .search-box-history .search-box-history-title { + font-size: 13px; + color: #aaaaaa; + margin-bottom: 14px; +} +.head-top .input-box .search-box-history .search-box-history-list { + color: #333; + font-size: 14px; +} +.head-top .input-box .search-box-history .search-box-history-list .search-box-history-item { + margin-bottom: 10px; + cursor: pointer; + display: block; +} .head-top .sign-in { width: 192px; height: 40px; diff --git a/css/public.less b/css/public.less index 49591d3..a1f3bd7 100644 --- a/css/public.less +++ b/css/public.less @@ -754,7 +754,7 @@ body { position: absolute; left: 50%; transform: translateX(-50%); - bottom: 42px; + bottom: 48px; width: 130px; height: 100px; background-color: rgba(255, 255, 255, 1); @@ -763,10 +763,23 @@ body { flex-direction: column; display: none; + &::after { + content: ""; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 8px solid #000000; + position: absolute; + bottom: -8px; + left: 50%; + transform: translateX(-50%); + } + .share-item { width: 100%; height: 40px; - color: #555555; + color: #333; font-size: 14px; &:hover { @@ -1727,6 +1740,7 @@ body { justify-content: space-between; margin-right: 20px; transition: all 0.3s; + position: relative; &.pitch { border-color: #000; @@ -1746,6 +1760,35 @@ body { margin-left: 15px; cursor: pointer; } + + .search-box-history { + width: 460px; + /* height: 267px; */ + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 10px; + position: absolute; + top: 50px; + left: 0; + padding: 16px; + z-index: 1; + + .search-box-history-title { + font-size: 13px; + color: #aaaaaa; + margin-bottom: 14px; + } + + .search-box-history-list { + color: #333; + font-size: 14px; + .search-box-history-item { + margin-bottom: 10px; + cursor: pointer; + display: block; + } + } + } } .sign-in { diff --git a/css/search.css b/css/search.css index 0e40580..850f6b0 100644 --- a/css/search.css +++ b/css/search.css @@ -64,9 +64,17 @@ #search .matter { align-items: flex-start; } +#search .matter.bottom { + align-items: flex-end; +} #search .matter .matter-content { margin-right: 12px; } +#search .matter .matter-content.fixed { + position: fixed; + left: calc((100% - 1200px) / 2); + bottom: 10px; +} #search .matter .matter-content .list-box .item-box { margin-bottom: 12px; } @@ -121,6 +129,6 @@ } #search .matter .sidebar-box.fixed { position: fixed; - right: calc((100% - 1200px) / 2); + left: calc((100% - 1200px) / 2 + 909px); bottom: 10px; } diff --git a/css/search.less b/css/search.less index 4574269..9ad15df 100644 --- a/css/search.less +++ b/css/search.less @@ -72,10 +72,20 @@ .matter { align-items: flex-start; - + + &.bottom { + align-items: flex-end; + } + .matter-content { margin-right: 12px; + &.fixed { + position: fixed; + left: calc((100% - 1200px) / 2); + bottom: 10px; + } + .list-box { .item-box { margin-bottom: 12px; @@ -142,7 +152,9 @@ &.fixed { position: fixed; - right: calc((100% - 1200px) / 2); + // right: calc((100% - 1200px) / 2); + // left: 909px; + left: calc((100% - 1200px) / 2 + 909px); bottom: 10px; } } diff --git a/js/index.js b/js/index.js index 8201e4c..8345b1e 100644 --- a/js/index.js +++ b/js/index.js @@ -286,7 +286,6 @@ const appIndex = createApp({ }; const clickbtn = () => { - console.log("点击按钮"); BiComponent.initComponent(); }; diff --git a/js/search.js b/js/search.js index 7411c93..a1ba735 100644 --- a/js/search.js +++ b/js/search.js @@ -1,40 +1,43 @@ const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue; -import { itemForum } from "../component/item-forum/item-forum.js"; -import { itemOffer } from "../component/item-offer/item-offer.js"; -import { itemSummary } from "../component/item-summary/item-summary.js"; -import { itemVote } from "../component/item-vote/item-vote.js"; -import { itemMj } from "../component/item-mj/item-mj.js"; -import { itemTenement } from "../component/item-tenement/item-tenement.js"; -import { headTop } from "../component/head-top/head-top.js"; -import { hotTag } from "../component/hot-tag/hot-tag.js"; -import { hotSearch } from "../component/hot-search/hot-search.js"; -import { slideshowBox } from "../component/slideshow-box/slideshow-box.js"; -import { latestList } from "../component/latest-list/latest-list.js"; +import { itemForum } from "/component/item-forum/item-forum.js"; +import { itemOffer } from "/component/item-offer/item-offer.js"; +import { itemSummary } from "/component/item-summary/item-summary.js"; +import { itemVote } from "/component/item-vote/item-vote.js"; +import { itemMj } from "/component/item-mj/item-mj.js"; +import { itemTenement } from "/component/item-tenement/item-tenement.js"; +import { headTop } from "/component/head-top/head-top.js"; +import { hotTag } from "/component/hot-tag/hot-tag.js"; +import { hotSearch } from "/component/hot-search/hot-search.js"; +import { slideshowBox } from "/component/slideshow-box/slideshow-box.js"; +import { latestList } from "/component/latest-list/latest-list.js"; +import { loadBox } from "/component/load-box/load-box.js"; const appSearch = createApp({ setup() { + let kwValue = ref(null); + let typeValue = ref(null); let kw = ref(""); onMounted(() => { - const params = getUrlParams(); - kw.value = params.kw || ""; + // const params = getUrlParams(); + // kw.value = params.kw || ""; + // const urlObj = new URL(location.href); + // const pathParts = urlObj.pathname.split("/").filter((part) => part); + // kw.value = decodeURIComponent(pathParts.pop()); + kw.value = kwValue.value.innerText; + const tab = typeValue.value.innerText; + if (tab) tabValue.value = tab; + + page.value = 1; getList(); getUserInfoWin(); - setTimeout(() => (permissions.value = window["permissions"] || ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"]), 1000); + + window.addEventListener("scroll", handleScroll); }); - let isLogin = ref(true); - let realname = ref(1); // 是否已经实名 - let userInfoWin = ref({ - authority: ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"], - avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/middle?random=1761733169", - groupid: 3, - nickname: "肖荣豪", - realname: 1, - token: "01346a38444d71aaadb3adad52b52c39", - uid: 500144, - uin: 4238049, - }); + let isLogin = ref(false); + let realname = ref(0); // 是否已经实名 + let userInfoWin = ref({}); let permissions = ref([]); @@ -84,6 +87,8 @@ const appSearch = createApp({ tabValue.value = type; pagination.value = []; + updateUrlParams({ type: type == "all" ? null : type }); + getList(); }; @@ -110,19 +115,18 @@ const appSearch = createApp({ }); }; - let loading = false; + let loading = ref(false); let page = ref(0); let maxPage = ref(0); let count = ref(0); let list = ref([]); let pagination = ref([]); const getList = () => { - if (loading || page.value == null) return; - loading = true; + if (loading.value || page.value == null) return; + loading.value = true; const limit = 20; ajaxGet(`/v2/api/forum/topicLists?type=${tabValue.value == "all" ? "" : tabValue.value}&page=${page.value}&limit=${limit}&keyword=${kw.value}`) .then((res) => { - // wx.hideLoading(); if (res.code != 200) { creationAlertBox("error", res.message); return; @@ -130,19 +134,19 @@ const appSearch = createApp({ let data = res.data; list.value = data.data; - // page.value = data.count > limit * data.page ? page.value : null; - if (data.count <= limit * data.page) page.value = null - + if (list.value.length == 0) page.value = null; + count.value = data.count; - loading = false; + loading.value = false; maxPage.value = Math.ceil(count.value / limit); pagination.value = calculatePagination(page.value, maxPage.value); + + updateUrlLastPath(kw.value); }) .catch((err) => { - // wx.hideLoading(); err = err.data; if (err.code == 401) goLogin(); - loading = false; + loading.value = false; }); }; @@ -190,17 +194,20 @@ const appSearch = createApp({ if (value == "...") return; if (value == page.value) return; page.value = value; + list.value = []; getList(); }; const prevPage = () => { page.value -= 1; + list.value = []; pagination.value = []; getList(); }; const nextPage = () => { page.value += 1; + list.value = []; pagination.value = []; getList(); }; @@ -218,7 +225,34 @@ const appSearch = createApp({ getList(); }; - return { startSearch, kw, maxPage, prevPage, nextPage, tabValue, cutTab, tabList, count, list, page, pagination, cutPage }; + const sidebarFixed = ref(false); + const matterFixed = ref(false); + + const handleScroll = () => { + const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; + const clientHeight = window.innerHeight; + + const sideHeight = sidebarRef.value.offsetHeight; + const matterTop = matterRef.value.offsetTop; + const matterHeight = matterContentRef.value.offsetHeight; + + console.log("sideHeight", sideHeight); + console.log("matterHeight", matterHeight); + if (sideHeight < matterHeight) { + // 侧边栏滚动固定 + if (scrollTop >= matterTop + sideHeight - clientHeight) sidebarFixed.value = true; + else sidebarFixed.value = false; + } else { + if (scrollTop >= matterTop + matterHeight - clientHeight) matterFixed.value = true; + else matterFixed.value = false; + } + }; + + const matterRef = ref(null); + const sidebarRef = ref(null); + const matterContentRef = ref(null); + + return { matterFixed, matterContentRef, sidebarFixed, matterRef, sidebarRef, loading, typeValue, kwValue, startSearch, kw, maxPage, prevPage, nextPage, tabValue, cutTab, tabList, count, list, page, pagination, cutPage }; }, }); appSearch.component("item-forum", itemForum); @@ -232,4 +266,5 @@ appSearch.component("hot-tag", hotTag); appSearch.component("hot-search", hotSearch); appSearch.component("slideshow-box", slideshowBox); appSearch.component("latest-list", latestList); +appSearch.component("load-box", loadBox); appSearch.mount("#search"); diff --git a/search.html b/search.html index 5afe047..c70266e 100644 --- a/search.html +++ b/search.html @@ -1,83 +1,84 @@ + + + + 搜索 + + + + + - - - - 搜索 - - - - - + +