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

调整媒体查询断点至480px和768px，优化小屏幕下的布局
添加移动端导航菜单显示逻辑和用户信息展示
新增关闭按钮功能及登录状态判断

css/details.css

@@ -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;
   }

css/details.less

@@ -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) {
+@media screen and (max-width: 480px) {
-    .head-top.flexacenter .input-box {
+    .head-top.flexacenter {
-        width: inherit;
+        margin-bottom: 10px !important;
-        .input,
+        .input-box {
-        .placeholder {
+            width: inherit;
-            display: none;
+            height: inherit;
+            background: none;
+            border: none;
+            padding: 5px;
+
+            .placeholder {
+                display: none;
+            }
+
+            .input {
+                display: none;
+            }
+
+            .icon {
+                margin-left: 0;
+            }
         }
     }
+
     #details {
         .answer-discuss {
             .comments-box {

css/public.css

@@ -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;

css/public.less

@@ -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;

details.html

@@ -20,56 +20,39 @@
 
     <div class="head-pop">
         <div class="head-more-pop">
-            <div class="head-more-userinfo flex1 flexacenter">
+            <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="head-more-left flexacenter">
+            <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>
-                    <img class="head-more-userinfo-avatar" src="" alt="">
+            <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>
-                    <div class="head-more-userinfo-username"></div>
+            <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 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>
     </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")
+                const avatar = document.querySelector(".head-pop .head-more-userinfo-avatar")
-                console.log('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) { }
-            if (window["userInfoWin"]?.uin > 0 || window["userInfoWin"]?.uid > 0) {
+            else {
-            } else {
                 e.preventDefault();
+                go_ajax_Login();
             }
         }
+
+        const crossHeadPop = () => document.querySelector(".head-pop").classList.remove("head-pop-show");
+
     </script>
 
     <div id="pre-loader">

img/addyellow.svg

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

img/cross.svg

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