优化直播大屏

src/views/live/liveConsole/LiveConsole.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="console">
+    <!-- 雪花效果 -->
+    <Snowfall />
 
     <div class="left-panel">
       <h2>学员列表</h2>
@@ -100,7 +102,12 @@
     </div>
 
     <div class="middle-panel">
-      <h2>消息管理</h2>
+      <h2>直播管理</h2>
+
+      <div class="live-player">
+        <h3>直播观看</h3>
+        <LivePlayer ref="livePlayer" :videoParam="videoParam" />
+      </div>
 
       <div class="discussion-messages">
         <h3>讨论区消息</h3>
@@ -178,6 +185,11 @@
         <!--          </div>-->
         <!--        </div>-->
       </div>
+    </div>
+
+    <div class="right-panel">
+      <h2>运营工具</h2>
+      
       <div class="system-messages">
         <h3>系统消息</h3>
         <textarea placeholder="输入系统消息" v-model="newMsg"></textarea>
@@ -187,14 +199,6 @@
           <button @click="showTopMsgDialog">顶部消息</button>
         </div>
       </div>
-    </div>
-
-    <div class="right-panel">
-      <h2>运营工具</h2>
-      <div class="live-player">
-        <h3>直播观看</h3>
-        <LivePlayer ref="livePlayer" :videoParam="videoParam" />
-      </div>
 
       <div class="automation">
         <h3>运营自动化</h3>
@@ -262,6 +266,7 @@
 
 <script>
 import LivePlayer from './LivePlayer.vue';
+import Snowfall from './Snowfall.vue';
 import {blockUser, changeUserStatus, getLiveUserTotals, dashBoardWatchUserList} from '@/api/live/liveWatchUser'
 import { listLiveSingleMsg,delLiveMsg } from '@/api/live/liveMsg'
 import { getLive } from '@/api/live/live'
