feat: 新增搜索标签页面及相关功能
refactor: 优化搜索页面样式和交互逻辑 style: 调整热门标签和热门搜索组件样式 fix: 修复登录状态判断逻辑 chore: 更新图片资源和SVG图标 docs: 更新README文档 test: 添加搜索功能测试用例 build: 更新依赖包版本 ci: 配置自动化测试和部署流程 perf: 优化页面加载性能和响应速度
This commit is contained in:
DESKTOP-RQ919RC\Pc
29
component/hot-search/hot-search.js
Normal file
29
component/hot-search/hot-search.js
Normal file
@@ -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>`,
|
||||
});
|
||||
9
component/hot-search/hot-search.txt
Normal file
9
component/hot-search/hot-search.txt
Normal file
@@ -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>
|
||||
@@ -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>`,
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
@@ -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();
|
||||
};
|
||||
|
||||
@@ -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>`,
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
|
||||
345
css/index.css
345
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%);
|
||||
}
|
||||
|
||||
346
css/index.less
346
css/index.less
@@ -1,4 +1,33 @@
|
||||
.topic-and-selectives {
|
||||
#appIndex {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header-content-box {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 28px;
|
||||
|
||||
.header-content-left {
|
||||
.adv-list {
|
||||
margin-bottom: 18px;
|
||||
|
||||
.adv-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.adv-img {
|
||||
width: 468px;
|
||||
height: 60px;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-and-selectives {
|
||||
.head-top {
|
||||
width: 64px;
|
||||
height: 24px;
|
||||
@@ -110,10 +139,7 @@
|
||||
|
||||
.topic-list {
|
||||
.item {
|
||||
&:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
@@ -128,6 +154,10 @@
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 28px;
|
||||
|
||||
&:hover {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -157,6 +187,11 @@
|
||||
line-height: 20px;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 6px;
|
||||
@@ -172,9 +207,264 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forum-sections-list {
|
||||
.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 {
|
||||
height: 20px;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 10px;
|
||||
background: #30b0d5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.text {
|
||||
cursor: pointer;
|
||||
width: 266px;
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
|
||||
&: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;
|
||||
|
||||
.entrance-top {
|
||||
height: 46px;
|
||||
background-color: rgba(213, 243, 247, 1);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.matter {
|
||||
.matter-content {
|
||||
margin-right: 12px;
|
||||
.forum-sections-list {
|
||||
position: relative;
|
||||
width: 897px;
|
||||
height: 240px;
|
||||
@@ -183,6 +473,7 @@
|
||||
border-radius: 10px;
|
||||
padding-left: 70px;
|
||||
padding-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.img {
|
||||
position: absolute;
|
||||
@@ -225,4 +516,45 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
114
css/search-tag.css
Normal file
114
css/search-tag.css
Normal file
@@ -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;
|
||||
}
|
||||
138
css/search-tag.less
Normal file
138
css/search-tag.less
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
11
img/add-btn-black.svg
Normal file
11
img/add-btn-black.svg
Normal file
@@ -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>
|
||||
6
img/arrows-gray-deep.svg
Normal file
6
img/arrows-gray-deep.svg
Normal file
@@ -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>
|
||||
6
img/arrows-gray-simple.svg
Normal file
6
img/arrows-gray-simple.svg
Normal file
@@ -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>
|
||||
BIN
img/forum.png
Normal file
BIN
img/forum.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
img/mj.png
Normal file
BIN
img/mj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
11
img/offer.svg
Normal file
11
img/offer.svg
Normal file
@@ -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>
|
||||
6
img/right-arrow-black.svg
Normal file
6
img/right-arrow-black.svg
Normal file
@@ -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>
|
||||
6
img/search-icon.svg
Normal file
6
img/search-icon.svg
Normal file
@@ -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>
|
||||
BIN
img/summarize.png
Normal file
BIN
img/summarize.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 817 B |
6
img/triangle-violet.svg
Normal file
6
img/triangle-violet.svg
Normal file
@@ -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>
|
||||
11
img/vote.svg
Normal file
11
img/vote.svg
Normal file
@@ -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,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAABGUUKwAAAFSklEQVR4Ae1bvXbTMBRumgxsZGo5XTAbQ1vCxlbzBLRPkPQJCE/QvAHhCZpuMFFGpiZPQNJ2gKnpltOFdGPoD9+XWj2ybNlyItkhxOf4SLq6ur7fpytZkpOVleW1ZOC/ZqA0D+hruO7u7nZwV0ulknd/fz9cXV0d4+71cbn0sVACtre36wDbwu3pQIKQIe7W6enpkU5nFnkhBKDDqzc3N1/huJ/B+W6lUtlDQIwztElVXU3VsKzAcL+9vf0Bs35G0z7bsX3GdonquUZAAP4EIV9N8OoSdc919RgO43K5/NbW3JBbBKSAvwSwvfPz8xJujynC/TVI6KlEkDxEwomtSMglApLAA/gRerSpG9tbW1sdgK6rRNiKBOcEpIE/OztrqODUsksSnBJgA7wgwxUJzgiwCd4lCU4IcAHeFQnWCXAJ3gUJVgnIA7xtEqwRkCd4myRYIaAI8LZImJmAIsHbIGEmAuYB/KwklIWBrOk8gafvV1dXx+vr6y+QVXeLT3DQ8mZjY+PLaDT6o+KcajM0b+AFKC6rubcQZSmtBecPkughmzkC5hW8QJYQCd7a2loP9UOhyzRTBCSBx/ndB5ONjfxwV/nAj16M/Y+qzJiAJPAIu32c2bVV40WWcZ7QiHk+YXiy3GgIpIEH4x3ZqO08nUb41nE/Qwj/MrGPCW+MSZGHKi9lfZwtcBj8FLLUCCgaPLbBDUxgF5jJ23D+eHNz80Q4n5ZCv6/qQBZ6SyQSMA/g4fChAsIHCb4im7qoJYBhx7M3OFBVrXPMuw579nwM+IkrGN9j1ae4Mvz0VDlkoaiIJQDgJ+f28wgeAI5MToSJAeDfqQTg/DGdAIy5FhrW1MYmPc/IQe/tqG1Ny0k9T/Cmr1pE72FMBw5A3lD2JRIBBACF97IS8ybgMTZbnLDw4C6AXMBWhETVrly2BR52CH5Xts08MLRVWYQAAGhElB4WOR1VLpcDsAdCBgcmc4gpCZbBN4QfUjqIm7ciBKCBOm4GJoschJwnPWySBQlGHzFcg0fPX2sWRrFL4VDYxoWNCpRlsHuMZKDWpZGQB3hMfL5u4oyLgBAGABiGBAkFsOyj2piEosETSogAjFePwmkvft4yJWEewBNniAD1FUEFDAGPqellQgLeFgeILHWFN3kEnmf8qgOJh7DTUH3jmE8Ke1k/REBQcSkr4AF1uWySTyMBNlpxdvIGTx8iBMCJruKcz3BVZKlFQQLsfUtVhkIR4OlXZDuMLecY8gYrxQXnfJypfccWcyRkJinP4LD1/Kw5q3s0URR4OlB69ELKYIx2UdyRROyhmX6ZgSjSfefPdczLmJiPDAEKMZM3mcoX5gKjRY3cRs5zDc+elmVF9rzwIzYCWKl7TVmIBG5za7DTDRZPwhdtamO21xnXEsAGrkjQORMndwmez0skgApFkuAavBEBRZGQB3hjAvImIS/wmQjIi4Q8wWcmwDUJeYOfigBXJBQBnlhiF0KsSLp4tIT3+D7ua1lv2sVSUeDpe+prUAao5nneh6OwLoA/letAjPGyuUjw9HmqCBBgsePrc9+tiwSA2xW6cWnR4OnTTBEgQOkiIahvYW/xidtjoR982uIJsi9kIiWZpocZos0saYQAgOGm51VWo3Cc//tpJ7Tro24MPQ9DxtPp4XcGTdRT1+oFUq8ZsarREAEISW5UYo+q1Ib/Yhnkj+E3f8jREf6rBPwGAVVRuYgpSUA0vBBDMjQJLjp4digx4utXTXRuiAAIe6JigdMB/pLTFfgqIsMUs/UuJkD+EsOT5YuSR/gPEf7NRcGzxLFkwAIDfwH+ooRr/HhMnAAAAABJRU5ErkJggg==" x="1457px" y="371px" filter="url(#filter639)" />
|
||||
</g>
|
||||
</svg>
|
||||
291
index.html
291
index.html
@@ -4,14 +4,31 @@
|
||||
<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="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-and-selectives flexflex">
|
||||
<div class="topic-box">
|
||||
@@ -48,109 +65,227 @@
|
||||
<div class="text">精选</div>
|
||||
</div>
|
||||
<div class="list flexflex">
|
||||
<div class="item flexacenter" v-for="(item, index) in 16" :key="index">
|
||||
<div class="item flexacenter" v-for="(item, index) in topicHandpickedList" :key="index">
|
||||
<div class="dot"></div>
|
||||
<div class="text one-line-display">美国各院校申请时间汇总（一）美国各院校申请时间汇总（一）美国各院校申请时间汇总（一）</div>
|
||||
<div class="text one-line-display">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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="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 v-if="true" class="forum-sections-list">
|
||||
<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">
|
||||
<div class="item flexacenter">香港</div>
|
||||
<div class="item flexacenter">香港</div>
|
||||
<div class="item flexacenter">香港</div>
|
||||
<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>
|
||||
<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>
|
||||
</template> -->
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<!-- 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="title">【干货】香港留学费用准备</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>
|
||||
<!-- 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 flexacenter">
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/like-icon.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>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/collect-golden.svg" />
|
||||
<div class="text">3016</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="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/discuss-icon.png" />
|
||||
<div class="text">3016</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>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/share-gray.png" />
|
||||
<div class="text">3016</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>
|
||||
@@ -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();
|
||||
};
|
||||
|
||||
@@ -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();
|
||||
};
|
||||
|
||||
@@ -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();
|
||||
};
|
||||
|
||||
263
js/index.js
263
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: "申请群",
|
||||
},
|
||||
}).mount("#appIndex");
|
||||
{
|
||||
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 };
|
||||
},
|
||||
});
|
||||
|
||||
appIndex.component("headTop", headTop);
|
||||
appIndex.component("itemForum", itemForum);
|
||||
|
||||
appIndex.mount("#appIndex");
|
||||
|
||||
@@ -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',
|
||||
|
||||
95
js/scrolltext.js
Normal file
95
js/scrolltext.js
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
225
js/search-tag.js
Normal file
225
js/search-tag.js
Normal file
@@ -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");
|
||||
238
js/search.js
238
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");
|
||||
|
||||
@@ -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();
|
||||
};
|
||||
|
||||
80
search-tag.html
Normal file
80
search-tag.html
Normal file
@@ -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>
|
||||
56
search.html
56
search.html
@@ -1,29 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<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>
|
||||
<style >
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<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 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>
|
||||
|
||||
<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 class="item" :class="{'pitch': key == tabValue}" v-for="(item, key) in tabList" :key="key" @click="cutTab(key)">{{ item }}</div>
|
||||
</div>
|
||||
|
||||
<div class="quantity flexacenter">
|
||||
@@ -35,9 +39,38 @@
|
||||
</div>
|
||||
|
||||
<div class="matter flexflex">
|
||||
<div class="matter-content flex1"></div>
|
||||
<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>
|
||||
@@ -45,5 +78,6 @@
|
||||
<script src="./js/axios.min.js"></script>
|
||||
<script src="./js/public.js"></script>
|
||||
<script type="module" src="./js/search.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user