feat: 添加移动端适配和优化组件样式

refactor: 重构CSS和LESS文件结构
style: 调整搜索页和公共样式
fix: 修复组件图片路径问题
docs: 更新组件文档和注释

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: `<div class="QR-code-pop flexflex" v-if="state" @click="closeGroup" @touchmove.stop>    <div class="pop-box flexacenter" @click.stop="holdback">        <img class="pop-title" :src="valueUrl + '/img/welcome-icon.png'">        <div class="pop-wechat-name flexcenter">            <img class="pop-wechat-icon" :src="valueUrl + '/img/wechat-name-icon.png'">            寄托方同学        </div>        <div class="pop-code-box flexcenter">            <div class="pop-code flexcenter">                <img class="pop-code-img" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_JkpcHnqqsgFptxhcq_cQnrlcaF2WQQQBq_D-81qNDQyOQ~~">            </div>            <div class="pop-text">保存识别二维码</div>        </div>        <img class="pop-bottom1" :src="valueUrl + '/img/bottom2.svg'">        <img class="pop-bottom2" :src="valueUrl + '/img/bottom1.svg'">    </div></div>`,
+});

component/QR-code-pop/QR-code-pop.txt

@@ -0,0 +1,17 @@
+<div class="QR-code-pop flexflex" v-if="state" @click="closeGroup" @touchmove.stop>
+    <div class="pop-box flexacenter" @click.stop="holdback">
+        <img class="pop-title" :src="valueUrl + '/img/welcome-icon.png'">
+        <div class="pop-wechat-name flexcenter">
+            <img class="pop-wechat-icon" :src="valueUrl + '/img/wechat-name-icon.png'">
+            寄托方同学
+        </div>
+        <div class="pop-code-box flexcenter">
+            <div class="pop-code flexcenter">
+                <img class="pop-code-img" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_JkpcHnqqsgFptxhcq_cQnrlcaF2WQQQBq_D-81qNDQyOQ~~">
+            </div>
+            <div class="pop-text">保存识别二维码</div>
+        </div>
+        <img class="pop-bottom1" :src="valueUrl + '/img/bottom2.svg'">
+        <img class="pop-bottom2" :src="valueUrl + '/img/bottom1.svg'">
+    </div>
+</div>

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: `<div class="group-pop" v-if="state" @click="closeGroup">    <img class="bj" @click.stop="holdback" :src="valueUrl + '/img/huddle-bj.jpg'">    <img class="QRCode" @click.stop="holdback" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~"></div>`,
+});

component/group-pop/group-pop.txt

@@ -0,0 +1,4 @@
+<div class="group-pop" v-if="state" @click="closeGroup">
+    <img class="bj" @click.stop="holdback" :src="valueUrl + '/img/huddle-bj.jpg'">
+    <img class="QRCode" @click.stop="holdback" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~">
+</div>

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: `<div class="helper-pop flexflex" v-if="state" @click="closeGroup" @touchmove.prevent>    <div class="helper-box flexacenter" @click.stop="holdback">        <img class="cross-grey" @click.stop="closeGroup" src="../../img/cross-grey.png" alt="">        <img class="helper-text helper-text1" src="../../img/apply-for-name.png" alt="">        <div class="helper-box-box flexflex">            <div class="helper-QRcode-box flexcenter">                <img class="left-top helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt="">                <img class="left-bottom helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt="">                <img class="right-top helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt="">                <img class="right-bottom helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt="">                <img class="helper-QRcode-img" src="https://u.gter.net/assistantwxqrcode.png" alt="">            </div>            <span class="helper-box-text">长按识别二维码</span>        </div>        <img class="helper-bottom" src="../../img/helper-bottom-yellow.svg" alt="">        <img class="helper-bottom" src="../../img/helper-bottom-blue.svg" alt="">    </div></div>`,
+    template: `<div class="helper-pop flexflex" v-if="state" @click="closeGroup" @touchmove.prevent>    <div class="helper-box flexacenter" @click.stop="holdback">        <img class="cross-grey" @click.stop="closeGroup" :src="valueUrl + '/img/cross-grey.png'" alt="">        <img class="helper-text helper-text1" :src="valueUrl + '/img/apply-for-name.png'" alt="">        <div class="helper-box-box flexflex">            <div class="helper-QRcode-box flexcenter">                <img class="left-top helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt="">                <img class="left-bottom helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt="">                <img class="right-top helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt="">                <img class="right-bottom helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt="">                <img class="helper-QRcode-img" src="https://u.gter.net/assistantwxqrcode.png" alt="">            </div>            <span class="helper-box-text">保存识别二维码</span>        </div>        <img class="helper-bottom" :src="valueUrl + '/img/helper-bottom-yellow.svg'" alt="">        <img class="helper-bottom" :src="valueUrl + '/img/helper-bottom-blue.svg'" alt="">    </div></div>`,
 });

component/helper-pop/helper-pop.txt

@@ -1,18 +1,18 @@
 <div class="helper-pop flexflex" v-if="state" @click="closeGroup" @touchmove.prevent>
     <div class="helper-box flexacenter" @click.stop="holdback">
-        <img class="cross-grey" @click.stop="closeGroup" src="../../img/cross-grey.png" alt="">
+        <img class="cross-grey" @click.stop="closeGroup" :src="valueUrl + '/img/cross-grey.png'" alt="">
-        <img class="helper-text helper-text1" src="../../img/apply-for-name.png" alt="">
+        <img class="helper-text helper-text1" :src="valueUrl + '/img/apply-for-name.png'" alt="">
         <div class="helper-box-box flexflex">
             <div class="helper-QRcode-box flexcenter">
-                <img class="left-top helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt="">
+                <img class="left-top helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt="">
-                <img class="left-bottom helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt="">
+                <img class="left-bottom helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt="">
-                <img class="right-top helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt="">
+                <img class="right-top helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt="">
-                <img class="right-bottom helper-QRcode-box-icon" src="../../img/yellow-border.svg" alt="">
+                <img class="right-bottom helper-QRcode-box-icon" :src="valueUrl + '/img/yellow-border.svg'" alt="">
                 <img class="helper-QRcode-img" src="https://u.gter.net/assistantwxqrcode.png" alt="">
             </div>
-            <span class="helper-box-text">长按识别二维码</span>
+            <span class="helper-box-text">保存识别二维码</span>
         </div>
-        <img class="helper-bottom" src="../../img/helper-bottom-yellow.svg" alt="">
+        <img class="helper-bottom" :src="valueUrl + '/img/helper-bottom-yellow.svg'" alt="">
-        <img class="helper-bottom" src="../../img/helper-bottom-blue.svg" alt="">
+        <img class="helper-bottom" :src="valueUrl + '/img/helper-bottom-blue.svg'" alt="">
     </div>
 </div>

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: `<div class="huddle-box" @click="closeGroup" v-if="state">    <div class="box flexflex" @click.stop="holdback">        <img class="bj" src="../../img/group-bj.svg" alt="">        <img class="bj-bottom" src="../../img/group-bottom.png" alt="">        <img class="top" src="../../img/group-top.png" alt="">        <img class="title" src="../../img/group-title.png" alt="">        <div class="text">抱团 / 信息共享 / 互助申学</div>        <div class="case flexflex">            <div class="QRcode flexcenter">                <img class="img" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~" alt="">            </div>            <div class="hint flexcenter">                <img class="img img-left" src="../../img/group-arrows.png" alt="">                <span class="hint-text">添加寄托葱哥进群</span>                <img class="img" src="../../img/group-arrows.png" alt="">            </div>         </div>    </div> </div>`,
+    template: `<div class="huddle-box" @click="closeGroup" v-if="state">    <div class="box flexflex" @click.stop="holdback">        <img class="bj" :src="valueUrl + '/img/group-bj.svg'" alt="">        <img class="bj-bottom" :src="valueUrl + '/img/group-bottom.png'" alt="">        <img class="top" :src="valueUrl + '/img/group-top.png'" alt="">        <img class="title" :src="valueUrl + '/img/group-title.png'" alt="">        <div class="text">抱团 / 信息共享 / 互助申学</div>        <div class="case flexflex">            <div class="QRcode flexcenter">                <img class="img" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~" alt="">            </div>            <div class="hint flexcenter">                <img class="img img-left" :src="valueUrl + '/img/group-arrows.png'" alt="">                <span class="hint-text">添加寄托葱哥进群</span>                <img class="img" :src="valueUrl + '/img/group-arrows.png'" alt="">            </div>         </div>    </div> </div>`,
 });

