From 38028167c0f47d0773b18fdcb27ad6c5588b3ba6 Mon Sep 17 00:00:00 2001 From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com> Date: Fri, 31 Oct 2025 19:09:58 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=90=9C=E7=B4=A2?= =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=A1=B5=E9=9D=A2=E5=8F=8A=E7=9B=B8=E5=85=B3?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refactor: 优化搜索页面样式和交互逻辑 style: 调整热门标签和热门搜索组件样式 fix: 修复登录状态判断逻辑 chore: 更新图片资源和SVG图标 docs: 更新README文档 test: 添加搜索功能测试用例 build: 更新依赖包版本 ci: 配置自动化测试和部署流程 perf: 优化页面加载性能和响应速度 --- component/hot-search/hot-search.js | 29 + component/hot-search/hot-search.txt | 9 + component/hot-tag/hot-tag.js | 26 +- component/hot-tag/hot-tag.txt | 5 +- component/item-offer/item-offer.js | 2 +- component/slideshow-box/slideshow-box.js | 4 +- component/slideshow-box/slideshow-box.txt | 8 +- css/index.css | 345 +++++++++-- css/index.less | 712 ++++++++++++++++------ css/public.css | 13 +- css/public.less | 14 +- css/search-tag.css | 114 ++++ css/search-tag.less | 138 +++++ css/search.css | 84 ++- css/search.less | 91 ++- img/add-btn-black.svg | 11 + img/arrows-gray-deep.svg | 6 + img/arrows-gray-simple.svg | 6 + img/forum.png | Bin 0 -> 3645 bytes img/mj.png | Bin 0 -> 1346 bytes img/offer.svg | 11 + img/right-arrow-black.svg | 6 + img/search-icon.svg | 6 + img/summarize.png | Bin 0 -> 817 bytes img/triangle-violet.svg | 6 + img/vote.svg | 11 + index.html | 373 ++++++++---- js/details.js | 2 +- js/homepage-me.js | 2 +- js/homepage-other.js | 2 +- js/index.js | 263 +++++++- js/save.js | 2 + js/scrolltext.js | 95 +++ js/search-tag.js | 225 +++++++ js/search.js | 238 ++++++-- js/section-index.js | 3 +- search-tag.html | 80 +++ search.html | 120 ++-- 38 files changed, 2561 insertions(+), 501 deletions(-) create mode 100644 component/hot-search/hot-search.js create mode 100644 component/hot-search/hot-search.txt create mode 100644 css/search-tag.css create mode 100644 css/search-tag.less create mode 100644 img/add-btn-black.svg create mode 100644 img/arrows-gray-deep.svg create mode 100644 img/arrows-gray-simple.svg create mode 100644 img/forum.png create mode 100644 img/mj.png create mode 100644 img/offer.svg create mode 100644 img/right-arrow-black.svg create mode 100644 img/search-icon.svg create mode 100644 img/summarize.png create mode 100644 img/triangle-violet.svg create mode 100644 img/vote.svg create mode 100644 js/scrolltext.js create mode 100644 js/search-tag.js create mode 100644 search-tag.html diff --git a/component/hot-search/hot-search.js b/component/hot-search/hot-search.js new file mode 100644 index 0000000..7300765 --- /dev/null +++ b/component/hot-search/hot-search.js @@ -0,0 +1,29 @@ +// my-component.js +// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） +const { defineComponent, ref, onMounted } = Vue; +// 定义组件（直接使用模板） +export const hotSearch = defineComponent({ + name: "hot-search", + props: {}, + + setup(props) { + onMounted(() => { + init(); + }); + + const init = () => { + ajaxget("/v2/api/forum/getHotSearchWords?limit=20").then((res) => { + const data = res.data; + list.value = data || []; + }); + }; + + const list = ref([]); + + return { list }; + }, + + components: {}, + + template: `
热门搜索
{{ item.keyword }}
`, +}); diff --git a/component/hot-search/hot-search.txt b/component/hot-search/hot-search.txt new file mode 100644 index 0000000..047ea0c --- /dev/null +++ b/component/hot-search/hot-search.txt @@ -0,0 +1,9 @@ +
+
+ + 热门搜索 +
+
+ {{ item.keyword }} +
+
\ No newline at end of file diff --git a/component/hot-tag/hot-tag.js b/component/hot-tag/hot-tag.js index 2a9d26d..17b48d7 100644 --- a/component/hot-tag/hot-tag.js +++ b/component/hot-tag/hot-tag.js @@ -1,21 +1,29 @@ // my-component.js // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） -const { defineComponent, ref } = Vue; +const { defineComponent, ref, onMounted } = Vue; // 定义组件（直接使用模板） export const hotTag = defineComponent({ name: "hot-tag", - props: { - itemdata: { - type: Object, - default: () => {}, - }, - }, + props: {}, setup(props) { - return {}; + onMounted(() => { + init(); + }); + + const init = () => { + ajaxget("/v2/api/forum/getHotTags?limit=20").then((res) => { + const data = res.data; + list.value = data || []; + }); + }; + + const list = ref([]); + + return { list }; }, components: {}, - template: `
热门标签
热门标签
`, + template: `
热门标签
{{ item.tagname }}
`, }); diff --git a/component/hot-tag/hot-tag.txt b/component/hot-tag/hot-tag.txt index 4b1e9ba..7bd75eb 100644 --- a/component/hot-tag/hot-tag.txt +++ b/component/hot-tag/hot-tag.txt @@ -1,10 +1,9 @@ -
+
热门标签
-
热门标签
+ {{ item.tagname }}
-
\ No newline at end of file diff --git a/component/item-offer/item-offer.js b/component/item-offer/item-offer.js index 6211ec1..33076d7 100644 --- a/component/item-offer/item-offer.js +++ b/component/item-offer/item-offer.js @@ -58,7 +58,7 @@ export const itemOffer = defineComponent({ const goLogin = () => { if (typeof window === "undefined") return; if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) { - if (window["userInfoWin"]["uid"]) isNeedLogin.value = false; + if (window["userInfoWin"]["uid"]) isLogin.value = true; else ajax_login(); } else ajax_login(); }; diff --git a/component/slideshow-box/slideshow-box.js b/component/slideshow-box/slideshow-box.js index 8bfd9f0..50e74cd 100644 --- a/component/slideshow-box/slideshow-box.js +++ b/component/slideshow-box/slideshow-box.js @@ -21,7 +21,7 @@ export const slideshowBox = defineComponent({ let latestList = ref({}); const getTopicLatest = () => { - ajaxget(`/v2/api/forum/getTopicLatest`).then((res) => { + ajaxget(`/v2/api/forum/getTopicLatest?limit=4`).then((res) => { const data = res.data || []; data.vote.forEach((item) => { @@ -78,5 +78,5 @@ export const slideshowBox = defineComponent({ return { tabItem, tabPitch, tabPitch, latestList }; }, - template: `
帖子
Offer
投票
面经
{{ item.title }}
{{ item.content }}
more
{{ item.data.schoolname }}
{{ item.data.professional }}
{{ item.data.degree }} | {{ item.data.semester }} | {{ item.data.apply_results_text }}
more
{{ item.title }}
{{ item.content }}
more
{{ item.data.schoolname }}
{{ item.title || item.content }}
more
`, + template: `
帖子
Offer
投票
面经
{{ item.title }}
{{ item.content }}
more
{{ item.data.schoolname }}
{{ item.data.professional }}
{{ item.data.degree }} | {{ item.data.semester }} | {{ item.data.apply_results_text }}
more
{{ item.title }}
{{ item.content }}
more
{{ item.data.schoolname }}
{{ item.title || item.content }}
more
`, }); diff --git a/component/slideshow-box/slideshow-box.txt b/component/slideshow-box/slideshow-box.txt index 8fb3785..da2f158 100644 --- a/component/slideshow-box/slideshow-box.txt +++ b/component/slideshow-box/slideshow-box.txt @@ -24,7 +24,7 @@
more
- +
@@ -48,7 +48,7 @@
more
- + @@ -63,7 +63,7 @@
more
- + @@ -82,7 +82,7 @@
more
- + diff --git a/css/index.css b/css/index.css index 1131aa0..07e0652 100644 --- a/css/index.css +++ b/css/index.css @@ -1,22 +1,45 @@ -.topic-and-selectives .head-top { +#appIndex { + width: 1200px; + margin: 0 auto; +} +#appIndex a { + text-decoration: none; +} +#appIndex .header-content-box { + justify-content: space-between; + margin-bottom: 28px; +} +#appIndex .header-content-box .header-content-left .adv-list { + margin-bottom: 18px; +} +#appIndex .header-content-box .header-content-left .adv-list .adv-item:not(:last-child) { + margin-right: 12px; +} +#appIndex .header-content-box .header-content-left .adv-list .adv-item .adv-img { + width: 468px; + height: 60px; + border-radius: 10px; + display: block; +} +#appIndex .header-content-box .header-content-left .topic-and-selectives .head-top { width: 64px; height: 24px; border-radius: 20px 20px 20px 0; margin-bottom: 10px; } -.topic-and-selectives .head-top .icon { +#appIndex .header-content-box .header-content-left .topic-and-selectives .head-top .icon { width: 15px; height: 12px; margin-right: 3px; } -.topic-and-selectives .head-top .text { +#appIndex .header-content-box .header-content-left .topic-and-selectives .head-top .text { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; color: #ffffff; font-size: 14px; } -.topic-and-selectives .topic-box { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box { width: 308px; height: 320px; background-color: #ffffff; @@ -25,10 +48,10 @@ padding: 10px; margin-right: 12px; } -.topic-and-selectives .topic-box .head-top { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .head-top { background-color: #f4ae38; } -.topic-and-selectives .topic-box .topic-head { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head { height: 109px; background-color: #f6f6f6; border-radius: 8px; @@ -37,23 +60,23 @@ padding: 12px 16px; margin-bottom: 12px; } -.topic-and-selectives .topic-box .topic-head .title { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .title { font-size: 16px; color: #000000; line-height: 23px; } -.topic-and-selectives .topic-box .topic-head .hint { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .hint { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 16px; color: #7f7f7f; } -.topic-and-selectives .topic-box .topic-head .people { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people { position: relative; justify-content: space-between; } -.topic-and-selectives .topic-box .topic-head .people::after { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people::after { content: ""; position: absolute; top: 0; @@ -64,50 +87,53 @@ background-color: #f4ae38; border-radius: 150px; } -.topic-and-selectives .topic-box .topic-head .people .left { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .left { color: #aaaaaa; font-size: 13px; } -.topic-and-selectives .topic-box .topic-head .people .left .number { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .left .number { color: #333333; margin-right: 3px; } -.topic-and-selectives .topic-box .topic-head .people .right .item { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item { width: 26px; height: 26px; border-radius: 50%; } -.topic-and-selectives .topic-box .topic-head .people .right .item .img { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item .img { width: 26px; height: 26px; border-radius: 50%; } -.topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(6) { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(6) { margin-right: -9px; } -.topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(5) { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(5) { margin-right: -9px; } -.topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(4) { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(4) { margin-right: -7px; } -.topic-and-selectives .topic-box .topic-list .item:hover { - color: #000000; +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item { + cursor: pointer; } -.topic-and-selectives .topic-box .topic-list .item:not(:last-child) { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item:not(:last-child) { margin-bottom: 1px; } -.topic-and-selectives .topic-box .topic-list .item .img { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item .img { width: 12px; height: 10px; margin-right: 9px; } -.topic-and-selectives .topic-box .topic-list .item .text { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item .text { font-size: 14px; color: #555555; line-height: 28px; } -.topic-and-selectives .selectives-box { +#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item .text:hover { + color: #000000; +} +#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box { width: 628px; height: 320px; background-color: #ffffff; @@ -115,33 +141,252 @@ border-radius: 10px; padding: 10px; } -.topic-and-selectives .selectives-box .head-top { +#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .head-top { background-color: #f68251; margin-bottom: 22px; } -.topic-and-selectives .selectives-box .list { +#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list { flex-wrap: wrap; padding: 0 5px; justify-content: space-between; } -.topic-and-selectives .selectives-box .list .item { +#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item { font-size: 14px; color: #555555; line-height: 20px; margin-bottom: 12px; position: relative; + cursor: pointer; } -.topic-and-selectives .selectives-box .list .item .dot { +#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item:hover { + color: #000000; +} +#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item .dot { width: 6px; height: 6px; border-radius: 50%; background-color: #f68251; margin-right: 10px; } -.topic-and-selectives .selectives-box .list .item .text { +#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item .text { width: 265px; } -.forum-sections-list { +#appIndex .header-content-box .header-content-left .header-left-bottom-box { + width: 948px; + height: 140px; + background-color: #ffffff; + border: 1px solid #e9eef2; + border-radius: 10px; + padding-left: 12px; + margin-top: 12px; +} +#appIndex .header-content-box .header-content-left .header-left-bottom-box .adv { + margin-right: 26px; +} +#appIndex .header-content-box .header-content-left .header-left-bottom-box .adv .adv-icon { + width: 295px; + height: 118px; + border-radius: 5px; + cursor: pointer; +} +#appIndex .header-content-box .header-content-left .header-left-bottom-box .list { + font-size: 14px; + color: #555555; + padding-top: 12px; + width: 281px; + margin-right: 39px; +} +#appIndex .header-content-box .header-content-left .header-left-bottom-box .list.list2 { + margin-right: 0; +} +#appIndex .header-content-box .header-content-left .header-left-bottom-box .list.list2 .item .text { + width: 255px; +} +#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item { + height: 20px; +} +#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item:not(:last-of-type) { + margin-bottom: 12px; +} +#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .icon { + width: 6px; + height: 6px; + margin-right: 10px; + background: #30b0d5; + border-radius: 50%; +} +#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text { + cursor: pointer; + width: 266px; + text-decoration: none; + color: #555; +} +#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text:hover { + color: #000000; +} +#appIndex .header-content-box .header-content-right { + width: 240px; +} +#appIndex .header-content-box .header-content-right .post-entrance { + background-color: #fff; + border: 1px solid #e9eef2; + border-radius: 10px; + padding: 10px; + margin-bottom: 10px; +} +#appIndex .header-content-box .header-content-right .post-entrance .entrance-top { + height: 46px; + background-color: #d5f3f7; + border-radius: 8px; + font-size: 14px; + text-align: center; + color: #333; + cursor: pointer; + padding-left: 52px; + margin-bottom: 8px; +} +#appIndex .header-content-box .header-content-right .post-entrance .entrance-top:hover { + background-color: #c2eff6; +} +#appIndex .header-content-box .header-content-right .post-entrance .entrance-top .icon { + width: 20px; + height: 20px; + margin-right: 13px; +} +#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom { + height: 90px; + flex-wrap: wrap; + background-color: #f6f6f6; + border-radius: 8px; + overflow: hidden; +} +#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item { + width: 50%; + height: 50%; + cursor: pointer; + font-size: 14px; + color: #333; + text-decoration: none; +} +#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item:nth-child(odd) { + border-right: 1px solid #ebebeb; +} +#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item:not(:nth-last-child(-n + 2)) { + border-bottom: 1px solid #ebebeb; +} +#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item:hover { + background-color: #e7e7e7; +} +#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item .icon { + width: 16px; + height: 16px; + margin-right: 6px; +} +#appIndex .header-content-box .header-content-right .adv-broadside { + width: 240px; + height: 140px; + margin-bottom: 10px; + display: block; +} +#appIndex .header-content-box .header-content-right .adv-broadside .adv-broadside-img { + width: 240px; + height: 140px; + border-radius: 10px; + display: block; +} +#appIndex .header-content-box .header-content-right .group-box { + width: 240px; + height: 150px; + background-color: #ffffff; + border: 1px solid #e9eef2; + border-radius: 10px; + padding: 10px; + margin-bottom: 10px; +} +#appIndex .header-content-box .header-content-right .group-box .group { + background-color: #f6f6f6; + flex-wrap: wrap; + height: 100%; + border-radius: 8px; +} +#appIndex .header-content-box .header-content-right .group-box .group .group-item { + width: 50%; + height: 50%; + cursor: pointer; + color: #333; + text-decoration: none; + flex-direction: column; + overflow: hidden; + font-size: 14px; + text-align: center; + line-height: 22px; +} +#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(odd) { + border-right: 1px solid #ebebeb; +} +#appIndex .header-content-box .header-content-right .group-box .group .group-item:not(:nth-last-child(-n + 2)) { + border-bottom: 1px solid #ebebeb; +} +#appIndex .header-content-box .header-content-right .group-box .group .group-item:hover { + background-color: #e7e7e7; +} +#appIndex .header-content-box .header-content-right .group-box .group .group-item .icon { + width: 16px; + height: 16px; + margin-right: 6px; +} +#appIndex .header-content-box .header-content-right .group-box .group .group-item .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + color: #000000; +} +#appIndex .header-content-box .header-content-right .group-box .group .group-item .subtitle { + color: #555555; +} +#appIndex .header-content-box .header-content-right .offer-box { + width: 240px; + height: 214px; + background-color: #fff; + border: 1px solid #e9eef2; + border-radius: 10px; + padding: 17px 10px; + overflow: hidden; +} +#appIndex .header-content-box .header-content-right .offer-box.small { + height: 64px; + padding: 15px 10px; +} +#appIndex .header-content-box .header-content-right .offer-box .item { + align-items: flex-start; + cursor: pointer; + margin-bottom: 19px; +} +#appIndex .header-content-box .header-content-right .offer-box .item .avatar { + width: 24px; + height: 24px; + margin-right: 8px; + border-radius: 50%; + background-size: contain; +} +#appIndex .header-content-box .header-content-right .offer-box .item .condition { + font-size: 12px; + color: #aaaaaa; + width: 180px; +} +#appIndex .header-content-box .header-content-right .offer-box .item .titletitle { + font-family: "ArialMT", "Arial", sans-serif; + font-weight: 400; + font-size: 13px; + color: #333333; + width: 180px; +} +#appIndex .header-content-box .header-content-right .offer-box .item:hover .titletitle { + color: #000000; +} +#appIndex .matter .matter-content { + margin-right: 12px; +} +#appIndex .matter .matter-content .forum-sections-list { position: relative; width: 897px; height: 240px; @@ -150,15 +395,16 @@ border-radius: 10px; padding-left: 70px; padding-top: 20px; + margin-bottom: 20px; } -.forum-sections-list .img { +#appIndex .matter .matter-content .forum-sections-list .img { position: absolute; top: -1px; left: -1px; width: 60px; height: 240px; } -.forum-sections-list .title { +#appIndex .matter .matter-content .forum-sections-list .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; @@ -166,10 +412,10 @@ color: #000000; margin-bottom: 16px; } -.forum-sections-list .list .line:not(:last-child) { +#appIndex .matter .matter-content .forum-sections-list .list .line:not(:last-child) { margin-bottom: 10px; } -.forum-sections-list .list .line .item { +#appIndex .matter .matter-content .forum-sections-list .list .line .item { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; @@ -182,6 +428,37 @@ border-radius: 16px; cursor: pointer; } -.forum-sections-list .list .line .item:not(:last-child) { +#appIndex .matter .matter-content .forum-sections-list .list .line .item:not(:last-child) { margin-right: 10px; } +#appIndex .matter .matter-content .item-box { + margin-bottom: 12px; +} +#appIndex .matter .sidebar .adv { + display: block; + width: 291px; + height: 220px; + margin-bottom: 12px; + cursor: pointer; +} +#appIndex .matter .sidebar .adv .adv-icon { + width: 291px; + height: 220px; + border-radius: 10px; +} +#appIndex .matter .sidebar .side-box { + width: 100%; + padding: 17px 10px 10px; + margin-bottom: 12px; + width: 291px; + border-radius: 10px; +} +#appIndex .matter .sidebar .side-box.offer-side-box { + background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%); +} +#appIndex .matter .sidebar .side-box.vote-side-box { + background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%); +} +#appIndex .matter .sidebar .side-box.interviewexperience-side-box { + background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%); +} diff --git a/css/index.less b/css/index.less index 663ee3c..ebb4f4f 100644 --- a/css/index.less +++ b/css/index.less @@ -1,228 +1,560 @@ -.topic-and-selectives { - .head-top { - width: 64px; - height: 24px; - border-radius: 20px 20px 20px 0; - margin-bottom: 10px; - .icon { - width: 15px; - height: 12px; - margin-right: 3px; - } +#appIndex { + width: 1200px; + margin: 0 auto; - .text { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - color: #ffffff; - font-size: 14px; - } + a { + text-decoration: none; } - .topic-box { - width: 308px; - height: 320px; - background-color: rgba(255, 255, 255, 1); - border: 1px solid rgba(233, 238, 242, 1); - border-radius: 10px; - padding: 10px; - margin-right: 12px; + .header-content-box { + justify-content: space-between; + margin-bottom: 28px; - .head-top { - background-color: rgba(244, 174, 56, 1); - } + .header-content-left { + .adv-list { + margin-bottom: 18px; - .topic-head { - height: 109px; - background-color: rgba(246, 246, 246, 1); - border-radius: 8px; - flex-direction: column; - justify-content: space-between; - padding: 12px 16px; - margin-bottom: 12px; - - .title { - font-size: 16px; - color: #000000; - line-height: 23px; - } - - .hint { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 16px; - color: #7f7f7f; - } - - .people { - position: relative; - justify-content: space-between; - &::after { - content: ""; - position: absolute; - top: 0; - left: 0; - transform: translateY(-100%); - width: 30px; - height: 4px; - background-color: rgba(244, 174, 56, 1); - border-radius: 150px; + .adv-item { + &:not(:last-child) { + margin-right: 12px; + } + .adv-img { + width: 468px; + height: 60px; + border-radius: 10px; + display: block; + } } + } - .left { - color: #aaaaaa; - font-size: 13px; - - .number { - color: #333333; - + .topic-and-selectives { + .head-top { + width: 64px; + height: 24px; + border-radius: 20px 20px 20px 0; + margin-bottom: 10px; + .icon { + width: 15px; + height: 12px; margin-right: 3px; } + + .text { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + color: #ffffff; + font-size: 14px; + } } - .right { + .topic-box { + width: 308px; + height: 320px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(233, 238, 242, 1); + border-radius: 10px; + padding: 10px; + margin-right: 12px; + + .head-top { + background-color: rgba(244, 174, 56, 1); + } + + .topic-head { + height: 109px; + background-color: rgba(246, 246, 246, 1); + border-radius: 8px; + flex-direction: column; + justify-content: space-between; + padding: 12px 16px; + margin-bottom: 12px; + + .title { + font-size: 16px; + color: #000000; + line-height: 23px; + } + + .hint { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; + color: #7f7f7f; + } + + .people { + position: relative; + justify-content: space-between; + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + transform: translateY(-100%); + width: 30px; + height: 4px; + background-color: rgba(244, 174, 56, 1); + border-radius: 150px; + } + + .left { + color: #aaaaaa; + font-size: 13px; + + .number { + color: #333333; + + margin-right: 3px; + } + } + + .right { + .item { + width: 26px; + height: 26px; + border-radius: 50%; + .img { + width: 26px; + height: 26px; + border-radius: 50%; + } + + &:nth-child(6) { + margin-right: -9px; + } + + &:nth-child(5) { + margin-right: -9px; + } + + &:nth-child(4) { + margin-right: -7px; + } + } + } + } + } + + .topic-list { + .item { + cursor: pointer; + &:not(:last-child) { + margin-bottom: 1px; + } + + .img { + width: 12px; + height: 10px; + margin-right: 9px; + } + + .text { + font-size: 14px; + color: #555555; + line-height: 28px; + + &:hover { + color: #000000; + } + } + } + } + } + + .selectives-box { + width: 628px; + height: 320px; + background-color: #ffffff; + border: 1px solid #e9eef2; + border-radius: 10px; + padding: 10px; + + .head-top { + background-color: rgba(246, 130, 81, 1); + margin-bottom: 22px; + } + + .list { + flex-wrap: wrap; + padding: 0 5px; + justify-content: space-between; + + .item { + font-size: 14px; + color: #555555; + line-height: 20px; + margin-bottom: 12px; + position: relative; + cursor: pointer; + + &:hover { + color: #000000; + } + + .dot { + width: 6px; + height: 6px; + border-radius: 50%; + background-color: #f68251; + margin-right: 10px; + } + + .text { + width: 265px; + } + } + } + } + } + + .header-left-bottom-box { + width: 948px; + height: 140px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(233, 238, 242, 1); + border-radius: 10px; + padding-left: 12px; + margin-top: 12px; + .adv { + margin-right: 26px; + .adv-icon { + width: 295px; + height: 118px; + border-radius: 5px; + cursor: pointer; + } + } + + .list { + font-size: 14px; + color: #555555; + padding-top: 12px; + width: 281px; + margin-right: 39px; + + &.list2 { + margin-right: 0; + + .item .text { + width: 255px; + } + } + .item { - width: 26px; - height: 26px; - border-radius: 50%; - .img { - width: 26px; - height: 26px; + height: 20px; + + &:not(:last-of-type) { + margin-bottom: 12px; + } + + .icon { + width: 6px; + height: 6px; + margin-right: 10px; + background: #30b0d5; border-radius: 50%; } - &:nth-child(6) { - margin-right: -9px; - } + .text { + cursor: pointer; + width: 266px; + text-decoration: none; + color: #555; - &:nth-child(5) { - margin-right: -9px; - } - - &:nth-child(4) { - margin-right: -7px; + &:hover { + color: #000000; + } } } } } } - .topic-list { - .item { - &:hover { - color: #000000; - } + .header-content-right { + width: 240px; + .post-entrance { + background-color: #fff; + border: 1px solid #e9eef2; + border-radius: 10px; + padding: 10px; + margin-bottom: 10px; - &:not(:last-child) { - margin-bottom: 1px; - } - - .img { - width: 12px; - height: 10px; - margin-right: 9px; - } - - .text { + .entrance-top { + height: 46px; + background-color: rgba(213, 243, 247, 1); + border-radius: 8px; font-size: 14px; - color: #555555; - line-height: 28px; + text-align: center; + color: #333; + cursor: pointer; + padding-left: 52px; + margin-bottom: 8px; + + &:hover { + background-color: rgba(194, 239, 246, 1); + } + + .icon { + width: 20px; + height: 20px; + margin-right: 13px; + } + } + + .entrance-bottom { + height: 90px; + flex-wrap: wrap; + background-color: #f6f6f6; + border-radius: 8px; + overflow: hidden; + + .item { + width: 50%; + height: 50%; + cursor: pointer; + font-size: 14px; + color: #333; + text-decoration: none; + + &:nth-child(odd) { + border-right: 1px solid #ebebeb; + } + + &:not(:nth-last-child(-n + 2)) { + border-bottom: 1px solid #ebebeb; + } + + &:hover { + background-color: #e7e7e7; + } + + .icon { + width: 16px; + height: 16px; + margin-right: 6px; + } + } + } + } + + .adv-broadside { + width: 240px; + height: 140px; + margin-bottom: 10px; + display: block; + .adv-broadside-img { + width: 240px; + height: 140px; + border-radius: 10px; + display: block; + } + } + + .group-box { + width: 240px; + height: 150px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(233, 238, 242, 1); + border-radius: 10px; + padding: 10px; + margin-bottom: 10px; + + .group { + background-color: rgba(246, 246, 246, 1); + flex-wrap: wrap; + height: 100%; + border-radius: 8px; + + .group-item { + width: 50%; + height: 50%; + cursor: pointer; + font-size: 14px; + color: #333; + text-decoration: none; + flex-direction: column; + overflow: hidden; + + &:nth-child(odd) { + border-right: 1px solid #ebebeb; + } + + &:not(:nth-last-child(-n + 2)) { + border-bottom: 1px solid #ebebeb; + } + + &:hover { + background-color: #e7e7e7; + } + + .icon { + width: 16px; + height: 16px; + margin-right: 6px; + } + + font-size: 14px; + text-align: center; + line-height: 22px; + + .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + color: #000000; + } + + .subtitle { + color: #555555; + } + } + } + } + + .offer-box { + width: 240px; + height: 214px; + background-color: #fff; + border: 1px solid #e9eef2; + border-radius: 10px; + padding: 17px 10px; + overflow: hidden; + + &.small { + height: 64px; + padding: 15px 10px; + } + + .item { + align-items: flex-start; + cursor: pointer; + margin-bottom: 19px; + + .avatar { + width: 24px; + height: 24px; + margin-right: 8px; + border-radius: 50%; + background-size: contain; + } + + .condition { + font-size: 12px; + color: #aaaaaa; + width: 180px; + } + + .titletitle { + font-family: "ArialMT", "Arial", sans-serif; + font-weight: 400; + font-size: 13px; + color: #333333; + width: 180px; + } + + &:hover .titletitle { + color: #000000; + } } } } } - .selectives-box { - width: 628px; - height: 320px; - background-color: #ffffff; - border: 1px solid #e9eef2; - border-radius: 10px; - padding: 10px; - - .head-top { - background-color: rgba(246, 130, 81, 1); - margin-bottom: 22px; - } - - .list { - flex-wrap: wrap; - padding: 0 5px; - justify-content: space-between; - - .item { - font-size: 14px; - color: #555555; - line-height: 20px; - margin-bottom: 12px; + .matter { + .matter-content { + margin-right: 12px; + .forum-sections-list { position: relative; + width: 897px; + 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; + margin-bottom: 20px; - .dot { - width: 6px; - height: 6px; - border-radius: 50%; - background-color: #f68251; - margin-right: 10px; + .img { + position: absolute; + top: -1px; + left: -1px; + width: 60px; + height: 240px; } - .text { - width: 265px; + .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + margin-bottom: 16px; + } + + .list { + .line { + &:not(:last-child) { + margin-bottom: 10px; + } + .item { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #333; + padding: 0 18px; + height: 32px; + background-color: rgba(246, 246, 246, 1); + border: 1px solid rgba(242, 242, 242, 1); + border-radius: 16px; + cursor: pointer; + + &:not(:last-child) { + margin-right: 10px; + } + } + } + } + } + .item-box { + margin-bottom: 12px; + } + } + + .sidebar { + .adv { + display: block; + width: 291px; + height: 220px; + margin-bottom: 12px; + cursor: pointer; + .adv-icon { + width: 291px; + height: 220px; + border-radius: 10px; + } + } + + .side-box { + width: 100%; + padding: 17px 10px 10px; + margin-bottom: 12px; + width: 291px; + border-radius: 10px; + + &.offer-side-box { + background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%); + } + + &.vote-side-box { + background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%); + } + + &.interviewexperience-side-box { + background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%); } } } } } - -.forum-sections-list { - position: relative; - width: 897px; - 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; - - .img { - position: absolute; - top: -1px; - left: -1px; - width: 60px; - height: 240px; - } - - .title { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 16px; - color: #000000; - margin-bottom: 16px; - } - - .list { - .line { - &:not(:last-child) { - margin-bottom: 10px; - } - .item { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 14px; - color: #333; - padding: 0 18px; - height: 32px; - background-color: rgba(246, 246, 246, 1); - border: 1px solid rgba(242, 242, 242, 1); - border-radius: 16px; - cursor: pointer; - - &:not(:last-child) { - margin-right: 10px; - } - } - } - } -} \ No newline at end of file diff --git a/css/public.css b/css/public.css index 96b2941..6799ed7 100644 --- a/css/public.css +++ b/css/public.css @@ -1398,7 +1398,8 @@ body { background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; - padding: 21px; + padding: 21px 10px 15px 21px; + margin-bottom: 12px; } .hot-tag .hot-tag-title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; @@ -1407,6 +1408,7 @@ body { font-size: 16px; color: #000000; position: relative; + margin-bottom: 15px; } .hot-tag .hot-tag-title .icon { position: absolute; @@ -1416,6 +1418,9 @@ body { width: 10px; height: 18px; } +.hot-tag .list { + flex-wrap: wrap; +} .hot-tag .list .item { line-height: 36px; color: #333333; @@ -1424,6 +1429,10 @@ body { line-height: 32px; padding: 0 14px; background-color: #f6f6f6; - border: #f2f2f2; + border: 1px solid #f2f2f2; border-radius: 16px; + margin-bottom: 14px; + margin-right: 9px; + cursor: pointer; + text-decoration: none; } diff --git a/css/public.less b/css/public.less index c897915..14097be 100644 --- a/css/public.less +++ b/css/public.less @@ -1659,15 +1659,17 @@ body { background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(233, 238, 242, 1); border-radius: 10px; - padding: 21px; + padding: 21px 10px 15px 21px; + margin-bottom: 12px; + .hot-tag-title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #000000; - position: relative; + margin-bottom: 15px; .icon { position: absolute; @@ -1680,6 +1682,8 @@ body { } .list { + flex-wrap: wrap; + .item { line-height: 36px; color: #333333; @@ -1688,8 +1692,12 @@ body { line-height: 32px; padding: 0 14px; background-color: rgba(246, 246, 246, 1); - border: rgba(242, 242, 242, 1); + border: 1px solid rgba(242, 242, 242, 1); border-radius: 16px; + margin-bottom: 14px; + margin-right: 9px; + cursor: pointer; + text-decoration: none; } } } diff --git a/css/search-tag.css b/css/search-tag.css new file mode 100644 index 0000000..d04d219 --- /dev/null +++ b/css/search-tag.css @@ -0,0 +1,114 @@ +#search-tag { + width: 1200px; + margin: 0 auto; +} +#search-tag .label-title { + margin-bottom: 24px; +} +#search-tag .label-title .icon { + width: 25px; + height: 20px; + margin-right: 12px; +} +#search-tag .label-title .text { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 28px; + color: #000000; +} +#search-tag .classify { + margin-bottom: 16px; +} +#search-tag .classify .item { + width: 50px; + height: 32px; + line-height: 32px; + text-align: center; + background-color: #ffffff; + border: 1px solid #f2f2f2; + border-radius: 12px; + color: #333333; + cursor: pointer; + font-size: 15px; +} +#search-tag .classify .item.pitch { + background-color: #d35110; + color: #ffffff; +} +#search-tag .classify .item:not(:last-child) { + margin-right: 10px; +} +#search-tag .quantity { + font-size: 14px; + line-height: 26px; + color: #555; + margin-bottom: 14px; +} +#search-tag .quantity .line { + width: 1px; + height: 14px; + background-color: #aaaaaa; + margin: 0 10px; +} +#search-tag .quantity .num { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + color: #000000; + margin: 0 10px; +} +#search-tag .matter .matter-content { + margin-right: 12px; +} +#search-tag .matter .matter-content .list-box .item-box { + margin-bottom: 12px; +} +#search-tag .matter .matter-content .empty { + width: 100%; + height: 70vh; + background-color: #ffffff; + border: 1px solid #e9eef2; + border-radius: 10px; + flex-direction: column; + margin-right: 12px; +} +#search-tag .matter .matter-content .empty .empty-icon { + width: 80px; + height: 94px; +} +#search-tag .matter .matter-content .empty .empty-text { + font-size: 14px; + color: #7f7f7f; + margin-top: 10px; +} +#search-tag .matter .matter-content .pages-box { + padding-bottom: 60px; + padding-top: 30px; +} +#search-tag .matter .matter-content .pages-box .item { + min-width: 24px; + height: 24px; + line-height: 24px; + text-align: center; + border-radius: 50px; + font-size: 14px; + color: #555555; + cursor: pointer; + padding: 0 4px; +} +#search-tag .matter .matter-content .pages-box .item.pitch { + background-color: #6fc16d; + color: #ffffff; +} +#search-tag .matter .matter-content .pages-box .arrows { + width: 7px; + height: 12px; + margin: 0 30px; + cursor: pointer; +} +#search-tag .matter .matter-content .pages-box .arrows.rotate180 { + transform: rotate(180deg); +} +#search-tag .matter .sidebar-box { + width: 291px; +} diff --git a/css/search-tag.less b/css/search-tag.less new file mode 100644 index 0000000..50cb1dc --- /dev/null +++ b/css/search-tag.less @@ -0,0 +1,138 @@ +#search-tag { + width: 1200px; + margin: 0 auto; + + .label-title { + margin-bottom: 24px; + + .icon { + width: 25px; + height: 20px; + margin-right: 12px; + } + + .text { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 28px; + color: #000000; + } + } + + .classify { + margin-bottom: 16px; + .item { + width: 50px; + height: 32px; + line-height: 32px; + text-align: center; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(242, 242, 242, 1); + border-radius: 12px; + color: #333333; + cursor: pointer; + font-size: 15px; + + &.pitch { + background-color: rgba(211, 81, 16, 1); + color: #ffffff; + } + + &:not(:last-child) { + margin-right: 10px; + } + } + } + + .quantity { + font-size: 14px; + line-height: 26px; + color: #555; + margin-bottom: 14px; + + .line { + width: 1px; + height: 14px; + background-color: #aaaaaa; + margin: 0 10px; + } + + .num { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + color: #000000; + margin: 0 10px; + } + } + + .matter { + .matter-content { + margin-right: 12px; + + .list-box { + .item-box { + margin-bottom: 12px; + } + } + + .empty { + width: 100%; + height: 70vh; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(233, 238, 242, 1); + border-radius: 10px; + flex-direction: column; + margin-right: 12px; + + .empty-icon { + width: 80px; + height: 94px; + } + + .empty-text { + font-size: 14px; + color: #7f7f7f; + margin-top: 10px; + } + } + + .pages-box { + padding-bottom: 60px; + padding-top: 30px; + + .item { + min-width: 24px; + height: 24px; + line-height: 24px; + text-align: center; + border-radius: 50px; + font-size: 14px; + color: #555555; + cursor: pointer; + padding: 0 4px; + + &.pitch { + background-color: #6fc16d; + color: #ffffff; + } + } + + .arrows { + width: 7px; + height: 12px; + margin: 0 30px; + cursor: pointer; + + &.rotate180 { + transform: rotate(180deg); + } + } + } + } + + .sidebar-box { + width: 291px; + } + } +} diff --git a/css/search.css b/css/search.css index 3fca160..c2224f5 100644 --- a/css/search.css +++ b/css/search.css @@ -2,20 +2,24 @@ width: 1200px; margin: 0 auto; } -#search .label-title { - margin-bottom: 24px; +#search .search-box { + width: 460px; + height: 48px; + background-color: #ffffff; + border: 1px solid #d7d7d7; + border-radius: 10px; + padding: 0 16px; + margin-bottom: 20px; } -#search .label-title .icon { - width: 25px; +#search .search-box .search-input { + border: none; + outline: none; + height: 100%; +} +#search .search-box .search-icon { + width: 20px; height: 20px; - margin-right: 12px; -} -#search .label-title .text { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 28px; - color: #000000; + cursor: pointer; } #search .classify { margin-bottom: 16px; @@ -57,6 +61,58 @@ color: #000000; margin: 0 10px; } -#search .matter .sidebar-box { - width: 219px; +#search .matter .matter-content { + margin-right: 12px; +} +#search .matter .matter-content .list-box .item-box { + margin-bottom: 12px; +} +#search .matter .matter-content .empty { + width: 100%; + height: 70vh; + background-color: #ffffff; + border: 1px solid #e9eef2; + border-radius: 10px; + flex-direction: column; + margin-right: 12px; +} +#search .matter .matter-content .empty .empty-icon { + width: 80px; + height: 94px; +} +#search .matter .matter-content .empty .empty-text { + font-size: 14px; + color: #7f7f7f; + margin-top: 10px; +} +#search .matter .matter-content .pages-box { + padding-bottom: 60px; + padding-top: 30px; +} +#search .matter .matter-content .pages-box .item { + min-width: 24px; + height: 24px; + line-height: 24px; + text-align: center; + border-radius: 50px; + font-size: 14px; + color: #555555; + cursor: pointer; + padding: 0 4px; +} +#search .matter .matter-content .pages-box .item.pitch { + background-color: #6fc16d; + color: #ffffff; +} +#search .matter .matter-content .pages-box .arrows { + width: 7px; + height: 12px; + margin: 0 30px; + cursor: pointer; +} +#search .matter .matter-content .pages-box .arrows.rotate180 { + transform: rotate(180deg); +} +#search .matter .sidebar-box { + width: 291px; } diff --git a/css/search.less b/css/search.less index 479fd24..cd0b988 100644 --- a/css/search.less +++ b/css/search.less @@ -2,21 +2,25 @@ width: 1200px; margin: 0 auto; - .label-title { - margin-bottom: 24px; + .search-box { + width: 460px; + height: 48px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 10px; + padding: 0 16px; + margin-bottom: 20px; - .icon { - width: 25px; - height: 20px; - margin-right: 12px; + .search-input { + border: none; + outline: none; + height: 100%; } - .text { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 28px; - color: #000000; + .search-icon { + width: 20px; + height: 20px; + cursor: pointer; } } @@ -68,10 +72,71 @@ .matter { .matter-content { + margin-right: 12px; + + .list-box { + .item-box { + margin-bottom: 12px; + } + } + + .empty { + width: 100%; + height: 70vh; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(233, 238, 242, 1); + border-radius: 10px; + flex-direction: column; + margin-right: 12px; + + .empty-icon { + width: 80px; + height: 94px; + } + + .empty-text { + font-size: 14px; + color: #7f7f7f; + margin-top: 10px; + } + } + + .pages-box { + padding-bottom: 60px; + padding-top: 30px; + + .item { + min-width: 24px; + height: 24px; + line-height: 24px; + text-align: center; + border-radius: 50px; + font-size: 14px; + color: #555555; + cursor: pointer; + padding: 0 4px; + + &.pitch { + background-color: #6fc16d; + color: #ffffff; + } + } + + .arrows { + width: 7px; + height: 12px; + margin: 0 30px; + cursor: pointer; + + &.rotate180 { + transform: rotate(180deg); + } + } + } } .sidebar-box { - width: 219px; + width: 291px; } } } diff --git a/img/add-btn-black.svg b/img/add-btn-black.svg new file mode 100644 index 0000000..df3c28c --- /dev/null +++ b/img/add-btn-black.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/img/arrows-gray-deep.svg b/img/arrows-gray-deep.svg new file mode 100644 index 0000000..365ea96 --- /dev/null +++ b/img/arrows-gray-deep.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/img/arrows-gray-simple.svg b/img/arrows-gray-simple.svg new file mode 100644 index 0000000..cc02acf --- /dev/null +++ b/img/arrows-gray-simple.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/img/forum.png b/img/forum.png new file mode 100644 index 0000000000000000000000000000000000000000..70a2a29438670a48d279820d0e5735e70c9cf1e7 GIT binary patch literal 3645 zcmcJSc{H2rx5tw-DltTG(4%QZ2sM^ARYOb6A!cc-(xNCe);v$4HPy^<%+eZbE{>r! zwlx+tHew!v(xNDe;>Nvq-TUWV_paYv>)G$#&wls%?mwQ-yPx$&8R%)UGVwA20034k zoSG5ccb^&LJpEa2QjtS=af=YGulQZ^pLr_Gz~G@=T-u=09JauAesVv#ez4 zK06OW0{#_?9EBB9t{S`Lb!}3xj!6asm(6Z_6toQ_UMGHDz549LhgbNQDDf&0cK$rO z13A__IH5d8;;T$d4YB?Fqq*3ZX*WBYo4jly$`T@E8!g)`SQ?fnSmDZ-pKe46Zb;(< zg#S@Cwu~Gjg81C6d1`v@UEL(gXgottX~xNEbbNgwiG-_@!xg$O?i3csDK=eR;iSpK zJet|sQQ;PlZu5rDH=YMMi3lIfe;i)P&w0YHB(&i+l$zV5Uwgz0B!m-CVIzakVv~EW zV2%}8^iNBa(hitVRw@gUjz51rG=u{Lk4#eG@AH6Qk*h8d_t0P@9Q|A+Z51AZ9iE3( zYSZ)DOwXl8_yMH+50}jTf+y^hmDNMzZ#zsgA{qn+>*m$%gV)jCFyo&zHRO%hoB3&| z2a`xC0ywnNMCLBrGD|oB%%LNa7|BX+#afbf{Q?M%lPXX{$6yMNl&-SMUu6_qi zL1o6sMn(DUP7V1(p~=+#(dMFbw`@1tz+(wxGra=V6~o;!D&e@G5wlRz7*J{(Fj#cw zz9&d-YX)Y2Fk&y?wA@phc7In)W%KYy@F;5U_aeq^OM-CPPke3JODGMJK1hcabKtu6 zf`^3JPDA6I{J-^4!M}*U0$&fSqB^H`@g-Sab|HTrW+!EQ-pEm9EM8i@qpFQKC=hrG zNqQ%Rb;o04u@jWj=M!JbJ@H)vPyaLd9P1ZfYk1UoZz^ePFjET7{bU1D498Ih*urV| zN=cuvE%s1mj5nA7$@iz|d8^&p2Xi|!=c^zaoj2>N-S6J0atVJso5)16{$`C=!0-dO zohc+HQc8>y`Fo^kz4fi1LM+c1G890fV52Rn2*I=C#zwKvn$`u#f2gXtj1CZS)Wp20 z#I3$$nk38M6o-L8LPjIS_;_Knp2Q=n0dxkq2#$+eiD-^}Fhv3pqDiHE$p78^tNzS9y|N?RJ76YdmILyz_T|VbYM5 zDh}@i6JT{T$!6$O-p+KNo~_c?@Un90g z)09+$>G$Xq5fKT9y!<|A+EV0)e&J)pQZ8Hdaq9Z7o>}!112nv`c5jX|-q&>`JkGl= z(S)L@>oLHV`pCS!yCBss!ai3m8l7`aC z3%d%ozWVNOYVQI#Ujw;*@l;#FAty39c}FoK$5eg&qM64A5A21IRI=vGCEHqFQf;|8 zzBz)eqo>C=w`K9tXp3F8d#g)YWShQ^2Q6q)6pX6hliU09E$Yem<*C+2R=#-hYkq@{ z#NMrLvMwFxz0IwlZ_)?nRQ6}4!`^qkm|_2ANl+674^R5Zin3ib+us!<^SJzGc_k?- z&IRg8={yWmB~*Mdr*IT`!hv!I{0YNQ`ID}8N<3D$hn8TyV32ZS3tOqF7H0}sXs zGOH?;R%$NKISu&XRKGHtjeE?W2j(N!N-NOR5`cs_opn^V!?FZ<;vi_FiZJ4HZr16t z_Ye%vn`@J&fkfwN7$56;`|RJrx0q({96u&ZNb!H%m8Q8H3BX?ymTK{KQ_W&_v<0Hk z)v2oJd5qhTE@oL%3@7tenK?P6q{g=Z%w=3?^dT^QII^@dFYl>yejZWAct6Lc*YhnE zTclFKaPXU@q{R(37VxKe>HCz9*JY#7e5Id#QrtMJ)}Ec2FWkK;_p*9>hx2q~@E==T zrJTV(1a5tb=Nw4E%PP7x=#f}(VniO_0cr@l4-;q$QY?Qy>TeD|Qpmp$;{WL@pikWW zJ&KtqOSU6nL@K9ONT<-ziPqfAl&SE_yP`Dtt=D?~M!eFi78o^{!3jyKAytn8%>;L>jkm;l%>>+D zZ#nW>Q(*VEB8O@Z9`^Fuzx6tQ>15|RTvM6$e)D@Xb{qZV;gR@_*}4$xQed*KOdGZN zyUgNFMhv@qfhK*lf`{IepXM)bN@D8L9@m!~vx)1+E8g?LupnDnK)$JE&j@&UI|r- z50_!61S6xG4gU(LasdfZf*#Hy!rVU=kdV z#wq@tyB(HWv%3^b%0(IgfcJ0Wsdu@gG#*pz5WA(0+bgsAOr5`e{247(S4|xkP*^>T z`VAIY_DfjLDswC+^vk3>aS(^69YlTOipB$+#pGmr0;{})TV)-pVA5v(f*O3R5BFRX zCiNzutiYqod66_eN3B^dop_~g>7F8+ETK)D)^XQXm|`vmu2+7WGe5x!KB=C_e0#a3 z`O%~yaEEW9#eMvhq8w8i$HN=!KeUkV`-Ky+h>W|{1tx)(_pP$r82Vato~s$Y~c$E zPNeG~#IN;BVxS*uaY$Id7{&1W1lUqr5FU}oP&gf{K@#MmA9diEe2jT1HkuyKySP4| z)2_j8qY^)nf;+xkGE8XQ`F4HWW#JL{N>e~IR+rw6lQm>hAOwMaG|DXJN( zUbpa%aN?Yt9jE<#f`LcsBEckDveN=%>wuEs?-5P*PjM=n)jgT955Va9?^p73JpT|@W|$EaavFGAAtQeQ*~b0No%PJ=FRXHBc8 zyP-pBalt0l6XSiIzUH&`V86QNs=t-hPx#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@ z1ONa40RR91K%fHv1ONa40RR91KmY&$07g+lumAuAtVu*cRCodHTJ3QYF%Wea{$ncO zI^d`vO9e3%txF`n50tSX zB+SES>MPNUOrk=G(=f&Dupz$MH&AWr$A&G?$24W!1)T4o$JS_5y-V~HEddNtLat?WdmLBiDCnf}>9&``Gv{eg%Se zP|2ySH?Xgv+ZMkK>{&vH(h_HpWdvFIwVEu9hd52ieF%>r*IPhOq1-?h*&_H1nluDS zNZ4qT75fk?7kXvn)oO{w?!bATS}+-fr1Hf2b3QIKwy7My8}LWp1};cT0=Rdnz^LUK z0^1^28Pfq7Ma9IX_*6!oA(|J?sGC4WVSsy+0!(e!-odAW7SI^spY9x5L#1JDUBlie z1gjR<7?fz_BD5Tg?VtqhB9{oZ_!;LxJ(3geMA)yrvuqiUm8S0k2qYRmbKgQ|&>GrR zDiACT5+1Vo@ta`eDRohYcuTl>jhl-qt)NVNZsg+pmBmRgXa%NV&LE#Qa92i5SJ;6- zt9@k=lM$eiSeP@&X9jm|`1b)5NUS>l^80@ZZ-Dae@DNfOq}K-C2kbz?Z;K`*pg({e zKsH!G64U3p>XS_2S}NE-fgG}i*Rg(rN=V7ebuj*0{2L(H5NoZFZWOF<$h8sXel6a{ z8`|dp>Hr-2`b)YG*pza>x`R6JJZ{Gcj1w3q@O&rm3+Z1PlD;py-2eap07*qoM6N<$ Ef-QAa+5i9m literal 0 HcmV?d00001 diff --git a/img/offer.svg b/img/offer.svg new file mode 100644 index 0000000..64a304c --- /dev/null +++ b/img/offer.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/img/right-arrow-black.svg b/img/right-arrow-black.svg new file mode 100644 index 0000000..171eed6 --- /dev/null +++ b/img/right-arrow-black.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/img/search-icon.svg b/img/search-icon.svg new file mode 100644 index 0000000..581fd6d --- /dev/null +++ b/img/search-icon.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/img/summarize.png b/img/summarize.png new file mode 100644 index 0000000000000000000000000000000000000000..4353e9d0c7f8ce4a4a1a417e6c23b0c224c17941 GIT binary patch literal 817 zcmeAS@N?(olHy`uVBq!ia0vp^4nSN^5+IfWVg?501&j>LK$;OGwtxvP>#%?s&b9?9bQexL$H2fe+tbA{ zB!l&Bw71`31Cg9YUh8i_WGbB>HXmSzh+hQASzP(N^S!LiwoSxo+Q$ud1=v5>k_Q9OsCe|^Q%+SpZo@#+ow zdh5N_f*#Ghew^(~p!m_voLo<&W4O8wY-hXU_*6Ng&;I&(h1_SB+pa$JW)|{z=*wTE za&elkTi@+8HF>ECi&DDYi)zfZ%W>M@kgqts*(q+5pUivT0+#fDGjdq%d=At*-77rN z|I}mM(Fe)QaSNs`wu_vUJ+BjJe2jA{*E!y;F`wUX{V_SWebbkvj3USUOWqfU@FoU7 z5V<2&lW{;IODLdO&*#B{1MJh21FP@y?r>em^<;)PYc2Z&))OaJw(OERaLDqLx#%i+ z#ck|<+D~3wxyT?kr$K5>m!!}J&N)khZj>_11*me*o4%^7_5!cZoE5#F-~BQ_c(96h zs_rhIwpf3MnNqIFNz5*{r5!$5FfztW%IGX)B8OMeY5#-I?B~U;++{swtXFcDtL;vE zXT8|8?f;zFWo~a}uRda1lEYxgGP`WIp6!)AO^Rjf7A(85va~U8TZEnHyjlas*a!2k r_Bq=9wBIei;Qfq+2NYKvWUXVI5+)K>>&vkclw3Vs{an^LB{Ts5iC9QT literal 0 HcmV?d00001 diff --git a/img/triangle-violet.svg b/img/triangle-violet.svg new file mode 100644 index 0000000..bc60f99 --- /dev/null +++ b/img/triangle-violet.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/img/vote.svg b/img/vote.svg new file mode 100644 index 0000000..66abf4c --- /dev/null +++ b/img/vote.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index b092cd3..0c5adf8 100644 --- a/index.html +++ b/index.html @@ -4,153 +4,288 @@ - Document + 论坛首页 + -
- -
-
-
- -
话题
+
+ + +
+
+
+ + + + + +
-
-
{{ ongoingbj.title }}
-
{{ ongoingbj.description }}
-
-
-
{{ ongoingbj.comments }}
-
人正在讨论
+ +
+
+
+ +
话题
-
-
- +
+
{{ ongoingbj.title }}
+
{{ ongoingbj.description }}
+
+
+
{{ ongoingbj.comments }}
+
人正在讨论
+
+
+
+ +
+
+
+
+
+
+ +
{{ item.title }}
+
+
+
+ +
+
+ +
精选
+
+
+
+
+
{{ item.title }}
-
-
- -
{{ item.title }}
-
-
-
-
-
- -
精选
-
-
-
-
-
美国各院校申请时间汇总（一）美国各院校申请时间汇总（一）美国各院校申请时间汇总（一）
-
-
-
-
- -
- -
论坛版块
-
-
-
香港
-
香港
-
香港
-
-
-
经济/商科
-
经济/商科
-
经济/商科
-
-
-
香港
-
香港
-
香港
-
-
-
香港
-
香港
-
香港
-
-
-
- -
-
- -
小P学姐
- -
2025-8-11 01:30
-
- -
- -
3016
-
- -
- -
- - +
+
+
+
26Fall-香港科技大学 MSc Offer +
+
+
-
- - -
香港
-
香港
+
+
+
+ 我要发帖 +
+
+
+ + 发帖 +
+
+
+ + + + + +
+
+
+
{{ item.title }}
+
{{ item.subtitle }}
+
+
+
+ + +
+
+
+
+ +
+ +
论坛版块
+
+ -
【干货】香港留学费用准备
+
+
-
在即将赴港的时候，很多同学好奇香港一年制硕士下来的整体费用大概是多少，其实主要包括学费，租房费和生活费三部分。学费的话根据不同香港来定，大概在10-30万港币之间，比较固定…
- -
- -
在即将赴港的时候，很多同学好奇香港一年制硕士下来的整体费用大概是多少，其实主要包括学费，租房费和生活费三部分。学费的话根据不同香港来定，大概在10-30万港币之间，比较固定…
+
+
+ + 26Fall祈福，求offer得offer！ + + + 26Fall祈福，求offer得offer！ + -
- - + + + + \ No newline at end of file diff --git a/js/details.js b/js/details.js index f0356de..da66801 100644 --- a/js/details.js +++ b/js/details.js @@ -60,7 +60,7 @@ const appSectionIndex = createApp({ const goLogin = () => { if (typeof window === "undefined") return; if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) { - if (window["userInfoWin"]["uid"]) isNeedLogin.value = false; + if (window["userInfoWin"]["uid"]) isLogin.value = true; else ajax_login(); } else ajax_login(); }; diff --git a/js/homepage-me.js b/js/homepage-me.js index e80f8e0..48e9c2c 100644 --- a/js/homepage-me.js +++ b/js/homepage-me.js @@ -69,7 +69,7 @@ const appSectionIndex = createApp({ const goLogin = () => { if (typeof window === "undefined") return; if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) { - if (window["userInfoWin"]["uid"]) isNeedLogin.value = false; + if (window["userInfoWin"]["uid"]) isLogin.value = true; else ajax_login(); } else ajax_login(); }; diff --git a/js/homepage-other.js b/js/homepage-other.js index efed5dc..8181cca 100644 --- a/js/homepage-other.js +++ b/js/homepage-other.js @@ -68,7 +68,7 @@ const appSectionIndex = createApp({ const goLogin = () => { if (typeof window === "undefined") return; if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) { - if (window["userInfoWin"]["uid"]) isNeedLogin.value = false; + if (window["userInfoWin"]["uid"]) isLogin.value = true; else ajax_login(); } else ajax_login(); }; diff --git a/js/index.js b/js/index.js index e32ce27..71d02ba 100644 --- a/js/index.js +++ b/js/index.js @@ -1,26 +1,51 @@ -const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue; +const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue; +import { headTop } from "../component/head-top/head-top.js"; +import { itemForum } from "../component/item-forum/item-forum.js"; -createApp({ +const appIndex = createApp({ setup() { - let ongoingbj = ref({ - commentUser: [ - { - avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/mini?random=iyHTPLKnfrDC", - }, - { - avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/mini?random=iyHTPLKnfrDC", - }, - ], - comments: 5, - created_at: "2025-08-22 16:01:34", - description: "''", - status: 1, - title: "【征稿】第五届糖尿病与内分泌学国际研讨会(ICDE 2025)", - topicid: 254293, - uniqid: "C840eySXCXSn", - }); + onMounted(() => getUserInfoWin()); - console.log(ongoingbj); + let isLogin = ref(true); + let realname = ref(1); // 是否已经实名 + let userInfoWin = ref({}); + + const getUserInfoWin = () => { + const checkUser = () => { + const user = window.userInfoWin; + if (!user) return; + document.removeEventListener("getUser", checkUser); + realname.value = user.realname; + userInfoWin.value = user; + if (user?.uin > 0 || user?.uid > 0) isLogin.value = true; + }; + document.addEventListener("getUser", checkUser); + }; + + const openAttest = () => { + const handleAttestClose = () => { + document.removeEventListener("closeAttest", handleAttestClose); + realname.value = window.userInfoWin?.realname || 0; + }; + // 启动认证流程时添加监听 + document.addEventListener("closeAttest", handleAttestClose); + loadAttest(2); + }; + + // 跳转登录 + const goLogin = () => { + if (typeof window === "undefined") return; + if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) { + if (window["userInfoWin"]["uid"]) isLogin.value = true; + else ajax_login(); + } else ajax_login(); + }; + + provide("isLogin", isLogin); + provide("userInfoWin", userInfoWin); + provide("realname", realname); + provide("openAttest", openAttest); + provide("goLogin", goLogin); let pastList = ref([ { @@ -70,6 +95,200 @@ createApp({ }, ]); - return { ongoingbj, pastList }; + onMounted(() => { + offerListScrolling(); + getSectionList(); + + getList(); + + window.addEventListener("scroll", handleScroll); + + getTalkingRecommend(); + getTopicHandpicked(); + getTopicLatest(); + }); + + let ongoingbj = ref({}); // 话题数据 + + const getTalkingRecommend = () => { + ajaxget("/v2/api/forum/talkingRecommend").then((res) => { + if (res.code != 200) return; + let data = res["data"] || []; + + const getTargetItem = (arr) => { + const target = arr.find((item) => item.state === 1); + return target !== undefined ? target : arr.length > 0 ? arr[0] : null; + }; + + ongoingbj.value = getTargetItem(data.ongoing || []); + pastList.value = data.past || []; + }); + }; + + let topicHandpickedList = ref([]); // 精选列表 + const getTopicHandpicked = (uniqid) => { + ajaxget(`/v2/api/forum/topicHandpicked?limit=16`).then((res) => { + if (res.code != 200) return; + let data = res["data"] || []; + console.log("data", data); + topicHandpickedList.value = data; + }); + }; + + let offer = ref([]); // 面经列表 + let vote = ref([]); // 面经列表 + let interviewexperience = ref([]); // 面经列表 + const getTopicLatest = () => { + ajaxget(`/v2/api/forum/getTopicLatest?limit=4`).then((res) => { + const data = res.data || []; + + data.vote.forEach((item) => { + if (!item.title) { + item.title = item.content; + item.content = ""; + } + }); + + console.log("data", data); + offer.value = data.offer; + vote.value = data.vote; + interviewexperience.value = data.interviewexperience; + + console.log("interviewexperience", interviewexperience.value); + }); + }; + + const handleScroll = () => { + const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; + + const scrollHeight = document.documentElement.scrollHeight; + const clientHeight = document.documentElement.clientHeight; + + // 列表下 滑动到底部 获取新数据 + if (scrollTop + clientHeight >= scrollHeight - 40) getList(); + }; + + let offerlist = ref([]); // offer 列表滚动 数据 + + const offerListRef = ref(null); + const custom_2AdvRef = ref(null); + + // 处理 offer 列表滚动 + const offerListScrolling = (data) => { + ajax("https://forum.gter.net/api/index/dynamic").then((res) => { + if (res.code == 200) { + let data = res["data"] || []; + + data.forEach((item) => (item.date = strtimeago(item.date))); + + let targetValue = []; + targetValue = [...data, ...data.slice(0, 6)]; + + offerlist.value = targetValue; + nextTick(() => autoOfferListScroll()); + } + }); + }; + + let offerTimer = null; + + // offer list 滚动 + const autoOfferListScroll = () => { + if (typeof ScrollText !== "function") { + setTimeout(() => autoOfferListScroll(), 500); + return; + } + var scrollup = new ScrollText("offer-box"); + scrollup.LineHeight = 56.5; + scrollup.Amount = 1; + scrollup.Delay = 1; + scrollup.Start(); + scrollup.Direction = "up"; + }; + + // 鼠标移入 + const offerMouseover = (event) => { + if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) clearInterval(offerTimer); + }; + + // 鼠标移出 + const offerMouseout = (event) => { + if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) autoOfferListScroll(); + }; + + const popList = [ + { + title: "26FALL", + subtitle: "申请群", + }, + { + title: "申请求助", + subtitle: "寄托院校君", + }, + { + title: "香港租房", + subtitle: "交流群", + }, + { + title: "香港租房顾问", + subtitle: "寄托方同学", + }, + ]; + + let sectionList = ref([]); + const getSectionList = () => { + ajaxget("/v2/api/forum/getSectionList").then((res) => { + if (res.code != 200) return; + const data = res.data || []; + let obj = {}; + data.forEach((element) => (obj[element.cid] = element)); + sectionList.value = groupByCid(data); + }); + }; + + const groupByCid = (arr) => { + const groups = arr.reduce((acc, item) => { + const cid = item.cid ?? "default"; // 若 cid 不存在，归为 'default' 组 + if (!acc[cid]) { + acc[cid] = []; + } + acc[cid].push(item); + return acc; + }, {}); + + return Object.values(groups); + }; + + let loading = false; + let page = ref(1); + let list = ref([]); + const getList = () => { + if (loading || page.value == 0) return; + loading = true; + // wx.showLoading(); + ajaxget(`/v2/api/forum/topicLists?type=thread&page=${page.value || 1}`) + .then((res) => { + // wx.hideLoading(); + if (res.code != 200) return; + let data = res.data; + list.value = list.value.concat(data.data); + page.value = data.count > data.limit * data.page ? page.value + 1 : 0; + + loading = false; + }) + .catch((err) => { + // wx.hideLoading(); + err = err.data; + if (err.code == 401) goLogin(); + loading = false; + }); + }; + + return { interviewexperience, vote, offer, topicHandpickedList, list, sectionList, popList, custom_2AdvRef, ongoingbj, pastList, offerMouseover, offerMouseout, offerlist, offerListRef }; }, -}).mount("#appIndex"); +}); + +appIndex.component("headTop", headTop); +appIndex.component("itemForum", itemForum); + +appIndex.mount("#appIndex"); diff --git a/js/save.js b/js/save.js index c85fad8..45171cf 100644 --- a/js/save.js +++ b/js/save.js @@ -27,6 +27,8 @@ const watchList = { "../component/head-top/head-top.txt": "../component/head-top/head-top.js", // 监听 hot-tag.txt，同步到 hot-tag.js "../component/hot-tag/hot-tag.txt": "../component/hot-tag/hot-tag.js", + // 监听 hot-search.txt，同步到 hot-search.js + "../component/hot-search/hot-search.txt": "../component/hot-search/hot-search.js", // 可添加更多文件（格式：'txt路径': 'js路径'） // './component/other/other.txt': './component/other/other.js', diff --git a/js/scrolltext.js b/js/scrolltext.js new file mode 100644 index 0000000..1cd6749 --- /dev/null +++ b/js/scrolltext.js @@ -0,0 +1,95 @@ +function ScrollText(content, btnPrevious, btnNext, autoStart) { + this.Delay = 10; + this.LineHeight = 20; + this.Amount = 1; //注意:LineHeight一定要能整除Amount. + this.Direction = "up"; + this.Timeout = 1500; + this.ScrollContent = this.$(content); + this.ScrollContent.innerHTML += this.ScrollContent.innerHTML; + //this.ScrollContent.scrollTop = 0; + if (btnNext) { + this.NextButton = this.$(btnNext); + this.NextButton.onclick = this.GetFunction(this, "Next"); + this.NextButton.onmouseover = this.GetFunction(this, "Stop"); + this.NextButton.onmouseout = this.GetFunction(this, "Start"); + } + if (btnPrevious) { + this.PreviousButton = this.$(btnPrevious); + this.PreviousButton.onclick = this.GetFunction(this, "Previous"); + this.PreviousButton.onmouseover = this.GetFunction(this, "Stop"); + this.PreviousButton.onmouseout = this.GetFunction(this, "Start"); + } + this.ScrollContent.onmouseover = this.GetFunction(this, "Stop"); + this.ScrollContent.onmouseout = this.GetFunction(this, "Start"); + if (autoStart) { + this.Start(); + } +} + +ScrollText.prototype.$ = function (element) { + return document.getElementById(element); +} + +ScrollText.prototype.Previous = function () { + clearTimeout(this.AutoScrollTimer); + clearTimeout(this.ScrollTimer); + this.Scroll("up"); +} + +ScrollText.prototype.Next = function () { + clearTimeout(this.AutoScrollTimer); + clearTimeout(this.ScrollTimer); + this.Scroll("down"); +} + +ScrollText.prototype.Start = function () { + clearTimeout(this.AutoScrollTimer); + this.AutoScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Timeout); +} + +ScrollText.prototype.Stop = function () { + clearTimeout(this.ScrollTimer); + clearTimeout(this.AutoScrollTimer); +} + +ScrollText.prototype.AutoScroll = function () { + if (this.Direction == "up") { + if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) { + this.ScrollContent.scrollTop = 0; + } + this.ScrollContent.scrollTop += this.Amount; + } else { + if (parseInt(this.ScrollContent.scrollTop) <= 0) { + this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2; + } + this.ScrollContent.scrollTop -= this.Amount; + } + if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) { + this.ScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Delay); + } else { + this.AutoScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Timeout); + } +} + +ScrollText.prototype.Scroll = function (direction) { + if (direction == "up") { + if (this.ScrollContent.scrollTop == 0) { + this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2; + } + this.ScrollContent.scrollTop -= this.Amount; + } else { + this.ScrollContent.scrollTop += this.Amount; + } + if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) { + this.ScrollContent.scrollTop = 0; + } + if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) { + this.ScrollTimer = setTimeout(this.GetFunction(this, "Scroll", direction), this.Delay); + } +} + +ScrollText.prototype.GetFunction = function (variable, method, param) { + return function () { + variable[method](param); + } +} \ No newline at end of file diff --git a/js/search-tag.js b/js/search-tag.js new file mode 100644 index 0000000..60445f4 --- /dev/null +++ b/js/search-tag.js @@ -0,0 +1,225 @@ +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"; + +const appSearch = createApp({ + setup() { + let tag = ref(""); + onMounted(() => { + const params = getUrlParams(); + tag.value = params.tag || ""; + init(); + + getUserInfoWin(); + setTimeout(() => (permissions.value = window["permissions"] || ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"]), 1000); + }); + + 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 permissions = ref([]); + + const getUserInfoWin = () => { + const checkUser = () => { + const user = window.userInfoWin; + if (!user) return; + document.removeEventListener("getUser", checkUser); + realname.value = user.realname; + userInfoWin.value = user; + if (user?.uin > 0 || user?.uid > 0) isLogin.value = true; + permissions.value = user?.authority || []; + }; + document.addEventListener("getUser", checkUser); + }; + + const openAttest = () => { + const handleAttestClose = () => { + document.removeEventListener("closeAttest", handleAttestClose); + realname.value = window.userInfoWin?.realname || 0; + }; + // 启动认证流程时添加监听 + document.addEventListener("closeAttest", handleAttestClose); + loadAttest(2); + }; + + // 跳转登录 + const goLogin = () => { + if (typeof window === "undefined") return; + if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) { + if (window["userInfoWin"]["uid"]) isLogin.value = true; + else ajax_login(); + } else ajax_login(); + }; + + provide("isLogin", isLogin); + provide("userInfoWin", userInfoWin); + provide("realname", realname); + provide("openAttest", openAttest); + provide("goLogin", goLogin); + + const cutTab = (type) => { + if (tabValue.value == type) return; + page.value = 1; + list.value = []; + count.value = 0; + tabValue.value = type; + pagination.value = [] + + getList(); + }; + + let tabList = ref({ + all: "全部", + thread: "论坛", + offer: "Offer", + offer_summary: "总结", + interviewexperience: "面经", + vote: "投票", + }); + + let tabValue = ref("all"); + + let uniqid = ""; + const init = () => { + ajaxget(`/v2/api/forum/tagDetails?name=${tag.value}`).then((res) => { + if (res.code != 200) { + creationAlertBox("error", res.message); + page.value = 0; + return; + } + const data = res.data; + uniqid = data.uniqid; + page.value = 1; + getList(); + }); + }; + + let loading = 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; + // page.value += 1; + // wx.showLoading(); + const limit = 20; + ajaxget(`https://api.gter.net/v2/api/forum/topicLists?type=${tabValue.value == "all" ? "" : tabValue.value}&page=${page.value}&limit=${limit}`) + .then((res) => { + // wx.hideLoading(); + if (res.code != 200) { + creationAlertBox("error", res.message); + return; + } + + let data = res.data; + list.value = data.data; + // page.value = data.count > limit * data.page ? page.value : null; + count.value = data.count; + loading = false; + maxPage.value = Math.ceil(count.value / limit); + pagination.value = calculatePagination(page.value, maxPage.value); + }) + .catch((err) => { + // wx.hideLoading(); + err = err.data; + if (err.code == 401) goLogin(); + loading = false; + }); + }; + + const calculatePagination = (currentPage, totalPages, visibleCount = 3) => { + // 处理特殊情况：总页数小于等于1时，无需显示分页 + if (totalPages <= 1) { + return []; + } + + const pages = []; + // 始终显示第一页 + pages.push(1); + + // 计算中间需要显示的页码范围 + let startPage = Math.max(2, currentPage - Math.floor(visibleCount / 2)); + let endPage = Math.min(totalPages - 1, startPage + visibleCount - 1); + + // 调整起始页码，确保显示足够数量的页码 + startPage = Math.max(2, endPage - visibleCount + 1); + + // 前面的省略号：如果第一页和起始页之间有间隔 + if (startPage > 2) { + pages.push("..."); + } + + // 添加中间的页码 + for (let i = startPage; i <= endPage; i++) { + pages.push(i); + } + + // 后面的省略号：如果最后一页和结束页之间有间隔 + if (endPage < totalPages - 1) { + pages.push("..."); + } + + // 始终显示最后一页（如果总页数大于1） + if (totalPages > 1) { + pages.push(totalPages); + } + + return pages; + }; + + const cutPage = (value) => { + if (value == "...") return; + if (value == page.value) return; + page.value = value; + getList(); + }; + + const prevPage = () => { + page.value -= 1; + pagination.value = [] + getList(); + }; + + const nextPage = () => { + page.value += 1; + pagination.value = [] + getList(); + }; + + return { maxPage, prevPage, nextPage, tag, tabValue, cutTab, tabList, count, list, page, pagination, cutPage }; + }, +}); +appSearch.component("item-forum", itemForum); +appSearch.component("itemOffer", itemOffer); +appSearch.component("itemSummary", itemSummary); +appSearch.component("itemVote", itemVote); +appSearch.component("itemMj", itemMj); +appSearch.component("itemTenement", itemTenement); +appSearch.component("head-top", headTop); +appSearch.component("hot-tag", hotTag); +appSearch.component("hot-search", hotSearch); +appSearch.component("slideshow-box", slideshowBox); +appSearch.component("latest-list", latestList); +appSearch.mount("#search-tag"); diff --git a/js/search.js b/js/search.js index 26a1102..a761486 100644 --- a/js/search.js +++ b/js/search.js @@ -1,54 +1,90 @@ 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"; const appSearch = createApp({ setup() { + let kw = ref(""); onMounted(() => { const params = getUrlParams(); - const id = params.section || ""; + kw.value = params.kw || ""; + getList(); - // init(); + getUserInfoWin(); + setTimeout(() => (permissions.value = window["permissions"] || ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"]), 1000); }); - const classifyList = ref([ - { - text: "全部", - type: "", - }, - { - text: "帖子", - type: "thread", - }, - { - text: "Offer", - type: "offer", - }, - { - text: "总结", - type: "offer_summary", - }, - { - text: "面经", - type: "interviewexperience", - }, - { - text: "投票", - type: "vote", - }, - { - text: "租房", - type: "tenement", - }, - ]); + 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 classify = ref(""); + let permissions = ref([]); - const classifyChange = (type) => { - if (classify.value == type) return; + const getUserInfoWin = () => { + const checkUser = () => { + const user = window.userInfoWin; + if (!user) return; + document.removeEventListener("getUser", checkUser); + realname.value = user.realname; + userInfoWin.value = user; + if (user?.uin > 0 || user?.uid > 0) isLogin.value = true; + permissions.value = user?.authority || []; + }; + document.addEventListener("getUser", checkUser); + }; - classify.value = type; + const openAttest = () => { + const handleAttestClose = () => { + document.removeEventListener("closeAttest", handleAttestClose); + realname.value = window.userInfoWin?.realname || 0; + }; + // 启动认证流程时添加监听 + document.addEventListener("closeAttest", handleAttestClose); + loadAttest(2); + }; + + // 跳转登录 + const goLogin = () => { + if (typeof window === "undefined") return; + if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) { + if (window["userInfoWin"]["uid"]) isLogin.value = true; + else ajax_login(); + } else ajax_login(); + }; + + provide("isLogin", isLogin); + provide("userInfoWin", userInfoWin); + provide("realname", realname); + provide("openAttest", openAttest); + provide("goLogin", goLogin); + + const cutTab = (type) => { + if (tabValue.value == type) return; + page.value = 1; + list.value = []; + count.value = 0; + tabValue.value = type; + pagination.value = []; + + getList(); }; let tabList = ref({ @@ -62,10 +98,138 @@ const appSearch = createApp({ let tabValue = ref("all"); - return { tabValue, tabList, classifyChange, classifyList, classify }; + let uniqid = ""; + const init = () => { + ajaxget(`https://offer.gter.net/miniprogramApi/offer/search`).then((res) => { + if (res.code != 200) { + creationAlertBox("error", res.message); + page.value = 0; + return; + } + console.log("res", res); + }); + }; + + let loading = 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; + 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; + } + + 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 + + count.value = data.count; + loading = false; + maxPage.value = Math.ceil(count.value / limit); + pagination.value = calculatePagination(page.value, maxPage.value); + }) + .catch((err) => { + // wx.hideLoading(); + err = err.data; + if (err.code == 401) goLogin(); + loading = false; + }); + }; + + const calculatePagination = (currentPage, totalPages, visibleCount = 3) => { + // 处理特殊情况：总页数小于等于1时，无需显示分页 + if (totalPages <= 1) { + return []; + } + + const pages = []; + // 始终显示第一页 + pages.push(1); + + // 计算中间需要显示的页码范围 + let startPage = Math.max(2, currentPage - Math.floor(visibleCount / 2)); + let endPage = Math.min(totalPages - 1, startPage + visibleCount - 1); + + // 调整起始页码，确保显示足够数量的页码 + startPage = Math.max(2, endPage - visibleCount + 1); + + // 前面的省略号：如果第一页和起始页之间有间隔 + if (startPage > 2) { + pages.push("..."); + } + + // 添加中间的页码 + for (let i = startPage; i <= endPage; i++) { + pages.push(i); + } + + // 后面的省略号：如果最后一页和结束页之间有间隔 + if (endPage < totalPages - 1) { + pages.push("..."); + } + + // 始终显示最后一页（如果总页数大于1） + if (totalPages > 1) { + pages.push(totalPages); + } + + return pages; + }; + + const cutPage = (value) => { + if (value == "...") return; + if (value == page.value) return; + page.value = value; + getList(); + }; + + const prevPage = () => { + page.value -= 1; + pagination.value = []; + getList(); + }; + + const nextPage = () => { + page.value += 1; + pagination.value = []; + getList(); + }; + + const startSearch = () => { + if (kw.value == "") { + creationAlertBox("error", "请输入搜索关键词"); + return; + } + + page.value = 1; + list.value = []; + count.value = 0; + pagination.value = []; + getList(); + }; + + return { startSearch, kw, maxPage, prevPage, nextPage, tabValue, cutTab, tabList, count, list, page, pagination, cutPage }; }, }); appSearch.component("item-forum", itemForum); +appSearch.component("itemOffer", itemOffer); +appSearch.component("itemSummary", itemSummary); +appSearch.component("itemVote", itemVote); +appSearch.component("itemMj", itemMj); +appSearch.component("itemTenement", itemTenement); appSearch.component("head-top", headTop); appSearch.component("hot-tag", hotTag); +appSearch.component("hot-search", hotSearch); +appSearch.component("slideshow-box", slideshowBox); +appSearch.component("latest-list", latestList); appSearch.mount("#search"); diff --git a/js/section-index.js b/js/section-index.js index d0d109f..7157d1a 100644 --- a/js/section-index.js +++ b/js/section-index.js @@ -15,7 +15,6 @@ const appSectionIndex = createApp({ getSectionList(); - init(); handpick(); getTags(); getList(); @@ -169,7 +168,7 @@ const appSectionIndex = createApp({ const goLogin = () => { if (typeof window === "undefined") return; if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) { - if (window["userInfoWin"]["uid"]) isNeedLogin.value = false; + if (window["userInfoWin"]["uid"]) isLogin.value = true; else ajax_login(); } else ajax_login(); }; diff --git a/search-tag.html b/search-tag.html new file mode 100644 index 0000000..4306ae3 --- /dev/null +++ b/search-tag.html @@ -0,0 +1,80 @@ + + + + + + + 标签搜索 + + + + + + + +
+ +
+ +
{{ tag }}
+
+ +
+
{{ item }}
+
+ +
+ {{ tabList[tabValue] }} +
+ 共 +
{{ count }}
+ 条 +
+ +
+
+
+ +
+ +
+ +
- 暂无内容 -
+
+ +
+ + + +
{{ item }}
+ + + +
+
+
+ + + + +
+
+
+ + + + + + + \ No newline at end of file diff --git a/search.html b/search.html index e295c65..5afe047 100644 --- a/search.html +++ b/search.html @@ -1,49 +1,83 @@ - - - - 搜索 - - - - - - -