style(blockingData): 统一模块样式并优化布局

- 为所有模块添加统一边框样式和阴影效果
- 调整模块标题格式为"模块X 描述"
- 移除背景渐变和特殊边框，采用更简洁的设计
- 优化网格布局为单列显示
- 调整标题颜色和大小增强可读性

src/views/blockingData/blockingDataScreen/components/ModuleContainer.vue

@@ -24,30 +24,34 @@ defineProps({
   height: 100%;
   display: flex;
   flex-direction: column;
-  background: rgba(13, 80, 122, 0.3);
-  border: 1px solid rgba(112, 207, 231, 0.3);
-  border-radius: 4px;
+  // background: rgba(13, 80, 122, 0.3);
+  // border: 1px solid rgba(112, 207, 231, 0.3);
+  // border-radius: 4px;
+
 }
 
 .module-header {
   width: 100%;
-  height: 36px;
+  padding: 10px;
   display: flex;
   align-items: center;
-  padding: 0 15px;
-  background: linear-gradient(90deg, rgba(11, 88, 131, 0.8) 0%, rgba(13, 80, 122, 0.4) 100%);
-  border-bottom: 1px solid rgba(112, 207, 231, 0.3);
+  text-align: center;
+  border: 1px solid #eee;
+  justify-content: center;
+  margin-bottom: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .module-title {
-  font-size: 16px;
+  font-size: 20px;
   font-weight: 600;
-  color: #fbffff;
+  color: #2E75B6;
+  text-align: center;
 }
 
 .module-content {
   flex: 1;
-  padding: 10px;
-  overflow: hidden;
+
+
 }
 </style>

src/views/blockingData/blockingDataScreen/components/ModuleFour.vue

@@ -1,5 +1,5 @@
 <template>
-  <module-container title="放行速率分析">
+  <module-container title="模块四 放行速率分析">
     <div class="module-four-content">
       <div class="chart-row">
         <div class="chart-item">
@@ -196,6 +196,8 @@ onMounted(() => {
   background: #fff;
   border-radius: 6px;
   padding: 8px;
+
+  border: 1px solid #eee;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 

src/views/blockingData/blockingDataScreen/components/ModuleOne.vue

@@ -1,5 +1,5 @@
 <template>
-  <module-container title="运行数据分析">
+  <module-container title="模块一 运行数据分析">
     <div class="module-one-content">
       <!-- 新增：统计卡片行 -->
       <div class="stats-row">
@@ -459,7 +459,7 @@ onMounted(() => {
   flex-direction: column;
   gap: 10px;
   overflow-y: auto;
-  padding: 10px;
+  
 }
 
 .stats-row {
@@ -473,6 +473,7 @@ onMounted(() => {
   background: #fff;
   border-radius: 6px;
   padding: 15px;
+  border: 1px solid #eee;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   min-height: 120px;
 }
@@ -539,6 +540,7 @@ onMounted(() => {
   background: #fff;
   border-radius: 6px;
   padding: 10px;
+  border: 1px solid #eee;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;

src/views/blockingData/blockingDataScreen/components/ModuleThree.vue

@@ -1,5 +1,5 @@
 <template>
-  <module-container title="培训质控分析">
+  <module-container title="模块三 培训质控分析">
     <div class="module-three-content">
       <div class="chart-card">
         <div class="chart-title">查堵-人员自测漏检次数（总累积）</div>
@@ -68,7 +68,7 @@ onMounted(() => {
   height: 100%;
   display: flex;
   gap: 10px;
-  padding: 10px;
+  
 }
 
 .chart-card {
@@ -76,6 +76,7 @@ onMounted(() => {
   background: #fff;
   border-radius: 6px;
   padding: 10px;
+  border: 1px solid #eee;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;

src/views/blockingData/blockingDataScreen/components/ModuleTwo.vue

@@ -1,5 +1,5 @@
 <template>
-  <module-container title="查堵人员分析">
+  <module-container title="模块二 查堵人员分析">
     <div class="module-two-content">
       <div class="top-row">
         <div class="table-card">
@@ -260,6 +260,7 @@ onMounted(() => {
   background: #fff;
   border-radius: 6px;
   padding: 8px;
+  border: 1px solid #eee;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
@@ -271,6 +272,7 @@ onMounted(() => {
   background: #fff;
   border-radius: 6px;
   padding: 8px;
+  border: 1px solid #eee;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;

src/views/blockingData/blockingDataScreen/index.vue

@@ -34,7 +34,7 @@ import ModuleFour from './components/ModuleFour.vue'
 .blocking-data-screen {
   width: 100%;
   height: 100vh;
-  background: linear-gradient(180deg, #0D507A 0%, #054066 50%, #033055 100%);
+
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -46,15 +46,15 @@ import ModuleFour from './components/ModuleFour.vue'
   align-items: center;
   justify-content: space-between;
   padding: 0 30px;
-  background: linear-gradient(90deg, rgba(5, 64, 102, 0.9) 0%, rgba(11, 88, 131, 0.9) 50%, rgba(5, 64, 102, 0.9) 100%);
-  border-bottom: 2px solid rgba(112, 207, 231, 0.5);
+ 
+  // border-bottom: 2px solid rgba(112, 207, 231, 0.5);
 }
 
 .header-title {
   font-size: 24px;
   font-weight: bold;
-  color: #fbffff;
-  text-shadow: 0 0 10px rgba(112, 207, 231, 0.5);
+  color: black;
+  // text-shadow: 0 0 10px rgba(112, 207, 231, 0.5);
 }
 
 
@@ -70,13 +70,13 @@ import ModuleFour from './components/ModuleFour.vue'
 
 .grid-layout {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, 1fr);
+  grid-template-columns: 1fr;
   gap: 20px;
   height: 100%;
 }
 
 .grid-item {
-  min-height: 200px;
+ 
+  width: 100%;
 }
 </style>