🌈 style: 样式调整

src/views/oli-connection/monitoring/detail.vue

@@ -330,10 +330,10 @@ function render() {
     animationDurationUpdate: 200,
     animationEasingUpdate: 'linear',
     grid: {
-      left: '6%',
+      left: '5%',
       top: '5%',
-      right: '6%',
-      bottom: '12%'
+      right: '5%',
+      bottom: '8%'
     },
     tooltip: {
       trigger: 'axis',
@@ -389,14 +389,6 @@ function render() {
       selected: selectedDimension.value,
       show: false
     },
-    // series: dimensions.value.map((item) => ({
-    //   name: item.name,
-    //   type: 'line',
-    //   smooth: true,
-    //   showSymbol: false,
-    //   color: item.color,
-    //   data: [] // 占位数组
-    // }))
     series: dimensions.value.map((item) => ({
       name: item.name,
       type: 'line',
@@ -675,7 +667,7 @@ onUnmounted(() => {
     class="grid grid-cols-[260px_1fr] grid-rows-[80px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
   >
     <div
-      class="grid-col-span-2 bg-white rounded-xl shadow-sm border border-gray-100 border-solid px-6 flex items-center justify-between shrink-0"
+      class="grid-col-span-2 rounded-xl shadow-sm border border-gray-100 border-solid px-6 flex items-center justify-between shrink-0 bg-gradient-to-r from-blue-100 to-white"
     >
       <div class="flex items-center gap-4">
         <div
@@ -715,14 +707,14 @@ onUnmounted(() => {
     </div>
 
     <el-scrollbar
-      class="bg-white rounded-xl shadow-sm border border-gray-100 border-solid overflow-hidden"
+      class="rounded-xl shadow-sm border border-gray-100 border-solid overflow-hidden bg-gradient-to-b from-blue-100 to-white"
       view-class="flex flex-col min-h-full"
       v-loading="dimensionLoading"
     >
       <template v-for="citem in dimensionsContent" :key="citem.label">
         <template v-if="citem.judgment ? Boolean(citem.value.length) : true">
           <div
-            class="sticky-title z-88 bg-white/95 flex justify-between items-center py-3 px-4 border-0 border-solid border-b border-gray-50"
+            class="sticky-title bg-blue-100 z-88 flex justify-between items-center py-3 px-4 border-0 border-solid"
           >
             <span class="font-bold text-sm text-gray-700! flex items-center gap-2">
               <el-icon><component :is="citem.icon" /></el-icon>
@@ -741,7 +733,7 @@ onUnmounted(() => {
               v-for="item in citem.value"
               :key="item.identifier"
               @click="handleClickSpec(item.name)"
-              class="dimension-card group relative p-3 rounded-lg border border-solid bg-white border-gray-200 transition-all duration-300 cursor-pointer select-none"
+              class="dimension-card group relative p-3 rounded-lg border border-solid bg-transparent border-gray-300 transition-all duration-300 cursor-pointer select-none"
               :class="{ 'is-active': selectedDimension[item.name] }"
               :style="{
                 '--theme-color': item.color,
@@ -787,7 +779,7 @@ onUnmounted(() => {
     </el-scrollbar>
 
     <div
-      class="bg-white rounded-xl shadow-sm border border-gray-100 border-solid p-4 flex flex-col"
+      class="rounded-xl shadow-sm border border-gray-100 border-solid p-4 flex flex-col bg-gradient-to-b from-blue-100 to-white"
     >
       <header class="flex items-center justify-between mb-4">
         <h3 class="flex items-center gap-2">
@@ -821,7 +813,7 @@ onUnmounted(() => {
             :style="{
               '--theme-bg-hover': item.bgHover
             }"
-            class="w-8 h-full flex flex-col items-center justify-between py-2 gap-1 rounded-full group relative bg-gray-50 border border-solid border-transparent transition-all duration-300 hover:bg-[var(--theme-bg-hover)] hover-border-gray-200 hover:shadow-md cursor-pointer active:scale-95"
+            class="w-8 h-full flex flex-col items-center justify-between py-2 gap-1 rounded-full group relative bg-transparent border border-solid border-transparent transition-all duration-300 hover:bg-[var(--theme-bg-hover)] hover-border-gray-200 hover:shadow-md cursor-pointer active:scale-95"
             @click="handleClickSpec(item.name)"
           >
             <span class="[writing-mode:sideways-lr] text-xs text-gray-400">{{ item.max }}</span>
@@ -859,32 +851,23 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-/* Icon Fix */
 :deep(.el-tag__content) {
   display: flex;
   align-items: center;
   gap: 2px;
 }
 
-/* Sticky Header */
 .sticky-title {
   position: sticky;
   top: 0;
 }
 
-/*
-  核心样式：霓虹卡片效果
-  使用 CSS 变量实现动态颜色
-*/
-
-/* Hover 状态：背景微亮，边框变色 */
 .dimension-card:hover {
   background-color: var(--theme-bg-hover);
   border-color: var(--theme-bg-active);
   box-shadow: 0 4px 12px -2px rgb(0 0 0 / 5%);
 }
 
-/* Active 状态：背景更亮，边框为主题色，带轻微发光投影 */
 .dimension-card.is-active {
   background-color: var(--theme-bg-active);
   border-color: var(--theme-color);
@@ -893,7 +876,6 @@ onUnmounted(() => {
     0 4px 12px -2px var(--theme-bg-active);
 }
 
-/* 滚动条美化 */
 :deep(.el-scrollbar__bar.is-vertical) {
   right: 2px;
   width: 4px;

src/views/oli-connection/monitoring/index.vue

@@ -391,7 +391,8 @@ const openDetail = (
                 <div
                   class="px-4 py-2.5 bg-gray-50/80 dark:bg-[#1d1e1f] flex justify-between items-center group-hover:bg-blue-50/30 dark:group-hover:bg-blue-900/10 transition-colors"
                 >
-                  <span class="text-[10px] text-gray-400">ID: {{ item.id }}</span>
+                  <span class="text-[10px] text-gray-400"></span>
+                  <!-- <span class="text-[10px] text-gray-400">ID: {{ item.id }}</span> -->
                   <el-button type="primary" link size="small" class="!px-0 group/btn">
                     <span
                       class="mr-1 group-hover/btn:underline"

src/views/pms/device/monitor/TdDeviceInfo.vue

@@ -285,10 +285,10 @@ function render() {
     animationDurationUpdate: 200,
     animationEasingUpdate: 'linear',
     grid: {
-      left: '6%',
+      left: '5%',
       top: '5%',
-      right: '6%',
-      bottom: '12%'
+      right: '5%',
+      bottom: '8%'
     },
     tooltip: {
       trigger: 'axis',
@@ -613,7 +613,7 @@ onUnmounted(() => {
     class="grid grid-cols-[260px_1fr] grid-rows-[80px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
   >
     <div
-      class="grid-col-span-2 bg-white rounded-xl shadow-sm border border-gray-100 border-solid px-6 flex items-center justify-between shrink-0"
+      class="grid-col-span-2 rounded-xl shadow-sm border border-gray-100 border-solid px-6 flex items-center justify-between shrink-0 bg-gradient-to-r from-blue-100 to-white"
     >
       <div class="flex items-center gap-4">
         <div
@@ -653,14 +653,14 @@ onUnmounted(() => {
     </div>
 
     <el-scrollbar
-      class="bg-white rounded-xl shadow-sm border border-gray-100 border-solid overflow-hidden"
+      class="rounded-xl shadow-sm border border-gray-100 border-solid overflow-hidden bg-gradient-to-b from-blue-100 to-white"
       view-class="flex flex-col min-h-full"
       v-loading="dimensionLoading"
     >
       <template v-for="citem in dimensionsContent" :key="citem.label">
         <template v-if="citem.judgment ? Boolean(citem.value.length) : true">
           <div
-            class="sticky-title z-88 bg-white/95 flex justify-between items-center py-3 px-4 border-0 border-solid border-b border-gray-50"
+            class="sticky-title bg-blue-100 z-88 flex justify-between items-center py-3 px-4 border-0 border-solid"
           >
             <span class="font-bold text-sm text-gray-700! flex items-center gap-2">
               <el-icon><component :is="citem.icon" /></el-icon>
@@ -679,7 +679,7 @@ onUnmounted(() => {
               v-for="item in citem.value"
               :key="item.identifier"
               @click="handleClickSpec(item.name)"
-              class="dimension-card group relative p-3 rounded-lg border border-solid bg-white border-gray-200 transition-all duration-300 cursor-pointer select-none"
+              class="dimension-card group relative p-3 rounded-lg border border-solid bg-transparent border-gray-300 transition-all duration-300 cursor-pointer select-none"
               :class="{ 'is-active': selectedDimension[item.name] }"
               :style="{
                 '--theme-color': item.color,
@@ -725,7 +725,7 @@ onUnmounted(() => {
     </el-scrollbar>
 
     <div
-      class="bg-white rounded-xl shadow-sm border border-gray-100 border-solid p-4 flex flex-col"
+      class="rounded-xl shadow-sm border border-gray-100 border-solid p-4 flex flex-col bg-gradient-to-b from-blue-100 to-white"
     >
       <header class="flex items-center justify-between mb-4">
         <h3 class="flex items-center gap-2">
@@ -759,7 +759,7 @@ onUnmounted(() => {
             :style="{
               '--theme-bg-hover': item.bgHover
             }"
-            class="w-8 h-full flex flex-col items-center justify-between py-2 gap-1 rounded-full group relative bg-gray-50 border border-solid border-transparent transition-all duration-300 hover:bg-[var(--theme-bg-hover)] hover-border-gray-200 hover:shadow-md cursor-pointer active:scale-95"
+            class="w-8 h-full flex flex-col items-center justify-between py-2 gap-1 rounded-full group relative bg-transparent border border-solid border-transparent transition-all duration-300 hover:bg-[var(--theme-bg-hover)] hover-border-gray-200 hover:shadow-md cursor-pointer active:scale-95"
             @click="handleClickSpec(item.name)"
           >
             <span class="[writing-mode:sideways-lr] text-xs text-gray-400">{{ item.max }}</span>
@@ -797,32 +797,23 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-/* Icon Fix */
 :deep(.el-tag__content) {
   display: flex;
   align-items: center;
   gap: 2px;
 }
 
-/* Sticky Header */
 .sticky-title {
   position: sticky;
   top: 0;
 }
 
-/*
-  核心样式：霓虹卡片效果
-  使用 CSS 变量实现动态颜色
-*/
-
-/* Hover 状态：背景微亮，边框变色 */
 .dimension-card:hover {
   background-color: var(--theme-bg-hover);
   border-color: var(--theme-bg-active);
   box-shadow: 0 4px 12px -2px rgb(0 0 0 / 5%);
 }
 
-/* Active 状态：背景更亮，边框为主题色，带轻微发光投影 */
 .dimension-card.is-active {
   background-color: var(--theme-bg-active);
   border-color: var(--theme-color);
@@ -831,7 +822,6 @@ onUnmounted(() => {
     0 4px 12px -2px var(--theme-bg-active);
 }
 
-/* 滚动条美化 */
 :deep(.el-scrollbar__bar.is-vertical) {
   right: 2px;
   width: 4px;