diff --git a/component/QR-code-pop/QR-code-pop.js b/component/QR-code-pop/QR-code-pop.js new file mode 100644 index 0000000..e22a39f --- /dev/null +++ b/component/QR-code-pop/QR-code-pop.js @@ -0,0 +1,35 @@ +// my-component.js +// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） +const { defineComponent, ref, inject, defineAsyncComponent, onMounted } = Vue; + +// 定义组件（直接使用模板） +export const QRCodePop = defineComponent({ + name: "QR-code-pop", + props: {}, + + setup(props) { + let isMobile = ref(false); + + let state = ref(false); + + let valueUrl = ref(""); + + onMounted(() => { + isMobile.value = window.isMobile; + + const valueA = document.querySelector(".valueA"); + valueUrl.value = valueA.innerText; + }); + + const open = () => (state.value = true); + const closeGroup = () => (state.value = false); + + const holdback = () => {}; + + return { valueUrl, state, isMobile, holdback, closeGroup, open }; + }, + + components: {}, + + template: `
寄托方同学
保存识别二维码
`, +}); diff --git a/component/QR-code-pop/QR-code-pop.txt b/component/QR-code-pop/QR-code-pop.txt new file mode 100644 index 0000000..473f4d6 --- /dev/null +++ b/component/QR-code-pop/QR-code-pop.txt @@ -0,0 +1,17 @@ +
+
+ +
+ + 寄托方同学 +
+
+
+ +
+
保存识别二维码
+
+ + +
+
\ No newline at end of file diff --git a/component/group-pop/group-pop.js b/component/group-pop/group-pop.js new file mode 100644 index 0000000..17d36df --- /dev/null +++ b/component/group-pop/group-pop.js @@ -0,0 +1,35 @@ +// my-component.js +// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） +const { defineComponent, ref, inject, defineAsyncComponent, onMounted } = Vue; + +// 定义组件（直接使用模板） +export const groupPop = defineComponent({ + name: "group-pop", + props: {}, + + setup(props) { + let isMobile = ref(false); + + let state = ref(false); + + let valueUrl = ref(""); + + onMounted(() => { + isMobile.value = window.isMobile; + + const valueA = document.querySelector(".valueA"); + valueUrl.value = valueA.innerText; + }); + + const open = () => (state.value = true); + const closeGroup = () => (state.value = false); + + const holdback = () => {}; + + return { valueUrl, state, isMobile, holdback, closeGroup, open }; + }, + + components: {}, + + template: `
`, +}); diff --git a/component/group-pop/group-pop.txt b/component/group-pop/group-pop.txt new file mode 100644 index 0000000..71e5998 --- /dev/null +++ b/component/group-pop/group-pop.txt @@ -0,0 +1,4 @@ +
+ + +
\ No newline at end of file diff --git a/component/helper-pop/helper-pop.js b/component/helper-pop/helper-pop.js index 6c722fc..b899719 100644 --- a/component/helper-pop/helper-pop.js +++ b/component/helper-pop/helper-pop.js @@ -12,8 +12,13 @@ export const helperPop = defineComponent({ let state = ref(false); + let valueUrl = ref(""); + onMounted(() => { isMobile.value = window.isMobile; + + const valueA = document.querySelector(".valueA"); + valueUrl.value = valueA.innerText; }); const open = () => (state.value = true); @@ -21,10 +26,10 @@ export const helperPop = defineComponent({ const holdback = () => {}; - return { state, isMobile, holdback, closeGroup, open }; + return { valueUrl, state, isMobile, holdback, closeGroup, open }; }, components: {}, - template: `
长按识别二维码
`, + template: `
保存识别二维码
`, }); diff --git a/component/helper-pop/helper-pop.txt b/component/helper-pop/helper-pop.txt index 32de937..04c3fc8 100644 --- a/component/helper-pop/helper-pop.txt +++ b/component/helper-pop/helper-pop.txt @@ -1,18 +1,18 @@
- - + +
- - - - + + + +
- 长按识别二维码 + 保存识别二维码
- - + +
\ No newline at end of file diff --git a/component/huddle-box/huddle-box.js b/component/huddle-box/huddle-box.js index 2d4c6cb..2389610 100644 --- a/component/huddle-box/huddle-box.js +++ b/component/huddle-box/huddle-box.js @@ -12,8 +12,13 @@ export const huddleBox = defineComponent({ let state = ref(false); + let valueUrl = ref(""); + onMounted(() => { isMobile.value = window.isMobile; + + const valueA = document.querySelector(".valueA"); + valueUrl.value = valueA.innerText; }); const open = () => (state.value = true); @@ -21,10 +26,10 @@ export const huddleBox = defineComponent({ const holdback = () => {}; - return { state, isMobile, holdback, closeGroup, open }; + return { valueUrl, state, isMobile, holdback, closeGroup, open }; }, components: {}, - template: `
抱团 / 信息共享 / 互助申学
添加寄托葱哥进群
`, + template: `
抱团 / 信息共享 / 互助申学
添加寄托葱哥进群
`, }); diff --git a/component/huddle-box/huddle-box.txt b/component/huddle-box/huddle-box.txt index 544722a..1869be6 100644 --- a/component/huddle-box/huddle-box.txt +++ b/component/huddle-box/huddle-box.txt @@ -1,18 +1,18 @@
- - - - + + + +
抱团 / 信息共享 / 互助申学
- + 添加寄托葱哥进群 - +
diff --git a/component/item-offer/item-offer.js b/component/item-offer/item-offer.js index 497ca78..3a05b5c 100644 --- a/component/item-offer/item-offer.js +++ b/component/item-offer/item-offer.js @@ -31,5 +31,5 @@ export const itemOffer = defineComponent({ itemHead, }, - template: `
{{ item.data.schoolname }}
{{ item.data.project ? '专业' : '项目/专业' }}
{{ item.data.professional }}
项目
{{ item.data.project }}
 {{ item.data.semester }}
{{ item.data.degree }}
{{ item.data.apply_results_text }}
 {{ item.content }}
`, + template: `
{{ item.data.schoolname }}
{{ item.data.project ? '专业' : '项目/专业' }}
{{ item.data.professional }}
项目
{{ item.data.project }}
 {{ item.data.semester }}
{{ item.data.degree }}
{{ item.data.apply_results_text }}
 {{ item.content }}