component/huddle-box/huddle-box.txt

@@ -1,18 +1,18 @@
 <div class="huddle-box" @click="closeGroup" v-if="state">
     <div class="box flexflex" @click.stop="holdback">
-        <img class="bj" src="../../img/group-bj.svg" alt="">
+        <img class="bj" :src="valueUrl + '/img/group-bj.svg'" alt="">
-        <img class="bj-bottom" src="../../img/group-bottom.png" alt="">
+        <img class="bj-bottom" :src="valueUrl + '/img/group-bottom.png'" alt="">
-        <img class="top" src="../../img/group-top.png" alt="">
+        <img class="top" :src="valueUrl + '/img/group-top.png'" alt="">
-        <img class="title" src="../../img/group-title.png" alt="">
+        <img class="title" :src="valueUrl + '/img/group-title.png'" alt="">
         <div class="text">抱团 / 信息共享 / 互助申学</div>
         <div class="case flexflex">
             <div class="QRcode flexcenter">
                 <img class="img" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~" alt="">
             </div>
             <div class="hint flexcenter">
-                <img class="img img-left" src="../../img/group-arrows.png" alt="">
+                <img class="img img-left" :src="valueUrl + '/img/group-arrows.png'" alt="">
                 <span class="hint-text">添加寄托葱哥进群</span>
-                <img class="img" src="../../img/group-arrows.png" alt="">
+                <img class="img" :src="valueUrl + '/img/group-arrows.png'" alt="">
             </div> 
         </div>
     </div> 

component/item-offer/item-offer.js

@@ -31,5 +31,5 @@ export const itemOffer = defineComponent({
         itemHead,
     },
 
-    template: `<div class="item-box item-offer">    <item-head :itemdata="item" :page="page"></item-head>    <a class="school flexacenter" :href="item.url" target="_blank">        <img class="icon" v-if="item.data.schoollogo" :src="item.data.schoollogo" />        <div class="text flex1 one-line-display">{{ item.data.schoolname }}</div>    </a>    <a class="major flexacenter" v-if="item.data.professional" :href="item.url" target="_blank">        <div class="key">{{ item.data.project ? '专业' : '项目/专业' }}</div>        <div class="value flex1 one-line-display">{{ item.data.professional }}</div>    </a>    <a class="major flexacenter" v-if="item.data.project" :href="item.url" target="_blank">        <div class="key">项目</div>        <div class="value flex1 one-line-display">{{ item.data.project }}</div>    </a>    <a class="info flexacenter" :href="item.url" target="_blank">        {{ item.data.semester }}        <div class="line"></div>        {{ item.data.degree }}        <div class="line"></div>        <div class="results" :class="['r' + item.data.apply_results]">{{ item.data.apply_results_text }}</div>    </a>    <a class="message" v-if="item.content" :href="item.url" target="_blank">{{ item.content }}</a>    <item-bottom :itemdata="item" :page="page"></item-bottom></div>`,
+    template: `<div class="item-box item-offer">    <item-head :itemdata="item" :page="page"></item-head>    <a class="school flexacenter" :href="item.url" target="_blank">        <img class="icon" v-if="item.data.schoollogo" :src="item.data.schoollogo" />        <div class="text flex1 one-line-display-v2">{{ item.data.schoolname }}</div>    </a>    <a class="major flexacenter" v-if="item.data.professional" :href="item.url" target="_blank">        <div class="key">{{ item.data.project ? '专业' : '项目/专业' }}</div>        <div class="value flex1 one-line-display-v2">{{ item.data.professional }}</div>    </a>    <a class="major flexacenter" v-if="item.data.project" :href="item.url" target="_blank">        <div class="key">项目</div>        <div class="value flex1 one-line-display-v2">{{ item.data.project }}</div>    </a>    <a class="info flexacenter" :href="item.url" target="_blank">        {{ item.data.semester }}        <div class="line"></div>        {{ item.data.degree }}        <div class="line"></div>        <div class="results" :class="['r' + item.data.apply_results]">{{ item.data.apply_results_text }}</div>    </a>    <a class="message" v-if="item.content" :href="item.url" target="_blank">{{ item.content }}</a>    <item-bottom :itemdata="item" :page="page"></item-bottom></div>`,
 });

component/item-offer/item-offer.txt

@@ -2,17 +2,17 @@
     <item-head :itemdata="item" :page="page"></item-head>
     <a class="school flexacenter" :href="item.url" target="_blank">
         <img class="icon" v-if="item.data.schoollogo" :src="item.data.schoollogo" />
-        <div class="text flex1 one-line-display">{{ item.data.schoolname }}</div>
+        <div class="text flex1 one-line-display-v2">{{ item.data.schoolname }}</div>
     </a>
 
     <a class="major flexacenter" v-if="item.data.professional" :href="item.url" target="_blank">
         <div class="key">{{ item.data.project ? '专业' : '项目/专业' }}</div>
-        <div class="value flex1 one-line-display">{{ item.data.professional }}</div>
+        <div class="value flex1 one-line-display-v2">{{ item.data.professional }}</div>
     </a>
 
     <a class="major flexacenter" v-if="item.data.project" :href="item.url" target="_blank">
         <div class="key">项目</div>
-        <div class="value flex1 one-line-display">{{ item.data.project }}</div>
+        <div class="value flex1 one-line-display-v2">{{ item.data.project }}</div>
     </a>
 
     <a class="info flexacenter" :href="item.url" target="_blank">

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;
+  width: 100%;
-  height: 60px;
+  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;
+  width: 100%;
-  height: 140px;
+  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;
+  width: 100%;
-  height: 118px;
+  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;
+  flex: 1;
-  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;
+  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;
+  width: calc((100% - 36px) / 4);
-  height: 103px;
+  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) {
+#appIndex .matter .matter-content .forum-sections-list .list .line {
-  margin-bottom: 10px;
+  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;
+}

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;
+                        width: 100%;
-                        height: 60px;
+                        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;
+                width: 100%;
-                height: 140px;
+                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;
+                        width: 100%;
-                        height: 118px;
+                        height: auto;
                         border-radius: 5px;
                         cursor: pointer;
+                        object-fit: cover;
                     }
                 }
 
                 .list {
                     font-size: 14px;
                     color: #555555;
-                    padding-top: 12px;
+                    flex: 1;
-                    width: 281px;
                     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;
+                width: calc((100% - 36px) / 4);
-                height: 103px;
+                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;
+                // flex: 1;
-                height: 240px;
+                // 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) {
+                        flex-wrap: wrap;
-                            margin-bottom: 10px;
-                        }
-
                         .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 @@
             }
         }
     }
-}
+}
+
+@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;
+            }
+        }
+    }
+}

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);
+  }
+}

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);
+            // }
+        }
+    }
+}

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;
   }

css/search-tag.less

@@ -271,8 +271,8 @@
             height: 40px !important;
         }
         .classify {
-            margin-left: 10px;
+            // margin-left: 10px;
-            margin-right: 10px;
+            // margin-right: 10px;
         }
 
         .matter {

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;
   }
 }

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-left: 10px;
-            margin-right: 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;
     }
 }

img/bottom1.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="151px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="151" x2="500" y2="0" id="LinearGradient693">
+      <stop id="Stop694" stop-color="#c6dd8f" offset="0" />
+      <stop id="Stop695" stop-color="#7991bc" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -738 -1121 )">
+    <path d="M 0 151  L 0 0  C 0 0  110.916965217331 54.7610464341339  252 54.578313253012  C 390.916397535917 54.3983863378389  500 0  500 0  L 500 151  L 0 151  Z " fill-rule="nonzero" fill="url(#LinearGradient693)" stroke="none" transform="matrix(1 0 0 1 738 1121 )" />
+  </g>
+</svg>

img/bottom2.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="155px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -738 -1117 )">
+    <path d="M 0 155  L 0 0  C 0 0  110.916965217331 43.139381024107  252 42.9518072289157  C 390.916397535917 42.7671140378439  500 0  500 0  L 500 155  L 0 155  Z " fill-rule="nonzero" fill="#fddf6d" stroke="none" transform="matrix(1 0 0 1 738 1117 )" />
+  </g>
+</svg>