@@ -271,7 +276,7 @@ import ScreenScale from './ScreenScale.vue'; // 路径根据实际位置调整
 
 export default {
   components: {
-    LivePlayer,ScreenScale
+    LivePlayer,ScreenScale,Snowfall
   },
   props: {
     liveId: {
@@ -1496,293 +1501,700 @@ export default {
 .console {
   display: flex;
   height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 16px;
+  gap: 16px;
+  box-sizing: border-box;
 }
 
 .left-panel, .middle-panel, .right-panel {
-  padding: 20px;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  padding: 24px;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .left-panel {
-  width: 30%;
-  background: #f8fafc;
-  border-right: 1px solid #e2e8f0;
+  width: 28%;
+  min-width: 320px;
 }
 
 .middle-panel {
-  width: 40%;
-  background: #f8fafc;
-  border-right: 1px solid #e2e8f0;
+  width: 44%;
+  min-width: 400px;
 }
 
 .right-panel {
-  width: 30%;
-  background: #f8fafc;
+  width: 28%;
+  min-width: 320px;
+}
+
+/* 标题样式统一优化 */
+.left-panel h2,
+.middle-panel h2,
+.right-panel h2 {
+  margin: 0 0 20px 0;
+  font-size: 22px;
+  font-weight: 600;
+  color: #1a202c;
+  display: flex;
+  align-items: center;
+  padding-bottom: 16px;
+  border-bottom: 2px solid #f0f0f0;
+}
+
+.left-panel h2::before {
+  content: '👥';
+  margin-right: 8px;
+  font-size: 24px;
+}
+
+.middle-panel h2::before {
+  content: '📺';
+  margin-right: 8px;
+  font-size: 24px;
+}
+
+.right-panel h2::before {
+  content: '🛠️';
+  margin-right: 8px;
+  font-size: 24px;
+}
+
+.left-panel h3,
+.middle-panel h3,
+.right-panel h3 {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #2d3748;
 }
 
 .search {
-  margin: 10px 0;
+  margin: 0 0 16px 0;
+  display: flex;
+  gap: 8px;
+  background: #f7fafc;
+  padding: 8px;
+  border-radius: 12px;
+  border: 2px solid #e2e8f0;
+  transition: all 0.3s ease;
+}
+
+.search:focus-within {
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
 .search input {
-  width: 70%;
-  padding: 8px;
-  border: 1px solid #cbd5e1;
-  border-radius: 4px;
+  flex: 1;
+  padding: 10px 12px;
+  border: none;
+  background: transparent;
+  font-size: 14px;
+  color: #2d3748;
+  outline: none;
+}
+
+.search input::placeholder {
+  color: #a0aec0;
 }
 
 .search button {
-  padding: 8px 15px;
-  background: #3b82f6;
+  padding: 10px 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: #fff;
   border: none;
-  border-radius: 4px;
+  border-radius: 8px;
   cursor: pointer;
+  font-weight: 500;
+  font-size: 14px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 }
 
-.tabs {
-  display: flex;
-  margin: 10px 0;
+.search button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
 }
 
-.tabs button {
-  padding: 8px 15px;
-  border: 1px solid #e2e8f0;
-  background: #fff;
-  cursor: pointer;
+.search button:active {
+  transform: translateY(0);
 }
 
-.tabs button.active {
-  background: #3b82f6;
-  color: #fff;
-  border-color: #3b82f6;
+/* Tab样式已由 Element UI 的 el-tabs 处理，这里添加自定义样式 */
+::v-deep .live-console-tab-right .el-tabs__header {
+  margin-bottom: 16px;
+  background: #f7fafc;
+  border-radius: 12px;
+  padding: 4px;
 }
 
-.user-list {
-  max-height: 600px;
-  overflow-y: auto;
+::v-deep .live-console-tab-right .el-tabs__nav-wrap::after {
+  display: none;
 }
 
-.user-item {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  border-bottom: 1px solid #e2e8f0;
+::v-deep .live-console-tab-right .el-tabs__item {
+  color: #718096;
+  font-weight: 500;
+  font-size: 14px;
+  border: none;
+  transition: all 0.3s ease;
+  border-radius: 8px;
+  margin: 0 4px;
 }
 
-.user-item img {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  margin-right: 10px;
+::v-deep .live-console-tab-right .el-tabs__item:hover {
+  color: #667eea;
 }
 
-.user-info {
-  flex: 1;
+::v-deep .live-console-tab-right .el-tabs__item.is-active {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 }
 
-.user-name {
-  font-weight: bold;
+::v-deep .live-console-tab-right .el-tabs__active-bar {
+  display: none;
 }
 
-.user-status {
-  font-size: 12px;
-  color: #64748b;
+/* 用户列表样式优化 */
+.scrollbar-demo-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 72px;
+  margin: 0 0 8px 0;
+  padding: 12px;
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid #f0f0f0;
+  transition: all 0.3s ease;
+  cursor: pointer;
 }
 
-.online {
-  color: #10b981;
+.scrollbar-demo-item:hover {
+  transform: translateX(4px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  border-color: #667eea;
 }
 
-.offline {
-  color: #94a3b8;
+.scrollbar-demo-item .el-avatar {
+  border: 2px solid #e2e8f0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.user-actions {
-  display: flex;
+.scrollbar-demo-item .el-col:first-child {
+  font-size: 14px;
+  font-weight: 500;
+  color: #2d3748;
 }
 
-.user-actions button {
-  padding: 5px 10px;
-  margin-left: 5px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
+.scrollbar-demo-item .el-col:last-child {
+  font-size: 12px;
+  color: #718096;
+  font-family: 'Courier New', monospace;
 }
 
-.block {
-  background: #ef4444;
-  color: #fff;
+/* Popover 中的操作链接样式 */
+.scrollbar-demo-item a {
+  display: inline-block;
+  padding: 6px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  border-radius: 6px;
 }
 
-.unblock {
-  background: #10b981;
-  color: #fff;
+.scrollbar-demo-item a:hover {
+  background: #fff5f5;
+  transform: scale(1.05);
 }
 
-.mute {
-  background: #f59e0b;
-  color: #fff;
+/* 在线状态指示器 */
+.scrollbar-demo-item .el-avatar::after {
+  content: '';
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  width: 10px;
+  height: 10px;
+  background: #48bb78;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 6px rgba(72, 187, 120, 0.5);
 }
 
-.unmute {
-  background: #3b82f6;
-  color: #fff;
+.system-messages, .discussion-messages {
+  margin: 0 0 20px 0;
+  background: #f7fafc;
+  padding: 20px;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  flex-shrink: 0;
 }
 
-.system-messages, .discussion-messages {
-  margin: 20px 0;
-  background: #fff;
-  padding: 15px;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+.discussion-messages {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin-bottom: 0;
 }
 
 .system-messages textarea {
   width: 100%;
-  height: 100px;
-  border: 1px solid #e2e8f0;
-  border-radius: 4px;
-  padding: 8px;
+  min-height: 100px;
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 12px;
   box-sizing: border-box;
+  font-size: 14px;
+  color: #2d3748;
+  resize: vertical;
+  transition: all 0.3s ease;
+  background: #ffffff;
+}
+
+.system-messages textarea:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.system-messages textarea::placeholder {
+  color: #a0aec0;
 }
 
 .message-actions {
-  margin-top: 10px;
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 
 .message-actions button {
-  padding: 5px 10px;
-  margin-right: 5px;
-  background: #3b82f6;
+  padding: 10px 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: #fff;
   border: none;
-  border-radius: 4px;
+  border-radius: 8px;
   cursor: pointer;
+  font-weight: 500;
+  font-size: 14px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 }
 
-.message-list {
-  max-height: 300px;
-  overflow-y: auto;
-  margin-top: 10px;
+.message-actions button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
 }
 
-.message-item {
-  display: flex;
-  margin-bottom: 10px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #e2e8f0;
+.message-actions button:active {
+  transform: translateY(0);
 }
 
-.message-avatar img {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  margin-right: 10px;
+.message-actions button:nth-child(2) {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);
+}
+
+.message-actions button:nth-child(2):hover {
+  box-shadow: 0 6px 16px rgba(245, 87, 108, 0.4);
+}
+
+.message-actions button:nth-child(3) {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
 }
 
-.message-content {
+.message-actions button:nth-child(3):hover {
+  box-shadow: 0 6px 16px rgba(79, 172, 254, 0.4);
+}
+
+.message-container {
+  position: relative;
   flex: 1;
+  background: #ffffff;
+  border-radius: 12px;
+  border: 2px solid #e2e8f0;
+  overflow: hidden;
+  margin-top: 12px;
 }
 
-.message-user {
-  font-weight: bold;
+.message-settings {
+  margin-bottom: 12px;
+  padding: 12px;
+  background: #f7fafc;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
 }
 
-.message-text {
+.message-settings label {
+  display: flex;
+  align-items: center;
   font-size: 14px;
-  color: #64748b;
+  font-weight: 500;
+  color: #2d3748;
+  cursor: pointer;
 }
 
-.message-actions button {
-  padding: 3px 8px;
+.message-settings input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+  cursor: pointer;
+}
+
+/* 消息气泡优化 */
+.message-container .el-row {
+  padding: 8px 12px;
+  margin-bottom: 4px;
+}
+
+.message-container .el-row:hover {
+  background: #f7fafc;
+}
+
+/* 右侧消息（发送者） */
+.message-container .el-row[type="flex"][justify="end"] > div > div:nth-child(2) > div:last-child {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #ffffff;
+  padding: 10px 14px;
+  border-radius: 12px 12px 4px 12px;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+  max-width: 280px;
+}
+
+/* 左侧消息（接收者） */
+.message-container .el-row:not([justify="end"]) .el-col:nth-child(2) > .el-row > .el-col:nth-child(2) > div {
+  background: #f0f0f0;
+  color: #2d3748;
+  padding: 10px 14px;
+  border-radius: 12px 12px 12px 4px;
+  max-width: 280px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+/* 消息操作链接 */
+.message-container a {
   font-size: 12px;
-  background: #3b82f6;
-  color: #fff;
-  border: none;
+  padding: 4px 8px;
   border-radius: 4px;
-  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.message-container a:hover {
+  background: #fff5f5;
 }
 
 .live-player, .automation, .watermark {
-  margin: 20px 0;
-  background: #fff;
-  padding: 15px;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  margin: 0 0 20px 0;
+  background: #f7fafc;
+  padding: 20px;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  flex-shrink: 0;
+}
+
+.live-player {
+  background: #000000;
+  padding: 0;
+  overflow: hidden;
+}
+
+.live-player h3 {
+  background: #1a202c;
+  color: #ffffff;
+  padding: 12px 16px;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
 }
 
 .timeline-items {
-  margin: 10px 0;
+  margin: 12px 0 0 0;
+  max-height: 200px;
+  overflow-y: auto;
 }
 
 .timeline-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 8px 0;
-  border-bottom: 1px solid #e2e8f0;
+  padding: 12px;
+  margin-bottom: 8px;
+  background: #ffffff;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  transition: all 0.3s ease;
+}
+
+.timeline-item:hover {
+  border-color: #667eea;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
+}
+
+.timeline-item .time {
+  font-size: 13px;
+  font-weight: 600;
+  color: #667eea;
+  font-family: 'Courier New', monospace;
+}
+
+.timeline-item .action {
+  flex: 1;
+  margin: 0 12px;
+  font-size: 14px;
+  color: #2d3748;
 }
 
 .delete {
-  background: #ef4444;
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
   color: #fff;
   border: none;
-  border-radius: 4px;
-  padding: 3px 8px;
+  border-radius: 6px;
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 500;
   cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(245, 87, 108, 0.3);
+}
+
+.delete:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(245, 87, 108, 0.4);
 }
 
 .add {
-  background: #10b981;
+  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
   color: #fff;
   border: none;
-  border-radius: 4px;
-  padding: 8px 15px;
+  border-radius: 8px;
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 500;
   cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(67, 233, 123, 0.3);
+}
+
+.add:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(67, 233, 123, 0.4);
 }
 
 .watermark-settings textarea {
   width: 100%;
-  height: 100px;
-  border: 1px solid #e2e8f0;
-  border-radius: 4px;
-  padding: 8px;
+  min-height: 120px;
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 12px;
   box-sizing: border-box;
+  font-size: 14px;
+  color: #2d3748;
+  background: #ffffff;
+  resize: vertical;
+  transition: all 0.3s ease;
+}
+
+.watermark-settings textarea:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.watermark-settings textarea::placeholder {
+  color: #a0aec0;
+}
+
+.watermark-settings textarea:disabled {
+  background: #f7fafc;
+  color: #a0aec0;
+  cursor: not-allowed;
 }
 
 .watermark-options {
-  margin-top: 10px;
+  margin-top: 12px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 .watermark-options label {
-  display: block;
-  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: #2d3748;
+}
+
+.watermark-options input[type="number"] {
+  width: 80px;
+  padding: 8px 12px;
+  margin: 0 8px;
+  border: 2px solid #e2e8f0;
+  border-radius: 6px;
+  font-size: 14px;
+  color: #2d3748;
+  transition: all 0.3s ease;
+  background: #ffffff;
+}
+
+.watermark-options input[type="number"]:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.watermark-options input[type="number"]:disabled {
+  background: #f7fafc;
+  color: #a0aec0;
+  cursor: not-allowed;
+}
+
+.watermark-options input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+  cursor: pointer;
 }
 /* 隐藏 el-scrollbar 的横向滚动条 */
 .el-scrollbar__wrap {
   overflow-x: hidden !important;
 }
+
 .custom-scrollbar .el-scrollbar__wrap {
   overflow-x: hidden !important;
 }
-.scrollbar-demo-item{
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-  margin: 10px;
-  text-align: center;
+
+/* 自定义滚动条样式 */
+.custom-scrollbar ::v-deep .el-scrollbar__thumb {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border-radius: 4px;
+  opacity: 0.6;
 }
-.message-container {
-  position: relative;
+
+.custom-scrollbar ::v-deep .el-scrollbar__thumb:hover {
+  opacity: 0.8;
 }
+
 .load-latest-btn {
   position: absolute;
   bottom: 20px;
   right: 20px;
   z-index: 10;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
+  animation: pulse 2s infinite;
+}
+
+.load-latest-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
+}
+
+@keyframes pulse {
+  0%, 100% {
+    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
+  }
+  50% {
+    box-shadow: 0 6px 24px rgba(102, 126, 234, 0.6);
+  }
+}
+
+/* Dialog 优化 */
+::v-deep .el-dialog {
+  border-radius: 16px;
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
+}
+
+::v-deep .el-dialog__header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px 16px 0 0;
+  padding: 20px 24px;
+}
+
+::v-deep .el-dialog__title {
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 18px;
+}
+
+::v-deep .el-dialog__headerbtn .el-dialog__close {
+  color: #ffffff;
+  font-size: 20px;
+}
+
+::v-deep .el-dialog__body {
+  padding: 24px;
+}
+
+::v-deep .el-form-item__label {
+  font-weight: 500;
+  color: #2d3748;
+}
+
+::v-deep .el-input__inner,
+::v-deep .el-textarea__inner {
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+::v-deep .el-input__inner:focus,
+::v-deep .el-textarea__inner:focus {
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+::v-deep .el-button--primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  transition: all 0.3s ease;
+}
+
+::v-deep .el-button--primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
+}
+
+/* Popover 优化 */
+::v-deep .el-popover {
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  padding: 8px;
+}
+
+/* 响应式优化 */
+@media (max-width: 1600px) {
+  .left-panel, .right-panel {
+    width: 26%;
+    min-width: 280px;
+  }
+  .middle-panel {
+    width: 48%;
+  }
+}
+
+@media (max-width: 1200px) {
+  .console {
+    flex-direction: column;
+    overflow-y: auto;
+  }
+  .left-panel, .middle-panel, .right-panel {
+    width: 100%;
+    min-width: auto;
+    max-height: 600px;
+  }
 }
 </style>

src/views/live/liveConsole/Snowfall.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="snowfall-container">
+    <div 
+      v-for="(snowflake, index) in snowflakes" 
+      :key="index"
+      class="snowflake"
+      :style="snowflake.style"
+    >
+      ❄
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Snowfall',
+  data() {
+    return {
+      snowflakes: [],
+      snowflakeCount: 100 // 雪花数量
+    }
+  },
+  mounted() {
+    this.createSnowflakes();
+  },
+  methods: {
+    createSnowflakes() {
+      for (let i = 0; i < this.snowflakeCount; i++) {
+        this.snowflakes.push({
+          style: {
+            left: `${Math.random() * 100}%`,
+            animationDuration: `${Math.random() * 3 + 5}s`,
+            animationDelay: `${Math.random() * 5}s`,
+            fontSize: `${Math.random() * 10 + 10}px`,
+            opacity: Math.random() * 0.6 + 0.4
+          }
+        });
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.snowfall-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.snowflake {
+  position: absolute;
+  top: -20px;
+  color: #fff;
+  user-select: none;
+  animation: fall linear infinite;
+}
+
+@keyframes fall {
+  0% {
+    top: -20px;
+    transform: translateX(0) rotate(0deg);
+  }
+  100% {
+    top: 100vh;
+    transform: translateX(100px) rotate(360deg);
+  }
+}
+</style>