style(live-stream): update color scheme and enhance UI elements for improved aesthetics

- Changed background colors and text colors across various components to a lighter palette for better visibility and modern appearance.
- Added box shadows and borders to enhance the visual hierarchy and separation of UI elements.
- Updated button styles for hover and active states to provide a more engaging user experience.
- Improved overall layout consistency and readability in the live stream management interface.

src/views/live-stream/index.vue

@@ -1277,7 +1277,7 @@ onMounted(() => {
     display: flex;
     flex-direction: column;
     height: 100%;
-    background-color: #1a1a2e;
+    background-color: #f5f7fa;
   }
 }
 
@@ -1295,21 +1295,23 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  background-color: #16213e;
+  background-color: #fff;
   border-radius: 8px;
   overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 
   .video-header {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 16px;
-    background-color: #0f3460;
+    background-color: #fff;
+    border-bottom: 1px solid #e5e7eb;
 
     .title {
       font-size: 16px;
       font-weight: 600;
-      color: #fff;
+      color: #303133;
     }
   }
 
@@ -1326,7 +1328,7 @@ onMounted(() => {
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      color: #666;
+      color: #909399;
 
       p {
         margin-top: 15px;
@@ -1340,7 +1342,8 @@ onMounted(() => {
     align-items: center;
     gap: 8px;
     padding: 12px 16px;
-    background-color: #0f3460;
+    background-color: #fff;
+    border-top: 1px solid #e5e7eb;
   }
 }
 
@@ -1354,9 +1357,10 @@ onMounted(() => {
   overflow-y: auto;
 
   .panel-section {
-    background-color: #16213e;
+    background-color: #fff;
     border-radius: 8px;
     padding: 16px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 
     .section-title {
       display: flex;
@@ -1364,10 +1368,10 @@ onMounted(() => {
       justify-content: space-between;
       font-size: 14px;
       font-weight: 600;
-      color: #fff;
+      color: #303133;
       margin-bottom: 12px;
       padding-bottom: 8px;
-      border-bottom: 1px solid #0f3460;
+      border-bottom: 1px solid #e5e7eb;
     }
   }
 }
@@ -1385,21 +1389,21 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #0f3460;
-  border: 1px solid #1a4a7a;
+  background-color: #f5f7fa;
+  border: 1px solid #dcdfe6;
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s;
-  color: #94a3b8;
+  color: #606266;
 
   &:hover {
-    background-color: #1a4a7a;
-    border-color: #3b82f6;
-    color: #3b82f6;
+    background-color: #ecf5ff;
+    border-color: #4f46e5;
+    color: #4f46e5;
   }
 
   &:active {
-    background-color: #3b82f6;
+    background-color: #4f46e5;
     color: #fff;
   }
 
@@ -1408,10 +1412,10 @@ onMounted(() => {
   }
 
   &.ptz-center {
-    background-color: #1a4a7a;
+    background-color: #e5e7eb;
 
     &:hover {
-      background-color: #2563eb;
+      background-color: #4f46e5;
       color: #fff;
     }
   }
@@ -1425,14 +1429,14 @@ onMounted(() => {
   margin-bottom: 12px;
 
   .el-button {
-    background-color: #0f3460;
-    border-color: #1a4a7a;
-    color: #94a3b8;
+    background-color: #f5f7fa;
+    border-color: #dcdfe6;
+    color: #606266;
 
     &:hover {
-      background-color: #1a4a7a;
-      border-color: #3b82f6;
-      color: #3b82f6;
+      background-color: #ecf5ff;
+      border-color: #4f46e5;
+      color: #4f46e5;
     }
   }
 }
@@ -1445,13 +1449,13 @@ onMounted(() => {
 
   .label {
     font-size: 12px;
-    color: #94a3b8;
+    color: #606266;
     flex-shrink: 0;
   }
 
   .value {
     font-size: 12px;
-    color: #3b82f6;
+    color: #4f46e5;
     width: 30px;
     text-align: right;
   }
@@ -1460,15 +1464,15 @@ onMounted(() => {
     flex: 1;
 
     .el-slider__runway {
-      background-color: #0f3460;
+      background-color: #e5e7eb;
     }
 
     .el-slider__bar {
-      background-color: #3b82f6;
+      background-color: #4f46e5;
     }
 
     .el-slider__button {
-      border-color: #3b82f6;
+      border-color: #4f46e5;
     }
   }
 }
@@ -1494,25 +1498,29 @@ onMounted(() => {
     align-items: center;
     gap: 10px;
     padding: 10px 12px;
-    background-color: #0f3460;
-    border: 1px solid #1a4a7a;
+    background-color: #f5f7fa;
+    border: 1px solid #dcdfe6;
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s;
 
     &:hover {
-      background-color: #1a4a7a;
-      border-color: #3b82f6;
+      background-color: #ecf5ff;
+      border-color: #4f46e5;
     }
 
     &.active {
-      background-color: #3b82f6;
-      border-color: #3b82f6;
+      background-color: #4f46e5;
+      border-color: #4f46e5;
 
       .preset-index,
       .preset-name {
         color: #fff;
       }
+
+      .preset-index {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
     }
 
     .preset-index {
@@ -1521,17 +1529,17 @@ onMounted(() => {
       display: flex;
       align-items: center;
       justify-content: center;
-      background-color: #1a4a7a;
+      background-color: #e5e7eb;
       border-radius: 4px;
       font-size: 12px;
       font-weight: 600;
-      color: #3b82f6;
+      color: #4f46e5;
     }
 
     .preset-name {
       flex: 1;
       font-size: 13px;
-      color: #94a3b8;
+      color: #606266;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -1542,7 +1550,7 @@ onMounted(() => {
     padding: 20px 0;
 
     .el-empty__description {
-      color: #64748b;
+      color: #909399;
     }
   }
 }