From 96fca438f469beb53a92a051b72d7e97f9cde7be Mon Sep 17 00:00:00 2001
From: duoaohui <928970622@qq.com>
Date: Thu, 28 May 2026 10:15:07 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E8=BF=9E=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/meeting/MeetingToolbar.vue | 66 +++++++++++++------
 frontend/src/components/meeting/VideoTile.vue | 21 ++++++
 frontend/src/pages/meeting/room.vue           |  2 +-
 3 files changed, 68 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/meeting/MeetingToolbar.vue b/frontend/src/components/meeting/MeetingToolbar.vue
index 275c214..8e0ae4a 100644
--- a/frontend/src/components/meeting/MeetingToolbar.vue
+++ b/frontend/src/components/meeting/MeetingToolbar.vue
@@ -49,7 +49,7 @@
     </button>
 
     <button
-      class="btn"
+      class="btn btn-screen"
       :class="{ active: screenSharing, loading: screenLoading }"
       :disabled="screenLoading || screenDisabled"
       :title="screenDisabledReason || ''"
@@ -297,49 +297,55 @@ const emitIf = (name) => {
 @media (max-width: 750px) {
   .toolbar {
     position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    left: 14rpx;
+    right: 14rpx;
+    bottom: calc(12rpx + env(safe-area-inset-bottom));
     justify-content: space-between;
-    gap: 4rpx;
-    width: 100vw;
+    gap: 6rpx;
     box-sizing: border-box;
-    padding: 10rpx 8rpx calc(12rpx + env(safe-area-inset-bottom)) 8rpx;
-    background: linear-gradient(to top, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.92));
-    box-shadow: 0 -12rpx 30rpx rgba(0, 0, 0, 0.32);
-    border-top-color: rgba(148, 163, 184, 0.16);
+    padding: 14rpx 14rpx;
+    background: rgba(7, 15, 30, 0.9);
+    backdrop-filter: blur(18px);
+    border: 1rpx solid rgba(148, 163, 184, 0.18);
+    border-radius: 32rpx;
+    box-shadow: 0 12rpx 34rpx rgba(0, 0, 0, 0.42);
     overflow-x: hidden;
     overflow-y: hidden;
   }
   .btn {
     min-width: 0;
     flex: 1 1 0;
-    gap: 4rpx;
+    gap: 6rpx;
     padding: 4rpx 0;
-    border-radius: 14rpx;
+    border-radius: 18rpx;
   }
   .btn:hover { background: transparent; }
   .btn:active { background: rgba(255, 255, 255, 0.08); }
+  .btn-screen {
+    display: none;
+  }
   .icon {
-    width: 48rpx;
-    height: 48rpx;
+    width: 56rpx;
+    height: 56rpx;
     background: rgba(51, 65, 85, 0.92);
     box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, 0.08);
   }
   .icon svg {
-    width: 36rpx;
-    height: 36rpx;
+    width: 40rpx;
+    height: 40rpx;
   }
   .btn.active .icon { background: #2563EB; }
   .btn[disabled] .icon {
-    background: rgba(51, 65, 85, 0.58);
-    color: rgba(255, 255, 255, 0.55);
+    background: rgba(30, 41, 59, 0.72);
+    color: rgba(255, 255, 255, 0.38);
+    box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, 0.05);
   }
-  .btn[disabled] .label { color: rgba(255, 255, 255, 0.48); }
+  .btn[disabled] .label { color: rgba(255, 255, 255, 0.36); }
   .btn-leave .icon { background: #EF4444; }
+  .btn-leave .label { color: #FECACA; }
   .label {
     max-width: 100%;
-    font-size: 18rpx;
+    font-size: 19rpx;
     line-height: 1;
     white-space: nowrap;
     overflow: hidden;
@@ -355,4 +361,24 @@ const emitIf = (name) => {
     font-size: 16rpx;
   }
 }
+
+@media (max-width: 380px) {
+  .toolbar {
+    left: 10rpx;
+    right: 10rpx;
+    padding-left: 8rpx;
+    padding-right: 8rpx;
+  }
+  .icon {
+    width: 50rpx;
+    height: 50rpx;
+  }
+  .icon svg {
+    width: 36rpx;
+    height: 36rpx;
+  }
+  .label {
+    font-size: 17rpx;
+  }
+}
 </style>
diff --git a/frontend/src/components/meeting/VideoTile.vue b/frontend/src/components/meeting/VideoTile.vue
index 42717af..cd53707 100644
--- a/frontend/src/components/meeting/VideoTile.vue
+++ b/frontend/src/components/meeting/VideoTile.vue
@@ -353,4 +353,25 @@ onBeforeUnmount(() => {
 .tile.compact .footer { padding: 8rpx 12rpx; }
 .tile.compact .name { font-size: 20rpx; }
 .tile.compact .tag { font-size: 18rpx; padding: 2rpx 8rpx; }
+
+@media (max-width: 750px) {
+  .footer {
+    left: 12rpx;
+    right: 12rpx;
+    bottom: 12rpx;
+    padding: 8rpx 12rpx;
+    border-radius: 14rpx;
+    background: rgba(2, 6, 23, 0.62);
+    backdrop-filter: blur(10px);
+  }
+  .name {
+    font-size: 20rpx;
+  }
+  .tile.compact .footer {
+    left: 8rpx;
+    right: 8rpx;
+    bottom: 8rpx;
+    padding: 6rpx 10rpx;
+  }
+}
 </style>
diff --git a/frontend/src/pages/meeting/room.vue b/frontend/src/pages/meeting/room.vue
index 0806f04..b582955 100644
--- a/frontend/src/pages/meeting/room.vue
+++ b/frontend/src/pages/meeting/room.vue
@@ -1077,7 +1077,7 @@ onUnload(() => {
 
 @media (max-width: 750px) {
   .body {
-    padding-bottom: calc(94rpx + env(safe-area-inset-bottom));
+    padding-bottom: calc(142rpx + env(safe-area-inset-bottom));
     box-sizing: border-box;
   }
   /* 小屏幕：聊天面板改为全屏浮层，避免挤压视频 */