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

30
css/details.css
View File

@@ -1300,13 +1300,19 @@
margin: 20px 10px 30px !important;
}
.head-top.flexacenter .input-box {
margin-right: 0;
margin-right: 10px;
}
.index-footer {
min-width: inherit !important;
}
}
@media screen and (max-width: 850px) {
@media screen and (max-width: 768px) {
header.page-header {
display: none !important;
}
.index-footer {
display: none !important;
}
.head-top .post-list {
display: none !important;
}
@@ -1364,10 +1370,14 @@
top: auto;
overflow: auto;
border: none;
padding-top: 15px;
}
#details .answer-discuss .input-box .bottom .operate .item .emoji-box::after {
display: none;
}
#details .answer-discuss .input-box .bottom .operate .item:hover .file-hint {
display: none;
}
#details .answer-discuss .comments-box .input-box .picture-box {
width: calc(100vw - 88px);
}
@@ -1381,14 +1391,26 @@
width: calc(100vw - 128px);
}
}
@media screen and (max-width: 500px) {
@media screen and (max-width: 480px) {
.head-top.flexacenter {
margin-bottom: 10px !important;
}
.head-top.flexacenter .input-box {
width: inherit;
height: inherit;
background: none;
border: none;
padding: 5px;
}
.head-top.flexacenter .input-box .input,
.head-top.flexacenter .input-box .placeholder {
display: none;
}
.head-top.flexacenter .input-box .input {
display: none;
}
.head-top.flexacenter .input-box .icon {
margin-left: 0;
}
#details .answer-discuss .comments-box .comments-item .comments-header {
font-size: 12px;
}

46
css/details.less
View File

@@ -1538,17 +1538,25 @@
margin: 20px 10px 30px !important;
.input-box {
margin-right: 0;
margin-right: 10px;
}
}
.index-footer {
min-width: inherit !important;
}
}
// 媒体查询 最大宽度 850px 时
@media screen and (max-width: 850px) {
@media screen and (max-width: 768px) {
header.page-header {
display: none !important;
}
.index-footer {
display: none !important;
}
.head-top .post-list {
display: none !important;
}
@@ -1613,7 +1621,6 @@
.picture-box {
width: calc(100vw - 68px);
}
.bottom {
.operate {
.item {
@@ -1627,11 +1634,16 @@
top: auto;
overflow: auto;
border: none;
padding-top: 15px;
&::after {
display: none;
}
}
&:hover .file-hint {
display: none;
}
}
}
}
@@ -1666,14 +1678,30 @@
}
}
@media screen and (max-width: 500px) {
.head-top.flexacenter .input-box {
width: inherit;
.input,
.placeholder {
display: none;
@media screen and (max-width: 480px) {
.head-top.flexacenter {
margin-bottom: 10px !important;
.input-box {
width: inherit;
height: inherit;
background: none;
border: none;
padding: 5px;
.placeholder {
display: none;
}
.input {
display: none;
}
.icon {
margin-left: 0;
}
}
}
#details {
.answer-discuss {
.comments-box {

10
css/public.css
View File

@@ -1773,6 +1773,15 @@ body {
.head-top .post-list .post-item:not(:last-child) {
margin-right: 10px;
}
.head-top .head-more {
display: none;
padding: 5px;
}
@media screen and (max-width: 480px) {
.head-top .head-more {
display: flex;
}
}
.hot-tag {
background-color: #ffffff;
border: 1px solid #e9eef2;
@@ -2009,6 +2018,7 @@ td {
.head-pop .head-more-pop .head-more-userinfo .head-more-right {
width: 84px;
height: 30px;
display: none;
}
.head-pop .head-more-pop .head-more-userinfo .head-more-right .information-box {
position: relative;

14
css/public.less
View File

@@ -2133,6 +2133,19 @@ body {
}
}
}
.head-more {
display: none;
padding: 5px;
}
}
@media screen and (max-width: 480px) {
.head-top {
.head-more {
display: flex;
}
}
}
.hot-tag {
@@ -2411,6 +2424,7 @@ td {
.head-more-right {
width: 84px;
height: 30px;
display: none;
.information-box {
position: relative;

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">

6
img/addyellow.svg Normal file
View 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="12px" height="12px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -3701 -968 )">
<path d="M 11.7613636363636 4.60227272727273 C 11.9204545454545 4.76136363636363 12 4.95454545454545 12 5.18181818181818 L 12 6.81818181818182 C 12 7.04545454545455 11.9204545454545 7.23863636363636 11.7613636363636 7.39772727272727 C 11.6022727272727 7.55681818181818 11.4090909090909 7.63636363636364 11.1818181818182 7.63636363636364 L 7.63636363636364 7.63636363636364 L 7.63636363636364 11.1818181818182 C 7.63636363636364 11.4090909090909 7.55681818181818 11.6022727272727 7.39772727272727 11.7613636363636 C 7.23863636363637 11.9204545454545 7.04545454545455 12 6.81818181818182 12 L 5.18181818181818 12 C 4.95454545454546 12 4.76136363636364 11.9204545454545 4.60227272727273 11.7613636363636 C 4.44318181818182 11.6022727272727 4.36363636363636 11.4090909090909 4.36363636363636 11.1818181818182 L 4.36363636363636 7.63636363636364 L 0.818181818181818 7.63636363636364 C 0.590909090909091 7.63636363636364 0.397727272727273 7.55681818181818 0.238636363636364 7.39772727272727 C 0.0795454545454545 7.23863636363636 0 7.04545454545455 0 6.81818181818182 L 0 5.18181818181818 C 0 4.95454545454545 0.0795454545454545 4.76136363636363 0.238636363636364 4.60227272727273 C 0.397727272727273 4.44318181818182 0.590909090909091 4.36363636363636 0.818181818181818 4.36363636363636 L 4.36363636363636 4.36363636363636 L 4.36363636363636 0.818181818181819 C 4.36363636363636 0.59090909090909 4.44318181818182 0.397727272727272 4.60227272727273 0.238636363636364 C 4.76136363636364 0.0795454545454541 4.95454545454546 0 5.18181818181818 0 L 6.81818181818182 0 C 7.04545454545455 0 7.23863636363637 0.0795454545454541 7.39772727272727 0.238636363636364 C 7.55681818181818 0.397727272727272 7.63636363636364 0.59090909090909 7.63636363636364 0.818181818181819 L 7.63636363636364 4.36363636363636 L 11.1818181818182 4.36363636363636 C 11.4090909090909 4.36363636363636 11.6022727272727 4.44318181818182 11.7613636363636 4.60227272727273 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 3701 968 )" />
</g>
</svg>

11
img/cross.svg Normal file
View 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="filter207">
<feColorMatrix type="matrix" values="1 0 0 0 0.355555555555556 0 1 0 0 0.355555555555556 0 0 1 0 0.355555555555556 0 0 0 1 0 " in="SourceGraphic" />
</filter>
</defs>
<g transform="matrix(1 0 0 1 -4640 -1136 )">
<image preserveAspectRatio="none" style="overflow:visible" width="16" height="16" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJBQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwyGIIwAAAC90Uk5TABNKPQQKSVMVTO/OIjDc4iMx7esMS+Mk7CrMvgHWGB/f2BoZF8sDIFI7Cbw6PCsDqUolAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAASAAAAEgARslrPgAAAX9JREFUWMPtlttWwjAQRSOFilVpK1i8gHgDFdH5/78zNaRNmzTJmeWjeZp0rb2TQpM5QvzBOBklY5yapKdTVZ1lROcXKH85I8rS3/UlT5QXGF9e1dR8IctrItygeKJE1okqqVoC+785QrdyMr6DDQ1/v6qnRU7YW+j90/pBPdg8Qnto1n961o8gg4OHDE4eMAzw0YZBPtLg4aMMXj7CEOCDhiAfMETwXkMU7zFE8oOGln8RgmEAeKcB4h0GkLcMMN8zMPiOgcXLe7LShv79B++Btb5twPmugcMbvwOtXzl8+/9BXc/F8wwmzzF0edzQ9s/8WGD5wfh+wc5r8XDvtniGwTp/7PzQfL/M/GB8/6z80Dk/jPzQO39wfrDOL5gfHOcfyg/O+wPIDwP3z39+8Bqi+WB+CPKB/BDBu/ID2j+XTect6ulkBvKGYbuTsxG0fzXe9FuUcvKOrm/u4UPW0wzntaHa13U6J/oEedm7t5I/qHrx9b1CeSF25WGPU/b4AazFu1v2/ZorAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIyLTExLTE0VDE5OjI3OjEzKzA4OjAwWwLoYgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMi0xMS0xNFQxOToyNzoxMyswODowMCpfUN4AAABJdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uXzZibmxndG1jdXh0L2d1YW5iaS5zdmeJnhE5AAAAAElFTkSuQmCC" x="4640px" y="1136px" filter="url(#filter207)" />
</g>
</svg>