diff --git a/component/hot-search/hot-search.js b/component/hot-search/hot-search.js
new file mode 100644
index 0000000..7300765
--- /dev/null
+++ b/component/hot-search/hot-search.js
@@ -0,0 +1,29 @@
+// my-component.js
+// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
+const { defineComponent, ref, onMounted } = Vue;
+// 定义组件（直接使用模板）
+export const hotSearch = defineComponent({
+    name: "hot-search",
+    props: {},
+
+    setup(props) {
+        onMounted(() => {
+            init();
+        });
+
+        const init = () => {
+            ajaxget("/v2/api/forum/getHotSearchWords?limit=20").then((res) => {
+                const data = res.data;
+                list.value = data || [];
+            });
+        };
+
+        const list = ref([]);
+
+        return { list };
+    },
+
+    components: {},
+
+    template: `<div class="hot-tag" v-if="list.length > 0">    <div class="hot-tag-title">        <img class="icon" src="./img/triangle-violet.svg" />        热门搜索    </div>    <div class="list flexflex">        <a class="item" v-for="item in list" :href="'/search.html?kw=' + item.keyword" target="_blank">{{ item.keyword }}</a>    </div></div>`,
+});
diff --git a/component/hot-search/hot-search.txt b/component/hot-search/hot-search.txt
new file mode 100644
index 0000000..047ea0c
--- /dev/null
+++ b/component/hot-search/hot-search.txt
@@ -0,0 +1,9 @@
+<div class="hot-tag" v-if="list.length > 0">
+    <div class="hot-tag-title">
+        <img class="icon" src="./img/triangle-violet.svg" />
+        热门搜索
+    </div>
+    <div class="list flexflex">
+        <a class="item" v-for="item in list" :href="'/search.html?kw=' + item.keyword" target="_blank">{{ item.keyword }}</a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/component/hot-tag/hot-tag.js b/component/hot-tag/hot-tag.js
index 2a9d26d..17b48d7 100644
--- a/component/hot-tag/hot-tag.js
+++ b/component/hot-tag/hot-tag.js
@@ -1,21 +1,29 @@
 // my-component.js
 // 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
-const { defineComponent, ref } = Vue;
+const { defineComponent, ref, onMounted } = Vue;
 // 定义组件（直接使用模板）
 export const hotTag = defineComponent({
     name: "hot-tag",
-    props: {
-        itemdata: {
-            type: Object,
-            default: () => {},
-        },
-    },
+    props: {},
 
     setup(props) {
-        return {};
+        onMounted(() => {
+            init();
+        });
+
+        const init = () => {
+            ajaxget("/v2/api/forum/getHotTags?limit=20").then((res) => {
+                const data = res.data;
+                list.value = data || [];
+            });
+        };
+
+        const list = ref([]);
+
+        return { list };
     },
 
     components: {},
 
-    template: `<div class="hot-tag">    <div class="hot-tag-title">        <img class="icon" src="./img/triangle-orange.svg" />        热门标签    </div>    <div class="list flexflex">        <div class="item">热门标签</div>    </div></div>`,
+    template: `<div class="hot-tag" v-if="list.length > 0">    <div class="hot-tag-title">        <img class="icon" src="./img/triangle-orange.svg" />        热门标签    </div>    <div class="list flexflex">        <a class="item" v-for="item in list" :href="'/search-tag.html?tag=' + item.tagname" target="_blank">{{ item.tagname }}</a>    </div></div>`,
 });
diff --git a/component/hot-tag/hot-tag.txt b/component/hot-tag/hot-tag.txt
index 4b1e9ba..7bd75eb 100644
--- a/component/hot-tag/hot-tag.txt
+++ b/component/hot-tag/hot-tag.txt
@@ -1,10 +1,9 @@
-<div class="hot-tag">
+<div class="hot-tag" v-if="list.length > 0">
     <div class="hot-tag-title">
         <img class="icon" src="./img/triangle-orange.svg" />
         热门标签
     </div>
     <div class="list flexflex">
-        <div class="item">热门标签</div>
+        <a class="item" v-for="item in list" :href="'/search-tag.html?tag=' + item.tagname" target="_blank">{{ item.tagname }}</a>
     </div>
-
 </div>
\ No newline at end of file
diff --git a/component/item-offer/item-offer.js b/component/item-offer/item-offer.js
index 6211ec1..33076d7 100644
--- a/component/item-offer/item-offer.js
+++ b/component/item-offer/item-offer.js
@@ -58,7 +58,7 @@ export const itemOffer = defineComponent({
         const goLogin = () => {
             if (typeof window === "undefined") return;
             if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
-                if (window["userInfoWin"]["uid"]) isNeedLogin.value = false;
+                if (window["userInfoWin"]["uid"]) isLogin.value = true;
                 else ajax_login();
             } else ajax_login();
         };
diff --git a/component/slideshow-box/slideshow-box.js b/component/slideshow-box/slideshow-box.js
index 8bfd9f0..50e74cd 100644
--- a/component/slideshow-box/slideshow-box.js
+++ b/component/slideshow-box/slideshow-box.js
@@ -21,7 +21,7 @@ export const slideshowBox = defineComponent({
 
         let latestList = ref({});
         const getTopicLatest = () => {
-            ajaxget(`/v2/api/forum/getTopicLatest`).then((res) => {
+            ajaxget(`/v2/api/forum/getTopicLatest?limit=4`).then((res) => {
                 const data = res.data || [];
 
                 data.vote.forEach((item) => {
@@ -78,5 +78,5 @@ export const slideshowBox = defineComponent({
         return { tabItem, tabPitch, tabPitch, latestList };
     },
 
-    template: `<div class="box-box" :class="['box-' + tabPitch]">    <div class="slideshow-box">        <div class="tab-list flexacenter">            <div class="tab-item thread" :class="{'pitch': tabPitch == 'thread'}" @click="tabItem('thread')">帖子</div>            <div class="tab-item offer" :class="{'pitch': tabPitch == 'offer'}" @click="tabItem('offer')">Offer</div>            <div class="tab-item vote" :class="{'pitch': tabPitch == 'vote'}" @click="tabItem('vote')">投票</div>            <div class="tab-item interviewexperience" :class="{'pitch': tabPitch == 'interviewexperience'}" @click="tabItem('interviewexperience')">面经</div>        </div>    </div>    <div class="slideshow-content flexflex">        <!-- 问答 -->        <div class="thread-side-box side-box">            <div class="box">                <a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" href="https://ask.gter.net/index.html?uniqid=fyT5SDvfizTf">                    <div class="question flexacenter">                        <div class="text flex1 ellipsis">{{ item.title }}</div>                    </div>                    <div class="answer flexacenter">                        <div class="text flex1">                            <div class="texttext">{{ item.content }}</div>                        </div>                    </div>                </a>                <a class="add-btn flexcenter" href="https://ask.gter.net" target="_blank">                    <div>more</div>                    <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">                </a>            </div>        </div>        <!-- offer -->        <div class="offer-side-box side-box">            <div class="box">                <a v-for="item in latestList.offer" :key="item.thread_id" class="item flexflex" href="https://offer.gter.net/details/44qD8Ce4uDaO" target="_blank">                    <img class="school-img" :src="item.data.schoollogo" />                    <div class="school-detail flex1 flexflex">                        <div 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" href="https://offer.gter.net" target="_blank">                    <div>more</div>                    <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">                </a>            </div>        </div>        <!-- 投票 -->        <div class="vote-side-box side-box">            <div class="box">                <a v-for="item in latestList.vote" :key="item.thread_id" class="item flexflex vuehide" target="_blank" href="https://vote.gter.net/details/{{ item.thread_id }}">                    <div class="name one-line-display">{{ item.title }}</div>                    <div class="brief">{{ item.content }}</div>                </a>                <a class="add-btn flexcenter" href="https://vote.gter.net" target="_blank">                    <div>more</div>                    <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">                </a>            </div>        </div>        <!-- mj -->        <div class="interviewexperience-side-box side-box">            <div class="box">                <a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" href="https://interviewexperience.gter.net/details/{{ item.thread_id }}" target="_blank">                    <div class="school one-line-display">{{ item.data.schoolname }}</div>                    <div class="major one-line-display"></div>                    <div class="info">                        <img class="icon" :src="item.user.avatar" />                        <span class="text">{{ item.title || item.content }} </span>                    </div>                </a>                <a class="add-btn flexcenter" href="https://interviewexperience.gter.net" target="_blank">                    <div>more</div>                    <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">                </a>            </div>        </div>    </div></div>`,
+    template: `<div class="box-box" :class="['box-' + tabPitch]">    <div class="slideshow-box">        <div class="tab-list flexacenter">            <div class="tab-item thread" :class="{'pitch': tabPitch == 'thread'}" @click="tabItem('thread')">帖子</div>            <div class="tab-item offer" :class="{'pitch': tabPitch == 'offer'}" @click="tabItem('offer')">Offer</div>            <div class="tab-item vote" :class="{'pitch': tabPitch == 'vote'}" @click="tabItem('vote')">投票</div>            <div class="tab-item interviewexperience" :class="{'pitch': tabPitch == 'interviewexperience'}" @click="tabItem('interviewexperience')">面经</div>        </div>    </div>    <div class="slideshow-content flexflex">        <!-- 问答 -->        <div class="thread-side-box side-box">            <div class="box">                <a v-for="item in latestList.thread" :key="item.uniqid" class="item" target="_blank" href="https://ask.gter.net/index.html?uniqid=fyT5SDvfizTf">                    <div class="question flexacenter">                        <div class="text flex1 ellipsis">{{ item.title }}</div>                    </div>                    <div class="answer flexacenter">                        <div class="text flex1">                            <div class="texttext">{{ item.content }}</div>                        </div>                    </div>                </a>                <a class="add-btn flexcenter" href="https://ask.gter.net" target="_blank">                    <div>more</div>                    <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg">                </a>            </div>        </div>        <!-- offer -->        <div class="offer-side-box side-box">            <div class="box">                <a v-for="item in latestList.offer" :key="item.thread_id" class="item flexflex" href="https://offer.gter.net/details/44qD8Ce4uDaO" target="_blank">                    <img class="school-img" :src="item.data.schoollogo" />                    <div class="school-detail flex1 flexflex">                        <div 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" href="https://offer.gter.net" target="_blank">                    <div>more</div>                    <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg">                </a>            </div>        </div>        <!-- 投票 -->        <div class="vote-side-box side-box">            <div class="box">                <a v-for="item in latestList.vote" :key="item.thread_id" class="item flexflex vuehide" target="_blank" href="https://vote.gter.net/details/{{ item.thread_id }}">                    <div class="name one-line-display">{{ item.title }}</div>                    <div class="brief">{{ item.content }}</div>                </a>                <a class="add-btn flexcenter" href="https://vote.gter.net" target="_blank">                    <div>more</div>                    <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg">                </a>            </div>        </div>        <!-- mj -->        <div class="interviewexperience-side-box side-box">            <div class="box">                <a v-for="item in latestList.interviewexperience" :key="item.thread_id" class="item flexflex" href="https://interviewexperience.gter.net/details/{{ item.thread_id }}" target="_blank">                    <div class="school one-line-display">{{ item.data.schoolname }}</div>                    <div class="major one-line-display"></div>                    <div class="info">                        <img class="icon" :src="item.user.avatar" />                        <span class="text">{{ item.title || item.content }} </span>                    </div>                </a>                <a class="add-btn flexcenter" href="https://interviewexperience.gter.net" target="_blank">                    <div>more</div>                    <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg">                </a>            </div>        </div>    </div></div>`,
 });
diff --git a/component/slideshow-box/slideshow-box.txt b/component/slideshow-box/slideshow-box.txt
index 8fb3785..da2f158 100644
--- a/component/slideshow-box/slideshow-box.txt
+++ b/component/slideshow-box/slideshow-box.txt
@@ -24,7 +24,7 @@
 
                 <a class="add-btn flexcenter" href="https://ask.gter.net" target="_blank">
                     <div>more</div>
-                    <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">
+                    <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg">
                 </a>
             </div>
         </div>
@@ -48,7 +48,7 @@
 
                 <a class="add-btn flexcenter" href="https://offer.gter.net" target="_blank">
                     <div>more</div>
-                    <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">
+                    <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg">
                 </a>
             </div>
         </div>
@@ -63,7 +63,7 @@
 
                 <a class="add-btn flexcenter" href="https://vote.gter.net" target="_blank">
                     <div>more</div>
-                    <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">
+                    <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg">
                 </a>
             </div>
         </div>
@@ -82,7 +82,7 @@
 
                 <a class="add-btn flexcenter" href="https://interviewexperience.gter.net" target="_blank">
                     <div>more</div>
-                    <img class="" style="margin-left: 8px;" src="//framework.x-php.com/gter/image/gter//forum/assets/forum/right-arrow-black.svg">
+                    <img class="" style="margin-left: 8px;" src="./img/right-arrow-black.svg">
                 </a>
             </div>
         </div>
diff --git a/css/index.css b/css/index.css
index 1131aa0..07e0652 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,22 +1,45 @@
-.topic-and-selectives .head-top {
+#appIndex {
+  width: 1200px;
+  margin: 0 auto;
+}
+#appIndex a {
+  text-decoration: none;
+}
+#appIndex .header-content-box {
+  justify-content: space-between;
+  margin-bottom: 28px;
+}
+#appIndex .header-content-box .header-content-left .adv-list {
+  margin-bottom: 18px;
+}
+#appIndex .header-content-box .header-content-left .adv-list .adv-item:not(:last-child) {
+  margin-right: 12px;
+}
+#appIndex .header-content-box .header-content-left .adv-list .adv-item .adv-img {
+  width: 468px;
+  height: 60px;
+  border-radius: 10px;
+  display: block;
+}
+#appIndex .header-content-box .header-content-left .topic-and-selectives .head-top {
   width: 64px;
   height: 24px;
   border-radius: 20px 20px 20px 0;
   margin-bottom: 10px;
 }
-.topic-and-selectives .head-top .icon {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .head-top .icon {
   width: 15px;
   height: 12px;
   margin-right: 3px;
 }
-.topic-and-selectives .head-top .text {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .head-top .text {
   font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
   font-weight: 400;
   font-style: normal;
   color: #ffffff;
   font-size: 14px;
 }
-.topic-and-selectives .topic-box {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box {
   width: 308px;
   height: 320px;
   background-color: #ffffff;
@@ -25,10 +48,10 @@
   padding: 10px;
   margin-right: 12px;
 }
-.topic-and-selectives .topic-box .head-top {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .head-top {
   background-color: #f4ae38;
 }
-.topic-and-selectives .topic-box .topic-head {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head {
   height: 109px;
   background-color: #f6f6f6;
   border-radius: 8px;
@@ -37,23 +60,23 @@
   padding: 12px 16px;
   margin-bottom: 12px;
 }
-.topic-and-selectives .topic-box .topic-head .title {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .title {
   font-size: 16px;
   color: #000000;
   line-height: 23px;
 }
-.topic-and-selectives .topic-box .topic-head .hint {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .hint {
   font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 16px;
   color: #7f7f7f;
 }
-.topic-and-selectives .topic-box .topic-head .people {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people {
   position: relative;
   justify-content: space-between;
 }
-.topic-and-selectives .topic-box .topic-head .people::after {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people::after {
   content: "";
   position: absolute;
   top: 0;
@@ -64,50 +87,53 @@
   background-color: #f4ae38;
   border-radius: 150px;
 }
-.topic-and-selectives .topic-box .topic-head .people .left {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .left {
   color: #aaaaaa;
   font-size: 13px;
 }
-.topic-and-selectives .topic-box .topic-head .people .left .number {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .left .number {
   color: #333333;
   margin-right: 3px;
 }
-.topic-and-selectives .topic-box .topic-head .people .right .item {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item {
   width: 26px;
   height: 26px;
   border-radius: 50%;
 }
-.topic-and-selectives .topic-box .topic-head .people .right .item .img {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item .img {
   width: 26px;
   height: 26px;
   border-radius: 50%;
 }
-.topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(6) {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(6) {
   margin-right: -9px;
 }
-.topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(5) {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(5) {
   margin-right: -9px;
 }
-.topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(4) {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(4) {
   margin-right: -7px;
 }
-.topic-and-selectives .topic-box .topic-list .item:hover {
-  color: #000000;
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item {
+  cursor: pointer;
 }
-.topic-and-selectives .topic-box .topic-list .item:not(:last-child) {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item:not(:last-child) {
   margin-bottom: 1px;
 }
-.topic-and-selectives .topic-box .topic-list .item .img {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item .img {
   width: 12px;
   height: 10px;
   margin-right: 9px;
 }
-.topic-and-selectives .topic-box .topic-list .item .text {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item .text {
   font-size: 14px;
   color: #555555;
   line-height: 28px;
 }
-.topic-and-selectives .selectives-box {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item .text:hover {
+  color: #000000;
+}
+#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box {
   width: 628px;
   height: 320px;
   background-color: #ffffff;
@@ -115,33 +141,252 @@
   border-radius: 10px;
   padding: 10px;
 }
-.topic-and-selectives .selectives-box .head-top {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .head-top {
   background-color: #f68251;
   margin-bottom: 22px;
 }
-.topic-and-selectives .selectives-box .list {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list {
   flex-wrap: wrap;
   padding: 0 5px;
   justify-content: space-between;
 }
-.topic-and-selectives .selectives-box .list .item {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item {
   font-size: 14px;
   color: #555555;
   line-height: 20px;
   margin-bottom: 12px;
   position: relative;
+  cursor: pointer;
 }
-.topic-and-selectives .selectives-box .list .item .dot {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item:hover {
+  color: #000000;
+}
+#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item .dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background-color: #f68251;
   margin-right: 10px;
 }
-.topic-and-selectives .selectives-box .list .item .text {
+#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item .text {
   width: 265px;
 }
-.forum-sections-list {
+#appIndex .header-content-box .header-content-left .header-left-bottom-box {
+  width: 948px;
+  height: 140px;
+  background-color: #ffffff;
+  border: 1px solid #e9eef2;
+  border-radius: 10px;
+  padding-left: 12px;
+  margin-top: 12px;
+}
+#appIndex .header-content-box .header-content-left .header-left-bottom-box .adv {
+  margin-right: 26px;
+}
+#appIndex .header-content-box .header-content-left .header-left-bottom-box .adv .adv-icon {
+  width: 295px;
+  height: 118px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+#appIndex .header-content-box .header-content-left .header-left-bottom-box .list {
+  font-size: 14px;
+  color: #555555;
+  padding-top: 12px;
+  width: 281px;
+  margin-right: 39px;
+}
+#appIndex .header-content-box .header-content-left .header-left-bottom-box .list.list2 {
+  margin-right: 0;
+}
+#appIndex .header-content-box .header-content-left .header-left-bottom-box .list.list2 .item .text {
+  width: 255px;
+}
+#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item {
+  height: 20px;
+}
+#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item:not(:last-of-type) {
+  margin-bottom: 12px;
+}
+#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .icon {
+  width: 6px;
+  height: 6px;
+  margin-right: 10px;
+  background: #30b0d5;
+  border-radius: 50%;
+}
+#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text {
+  cursor: pointer;
+  width: 266px;
+  text-decoration: none;
+  color: #555;
+}
+#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text:hover {
+  color: #000000;
+}
+#appIndex .header-content-box .header-content-right {
+  width: 240px;
+}
+#appIndex .header-content-box .header-content-right .post-entrance {
+  background-color: #fff;
+  border: 1px solid #e9eef2;
+  border-radius: 10px;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+#appIndex .header-content-box .header-content-right .post-entrance .entrance-top {
+  height: 46px;
+  background-color: #d5f3f7;
+  border-radius: 8px;
+  font-size: 14px;
+  text-align: center;
+  color: #333;
+  cursor: pointer;
+  padding-left: 52px;
+  margin-bottom: 8px;
+}
+#appIndex .header-content-box .header-content-right .post-entrance .entrance-top:hover {
+  background-color: #c2eff6;
+}
+#appIndex .header-content-box .header-content-right .post-entrance .entrance-top .icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 13px;
+}
+#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom {
+  height: 90px;
+  flex-wrap: wrap;
+  background-color: #f6f6f6;
+  border-radius: 8px;
+  overflow: hidden;
+}
+#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item {
+  width: 50%;
+  height: 50%;
+  cursor: pointer;
+  font-size: 14px;
+  color: #333;
+  text-decoration: none;
+}
+#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item:nth-child(odd) {
+  border-right: 1px solid #ebebeb;
+}
+#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item:not(:nth-last-child(-n + 2)) {
+  border-bottom: 1px solid #ebebeb;
+}
+#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item:hover {
+  background-color: #e7e7e7;
+}
+#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item .icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 6px;
+}
+#appIndex .header-content-box .header-content-right .adv-broadside {
+  width: 240px;
+  height: 140px;
+  margin-bottom: 10px;
+  display: block;
+}
+#appIndex .header-content-box .header-content-right .adv-broadside .adv-broadside-img {
+  width: 240px;
+  height: 140px;
+  border-radius: 10px;
+  display: block;
+}
+#appIndex .header-content-box .header-content-right .group-box {
+  width: 240px;
+  height: 150px;
+  background-color: #ffffff;
+  border: 1px solid #e9eef2;
+  border-radius: 10px;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+#appIndex .header-content-box .header-content-right .group-box .group {
+  background-color: #f6f6f6;
+  flex-wrap: wrap;
+  height: 100%;
+  border-radius: 8px;
+}
+#appIndex .header-content-box .header-content-right .group-box .group .group-item {
+  width: 50%;
+  height: 50%;
+  cursor: pointer;
+  color: #333;
+  text-decoration: none;
+  flex-direction: column;
+  overflow: hidden;
+  font-size: 14px;
+  text-align: center;
+  line-height: 22px;
+}
+#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(odd) {
+  border-right: 1px solid #ebebeb;
+}
+#appIndex .header-content-box .header-content-right .group-box .group .group-item:not(:nth-last-child(-n + 2)) {
+  border-bottom: 1px solid #ebebeb;
+}
+#appIndex .header-content-box .header-content-right .group-box .group .group-item:hover {
+  background-color: #e7e7e7;
+}
+#appIndex .header-content-box .header-content-right .group-box .group .group-item .icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 6px;
+}
+#appIndex .header-content-box .header-content-right .group-box .group .group-item .title {
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  color: #000000;
+}
+#appIndex .header-content-box .header-content-right .group-box .group .group-item .subtitle {
+  color: #555555;
+}
+#appIndex .header-content-box .header-content-right .offer-box {
+  width: 240px;
+  height: 214px;
+  background-color: #fff;
+  border: 1px solid #e9eef2;
+  border-radius: 10px;
+  padding: 17px 10px;
+  overflow: hidden;
+}
+#appIndex .header-content-box .header-content-right .offer-box.small {
+  height: 64px;
+  padding: 15px 10px;
+}
+#appIndex .header-content-box .header-content-right .offer-box .item {
+  align-items: flex-start;
+  cursor: pointer;
+  margin-bottom: 19px;
+}
+#appIndex .header-content-box .header-content-right .offer-box .item .avatar {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+  border-radius: 50%;
+  background-size: contain;
+}
+#appIndex .header-content-box .header-content-right .offer-box .item .condition {
+  font-size: 12px;
+  color: #aaaaaa;
+  width: 180px;
+}
+#appIndex .header-content-box .header-content-right .offer-box .item .titletitle {
+  font-family: "ArialMT", "Arial", sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  color: #333333;
+  width: 180px;
+}
+#appIndex .header-content-box .header-content-right .offer-box .item:hover .titletitle {
+  color: #000000;
+}
+#appIndex .matter .matter-content {
+  margin-right: 12px;
+}
+#appIndex .matter .matter-content .forum-sections-list {
   position: relative;
   width: 897px;
   height: 240px;