index-v2.html

@@ -0,0 +1,759 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>寄托天下_中立的出国留学申请和考试交流平台|留学资讯|DIY留学|留学经验|留学考试|海外生活 寄托天下出国留学网 -- 寄托天下</title>
+    <link rel="stylesheet" href="/css/public.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <!-- <link rel="stylesheet" href="https://f.gter.net/css/index.css" /> -->
+
+    <meta name="description" content="提供最有用的出国留学资讯和最热心的留学交流论坛。在BBS上,你可以咨询签证, 面试, 机经, offer, 奖学金, 名校专业等, 也可以分享雅思、托福、GRE的学习心得。无论你留学在美国、加拿大、英国还是澳洲, 都能在留学论坛上找到寄托情感的归宿。">
+    <meta name="keywords" content="美国留学,加拿大留学,香港留学,新加坡留学,英国留学,欧洲留学, 留学经验分享,DIY留学,留学申请,留学流程,留学费用,出国留学,留学论坛, 留学网站,留学考试,GRE,TOEFL,IBT,GMAT,IELTS,SAT,VISA,文书,签证">
+    <meta name="author" content="">
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="寄托天下_中立的出国留学申请和考试交流平台|留学资讯|DIY留学|留学经验|留学考试|海外生活 寄托天下出国留学网">
+    <meta property="og:description" content="提供最有用的出国留学资讯和最热心的留学交流论坛。在BBS上,你可以咨询签证, 面试, 机经, offer, 奖学金, 名校专业等, 也可以分享雅思、托福、GRE的学习心得。无论你留学在美国、加拿大、英国还是澳洲, 都能在留学论坛上找到寄托情感的归宿。">
+    <meta property="og:image" content="">
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:title" content="寄托天下_中立的出国留学申请和考试交流平台|留学资讯|DIY留学|留学经验|留学考试|海外生活 寄托天下出国留学网">
+    <meta property="twitter:description" content="提供最有用的出国留学资讯和最热心的留学交流论坛。在BBS上,你可以咨询签证, 面试, 机经, offer, 奖学金, 名校专业等, 也可以分享雅思、托福、GRE的学习心得。无论你留学在美国、加拿大、英国还是澳洲, 都能在留学论坛上找到寄托情感的归宿。">
+    <meta property="twitter:image" content="">
+    <!-- 网站图标 -->
+    <link rel="icon" href="https://www.gter.net/favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="https://www.gter.net/favicon.ico" type="image/x-icon">
+    <style>
+        [v-cloak] {
+            display: none !important;
+        }
+
+        #pre-loader {
+            height: 70vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #pre-loader .three-bounce>div {
+            display: inline-block;
+            width: 18px;
+            height: 18px;
+            border-radius: 100%;
+            top: 50%;
+            margin-top: -9px;
+            background: #aeadba;
+            animation: bouncedelay 1.4s infinite ease-in-out;
+            animation-fill-mode: both;
+        }
+
+        #pre-loader .three-bounce .one {
+            animation-delay: -0.32s;
+        }
+
+        #pre-loader .three-bounce .two {
+            animation-delay: -0.16s;
+        }
+
+        @keyframes bouncedelay {
+
+            0%,
+            100%,
+            80% {
+                transform: scale(0);
+                -webkit-transform: scale(0);
+            }
+
+            40% {
+                transform: scale(1);
+                -webkit-transform: scale(1);
+            }
+        }
+    </style>
+    <script type="text/javascript">
+        var STYLEID = '2',
+            STATICURL = 'static/',
+            IMGDIR = 'https://bbs.gter.net/template/archy_plt8/image',
+            VERHASH = 'Z62',
+            charset = 'gbk',
+            discuz_uid = '0',
+            cookiepre = '4B5x_c0ae_',
+            cookiedomain = 'gter.net',
+            cookiepath = '/',
+            showusercard = '1',
+            attackevasive = '0',
+            disallowfloat = '',
+            creditnotice = ',',
+            defaultstyle = '',
+            REPORTURL = 'aHR0cDovL2Jicy5ndGVyLm5ldC9mb3J1bS5waHA/dGlkPTI0MDYzNTYmZ290bz1sYXN0cG9zdA==',
+            SITEURL = 'https://app.gter.net/',
+            JSPATH = 'static/js/';
+    </script>
+    <script src="https://app.gter.net/bottom?tpl=header&menukey=bbs"></script>
+    <script src="https://framework.x-php.com/gter/bbs/static/js/common.js" charset="gbk"></script>
+</head>
+
+<body>
+    <script>
+        window.__ASSET_VERSION__ = 'Z69';
+        // 判断是否是移动端
+        window.isMobile = window.innerWidth <= 768;
+
+    </script>
+    <div id="ajaxwaitid"></div>
+    <div id="append_parent"></div>
+    <div class="head-top flexacenter" style="width: 1200px;margin: 20px auto 30px;">
+        <a href="/" class="flexacenter" target="_blank">
+            <img class="logo" src="https://oss.gter.net/logo" alt="" />
+        </a>
+        <div class="flex1"></div>
+        <div class="input-box flexacenter">
+            <div class="placeholder">
+                <div class="placeholder-box" style="transition: transform .3s ease"></div>
+            </div>
+
+            <input class="input flex1" type="text" maxlength="140" /> <img class="icon" onclick="searchEvent()" src="https://framework.x-php.com/gter/forum/img/search-icon.svg?v=euX4m9PrbyvP" />
+            <div class="search-box-history">
+                <div class="search-box-history-title">历史搜索</div>
+                <div class="search-box-history-list"></div>
+            </div>
+        </div>
+
+        <div class="post-list flexacenter"> </div>
+
+        <div class="sign-in sign-in-no flexacenter"></div>
+
+        <div class="head-more flexcenter" onclick="openHeadPop()">
+            <img class="more-icon" style="width: 18px;height: 15px;" src="https://framework.x-php.com/gter/forum/img/threeAcross.svg?v=euX4m9PrbyvP" />
+        </div>
+
+        <div class="head-pop" style="display: none;">
+            <div class="head-more-pop">
+                <div class="head-more-userinfo flex1 flexacenter">
+                    <div class="head-more-left flexacenter"><img class="head-more-userinfo-avatar" src="" alt="">
+                        <div class="head-more-userinfo-username"></div>
+                    </div>
+                    <div class="head-more-right">
+                        <div class="loginBtn flexcenter" onclick="go_ajax_Login()">登录/注册</div>
+                    </div>
+                </div>
+                <div class="tab-list"><a class="tab-item flexacenter" href="https://www.gter.net" target="_blank">寄托首页</a><a class="tab-item flexacenter pitch" href="https://f.gter.net" target="_blank">论坛</a><a class="tab-item flexacenter" href="https://app.gter.net/admissionOfficer" target="_blank">招生官</a><a class="tab-item flexacenter" href="https://bbs.gter.net/thread-2345065-1-1.html" target="_blank">加群</a><a class="tab-item flexacenter" href="https://offer.gter.net" target="_blank">Offer榜</a></div>
+                <a class="head-more-post flexcenter" href="/publish" target="" onclick="skipLoginUrl(event)">
+                    <div class="head-more-post-icon flexcenter"><img class="head-more-post-img" src="https://framework.x-php.com/gter/forum/img/addyellow.svg?v=euX4m9PrbyvP" /></div>发布帖子
+                </a>
+                <img class="cross-icon" onclick="crossHeadPop()" src="https://framework.x-php.com/gter/forum/img/cross.svg?v=euX4m9PrbyvP">
+            </div>
+        </div>
+    </div>
+    <div class="valueA" style="display: none;">https://framework.x-php.com/gter/forum/</div>
+
+    <sign-in-box></sign-in-box>
+    <div class="container" id="appIndex">
+
+        <div class="header-content-box flexflex">
+            <div class="header-content-left">
+                <div class="adv-list flexacenter">
+                    <div class="headerbanner adv-item"><a href="https://u.gter.net/Prvu9GvzXWWC" data-x-event="bbsAdv" data-x-event-id="778" target="_blank"><img src="https://o.x-php.com/bbs/common/cf/155629cw8ccbw6ipiycoio.gif" height="60" width="468" border="0"></a></div>
+                    <div class="subnavbanner adv-item"><a href="/details/W0KqbeO5SHjG" target="_blank"><img src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_JkvfHbqqsgFptxhXa6RWi26P-BuTQcSQLLBs9kb8LQ0NDI5" height="60" width="468" border="0"></a></div>
+                </div>
+                <!-- 话题和精选 -->
+                <div class="topic-and-selectives flexflex">
+                    <div class="topic-box">
+                        <div class="head-top flexcenter">
+                            <img class="icon" src="https://framework.x-php.com/gter/forum/img/well-white.svg?v=euX4m9PrbyvP" />
+                            <div class="text">话题</div>
+                        </div>
+                        <div class="topic-head flexflex">
+                            <a class="title one-line-display vuehide" :href="'/details/' + ongoingbj.uniqid" target="_blank"></a>
+                            <a class="title one-line-display" :href="'/details/' + ongoingbj.uniqid" target="_blank" v-cloak>{{ ongoingbj.title }}</a>
+                            <a class="hint one-line-display" :href="'/details/' + ongoingbj.uniqid" target="_blank"></a>
+                            <div class="people flexacenter">
+                                <div class="left flexacenter">
+                                    <div class="number vuehide"></div>
+                                    <div class="number" v-cloak>{{ ongoingbj.comments }}</div>
+                                    <div class="text">人正在讨论</div>
+                                </div>
+                                <div class="right flexacenter">
+                                    <div class="item flexcenter" v-for="(item, index) in ongoingbj.commentUser" :key="index" :style="{zIndex: 7 - index }">
+                                        <img class="img" :src="item.avatar" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="topic-list">
+                            <a class="item flexacenter" v-for="(item, index) in pastList" :key="index" :href="'/details/' + item.uniqid" target="_blank">
+                                <img class="img" src="https://framework.x-php.com/gter/forum/img/well-yellow.svg?v=euX4m9PrbyvP" />
+                                <div class="text one-line-display flex1" v-html="item.title"></div>
+                            </a>
+                        </div>
+                    </div>
+
+                    <div class="selectives-box">
+                        <div class="head-top flexcenter">
+                            <img class="icon" src="https://framework.x-php.com/gter/forum/img/handpick-icon.png?v=euX4m9PrbyvP" />
+                            <div class="text">精选</div>
+                        </div>
+                        <div class="list flexflex">
+                            <a class="item flexacenter" v-for="(item, index) in topicHandpickedList" :key="index" :href="'/details/' + item.uniqid" target="_blank">
+                                <div class="dot"></div>
+                                <div class="text one-line-display" v-html="item.title"></div>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="header-left-bottom-box flexflex">
+                    <a class="adv flexacenter" data-x-event="bbsindexslide" href="https://offer.gter.net/duckProphet" title="26Fall-offer鸭先知" target="_blank">
+                        <img class="adv-icon" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c95MocHbqqsgFptxhT66SWgrlI64uMxcfWaHf9Z0F9N5dCHzZ5RLrizQ0Mjk~" alt="26Fall-offer鸭先知" />
+                    </a>
+                    <div class="list">
+                        <div class="item flexacenter">
+                            <div class="icon dot-gray"></div>
+                            <a class="one-line-display text flex1" href="https://offer.gter.net/details/vnzyj8vjWzDK" target="_blank">香港科技大学 AI 太贵了</a>
+                        </div>
+                        <div class="item flexacenter">
+                            <div class="icon dot-gray"></div>
+                            <a class="one-line-display text flex1" href="https://offer.gter.net/details/juPvfSzvbOvv" target="_blank">鲁汶大学 有点离谱不想去</a>
+                        </div>
+                        <div class="item flexacenter">
+                            <div class="icon dot-gray"></div>
+                            <a class="one-line-display text flex1" href="https://offer.gter.net/details/5GLeOzuHjLnj" target="_blank">26Fall Offer 10 SSE Econ</a>
+                        </div>
+                        <div class="item flexacenter">
+                            <div class="icon dot-gray"></div>
+                            <a class="one-line-display text flex1" href="https://offer.gter.net/details/SzfGzTzTPWW4" target="_blank">香港理工大学 当保底了</a>
+                        </div>
+                    </div>
+                    <div class="list list2">
+                        <div class="item flexacenter">
+                            <div class="icon dot-gray"></div>
+                            <a class="one-line-display text flex1" href="https://offer.gter.net/details/KXCGLrGvbia4" target="_blank">26Fall-埃因霍温理工大学</a>
+                        </div>
+                        <div class="item flexacenter">
+                            <div class="icon dot-gray"></div>
+                            <a class="one-line-display text flex1" href="https://offer.gter.net/details/S18G9aHnDnPn" target="_blank">港城莞 cs MSc 没有吸引力</a>
+                        </div>
+                        <div class="item flexacenter">
+                            <div class="icon dot-gray"></div>
+                            <a class="one-line-display text flex1" href="https://interviewexperience.gter.net/details/SX4KfeGDeXCi" target="_blank">面经：圣三一性别研究Mphil</a>
+                        </div>
+                        <div class="item flexacenter">
+                            <div class="icon dot-gray"></div>
+                            <a class="one-line-display text flex1" href="https://offer.gter.net/details/jey48WGfGfam" target="_blank">巴黎政治学院 传媒被拒</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="header-content-right">
+                <div class="post-entrance">
+                    <a class="entrance-top flexacenter" href="/publish" target="_blank" @click="handleCheckAttest"><img class="icon" src="./img/forum.png" />我要发帖</a>
+                    <div class="entrance-bottom flexacenter">
+                        <a class="item flexcenter" href="https://offer.gter.net/post" @click="handleCheckAttest" target="_blank">
+                            <div class="icon-box">
+                                <img class="icon" src="https://framework.x-php.com/gter/forum/img/offer-icon-V2.svg?v=euX4m9PrbyvP" />
+                            </div>
+                            <span class="text">报Offer</span>
+                        </a>
+                        <a class="item flexcenter" href="https://offer.gter.net/post/summary" @click="handleCheckAttest" target="_blank">
+                            <div class="icon-box">
+                                <img class="icon" src="https://framework.x-php.com/gter/forum/img/summary-icon-V2.svg?v=euX4m9PrbyvP" />
+                            </div>
+                            <span class="text">写总结</span>
+                        </a>
+                        <a class="item flexcenter" href="https://interviewexperience.gter.net/publish" @click="handleCheckAttest" target="_blank">
+                            <div class="icon-box">
+                                <img class="icon" src="https://framework.x-php.com/gter/forum/img/mj-icon-V2.svg?v=euX4m9PrbyvP" />
+                            </div>
+                            <span class="text">写面经</span>
+                        </a>
+                        <a class="item flexcenter" href="https://vote.gter.net/publish" @click="handleCheckAttest" target="_blank">
+                            <div class="icon-box">
+                                <img class="icon" src="https://framework.x-php.com/gter/forum/img/vote-icon-V2.svg?v=euX4m9PrbyvP" />
+                            </div>
+                            <span class="text">发起投票</span>
+                        </a>
+                    </div>
+                </div>
+                <div class="custom_2 adv" ref="custom_2AdvRef"><a href="https://u.gter.net/8i8KfWGvTKXu" data-x-event="bbsAdv" data-x-event-id="777" target="_blank"><img src="https://o.x-php.com/bbs/common/cf/152158dpf5eh7pqpaealiq.gif" border="0"></a></div>
+                <div class="group-box">
+                    <div class="group flexflex">
+                        <div class="group-item flexcenter">
+                            <div class="title">26FALL</div>
+                            <div class="subtitle">申请群</div>
+                            <div class="QRcode-box flexcenter">
+                                <img class="QRcode" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~" />
+                                <div class="text">微信扫码</div>
+                            </div>
+                        </div>
+                        <div class="group-item flexcenter">
+                            <div class="title">申请求助</div>
+                            <div class="subtitle">寄托院校君</div>
+                            <div class="QRcode-box flexcenter">
+                                <img class="QRcode" src="https://u.gter.net/assistantwxqrcode.png" />
+                                <div class="text">微信扫码</div>
+                            </div>
+                        </div>
+                        <div class="group-item flexcenter">
+                            <div class="title">香港租房</div>
+                            <div class="subtitle">交流群</div>
+                            <div class="QRcode-box flexcenter">
+                                <img class="QRcode" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~" />
+                                <div class="text">微信扫码</div>
+                            </div>
+                        </div>
+                        <div class="group-item flexcenter">
+                            <div class="title">香港租房顾问</div>
+                            <div class="subtitle">寄托方同学</div>
+                            <div class="QRcode-box flexcenter">
+                                <img class="QRcode" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_JkpcHnqqsgFptxhcq_cQnrlcaF2WQQQBq_D-81qNDQyOQ~~" />
+                                <div class="text">微信扫码</div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+
+                <div class="offer-box" :class="{'big': !custom_2AdvRef}" id="offer-box" @mouseover="offerMouseover" @mouseout="offerMouseout">
+                    <div class="offer-list" id="offer-list" ref="offerListRef" :style="{'margin-top': -offerMargin + 'px'}">
+                        <a class="item flexflex" :href="item['url']" target="_blank" v-for="(item, index) in offerlist" :key="index">
+                            <div class="avatar" :style="{backgroundImage: `url(${item.user['avatar']})`}"></div>
+                            <div class="">
+                                <div class="condition one-line-display" v-cloak style="height: 17px;">{{ item["date"] }} {{ item['type_label'] }}</div>
+                                <div class="titletitle one-line-display" v-cloak style="height: 20px;">{{ item["content"] }}</div>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="admission">
+            <a class="admission-header flexflex" target="_blank" href="https://admissionofficer.gter.net">
+                <img class="admission-header-icon" src="/img/admission-officer-icon.png">
+                <div class="admission-header-name flexflex">Hello Admission Officer</div>
+            </a>
+            <div class="admission-list flexflex">
+                <div class="admission-item flexcenter">
+                    <a class="admission-img" href="https://u.gter.net/ad/1054?x=gter" target="_blank">
+                        <img src="https://o.x-php.com/Zvt57TuJSUvkyhw-xGnSskf57MJoMT_Fsq9DwMI1EuyMED63bKEtAmkLfvWH4sxjtaM9biierFaq-w1X0BACzthmrBDmRe4Za8WJtUoB4WZMfMOnffaaFYU6LcOVh-3zu1apgN799koldhb0KGuHSNK1gJ0jRkHZYxm738yXgyT4Vl89GL1RT3rg1FpDYM8rZRNGWplgpDF9NDQyOQ~~" alt="中大政务" />
+                    </a>
+                </div>
+                <div class="admission-item flexcenter">
+                    <a class="admission-img" href="https://u.gter.net/ad/1075?x=gter" target="_blank">
+                        <img src="https://o.x-php.com/Zvt57TuJSUvkyhw-xGnSskf57MJoMT_Fsq9DwMI1EuyMED63bKEtAmkLfvWH4sxjtaM9biierFaq-w1X0BACzthmrBD6ROsZI8qJtUoB4WZMfMOnffaaFYU6LcOVh-3zu1apgN799koiZEDCIHCCWNK1gJ0jRkHZYxm738yXgyT4Vl89GL1RT3rg1FpDYM8kNhZMU5hgpDF9NDQyOQ~~" alt="教大个人理财" />
+                    </a>
+                </div>
+                <div class="admission-item flexcenter">
+                    <a class="admission-img" href="https://u.gter.net/ad/964?x=gter" target="_blank">
+                        <img src="https://o.x-php.com/Zvt57TuJSUvkyhw-xGnSskf57MJoMT_Fsq9DwMI1EuyMED63bKEtAmkLfvWH4sxjtaM9biierFaq-w1X0BACzthmrBDmQusvPM6JtUoB4WZMfMOnffaaFYU6LcOVh-3zu1apgN799koiZlTjaFqedZu1gJ0jRkHZYxm738yXgyT4Vl89GL1RT3rg1FpDYM95MxVKUMBgpDF9NDQyOQ~~" alt="香港中文大学经济学" />
+                    </a>
+                </div>
+                <div class="admission-item flexcenter">
+                    <a class="admission-img" href="https://u.gter.net/ad/1070?x=gter" target="_blank">
+                        <img src="https://o.x-php.com/Zvt57TuJSUvkyhw-xGnSskf57MJoMT_Fsq9DwMI1EuyMED63bKEtAmkLfvWH4sxjtaM9biierFaq-w1X0BACzthmrBD6Rewvf8KJtUoB4WZMfMOnffaaFYU6LcOVh-3zu1apgN799koldlTJLVmFEJe1gJ0jRkHZYxm738yXgyT4Vl89GL1RT3rg1FpDYM8sZhAbV8NgpDF9NDQyOQ~~" alt="理工会计金融" />
+                    </a>
+                </div>
+                <div class="admission-item flexcenter">
+                    <a class="admission-img" href="https://u.gter.net/ad/1072?x=gter" target="_blank">
+                        <img src="https://o.x-php.com/Zvt57TuJSUvkyhw-xGnSskf57MJoMT_Fsq9DwMI1EuyMED63bKEtAmkLfvWH4sxjtaM9biierFaq-w1X0BACzthmrBDmXewvON2JtUoB4WZMfMOnffaaFYU6LcOVh-3zu1apgN799kolcBbJd3CFdr61gJ0jRkHZYxm738yXgyT4Vl89GL1RT3rg1FpDYM9-NkNKUJRgpDF9NDQyOQ~~" alt="港大工程学院" />
+                    </a>
+                </div>
+                <div class="admission-item flexcenter">
+                    <a class="admission-img" href="https://u.gter.net/ad/1071?x=gter" target="_blank">
+                        <img src="https://o.x-php.com/Zvt57TuJSUvkyhw-xGnSskf57MJoMT_Fsq9DwMI1EuyMED63bKEtAmkLfvWH4sxjtaM9biierFaq-w1X0BACzthmrBD6Rewvb8mJtUoB4WZMfMOnffaaFYU6LcOVh-3zu1apgN799kolcRbCb3aCEJO1gJ0jRkHZYxm738yXgyT4Vl89GL1RT3rg1FpDYM8lZhUcApNgpDF9NDQyOQ~~" alt="港教大心理学" />
+                    </a>
+                </div>
+                <div class="admission-item flexcenter">
+                    <a class="admission-img" href="https://u.gter.net/ad/1009?x=gter" target="_blank">
+                        <img src="https://o.x-php.com/Zvt57TuJSUvkyhw-xGnSskf57MJoMT_Fsq9DwMI1EuyMED63bKEtAmkLfvWH4sxjtaM9biierFaq-w1X0BACzthmrBD6ROwZPMmJtUoB4WZMfMOnffaaFYU6LcOVh-3zu1apgN799kolcUHjb3eCEL61gJ0jRkHZYxm738yXgyT4Vl89GL1RT3rg1FpDYM9-MxZLVZhgpDF9NDQyOQ~~" alt="港大教育" />
+                    </a>
+                </div>
+                <div class="admission-item flexcenter">
+                    <a class="admission-img" href="https://u.gter.net/ad/981?x=gter" target="_blank">
+                        <img src="https://o.x-php.com/Zvt57TuJSUvkyhw-xGnSskf57MJoMT_Fsq9DwMI1EuyMED63bKEtAmkLfvWH4sxjtaM9biierFaq-w1X0BACzthmrBD6Rewvf92JtUoB4WZMfMOnffaaFYU6LcOVh-3zu1apgN799koiZhaUaGKRT4-1gJ0jRkHZYxm738yXgyT4Vl89GL1RT3rg1FpDYM8qNRIbBsVgpDF9NDQyOQ~~" alt="理工商业管理" />
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div class="pop-list">
+            <div class="list">
+                <div class="item" v-for="item in popList" @click="openPop(item.type)">
+                    <div class="top">{{ item.title }}</div>
+                    <div class="bottom">{{ item.subtitle }}</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="matter flexflex" ref="matterRef">
+            <div class="matter-content flex1">
+                <!-- 论坛板块列表 -->
+                <div class="forum-sections-list">
+                    <img class="img" src="https://framework.x-php.com/gter/forum/img/sections-left.svg?v=euX4m9PrbyvP" />
+                    <div class="title">论坛版块</div>
+                    <div class="list">
+                        <template v-for="(item, index) in sectionList" :key="index">
+                            <div class="line flexacenter">
+                                <a class="item flexacenter" v-for="(item, index) in item" :key="index" target="_blank" :href="`/section/${item.uniqid}`">{{ item.name }}</a>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+
+                <!-- <item-forum :itemdata="item" v-for="(item, index) in list" :key="index"></item-forum> -->
+
+                <template v-for="(item,index) in list" :key="index">
+                    <item-offer v-if=" item.type == 'offer'" :itemdata="item"></item-offer>
+                    <item-summary v-else-if="item.type == 'offer_summary'" :itemdata="item"></item-summary>
+                    <item-vote v-else-if="item.type == 'vote'" :itemdata="item"></item-vote>
+                    <item-mj v-else-if="item.type == 'interviewexperience'" :itemdata="item"></item-mj>
+                    <item-tenement v-else-if="item.type == 'tenement'" :itemdata="item"></item-tenement>
+                    <item-project v-else-if="item.type == 'programs' || tabValue == 'xg'" :itemdata="item"></item-project>
+                    <item-forum v-else :itemdata="item"></item-forum>
+                </template>
+                <load-box :loading="loading"></load-box>
+            </div>
+            <div class="sidebar" ref="sidebarRef" :style="{'top': sidebarHeight + 'px'}">
+                <div class="custom_1 ad-item"><a href="https://u.gter.net/by1aWW1iKSrf" data-x-event="bbsAdv" data-x-event-id="779" target="_blank"><img src="https://o.x-php.com/bbs/common/cf/1600395jzy35vvv75fy6oo.jpg" height="220" width="291" border="0"></a></div> <!-- offer -->
+                <div class="offer-side-box side-box" v-if="offer.length != 0">
+                    <div class="side-header flexacenter">
+                        <div class="left flexacenter">
+                            <img class="header-icon" src="https://framework.x-php.com/gter/forum/img/offer-index-icon.png?v=euX4m9PrbyvP" />
+                            <div class="title">Offer</div>
+                        </div>
+                        <a class="more flexacenter" href="https://offer.gter.net" target="_blank">
+                            <span>more</span>
+                            <img class="more-icon" src="https://framework.x-php.com/gter/forum/img/right-arrow-black.svg?v=euX4m9PrbyvP" />
+                        </a>
+                    </div>
+                    <div class="box">
+                        <a class="item flexflex" v-cloak v-for="item in offer" :key="item" :href="'/details/' + item['uniqid']" target="_blank">
+                            <img class="school-img" :src="item.data['schoollogo']" />
+                            <div class="school-detail flex1 flexflex">
+                                <div class="school-name one-line-display vuehide"></div>
+                                <div v-cloak class="school-name one-line-display">{{ item.data['schoolname'] }}</div>
+                                <div class="school-brief one-line-display">{{ item.data['professional'] }}</div>
+                                <div class="school-offer flexacenter">
+                                    <span>{{ item.data['degree'] }}</span>
+                                    <span class="long-string">|</span>
+                                    <span>{{ item.data['semester'] }}</span>
+                                    <span class="long-string">|</span>
+                                    <span>{{ item.data['apply_results_text'] }}</span>
+                                </div>
+                            </div>
+                        </a>
+                        <a class="add-btn flexcenter" @click="handleCheckAttest" style="position: relative" href="https://offer.gter.net/post" target="_blank" v-cloak>
+                            <img class="add-icon" src="https://framework.x-php.com/gter/forum/img/add-btn-black.svg?v=euX4m9PrbyvP" />
+                            <div>报Offer</div>
+                            <div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- vote -->
+                <div class="vote-side-box side-box" v-if="vote.length != 0">
+                    <div class="side-header flexacenter">
+                        <div class="left flexacenter">
+                            <img class="header-icon" src="https://framework.x-php.com/gter/forum/img/vote-index-icon.png?v=euX4m9PrbyvP" />
+                            <div class="title">投票</div>
+                        </div>
+                        <a class="more flexacenter" target="_blank" href="https://vote.gter.net">
+                            <span>more</span>
+                            <img class="more-icon" src="https://framework.x-php.com/gter/forum/img/right-arrow-black.svg?v=euX4m9PrbyvP" />
+                        </a>
+                    </div>
+                    <div class="box">
+                        <a class="item flexflex" v-cloak v-for="item in vote" :key="item" target="_blank" :href="'/details/' + item['uniqid']">
+                            <div class="name one-line-display">{{item['title']}}</div>
+                            <div class="brief">{{ item['content'] }}</div>
+                        </a>
+                        <a class="add-btn flexcenter" @click="handleCheckAttest" style="position: relative" v-cloak target="_blank" href="https://vote.gter.net/publish">
+                            <img class="add-icon" src="https://framework.x-php.com/gter/forum/img/add-btn-black.svg?v=euX4m9PrbyvP" />
+                            <div>发起投票</div>
+                            <div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- mj -->
+                <div class="interviewexperience-side-box side-box" v-if="interviewexperience.length != 0">
+                    <div class="side-header flexacenter">
+                        <div class="left flexacenter">
+                            <img class="header-icon" src="https://framework.x-php.com/gter/forum/img/mj-index-icon.png?v=euX4m9PrbyvP" />
+                            <div class="title">面经</div>
+                        </div>
+                        <a class="more flexacenter" href="https://interviewexperience.gter.net/" target="_blank">
+                            <span>more</span>
+                            <img class="more-icon" src="https://framework.x-php.com/gter/forum/img/right-arrow-black.svg?v=euX4m9PrbyvP" />
+                        </a>
+                    </div>
+                    <div class="box">
+                        <a class="item flexflex" v-cloak v-for="(item,index) in interviewexperience" :key="item" :href="'/details/' + item['uniqid']" target="_blank">
+                            <div class="school one-line-display">{{ item.data['schoolname'] }}</div>
+                            <div class="major one-line-display">{{ item.data['profession'] || item.data['project'] }}</div>
+                            <div class="info">
+                                <img class="icon" :src="item.user['avatar']" />
+                                <span class="text">{{ item['content'] }}</span>
+                            </div>
+                        </a>
+                        <a class="add-btn flexcenter" @click="handleCheckAttest" style="position: relative" href="https://interviewexperience.gter.net/publish" target="_blank" v-cloak>
+                            <img class="add-icon" src="https://framework.x-php.com/gter/forum/img/add-btn-black.svg?v=euX4m9PrbyvP" />
+                            <div>写面经</div>
+                            <div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- newest 最新 -->
+                <latest-list boxtype="newest"></latest-list>
+                <latest-list boxtype="essence"></latest-list>
+            </div>
+        </div>
+
+        <huddle-box ref="huddleBoxRef"></huddle-box>
+        <helper-pop ref="helperPopRef"></helper-pop>
+        <group-pop ref="groupPopRef"></group-pop>
+        <qr-code-pop ref="qrCodePopRef"></qr-code-pop>
+    </div>
+
+    <script src="https://framework.x-php.com/gter/forum/js/vue.global.js?v=euX4m9PrbyvP"></script>
+    <script src="https://framework.x-php.com/gter/forum/js/axios.min.js?v=euX4m9PrbyvP"></script>
+    <script src="https://framework.x-php.com/gter/forum/js/public.js?v=euX4m9PrbyvP"></script>
+
+
+    <script src="https://framework.x-php.com/gter/forum/js/scrolltext.js?v=euX4m9PrbyvP"></script>
+    <script type="module" src="/js/index.js"></script>
+    <script type="module" src="https://framework.x-php.com/gter/forum/../image/gter/commonCom/sign-in/sign-in.js?v=euX4m9PrbyvP"></script>
+
+
+    <script src="https://app.gter.net/bottom?tpl=footer,popupnotification"></script>
+
+    <script>
+        if (location.href.indexOf('details') != -1) {
+            const postList = document.querySelector('.head-top .post-list')
+            postList.innerHTML = `<a href="/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="https://framework.x-php.com/gter/forum/img/post-thread.png?v=euX4m9PrbyvP" /> </a> <a href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px"> <img class="post-item" src="https://framework.x-php.com/gter/forum/img/post-offer.png?v=euX4m9PrbyvP" /> </a> <a href="https://offer.gter.net/post/summary" target="_blank" style="margin-right: 10px"> <img class="post-item" src="https://framework.x-php.com/gter/forum/img/post-summary.png?v=euX4m9PrbyvP" /> </a> <a href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="https://framework.x-php.com/gter/forum/img/post-mj.png?v=euX4m9PrbyvP" /> </a> <a href="https://vote.gter.net/publish" target="_blank"> <img class="post-item" src="https://framework.x-php.com/gter/forum/img/post-vote.png?v=euX4m9PrbyvP" /> </a>`
+            postList.style.display = 'flex'
+        } else if (location.href.indexOf('search') != -1) {
+            const box = document.querySelector(".head-top")
+            box.querySelector(".input-box").style.display = "none"
+            box.querySelector(".sign-in").style.display = "none"
+        } else if (location.href.indexOf("publish") != -1) {
+            const box = document.querySelector(".head-top")
+            if (box) document.body.removeChild(box)
+        } else {
+            const signIn = document.querySelector('.head-top .sign-in')
+            console.log('signIn', signIn);
+            signIn.innerHTML = `<div class="sign-in-no-box" onclick="headSignIn()">
+                <img class="sign-in-bj" src="https://framework.x-php.com/gter/forum/img/sign-in-bj.svg?v=euX4m9PrbyvP" /><img class="coin-bj" src="https://framework.x-php.com/gter/forum/img/coin-bj.svg?v=euX4m9PrbyvP" />
+                <img class="coin-icon" src="https://framework.x-php.com/gter/forum/img/coin-icon.png?v=euX4m9PrbyvP" /><span class="text flex1">签到领寄托币</span>
+                <div class="sign-go flexcenter">
+                    <img class="sign-go-bj" src="https://framework.x-php.com/gter/forum/img/sign-go.svg?v=euX4m9PrbyvP" /> GO
+                </div>
+                <img class="petal1" src="https://framework.x-php.com/gter/forum/img/petal1.png?v=euX4m9PrbyvP" />
+                <img class="petal2" src="https://framework.x-php.com/gter/forum/img/petal2.png?v=euX4m9PrbyvP" />
+                <img class="petal3" src="https://framework.x-php.com/gter/forum/img/petal3.png?v=euX4m9PrbyvP" />
+            </div>
+            <div class="sign-in-already-box">
+                <img class="sign-icon" src="https://framework.x-php.com/gter/forum/img/sign-icon.png?v=euX4m9PrbyvP" />
+                <span>已签到，明天再来</span>
+            </div>`
+            signIn.style.display = 'flex'
+
+            let userInfoWinTimerCount = 0;
+            const userInfoWinTimer = setInterval(() => {
+                if (location.host == "127.0.0.1:5501") return;
+                if (todaysignedState) {
+                    clearInterval(userInfoWinTimer);
+
+                    if (todaysigned == 1) {
+                        signIn.classList.add('sign-in-already')
+                        signIn.classList.remove("sign-in-no");
+                    }
+                }
+                userInfoWinTimerCount++;
+                if (userInfoWinTimerCount >= 3000) clearInterval(userInfoWinTimer);
+            }, 50);
+        }
+
+        function headSignIn() {
+            SignInComponent.initComponent();
+        }
+
+        const searchInput = document.querySelector('.head-top .input')
+
+        // 绑定 blur 和 focus 事件
+        if (searchInput) {
+            searchInput.addEventListener('blur', function () {
+                setTimeout(() => {
+                    const historyBox = document.querySelector('.head-top .search-box-history')
+                    if (historyBox) historyBox.style.display = 'none'
+                }, 300);
+
+                const inputBox = document.querySelector('.head-top .input-box')
+                if (inputBox) inputBox.classList.remove('pitch')
+                startCarousel();
+
+            })
+            searchInput.addEventListener('focus', () => {
+                const historyBox = document.querySelector('.head-top .search-box-history')
+                const historyItem = historyBox.querySelectorAll(".search-box-history-item")
+                if (historyBox && historyItem.length > 0) historyBox.style.display = 'block'
+
+                const inputBox = document.querySelector('.head-top .input-box')
+                if (inputBox) inputBox.classList.add('pitch')
+
+                if (carouselTimer) clearInterval(carouselTimer);
+            })
+            // 绑定回车事件
+            searchInput.addEventListener('keydown', (e) => {
+                if (e.key == 'Enter') searchEvent()
+            })
+
+            searchInput.addEventListener('input', (e) => {
+                const value = e.target.value || ''
+                const placeholder = document.querySelector(".head-top .placeholder")
+                if (value) placeholder.style.display = 'none'
+                else placeholder.style.display = 'block'
+            })
+        }
+
+
+        let historySearchList = []
+        // 获取历史搜索
+        const getHistorySearch = () => {
+            const data = JSON.parse(localStorage.getItem("history-search")) || [];
+            historySearchList = data;
+
+            let itemAll = ``
+            data.forEach((item, index) => itemAll += `<div class="search-box-history-item one-line-display" onclick="searchEvent('${item}')">${item}</div>`) // 绑定事件 searchEvent 点击搜索)
+
+            const historyList = document.querySelector('.search-box-history-list')
+            historyList.innerHTML = itemAll
+        };
+
+        if (location.href.indexOf("/publish") == -1 && location.href.indexOf("/search") == -1) getHistorySearch();
+
+
+        const searchEvent = (value) => {
+            if (window.innerWidth <= 480) {
+                redirectToExternalWebsite("/search");
+                return
+            }
+            const kw = value || searchInput.value || hotSearchWords[currentIndex]?.keyword || "";;
+            if (!kw) return;
+            historySearchList.unshift(kw);
+            historySearchList = [...new Set(historySearchList)];
+            if (historySearchList.length > 10) historySearchList = historySearchList.splice(0, 10);
+            localStorage.setItem("history-search", JSON.stringify(historySearchList));
+            redirectToExternalWebsite("/search/" + kw);
+
+            searchInput.value = ""
+        }
+
+        let hotSearchWords = [];
+
+        const renderingPlaceholder = () => {
+            let itemAll = ``
+            hotSearchWords.forEach(item => {
+                itemAll += `<div class="item one-line-display" >大家都在搜：${item.keyword}</div>`
+            })
+
+            const sliceHotSearchWords = hotSearchWords.slice(0, 2)
+            sliceHotSearchWords.forEach(item => {
+                itemAll += `<div class="item one-line-display" >大家都在搜：${item.keyword}</div>`
+            })
+
+            const placeholderBox = document.querySelector('.placeholder .placeholder-box')
+            placeholderBox.innerHTML = itemAll
+
+        }
+
+        const getWConfigg = () => {
+            ajaxGet("/v2/api/config/website").then((res) => {
+                if (res.code == 200) {
+                    let data = res["data"] || {};
+                    hotSearchWords = data.hotSearchWords || [];
+                    renderingPlaceholder()
+                    data.time = new Date().toISOString();
+                    localStorage.setItem("wConfig", JSON.stringify(data));
+                }
+            });
+        };
+
+        const checkWConfig = () => {
+            const wConfig = JSON.parse(localStorage.getItem("wConfig")) || {};
+            if (wConfig.time) {
+                const time = new Date(wConfig.time);
+                const now = new Date();
+                if (now - time > 24 * 60 * 60 * 1000) getWConfigg();
+                else {
+                    hotSearchWords = wConfig.hotSearchWords || [];
+                    renderingPlaceholder()
+                }
+            } else getWConfigg();
+        };
+
+        checkWConfig()
+
+
+
+        const renderCurrentIndex = () => {
+            const placeholderBox = document.querySelector('.placeholder .placeholder-box')
+            if (placeholderBox) placeholderBox.style.transform = `translateY(${-currentIndex * 36}px)`
+        }
+
+        let currentIndex = 0; // 当前显示的关键词索引
+        let carouselTimer = null; // 轮播定时器
+
+        // 启动轮播函数
+        const startCarousel = () => {
+            // 清除已有的定时器
+            if (carouselTimer) clearInterval(carouselTimer);
+            // 设置新的定时器，每秒滚动一次
+            carouselTimer = setInterval(() => {
+                if (hotSearchWords.length > 1) {
+                    if (currentIndex >= hotSearchWords.length - 1) {
+                        currentIndex++;
+                        setTimeout(() => {
+                            currentIndex = 0;
+                        }, 2300);
+                    } else currentIndex++;
+                }
+                renderCurrentIndex()
+            }, 2300);
+        };
+
+        startCarousel();
+
+        const openHeadPop = () => {
+            if (window["userInfoWin"]?.uin > 0 || window["userInfoWin"]?.uid > 0) {
+                // 登录
+                const headMoreLeft = document.querySelector(".head-pop .head-more-left")
+                headMoreLeft.innerHTML = `<img class="head-more-userinfo-avatar" src="${window["userInfoWin"]?.avatar}" alt=""><div class="head-more-userinfo-username">${window["userInfoWin"]?.nickname}</div>`
+            } else {
+                const avatar = document.querySelector(".head-pop .head-more-userinfo-avatar")
+                avatar.src = "/img/defaultAvatar.png"
+                const headMoreRight = document.querySelector(".head-pop .head-more-right")
+                headMoreRight.style.display = "block"
+            }
+            document.querySelector(".head-pop").classList.add("head-pop-show");
+        }
+
+        const skipLoginUrl = (e) => {
+            if (window["userInfoWin"]?.uin > 0 || window["userInfoWin"]?.uid > 0) { }
+            else {
+                e.preventDefault();
+                go_ajax_Login();
+            }
+        }
+
+        const crossHeadPop = () => document.querySelector(".head-pop").classList.remove("head-pop-show");
+
+    </script>
+</body>
+
+</html>

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"));
+(async function () {
-const { itemOffer } = await import(withVer("../component/item-offer/item-offer.js"));
+    const { itemForum } = await import(withVer("../component/item-forum/item-forum.js"));
-const { itemSummary } = await import(withVer("../component/item-summary/item-summary.js"));
+    const { itemOffer } = await import(withVer("../component/item-offer/item-offer.js"));
-const { itemVote } = await import(withVer("../component/item-vote/item-vote.js"));
+    const { itemSummary } = await import(withVer("../component/item-summary/item-summary.js"));
-const { itemMj } = await import(withVer("../component/item-mj/item-mj.js"));
+    const { itemVote } = await import(withVer("../component/item-vote/item-vote.js"));
-const { itemTenement } = await import(withVer("../component/item-tenement/item-tenement.js"));
+    const { itemMj } = await import(withVer("../component/item-mj/item-mj.js"));
-const { headTop } = await import(withVer("../component/head-top/head-top.js"));
+    const { itemTenement } = await import(withVer("../component/item-tenement/item-tenement.js"));
-const { loadBox } = await import(withVer("../component/load-box/load-box.js"));
+    const { headTop } = await import(withVer("../component/head-top/head-top.js"));
-const { itemProject } = await import(withVer("../component/item-project/item-project.js"));
+    const { loadBox } = await import(withVer("../component/load-box/load-box.js"));
-const { latestList } = await import(withVer("../component/latest-list/latest-list.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({
+    let huddleBox, helperPop, groupPop, QRCodePop;
-    setup() {
+    if (window.isMobile) {
-        onMounted(() => {
+        ({ huddleBox } = await import(withVer("../component/huddle-box/huddle-box.js")));
-            getUserInfoWin();
+        ({ helperPop } = await import(withVer("../component/helper-pop/helper-pop.js")));
-            // const preLoader = document.getElementById("pre-loader");
+        ({ groupPop } = await import(withVer("../component/group-pop/group-pop.js")));
-            // if (preLoader) preLoader.style.display = "none";
+        ({ QRCodePop } = await import(withVer("../component/QR-code-pop/QR-code-pop.js")));
-        });
+    }
 
-        let isLogin = ref(false);
+    const appIndex = createApp({
-        let realname = ref(0); // 是否已经实名
+        setup() {
-        let userInfoWin = ref({});
+            onMounted(() => {
+                getUserInfoWin();
+                // const preLoader = document.getElementById("pre-loader");
+                // if (preLoader) preLoader.style.display = "none";
+            });
 
-        const getUserInfoWin = () => {
+            let isLogin = ref(false);
-            const checkUser = () => {
+            let realname = ref(0); // 是否已经实名
-                const user = window.userInfoWin;
+            let userInfoWin = ref({});
-                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 getUserInfoWin = () => {
-            const handleAttestClose = () => {
+                const checkUser = () => {
-                document.removeEventListener("closeAttest", handleAttestClose);
+                    const user = window.userInfoWin;
-                realname.value = window.userInfoWin?.realname || 0;
+                    if (!user) return;
-            };
+                    document.removeEventListener("getUser", checkUser);
-            // 启动认证流程时添加监听
+                    realname.value = user.realname;
-            document.addEventListener("closeAttest", handleAttestClose);
+                    userInfoWin.value = user;
-            loadAttest(2);
+                    if (user?.uin > 0 || user?.uid > 0) isLogin.value = true;
-        };
-
-        // 跳转登录
-        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; // 随机返回一个
                 };
+                document.addEventListener("getUser", checkUser);
+            };
 
-                ongoingbj.value = getTargetItem(ongoing || []) || {};
+            const openAttest = () => {
-                const past = data.past || [];
+                const handleAttestClose = () => {
-                pastList.value = past.sort(() => Math.random() - 0.5).slice(0, 5);
+                    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([]); // 精选列表
+            let ongoingbj = 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([]); // 面经列表
+            const getTalkingRecommend = () => {
-        let vote = ref([]); // 面经列表
+                ajaxGet("/v2/api/forum/talkingRecommend").then((res) => {
-        let interviewexperience = ref([]); // 面经列表
+                    if (res.code != 200) return;
-        const getTopicLatest = () => {
+                    let data = res["data"] || [];
-            ajaxGet(`/v2/api/forum/getTopicLatest?limit=4`).then((res) => {
+                    const ongoing = data.ongoing || [];
-                const data = res.data || [];
 
-                data.vote.forEach((item) => {
+                    ongoing.forEach((item) => {
-                    if (!item.title) {
+                        if (Array.isArray(item.commentUser)) item.commentUser = item.commentUser.slice(0, 4);
-                        item.title = item.content;
+                    });
-                        item.content = "";
+
+                    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;
+            let offerTimer = null;
-                vote.value = data.vote;
-                interviewexperience.value = data.interviewexperience;
 
-                nextTick(() => {});
+            let scrollup = null;
-            });
+            // offer list 滚动
-        };
+            const autoOfferListScroll = () => {
+                console.log("autoOfferListScroll");
 
-        const sidebarFixed = ref(false);
+                if (typeof ScrollText !== "function") {
-
+                    setTimeout(() => autoOfferListScroll(), 500);
-        const handleScroll = () => {
+                    return;
-            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());
                 }
-            });
+                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 offerMouseover = (event) => {
-        const autoOfferListScroll = () => {
+                if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) clearInterval(offerTimer);
-            console.log("autoOfferListScroll");
+            };
 
-            if (typeof ScrollText !== "function") {
+            // 鼠标移出
-                setTimeout(() => autoOfferListScroll(), 500);
+            const offerMouseout = (event) => {
-                return;
+                if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) autoOfferListScroll();
-            }
+            };
-            console.log("scrollup");
 
-            if (scrollup) return;
+            let sectionList = ref([]);
-            scrollup = new ScrollText("offer-box");
+            const getSectionList = () => {
-            scrollup.LineHeight = 56;
+                ajaxGet("/v2/api/forum/getSectionList").then((res) => {
-            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) => {
                     if (res.code != 200) return;
-                    let data = res.data;
+                    const data = res.data || [];
-                    list.value = list.value.concat(data.data);
+                    let obj = {};
-                    page.value = data.count > data.limit * data.page ? page.value + 1 : 0;
+                    data.forEach((element) => (obj[element.cid] = element));
-
+                    sectionList.value = groupByCid(data);
-                    loading.value = false;
-                })
-                .catch((err) => {
-                    err = err.data;
-                    if (err.code == 401) goLogin();
-                    loading.value = false;
                 });
-        };
+            };
 
-        const sidebarRef = ref(null);
+            const groupByCid = (arr) => {
-        const matterRef = ref(null);
+                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) => {
+            let loading = ref(false);
-            if (!isLogin.value) {
+            let page = ref(1);
-                goLogin();
+            let list = ref([]);
-                e.preventDefault(); // 阻止默认跳转（即使 href 为链接，也强制拦截）
+            const getList = () => {
-                return;
+                if (loading.value || page.value == 0) return;
-            }
+                loading.value = true;
-            if (realname.value === 0 && userInfoWin.value?.uin > 0) {
+                ajaxGet(`/v2/api/forum/topicLists?page=${page.value || 1}`)
-                openAttest();
+                    .then((res) => {
-                e.preventDefault(); // 阻止默认跳转（即使 href 为链接，也强制拦截）
+                        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(() => {
+                        loading.value = false;
-            SignInComponent.initComponent()
+                    })
-        })
+                    .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);
+            let sidebarHeight = ref(0);
-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);
 
-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");
+})();

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',