`, }); diff --git a/component/item-offer/item-offer.txt b/component/item-offer/item-offer.txt index 9e675b2..39bdaa2 100644 --- a/component/item-offer/item-offer.txt +++ b/component/item-offer/item-offer.txt @@ -2,17 +2,17 @@ -
{{ item.data.schoolname }}
+
{{ item.data.schoolname }}
{{ item.data.project ? '专业' : '项目/专业' }}
-
{{ item.data.professional }}
+
{{ item.data.professional }}
项目
-
{{ item.data.project }}
+
{{ item.data.project }}
 diff --git a/css/index.css b/css/index.css index 06a761d..6ed7a5a 100644 --- a/css/index.css +++ b/css/index.css @@ -1,5 +1,5 @@ #appIndex { - width: 1200px; + max-width: 1200px; margin: 0 auto; } #appIndex a { @@ -9,9 +9,15 @@ justify-content: space-between; margin-bottom: 28px; } +#appIndex .header-content-box .header-content-left { + width: calc(100% - 252px); +} #appIndex .header-content-box .header-content-left .adv-list { margin-bottom: 18px; } +#appIndex .header-content-box .header-content-left .adv-list .adv-item { + width: calc((100% - 12px) / 2); +} #appIndex .header-content-box .header-content-left .adv-list .adv-item:not(:last-child) { margin-right: 12px; } @@ -19,10 +25,11 @@ display: block; } #appIndex .header-content-box .header-content-left .adv-list .adv-item img { - width: 468px; - height: 60px; + width: 100%; + height: auto; border-radius: 10px; display: block; + object-fit: cover; } #appIndex .header-content-box .header-content-left .topic-and-selectives .head-top { width: 64px; @@ -44,7 +51,7 @@ font-size: 14px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box { - width: 308px; + width: calc((100% - 12px) * 0.325); height: 320px; background-color: #ffffff; border: 1px solid #e9eef2; @@ -141,7 +148,7 @@ color: #000000; } #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box { - width: 628px; + width: calc((100% - 12px) * 0.662); height: 320px; background-color: #ffffff; border: 1px solid #e9eef2; @@ -158,6 +165,7 @@ justify-content: space-between; } #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item { + width: 48%; font-size: 14px; color: #555555; line-height: 20px; @@ -176,41 +184,46 @@ margin-right: 10px; } #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item .text { - width: 265px; + width: auto; + flex: 1; } #appIndex .header-content-box .header-content-left .header-left-bottom-box { - width: 948px; - height: 140px; + width: 100%; + height: auto; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; - padding-left: 12px; + padding: 12px; margin-top: 12px; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .adv { margin-right: 26px; + width: 31%; + flex-shrink: 0; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .adv .adv-icon { - width: 295px; - height: 118px; + width: 100%; + height: auto; border-radius: 5px; cursor: pointer; + object-fit: cover; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .list { font-size: 14px; color: #555555; - padding-top: 12px; - width: 281px; + flex: 1; 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; + width: auto; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item { height: 20px; + display: flex; + align-items: center; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item:not(:last-of-type) { margin-bottom: 12px; @@ -221,10 +234,12 @@ margin-right: 10px; background: #30b0d5; border-radius: 50%; + flex-shrink: 0; } #appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text { cursor: pointer; - width: 266px; + flex: 1; + min-width: 0; text-decoration: none; color: #555; } @@ -464,12 +479,22 @@ flex-wrap: wrap; } #appIndex .admission .admission-list .admission-item { - width: 291px; - height: 103px; + width: calc((100% - 36px) / 4); + aspect-ratio: 291 / 103; border-radius: 9px; cursor: pointer; overflow: hidden; } +#appIndex .admission .admission-list .admission-item .admission-img { + display: block; + width: 100%; + height: 100%; +} +#appIndex .admission .admission-list .admission-item img { + width: 100%; + height: 100%; + object-fit: cover; +} #appIndex .admission .admission-list .admission-item:not(:nth-child(4n)) { margin-right: 12px; } @@ -486,13 +511,13 @@ } #appIndex .matter .matter-content .forum-sections-list { position: relative; - width: 897px; - height: 240px; background-color: #ffffff; border: 1px solid #e9eef2; border-radius: 10px; padding-left: 70px; padding-top: 20px; + padding-right: 2px; + padding-bottom: 14px; margin-bottom: 20px; } #appIndex .matter .matter-content .forum-sections-list .img { @@ -500,7 +525,7 @@ top: -1px; left: -1px; width: 60px; - height: 240px; + height: 100%; } #appIndex .matter .matter-content .forum-sections-list .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; @@ -510,8 +535,8 @@ color: #000000; margin-bottom: 16px; } -#appIndex .matter .matter-content .forum-sections-list .list .line:not(:last-child) { - margin-bottom: 10px; +#appIndex .matter .matter-content .forum-sections-list .list .line { + flex-wrap: wrap; } #appIndex .matter .matter-content .forum-sections-list .list .line .item { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; @@ -525,6 +550,7 @@ border: 1px solid #f2f2f2; border-radius: 16px; cursor: pointer; + margin-bottom: 10px; } #appIndex .matter .matter-content .forum-sections-list .list .line .item:not(:last-child) { margin-right: 10px; @@ -562,3 +588,181 @@ #appIndex .matter .sidebar .side-box.interviewexperience-side-box { background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%); } +@media screen and (max-width: 768px) { + .head-top { + width: 100% !important; + padding: 0 10px; + margin: 10px auto !important; + flex-wrap: wrap; + } + .head-top .input-box { + display: none !important; + } + .head-top .post-list { + display: none !important; + } + .head-top .sign-in { + display: none !important; + } + #appIndex { + width: 100%; + padding: 0 10px; + } + #appIndex .header-content-box { + flex-direction: column; + } + #appIndex .header-content-box .header-content-left { + width: 100%; + } + #appIndex .header-content-box .header-content-left .adv-list { + display: none; + } + #appIndex .header-content-box .header-content-left .topic-and-selectives { + flex-direction: column; + } + #appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box { + width: 100%; + margin-right: 0; + margin-bottom: 10px; + height: auto; + } + #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box { + width: 100%; + height: auto; + } + #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item { + width: 100%; + } + #appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item .text { + width: auto; + } + #appIndex .header-content-box .header-content-left .topic-and-selectives .head-top { + width: max-content !important; + margin-left: 0 !important; + } + #appIndex .header-content-box .header-content-left .header-left-bottom-box { + width: 100%; + height: auto; + flex-direction: column; + padding: 10px; + } + #appIndex .header-content-box .header-content-left .header-left-bottom-box .adv { + margin-right: 0; + margin-bottom: 10px; + width: 100%; + height: auto; + } + #appIndex .header-content-box .header-content-left .header-left-bottom-box .adv .adv-icon { + width: 100%; + height: auto; + } + #appIndex .header-content-box .header-content-left .header-left-bottom-box .list { + width: 100%; + margin-right: 0; + margin-bottom: 0; + } + #appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text { + width: auto; + } + #appIndex .header-content-box .header-content-right { + display: none; + } + #appIndex .admission .admission-list { + flex-wrap: nowrap; + overflow-x: auto; + } + #appIndex .admission .admission-list .admission-item { + flex-shrink: 0; + width: auto; + height: 80px; + margin-right: 12px; + } + #appIndex .admission .admission-list .admission-item:not(:nth-last-child(-n + 4)) { + margin-bottom: 5px; + } + #appIndex .admission .admission-list .admission-item img { + width: 100%; + height: auto; + } + #appIndex .pop-list { + display: block; + } + #appIndex .matter { + flex-direction: column; + } + #appIndex .matter .matter-content { + width: 100%; + margin-right: 0; + } + #appIndex .matter .matter-content .forum-sections-list { + width: 100%; + height: auto; + padding: 10px; + } + #appIndex .matter .matter-content .forum-sections-list .img { + display: none; + } + #appIndex .matter .matter-content .forum-sections-list .list .line { + flex-wrap: wrap; + margin-bottom: 0 !important; + height: auto; + } + #appIndex .matter .matter-content .forum-sections-list .list .line .item { + margin-bottom: 10px; + } + #appIndex .matter .sidebar { + display: none; + } +} +.pop-list { + width: 100%; + background-color: #ffffff; + border: 1px solid #f2f2f2; + border-radius: 20px; + padding: 6px; + margin: 0 auto 20px; + display: none; +} +.pop-list .list { + background-color: #f6f6f6; + border-radius: 15px; + width: 100%; + display: flex; + align-items: center; +} +.pop-list .list .item { + display: flex; + flex-direction: column; + justify-content: center; + height: 70px; +} +.pop-list .list .item:nth-of-type(1) { + flex: 95; +} +.pop-list .list .item:nth-of-type(2) { + flex: 114; +} +.pop-list .list .item:nth-of-type(3) { + flex: 109; +} +.pop-list .list .item:nth-of-type(4) { + flex: 140; +} +.pop-list .list .item:not(:last-of-type) { + border-right: 1px dotted #d7d7d7; +} +.pop-list .list .item .top { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + color: #000000; + font-size: 16px; + line-height: 26px; + text-align: center; +} +.pop-list .list .item .bottom { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + color: #555555; + font-size: 14px; + text-align: center; +} diff --git a/css/index.less b/css/index.less index b83e9fc..d6b9353 100644 --- a/css/index.less +++ b/css/index.less @@ -1,5 +1,5 @@ #appIndex { - width: 1200px; + max-width: 1200px; margin: 0 auto; a { @@ -11,10 +11,14 @@ margin-bottom: 28px; .header-content-left { + width: calc(100% - 252px); + .adv-list { margin-bottom: 18px; .adv-item { + width: calc((100% - 12px) / 2); + &:not(:last-child) { margin-right: 12px; } @@ -24,10 +28,11 @@ } img { - width: 468px; - height: 60px; + width: 100%; + height: auto; border-radius: 10px; display: block; + object-fit: cover; } } } @@ -56,7 +61,7 @@ } .topic-box { - width: 308px; + width: calc((100% - 12px) * 0.325); height: 320px; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(233, 238, 242, 1); @@ -178,7 +183,7 @@ } .selectives-box { - width: 628px; + width: calc((100% - 12px) * 0.662); height: 320px; background-color: #ffffff; border: 1px solid #e9eef2; @@ -196,6 +201,7 @@ justify-content: space-between; .item { + width: 48%; font-size: 14px; color: #555555; line-height: 20px; @@ -216,7 +222,8 @@ } .text { - width: 265px; + width: auto; + flex: 1; } } } @@ -224,42 +231,46 @@ } .header-left-bottom-box { - width: 948px; - height: 140px; + width: 100%; + height: auto; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(233, 238, 242, 1); border-radius: 10px; - padding-left: 12px; + padding: 12px; margin-top: 12px; .adv { margin-right: 26px; + width: 31%; + flex-shrink: 0; .adv-icon { - width: 295px; - height: 118px; + width: 100%; + height: auto; border-radius: 5px; cursor: pointer; + object-fit: cover; } } .list { font-size: 14px; color: #555555; - padding-top: 12px; - width: 281px; + flex: 1; margin-right: 39px; &.list2 { margin-right: 0; .item .text { - width: 255px; + width: auto; } } .item { height: 20px; + display: flex; + align-items: center; &:not(:last-of-type) { margin-bottom: 12px; @@ -271,11 +282,13 @@ margin-right: 10px; background: #30b0d5; border-radius: 50%; + flex-shrink: 0; } .text { cursor: pointer; - width: 266px; + flex: 1; + min-width: 0; text-decoration: none; color: #555; @@ -573,12 +586,24 @@ flex-wrap: wrap; .admission-item { - width: 291px; - height: 103px; + width: calc((100% - 36px) / 4); + aspect-ratio: 291 / 103; border-radius: 9px; cursor: pointer; overflow: hidden; + .admission-img { + display: block; + width: 100%; + height: 100%; + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + &:not(:nth-child(4n)) { margin-right: 12px; } @@ -600,13 +625,15 @@ .forum-sections-list { position: relative; - width: 897px; - height: 240px; + // flex: 1; + // height: 240px; background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(233, 238, 242, 1); border-radius: 10px; padding-left: 70px; padding-top: 20px; + padding-right: 2px; + padding-bottom: 14px; margin-bottom: 20px; .img { @@ -614,7 +641,7 @@ top: -1px; left: -1px; width: 60px; - height: 240px; + height: 100%; } .title { @@ -628,10 +655,7 @@ .list { .line { - &:not(:last-child) { - margin-bottom: 10px; - } - + flex-wrap: wrap; .item { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; @@ -644,6 +668,7 @@ border: 1px solid rgba(242, 242, 242, 1); border-radius: 16px; cursor: pointer; + margin-bottom: 10px; &:not(:last-child) { margin-right: 10px; @@ -701,4 +726,234 @@ } } } -} \ No newline at end of file +} + +@media screen and (max-width: 768px) { + .head-top { + width: 100% !important; + padding: 0 10px; + margin: 10px auto !important; + flex-wrap: wrap; + + .input-box { + display: none !important; + } + + .post-list { + display: none !important; + } + + .sign-in { + display: none !important; + } + } + + #appIndex { + width: 100%; + padding: 0 10px; + + .header-content-box { + flex-direction: column; + + .header-content-left { + width: 100%; + + .adv-list { + display: none; + } + + .topic-and-selectives { + flex-direction: column; + + .topic-box { + width: 100%; + margin-right: 0; + margin-bottom: 10px; + height: auto; + } + + .selectives-box { + width: 100%; + height: auto; + + .list .item { + width: 100%; + .text { + width: auto; + } + } + } + + .head-top { + width: max-content !important; + margin-left: 0 !important; + } + } + + .header-left-bottom-box { + width: 100%; + height: auto; + flex-direction: column; + padding: 10px; + + .adv { + margin-right: 0; + margin-bottom: 10px; + width: 100%; + height: auto; + + .adv-icon { + width: 100%; + height: auto; + } + } + + .list { + width: 100%; + margin-right: 0; + margin-bottom: 0; + + .item { + // margin-bottom: 12px; + .text { + width: auto; + } + } + } + } + } + + .header-content-right { + display: none; + } + } + + .admission { + .admission-list { + flex-wrap: nowrap; + overflow-x: auto; + + .admission-item { + flex-shrink: 0; + width: auto; + height: 80px; + margin-right: 12px; + + &:not(:nth-last-child(-n + 4)) { + margin-bottom: 5px; + } + + img { + width: 100%; + height: auto; + } + } + } + } + + .pop-list { + display: block; + } + + .matter { + flex-direction: column; + + .matter-content { + width: 100%; + margin-right: 0; + + .forum-sections-list { + width: 100%; + height: auto; + padding: 10px; + + .img { + display: none; + } + + .list { + .line { + flex-wrap: wrap; + margin-bottom: 0 !important; + height: auto; + + .item { + margin-bottom: 10px; + } + } + } + } + } + + .sidebar { + display: none; + } + } + } +} + +.pop-list { + width: 100%; + // max-width: 470px; + // min-height: 90px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(242, 242, 242, 1); + border-radius: 20px; + padding: 6px; + margin: 0 auto 20px; + + display: none; + + .list { + background-color: rgba(246, 246, 246, 1); + border-radius: 15px; + width: 100%; + // height: 100%; + display: flex; + align-items: center; + + .item { + display: flex; + flex-direction: column; + justify-content: center; + height: 70px; + + &:nth-of-type(1) { + flex: 95; + } + + &:nth-of-type(2) { + flex: 114; + } + + &:nth-of-type(3) { + flex: 109; + } + + &:nth-of-type(4) { + flex: 140; + } + + &:not(:last-of-type) { + border-right: 1px dotted #d7d7d7; + } + + .top { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + color: #000000; + font-size: 16px; + line-height: 26px; + text-align: center; + } + + .bottom { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + color: #555555; + font-size: 14px; + text-align: center; + } + } + } +} diff --git a/css/public.css b/css/public.css index 3aaf104..a7531eb 100644 --- a/css/public.css +++ b/css/public.css @@ -2502,3 +2502,186 @@ td { top: 0; } } +.group-pop { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.71764706); + z-index: 111; + animation: slidebj 0.5s forwards; +} +.group-pop .bj { + width: 500px; + height: 823px; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + border-radius: 20px 20px 0 0; + animation: slidebj 0.5s forwards; +} +.group-pop .QRCode { + width: 180px; + height: 180px; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 165px; +} +@media screen and (max-width: 600px) { + .group-pop .bj { + width: calc(min(164.6vw, 80vh) * 500 / 823); + height: min(164.6vw, 80vh); + max-height: 80vh; + object-fit: cover; + border-radius: calc(min(164.6vw, 80vh) * 20 / 823) calc(min(164.6vw, 80vh) * 20 / 823) 0 0; + left: 50%; + transform: translateX(-50%); + } + .group-pop .QRCode { + width: calc(min(164.6vw, 80vh) * 180 / 823); + height: calc(min(164.6vw, 80vh) * 180 / 823); + bottom: calc(min(164.6vw, 80vh) * 165 / 823); + } +} +.QR-code-pop { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.71764706); + z-index: 1004; + flex-direction: column; + justify-content: flex-end; +} +.QR-code-pop .pop-box { + align-items: center; + flex-direction: column; + padding-top: 60px; + background: linear-gradient(180deg, #f4f4f4 -1%, #f7faff 100%); + border-radius: 20px 20px 0 19px; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.10196078); +} +.QR-code-pop .pop-box .pop-title { + width: 221px; + height: 48px; + margin-bottom: 18px; +} +.QR-code-pop .pop-box .pop-wechat-name { + color: #333; + font-size: 18px; + font-weight: 400; + margin-bottom: 36px; +} +.QR-code-pop .pop-box .pop-wechat-icon { + width: 22px; + height: 22px; + margin-right: 4px; +} +.QR-code-pop .pop-box .pop-wechat-icon1 { + width: 18px; + height: 18px; + margin-right: 4px; +} +.QR-code-pop .pop-box .pop-code-box { + flex-direction: column; + padding: 20px; + background: -webkit-linear-gradient(90deg, #2c196d -1%, #fddf6d 99%); + background: -moz-linear-gradient(0deg, #2c196d -1%, #fddf6d 99%); + background: linear-gradient(0deg, #2c196d -1%, #fddf6d 99%); + border-radius: 20px; + -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.17647059); + -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.17647059); + box-shadow: 0 0 15px rgba(0, 0, 0, 0.17647059); + position: relative; + z-index: 1; + margin-bottom: 81px; +} +.QR-code-pop .pop-box .pop-code-box.pop-code-box1 { + background: -webkit-linear-gradient(90deg, #29186c -1%, #9278d4 101%); + background: -moz-linear-gradient(-15.42108547e, #29186c -1%, #9278d4 101%); + background: linear-gradient(-15.42108547e, #29186c -1%, #9278d4 101%); +} +.QR-code-pop .pop-box .pop-code { + width: 240px; + height: 240px; + background-color: #fff; + border-radius: 6px; + margin-bottom: 20px; +} +.QR-code-pop .pop-box .pop-code .pop-code-img { + width: 220px; + height: 220px; +} +.QR-code-pop .pop-box .pop-text { + color: #fff; + letter-spacing: 0.6px; + font-size: 16px; + line-height: 28px; +} +.QR-code-pop .pop-box .pop-bottom1, +.QR-code-pop .pop-box .pop-bottom2 { + width: 100vw; + position: fixed; + left: 50%; + transform: translateX(-50%); + bottom: 0; +} +.QR-code-pop .pop-box .pop-bottom1 { + height: 155px; +} +.QR-code-pop .pop-box .pop-bottom2 { + height: 151px; +} +@media screen and (max-width: 600px) { + .QR-code-pop .pop-box { + padding-top: calc(60 / 600 * 100vw); + border-radius: calc(20 / 600 * 100vw) calc(20 / 600 * 100vw) 0 calc(19 / 600 * 100vw); + box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.10196078); + } + .QR-code-pop .pop-box .pop-title { + width: calc(221 / 600 * 100vw); + height: calc(48 / 600 * 100vw); + margin-bottom: calc(18 / 600 * 100vw); + } + .QR-code-pop .pop-box .pop-wechat-name { + font-size: calc(18 / 600 * 100vw); + margin-bottom: calc(36 / 600 * 100vw); + } + .QR-code-pop .pop-box .pop-wechat-icon { + width: calc(22 / 600 * 100vw); + height: calc(22 / 600 * 100vw); + margin-right: calc(4 / 600 * 100vw); + } + .QR-code-pop .pop-box .pop-wechat-icon1 { + width: calc(18 / 600 * 100vw); + height: calc(18 / 600 * 100vw); + margin-right: calc(4 / 600 * 100vw); + } + .QR-code-pop .pop-box .pop-code-box { + padding: calc(20 / 600 * 100vw); + border-radius: calc(20 / 600 * 100vw); + -moz-box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.17647059); + -webkit-box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.17647059); + box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.17647059); + margin-bottom: calc(81 / 600 * 100vw); + } + .QR-code-pop .pop-box .pop-code { + width: calc(240 / 600 * 100vw); + height: calc(240 / 600 * 100vw); + border-radius: calc(6 / 600 * 100vw); + margin-bottom: calc(20 / 600 * 100vw); + } + .QR-code-pop .pop-box .pop-code .pop-code-img { + width: calc(220 / 600 * 100vw); + height: calc(220 / 600 * 100vw); + } + .QR-code-pop .pop-box .pop-text { + letter-spacing: calc(0.6 / 600 * 100vw); + font-size: calc(16 / 600 * 100vw); + line-height: calc(28 / 600 * 100vw); + } +} diff --git a/css/public.less b/css/public.less index 6f9e344..a0a1580 100644 --- a/css/public.less +++ b/css/public.less @@ -2995,3 +2995,225 @@ td { top: 0; } } + +.group-pop { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.717647058823529); + z-index: 111; + animation: slidebj 0.5s forwards; + + .bj { + width: 500px; + height: 823px; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + border-radius: 20px 20px 0 0; + animation: slidebj 0.5s forwards; + } + + .QRCode { + width: 180px; + height: 180px; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 165px; + } + + @media screen and (max-width: 600px) { + .bj { + width: calc(~"min(164.6vw, 80vh)" * 500 / 823); + height: ~"min(164.6vw, 80vh)"; + max-height: 80vh; + object-fit: cover; + border-radius: calc(~"min(164.6vw, 80vh)" * 20 / 823) calc(~"min(164.6vw, 80vh)" * 20 / 823) 0 0; + left: 50%; + transform: translateX(-50%); + } + + .QRCode { + width: calc(~"min(164.6vw, 80vh)" * 180 / 823); + height: calc(~"min(164.6vw, 80vh)" * 180 / 823); + bottom: calc(~"min(164.6vw, 80vh)" * 165 / 823); + } + } +} + +.QR-code-pop { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.717647058823529); + z-index: 1004; + flex-direction: column; + justify-content: flex-end; + + .pop-box { + align-items: center; + flex-direction: column; + padding-top: 60px; + background: linear-gradient(180deg, rgba(244, 244, 244, 1) -1%, rgba(247, 250, 255, 1) 100%); + border-radius: 20px 20px 0 19px; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.101960784313725); + .pop-title { + width: 221px; + height: 48px; + margin-bottom: 18px; + } + + .pop-wechat-name { + color: #333; + font-size: 18px; + font-weight: 400; + margin-bottom: 36px; + } + + .pop-wechat-icon { + width: 22px; + height: 22px; + margin-right: 4px; + } + + .pop-wechat-icon1 { + width: 18px; + height: 18px; + margin-right: 4px; + } + + .pop-code-box { + flex-direction: column; + padding: 20px; + background: -webkit-linear-gradient(90deg, rgba(44, 25, 109, 1) -1%, rgba(253, 223, 109, 1) 99%); + background: -moz-linear-gradient(0deg, rgba(44, 25, 109, 1) -1%, rgba(253, 223, 109, 1) 99%); + background: linear-gradient(0deg, rgba(44, 25, 109, 1) -1%, rgba(253, 223, 109, 1) 99%); + border-radius: 20px; + -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.176470588235294); + -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.176470588235294); + box-shadow: 0 0 15px rgba(0, 0, 0, 0.176470588235294); + position: relative; + z-index: 1; + margin-bottom: 81px; + + &.pop-code-box1 { + background: -webkit-linear-gradient(90deg, rgba(41, 24, 108, 1) -1%, rgba(146, 120, 212, 1) 101%); + background: -moz-linear-gradient(-1.4210854715202e-14deg, rgba(41, 24, 108, 1) -1%, rgba(146, 120, 212, 1) 101%); + background: linear-gradient(-1.4210854715202e-14deg, rgba(41, 24, 108, 1) -1%, rgba(146, 120, 212, 1) 101%); + } + } + + .pop-code { + width: 240px; + height: 240px; + background-color: #fff; + border-radius: 6px; + margin-bottom: 20px; + + .pop-code-img { + width: 220px; + height: 220px; + } + } + + .pop-text { + color: #fff; + letter-spacing: 0.6px; + font-size: 16px; + line-height: 28px; + } + + .pop-bottom1, + .pop-bottom2 { + width: 100vw; + position: fixed; + left: 50%; + transform: translateX(-50%); + bottom: 0; + } + + .pop-bottom1 { + height: 155px; + } + + .pop-bottom2 { + height: 151px; + } + } + + @media screen and (max-width: 600px) { + .pop-box { + padding-top: calc(60 / 600 * 100vw); + border-radius: calc(20 / 600 * 100vw) calc(20 / 600 * 100vw) 0 calc(19 / 600 * 100vw); + box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.101960784313725); + .pop-title { + width: calc(221 / 600 * 100vw); + height: calc(48 / 600 * 100vw); + margin-bottom: calc(18 / 600 * 100vw); + } + + .pop-wechat-name { + font-size: calc(18 / 600 * 100vw); + margin-bottom: calc(36 / 600 * 100vw); + } + + .pop-wechat-icon { + width: calc(22 / 600 * 100vw); + height: calc(22 / 600 * 100vw); + margin-right: calc(4 / 600 * 100vw); + } + + .pop-wechat-icon1 { + width: calc(18 / 600 * 100vw); + height: calc(18 / 600 * 100vw); + margin-right: calc(4 / 600 * 100vw); + } + + .pop-code-box { + padding: calc(20 / 600 * 100vw); + border-radius: calc(20 / 600 * 100vw); + -moz-box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.176470588235294); + -webkit-box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.176470588235294); + box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.176470588235294); + margin-bottom: calc(81 / 600 * 100vw); + } + + .pop-code { + width: calc(240 / 600 * 100vw); + height: calc(240 / 600 * 100vw); + border-radius: calc(6 / 600 * 100vw); + margin-bottom: calc(20 / 600 * 100vw); + + .pop-code-img { + width: calc(220 / 600 * 100vw); + height: calc(220 / 600 * 100vw); + } + } + + .pop-text { + letter-spacing: calc(0.6 / 600 * 100vw); + font-size: calc(16 / 600 * 100vw); + line-height: calc(28 / 600 * 100vw); + } + + // .pop-bottom1, + // .pop-bottom2 { + // width: calc(500 / 600 * 100vw); + // } + + // .pop-bottom1 { + // height: calc(155 / 600 * 100vw); + // } + + // .pop-bottom2 { + // height: calc(151 / 600 * 100vw); + // } + } + } +} \ No newline at end of file diff --git a/css/search-tag.css b/css/search-tag.css index ea8948f..f803eee 100644 --- a/css/search-tag.css +++ b/css/search-tag.css @@ -227,10 +227,6 @@ margin: 0 10px 20px; height: 40px !important; } - #search-tag .classify { - margin-left: 10px; - margin-right: 10px; - } #search-tag .matter .matter-content { margin: 0; } diff --git a/css/search-tag.less b/css/search-tag.less index 2313704..50ae34b 100644 --- a/css/search-tag.less +++ b/css/search-tag.less @@ -271,8 +271,8 @@ height: 40px !important; } .classify { - margin-left: 10px; - margin-right: 10px; + // margin-left: 10px; + // margin-right: 10px; } .matter { diff --git a/css/search.css b/css/search.css index 4e93821..3187613 100644 --- a/css/search.css +++ b/css/search.css @@ -157,6 +157,9 @@ height: 24px; margin-right: 8px; } +#search .search-no { + padding-bottom: 30px; +} #search .search-no .earth-icon { width: 239px; height: 180px; @@ -278,13 +281,8 @@ @media screen and (max-width: 768px) { #search .search-box { width: auto !important; - margin: 0 10px 20px; height: 40px !important; } - #search .classify { - margin-left: 10px; - margin-right: 10px; - } #search .matter .matter-content { margin: 0; } @@ -361,5 +359,6 @@ @media screen and (max-width: 450px) { #search .classify .item { padding: 0 5px; + margin-right: 5px !important; } } diff --git a/css/search.less b/css/search.less index ece4141..a65b3e0 100644 --- a/css/search.less +++ b/css/search.less @@ -199,6 +199,8 @@ } .search-no { + padding-bottom: 30px; + .earth-icon { width: 239px; height: 180px; @@ -343,12 +345,12 @@ #search { .search-box { width: auto !important; - margin: 0 10px 20px; + // margin: 0 10px 20px; height: 40px !important; } .classify { - margin-left: 10px; - margin-right: 10px; + // margin-left: 10px; + // margin-right: 10px; } .matter { @@ -436,5 +438,6 @@ @media screen and (max-width: 450px) { #search .classify .item { padding: 0 5px; + margin-right: 5px !important; } } diff --git a/img/bottom1.svg b/img/bottom1.svg new file mode 100644 index 0000000..6f740b0 --- /dev/null +++ b/img/bottom1.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/img/bottom2.svg b/img/bottom2.svg new file mode 100644 index 0000000..32e45a5 --- /dev/null +++ b/img/bottom2.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/img/huddle-bj.jpg b/img/huddle-bj.jpg new file mode 100644 index 0000000..a058a4a Binary files /dev/null and b/img/huddle-bj.jpg differ diff --git a/img/wechat-name-icon.png b/img/wechat-name-icon.png new file mode 100644 index 0000000..659a243 Binary files /dev/null and b/img/wechat-name-icon.png differ diff --git a/img/welcome-icon.png b/img/welcome-icon.png new file mode 100644 index 0000000..68b626d Binary files /dev/null and b/img/welcome-icon.png differ diff --git a/index-v2.html b/index-v2.html new file mode 100644 index 0000000..1f0ce72 --- /dev/null +++ b/index-v2.html @@ -0,0 +1,759 @@ + + + + + + + + 寄托天下_中立的出国留学申请和考试交流平台|留学资讯|DIY留学|留学经验|留学考试|海外生活 寄托天下出国留学网 -- 寄托天下 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + +
+
+
+
+
+ + +
+
历史搜索
+
+
+
+ +
+ + + +
+ +
+ + +
+ + + +
+ +
+
+
+
+
+
+ +
+
+
+ +
话题
+
+
+ + {{ ongoingbj.title }} + +
+
+
+
{{ ongoingbj.comments }}
+
人正在讨论
+
+
+
+ +
+
+
+
+
+ + +
+ +
+
+ +
+
+ +
精选
+
+
+ +
+
+ +
+
+
+ +
+ + 26Fall-offer鸭先知 + +
+
+
+ 香港科技大学 AI 太贵了 +
+
+
+ 鲁汶大学 有点离谱不想去 +
+
+
+ 26Fall Offer 10 SSE Econ +
+
+
+ 香港理工大学 当保底了 +
+
+
+
+
+ 26Fall-埃因霍温理工大学 +
+
+
+ 港城莞 cs MSc 没有吸引力 +
+
+
+ 面经：圣三一性别研究Mphil +
+
+
+ 巴黎政治学院 传媒被拒 +
+
+
+
+ +
+
+ 我要发帖 +
+ +
+ +
+ 报Offer + + +
+ +
+ 写总结 + + +
+ +
+ 写面经 + + +
+ +
+ 发起投票 + +
+
+
+
+
+
+
26FALL
+
申请群
+
+ +
微信扫码
+
+
+
+
申请求助
+
寄托院校君
+
+ +
微信扫码
+
+
+
+
香港租房
+
交流群
+
+ +
微信扫码
+
+
+
+
香港租房顾问
+
寄托方同学
+
+ +
微信扫码
+
+
+ +
+
+ + +
+
+ +
+ + +
Hello Admission Officer
+ +
+
+ + 中大政务 + +
+
+ + 教大个人理财 + +
+
+ + 香港中文大学经济学 + +
+
+ + 理工会计金融 + +
+
+ + 港大工程学院 + +
+
+ + 港教大心理学 + +
+
+ + 港大教育 + +
+
+ + 理工商业管理 + +
+
+
+ +
+
+
+
{{ item.title }}
+
{{ item.subtitle }}
+
+
+
+ +
+
+ +
+ +
论坛版块
+
+ +
+
+ + + + + +
+
+
+
+
+
+ +
Offer
+
+ + more + + +
+
+ + +
+
+
{{ item.data['schoolname'] }}
+
{{ item.data['professional'] }}
+
+ {{ item.data['degree'] }} + | + {{ item.data['semester'] }} + | + {{ item.data['apply_results_text'] }} +
+
+ + + +
报Offer
+
+ +
+
+ + +
+
+
+ +
投票
+
+ + more + + +
+
+ +
{{item['title']}}
+
{{ item['content'] }}
+ + + +
发起投票
+
+ +
+
+ + +
+
+
+ +
面经
+
+ + more + + +
+
+ +
{{ item.data['schoolname'] }}
+
{{ item.data['profession'] || item.data['project'] }}
+
+ + {{ item['content'] }} +
+ + + +
写面经
+
+ +
+
+ + + + +
+
+ + + + + +
+ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/js/index.js b/js/index.js index 2279444..ce98abf 100644 --- a/js/index.js +++ b/js/index.js @@ -1,289 +1,334 @@ -const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue; +const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide, defineAsyncComponent } = Vue; -const { itemForum } = await import(withVer("../component/item-forum/item-forum.js")); -const { itemOffer } = await import(withVer("../component/item-offer/item-offer.js")); -const { itemSummary } = await import(withVer("../component/item-summary/item-summary.js")); -const { itemVote } = await import(withVer("../component/item-vote/item-vote.js")); -const { itemMj } = await import(withVer("../component/item-mj/item-mj.js")); -const { itemTenement } = await import(withVer("../component/item-tenement/item-tenement.js")); -const { headTop } = await import(withVer("../component/head-top/head-top.js")); -const { loadBox } = await import(withVer("../component/load-box/load-box.js")); -const { itemProject } = await import(withVer("../component/item-project/item-project.js")); -const { latestList } = await import(withVer("../component/latest-list/latest-list.js")); +(async function () { + const { itemForum } = await import(withVer("../component/item-forum/item-forum.js")); + const { itemOffer } = await import(withVer("../component/item-offer/item-offer.js")); + const { itemSummary } = await import(withVer("../component/item-summary/item-summary.js")); + const { itemVote } = await import(withVer("../component/item-vote/item-vote.js")); + const { itemMj } = await import(withVer("../component/item-mj/item-mj.js")); + const { itemTenement } = await import(withVer("../component/item-tenement/item-tenement.js")); + const { headTop } = await import(withVer("../component/head-top/head-top.js")); + const { loadBox } = await import(withVer("../component/load-box/load-box.js")); + const { itemProject } = await import(withVer("../component/item-project/item-project.js")); + const { latestList } = await import(withVer("../component/latest-list/latest-list.js")); -const appIndex = createApp({ - setup() { - onMounted(() => { - getUserInfoWin(); - // const preLoader = document.getElementById("pre-loader"); - // if (preLoader) preLoader.style.display = "none"; - }); + let huddleBox, helperPop, groupPop, QRCodePop; + if (window.isMobile) { + ({ huddleBox } = await import(withVer("../component/huddle-box/huddle-box.js"))); + ({ helperPop } = await import(withVer("../component/helper-pop/helper-pop.js"))); + ({ groupPop } = await import(withVer("../component/group-pop/group-pop.js"))); + ({ QRCodePop } = await import(withVer("../component/QR-code-pop/QR-code-pop.js"))); + } - let isLogin = ref(false); - let realname = ref(0); // 是否已经实名 - let userInfoWin = ref({}); + const appIndex = createApp({ + setup() { + onMounted(() => { + getUserInfoWin(); + // const preLoader = document.getElementById("pre-loader"); + // if (preLoader) preLoader.style.display = "none"; + }); - 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); - }; + let isLogin = ref(false); + let realname = ref(0); // 是否已经实名 + let userInfoWin = ref({}); - 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([]); - - onMounted(() => { - offerListScrolling(); - getSectionList(); - - getList(); - - window.addEventListener("scroll", handleScroll); - - getTalkingRecommend(); - getTopicHandpicked(); - getTopicLatest(); - - document.querySelectorAll(".vuehide").forEach((item) => (item.style.display = "none")); - }); - - let ongoingbj = ref({}); // 话题数据 - - const getTalkingRecommend = () => { - ajaxGet("/v2/api/forum/talkingRecommend").then((res) => { - if (res.code != 200) return; - let data = res["data"] || []; - const ongoing = data.ongoing || []; - - ongoing.forEach((item) => { - if (Array.isArray(item.commentUser)) item.commentUser = item.commentUser.slice(0, 4); - }); - - const getTargetItem = (arr) => { - const target = arr.find((item) => item.state === 1); - return target !== undefined ? target : arr.length > 0 ? arr[Math.floor(Math.random() * arr.length)] : null; // 随机返回一个 + 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); + }; - ongoingbj.value = getTargetItem(ongoing || []) || {}; - const past = data.past || []; - pastList.value = past.sort(() => Math.random() - 0.5).slice(0, 5); + 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([]); + + onMounted(() => { + offerListScrolling(); + getSectionList(); + + getList(); + + window.addEventListener("scroll", handleScroll); + + getTalkingRecommend(); + getTopicHandpicked(); + getTopicLatest(); + + document.querySelectorAll(".vuehide").forEach((item) => (item.style.display = "none")); }); - }; - let topicHandpickedList = ref([]); // 精选列表 - const getTopicHandpicked = (uniqid) => { - ajaxGet(`/v2/api/forum/topicHandpicked?limit=16`).then((res) => { - if (res.code != 200) return; - let data = res["data"] || []; - topicHandpickedList.value = data; - }); - }; + let ongoingbj = ref({}); // 话题数据 - let offer = ref([]); // 面经列表 - let vote = ref([]); // 面经列表 - let interviewexperience = ref([]); // 面经列表 - const getTopicLatest = () => { - ajaxGet(`/v2/api/forum/getTopicLatest?limit=4`).then((res) => { - const data = res.data || []; + const getTalkingRecommend = () => { + ajaxGet("/v2/api/forum/talkingRecommend").then((res) => { + if (res.code != 200) return; + let data = res["data"] || []; + const ongoing = data.ongoing || []; - data.vote.forEach((item) => { - if (!item.title) { - item.title = item.content; - item.content = ""; + ongoing.forEach((item) => { + if (Array.isArray(item.commentUser)) item.commentUser = item.commentUser.slice(0, 4); + }); + + const getTargetItem = (arr) => { + const target = arr.find((item) => item.state === 1); + return target !== undefined ? target : arr.length > 0 ? arr[Math.floor(Math.random() * arr.length)] : null; // 随机返回一个 + }; + + ongoingbj.value = getTargetItem(ongoing || []) || {}; + console.log("ongoingbj", ongoingbj.value); + const past = data.past || []; + pastList.value = past.sort(() => Math.random() - 0.5).slice(0, 5); + }); + }; + + let topicHandpickedList = ref([]); // 精选列表 + const getTopicHandpicked = (uniqid) => { + ajaxGet(`/v2/api/forum/topicHandpicked?limit=16`).then((res) => { + if (res.code != 200) return; + let data = res["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 = ""; + } + }); + + offer.value = data.offer; + vote.value = data.vote; + interviewexperience.value = data.interviewexperience; + + nextTick(() => {}); + }); + }; + + const sidebarFixed = ref(false); + + const handleScroll = () => { + const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; + const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; + const clientHeight = window.innerHeight; + + // 列表下 滑动到底部 获取新数据 + if (scrollTop + clientHeight >= scrollHeight - 200) getList(); + + // // 侧边栏滚动固定 + // if (scrollTop >= matterRef.value.offsetTop + sidebarRef.value.offsetHeight - clientHeight) sidebarFixed.value = true; + // else sidebarFixed.value = false; + + sidebarHeight.value = -(sidebarRef.value.offsetHeight - window.innerHeight); + + if (sidebarHeight.value > 0) sidebarHeight.value = 12; + }; + + let offerlist = ref([]); // offer 列表滚动 数据 + + const offerListRef = ref(null); + const custom_2AdvRef = ref(null); + + // 处理 offer 列表滚动 + const offerListScrolling = (data) => { + ajaxGet("https://api.gter.net/v2/api/forum/getDynamic").then((res) => { + if (res.code == 200) { + let data = res["data"] || []; + + data.forEach((item) => (item.date = strtimeago(item.created_at))); + + let targetValue = []; + targetValue = [...data, ...data.slice(0, 6)]; + + offerlist.value = targetValue; + nextTick(() => autoOfferListScroll()); } }); + }; - offer.value = data.offer; - vote.value = data.vote; - interviewexperience.value = data.interviewexperience; + let offerTimer = null; - nextTick(() => {}); - }); - }; + let scrollup = null; + // offer list 滚动 + const autoOfferListScroll = () => { + console.log("autoOfferListScroll"); - const sidebarFixed = ref(false); - - const handleScroll = () => { - const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; - const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; - const clientHeight = window.innerHeight; - - // 列表下 滑动到底部 获取新数据 - if (scrollTop + clientHeight >= scrollHeight - 200) getList(); - - // // 侧边栏滚动固定 - // if (scrollTop >= matterRef.value.offsetTop + sidebarRef.value.offsetHeight - clientHeight) sidebarFixed.value = true; - // else sidebarFixed.value = false; - - sidebarHeight.value = -(sidebarRef.value.offsetHeight - window.innerHeight); - - if (sidebarHeight.value > 0) sidebarHeight.value = 12; - }; - - let offerlist = ref([]); // offer 列表滚动 数据 - - const offerListRef = ref(null); - const custom_2AdvRef = ref(null); - - // 处理 offer 列表滚动 - const offerListScrolling = (data) => { - ajaxGet("https://api.gter.net/v2/api/forum/getDynamic").then((res) => { - if (res.code == 200) { - let data = res["data"] || []; - - data.forEach((item) => (item.date = strtimeago(item.created_at))); - - let targetValue = []; - targetValue = [...data, ...data.slice(0, 6)]; - - offerlist.value = targetValue; - nextTick(() => autoOfferListScroll()); + if (typeof ScrollText !== "function") { + setTimeout(() => autoOfferListScroll(), 500); + return; } - }); - }; + console.log("scrollup"); - let offerTimer = null; + if (scrollup) return; + scrollup = new ScrollText("offer-box"); + scrollup.LineHeight = 56; + scrollup.Amount = 1; + scrollup.Delay = 1; + scrollup.Start(); + scrollup.Direction = "up"; + }; - let scrollup = null; - // offer list 滚动 - const autoOfferListScroll = () => { - console.log("autoOfferListScroll"); + // 鼠标移入 + const offerMouseover = (event) => { + if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) clearInterval(offerTimer); + }; - if (typeof ScrollText !== "function") { - setTimeout(() => autoOfferListScroll(), 500); - return; - } - console.log("scrollup"); + // 鼠标移出 + const offerMouseout = (event) => { + if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) autoOfferListScroll(); + }; - if (scrollup) return; - scrollup = new ScrollText("offer-box"); - scrollup.LineHeight = 56; - 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(); - }; - - 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 = ref(false); - let page = ref(1); - let list = ref([]); - const getList = () => { - if (loading.value || page.value == 0) return; - loading.value = true; - ajaxGet(`/v2/api/forum/topicLists?page=${page.value || 1}`) - .then((res) => { + let sectionList = ref([]); + const getSectionList = () => { + ajaxGet("/v2/api/forum/getSectionList").then((res) => { 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.value = false; - }) - .catch((err) => { - err = err.data; - if (err.code == 401) goLogin(); - loading.value = false; + const data = res.data || []; + let obj = {}; + data.forEach((element) => (obj[element.cid] = element)); + sectionList.value = groupByCid(data); }); - }; + }; - const sidebarRef = ref(null); - const matterRef = ref(null); + 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; + }, {}); - let sidebarHeight = ref(0); + return Object.values(groups); + }; - const handleCheckAttest = (e) => { - if (!isLogin.value) { - goLogin(); - e.preventDefault(); // 阻止默认跳转（即使 href 为链接，也强制拦截） - return; - } - if (realname.value === 0 && userInfoWin.value?.uin > 0) { - openAttest(); - e.preventDefault(); // 阻止默认跳转（即使 href 为链接，也强制拦截） - } - }; + let loading = ref(false); + let page = ref(1); + let list = ref([]); + const getList = () => { + if (loading.value || page.value == 0) return; + loading.value = true; + ajaxGet(`/v2/api/forum/topicLists?page=${page.value || 1}`) + .then((res) => { + 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; - onMounted(() => { - SignInComponent.initComponent() - }) + loading.value = false; + }) + .catch((err) => { + err = err.data; + if (err.code == 401) goLogin(); + loading.value = false; + }); + }; - return { handleCheckAttest, sidebarHeight, matterRef, sidebarFixed, sidebarRef, loading, interviewexperience, vote, offer, topicHandpickedList, list, sectionList, custom_2AdvRef, ongoingbj, pastList, offerMouseover, offerMouseout, offerlist, offerListRef }; - }, -}); + const sidebarRef = ref(null); + const matterRef = ref(null); -appIndex.component("headTop", headTop); -appIndex.component("itemForum", itemForum); -appIndex.component("itemOffer", itemOffer); -appIndex.component("itemSummary", itemSummary); -appIndex.component("itemVote", itemVote); -appIndex.component("itemMj", itemMj); -appIndex.component("itemTenement", itemTenement); -appIndex.component("itemProject", itemProject); -appIndex.component("latestList", latestList); -appIndex.component("load-box", loadBox); + let sidebarHeight = ref(0); -appIndex.mount("#appIndex"); + const handleCheckAttest = (e) => { + if (!isLogin.value) { + goLogin(); + e.preventDefault(); // 阻止默认跳转（即使 href 为链接，也强制拦截） + return; + } + if (realname.value === 0 && userInfoWin.value?.uin > 0) { + openAttest(); + e.preventDefault(); // 阻止默认跳转（即使 href 为链接，也强制拦截） + } + }; + + const popList = ref([ + { + title: "26FALL", + subtitle: "申请群", + type: "cong", + }, + { + title: "申请求助", + subtitle: "寄托院校君", + type: "university", + }, + { + title: "香港租房", + subtitle: "交流群", + type: "renting", + }, + { + title: "香港租房顾问", + subtitle: "寄托方同学", + type: "fang", + }, + ]); + + let huddleBoxRef = ref(null); + let helperPopRef = ref(null); + let groupPopRef = ref(null); + let qrCodePopRef = ref(null); + const openPop = (type) => { + if (type == "cong") huddleBoxRef.value.open(); + if (type == "university") helperPopRef.value.open(); + if (type == "renting") groupPopRef.value.open(); + if (type == "fang") qrCodePopRef.value.open(); + }; + + return { openPop, huddleBoxRef, helperPopRef, groupPopRef, qrCodePopRef, popList, handleCheckAttest, sidebarHeight, matterRef, sidebarFixed, sidebarRef, loading, interviewexperience, vote, offer, topicHandpickedList, list, sectionList, custom_2AdvRef, ongoingbj, pastList, offerMouseover, offerMouseout, offerlist, offerListRef }; + }, + }); + + appIndex.component("headTop", headTop); + appIndex.component("itemForum", itemForum); + appIndex.component("itemOffer", itemOffer); + appIndex.component("itemSummary", itemSummary); + appIndex.component("itemVote", itemVote); + appIndex.component("itemMj", itemMj); + appIndex.component("itemTenement", itemTenement); + appIndex.component("itemProject", itemProject); + appIndex.component("latestList", latestList); + appIndex.component("load-box", loadBox); + if (huddleBox) appIndex.component("huddle-box", huddleBox); + if (helperPop) appIndex.component("helper-pop", helperPop); + if (groupPop) appIndex.component("group-pop", groupPop); + if (QRCodePop) appIndex.component("qr-code-pop", QRCodePop); + + appIndex.mount("#appIndex"); +})(); diff --git a/js/save.js b/js/save.js index c54d559..bd041e1 100644 --- a/js/save.js +++ b/js/save.js @@ -44,6 +44,8 @@ const watchList = { "../component/huddle-box/huddle-box.txt": "../component/huddle-box/huddle-box.js", "../component/helper-pop/helper-pop.txt": "../component/helper-pop/helper-pop.js", + "../component/group-pop/group-pop.txt": "../component/group-pop/group-pop.js", + "../component/QR-code-pop/QR-code-pop.txt": "../component/QR-code-pop/QR-code-pop.js", // 可添加更多文件（格式：'txt路径': 'js路径'） // './component/other/other.txt': './component/other/other.js',