@@ -150,15 +395,16 @@
   border-radius: 10px;
   padding-left: 70px;
   padding-top: 20px;
+  margin-bottom: 20px;
 }
-.forum-sections-list .img {
+#appIndex .matter .matter-content .forum-sections-list .img {
   position: absolute;
   top: -1px;
   left: -1px;
   width: 60px;
   height: 240px;
 }
-.forum-sections-list .title {
+#appIndex .matter .matter-content .forum-sections-list .title {
   font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
   font-weight: 650;
   font-style: normal;
@@ -166,10 +412,10 @@
   color: #000000;
   margin-bottom: 16px;
 }
-.forum-sections-list .list .line:not(:last-child) {
+#appIndex .matter .matter-content .forum-sections-list .list .line:not(:last-child) {
   margin-bottom: 10px;
 }
-.forum-sections-list .list .line .item {
+#appIndex .matter .matter-content .forum-sections-list .list .line .item {
   font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
   font-weight: 400;
   font-style: normal;
@@ -182,6 +428,37 @@
   border-radius: 16px;
   cursor: pointer;
 }
-.forum-sections-list .list .line .item:not(:last-child) {
+#appIndex .matter .matter-content .forum-sections-list .list .line .item:not(:last-child) {
   margin-right: 10px;
 }
