40d83d5374
refactor: 重构CSS和LESS文件以支持响应式设计 fix: 修复图片上传和编辑器解析问题 style: 调整搜索框和日历组件的样式 docs: 更新HTML模板中的广告和操作链接
503 lines
26 KiB
HTML
503 lines
26 KiB
HTML
<!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/index.css" />
|
|
|
|
<script src="./js/vue.global.js"></script>
|
|
<script src="./component/bi/bi.js"></script>
|
|
<!-- <script src="./component/head-top-web/head-top-web.js"></script> -->
|
|
<style>
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container" id="appIndex">
|
|
<!-- <head-top page="index"></head-top> -->
|
|
|
|
<div class="header-content-box flexflex">
|
|
<div class="header-content-left">
|
|
<div class="adv-list flexacenter">
|
|
<div class="headerbanner adv-item">{:html_entity_decode($ad['headerbanner'])}</div>
|
|
<div class="subnavbanner adv-item">{:html_entity_decode($ad['subnavbanner'])}</div>
|
|
</div>
|
|
<!-- 话题和精选 -->
|
|
<div class="topic-and-selectives flexflex">
|
|
<div class="topic-box">
|
|
<div class="head-top flexcenter">
|
|
<img class="icon" src="https://app.gter.net/image/miniApp/offer/well-white.svg" />
|
|
<div class="text">话题</div>
|
|
</div>
|
|
<div class="topic-head flexflex">
|
|
<a class="title one-line-display vuehide" :href="'/details/' + ongoingbj.uniqid" target="_blank"></a>
|
|
<a class="title one-line-display" :href="'/details/' + ongoingbj.uniqid" target="_blank" v-cloak>{{ ongoingbj.title }}</a>
|
|
<a class="hint one-line-display" :href="'/details/' + ongoingbj.uniqid" target="_blank"></a>
|
|
<div class="people flexacenter">
|
|
<div class="left flexacenter">
|
|
<div class="number vuehide"></div>
|
|
<div class="number" v-cloak>{{ ongoingbj.comments }}</div>
|
|
<div class="text">人正在讨论</div>
|
|
</div>
|
|
<div class="right flexacenter">
|
|
<div class="item flexcenter" v-for="(item, index) in ongoingbj.commentUser" :key="index" :style="{zIndex: 7 - index }">
|
|
<img class="img" :src="item.avatar" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="topic-list">
|
|
<a class="item flexacenter" v-for="(item, index) in pastList" :key="index" :href="'/details/' + item.uniqid" target="_blank">
|
|
<img class="img" src="https://app.gter.net/image/miniApp/offer/well-yellow.svg" />
|
|
<div class="text one-line-display flex1" v-html="item.title"></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="selectives-box">
|
|
<div class="head-top flexcenter">
|
|
<img class="icon" src="https://app.gter.net/image/miniApp/offer/handpick-icon.png" />
|
|
<div class="text">精选</div>
|
|
</div>
|
|
<div class="list flexflex">
|
|
<a class="item flexacenter" v-for="(item, index) in topicHandpickedList" :key="index" :href="'/details/' + item.uniqid" target="_blank">
|
|
<div class="dot"></div>
|
|
<div class="text one-line-display" v-html="item.title"></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-left-bottom-box flexflex">
|
|
<a class="adv flexacenter" data-x-event="bbsindexslide" href="{$operation['bbsindexslide']['url']}" title="{$operation['bbsindexslide']['title']}" target="_blank">
|
|
<img class="adv-icon" src="{$operation['bbsindexslide']['image']}" alt="{$operation['bbsindexslide']['title']}" />
|
|
</a>
|
|
<div class="list">
|
|
{foreach :array_slice($operation['bbsindexarticle'],0,4) as $key=>$vo }
|
|
<div class="item flexacenter">
|
|
<div class="icon dot-gray"></div>
|
|
<a class="one-line-display text flex1" href="{$vo['url']}" target="_blank">{$vo['title']}</a>
|
|
</div>
|
|
{/foreach}
|
|
</div>
|
|
<div class="list list2">
|
|
{foreach :array_slice($operation['bbsindexarticle'],4,8) as $key=>$vo }
|
|
<div class="item flexacenter">
|
|
<div class="icon dot-gray"></div>
|
|
<a class="one-line-display text flex1" href="{$vo['url']}" target="_blank">{$vo['title']}</a>
|
|
</div>
|
|
{/foreach}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-content-right">
|
|
<div class="post-entrance">
|
|
<a class="entrance-top flexacenter" href="/publish" target="_blank" @click="handleCheckAttest"><img class="icon" src="./img/forum.png" />我要发帖</a>
|
|
<div class="entrance-bottom flexacenter">
|
|
<a class="item flexcenter" href="https://offer.gter.net/post" @click="handleCheckAttest" target="_blank">
|
|
<div class="icon-box">
|
|
<img class="icon" src="{@img/offer-icon-V2.svg}" />
|
|
</div>
|
|
<span class="text">报Offer</span>
|
|
</a>
|
|
<a class="item flexcenter" href="https://offer.gter.net/post/summary" @click="handleCheckAttest" target="_blank">
|
|
<div class="icon-box">
|
|
<img class="icon" src="{@img/summary-icon-V2.svg}" />
|
|
</div>
|
|
<span class="text">写总结</span>
|
|
</a>
|
|
<a class="item flexcenter" href="https://interviewexperience.gter.net/publish" @click="handleCheckAttest" target="_blank">
|
|
<div class="icon-box">
|
|
<img class="icon" src="{@img/mj-icon-V2.svg}" />
|
|
</div>
|
|
<span class="text">写面经</span>
|
|
</a>
|
|
<a class="item flexcenter" href="https://vote.gter.net/publish" @click="handleCheckAttest" target="_blank">
|
|
<div class="icon-box">
|
|
<img class="icon" src="{@img/vote-icon-V2.svg}" />
|
|
</div>
|
|
<span class="text">发起投票</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{if $ad['custom_2']}
|
|
<div class="custom_2 adv" ref="custom_2AdvRef">{:html_entity_decode($ad['custom_2'])}</div>
|
|
{/if}
|
|
<div class="group-box">
|
|
<div class="group flexflex">
|
|
<div class="group-item flexcenter">
|
|
<div class="title">26FALL</div>
|
|
<div class="subtitle">申请群</div>
|
|
<div class="QRcode-box flexcenter">
|
|
<img class="QRcode" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~" />
|
|
<div class="text">微信扫码</div>
|
|
</div>
|
|
</div>
|
|
<div class="group-item flexcenter">
|
|
<div class="title">申请求助</div>
|
|
<div class="subtitle">寄托院校君</div>
|
|
<div class="QRcode-box flexcenter">
|
|
<img class="QRcode" src="https://u.gter.net/assistantwxqrcode.png" />
|
|
<div class="text">微信扫码</div>
|
|
</div>
|
|
</div>
|
|
<div class="group-item flexcenter">
|
|
<div class="title">香港租房</div>
|
|
<div class="subtitle">交流群</div>
|
|
<div class="QRcode-box flexcenter">
|
|
<img class="QRcode" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~" />
|
|
<div class="text">微信扫码</div>
|
|
</div>
|
|
</div>
|
|
<div class="group-item flexcenter">
|
|
<div class="title">香港租房顾问</div>
|
|
<div class="subtitle">寄托方同学</div>
|
|
<div class="QRcode-box flexcenter">
|
|
<img class="QRcode" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_JkpcHnqqsgFptxhcq_cQnrlcaF2WQQQBq_D-81qNDQyOQ~~" />
|
|
<div class="text">微信扫码</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="offer-box" :class="{'big': !custom_2AdvRef}" id="offer-box" @mouseover="offerMouseover" @mouseout="offerMouseout">
|
|
<div class="offer-list" id="offer-list" ref="offerListRef" :style="{'margin-top': -offerMargin + 'px'}">
|
|
<a class="item flexflex" :href="item['url']" target="_blank" v-for="(item, index) in offerlist" :key="index">
|
|
<div class="avatar" :style="{backgroundImage: `url(${item.user['avatar']})`}"></div>
|
|
<div class="">
|
|
<div class="condition one-line-display" v-cloak style="height: 17px;">{{ item["date"] }} {{ item['type_label'] }}</div>
|
|
<div class="titletitle one-line-display" v-cloak style="height: 20px;">{{ item["content"] }}</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admission">
|
|
<a class="admission-header flexflex" target="_blank" href="https://admissionofficer.gter.net">
|
|
<img class="admission-header-icon" src="/img/admission-officer-icon.png">
|
|
<div class="admission-header-name flexflex">Hello Admission Officer</div>
|
|
</a>
|
|
<div class="admission-list flexflex">
|
|
{foreach $OfficerToEnrolNewStudents as $key=>$item}
|
|
<div class="admission-item flexcenter">
|
|
<a class="admission-img" href="{$item['url']}" target="_blank">
|
|
<img src="{$item['image']}" alt="{$item['name']}" />
|
|
</a>
|
|
</div>
|
|
{/foreach}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="matter flexflex" ref="matterRef">
|
|
<div class="matter-content flex1">
|
|
<!-- 论坛板块列表 -->
|
|
<div class="forum-sections-list">
|
|
<img class="img" src="{@img/sections-left.svg}" />
|
|
<div class="title">论坛版块</div>
|
|
<div class="list">
|
|
<template v-for="(item, index) in sectionList" :key="index">
|
|
<div class="line flexacenter">
|
|
<a class="item flexacenter" v-for="(item, index) in item" :key="index" target="_blank" :href="`/section/${item.uniqid}`">{{ item.name }}</a>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <item-forum :itemdata="item" v-for="(item, index) in list" :key="index"></item-forum> -->
|
|
|
|
<template v-for="(item,index) in list" :key="index">
|
|
<item-offer v-if=" item.type == 'offer'" :itemdata="item"></item-offer>
|
|
<item-summary v-else-if="item.type == 'offer_summary'" :itemdata="item"></item-summary>
|
|
<item-vote v-else-if="item.type == 'vote'" :itemdata="item"></item-vote>
|
|
<item-mj v-else-if="item.type == 'interviewexperience'" :itemdata="item"></item-mj>
|
|
<item-tenement v-else-if="item.type == 'tenement'" :itemdata="item"></item-tenement>
|
|
<item-project v-else-if="item.type == 'programs' || tabValue == 'xg'" :itemdata="item"></item-project>
|
|
<item-forum v-else :itemdata="item"></item-forum>
|
|
</template>
|
|
<load-box :loading="loading"></load-box>
|
|
</div>
|
|
<div class="sidebar" ref="sidebarRef" :style="{'top': sidebarHeight + 'px'}">
|
|
{if $ad['custom_1']} <div class="custom_1 ad-item">{:html_entity_decode($ad['custom_1'])}</div> {/if}
|
|
{if $ad['custom_3']} <div class="custom_3 ad-item">{:html_entity_decode($ad['custom_3'])}</div> {/if}
|
|
<!-- 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="{@img/offer-index-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="'/details/' + item['uniqid']" target="_blank">
|
|
<img class="school-img" :src="item.data['schoollogo']" />
|
|
<div class="school-detail flex1 flexflex">
|
|
<div class="school-name one-line-display vuehide"></div>
|
|
<div v-cloak class="school-name one-line-display">{{ item.data['schoolname'] }}</div>
|
|
<div class="school-brief one-line-display">{{ item.data['professional'] }}</div>
|
|
<div class="school-offer flexacenter">
|
|
<span>{{ item.data['degree'] }}</span>
|
|
<span class="long-string">|</span>
|
|
<span>{{ item.data['semester'] }}</span>
|
|
<span class="long-string">|</span>
|
|
<span>{{ item.data['apply_results_text'] }}</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a class="add-btn flexcenter" @click="handleCheckAttest" style="position: relative" href="https://offer.gter.net/post" target="_blank" v-cloak>
|
|
<img class="add-icon" src="{@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>
|
|
|
|
<!-- 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="{@img/vote-index-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="'/details/' + item['uniqid']">
|
|
<div class="name one-line-display">{{item['title']}}</div>
|
|
<div class="brief">{{ item['content'] }}</div>
|
|
</a>
|
|
<a class="add-btn flexcenter" @click="handleCheckAttest" style="position: relative" v-cloak target="_blank" href="https://vote.gter.net/publish">
|
|
<img class="add-icon" src="{@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>
|
|
|
|
<!-- 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="{@img/mj-index-icon.png}" />
|
|
<div class="title">面经</div>
|
|
</div>
|
|
<a class="more flexacenter" href="https://interviewexperience.gter.net/" target="_blank">
|
|
<span>more</span>
|
|
<img class="more-icon" src="{@img/right-arrow-black.svg}" />
|
|
</a>
|
|
</div>
|
|
<div class="box">
|
|
<a class="item flexflex" v-cloak v-for="(item,index) in interviewexperience" :key="item" :href="'/details/' + item['uniqid']" target="_blank">
|
|
<div class="school one-line-display">{{ item.data['schoolname'] }}</div>
|
|
<div class="major one-line-display">{{ item.data['profession'] || item.data['project'] }}</div>
|
|
<div class="info">
|
|
<img class="icon" :src="item.user['avatar']" />
|
|
<span class="text">{{ item['content'] }}</span>
|
|
</div>
|
|
</a>
|
|
<a class="add-btn flexcenter" @click="handleCheckAttest" style="position: relative" href="https://interviewexperience.gter.net/publish" target="_blank" v-cloak>
|
|
<img class="add-icon" src="{@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 最新 -->
|
|
<latest-list boxtype="newest"></latest-list>
|
|
<latest-list boxtype="essence"></latest-list>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<script>
|
|
if (location.href.indexOf('details') != -1) {
|
|
const postList = document.querySelector('.head-top .post-list')
|
|
postList.style.display = 'flex'
|
|
} else {
|
|
const signIn = document.querySelector('.head-top .sign-in')
|
|
signIn.style.display = 'flex'
|
|
|
|
|
|
let userInfoWinTimerCount = 0;
|
|
const userInfoWinTimer = setInterval(() => {
|
|
if (location.host == "127.0.0.1:5501") return;
|
|
|
|
if (todaysignedState) {
|
|
clearInterval(userInfoWinTimer);
|
|
|
|
if (todaysigned == 1) {
|
|
signIn.classList.add('sign-in-already')
|
|
signIn.classList.remove("sign-in-no");
|
|
}
|
|
}
|
|
userInfoWinTimerCount++;
|
|
if (userInfoWinTimerCount >= 3000) clearInterval(userInfoWinTimer);
|
|
}, 50);
|
|
|
|
}
|
|
|
|
function headSignIn() {
|
|
SignInComponent.initComponent();
|
|
}
|
|
|
|
const searchInput = document.querySelector('.head-top .input')
|
|
|
|
// 绑定 blur 和 focus 事件
|
|
if (searchInput) {
|
|
searchInput.addEventListener('blur', function () {
|
|
console.log('blur');
|
|
const historyBox = document.querySelector('.head-top .search-box-history')
|
|
if (historyBox) historyBox.style.display = 'none'
|
|
|
|
const inputBox = document.querySelector('.head-top .input-box')
|
|
if (inputBox) inputBox.classList.remove('pitch')
|
|
})
|
|
searchInput.addEventListener('focus', () => {
|
|
console.log('focus');
|
|
const historyBox = document.querySelector('.head-top .search-box-history')
|
|
if (historyBox) historyBox.style.display = 'block'
|
|
|
|
const inputBox = document.querySelector('.head-top .input-box')
|
|
if (inputBox) inputBox.classList.add('pitch')
|
|
})
|
|
// 绑定回车事件
|
|
searchInput.addEventListener('keydown', (e) => {
|
|
if (e.key == 'Enter') searchEvent()
|
|
|
|
})
|
|
}
|
|
|
|
|
|
let historySearchList = []
|
|
// 获取历史搜索
|
|
const getHistorySearch = () => {
|
|
const data = JSON.parse(localStorage.getItem("history-search")) || [];
|
|
console.log('历史搜索', data);
|
|
historySearchList = data;
|
|
|
|
let itemAll = ``
|
|
data.forEach((item, index) => {
|
|
itemAll += `<div class="search-box-history-item one-line-display" onclick="searchEvent('${item}')">${item}</div>` // 绑定事件 searchEvent 点击搜索
|
|
})
|
|
|
|
const historyList = document.querySelector('.search-box-history-list')
|
|
historyList.innerHTML = itemAll
|
|
};
|
|
|
|
getHistorySearch();
|
|
|
|
|
|
const searchEvent = (value) => {
|
|
const kw = value || searchInput.value || hotSearchWords[currentIndex]?.keyword || "";;
|
|
if (!kw) return;
|
|
historySearchList.unshift(kw);
|
|
historySearchList = [...new Set(historySearchList)];
|
|
if (historySearchList.length > 10) historySearchList = historySearchList.splice(0, 10);
|
|
localStorage.setItem("history-search", JSON.stringify(historySearchList));
|
|
redirectToExternalWebsite("/search/" + kw);
|
|
}
|
|
|
|
let hotSearchWords = [];
|
|
|
|
const renderingPlaceholder = () => {
|
|
console.log('hotSearchWords', hotSearchWords);
|
|
let itemAll = ``
|
|
hotSearchWords.forEach(item => {
|
|
itemAll += `<div class="item one-line-display" >大家都在搜：${item.keyword}</div>`
|
|
})
|
|
|
|
const sliceHotSearchWords = hotSearchWords.slice(0, 2)
|
|
sliceHotSearchWords.forEach(item => {
|
|
itemAll += `<div class="item one-line-display" >大家都在搜：${item.keyword}</div>`
|
|
})
|
|
|
|
const placeholderBox = document.querySelector('.placeholder .placeholder-box')
|
|
placeholderBox.innerHTML = itemAll
|
|
|
|
}
|
|
|
|
const checkWConfig = () => {
|
|
const wConfig = JSON.parse(localStorage.getItem("wConfig")) || {};
|
|
if (wConfig.time) {
|
|
const time = new Date(wConfig.time);
|
|
const now = new Date();
|
|
if (now - time > 24 * 60 * 60 * 1000) getWConfig();
|
|
else {
|
|
hotSearchWords = wConfig.hotSearchWords || [];
|
|
renderingPlaceholder()
|
|
}
|
|
} else getWConfig();
|
|
};
|
|
checkWConfig()
|
|
|
|
const getWConfig = () => {
|
|
ajaxGet("/v2/api/config/website").then((res) => {
|
|
if (res.code == 200) {
|
|
let data = res["data"] || {};
|
|
hotSearchWords = data.hotSearchWords || [];
|
|
renderingPlaceholder()
|
|
data.time = new Date().toISOString();
|
|
localStorage.setItem("wConfig", JSON.stringify(data));
|
|
}
|
|
});
|
|
};
|
|
|
|
const renderCurrentIndex = () => {
|
|
const placeholderBox = document.querySelector('.placeholder .placeholder-box')
|
|
if (placeholderBox) placeholderBox.style.transform = `translateY(${-currentIndex * 36}px)`
|
|
}
|
|
|
|
let currentIndex = 0; // 当前显示的关键词索引
|
|
let carouselTimer = null; // 轮播定时器
|
|
|
|
// 启动轮播函数
|
|
const startCarousel = () => {
|
|
// 清除已有的定时器
|
|
if (carouselTimer) clearInterval(carouselTimer);
|
|
// 设置新的定时器，每秒滚动一次
|
|
carouselTimer = setInterval(() => {
|
|
if (hotSearchWords.length > 1) {
|
|
if (currentIndex >= hotSearchWords.length - 1) {
|
|
currentIndex++;
|
|
setTimeout(() => {
|
|
currentIndex = 0;
|
|
}, 2300);
|
|
} else currentIndex++;
|
|
}
|
|
renderCurrentIndex()
|
|
console.log('currentIndex', currentIndex);
|
|
}, 2300);
|
|
};
|
|
|
|
startCarousel();
|
|
|
|
|
|
|
|
</script>
|
|
<script src="./component/sign-in/sign-in.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |