A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(响应式布局): 优化移动端头部导航和用户信息展示

Browse Source 
调整媒体查询断点至480px和768px，优化小屏幕下的布局
添加移动端导航菜单显示逻辑和用户信息展示
新增关闭按钮功能及登录状态判断
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-12-03 19:20:15 +08:00
parent c2da892059
commit e4f97dafb8
7 changed files with 121 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
details.html
View File

@@ -20,56 +20,39 @@
<div class="head-pop">
<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" @click="handleRegister">登录/注册</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>
<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="//framework.x-php.com/gter/image/gter/offer/mobile/img/addyellow.svg?v=5.2.91_320043737" />
</div>
发布帖子
</a>
<img class="cross-icon" v-if="headMorePopState" @click="headMorePopState = !headMorePopState" src="//framework.x-php.com/gter/image/gter/offer/mobile/img/cross.svg?v=5.2.91_320043737">
<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>
<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="//framework.x-php.com/gter/image/gter/offer/mobile/img/addyellow.svg?v=5.2.91_320043737" /></div>发布帖子</a>
<img class="cross-icon" onclick="crossHeadPop()" src="//framework.x-php.com/gter/image/gter/offer/mobile/img/cross.svg?v=5.2.91_320043737">
</div>
</div>
<script>
setTimeout(() => {
console.log('', window["userInfoWin"]?.uin > 0, window["userInfoWin"]?.uid > 0);
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-more-userinfo-avatar")
console.log('avatar');
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");
}, 1000);
const skipLoginUrl = (e) => {
console.log('e', e);
if (window["userInfoWin"]?.uin > 0 || window["userInfoWin"]?.uid > 0) {
} else {
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>
<div id="pre-loader">