|
@@ -3578,7 +3578,7 @@ const updateCollapsedState = () => {
|
|
.welcome-section {
|
|
.welcome-section {
|
|
/* 移动端欢迎区域调整 */
|
|
/* 移动端欢迎区域调整 */
|
|
width: 100%;
|
|
width: 100%;
|
|
- padding: 16px;
|
|
|
|
|
|
+ padding: 0;
|
|
}
|
|
}
|
|
|
|
|
|
.right_menu {
|
|
.right_menu {
|
|
@@ -3673,7 +3673,7 @@ const updateCollapsedState = () => {
|
|
|
|
|
|
.chat {
|
|
.chat {
|
|
/* 调整聊天区域以保持一致的宽度 */
|
|
/* 调整聊天区域以保持一致的宽度 */
|
|
- padding: 24px 16px;
|
|
|
|
|
|
+ padding: 16px 0 ;
|
|
margin: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
@@ -3682,7 +3682,7 @@ const updateCollapsedState = () => {
|
|
/* 保持消息列表的宽度一致 */
|
|
/* 保持消息列表的宽度一致 */
|
|
width: 100%;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
max-width: 800px;
|
|
- margin: 0 auto;
|
|
|
|
|
|
+ margin: 60px auto 0;
|
|
padding: 0 10px;
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -3691,7 +3691,7 @@ const updateCollapsedState = () => {
|
|
width: 100%;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
margin: 0 auto;
|
|
- padding: 0 10px;
|
|
|
|
|
|
+ padding: 0;
|
|
}
|
|
}
|
|
|
|
|
|
.welcome-section {
|
|
.welcome-section {
|
|
@@ -3699,7 +3699,7 @@ const updateCollapsedState = () => {
|
|
width: 100%;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
margin: 0 auto;
|
|
- padding: 0 16px;
|
|
|
|
|
|
+ /* padding: 0 16px; */
|
|
}
|
|
}
|
|
|
|
|
|
.cards-container {
|
|
.cards-container {
|
|
@@ -5072,4 +5072,170 @@ button,
|
|
}
|
|
}
|
|
|
|
|
|
// ... existing code ...
|
|
// ... existing code ...
|
|
|
|
+</style>
|
|
|
|
+
|
|
|
|
+<style>
|
|
|
|
+/* 移动端适配样式 */
|
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
|
+ .layout {
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .header {
|
|
|
|
+ /* padding: 10px; */
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .user-profile-bar {
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 0 10px;
|
|
|
|
+ flex-wrap: nowrap;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .logo {
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ max-width: 120px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .user-info-bar {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ gap: 8px;
|
|
|
|
+ flex: 1;
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
+ min-width: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .theme-switch {
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .user-info {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ min-width: 0;
|
|
|
|
+ flex: 1;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .user-name {
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ margin: 0;
|
|
|
|
+ line-height: 1.2;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .avatar {
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ width: 32px;
|
|
|
|
+ height: 32px;
|
|
|
|
+ margin-left: 8px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ @media screen and (max-width: 480px) {
|
|
|
|
+ .user-info-bar {
|
|
|
|
+ gap: 4px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .logo {
|
|
|
|
+ max-width: 100px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .avatar {
|
|
|
|
+ width: 28px;
|
|
|
|
+ height: 28px;
|
|
|
|
+ margin-left: 4px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .logo {
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .logo-img {
|
|
|
|
+ width: 80px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .user-info-bar {
|
|
|
|
+ width: 100%;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .menu {
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 60px;
|
|
|
|
+ left: -100%;
|
|
|
|
+ width: 80%;
|
|
|
|
+ height: calc(100vh - 60px);
|
|
|
|
+ z-index: 1000;
|
|
|
|
+ transition: left 0.3s ease;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .menu.collapsed {
|
|
|
|
+ left: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .chat {
|
|
|
|
+ width: 100%;
|
|
|
|
+ margin-left: 0;
|
|
|
|
+ padding: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .message-list {
|
|
|
|
+ padding: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .message-bubble {
|
|
|
|
+ max-width: 90%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .config-container {
|
|
|
|
+ padding: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .cards-container {
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .suggestion-card {
|
|
|
|
+ width: 100%;
|
|
|
|
+ margin: 10px 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .collapse-left-button {
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 70px;
|
|
|
|
+ left: 10px;
|
|
|
|
+ z-index: 1001;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/* 针对更小屏幕的优化 */
|
|
|
|
+@media screen and (max-width: 480px) {
|
|
|
|
+ .user-info {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .theme-icon {
|
|
|
|
+ width: 20px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .avatar img {
|
|
|
|
+ width: 30px;
|
|
|
|
+ height: 30px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .message-content {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .new-conversation-btn {
|
|
|
|
+ padding: 8px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|