+#appIndex .matter .matter-content .item-box {
+  margin-bottom: 12px;
+}
+#appIndex .matter .sidebar .adv {
+  display: block;
+  width: 291px;
+  height: 220px;
+  margin-bottom: 12px;
+  cursor: pointer;
+}
+#appIndex .matter .sidebar .adv .adv-icon {
+  width: 291px;
+  height: 220px;
+  border-radius: 10px;
+}
+#appIndex .matter .sidebar .side-box {
+  width: 100%;
+  padding: 17px 10px 10px;
+  margin-bottom: 12px;
+  width: 291px;
+  border-radius: 10px;
+}
+#appIndex .matter .sidebar .side-box.offer-side-box {
+  background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
+}
+#appIndex .matter .sidebar .side-box.vote-side-box {
+  background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
+}
+#appIndex .matter .sidebar .side-box.interviewexperience-side-box {
+  background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
+}
diff --git a/css/index.less b/css/index.less
index 663ee3c..ebb4f4f 100644
--- a/css/index.less
+++ b/css/index.less
@@ -1,228 +1,560 @@
-.topic-and-selectives {
-    .head-top {
-        width: 64px;
-        height: 24px;
-        border-radius: 20px 20px 20px 0;
-        margin-bottom: 10px;
-        .icon {
-            width: 15px;
-            height: 12px;
-            margin-right: 3px;
-        }
+#appIndex {
+    width: 1200px;
+    margin: 0 auto;
 
-        .text {
-            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
-            font-weight: 400;
-            font-style: normal;
-            color: #ffffff;
-            font-size: 14px;
-        }
+    a {
+        text-decoration: none;
     }
 
-    .topic-box {
-        width: 308px;
-        height: 320px;
-        background-color: rgba(255, 255, 255, 1);
-        border: 1px solid rgba(233, 238, 242, 1);
-        border-radius: 10px;
-        padding: 10px;
-        margin-right: 12px;
+    .header-content-box {
+        justify-content: space-between;
+        margin-bottom: 28px;
 
-        .head-top {
-            background-color: rgba(244, 174, 56, 1);
-        }
+        .header-content-left {
+            .adv-list {
+                margin-bottom: 18px;
 
-        .topic-head {
-            height: 109px;
-            background-color: rgba(246, 246, 246, 1);
-            border-radius: 8px;
-            flex-direction: column;
-            justify-content: space-between;
-            padding: 12px 16px;
-            margin-bottom: 12px;
-
-            .title {
-                font-size: 16px;
-                color: #000000;
-                line-height: 23px;
-            }
-
-            .hint {
-                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
-                font-weight: 400;
-                font-style: normal;
-                font-size: 16px;
-                color: #7f7f7f;
-            }
-
-            .people {
-                position: relative;
-                justify-content: space-between;
-                &::after {
-                    content: "";
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    transform: translateY(-100%);
-                    width: 30px;
-                    height: 4px;
-                    background-color: rgba(244, 174, 56, 1);
-                    border-radius: 150px;
+                .adv-item {
+                    &:not(:last-child) {
+                        margin-right: 12px;
+                    }
+                    .adv-img {
+                        width: 468px;
+                        height: 60px;
+                        border-radius: 10px;
+                        display: block;
+                    }
                 }
+            }
 
-                .left {
-                    color: #aaaaaa;
-                    font-size: 13px;
-
-                    .number {
-                        color: #333333;
-
+            .topic-and-selectives {
+                .head-top {
+                    width: 64px;
+                    height: 24px;
+                    border-radius: 20px 20px 20px 0;
+                    margin-bottom: 10px;
+                    .icon {
+                        width: 15px;
+                        height: 12px;
                         margin-right: 3px;
                     }
+
+                    .text {
+                        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                        font-weight: 400;
+                        font-style: normal;
+                        color: #ffffff;
+                        font-size: 14px;
+                    }
                 }
 
-                .right {
+                .topic-box {
+                    width: 308px;
+                    height: 320px;
+                    background-color: rgba(255, 255, 255, 1);
+                    border: 1px solid rgba(233, 238, 242, 1);
+                    border-radius: 10px;
+                    padding: 10px;
+                    margin-right: 12px;
+
+                    .head-top {
+                        background-color: rgba(244, 174, 56, 1);
+                    }
+
+                    .topic-head {
+                        height: 109px;
+                        background-color: rgba(246, 246, 246, 1);
+                        border-radius: 8px;
+                        flex-direction: column;
+                        justify-content: space-between;
+                        padding: 12px 16px;
+                        margin-bottom: 12px;
+
+                        .title {
+                            font-size: 16px;
+                            color: #000000;
+                            line-height: 23px;
+                        }
+
+                        .hint {
+                            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                            font-weight: 400;
+                            font-style: normal;
+                            font-size: 16px;
+                            color: #7f7f7f;
+                        }
+
+                        .people {
+                            position: relative;
+                            justify-content: space-between;
+                            &::after {
+                                content: "";
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                transform: translateY(-100%);
+                                width: 30px;
+                                height: 4px;
+                                background-color: rgba(244, 174, 56, 1);
+                                border-radius: 150px;
+                            }
+
+                            .left {
+                                color: #aaaaaa;
+                                font-size: 13px;
+
+                                .number {
+                                    color: #333333;
+
+                                    margin-right: 3px;
+                                }
+                            }
+
+                            .right {
+                                .item {
+                                    width: 26px;
+                                    height: 26px;
+                                    border-radius: 50%;
+                                    .img {
+                                        width: 26px;
+                                        height: 26px;
+                                        border-radius: 50%;
+                                    }
+
+                                    &:nth-child(6) {
+                                        margin-right: -9px;
+                                    }
+
+                                    &:nth-child(5) {
+                                        margin-right: -9px;
+                                    }
+
+                                    &:nth-child(4) {
+                                        margin-right: -7px;
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    .topic-list {
+                        .item {
+                            cursor: pointer;
+                            &:not(:last-child) {
+                                margin-bottom: 1px;
+                            }
+
+                            .img {
+                                width: 12px;
+                                height: 10px;
+                                margin-right: 9px;
+                            }
+
+                            .text {
+                                font-size: 14px;
+                                color: #555555;
+                                line-height: 28px;
+
+                                &:hover {
+                                    color: #000000;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .selectives-box {
+                    width: 628px;
+                    height: 320px;
+                    background-color: #ffffff;
+                    border: 1px solid #e9eef2;
+                    border-radius: 10px;
+                    padding: 10px;
+
+                    .head-top {
+                        background-color: rgba(246, 130, 81, 1);
+                        margin-bottom: 22px;
+                    }
+
+                    .list {
+                        flex-wrap: wrap;
+                        padding: 0 5px;
+                        justify-content: space-between;
+
+                        .item {
+                            font-size: 14px;
+                            color: #555555;
+                            line-height: 20px;
+                            margin-bottom: 12px;
+                            position: relative;
+                            cursor: pointer;
+
+                            &:hover {
+                                color: #000000;
+                            }
+
+                            .dot {
+                                width: 6px;
+                                height: 6px;
+                                border-radius: 50%;
+                                background-color: #f68251;
+                                margin-right: 10px;
+                            }
+
+                            .text {
+                                width: 265px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .header-left-bottom-box {
+                width: 948px;
+                height: 140px;
+                background-color: rgba(255, 255, 255, 1);
+                border: 1px solid rgba(233, 238, 242, 1);
+                border-radius: 10px;
+                padding-left: 12px;
+                margin-top: 12px;
+                .adv {
+                    margin-right: 26px;
+                    .adv-icon {
+                        width: 295px;
+                        height: 118px;
+                        border-radius: 5px;
+                        cursor: pointer;
+                    }
+                }
+
+                .list {
+                    font-size: 14px;
+                    color: #555555;
+                    padding-top: 12px;
+                    width: 281px;
+                    margin-right: 39px;
+
+                    &.list2 {
+                        margin-right: 0;
+
+                        .item .text {
+                            width: 255px;
+                        }
+                    }
+
                     .item {
-                        width: 26px;
-                        height: 26px;
-                        border-radius: 50%;
-                        .img {
-                            width: 26px;
-                            height: 26px;
+                        height: 20px;
+
+                        &:not(:last-of-type) {
+                            margin-bottom: 12px;
+                        }
+
+                        .icon {
+                            width: 6px;
+                            height: 6px;
+                            margin-right: 10px;
+                            background: #30b0d5;
                             border-radius: 50%;
                         }
 
-                        &:nth-child(6) {
-                            margin-right: -9px;
-                        }
+                        .text {
+                            cursor: pointer;
+                            width: 266px;
+                            text-decoration: none;
+                            color: #555;
 
-                        &:nth-child(5) {
-                            margin-right: -9px;
-                        }
-
-                        &:nth-child(4) {
-                            margin-right: -7px;
+                            &:hover {
+                                color: #000000;
+                            }
                         }
                     }
                 }
             }
         }
 
-        .topic-list {
-            .item {
-                &:hover {
-                    color: #000000;
-                }
+        .header-content-right {
+            width: 240px;
+            .post-entrance {
+                background-color: #fff;
+                border: 1px solid #e9eef2;
+                border-radius: 10px;
+                padding: 10px;
+                margin-bottom: 10px;
 
-                &:not(:last-child) {
-                    margin-bottom: 1px;
-                }
-
-                .img {
-                    width: 12px;
-                    height: 10px;
-                    margin-right: 9px;
-                }
-
-                .text {
+                .entrance-top {
+                    height: 46px;
+                    background-color: rgba(213, 243, 247, 1);
+                    border-radius: 8px;
                     font-size: 14px;
-                    color: #555555;
-                    line-height: 28px;
+                    text-align: center;
+                    color: #333;
+                    cursor: pointer;
+                    padding-left: 52px;
+                    margin-bottom: 8px;
+
+                    &:hover {
+                        background-color: rgba(194, 239, 246, 1);
+                    }
+
+                    .icon {
+                        width: 20px;
+                        height: 20px;
+                        margin-right: 13px;
+                    }
+                }
+
+                .entrance-bottom {
+                    height: 90px;
+                    flex-wrap: wrap;
+                    background-color: #f6f6f6;
+                    border-radius: 8px;
+                    overflow: hidden;
+
+                    .item {
+                        width: 50%;
+                        height: 50%;
+                        cursor: pointer;
+                        font-size: 14px;
+                        color: #333;
+                        text-decoration: none;
+
+                        &:nth-child(odd) {
+                            border-right: 1px solid #ebebeb;
+                        }
+
+                        &:not(:nth-last-child(-n + 2)) {
+                            border-bottom: 1px solid #ebebeb;
+                        }
+
+                        &:hover {
+                            background-color: #e7e7e7;
+                        }
+
+                        .icon {
+                            width: 16px;
+                            height: 16px;
+                            margin-right: 6px;
+                        }
+                    }
+                }
+            }
+
+            .adv-broadside {
+                width: 240px;
+                height: 140px;
+                margin-bottom: 10px;
+                display: block;
+                .adv-broadside-img {
+                    width: 240px;
+                    height: 140px;
+                    border-radius: 10px;
+                    display: block;
+                }
+            }
+
+            .group-box {
+                width: 240px;
+                height: 150px;
+                background-color: rgba(255, 255, 255, 1);
+                border: 1px solid rgba(233, 238, 242, 1);
+                border-radius: 10px;
+                padding: 10px;
+                margin-bottom: 10px;
+
+                .group {
+                    background-color: rgba(246, 246, 246, 1);
+                    flex-wrap: wrap;
+                    height: 100%;
+                    border-radius: 8px;
+
+                    .group-item {
+                        width: 50%;
+                        height: 50%;
+                        cursor: pointer;
+                        font-size: 14px;
+                        color: #333;
+                        text-decoration: none;
+                        flex-direction: column;
+                        overflow: hidden;
+
+                        &:nth-child(odd) {
+                            border-right: 1px solid #ebebeb;
+                        }
+
+                        &:not(:nth-last-child(-n + 2)) {
+                            border-bottom: 1px solid #ebebeb;
+                        }
+
+                        &:hover {
+                            background-color: #e7e7e7;
+                        }
+
+                        .icon {
+                            width: 16px;
+                            height: 16px;
+                            margin-right: 6px;
+                        }
+
+                        font-size: 14px;
+                        text-align: center;
+                        line-height: 22px;
+
+                        .title {
+                            font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                            font-weight: 650;
+                            color: #000000;
+                        }
+
+                        .subtitle {
+                            color: #555555;
+                        }
+                    }
+                }
+            }
+
+            .offer-box {
+                width: 240px;
+                height: 214px;
+                background-color: #fff;
+                border: 1px solid #e9eef2;
+                border-radius: 10px;
+                padding: 17px 10px;
+                overflow: hidden;
+
+                &.small {
+                    height: 64px;
+                    padding: 15px 10px;
+                }
+
+                .item {
+                    align-items: flex-start;
+                    cursor: pointer;
+                    margin-bottom: 19px;
+
+                    .avatar {
+                        width: 24px;
+                        height: 24px;
+                        margin-right: 8px;
+                        border-radius: 50%;
+                        background-size: contain;
+                    }
+
+                    .condition {
+                        font-size: 12px;
+                        color: #aaaaaa;
+                        width: 180px;
+                    }
+
+                    .titletitle {
+                        font-family: "ArialMT", "Arial", sans-serif;
+                        font-weight: 400;
+                        font-size: 13px;
+                        color: #333333;
+                        width: 180px;
+                    }
+
+                    &:hover .titletitle {
+                        color: #000000;
+                    }
                 }
             }
         }
     }
 
-    .selectives-box {
-        width: 628px;
-        height: 320px;
-        background-color: #ffffff;
-        border: 1px solid #e9eef2;
-        border-radius: 10px;
-        padding: 10px;
-
-        .head-top {
-            background-color: rgba(246, 130, 81, 1);
-            margin-bottom: 22px;
-        }
-
-        .list {
-            flex-wrap: wrap;
-            padding: 0 5px;
-            justify-content: space-between;
-
-            .item {
-                font-size: 14px;
-                color: #555555;
-                line-height: 20px;
-                margin-bottom: 12px;
+    .matter {
+        .matter-content {
+            margin-right: 12px;
+            .forum-sections-list {
                 position: relative;
+                width: 897px;
+                height: 240px;
+                background-color: rgba(255, 255, 255, 1);
+                border: 1px solid rgba(233, 238, 242, 1);
+                border-radius: 10px;
+                padding-left: 70px;
+                padding-top: 20px;
+                margin-bottom: 20px;
 
-                .dot {
-                    width: 6px;
-                    height: 6px;
-                    border-radius: 50%;
-                    background-color: #f68251;
-                    margin-right: 10px;
+                .img {
+                    position: absolute;
+                    top: -1px;
+                    left: -1px;
+                    width: 60px;
+                    height: 240px;
                 }
 
-                .text {
-                    width: 265px;
+                .title {
+                    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                    font-weight: 650;
+                    font-style: normal;
+                    font-size: 16px;
+                    color: #000000;
+                    margin-bottom: 16px;
+                }
+
+                .list {
+                    .line {
+                        &:not(:last-child) {
+                            margin-bottom: 10px;
+                        }
+                        .item {
+                            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                            font-weight: 400;
+                            font-style: normal;
+                            font-size: 14px;
+                            color: #333;
+                            padding: 0 18px;
+                            height: 32px;
+                            background-color: rgba(246, 246, 246, 1);
+                            border: 1px solid rgba(242, 242, 242, 1);
+                            border-radius: 16px;
+                            cursor: pointer;
+
+                            &:not(:last-child) {
+                                margin-right: 10px;
+                            }
+                        }
+                    }
+                }
+            }
+            .item-box {
+                margin-bottom: 12px;
+            }
+        }
+
+        .sidebar {
+            .adv {
+                display: block;
+                width: 291px;
+                height: 220px;
+                margin-bottom: 12px;
+                cursor: pointer;
+                .adv-icon {
+                    width: 291px;
+                    height: 220px;
+                    border-radius: 10px;
+                }
+            }
+
+            .side-box {
+                width: 100%;
+                padding: 17px 10px 10px;
+                margin-bottom: 12px;
+                width: 291px;
+                border-radius: 10px;
+
+                &.offer-side-box {
+                    background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
+                }
+
+                &.vote-side-box {
+                    background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
+                }
+
+                &.interviewexperience-side-box {
+                    background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
                 }
             }
         }
     }
 }
-
-.forum-sections-list {
-    position: relative;
-    width: 897px;
-    height: 240px;
-    background-color: rgba(255, 255, 255, 1);
-    border: 1px solid rgba(233, 238, 242, 1);
-    border-radius: 10px;
-    padding-left: 70px;
-    padding-top: 20px;
-
-    .img {
-        position: absolute;
-        top: -1px;
-        left: -1px;
-        width: 60px;
-        height: 240px;
-    }
-
-    .title {
-        font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
-        font-weight: 650;
-        font-style: normal;
-        font-size: 16px;
-        color: #000000;
-        margin-bottom: 16px;
-    }
-
-    .list {
-        .line {
-            &:not(:last-child) {
-                margin-bottom: 10px;
-            }
-            .item {
-                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
-                font-weight: 400;
-                font-style: normal;
-                font-size: 14px;
-                color: #333;
-                padding: 0 18px;
-                height: 32px;
-                background-color: rgba(246, 246, 246, 1);
-                border: 1px solid rgba(242, 242, 242, 1);
-                border-radius: 16px;
-                cursor: pointer;
-
-                &:not(:last-child) {
-                    margin-right: 10px;
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/css/public.css b/css/public.css
index 96b2941..6799ed7 100644
--- a/css/public.css
+++ b/css/public.css
@@ -1398,7 +1398,8 @@ body {
   background-color: #ffffff;
   border: 1px solid #e9eef2;
   border-radius: 10px;
-  padding: 21px;
+  padding: 21px 10px 15px 21px;
+  margin-bottom: 12px;
 }
 .hot-tag .hot-tag-title {
   font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
@@ -1407,6 +1408,7 @@ body {
   font-size: 16px;
   color: #000000;
   position: relative;
+  margin-bottom: 15px;
 }
 .hot-tag .hot-tag-title .icon {
   position: absolute;
@@ -1416,6 +1418,9 @@ body {
   width: 10px;
   height: 18px;
 }
+.hot-tag .list {
+  flex-wrap: wrap;
+}
 .hot-tag .list .item {
   line-height: 36px;
   color: #333333;
@@ -1424,6 +1429,10 @@ body {
   line-height: 32px;
   padding: 0 14px;
   background-color: #f6f6f6;
-  border: #f2f2f2;
+  border: 1px solid #f2f2f2;
   border-radius: 16px;
+  margin-bottom: 14px;
+  margin-right: 9px;
+  cursor: pointer;
+  text-decoration: none;
 }
diff --git a/css/public.less b/css/public.less
index c897915..14097be 100644
--- a/css/public.less
+++ b/css/public.less
@@ -1659,15 +1659,17 @@ body {
     background-color: rgba(255, 255, 255, 1);
     border: 1px solid rgba(233, 238, 242, 1);
     border-radius: 10px;
-    padding: 21px;
+    padding: 21px 10px 15px 21px;
+    margin-bottom: 12px;
+
     .hot-tag-title {
         font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
         font-weight: 650;
         font-style: normal;
         font-size: 16px;
         color: #000000;
-
         position: relative;
+        margin-bottom: 15px;
 
         .icon {
             position: absolute;
@@ -1680,6 +1682,8 @@ body {
     }
 
     .list {
+        flex-wrap: wrap;
+
         .item {
             line-height: 36px;
             color: #333333;
@@ -1688,8 +1692,12 @@ body {
             line-height: 32px;
             padding: 0 14px;
             background-color: rgba(246, 246, 246, 1);
-            border: rgba(242, 242, 242, 1);
+            border: 1px solid rgba(242, 242, 242, 1);
             border-radius: 16px;
+            margin-bottom: 14px;
+            margin-right: 9px;
+            cursor: pointer;
+            text-decoration: none;
         }
     }
 }
diff --git a/css/search-tag.css b/css/search-tag.css
new file mode 100644
index 0000000..d04d219
--- /dev/null
+++ b/css/search-tag.css
@@ -0,0 +1,114 @@
+#search-tag {
+  width: 1200px;
+  margin: 0 auto;
+}
+#search-tag .label-title {
+  margin-bottom: 24px;
+}
+#search-tag .label-title .icon {
+  width: 25px;
+  height: 20px;
+  margin-right: 12px;
+}
+#search-tag .label-title .text {
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 28px;
+  color: #000000;
+}
+#search-tag .classify {
+  margin-bottom: 16px;
+}
+#search-tag .classify .item {
+  width: 50px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  background-color: #ffffff;
+  border: 1px solid #f2f2f2;
+  border-radius: 12px;
+  color: #333333;
+  cursor: pointer;
+  font-size: 15px;
+}
+#search-tag .classify .item.pitch {
+  background-color: #d35110;
+  color: #ffffff;
+}
+#search-tag .classify .item:not(:last-child) {
+  margin-right: 10px;
+}
+#search-tag .quantity {
+  font-size: 14px;
+  line-height: 26px;
+  color: #555;
+  margin-bottom: 14px;
+}
+#search-tag .quantity .line {
+  width: 1px;
+  height: 14px;
+  background-color: #aaaaaa;
+  margin: 0 10px;
+}
+#search-tag .quantity .num {
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  color: #000000;
+  margin: 0 10px;
+}
+#search-tag .matter .matter-content {
+  margin-right: 12px;
+}
+#search-tag .matter .matter-content .list-box .item-box {
+  margin-bottom: 12px;
+}
+#search-tag .matter .matter-content .empty {
+  width: 100%;
+  height: 70vh;
+  background-color: #ffffff;
+  border: 1px solid #e9eef2;
+  border-radius: 10px;
+  flex-direction: column;
+  margin-right: 12px;
+}
+#search-tag .matter .matter-content .empty .empty-icon {
+  width: 80px;
+  height: 94px;
+}
+#search-tag .matter .matter-content .empty .empty-text {
+  font-size: 14px;
+  color: #7f7f7f;
+  margin-top: 10px;
+}
+#search-tag .matter .matter-content .pages-box {
+  padding-bottom: 60px;
+  padding-top: 30px;
+}
+#search-tag .matter .matter-content .pages-box .item {
+  min-width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  border-radius: 50px;
+  font-size: 14px;
+  color: #555555;
+  cursor: pointer;
+  padding: 0 4px;
+}
+#search-tag .matter .matter-content .pages-box .item.pitch {
+  background-color: #6fc16d;
+  color: #ffffff;
+}
+#search-tag .matter .matter-content .pages-box .arrows {
+  width: 7px;
+  height: 12px;
+  margin: 0 30px;
+  cursor: pointer;
+}
+#search-tag .matter .matter-content .pages-box .arrows.rotate180 {
+  transform: rotate(180deg);
+}
+#search-tag .matter .sidebar-box {
+  width: 291px;
+}
diff --git a/css/search-tag.less b/css/search-tag.less
new file mode 100644
index 0000000..50cb1dc
--- /dev/null
+++ b/css/search-tag.less
@@ -0,0 +1,138 @@
+#search-tag {
+    width: 1200px;
+    margin: 0 auto;
+
+    .label-title {
+        margin-bottom: 24px;
+
+        .icon {
+            width: 25px;
+            height: 20px;
+            margin-right: 12px;
+        }
+
+        .text {
+            font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+            font-weight: 650;
+            font-style: normal;
+            font-size: 28px;
+            color: #000000;
+        }
+    }
+
+    .classify {
+        margin-bottom: 16px;
+        .item {
+            width: 50px;
+            height: 32px;
+            line-height: 32px;
+            text-align: center;
+            background-color: rgba(255, 255, 255, 1);
+            border: 1px solid rgba(242, 242, 242, 1);
+            border-radius: 12px;
+            color: #333333;
+            cursor: pointer;
+            font-size: 15px;
+
+            &.pitch {
+                background-color: rgba(211, 81, 16, 1);
+                color: #ffffff;
+            }
+
+            &:not(:last-child) {
+                margin-right: 10px;
+            }
+        }
+    }
+
+    .quantity {
+        font-size: 14px;
+        line-height: 26px;
+        color: #555;
+        margin-bottom: 14px;
+
+        .line {
+            width: 1px;
+            height: 14px;
+            background-color: #aaaaaa;
+            margin: 0 10px;
+        }
+
+        .num {
+            font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+            font-weight: 650;
+            color: #000000;
+            margin: 0 10px;
+        }
+    }
+
+    .matter {
+        .matter-content {
+            margin-right: 12px;
+
+            .list-box {
+                .item-box {
+                    margin-bottom: 12px;
+                }
+            }
+
+            .empty {
+                width: 100%;
+                height: 70vh;
+                background-color: rgba(255, 255, 255, 1);
+                border: 1px solid rgba(233, 238, 242, 1);
+                border-radius: 10px;
+                flex-direction: column;
+                margin-right: 12px;
+
+                .empty-icon {
+                    width: 80px;
+                    height: 94px;
+                }
+
+                .empty-text {
+                    font-size: 14px;
+                    color: #7f7f7f;
+                    margin-top: 10px;
+                }
+            }
+
+            .pages-box {
+                padding-bottom: 60px;
+                padding-top: 30px;
+
+                .item {
+                    min-width: 24px;
+                    height: 24px;
+                    line-height: 24px;
+                    text-align: center;
+                    border-radius: 50px;
+                    font-size: 14px;
+                    color: #555555;
+                    cursor: pointer;
+                    padding: 0 4px;
+
+                    &.pitch {
+                        background-color: #6fc16d;
+                        color: #ffffff;
+                    }
+                }
+
+                .arrows {
+                    width: 7px;
+                    height: 12px;
+                    margin: 0 30px;
+                    cursor: pointer;
+
+                    &.rotate180 {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+        }
+
+        .sidebar-box {
+            width: 291px;
+        }
+    }
+}
diff --git a/css/search.css b/css/search.css
index 3fca160..c2224f5 100644
--- a/css/search.css
+++ b/css/search.css
@@ -2,20 +2,24 @@
   width: 1200px;
   margin: 0 auto;
 }
-#search .label-title {
-  margin-bottom: 24px;
+#search .search-box {
+  width: 460px;
+  height: 48px;
+  background-color: #ffffff;
+  border: 1px solid #d7d7d7;
+  border-radius: 10px;
+  padding: 0 16px;
+  margin-bottom: 20px;
 }
-#search .label-title .icon {
-  width: 25px;
+#search .search-box .search-input {
+  border: none;
+  outline: none;
+  height: 100%;
+}
+#search .search-box .search-icon {
+  width: 20px;
   height: 20px;
-  margin-right: 12px;
-}
-#search .label-title .text {
-  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
-  font-weight: 650;
-  font-style: normal;
-  font-size: 28px;
-  color: #000000;
+  cursor: pointer;
 }
 #search .classify {
   margin-bottom: 16px;
@@ -57,6 +61,58 @@
   color: #000000;
   margin: 0 10px;
 }
-#search .matter .sidebar-box {
-  width: 219px;
+#search .matter .matter-content {
+  margin-right: 12px;
+}
+#search .matter .matter-content .list-box .item-box {
+  margin-bottom: 12px;
+}
+#search .matter .matter-content .empty {
+  width: 100%;
+  height: 70vh;
+  background-color: #ffffff;
+  border: 1px solid #e9eef2;
+  border-radius: 10px;
+  flex-direction: column;
+  margin-right: 12px;
+}
+#search .matter .matter-content .empty .empty-icon {
+  width: 80px;
+  height: 94px;
+}
+#search .matter .matter-content .empty .empty-text {
+  font-size: 14px;
+  color: #7f7f7f;
+  margin-top: 10px;
+}
+#search .matter .matter-content .pages-box {
+  padding-bottom: 60px;
+  padding-top: 30px;
+}
+#search .matter .matter-content .pages-box .item {
+  min-width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  border-radius: 50px;
+  font-size: 14px;
+  color: #555555;
+  cursor: pointer;
+  padding: 0 4px;
+}
+#search .matter .matter-content .pages-box .item.pitch {
+  background-color: #6fc16d;
+  color: #ffffff;
+}
+#search .matter .matter-content .pages-box .arrows {
+  width: 7px;
+  height: 12px;
+  margin: 0 30px;
+  cursor: pointer;
+}
+#search .matter .matter-content .pages-box .arrows.rotate180 {
+  transform: rotate(180deg);
+}
+#search .matter .sidebar-box {
+  width: 291px;
 }
diff --git a/css/search.less b/css/search.less
index 479fd24..cd0b988 100644
--- a/css/search.less
+++ b/css/search.less
@@ -2,21 +2,25 @@
     width: 1200px;
     margin: 0 auto;
 
-    .label-title {
-        margin-bottom: 24px;
+    .search-box {
+        width: 460px;
+        height: 48px;
+        background-color: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(215, 215, 215, 1);
+        border-radius: 10px;
+        padding: 0 16px;
+        margin-bottom: 20px;
 
-        .icon {
-            width: 25px;
-            height: 20px;
-            margin-right: 12px;
+        .search-input {
+            border: none;
+            outline: none;
+            height: 100%;
         }
 
-        .text {
-            font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
-            font-weight: 650;
-            font-style: normal;
-            font-size: 28px;
-            color: #000000;
+        .search-icon {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
         }
     }
 
@@ -68,10 +72,71 @@
 
     .matter {
         .matter-content {
+            margin-right: 12px;
+
+            .list-box {
+                .item-box {
+                    margin-bottom: 12px;
+                }
+            }
+
+            .empty {
+                width: 100%;
+                height: 70vh;
+                background-color: rgba(255, 255, 255, 1);
+                border: 1px solid rgba(233, 238, 242, 1);
+                border-radius: 10px;
+                flex-direction: column;
+                margin-right: 12px;
+
+                .empty-icon {
+                    width: 80px;
+                    height: 94px;
+                }
+
+                .empty-text {
+                    font-size: 14px;
+                    color: #7f7f7f;
+                    margin-top: 10px;
+                }
+            }
+
+            .pages-box {
+                padding-bottom: 60px;
+                padding-top: 30px;
+
+                .item {
+                    min-width: 24px;
+                    height: 24px;
+                    line-height: 24px;
+                    text-align: center;
+                    border-radius: 50px;
+                    font-size: 14px;
+                    color: #555555;
+                    cursor: pointer;
+                    padding: 0 4px;
+
+                    &.pitch {
+                        background-color: #6fc16d;
+                        color: #ffffff;
+                    }
+                }
+
+                .arrows {
+                    width: 7px;
+                    height: 12px;
+                    margin: 0 30px;
+                    cursor: pointer;
+
+                    &.rotate180 {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
         }
 
         .sidebar-box {
-            width: 219px;
+            width: 291px;
         }
     }
 }
diff --git a/img/add-btn-black.svg b/img/add-btn-black.svg
new file mode 100644
index 0000000..df3c28c
--- /dev/null
+++ b/img/add-btn-black.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter636">
+      <feColorMatrix type="matrix" values="1 0 0 0 -1  0 1 0 0 -1  0 0 1 0 -1  0 0 0 1 0  " in="SourceGraphic" />
+    </filter>
+  </defs>
+  <g transform="matrix(1 0 0 1 -1380 -3749 )">
+    <image preserveAspectRatio="none" style="overflow:visible" width="16" height="16" xlink:href="data:image/png;base64,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" x="1380px" y="3749px" filter="url(#filter636)" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/arrows-gray-deep.svg b/img/arrows-gray-deep.svg
new file mode 100644
index 0000000..365ea96
--- /dev/null
+++ b/img/arrows-gray-deep.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="7px" height="12px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -985 -2504 )">
+    <path d="M 6.87972508591065 5.72344689378758  C 6.95990836197022 5.80360721442886  7 5.89579158316633  7 6  C 7 6.10420841683367  6.95990836197022 6.19639278557114  6.87972508591065 6.27655310621242  L 1.27491408934708 11.8797595190381  C 1.19473081328751 11.9599198396794  1.10252004581901 12  0.998281786941581 12  C 0.894043528064147 12  0.801832760595647 11.9599198396794  0.721649484536082 11.8797595190381  L 0.120274914089347 11.2785571142285  C 0.0400916380297824 11.1983967935872  0 11.1062124248497  0 11.002004008016  C 0 10.8977955911824  0.0400916380297824 10.8056112224449  0.120274914089347 10.7254509018036  L 4.84707903780069 6  L 0.120274914089347 1.27454909819639  C 0.0400916380297824 1.19438877755511  0 1.10220440881763  0 0.997995991983968  C 0 0.893787575150299  0.0400916380297824 0.801603206412824  0.120274914089347 0.721442885771542  L 0.721649484536082 0.120240480961924  C 0.801832760595647 0.0400801603206409  0.894043528064147 0  0.998281786941581 0  C 1.10252004581901 0  1.19473081328751 0.0400801603206409  1.27491408934708 0.120240480961924  L 6.87972508591065 5.72344689378758  Z " fill-rule="nonzero" fill="#555555" stroke="none" transform="matrix(1 0 0 1 985 2504 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/arrows-gray-simple.svg b/img/arrows-gray-simple.svg
new file mode 100644
index 0000000..cc02acf
--- /dev/null
+++ b/img/arrows-gray-simple.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="7px" height="12px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -726 -2504 )">
+    <path d="M 6.87972508591065 0.721442885771542  C 6.95990836197022 0.801603206412824  7 0.893787575150299  7 0.997995991983968  C 7 1.10220440881763  6.95990836197022 1.19438877755511  6.87972508591065 1.27454909819639  L 2.15292096219931 6  L 6.87972508591065 10.7254509018036  C 6.95990836197022 10.8056112224449  7 10.8977955911824  7 11.002004008016  C 7 11.1062124248497  6.95990836197022 11.1983967935872  6.87972508591065 11.2785571142285  L 6.27835051546392 11.8797595190381  C 6.19816723940435 11.9599198396794  6.10595647193585 12  6.00171821305842 12  C 5.89747995418099 12  5.80526918671249 11.9599198396794  5.72508591065292 11.8797595190381  L 0.120274914089347 6.27655310621242  C 0.0400916380297824 6.19639278557114  0 6.10420841683367  0 6  C 0 5.89579158316633  0.0400916380297824 5.80360721442886  0.120274914089347 5.72344689378758  L 5.72508591065292 0.120240480961924  C 5.80526918671249 0.0400801603206409  5.89747995418099 0  6.00171821305842 0  C 6.10595647193585 0  6.19816723940435 0.0400801603206409  6.27835051546392 0.120240480961924  L 6.87972508591065 0.721442885771542  Z " fill-rule="nonzero" fill="#aaaaaa" stroke="none" transform="matrix(1 0 0 1 726 2504 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/forum.png b/img/forum.png
new file mode 100644
index 0000000..70a2a29
Binary files /dev/null and b/img/forum.png differ
diff --git a/img/mj.png b/img/mj.png
new file mode 100644
index 0000000..a1245a4
Binary files /dev/null and b/img/mj.png differ
diff --git a/img/offer.svg b/img/offer.svg
new file mode 100644
index 0000000..64a304c
--- /dev/null
+++ b/img/offer.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter638">
+      <feColorMatrix type="matrix" values="1 0 0 0 -1  0 1 0 0 -1  0 0 1 0 -1  0 0 0 1 0  " in="SourceGraphic" />
+    </filter>
+  </defs>
+  <g transform="matrix(1 0 0 1 -1462 -255 )">
+    <image preserveAspectRatio="none" style="overflow:visible" width="14" height="14" xlink:href="data:image/png;base64,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" x="1462px" y="255px" filter="url(#filter638)" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/right-arrow-black.svg b/img/right-arrow-black.svg
new file mode 100644
index 0000000..171eed6
--- /dev/null
+++ b/img/right-arrow-black.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="5px" height="8px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -40 -7 )">
+    <path d="M 4.91408934707904 3.81563126252505  C 4.97136311569301 3.8690714762859  5 3.93052772211089  5 4  C 5 4.06947227788911  4.97136311569301 4.13092852371409  4.91408934707904 4.18436873747495  L 0.910652920962199 7.91983967935872  C 0.853379152348225 7.97327989311957  0.787514318442153 8  0.713058419243986 8  C 0.638602520045819 8  0.572737686139748 7.97327989311957  0.515463917525773 7.91983967935872  L 0.0859106529209622 7.51903807615231  C 0.0286368843069874 7.46559786239145  0 7.40414161656647  0 7.33466933867735  C 0 7.26519706078824  0.0286368843069874 7.20374081496326  0.0859106529209622 7.1503006012024  L 3.46219931271478 4  L 0.0859106529209622 0.849699398797595  C 0.0286368843069874 0.79625918503674  0 0.734802939211757  0 0.665330661322646  C 0 0.595858383433533  0.0286368843069874 0.534402137608549  0.0859106529209622 0.480961923847695  L 0.515463917525773 0.0801603206412826  C 0.572737686139748 0.0267201068804273  0.638602520045819 0  0.713058419243986 0  C 0.787514318442153 0  0.853379152348225 0.0267201068804273  0.910652920962199 0.0801603206412826  L 4.91408934707904 3.81563126252505  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 40 7 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/search-icon.svg b/img/search-icon.svg
new file mode 100644
index 0000000..581fd6d
--- /dev/null
+++ b/img/search-icon.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -786 -178 )">
+    <path d="M 12.265625 12.265625  C 13.3193108974359 11.2119391025641  13.8461538461538 9.94391025641026  13.8461538461538 8.46153846153846  C 13.8461538461538 6.97916666666667  13.3193108974359 5.71113782051282  12.265625 4.65745192307692  C 11.2119391025641 3.60376602564102  9.94391025641026 3.07692307692308  8.46153846153846 3.07692307692308  C 6.97916666666667 3.07692307692308  5.71113782051282 3.60376602564102  4.65745192307692 4.65745192307692  C 3.60376602564103 5.71113782051282  3.07692307692308 6.97916666666667  3.07692307692308 8.46153846153846  C 3.07692307692308 9.94391025641026  3.60376602564103 11.2119391025641  4.65745192307692 12.265625  C 5.71113782051282 13.3193108974359  6.97916666666667 13.8461538461538  8.46153846153846 13.8461538461538  C 9.94391025641026 13.8461538461538  11.2119391025641 13.3193108974359  12.265625 12.265625  Z M 19.5552884615385 17.3798076923077  C 19.8517628205128 17.6762820512821  20 18.036858974359  20 18.4615384615385  C 20 18.8782051282051  19.8477564102564 19.2387820512821  19.5432692307692 19.5432692307692  C 19.2387820512821 19.8477564102564  18.8782051282051 20  18.4615384615385 20  C 18.0288461538462 20  17.6682692307692 19.8477564102564  17.3798076923077 19.5432692307692  L 13.2572115384615 15.4326923076923  C 11.8229166666667 16.4262820512821  10.224358974359 16.9230769230769  8.46153846153846 16.9230769230769  C 7.31570512820513 16.9230769230769  6.21995192307692 16.7007211538462  5.17427884615385 16.2560096153846  C 4.12860576923077 15.8112980769231  3.22716346153846 15.2103365384615  2.46995192307692 14.453125  C 1.71274038461538 13.6959134615385  1.11177884615385 12.7944711538462  0.667067307692308 11.7487980769231  C 0.222355769230769 10.703125  0 9.60737179487179  0 8.46153846153846  C 0 7.31570512820513  0.222355769230769 6.21995192307692  0.667067307692308 5.17427884615385  C 1.11177884615385 4.12860576923077  1.71274038461538 3.22716346153846  2.46995192307692 2.46995192307692  C 3.22716346153846 1.71274038461539  4.12860576923077 1.11177884615385  5.17427884615385 0.667067307692308  C 6.21995192307692 0.222355769230769  7.31570512820513 0  8.46153846153846 0  C 9.6073717948718 0  10.703125 0.222355769230769  11.7487980769231 0.667067307692308  C 12.7944711538462 1.11177884615385  13.6959134615385 1.71274038461539  14.453125 2.46995192307692  C 15.2103365384615 3.22716346153846  15.8112980769231 4.12860576923077  16.2560096153846 5.17427884615385  C 16.7007211538462 6.21995192307692  16.9230769230769 7.31570512820513  16.9230769230769 8.46153846153846  C 16.9230769230769 10.224358974359  16.4262820512821 11.8229166666667  15.4326923076923 13.2572115384615  L 19.5552884615385 17.3798076923077  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 786 178 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/summarize.png b/img/summarize.png
new file mode 100644
index 0000000..4353e9d
Binary files /dev/null and b/img/summarize.png differ
diff --git a/img/triangle-violet.svg b/img/triangle-violet.svg
new file mode 100644
index 0000000..bc60f99
--- /dev/null
+++ b/img/triangle-violet.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="10px" height="18px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1270 -343 )">
+    <path d="M 9.67013888888889 8.208984375  C 9.8900462962963 8.431640625  10 8.6953125  10 9  C 10 9.3046875  9.8900462962963 9.568359375  9.67013888888889 9.791015625  L 1.89236111111111 17.666015625  C 1.6724537037037 17.888671875  1.41203703703704 18  1.11111111111111 18  C 0.810185185185185 18  0.549768518518518 17.888671875  0.329861111111111 17.666015625  C 0.109953703703704 17.443359375  0 17.1796875  0 16.875  L 0 1.125  C 0 0.820312499999997  0.109953703703704 0.556640624999997  0.329861111111111 0.333984375  C 0.549768518518518 0.111328124999999  0.810185185185185 0  1.11111111111111 0  C 1.41203703703704 0  1.6724537037037 0.111328124999999  1.89236111111111 0.333984375  L 9.67013888888889 8.208984375  Z " fill-rule="nonzero" fill="#8080ff" stroke="none" transform="matrix(1 0 0 1 1270 343 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/vote.svg b/img/vote.svg
new file mode 100644
index 0000000..66abf4c
--- /dev/null
+++ b/img/vote.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter639">
+      <feColorMatrix type="matrix" values="1 0 0 0 -1  0 1 0 0 -1  0 0 1 0 -1  0 0 0 1 0  " in="SourceGraphic" />
+    </filter>
+  </defs>
+  <g transform="matrix(1 0 0 1 -1457 -371 )">
+    <image preserveAspectRatio="none" style="overflow:visible" width="16" height="16" xlink:href="data:image/png;base64,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" x="1457px" y="371px" filter="url(#filter639)" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index b092cd3..0c5adf8 100644
--- a/index.html
+++ b/index.html
@@ -4,153 +4,288 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>论坛首页</title>
     <link rel="stylesheet" href="./css/public.css" />
     <link rel="stylesheet" href="./css/index.css" />
     <script src="./js/vue.global.js"></script>
+    <style>
+        [v-cloak] {
+            display: none;
+        }
+    </style>
 </head>
 
 <body>
-    <div class="container" id="appIndex">
-        <!-- 话题和精选 -->
-        <div class="topic-and-selectives flexflex">
-            <div class="topic-box">
-                <div class="head-top flexcenter">
-                    <img class="icon" src="https://app.gter.net/image/miniApp/offer/well-white.svg" />
-                    <div class="text">话题</div>
+    <div class="container" id="appIndex" v-cloak>
+        <head-top></head-top>
+
+        <div class="header-content-box flexflex">
+            <div class="header-content-left ">
+                <div class="adv-list flexacenter">
+                    <a class="adv-item" target="_blank">
+                        <img class="adv-img" src="https://o.x-php.com/bbs/common/cf/144405a5pqst6fakct81t8.gif" />
+                    </a>
+                    <a class="adv-item" target="_blank">
+                        <img class="adv-img" src="https://o.x-php.com/bbs/common/cf/144405a5pqst6fakct81t8.gif" />
+                    </a>
                 </div>
-                <div class="topic-head flexflex" bind:tap="goDetails" data-uniqid="{{ ongoingbj.uniqid }}">
-                    <div class="title one-line-display">{{ ongoingbj.title }}</div>
-                    <div class="hint one-line-display">{{ ongoingbj.description }}</div>
-                    <div class="people flexacenter">
-                        <div class="left flexacenter">
-                            <div class="number">{{ ongoingbj.comments }}</div>
-                            <div class="text">人正在讨论</div>
+                <!-- 话题和精选 -->
+                <div class="topic-and-selectives flexflex">
+                    <div class="topic-box">
+                        <div class="head-top flexcenter">
+                            <img class="icon" src="https://app.gter.net/image/miniApp/offer/well-white.svg" />
+                            <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 class="topic-head flexflex" bind:tap="goDetails" data-uniqid="{{ ongoingbj.uniqid }}">
+                            <div class="title one-line-display">{{ ongoingbj.title }}</div>
+                            <div class="hint one-line-display">{{ ongoingbj.description }}</div>
+                            <div class="people flexacenter">
+                                <div class="left flexacenter">
+                                    <div class="number">{{ 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">
+                            <div class="item flexacenter" v-for="(item, index) in pastList" :key="index" bind:tap="goDetails" data-uniqid="{{ item.uniqid }}">
+                                <img class="img" src="https://app.gter.net/image/miniApp/offer/well-yellow.svg" />
+                                <div class="text one-line-display flex1">{{ item.title }}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="selectives-box">
+                        <div class="head-top flexcenter">
+                            <img class="icon" src="https://app.gter.net/image/miniApp/offer/handpick-icon.png" />
+                            <div class="text">精选</div>
+                        </div>
+                        <div class="list flexflex">
+                            <div class="item flexacenter" v-for="(item, index) in topicHandpickedList" :key="index">
+                                <div class="dot"></div>
+                                <div class="text one-line-display">{{ item.title }}</div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="topic-list">
-                    <div class="item flexacenter" v-for="(item, index) in pastList" :key="index" bind:tap="goDetails" data-uniqid="{{ item.uniqid }}">
-                        <img class="img" src="https://app.gter.net/image/miniApp/offer/well-yellow.svg" />
-                        <div class="text one-line-display flex1">{{ item.title }}</div>
-                    </div>
-                </div>
-            </div>
 
-            <div class="selectives-box">
-                <div class="head-top flexcenter">
-                    <img class="icon" src="https://app.gter.net/image/miniApp/offer/handpick-icon.png" />
-                    <div class="text">精选</div>
-                </div>
-                <div class="list flexflex">
-                    <div class="item flexacenter" v-for="(item, index) in 16" :key="index">
-                        <div class="dot"></div>
-                        <div class="text one-line-display">美国各院校申请时间汇总（一）美国各院校申请时间汇总（一）美国各院校申请时间汇总（一）</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- 论坛板块列表 -->
-        <div v-if="true" class="forum-sections-list">
-            <img class="img" src="./img/sections-left.svg" />
-            <div class="title">论坛版块</div>
-            <div class="list">
-                <div class="line flexacenter">
-                    <div class="item flexacenter">香港</div>
-                    <div class="item flexacenter">香港</div>
-                    <div class="item flexacenter">香港</div>
-                </div>
-                <div class="line flexacenter">
-                    <div class="item flexacenter">经济/商科</div>
-                    <div class="item flexacenter">经济/商科</div>
-                    <div class="item flexacenter">经济/商科</div>
-                </div>
-                <div class="line flexacenter">
-                    <div class="item flexacenter">香港</div>
-                    <div class="item flexacenter">香港</div>
-                    <div class="item flexacenter">香港</div>
-                </div>
-                <div class="line flexacenter">
-                    <div class="item flexacenter">香港</div>
-                    <div class="item flexacenter">香港</div>
-                    <div class="item flexacenter">香港</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="item-box item-forum">
-            <div class="item-head flexacenter">
-                <img class="avatar" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC1UltTF6WOikN42jDKLNjtax7Hc44zLpaKSdU9oWFhY2E~/small" />
-                <div class="name">小P学姐</div>
-                <img class="group" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdXfqqsgFptxhcq_cQnrlcPJ0DVESBq_D-81qNDQyOQ~~" />
-                <div class="time">2025-8-11 01:30</div>
-                <div class="flex1"></div>
-
-                <div class="view flexacenter">
-                    <img class="icon" src="https://app.gter.net/image/miniApp/offer/eye-icon.svg" />
-                    <div class="text">3016</div>
-                </div>
-
-                <div class="btn flexcenter" @click="cutShow">
-                    <img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" />
-                </div>
-
-                <!-- <template v-if="show">
-                        <div class="mask" catch:tap="cutShow" catch:touchmove="touchmove"></div>
-                        <div class="operate" catch:tap="true">
-                            <div class="item" bind:tap="report">举报</div>
-                            <template v-if="ismanager">
-                                <div class="item" bind:tap="hide">{{ item.hidden == 0 ? '隐藏' : '显示' }}</div>
-                                <div class="item" bind:tap="recommend">{{ item.recommend == 1 ? '取消' : '' }}推荐</div>
-                                <div class="item" bind:tap="essence">{{ item.best == 1 ? '取消' : '' }}精华</div>
-                            </template>
+                <div class="header-left-bottom-box flexflex">
+                    <a class="adv flexacenter" data-x-event="bbsindexslide" href="https://bbs.gter.net/thread-1663824-1-1.html" title="26Fall祈福，求offer得offer！" target="_blank">
+                        <img class="adv-icon" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG_Y2l-U_potcXiB1NFX9ddrB-ebU2ybYKMuA2kGH_7R-9lU990IXj3X-Q7x4Cg0NDI5" alt="26Fall祈福，求offer得offer！">
+                    </a>
+                    <div class="list">
+                        <div class="item flexacenter" v-for="(item, index) in 4" :key="index">
+                            <div class="icon dot-gray"></div><a class="one-line-display text flex1" href="https://offer.gter.net/details/XynvPnSnX1KL" target="_blank">26Fall-香港理工大学 MSc Offer</a>
                         </div>
-                    </template> -->
+                    </div>
+                    <div class="list list2">
+                        <div class="item flexacenter" v-for="(item, index) in 4" :key="index">
+                            <div class="icon dot-gray"></div><a class="one-line-display text flex1" href="https://offer.gter.net/details/y9KbiuzHXbmr" target="_blank">26Fall-香港科技大学 MSc Offer</a>
+                        </div>
+                    </div>
+                </div>
             </div>
 
-            <div class="label flexflex">
-                <img class="item icon" src="./img/recommend-icon.png" />
-                <img class="item icon" src="./img/essence-icon.png" />
-                <div class="item blue">香港</div>
-                <div class="item">香港</div>
+            <div class="header-content-right">
+                <div class="post-entrance">
+                    <div class="entrance-top flexacenter">
+                        <img class="icon" src="./img/forum.png">我要发帖
+                    </div>
+                    <div class="entrance-bottom flexacenter">
+                        <div v-for="(item, index) in 4" :key="index" class="item flexcenter" target="_blank" style="position: relative;">
+                            <img class="icon" src="./img/forum.png" style="width: 16px;">
+                            <span class="text">发帖</span>
+                        </div>
+                    </div>
+                </div>
+
+                <a class="adv-broadside" ref="custom_2AdvRef">
+                    <img class="adv-broadside-img" src="https://o.x-php.com/bbs/common/cf/152158dpf5eh7pqpaealiq.gif" />
+                </a>
+
+                <div class="group-box">
+                    <div class="group flexflex">
+                        <div class="group-item flexcenter" v-for="(item, index) in popList" :key="index">
+                            <div class="title">{{ item.title }}</div>
+                            <div class="subtitle">{{ item.subtitle }}</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="offer-box" :class="{'small': 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-cloak v-for="(item, index) in offerlist" :key="index">
+                            <div class="avatar" :style="{backgroundImage: `url(${item['avatar']})`}"></div>
+                            <div class="">
+                                <div class="condition one-line-display">{{ item["date"] }} {{ item['type'] }}</div>
+                                <div class="titletitle one-line-display">{{ item["content"] }}</div>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+
             </div>
+        </div>
+        <div class="matter flexflex">
+            <div class="matter-content flex1">
+                <!-- 论坛板块列表 -->
+                <div class="forum-sections-list">
+                    <img class="img" src="./img/sections-left.svg" />
+                    <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-index.html?section=${item.uniqid}`">{{ item.name }}</a>
+                            </div>
+                        </template>
 
-            <div class="title">【干货】香港留学费用准备</div>
+                    </div>
+                </div>
 
-            <div class="message">在即将赴港的时候，很多同学好奇香港一年制硕士下来的整体费用大概是多少，其实主要包括学费，租房费和生活费三部分。学费的话根据不同香港来定，大概在10-30万港币之间，比较固定…</div>
-
-            <div class="comment flexacenter">
-                <img class="icon" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC1UltTF6WOikN42jDKLNjtax7Hc44zLpaKSdU9oWFhY2E~/small" />
-                <div class="text one-line-display">在即将赴港的时候，很多同学好奇香港一年制硕士下来的整体费用大概是多少，其实主要包括学费，租房费和生活费三部分。学费的话根据不同香港来定，大概在10-30万港币之间，比较固定…</div>
+                <item-forum :itemdata="item" v-for="(item, index) in list" :key="index"></item-forum>
             </div>
+            <div class="sidebar">
+                <a class="adv" href="" target="_blank">
+                    <img class="adv-icon" src="https://o.x-php.com/bbs/common/cf/1709075xdbbbvjd8cbxvdd.jpg" alt="26Fall祈福，求offer得offer！">
+                </a>
+                <a class="adv" href="" target="_blank">
+                    <img class="adv-icon" src="https://o.x-php.com/bbs/common/cf/1709075xdbbbvjd8cbxvdd.jpg" alt="26Fall祈福，求offer得offer！">
+                </a>
 
-            <div class="bottom flexacenter">
-                <div class="bottom-item like flexacenter">
-                    <img class="icon" src="./img/like-icon.png" />
-                    <div class="text">3016</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="{~}forum/assets/forum/offer-icon.png" />
+                            <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="./img/right-arrow-black.svg" />
+                        </a>
+                    </div>
+                    <div class="box">
+                        <a class="item flexflex" v-cloak v-for="item in offer" :key="item" :href="item['url']" target="_blank">
+                            <img class="school-img" :src="item.data['schoollogo']" />
+                            <div class="school-detail flex1 flexflex">
+                                <div 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" style="position: relative;" href="https://offer.gter.net/post" target="_blank" v-cloak>
+                            <img class="add-icon" src="./img/add-btn-black.svg" />
+                            <div>报Offer</div>
+                            <div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
+                        </a>
+                    </div>
                 </div>
-                <div class="bottom-item like flexacenter">
-                    <img class="icon" src="./img/collect-golden.svg" />
-                    <div class="text">3016</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="{~}forum/assets/forum/vote-icon.png" />
+                            <div class="title">投票</div>
+                        </div>
+                        <a class="more flexacenter" target="_blank" href="https://vote.gter.net">
+                            <span>more</span>
+                            <img class="more-icon" src="./img/right-arrow-black.svg" />
+                        </a>
+                    </div>
+                    <div class="box">
+                        <a class="item flexflex" v-cloak v-for="item in vote" :key="item" target="_blank" :href="item['url']">
+                            <div class="name one-line-display">{{item['title']}}</div>
+                            <div class="brief">{{ item['message'] }}</div>
+                        </a>
+                        <a class="add-btn flexcenter" style="position: relative;" v-cloak target="_blank" href="https://vote.gter.net/publish">
+                            <img class="add-icon" src="./img/add-btn-black.svg" />
+                            <div>发起投票</div>
+                            <div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
+                        </a>
+                    </div>
                 </div>
-                <div class="bottom-item like flexacenter">
-                    <img class="icon" src="./img/discuss-icon.png" />
-                    <div class="text">3016</div>
-                </div>
-                <div class="bottom-item like flexacenter">
-                    <img class="icon" src="./img/share-gray.png" />
-                    <div class="text">3016</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="{~}forum/assets/forum/mj-icon.png" />
+                            <div class="title">面经</div>
+                        </div>
+                        <a class="more flexacenter" href="https://interviewexperience.gter.net/" target="_blank">
+                            <span>more</span>
+                            <img class="more-icon" src="./img/right-arrow-black.svg" />
+                        </a>
+                    </div>
+                    <div class="box">
+                        <a class="item flexflex" v-cloak v-for="(item,index) in interviewexperience" :key="item" :href="item['url']" target="_blank">
+                            <div class="school one-line-display">{{ item.data['schoolname'] }}</div>
+                            <div class="major one-line-display" v-if="item.data['profession']">{{ item.data['profession'] }}</div>  
+                            <div class="info">
+                                <img class="icon" :src="item.user['avatar']" />
+                                <span class="text">{{ item['content'] }}</span>
+                            </div>
+                        </a>
+                        <a class="add-btn flexcenter" style="position: relative;" href="https://interviewexperience.gter.net/publish" target="_blank" v-cloak>
+                            <img class="add-icon" src="./img/add-btn-black.svg" />
+                            <div>写面经</div>
+                            <div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
+                        </a>
+                    </div>
                 </div>
+
+                <!-- newest 最新 -->
+                <!-- <div class="newest-side-box side-box" v-if="Object.keys(newPost).length !== 0">
+                    <img class="bounding" src="{~}forum/assets/forum/bounding-circle-green.svg" alt="" />
+                    <div class="side-header flexacenter">
+                        <div class="left flexacenter">
+                            <img class="header-icon" src="{~}forum/assets/forum/newest-icon.png" />
+                            <div class="title">最新</div>
+                        </div>
+                    </div>
+                    <div class="box">
+                        <a class="item flexacenter" v-cloak v-for="item in newPost.data.slice(0,16)" :key="item" :href="item['url']" target="_blank">
+                            <div class="dot dot-green"></div>
+                            <div class="text one-line-display">{{ item['subject'] }}</div>
+                        </a>
+                    </div>
+                </div> -->
+
+                <!-- essence 精选 -->
+                <!-- <div class="essence-side-box side-box" v-if="Object.keys(essencePost).length !== 0">
+                    <img class="bounding" src="{~}forum/assets/forum/bounding-circle-blue.svg" alt="" />
+                    <div class="side-header flexacenter">
+                        <div class="left flexacenter">
+                            <img class="header-icon" src="{~}forum/assets/forum/essence.png" />
+                            <div class="title">精华阅读</div>
+                        </div>
+                    </div>
+                    <div class="box">
+                        <a class="item flexacenter" v-cloak v-for="item in essencePost.data" :key="item" :href="item['url']" target="_blank ">
+                            <div class="dot"></div>
+                            <div class="text one-line-display">{{ item['subject'] }}</div>
+                        </a>
+                    </div>
+                </div> -->
             </div>
         </div>
     </div>
 
-    <script src="./js/index.js"></script>
+    <script src="./js/axios.min.js"></script>
+    <script src="./js/public.js"></script>
+    <script src="./js/scrolltext.js"></script>
+    <script type="module" src="./js/index.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/js/details.js b/js/details.js
index f0356de..da66801 100644
--- a/js/details.js
+++ b/js/details.js
@@ -60,7 +60,7 @@ const appSectionIndex = createApp({
         const goLogin = () => {
             if (typeof window === "undefined") return;
             if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
-                if (window["userInfoWin"]["uid"]) isNeedLogin.value = false;
+                if (window["userInfoWin"]["uid"]) isLogin.value = true;
                 else ajax_login();
             } else ajax_login();
         };
diff --git a/js/homepage-me.js b/js/homepage-me.js
index e80f8e0..48e9c2c 100644
--- a/js/homepage-me.js
+++ b/js/homepage-me.js
@@ -69,7 +69,7 @@ const appSectionIndex = createApp({
         const goLogin = () => {
             if (typeof window === "undefined") return;
             if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
-                if (window["userInfoWin"]["uid"]) isNeedLogin.value = false;
+                if (window["userInfoWin"]["uid"]) isLogin.value = true;
                 else ajax_login();
             } else ajax_login();
         };
diff --git a/js/homepage-other.js b/js/homepage-other.js
index efed5dc..8181cca 100644
--- a/js/homepage-other.js
+++ b/js/homepage-other.js
@@ -68,7 +68,7 @@ const appSectionIndex = createApp({
         const goLogin = () => {
             if (typeof window === "undefined") return;
             if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
-                if (window["userInfoWin"]["uid"]) isNeedLogin.value = false;
+                if (window["userInfoWin"]["uid"]) isLogin.value = true;
                 else ajax_login();
             } else ajax_login();
         };
diff --git a/js/index.js b/js/index.js
index e32ce27..71d02ba 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,26 +1,51 @@
-const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue;
+const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
+import { headTop } from "../component/head-top/head-top.js";
+import { itemForum } from "../component/item-forum/item-forum.js";
 
-createApp({
+const appIndex = createApp({
     setup() {
-        let ongoingbj = ref({
-            commentUser: [
-                {
-                    avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/mini?random=iyHTPLKnfrDC",
-                },
-                {
-                    avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/mini?random=iyHTPLKnfrDC",
-                },
-            ],
-            comments: 5,
-            created_at: "2025-08-22 16:01:34",
-            description: "''",
-            status: 1,
-            title: "【征稿】第五届糖尿病与内分泌学国际研讨会(ICDE 2025)",
-            topicid: 254293,
-            uniqid: "C840eySXCXSn",
-        });
+        onMounted(() => getUserInfoWin());
 
-        console.log(ongoingbj);
+        let isLogin = ref(true);
+        let realname = ref(1); // 是否已经实名
+        let userInfoWin = ref({});
+
+        const getUserInfoWin = () => {
+            const checkUser = () => {
+                const user = window.userInfoWin;
+                if (!user) return;
+                document.removeEventListener("getUser", checkUser);
+                realname.value = user.realname;
+                userInfoWin.value = user;
+                if (user?.uin > 0 || user?.uid > 0) isLogin.value = true;
+            };
+            document.addEventListener("getUser", checkUser);
+        };
+
+        const openAttest = () => {
+            const handleAttestClose = () => {
+                document.removeEventListener("closeAttest", handleAttestClose);
+                realname.value = window.userInfoWin?.realname || 0;
+            };
+            // 启动认证流程时添加监听
+            document.addEventListener("closeAttest", handleAttestClose);
+            loadAttest(2);
+        };
+
+        // 跳转登录
+        const goLogin = () => {
+            if (typeof window === "undefined") return;
+            if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
+                if (window["userInfoWin"]["uid"]) isLogin.value = true;
+                else ajax_login();
+            } else ajax_login();
+        };
+
+        provide("isLogin", isLogin);
+        provide("userInfoWin", userInfoWin);
+        provide("realname", realname);
+        provide("openAttest", openAttest);
+        provide("goLogin", goLogin);
 
         let pastList = ref([
             {
@@ -70,6 +95,200 @@ createApp({
             },
         ]);
 
-        return { ongoingbj, pastList };
+        onMounted(() => {
+            offerListScrolling();
+            getSectionList();
+
+            getList();
+
+            window.addEventListener("scroll", handleScroll);
+
+            getTalkingRecommend();
+            getTopicHandpicked();
+            getTopicLatest();
+        });
+
+        let ongoingbj = ref({}); // 话题数据
+
+        const getTalkingRecommend = () => {
+            ajaxget("/v2/api/forum/talkingRecommend").then((res) => {
+                if (res.code != 200) return;
+                let data = res["data"] || [];
+
+                const getTargetItem = (arr) => {
+                    const target = arr.find((item) => item.state === 1);
+                    return target !== undefined ? target : arr.length > 0 ? arr[0] : null;
+                };
+
+                ongoingbj.value = getTargetItem(data.ongoing || []);
+                pastList.value = data.past || [];
+            });
+        };
+
+        let topicHandpickedList = ref([]); // 精选列表
+        const getTopicHandpicked = (uniqid) => {
+            ajaxget(`/v2/api/forum/topicHandpicked?limit=16`).then((res) => {
+                if (res.code != 200) return;
+                let data = res["data"] || [];
+                console.log("data", data);
+                topicHandpickedList.value = data;
+            });
+        };
+
+        let offer = ref([]); // 面经列表
+        let vote = ref([]); // 面经列表
+        let interviewexperience = ref([]); // 面经列表
+        const getTopicLatest = () => {
+            ajaxget(`/v2/api/forum/getTopicLatest?limit=4`).then((res) => {
+                const data = res.data || [];
+
+                data.vote.forEach((item) => {
+                    if (!item.title) {
+                        item.title = item.content;
+                        item.content = "";
+                    }
+                });
+
+                console.log("data", data);
+                offer.value = data.offer;
+                vote.value = data.vote;
+                interviewexperience.value = data.interviewexperience;
+
+                console.log("interviewexperience", interviewexperience.value);
+            });
+        };
+
+        const handleScroll = () => {
+            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+
+            const scrollHeight = document.documentElement.scrollHeight;
+            const clientHeight = document.documentElement.clientHeight;
+
+            // 列表下 滑动到底部 获取新数据
+            if (scrollTop + clientHeight >= scrollHeight - 40) getList();
+        };
+
+        let offerlist = ref([]); // offer 列表滚动 数据
+
+        const offerListRef = ref(null);
+        const custom_2AdvRef = ref(null);
+
+        // 处理 offer 列表滚动
+        const offerListScrolling = (data) => {
+            ajax("https://forum.gter.net/api/index/dynamic").then((res) => {
+                if (res.code == 200) {
+                    let data = res["data"] || [];
+
+                    data.forEach((item) => (item.date = strtimeago(item.date)));
+
+                    let targetValue = [];
+                    targetValue = [...data, ...data.slice(0, 6)];
+
+                    offerlist.value = targetValue;
+                    nextTick(() => autoOfferListScroll());
+                }
+            });
+        };
+
+        let offerTimer = null;
+
+        // offer list 滚动
+        const autoOfferListScroll = () => {
+            if (typeof ScrollText !== "function") {
+                setTimeout(() => autoOfferListScroll(), 500);
+                return;
+            }
+            var scrollup = new ScrollText("offer-box");
+            scrollup.LineHeight = 56.5;
+            scrollup.Amount = 1;
+            scrollup.Delay = 1;
+            scrollup.Start();
+            scrollup.Direction = "up";
+        };
+
+        // 鼠标移入
+        const offerMouseover = (event) => {
+            if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) clearInterval(offerTimer);
+        };
+
+        // 鼠标移出
+        const offerMouseout = (event) => {
+            if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) autoOfferListScroll();
+        };
+
+        const popList = [
+            {
+                title: "26FALL",
+                subtitle: "申请群",
+            },
+            {
+                title: "申请求助",
+                subtitle: "寄托院校君",
+            },
+            {
+                title: "香港租房",
+                subtitle: "交流群",
+            },
+            {
+                title: "香港租房顾问",
+                subtitle: "寄托方同学",
+            },
+        ];
+
+        let sectionList = ref([]);
+        const getSectionList = () => {
+            ajaxget("/v2/api/forum/getSectionList").then((res) => {
+                if (res.code != 200) return;
+                const data = res.data || [];
+                let obj = {};
+                data.forEach((element) => (obj[element.cid] = element));
+                sectionList.value = groupByCid(data);
+            });
+        };
+
+        const groupByCid = (arr) => {
+            const groups = arr.reduce((acc, item) => {
+                const cid = item.cid ?? "default"; // 若 cid 不存在，归为 'default' 组
+                if (!acc[cid]) {
+                    acc[cid] = [];
+                }
+                acc[cid].push(item);
+                return acc;
+            }, {});
+
+            return Object.values(groups);
+        };
+
+        let loading = false;
+        let page = ref(1);
+        let list = ref([]);
+        const getList = () => {
+            if (loading || page.value == 0) return;
+            loading = true;
+            // wx.showLoading();
+            ajaxget(`/v2/api/forum/topicLists?type=thread&page=${page.value || 1}`)
+                .then((res) => {
+                    // wx.hideLoading();
+                    if (res.code != 200) return;
+                    let data = res.data;
+                    list.value = list.value.concat(data.data);
+                    page.value = data.count > data.limit * data.page ? page.value + 1 : 0;
+
+                    loading = false;
+                })
+                .catch((err) => {
+                    // wx.hideLoading();
+                    err = err.data;
+                    if (err.code == 401) goLogin();
+                    loading = false;
+                });
+        };
+
+        return { interviewexperience, vote, offer, topicHandpickedList, list, sectionList, popList, custom_2AdvRef, ongoingbj, pastList, offerMouseover, offerMouseout, offerlist, offerListRef };
     },
-}).mount("#appIndex");
+});
+
+appIndex.component("headTop", headTop);
+appIndex.component("itemForum", itemForum);
+
+appIndex.mount("#appIndex");
diff --git a/js/save.js b/js/save.js
index c85fad8..45171cf 100644
--- a/js/save.js
+++ b/js/save.js
@@ -27,6 +27,8 @@ const watchList = {
     "../component/head-top/head-top.txt": "../component/head-top/head-top.js",
     // 监听 hot-tag.txt，同步到 hot-tag.js
     "../component/hot-tag/hot-tag.txt": "../component/hot-tag/hot-tag.js",
+    // 监听 hot-search.txt，同步到 hot-search.js
+    "../component/hot-search/hot-search.txt": "../component/hot-search/hot-search.js",
     
     // 可添加更多文件（格式：'txt路径': 'js路径'）
     // './component/other/other.txt': './component/other/other.js',
diff --git a/js/scrolltext.js b/js/scrolltext.js
new file mode 100644
index 0000000..1cd6749
--- /dev/null
+++ b/js/scrolltext.js
@@ -0,0 +1,95 @@
+function ScrollText(content, btnPrevious, btnNext, autoStart) {
+    this.Delay = 10;
+    this.LineHeight = 20;
+    this.Amount = 1; //注意:LineHeight一定要能整除Amount.
+    this.Direction = "up";
+    this.Timeout = 1500;
+    this.ScrollContent = this.$(content);
+    this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;
+    //this.ScrollContent.scrollTop = 0;
+    if (btnNext) {
+        this.NextButton = this.$(btnNext);
+        this.NextButton.onclick = this.GetFunction(this, "Next");
+        this.NextButton.onmouseover = this.GetFunction(this, "Stop");
+        this.NextButton.onmouseout = this.GetFunction(this, "Start");
+    }
+    if (btnPrevious) {
+        this.PreviousButton = this.$(btnPrevious);
+        this.PreviousButton.onclick = this.GetFunction(this, "Previous");
+        this.PreviousButton.onmouseover = this.GetFunction(this, "Stop");
+        this.PreviousButton.onmouseout = this.GetFunction(this, "Start");
+    }
+    this.ScrollContent.onmouseover = this.GetFunction(this, "Stop");
+    this.ScrollContent.onmouseout = this.GetFunction(this, "Start");
+    if (autoStart) {
+        this.Start();
+    }
+}
+
+ScrollText.prototype.$ = function (element) {
+    return document.getElementById(element);
+}
+
+ScrollText.prototype.Previous = function () {
+    clearTimeout(this.AutoScrollTimer);
+    clearTimeout(this.ScrollTimer);
+    this.Scroll("up");
+}
+
+ScrollText.prototype.Next = function () {
+    clearTimeout(this.AutoScrollTimer);
+    clearTimeout(this.ScrollTimer);
+    this.Scroll("down");
+}
+
+ScrollText.prototype.Start = function () {
+    clearTimeout(this.AutoScrollTimer);
+    this.AutoScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Timeout);
+}
+
+ScrollText.prototype.Stop = function () {
+    clearTimeout(this.ScrollTimer);
+    clearTimeout(this.AutoScrollTimer);
+}
+
+ScrollText.prototype.AutoScroll = function () {
+    if (this.Direction == "up") {
+        if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) {
+            this.ScrollContent.scrollTop = 0;
+        }
+        this.ScrollContent.scrollTop += this.Amount;
+    } else {
+        if (parseInt(this.ScrollContent.scrollTop) <= 0) {
+            this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;
+        }
+        this.ScrollContent.scrollTop -= this.Amount;
+    }
+    if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) {
+        this.ScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Delay);
+    } else {
+        this.AutoScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Timeout);
+    }
+}
+
+ScrollText.prototype.Scroll = function (direction) {
+    if (direction == "up") {
+        if (this.ScrollContent.scrollTop == 0) {
+            this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;
+        }
+        this.ScrollContent.scrollTop -= this.Amount;
+    } else {
+        this.ScrollContent.scrollTop += this.Amount;
+    }
+    if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) {
+        this.ScrollContent.scrollTop = 0;
+    }
+    if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) {
+        this.ScrollTimer = setTimeout(this.GetFunction(this, "Scroll", direction), this.Delay);
+    }
+}
+
+ScrollText.prototype.GetFunction = function (variable, method, param) {
+    return function () {
+        variable[method](param);
+    }
+}
\ No newline at end of file
diff --git a/js/search-tag.js b/js/search-tag.js
new file mode 100644
index 0000000..60445f4
--- /dev/null
+++ b/js/search-tag.js
@@ -0,0 +1,225 @@
+const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
+import { itemForum } from "../component/item-forum/item-forum.js";
+import { itemOffer } from "../component/item-offer/item-offer.js";
+import { itemSummary } from "../component/item-summary/item-summary.js";
+import { itemVote } from "../component/item-vote/item-vote.js";
+import { itemMj } from "../component/item-mj/item-mj.js";
+import { itemTenement } from "../component/item-tenement/item-tenement.js";
+import { headTop } from "../component/head-top/head-top.js";
+import { hotTag } from "../component/hot-tag/hot-tag.js";
+import { hotSearch } from "../component/hot-search/hot-search.js";
+import { slideshowBox } from "../component/slideshow-box/slideshow-box.js";
+import { latestList } from "../component/latest-list/latest-list.js";
+
+const appSearch = createApp({
+    setup() {
+        let tag = ref("");
+        onMounted(() => {
+            const params = getUrlParams();
+            tag.value = params.tag || "";
+            init();
+
+            getUserInfoWin();
+            setTimeout(() => (permissions.value = window["permissions"] || ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"]), 1000);
+        });
+
+        let isLogin = ref(true);
+        let realname = ref(1); // 是否已经实名
+        let userInfoWin = ref({
+            authority: ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"],
+            avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/middle?random=1761733169",
+            groupid: 3,
+            nickname: "肖荣豪",
+            realname: 1,
+            token: "01346a38444d71aaadb3adad52b52c39",
+            uid: 500144,
+            uin: 4238049,
+        });
+
+        let permissions = ref([]);
+
+        const getUserInfoWin = () => {
+            const checkUser = () => {
+                const user = window.userInfoWin;
+                if (!user) return;
+                document.removeEventListener("getUser", checkUser);
+                realname.value = user.realname;
+                userInfoWin.value = user;
+                if (user?.uin > 0 || user?.uid > 0) isLogin.value = true;
+                permissions.value = user?.authority || [];
+            };
+            document.addEventListener("getUser", checkUser);
+        };
+
+        const openAttest = () => {
+            const handleAttestClose = () => {
+                document.removeEventListener("closeAttest", handleAttestClose);
+                realname.value = window.userInfoWin?.realname || 0;
+            };
+            // 启动认证流程时添加监听
+            document.addEventListener("closeAttest", handleAttestClose);
+            loadAttest(2);
+        };
+
+        // 跳转登录
+        const goLogin = () => {
+            if (typeof window === "undefined") return;
+            if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
+                if (window["userInfoWin"]["uid"]) isLogin.value = true;
+                else ajax_login();
+            } else ajax_login();
+        };
+
+        provide("isLogin", isLogin);
+        provide("userInfoWin", userInfoWin);
+        provide("realname", realname);
+        provide("openAttest", openAttest);
+        provide("goLogin", goLogin);
+
+        const cutTab = (type) => {
+            if (tabValue.value == type) return;
+            page.value = 1;
+            list.value = [];
+            count.value = 0;
+            tabValue.value = type;
+            pagination.value = []
+
+            getList();
+        };
+
+        let tabList = ref({
+            all: "全部",
+            thread: "论坛",
+            offer: "Offer",
+            offer_summary: "总结",
+            interviewexperience: "面经",
+            vote: "投票",
+        });
+
+        let tabValue = ref("all");
+
+        let uniqid = "";
+        const init = () => {
+            ajaxget(`/v2/api/forum/tagDetails?name=${tag.value}`).then((res) => {
+                if (res.code != 200) {
+                    creationAlertBox("error", res.message);
+                    page.value = 0;
+                    return;
+                }
+                const data = res.data;
+                uniqid = data.uniqid;
+                page.value = 1;
+                getList();
+            });
+        };
+
+        let loading = false;
+        let page = ref(0);
+        let maxPage = ref(0);
+        let count = ref(0);
+        let list = ref([]);
+        let pagination = ref([]);
+        const getList = () => {
+            if (loading || page.value == null) return;
+            loading = true;
+            // page.value += 1;
+            // wx.showLoading();
+            const limit = 20;
+            ajaxget(`https://api.gter.net/v2/api/forum/topicLists?type=${tabValue.value == "all" ? "" : tabValue.value}&page=${page.value}&limit=${limit}`)
+                .then((res) => {
+                    // wx.hideLoading();
+                    if (res.code != 200) {
+                        creationAlertBox("error", res.message);
+                        return;
+                    }
+
+                    let data = res.data;
+                    list.value = data.data;
+                    // page.value = data.count > limit * data.page ? page.value : null;
+                    count.value = data.count;
+                    loading = false;
+                    maxPage.value = Math.ceil(count.value / limit);
+                    pagination.value = calculatePagination(page.value, maxPage.value);
+                })
+                .catch((err) => {
+                    // wx.hideLoading();
+                    err = err.data;
+                    if (err.code == 401) goLogin();
+                    loading = false;
+                });
+        };
+
+        const calculatePagination = (currentPage, totalPages, visibleCount = 3) => {
+            // 处理特殊情况：总页数小于等于1时，无需显示分页
+            if (totalPages <= 1) {
+                return [];
+            }
+
+            const pages = [];
+            // 始终显示第一页
+            pages.push(1);
+
+            // 计算中间需要显示的页码范围
+            let startPage = Math.max(2, currentPage - Math.floor(visibleCount / 2));
+            let endPage = Math.min(totalPages - 1, startPage + visibleCount - 1);
+
+            // 调整起始页码，确保显示足够数量的页码
+            startPage = Math.max(2, endPage - visibleCount + 1);
+
+            // 前面的省略号：如果第一页和起始页之间有间隔
+            if (startPage > 2) {
+                pages.push("...");
+            }
+
+            // 添加中间的页码
+            for (let i = startPage; i <= endPage; i++) {
+                pages.push(i);
+            }
+
+            // 后面的省略号：如果最后一页和结束页之间有间隔
+            if (endPage < totalPages - 1) {
+                pages.push("...");
+            }
+
+            // 始终显示最后一页（如果总页数大于1）
+            if (totalPages > 1) {
+                pages.push(totalPages);
+            }
+
+            return pages;
+        };
+
+        const cutPage = (value) => {
+            if (value == "...") return;
+            if (value == page.value) return;
+            page.value = value;
+            getList();
+        };
+
+        const prevPage = () => {
+            page.value -= 1;
+            pagination.value = []
+            getList();
+        };
+
+        const nextPage = () => {
+            page.value += 1;
+            pagination.value = []
+            getList();
+        };
+
+        return { maxPage, prevPage, nextPage, tag, tabValue, cutTab, tabList, count, list, page, pagination, cutPage };
+    },
+});
+appSearch.component("item-forum", itemForum);
+appSearch.component("itemOffer", itemOffer);
+appSearch.component("itemSummary", itemSummary);
+appSearch.component("itemVote", itemVote);
+appSearch.component("itemMj", itemMj);
+appSearch.component("itemTenement", itemTenement);
+appSearch.component("head-top", headTop);
+appSearch.component("hot-tag", hotTag);
+appSearch.component("hot-search", hotSearch);
+appSearch.component("slideshow-box", slideshowBox);
+appSearch.component("latest-list", latestList);
+appSearch.mount("#search-tag");
diff --git a/js/search.js b/js/search.js
index 26a1102..a761486 100644
--- a/js/search.js
+++ b/js/search.js
@@ -1,54 +1,90 @@
 const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
 import { itemForum } from "../component/item-forum/item-forum.js";
+import { itemOffer } from "../component/item-offer/item-offer.js";
+import { itemSummary } from "../component/item-summary/item-summary.js";
+import { itemVote } from "../component/item-vote/item-vote.js";
+import { itemMj } from "../component/item-mj/item-mj.js";
+import { itemTenement } from "../component/item-tenement/item-tenement.js";
 import { headTop } from "../component/head-top/head-top.js";
 import { hotTag } from "../component/hot-tag/hot-tag.js";
+import { hotSearch } from "../component/hot-search/hot-search.js";
+import { slideshowBox } from "../component/slideshow-box/slideshow-box.js";
+import { latestList } from "../component/latest-list/latest-list.js";
 
 const appSearch = createApp({
     setup() {
+        let kw = ref("");
         onMounted(() => {
             const params = getUrlParams();
-            const id = params.section || "";
+            kw.value = params.kw || "";
+            getList();
 
-            // init();
+            getUserInfoWin();
+            setTimeout(() => (permissions.value = window["permissions"] || ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"]), 1000);
         });
 
-        const classifyList = ref([
-            {
-                text: "全部",
-                type: "",
-            },
-            {
-                text: "帖子",
-                type: "thread",
-            },
-            {
-                text: "Offer",
-                type: "offer",
-            },
-            {
-                text: "总结",
-                type: "offer_summary",
-            },
-            {
-                text: "面经",
-                type: "interviewexperience",
-            },
-            {
-                text: "投票",
-                type: "vote",
-            },
-            {
-                text: "租房",
-                type: "tenement",
-            },
-        ]);
+        let isLogin = ref(true);
+        let realname = ref(1); // 是否已经实名
+        let userInfoWin = ref({
+            authority: ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"],
+            avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/middle?random=1761733169",
+            groupid: 3,
+            nickname: "肖荣豪",
+            realname: 1,
+            token: "01346a38444d71aaadb3adad52b52c39",
+            uid: 500144,
+            uin: 4238049,
+        });
 
-        let classify = ref("");
+        let permissions = ref([]);
 
-        const classifyChange = (type) => {
-            if (classify.value == type) return;
+        const getUserInfoWin = () => {
+            const checkUser = () => {
+                const user = window.userInfoWin;
+                if (!user) return;
+                document.removeEventListener("getUser", checkUser);
+                realname.value = user.realname;
+                userInfoWin.value = user;
+                if (user?.uin > 0 || user?.uid > 0) isLogin.value = true;
+                permissions.value = user?.authority || [];
+            };
+            document.addEventListener("getUser", checkUser);
+        };
 
-            classify.value = type;
+        const openAttest = () => {
+            const handleAttestClose = () => {
+                document.removeEventListener("closeAttest", handleAttestClose);
+                realname.value = window.userInfoWin?.realname || 0;
+            };
+            // 启动认证流程时添加监听
+            document.addEventListener("closeAttest", handleAttestClose);
+            loadAttest(2);
+        };
+
+        // 跳转登录
+        const goLogin = () => {
+            if (typeof window === "undefined") return;
+            if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
+                if (window["userInfoWin"]["uid"]) isLogin.value = true;
+                else ajax_login();
+            } else ajax_login();
+        };
+
+        provide("isLogin", isLogin);
+        provide("userInfoWin", userInfoWin);
+        provide("realname", realname);
+        provide("openAttest", openAttest);
+        provide("goLogin", goLogin);
+
+        const cutTab = (type) => {
+            if (tabValue.value == type) return;
+            page.value = 1;
+            list.value = [];
+            count.value = 0;
+            tabValue.value = type;
+            pagination.value = [];
+
+            getList();
         };
 
         let tabList = ref({
@@ -62,10 +98,138 @@ const appSearch = createApp({
 
         let tabValue = ref("all");
 
-        return { tabValue, tabList, classifyChange, classifyList, classify };
+        let uniqid = "";
+        const init = () => {
+            ajaxget(`https://offer.gter.net/miniprogramApi/offer/search`).then((res) => {
+                if (res.code != 200) {
+                    creationAlertBox("error", res.message);
+                    page.value = 0;
+                    return;
+                }
+                console.log("res", res);
+            });
+        };
+
+        let loading = false;
+        let page = ref(0);
+        let maxPage = ref(0);
+        let count = ref(0);
+        let list = ref([]);
+        let pagination = ref([]);
+        const getList = () => {
+            if (loading || page.value == null) return;
+            loading = true;
+            const limit = 20;
+            ajaxget(`/v2/api/forum/topicLists?type=${tabValue.value == "all" ? "" : tabValue.value}&page=${page.value}&limit=${limit}&keyword=${kw.value}`)
+                .then((res) => {
+                    // wx.hideLoading();
+                    if (res.code != 200) {
+                        creationAlertBox("error", res.message);
+                        return;
+                    }
+
+                    let data = res.data;
+                    list.value = data.data;
+                    // page.value = data.count > limit * data.page ? page.value : null;
+                    if (data.count <= limit * data.page) page.value = null
+                    
+                    count.value = data.count;
+                    loading = false;
+                    maxPage.value = Math.ceil(count.value / limit);
+                    pagination.value = calculatePagination(page.value, maxPage.value);
+                })
+                .catch((err) => {
+                    // wx.hideLoading();
+                    err = err.data;
+                    if (err.code == 401) goLogin();
+                    loading = false;
+                });
+        };
+
+        const calculatePagination = (currentPage, totalPages, visibleCount = 3) => {
+            // 处理特殊情况：总页数小于等于1时，无需显示分页
+            if (totalPages <= 1) {
+                return [];
+            }
+
+            const pages = [];
+            // 始终显示第一页
+            pages.push(1);
+
+            // 计算中间需要显示的页码范围
+            let startPage = Math.max(2, currentPage - Math.floor(visibleCount / 2));
+            let endPage = Math.min(totalPages - 1, startPage + visibleCount - 1);
+
+            // 调整起始页码，确保显示足够数量的页码
+            startPage = Math.max(2, endPage - visibleCount + 1);
+
+            // 前面的省略号：如果第一页和起始页之间有间隔
+            if (startPage > 2) {
+                pages.push("...");
+            }
+
+            // 添加中间的页码
+            for (let i = startPage; i <= endPage; i++) {
+                pages.push(i);
+            }
+
+            // 后面的省略号：如果最后一页和结束页之间有间隔
+            if (endPage < totalPages - 1) {
+                pages.push("...");
+            }
+
+            // 始终显示最后一页（如果总页数大于1）
+            if (totalPages > 1) {
+                pages.push(totalPages);
+            }
+
+            return pages;
+        };
+
+        const cutPage = (value) => {
+            if (value == "...") return;
+            if (value == page.value) return;
+            page.value = value;
+            getList();
+        };
+
+        const prevPage = () => {
+            page.value -= 1;
+            pagination.value = [];
+            getList();
+        };
+
+        const nextPage = () => {
+            page.value += 1;
+            pagination.value = [];
+            getList();
+        };
+
+        const startSearch = () => {
+            if (kw.value == "") {
+                creationAlertBox("error", "请输入搜索关键词");
+                return;
+            }
+
+            page.value = 1;
+            list.value = [];
+            count.value = 0;
+            pagination.value = [];
+            getList();
+        };
+
+        return { startSearch, kw, maxPage, prevPage, nextPage, tabValue, cutTab, tabList, count, list, page, pagination, cutPage };
     },
 });
 appSearch.component("item-forum", itemForum);
+appSearch.component("itemOffer", itemOffer);
+appSearch.component("itemSummary", itemSummary);
+appSearch.component("itemVote", itemVote);
+appSearch.component("itemMj", itemMj);
+appSearch.component("itemTenement", itemTenement);
 appSearch.component("head-top", headTop);
 appSearch.component("hot-tag", hotTag);
+appSearch.component("hot-search", hotSearch);
+appSearch.component("slideshow-box", slideshowBox);
+appSearch.component("latest-list", latestList);
 appSearch.mount("#search");
diff --git a/js/section-index.js b/js/section-index.js
index d0d109f..7157d1a 100644
--- a/js/section-index.js
+++ b/js/section-index.js
@@ -15,7 +15,6 @@ const appSectionIndex = createApp({
 
             getSectionList();
 
-            init();
             handpick();
             getTags();
             getList();
@@ -169,7 +168,7 @@ const appSectionIndex = createApp({
         const goLogin = () => {
             if (typeof window === "undefined") return;
             if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
-                if (window["userInfoWin"]["uid"]) isNeedLogin.value = false;
+                if (window["userInfoWin"]["uid"]) isLogin.value = true;
                 else ajax_login();
             } else ajax_login();
         };
diff --git a/search-tag.html b/search-tag.html
new file mode 100644
index 0000000..4306ae3
--- /dev/null
+++ b/search-tag.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>标签搜索</title>
+    <link rel="stylesheet" href="./css/public.css" />
+    <link rel="stylesheet" href="./css/search-tag.css" />
+    <script src="./js/vue.global.js"></script>
+    <style scoped>
+        [v-cloak] {
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container" id="search-tag" v-cloak>
+        <head-top></head-top>
+        <div class="label-title flexacenter">
+            <img class="icon" src="./img/well-number.svg" />
+            <div class="text">{{ tag }}</div>
+        </div>
+
+        <div class="classify flexacenter">
+            <div class="item" :class="{'pitch': key == tabValue}" v-for="(item, key) in tabList" :key="key" @click="cutTab(key)">{{ item }}</div>
+        </div>
+
+        <div class="quantity flexacenter">
+            {{ tabList[tabValue] }}
+            <div class="line"></div>
+            共
+            <div class="num">{{ count }}</div>
+            条
+        </div>
+
+        <div class="matter flexflex">
+            <div class="matter-content flex1">
+                <div class="list-box" v-if="list.length != 0">
+                    <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-forum v-else :itemdata="item"></item-forum>
+                    </template>
+                </div>
+
+                <div v-if="list.length == 0 && page == null" class="empty flexcenter">
+                    <img class="empty-icon" src="./img/empty-icon.png" />
+                    <div class="empty-text">- 暂无内容 -</div>
+                </div>
+
+                <div class="pages-box flexcenter" v-if="pagination.length != 0">
+                    <img v-if="page == 1" class="arrows" src="./img/arrows-gray-simple.svg" alt="">
+                    <img @click="prevPage" v-else class="arrows rotate180" src="./img/arrows-gray-deep.svg" alt="">
+
+                    <div class="item" :class="{'pitch': item == page }" v-for="(item, index) in pagination" @click="cutPage(item)">{{ item }}</div>
+
+                    <img v-if="page == maxPage" class="arrows rotate180" src="./img/arrows-gray-simple.svg" alt="">
+                    <img @click="nextPage" v-else v-else class="arrows" src="./img/arrows-gray-deep.svg" alt="">
+                </div>
+            </div>
+            <div class="sidebar-box">
+                <hot-tag></hot-tag>
+                <hot-search></hot-search>
+                <slideshow-box></slideshow-box>
+                <latest-list></latest-list>
+            </div>
+        </div>
+    </div>
+
+    <script src="./js/axios.min.js"></script>
+    <script src="./js/public.js"></script>
+    <script type="module" src="./js/search-tag.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/search.html b/search.html
index e295c65..5afe047 100644
--- a/search.html
+++ b/search.html
@@ -1,49 +1,83 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>搜索</title>
-        <link rel="stylesheet" href="./css/public.css" />
-        <link rel="stylesheet" href="./css/search.css" />
-        <script src="./js/vue.global.js"></script>
-        <style scoped>
-            [v-cloak] {
-                display: none;
-            }
-        </style>
-    </head>
 
-    <body>
-        <div class="container" id="search" v-cloak>
-            <head-top></head-top>
-            <div class="label-title flexacenter">
-                <img class="icon" src="./img/well-number.svg" />
-                <div class="text">香港</div>
-            </div>
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>搜索</title>
+    <link rel="stylesheet" href="./css/public.css" />
+    <link rel="stylesheet" href="./css/search.css" />
+    <script src="./js/vue.global.js"></script>
+    <style >
+        [v-cloak] {
+            display: none;
+        }
+    </style>
+</head>
 
-            <div class="classify flexacenter">
-                <div class="item" :class="{'pitch': item.type == classify}" v-for="item in classifyList" :key="item.type" @click="classifyChange(item.type)">{{ item.text }}</div>
-            </div>
-
-            <div class="quantity flexacenter">
-                {{ tabList[tabValue] }}
-                <div class="line"></div>
-                共
-                <div class="num">{{ count }}</div>
-                条
-            </div>
-
-            <div class="matter flexflex">
-                <div class="matter-content flex1"></div>
-                <div class="sidebar-box">
-                    <hot-tag></hot-tag>
-                </div>
-            </div>
+<body>
+    <div class="container" id="search" v-cloak>
+        <div class="head-top flexacenter">
+            <img class="logo" src="https://oss.gter.net/logo" alt="" />
+            <div class="flex1"></div>
+        </div>
+        <div class="search-box flexacenter">
+            <input class="search-input flex1" placeholder="请输入搜索关键词" v-model="kw" @keyup.enter="startSearch">
+            <img class="search-icon" src="./img/search-icon.svg" alt="" @click="startSearch">
         </div>
 
-        <script src="./js/axios.min.js"></script>
-        <script src="./js/public.js"></script>
-        <script type="module" src="./js/search.js"></script>
-    </body>
-</html>
+        <div class="classify flexacenter">
+            <div class="item" :class="{'pitch': key == tabValue}" v-for="(item, key) in tabList" :key="key" @click="cutTab(key)">{{ item }}</div>
+        </div>
+
+        <div class="quantity flexacenter">
+            {{ tabList[tabValue] }}
+            <div class="line"></div>
+            共
+            <div class="num">{{ count }}</div>
+            条
+        </div>
+
+        <div class="matter flexflex">
+            <div class="matter-content flex1">
+                <div class="list-box" v-if="list.length != 0">
+                    <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-forum v-else :itemdata="item"></item-forum>
+                    </template>
+                </div>
+
+                <div v-if="list.length == 0 && page == null" class="empty flexcenter">
+                    <img class="empty-icon" src="./img/empty-icon.png" />
+                    <div class="empty-text">- 暂无内容 -</div>
+                </div>
+
+                <div class="pages-box flexcenter" v-if="pagination.length != 0">
+                    <img v-if="page == 1" class="arrows" src="./img/arrows-gray-simple.svg" alt="">
+                    <img @click="prevPage" v-else class="arrows rotate180" src="./img/arrows-gray-deep.svg" alt="">
+
+                    <div class="item" :class="{'pitch': item == page }" v-for="(item, index) in pagination" @click="cutPage(item)">{{ item }}</div>
+
+                    <img v-if="page == maxPage" class="arrows rotate180" src="./img/arrows-gray-simple.svg" alt="">
+                    <img @click="nextPage" v-else v-else class="arrows" src="./img/arrows-gray-deep.svg" alt="">
+                </div>
+            </div>
+            <div class="sidebar-box">
+                <hot-search></hot-search>
+                <hot-tag></hot-tag>
+                <slideshow-box></slideshow-box>
+                <latest-list></latest-list>
+            </div>
+        </div>
+    </div>
+
+    <script src="./js/axios.min.js"></script>
+    <script src="./js/public.js"></script>
+    <script type="module" src="./js/search.js"></script>
+</body>
+
+</html>
\ No newline at end of file