@media screen and (max-width: 800px) { .main-layout { flex-direction: column; height: calc(100vh - (var(--footer-height, 32px) + 68px)); min-height: 0; padding: 10px; overflow: hidden; } .left-panel { display: none; /* 移动端默认只展示右侧,配合 Switch 按钮切换 */ width: 100%; height: 100%; flex: 0 0 auto; padding: 15px; } .right-panel { width: 100%; height: 100%; flex: 1; padding: 15px; padding-bottom: calc(var(--footer-height, 32px) + 120px); } .logo { font-size: 8.7vw; margin: 10px 0; } /* 移动端同样避免横向裁切 */ .logo { white-space: nowrap; overflow: visible; max-width: 100%; } .intro { padding: 20px; margin-bottom: 20px; } .left-avatar { width: 70px; height: 70px; margin-bottom: 10px; } .intro h3 { font-size: 5vw; } .intro li { font-size: 4vw; } .intro a { font-size: 4vw; padding: 8px 12px; } .datetime { text-align: center; margin-bottom: 20px; } .time { font-size: 15vw; } .date { font-size: 5vw; } .future-content { width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; } #tanChiShe { width: 100%; height: 100%; object-fit: contain; } .left-panel { display: none; width: 100%; height: 100%; flex: 0 0 auto; padding: 140px 15px 15px; transition: transform 0.3s ease; overflow-y: auto; overflow-x: hidden; } .right-panel { width: 100%; height: 100%; flex: 1; padding: 140px 15px calc(var(--footer-height, 32px) + 120px) 15px; transition: transform 0.3s ease; overflow-y: auto; overflow-x: hidden; } .chat-container { bottom: calc(var(--footer-height, 32px) + 16px); } .chat-box { width: 95%; padding: 15px; } .input-row { width: 95%; gap: 10px; } #userInput { padding: 10px 14px; font-size: 14px; } button { padding: 10px 16px; font-size: 14px; } .message { padding: 10px 14px; max-width: 90%; } .projectItem { width: 100%; } .section-title { font-size: 22px; } /* 隐藏移动端滚动条 */ .left-panel::-webkit-scrollbar, .right-panel::-webkit-scrollbar { display: none; width: 0; height: 0; } .left-panel, .right-panel { -ms-overflow-style: none; scrollbar-width: none; } }