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

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

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) {
-    .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 {