Files
PC-Light-Forum/index.html
DESKTOP-RQ919RC\Pc c63bf6c611 feat(header): 新增头部组件功能与样式优化
- 添加默认头像图片资源
- 扩展监听文件同步配置
- 重构头像展示样式,增加背景和尺寸控制
- 完善签到功能逻辑和样式交互
- 新增头部组件HTML模板和JS实现
- 调整搜索框和历史记录显示逻辑
- 优化页面布局和响应式设计
2025-12-01 19:58:21 +08:00

490 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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></head-top> -->
<div class="head-top flexacenter">
<a href="/" class="flexacenter" target="_blank">
<img class="logo" src="https://oss.gter.net/logo" alt="" />
</a>
<div class="flex1"></div>
<div class="input-box flexacenter">
<!-- <div class="placeholder" v-if="!searchInputState && !input"> -->
<div class="placeholder">
<div class="placeholder-box" :style="{transform: 'translateY(-' + currentIndex * 36 + 'px)', transition: 'transform .3s ease'}">
<!-- <div class="item one-line-display" v-for="(item,index) in hotSearchWords" :key="index">大家都在搜:{{ item.keyword }}</div>
<div class="item one-line-display" v-for="(item,index) in hotSearchWords.slice(0, 2)" :key="'copy-' + index">大家都在搜:{{ item.keyword }}</div> -->
</div>
</div>
<input class="input flex1" type="text" maxlength="140" /> <img class="icon" onclick="searchEvent()" src="/img/search-icon.svg" />
<div class="search-box-history">
<div class="search-box-history-title">历史搜索</div>
<div class="search-box-history-list">
</div>
</div>
</div>
<div class="post-list flexacenter"><a href="/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-thread.png" /> </a> <a href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-offer.png" /> </a> <a href="https://offer.gter.net/post/summary" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-summary.png" /> </a> <a href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-mj.png" /> </a> <a href="https://vote.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-vote.png" /> </a> </div>
<div class="sign-in sign-in-no flexacenter">
<div class="sign-in-no-box" onclick="headSignIn()">
<img class="sign-in-bj" src="/img/sign-in-bj.svg" /><img class="coin-bj" src="/img/coin-bj.svg" />
<img class="coin-icon" src="/img/coin-icon.png" /><span class="text flex1">签到领寄托币</span>
<div class="sign-go flexcenter">
<img class="sign-go-bj" src="/img/sign-go.svg" /> GO
</div>
<img class="petal1" src="/img/petal1.png" />
<img class="petal2" src="/img/petal2.png" />
<img class="petal3" src="/img/petal3.png" />
</div>
<div class="sign-in-already-box">
<img class="sign-icon" src="/img/sign-icon.png" />
<span>已签到,明天再来</span>
</div>
</div>
</div>
<!-- <head-top-web></head-top-web> -->
<bi-card coins="20" token="_TXzU0MGGjdPFL8RR-Qmja2gGEbUCNPUddwAdczWPJctueas3yXWMkYCvr96dc95-Wu_WCMXYd1kHBCRMdIeydneWA5hsg4_a8hkH5tGKdrxdc_OPQtzsCPybE62xK9rPRFsdPwzQI9pqQYthZYqcANTqof0CpHcMS3yUP1NIvFnJ602njRjNTY~"></bi-card>
<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">
<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" bind:tap="goDetails" data-uniqid="{{ ongoingbj.uniqid }}">
<div class="title one-line-display">{{ ongoingbj.title }}</div>
<div class="hint one-line-display">{{ ongoingbj.description }}</div>
<div class="people flexacenter">
<div class="left flexacenter">
<div class="number">{{ ongoingbj.comments }}</div>
<div class="text">人正在讨论</div>
</div>
<div class="right flexacenter">
<div class="item flexcenter" v-for="(item, index) in ongoingbj.commentUser" :key="index" :style="{zIndex: 7 - index }">
<img class="img" :src="item.avatar" />
</div>
</div>
</div>
</div>
<div class="topic-list">
<a class="item flexacenter" v-for="(item, index) in pastList" :key="index" :href="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + 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">{{ 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="'http://14.22.79.19:9551/?tpl=forum/details&uniqid=' + item.uniqid" target="_blank">
<div class="dot"></div>
<div class="text one-line-display">{{ item.title }}</div>
</a>
</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">
<a class="item flexcenter" href="https://offer.gter.net/post" target="_blank" style="position: relative">
<img class="icon" src="./img/offer.svg" style="width: 16px" />
<span class="text">报Offer</span>
</a>
<a class="item flexcenter" href="https://offer.gter.net/post/summary" target="_blank" style="position: relative">
<img class="icon" src="./img/summarize.png" style="width: 16px" />
<span class="text">写总结</span>
</a>
<a class="item flexcenter" href="https://interviewexperience.gter.net/publish" target="_blank" style="position: relative">
<img class="icon" src="./img/mj.png" style="width: 16px" />
<span class="text">写面经</span>
</a>
<a class="item flexcenter" href="https://vote.gter.net/publish" target="_blank" style="position: relative">
<img class="icon" src="./img/vote.svg" style="width: 16px" />
<span class="text">发起投票</span>
</a>
</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 class="QRcode-box flexcenter">
<img class="QRcode" :src="item.img" />
<div class="text">微信扫码</div>
</div>
</div>
</div>
</div>
<div class="offer-box" :class="{'small': custom_2AdvRef}" id="offer-box" @mouseover="offerMouseover" @mouseout="offerMouseout">
<div class="offer-list" id="offer-list" ref="offerListRef" :style="{'margin-top': -offerMargin + 'px'}">
<a class="item flexflex" :href="item['url']" target="_blank" v-cloak v-for="(item, index) in offerlist" :key="index">
<div class="avatar" :style="{backgroundImage: `url(${item['avatar']})`}"></div>
<div class="">
<div class="condition one-line-display">{{ item["date"] }} {{ item['type'] }}</div>
<div class="titletitle one-line-display">{{ item["content"] }}</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="matter flexflex">
<div class="matter-content flex1">
<!-- 论坛板块列表 -->
<div class="forum-sections-list">
<img class="img" src="./img/sections-left.svg" />
<div class="title">论坛版块</div>
<div class="list">
<template v-for="(item, index) in sectionList" :key="index">
<div class="line flexacenter">
<a class="item flexacenter" v-for="(item, index) in item" :key="index" target="_blank" :href="`/section-index.html?section=${item.uniqid}`">{{ item.name }}</a>
</div>
</template>
</div>
</div>
<div class="list-load-box flexcenter">
<img class="list-load-icon" src="./img/load-icon.svg" />
<div class="list-load-text">加载中</div>
</div>
<item-forum :itemdata="item" v-for="(item, index) in list" :key="index"></item-forum>
</div>
<div class="sidebar" :style="{'top': sidebarHeight + 'px'}" ref="sidebarRef">
<a class="ad-item flexacenter" 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="ad-item flexacenter" 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="./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">{{ 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>
<!-- 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="'https://vote.gter.net/details/' + item['uniqid']">
<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>
<!-- 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="'https://interviewexperience.gter.net/details/' + item['uniqid']" target="_blank">
<div class="school one-line-display">{{ item.data['schoolname'] }}</div>
<div class="major one-line-display" v-if="item.data['profession']">{{ item.data['profession'] }}</div>
<div class="info">
<img class="icon" :src="item.user['avatar']" />
<span class="text">{{ item['content'] }}</span>
</div>
</a>
<a class="add-btn flexcenter" style="position: relative" href="https://interviewexperience.gter.net/publish" target="_blank" v-cloak>
<img class="add-icon" src="./img/add-btn-black.svg" />
<div>写面经</div>
<div v-if="realname == 0 && userInfo.uin > 0" class="open-attest-btn" @click.prevent="openAttest"></div>
</a>
</div>
</div>
<!-- newest 最新 -->
<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>
</body>
</html>