feat(ui): 添加移动端侧边菜单栏及响应式样式调整

添加移动端侧边菜单栏组件，包含用户信息、导航链接和发布按钮调整页面头部在不同屏幕尺寸下的响应式布局新增菜单图标资源文件优化logo间距和输入框在移动端的显示效果
2025-12-02 20:01:52 +08:00
parent c63bf6c611
commit c2da892059
8 changed files with 418 additions and 1 deletions
--- a/details.html
+++ b/details.html
@@ -16,6 +16,62 @@
 </head>

 <body>
+    <script>window.__ASSET_VERSION__ = 'Z69';</script>
+
+    <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>
+    </div>
+
+    <script>
+        setTimeout(() => {
+            console.log('', window["userInfoWin"]?.uin > 0, window["userInfoWin"]?.uid > 0);
+            if (window["userInfoWin"]?.uin > 0 || window["userInfoWin"]?.uid > 0) {
+                // 登录
+
+            } else {
+                const avatar = document.querySelector(".head-more-userinfo-avatar")
+                console.log('avatar');
+                avatar.src = "/img/defaultAvatar.png"
+            }
+            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 {
+                e.preventDefault();
+            }
+        }
+    </script>
+
    <div id="pre-loader">
        <div class="three-bounce" p-id="11">
            <div class="one" p-id="12"></div>
@@ -25,7 +81,7 @@
    </div>
    <sign-in-box></sign-in-box>
    <div class="container" id="details" v-cloak>
-        <div class="templateValue" ref="uniqidRef">4uPq5uKzTPTP</div>
+        <div class="templateValue" ref="uniqidRef">WObXKrbm1CSn</div>

        <div class="head-top flexacenter">
            <img class="logo" src="https://oss.gter.net/logo" alt="" />