视频连线

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;
+    left: 14rpx;
-    right: 0;
+    right: 14rpx;
-    bottom: 0;
+    bottom: calc(12rpx + env(safe-area-inset-bottom));
     justify-content: space-between;
-    gap: 4rpx;
+    gap: 6rpx;
-    width: 100vw;
     box-sizing: border-box;
-    padding: 10rpx 8rpx calc(12rpx + env(safe-area-inset-bottom)) 8rpx;
+    padding: 14rpx 14rpx;
-    background: linear-gradient(to top, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.92));
+    background: rgba(7, 15, 30, 0.9);
-    box-shadow: 0 -12rpx 30rpx rgba(0, 0, 0, 0.32);
+    backdrop-filter: blur(18px);
-    border-top-color: rgba(148, 163, 184, 0.16);
+    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;
+    width: 56rpx;
-    height: 48rpx;
+    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;
+    width: 40rpx;
-    height: 36rpx;
+    height: 40rpx;
   }
   .btn.active .icon { background: #2563EB; }
   .btn[disabled] .icon {
-    background: rgba(51, 65, 85, 0.58);
+    background: rgba(30, 41, 59, 0.72);
-    color: rgba(255, 255, 255, 0.55);
+    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>

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>

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;
   }
   /* 小屏幕：聊天面板改为全屏浮层，避免挤压视频 */