Files
PC-Light-Forum/homepage-me-V2.html
DESKTOP-RQ919RC\Pc ea6ae8d7fc fix(homepage): 修复个人主页样式和功能问题
修复个人主页的响应式布局问题,优化移动端显示效果
调整分类和排序区域的样式,移除不必要的margin-left
更新投票组件的内容显示类名为one-line-display-v2
修复主页加载逻辑,优化数据获取和分页处理
移除未使用的代码和注释,清理CSS样式
2025-12-26 18:50:05 +08:00

693 lines
37 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>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title> -- 寄托天下</title>
<link rel="stylesheet" href="/css/public.css?v=8SfiKjW0aGnj" />
<link rel="stylesheet" href="/css/homepage-me.css?v=8SfiKjW0aGnj" />
<!-- <link rel="stylesheet" href="https://f.gter.net/css/homepage-me.css" /> -->
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="">
<meta property="twitter:description" content="">
<meta property="twitter:image" content="">
<!-- 网站图标 -->
<link rel="icon" href="https://www.gter.net/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="https://www.gter.net/favicon.ico" type="image/x-icon">
<style>
[v-cloak] {
display: none !important;
}
#pre-loader {
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
#pre-loader .three-bounce>div {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 100%;
top: 50%;
margin-top: -9px;
background: #aeadba;
animation: bouncedelay 1.4s infinite ease-in-out;
animation-fill-mode: both;
}
#pre-loader .three-bounce .one {
animation-delay: -0.32s;
}
#pre-loader .three-bounce .two {
animation-delay: -0.16s;
}
@keyframes bouncedelay {
0%,
100%,
80% {
transform: scale(0);
-webkit-transform: scale(0);
}
40% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
</style>
<script type="text/javascript">
var STYLEID = '2',
STATICURL = 'static/',
IMGDIR = 'https://bbs.gter.net/template/archy_plt8/image',
VERHASH = 'Z62',
charset = 'gbk',
discuz_uid = '0',
cookiepre = '4B5x_c0ae_',
cookiedomain = 'gter.net',
cookiepath = '/',
showusercard = '1',
attackevasive = '0',
disallowfloat = '',
creditnotice = ',',
defaultstyle = '',
REPORTURL = 'aHR0cDovL2Jicy5ndGVyLm5ldC9mb3J1bS5waHA/dGlkPTI0MDYzNTYmZ290bz1sYXN0cG9zdA==',
SITEURL = 'https://app.gter.net/',
JSPATH = 'static/js/';
</script>
<script src="https://app.gter.net/bottom?tpl=header&menukey=bbs"></script>
<script src="https://framework.x-php.com/gter/bbs/static/js/common.js" charset="gbk"></script>
</head>
<body>
<script>
window.__ASSET_VERSION__ = 'Z71';
window.isMobile = window.innerWidth <= 768;
</script>
<div id="ajaxwaitid"></div>
<div id="append_parent"></div>
<div class="head-top flexacenter" style="width: 1200px;margin: 20px auto 30px;z-index: 8;">
<a href="/" class="flexacenter" target="_blank">
<img class="logo" src="https://oss.gter.net/logo" alt="" />
</a>
<div class="flex1"></div>
<div class="input-box flexacenter">
<div class="placeholder">
<div class="placeholder-box" style="transition: transform .3s ease"></div>
</div>
<input class="input flex1" type="text" maxlength="140" /> <img class="icon" onclick="searchEvent()" src="https://framework.x-php.com/gter/forum/img/search-icon.svg?v=8SfiKjW0aGnj" />
<div class="search-box-history">
<div class="search-box-history-title">历史搜索</div>
<div class="search-box-history-list"></div>
</div>
</div>
<div class="post-list flexacenter"> </div>
<div class="sign-in sign-in-no flexacenter"></div>
<div class="head-more flexcenter" onclick="openHeadPop()">
<img class="more-icon" style="width: 18px;height: 15px;" src="https://framework.x-php.com/gter/forum/img/threeAcross.svg?v=8SfiKjW0aGnj" />
</div>
<div class="head-pop" style="display: none;">
<div class="head-more-pop">
<div class="head-more-userinfo flex1 flexacenter">
<div class="head-more-left flexacenter"><img class="head-more-userinfo-avatar" src="" alt="">
<div class="head-more-userinfo-username"></div>
</div>
<div class="head-more-right">
<div class="loginBtn flexcenter" onclick="go_ajax_Login()">登录/注册</div>
</div>
</div>
<div class="tab-list"><a class="tab-item flexacenter" href="https://www.gter.net" target="_blank">寄托首页</a><a class="tab-item flexacenter pitch" href="https://f.gter.net" target="_blank">论坛</a><a class="tab-item flexacenter" href="https://app.gter.net/admissionOfficer" target="_blank">招生官</a><a class="tab-item flexacenter" href="https://bbs.gter.net/thread-2345065-1-1.html" target="_blank">加群</a><a class="tab-item flexacenter" href="https://offer.gter.net" target="_blank">Offer榜</a></div>
<div class="sign-in sign-in-no flexacenter"></div>
<a class="head-more-post flexcenter" href="/publish" target="" onclick="skipLoginUrl(event)">
<div class="head-more-post-icon flexcenter"><img class="head-more-post-img" src="https://framework.x-php.com/gter/forum/img/addyellow.svg?v=8SfiKjW0aGnj" /></div>发布帖子
</a>
<img class="cross-icon" onclick="crossHeadPop()" src="https://framework.x-php.com/gter/forum/img/cross.svg?v=8SfiKjW0aGnj">
</div>
</div>
</div>
<div class="valueA" style="display: none;">https://framework.x-php.com/gter/forum/</div>
<div id="pre-loader">
<div class="three-bounce" p-id="11">
<div class="one" p-id="12"></div>
<div class="two" p-id="13"></div>
<div class="three" p-id="14"></div>
</div>
</div>
<div class="container" id="homepage-me" v-cloak>
<div class="templateValue" ref="tokenRef"></div>
<!-- <head-top></head-top> -->
<div class="head-navigation flexacenter">
<img class="icon" src="https://framework.x-php.com/gter/forum/img/index-icon.png?v=8SfiKjW0aGnj" />
<a class="text" href="/" target="_blank">论坛</a>
<img class="arrows" src="https://framework.x-php.com/gter/forum/img/arrows-gray.svg?v=8SfiKjW0aGnj" />
<div class="text">我的主页</div>
</div>
<div class="matter flexflex">
<div class="card-user flexcenter">
<div class="name-area">
<div class="avatar-box flexcenter" v-if="info.avatar">
<img class="avatar" :src="info.avatar" alt="用户头像" />
<a class="pen-box flexcenter" href="https://bbs.gter.net/account.php?a=avatar" target="_blank">
<img class="pen-icon" src="https://framework.x-php.com/gter/forum/img/pen-icon.png?v=8SfiKjW0aGnj" />
</a>
</div>
<h3 class="username flexcenter">{{ info.nickname }}</h3>
<p class="uid flexcenter">
UID: {{ info.uin }}
<img class="icon" @click="copy(info.uin)" src="https://framework.x-php.com/gter/forum/img/copy-icon.png?v=8SfiKjW0aGnj" />
</p>
</div>
<div class="bi-box flexacenter">
<img class="bi-masking" src="https://framework.x-php.com/gter/forum/img/bi-masking.svg?v=8SfiKjW0aGnj" alt="" />
<img class="bi-icon" src="https://framework.x-php.com/gter/forum/img/bi-icon.svg?v=8SfiKjW0aGnj" alt="" />
<div class="bi-content flex1">
<div class="bi-sum">{{ info.gtercoin }}</div>
<div class="bi-text">寄托币</div>
</div>
<a class="bi-btn flexcenter" target="_blank" href="https://bbs.gter.net/account.php?a=credit&op=rule">
关于寄托币
<img class="bi-question" src="https://framework.x-php.com/gter/forum/img/question-mark.svg?v=8SfiKjW0aGnj" alt="" />
<!-- <div class="bi-pop flexflex">
<div class="bi-coin-title">寄托币有什么用途、如何获取?</div>
<div class="bi-coin-hint">寄托币可以用于打赏、投币查看帖子、兑换寄托纪念品等,详细请点击
<a class="bi-url" target="_blank" href="https://bbs.gter.net/thread-2543548-1-1.html">攒币指南</a>。
</div>
</div> -->
</a>
</div>
<div class="medal-area" v-if="medallist.length != 0">
<p class="title">勋章 {{ medallist.length }}</p>
<div class="list flexflex">
<img v-for="item in medallist" :src="item.image" :alt="item.name" class="item" />
</div>
</div>
</div>
<div class="matter-content flex1">
<div class="message-box">
<!-- 头部区域 -->
<div class="header">
<img v-if="info.avatar" :src="info.avatar" alt="用户头像" class="avatar" />
<span class="username">{{ info.nickname }}</span>
<img v-if="info?.group?.image" class="icon" :src="info?.group?.image" />
</div>
<!-- 信息列表区域 -->
<div class="info-list flexflex">
<div class="item flexacenter">
<span class="label">注册时间</span>
<span class="value">{{ info.register_at || '暂无' }}</span>
</div>
<div class="item flexacenter">
<span class="label">最后登录</span>
<span class="value">{{ info.lastlogintime || '暂无' }}</span>
</div>
<div class="item flexacenter">
<span class="label">在线时长</span>
<span class="value">{{ info.oltime || 0 }} 小时</span>
</div>
<div class="item flexacenter">
<span class="label">上次访问 IP</span>
<span class="value">{{ info.lastloginip || '暂无' }}</span>
</div>
<div class="item flexacenter">
<span class="label">Email</span>
<div class="flexacenter">
<span class="value">{{ info.email || '暂无' }}</span>
<span v-if="info.email" class="status blue flexacenter">已认证</span>
</div>
</div>
<div class="item flexacenter">
<span class="label">手机号</span>
<div class="flexacenter">
<span class="value">{{ info.mobile || '暂无' }}</span>
<span v-if="info.mobile" class="status blue flexacenter">已认证</span>
</div>
</div>
<div class="item flexacenter">
<span class="label">累计签到</span>
<span class="value">{{ info.sign_count || 0 }} 天</span>
</div>
<div class="item flexacenter">
<span class="label">本月签到</span>
<span class="value">{{ info.sign_month || 0 }} 天</span>
</div>
</div>
<!-- 统计标签区域 -->
<div class="stats flexacenter" v-if="creationType.length != 0">
<template v-for="(item, index) in creationType" :key="index">
<span class="item flexacenter">
<div class="text">{{ item.text }} ×</div>
<div class="num">{{ item.number }}</div>
</span>
<div class="line" v-if="index != creationType.length - 1">|</div>
</template>
</div>
<!-- Offer标签区域 -->
<div class="tags flexflex" v-if="schoolTags.length != 0">
<div class="item flexacenter" v-for="item in schoolTags" :key="item">
<img v-if="item.type == 'offer'" class="icon" src="https://framework.x-php.com/gter/forum/img/offer-icon.png?v=8SfiKjW0aGnj" mode="heightFix" />
<img v-else class="icon" src="https://framework.x-php.com/gter/forum/img/mj-icon.png?v=8SfiKjW0aGnj" mode="heightFix" />
{{ item.school }}
</div>
</div>
</div>
<div class="list-area">
<div class="operation-box flexacenter">
<div class="operation-item" :class="{ 'pitch': item.type == typeValue }" v-for="item in typeList" :key="item.type" @click="typeChange(item.type)">{{ item.text }}</div>
</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>
<div v-if="typeValue == 'collection'" class="issue-data flexacenter">
<div class="num">{{ total }}</div>
个收藏
</div>
<div v-else-if="typeValue == 'creation'" class="issue-data flexacenter">
<div class="num">{{ total }}</div>
个创作,获得
<div class="num">{{ 000 }}</div>
个赞
</div>
<div v-else-if="typeValue == 'comment'" class="issue-data flexacenter">
<div class="num">{{ total }}</div>
个评论,获得
<div class="num">{{ 000 }}</div>
个赞
</div>
<div v-else-if="typeValue == 'like'" class="issue-data flexacenter">
<div class="num">{{ total }}</div>
个点赞
</div>
<div v-else-if="typeValue == 'footprint'" class="issue-data flexacenter">系统会为你保留最近7天的浏览记录</div>
<div class="list-box">
<div class="item-box item-summary">
<div>
<div class="item-head flexacenter">
<div class="user-box flexacenter">
<img class="avatar" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WVxbE6yOikN42jDKLNjtax7HItVhfceNSdU9oWFhY2E~/small">
<div class="name">一万杯美式定律</div>
</div>
<div class="time">10月05日 08:32</div>
<div class="flex1"></div>
<div class="flexacenter" style="position: relative;"></div>
<div class="view flexacenter"><img class="icon" src="https://framework.x-php.com/gter/forum//img/eye-icon.svg">
<div class="text">553</div>
</div>
<div class="btn flexcenter"><img class="icon" src="https://framework.x-php.com/gter/forum//img/dot-dot-dot-gray.png"></div>
</div>
<div class="label flexflex">
<a class="item icon" target="_blank" href="/best">
<img src="https://framework.x-php.com/gter/forum//img/essence-icon.png" style="height: 25px;">
</a>
<a class="item blue" href="/section/rfVw9JnMLp3y" target="_blank">美国</a>
<a class="item" href="/tag/硕士" target="_blank">硕士</a>
<a class="item" href="/tag/工学类" target="_blank">工学类</a>
<a class="item" href="/tag/录取抉择" target="_blank">录取抉择</a>
<a class="item" href="/tag/海硕" target="_blank">海硕</a>
<a class="item" href="/tag/在读体验" target="_blank">在读体验</a>
<a class="item" href="/tag/经验分享" target="_blank">经验分享</a>
<a class="item" href="/tag/选校定位" target="_blank">选校定位</a>
<a class="item" href="/tag/25Fall" target="_blank">25Fall</a>
<a class="item" href="/tag/双非" target="_blank">双非</a>
<a class="item" href="/tag/申请准备" target="_blank">申请准备</a>
</div>
</div>
<a class="title" href="/details/WCq5uT0WC1GX" target="_blank">25fall双非diy美硕申请总结</a>
<a class="message one-line-display-v2" href="/details/WCq5uT0WC1GX" target="_blank">不知不觉也入学一个月了在我的25fall申请季我度过了从自怨————自卑————放平心态的心态转变经历过我没有美国connection均分不够高学校相对来说没人选择出国的一系列bg会阻止我真..</a>
<a class="total flexacenter" href="/details/WCq5uT0WC1GX" target="_blank">
<div></div>
<div class="num">13</div>
<div>个Offer</div>
</a>
<a class="list flexacenter" href="/details/WCq5uT0WC1GX" target="_blank">
<div class="item flexflex">
<div class="item-content flexflex">
<div class="school flexacenter">
<img class="icon" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-W_ZMscHvqqsgFptxhXa6RWi26P-BuTVcVEbGX5tkb8LQ0NDI5">
<div class="name one-line-display flex1">格拉斯哥大学</div>
</div>
<div class="major one-line-display">心理科学硕士 Master of Psychological Science(Conversion)</div>
<div class="info flexacenter">25Fall <div class="line"></div> MSc <div class="line"></div>
<div class="results r6">Con Offer</div>
</div>
</div>
</div>
<div class="item flexflex">
<div class="item-content flexflex">
<div class="school flexacenter">
<img class="icon" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-W_ZMtd3nqqsgFptxhXa6RWi26P-BuTQIQR7eX49kb8LQ0NDI5">
<div class="name one-line-display flex1">诺丁汉大学</div>
</div>
<div class="major one-line-display">Computational Neuroscience,Cognition and AI</div>
<div class="info flexacenter">25Fall <div class="line"></div> MSc <div class="line"></div>
<div class="results r6">Con Offer</div>
</div>
</div>
</div>
<div class="item more flexcenter">
<div class="item-content flexcenter">
<div class="">查看更多</div> <img class="icon" src="https://framework.x-php.com/gter/forum//img/arrows-circle-dark-blue.svg">
</div>
</div>
</a>
<div page="">
<a class="comment flexacenter" href="/details/WCq5uT0WC1GX" target="_blank">
<img class="icon" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXsle2XF9XFqWOikN42jDKLNjtax7HctpkLM3bSdU9oWFhY2E~/small">
<div class="text one-line-display">666</div>
</a>
<div class="bottom flexacenter">
<div class="bottom-item like flexacenter"><img class="icon" src="https://framework.x-php.com/gter/forum//img/like-red-icon.png">
<div class="text">14</div>
</div>
<div class="bottom-item flexacenter"><img class="icon" src="https://framework.x-php.com/gter/forum//img/collect-golden.svg">
<div class="text">8</div>
</div> <a class="bottom-item flexacenter" href="/details/WCq5uT0WC1GX" target="_blank"><img class="icon" src="https://framework.x-php.com/gter/forum//img/discuss-icon.png">
<div class="text">7</div>
</a> <a class="bottom-item flexacenter" href="/details/WCq5uT0WC1GX" target="_blank"><img class="icon" src="https://framework.x-php.com/gter/forum//img/bi-copper-icon.png">
<div class="text">140</div>
</a>
<div class="bottom-item share flexacenter">
<img class="icon" src="https://framework.x-php.com/gter/forum//img/share-gray.png" style="width: 19px; height: 19px;">
<div class="text">转发</div>
<div class="share-box flexcenter">
<div class="share-item flexcenter">
<img class="share-icon" src="https://framework.x-php.com/gter/forum//img/copy-black-icon.png">
<div class="text">复制链接</div>
</div>
<div class="share-item wenxin flexcenter">
<img class="share-icon" src="https://framework.x-php.com/gter/forum//img/weixin-icon.png">
<div class="text">微信转发</div>
<div class="QRcode-box flexcenter">
<div class="QRcode flexcenter">
<img class="load" src="https://framework.x-php.com/gter/forum//img/load-icon.svg">
</div>
<div class="text">微信扫码</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<load-box :loading="loading" style="margin-left: 95px;margin-right: 40px;width: calc(100% - 135px);"></load-box>
<div v-if="list.length == 0 && page == 0" class="empty flexcenter">
<img class="empty-icon" src="https://framework.x-php.com/gter/forum/img/empty-icon.png?v=8SfiKjW0aGnj" />
<div class="empty-text">- 暂无内容 -</div>
</div>
<div v-if="list.length != 0 && page != 0" class="load-more flexcenter">加载更多…</div>
<div v-if="list.length != 0 && page == 0" class="load-more flexcenter">- End -</div>
</div>
</div>
</div>
</div>
<script src="https://framework.x-php.com/gter/forum/js/vue.global.js?v=8SfiKjW0aGnj"></script>
<script src="https://framework.x-php.com/gter/forum/js/axios.min.js?v=8SfiKjW0aGnj"></script>
<script src="https://framework.x-php.com/gter/forum/js/public.js?v=8SfiKjW0aGnj"></script>
<!-- <script src="https://f.gter.net/js/public.js"></script> -->
<script type="module" src="/js/homepage-me.js?v=8SfiKjW0aGnj"></script>
<!-- <script type="module" src="https://f.gter.net/js/homepage-me.js"></script> -->
<script type="module" src="https://framework.x-php.com/gter/forum/../image/gter/commonCom/sign-in/sign-in.js?v=8SfiKjW0aGnj"></script>
<script src="https://app.gter.net/bottom?tpl=footer,popupnotification"></script>
<script>
if (location.href.indexOf('details') != -1 || location.href.indexOf('thread') != -1) {
const postList = document.querySelector('.head-top .post-list')
postList.innerHTML = `<a href="/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="https://framework.x-php.com/gter/forum/img/post-thread.png?v=8SfiKjW0aGnj" /> </a> <a href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px"> <img class="post-item" src="https://framework.x-php.com/gter/forum/img/post-offer.png?v=8SfiKjW0aGnj" /> </a> <a href="https://offer.gter.net/post/summary" target="_blank" style="margin-right: 10px"> <img class="post-item" src="https://framework.x-php.com/gter/forum/img/post-summary.png?v=8SfiKjW0aGnj" /> </a> <a href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="https://framework.x-php.com/gter/forum/img/post-mj.png?v=8SfiKjW0aGnj" /> </a> <a href="https://vote.gter.net/publish" target="_blank"> <img class="post-item" src="https://framework.x-php.com/gter/forum/img/post-vote.png?v=8SfiKjW0aGnj" /> </a>`
postList.style.display = 'flex'
} else if (location.href.indexOf('search') != -1) {
const box = document.querySelector(".head-top")
box.querySelector(".input-box").style.display = "none"
box.querySelector(".sign-in").style.display = "none"
} else if (location.href.indexOf("publish") != -1) {
const box = document.querySelector(".head-top")
if (box) document.body.removeChild(box)
} else {
const signInList = document.querySelectorAll('.head-top .sign-in')
signInList.forEach(element => {
element.innerHTML = `<div class="sign-in-no-box" onclick="headSignIn()">
<img class="sign-in-bj" src="https://framework.x-php.com/gter/forum/img/sign-in-bj.svg?v=8SfiKjW0aGnj" /><img class="coin-bj" src="https://framework.x-php.com/gter/forum/img/coin-bj.svg?v=8SfiKjW0aGnj" />
<img class="coin-icon" src="https://framework.x-php.com/gter/forum/img/coin-icon.png?v=8SfiKjW0aGnj" /><span class="text flex1">签到领寄托币</span>
<div class="sign-go flexcenter">
<img class="sign-go-bj" src="https://framework.x-php.com/gter/forum/img/sign-go.svg?v=8SfiKjW0aGnj" /> GO
</div>
<img class="petal1" src="https://framework.x-php.com/gter/forum/img/petal1.png?v=8SfiKjW0aGnj" />
<img class="petal2" src="https://framework.x-php.com/gter/forum/img/petal2.png?v=8SfiKjW0aGnj" />
<img class="petal3" src="https://framework.x-php.com/gter/forum/img/petal3.png?v=8SfiKjW0aGnj" />
</div>
<div class="sign-in-already-box">
<img class="sign-icon" src="https://framework.x-php.com/gter/forum/img/sign-icon.png?v=8SfiKjW0aGnj" />
<span>已签到,明天再来</span>
</div>`
element.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) {
signInList.forEach(element => {
element.classList.add('sign-in-already')
element.classList.remove("sign-in-no");
})
}
}
userInfoWinTimerCount++;
if (userInfoWinTimerCount >= 3000) clearInterval(userInfoWinTimer);
}, 50);
}
function headSignIn() {
SignInComponent.initComponent();
}
const searchInput = document.querySelector('.head-top .input')
// 绑定 blur 和 focus 事件
if (searchInput) {
searchInput.addEventListener('blur', function () {
setTimeout(() => {
const historyBox = document.querySelector('.head-top .search-box-history')
if (historyBox) historyBox.style.display = 'none'
}, 300);
const inputBox = document.querySelector('.head-top .input-box')
if (inputBox) inputBox.classList.remove('pitch')
startCarousel();
})
searchInput.addEventListener('focus', () => {
const historyBox = document.querySelector('.head-top .search-box-history')
const historyItem = historyBox.querySelectorAll(".search-box-history-item")
if (historyBox && historyItem.length > 0) historyBox.style.display = 'block'
const inputBox = document.querySelector('.head-top .input-box')
if (inputBox) inputBox.classList.add('pitch')
if (carouselTimer) clearInterval(carouselTimer);
})
// 绑定回车事件
searchInput.addEventListener('keydown', (e) => {
if (e.key == 'Enter') searchEvent()
})
searchInput.addEventListener('input', (e) => {
const value = e.target.value || ''
const placeholder = document.querySelector(".head-top .placeholder")
if (value) placeholder.style.display = 'none'
else placeholder.style.display = 'block'
})
}
let historySearchList = []
// 获取历史搜索
const getHistorySearch = () => {
const data = JSON.parse(localStorage.getItem("history-search")) || [];
historySearchList = data;
let itemAll = ``
data.forEach((item, index) => itemAll += `<div class="search-box-history-item one-line-display" onclick="searchEvent('${item}')">${item}</div>`) // 绑定事件 searchEvent 点击搜索)
const historyList = document.querySelector('.search-box-history-list')
historyList.innerHTML = itemAll
};
if (location.href.indexOf("/publish") == -1 && location.href.indexOf("/search") == -1) getHistorySearch();
const searchEvent = (value) => {
if (window.innerWidth <= 480) {
redirectToExternalWebsite("/search");
return
}
const kw = value || searchInput.value || hotSearchWords[currentIndex]?.keyword || "";;
if (!kw) return;
historySearchList.unshift(kw);
historySearchList = [...new Set(historySearchList)];
if (historySearchList.length > 10) historySearchList = historySearchList.splice(0, 10);
localStorage.setItem("history-search", JSON.stringify(historySearchList));
redirectToExternalWebsite("/search/" + kw);
searchInput.value = ""
}
let hotSearchWords = [];
const renderingPlaceholder = () => {
let itemAll = ``
hotSearchWords.forEach(item => {
itemAll += `<div class="item one-line-display" >大家都在搜:${item.keyword}</div>`
})
const sliceHotSearchWords = hotSearchWords.slice(0, 2)
sliceHotSearchWords.forEach(item => {
itemAll += `<div class="item one-line-display" >大家都在搜:${item.keyword}</div>`
})
const placeholderBox = document.querySelector('.placeholder .placeholder-box')
placeholderBox.innerHTML = itemAll
}
const getWConfigg = () => {
ajaxGet("/v2/api/config/website").then((res) => {
if (res.code == 200) {
let data = res["data"] || {};
hotSearchWords = data.hotSearchWords || [];
renderingPlaceholder()
data.time = new Date().toISOString();
localStorage.setItem("wConfig", JSON.stringify(data));
}
});
};
const checkWConfig = () => {
const wConfig = JSON.parse(localStorage.getItem("wConfig")) || {};
if (wConfig.time) {
const time = new Date(wConfig.time);
const now = new Date();
if (now - time > 24 * 60 * 60 * 1000) getWConfigg();
else {
hotSearchWords = wConfig.hotSearchWords || [];
renderingPlaceholder()
}
} else getWConfigg();
};
checkWConfig()
const renderCurrentIndex = () => {
const placeholderBox = document.querySelector('.placeholder .placeholder-box')
if (placeholderBox) placeholderBox.style.transform = `translateY(${-currentIndex * 36}px)`
}
let currentIndex = 0; // 当前显示的关键词索引
let carouselTimer = null; // 轮播定时器
// 启动轮播函数
const startCarousel = () => {
// 清除已有的定时器
if (carouselTimer) clearInterval(carouselTimer);
// 设置新的定时器,每秒滚动一次
carouselTimer = setInterval(() => {
if (hotSearchWords.length > 1) {
if (currentIndex >= hotSearchWords.length - 1) {
currentIndex++;
setTimeout(() => {
currentIndex = 0;
}, 2300);
} else currentIndex++;
}
renderCurrentIndex()
}, 2300);
};
startCarousel();
const openHeadPop = () => {
if (window["userInfoWin"]?.uin > 0 || window["userInfoWin"]?.uid > 0) {
// 登录
const headMoreLeft = document.querySelector(".head-pop .head-more-left")
headMoreLeft.innerHTML = `<img class="head-more-userinfo-avatar" src="${window["userInfoWin"]?.avatar}" alt=""><div class="head-more-userinfo-username">${window["userInfoWin"]?.nickname}</div>`
} else {
const avatar = document.querySelector(".head-pop .head-more-userinfo-avatar")
avatar.src = "/img/defaultAvatar.png"
const headMoreRight = document.querySelector(".head-pop .head-more-right")
headMoreRight.style.display = "block"
}
document.querySelector(".head-pop").classList.add("head-pop-show");
}
const skipLoginUrl = (e) => {
if (window["userInfoWin"]?.uin > 0 || window["userInfoWin"]?.uid > 0) { }
else {
e.preventDefault();
go_ajax_Login();
}
}
const crossHeadPop = () => document.querySelector(".head-pop").classList.remove("head-pop-show");
</script>
</body>
</html>