0922

src/views/zhinengxunjian/shiyanjilu.vue

@@ -12,7 +12,6 @@
       </div>
 
       <div class="header-container">
-        <TitleComponent title="实验管理系统" subtitle="制定巡检计划，安排巡检任务，跟进巡检记录"></TitleComponent>
         <div class="header-actions">
           <el-button type="primary" class="export-btn">筛选</el-button>
           <el-button type="primary" class="create-btn">导入数据</el-button>
@@ -278,7 +277,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 import router from '@/router';
-import TitleComponent from './TitleComponent.vue';
+
 // 1. 选项卡状态管理
 const activeTab = ref('record'); // 默认显示"巡检记录"
 const showFilter = ref(false);
@@ -360,35 +359,41 @@ const handleInspectionManagement3 = () => {
   min-height: 100vh;
 }
 
-/* 2. 顶部导航选项卡 */
+/* 导航栏样式 */
 .navigation-tabs {
   display: flex;
+  margin-bottom: 20px;
   background-color: #fff;
   border-radius: 4px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-  margin-bottom: 20px;
-  overflow: hidden;
+  padding: 2px;
 }
+
 .nav-tab {
   padding: 12px 24px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.3s ease;
+  border-radius: 4px;
   font-size: 14px;
-  color: #6b7280;
+  color: #606266;
+  border-right: 1px solid #f0f0f0;
   flex: 1;
   text-align: center;
-  border-right: 1px solid #f0f0f0;
 }
+
 .nav-tab:last-child {
   border-right: none;
 }
-.nav-tab:hover:not(.active) {
-  background-color: #f3f4f6;
+
+.nav-tab:hover {
+  color: #409eff;
+  background-color: #ecf5ff;
 }
+
 .nav-tab.active {
-  background-color: #165dff;
+  background-color: #409eff;
   color: #fff;
-  font-weight: 500;
+  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
 }
 
 /* 选项卡样式 */
@@ -457,8 +462,8 @@ const handleInspectionManagement3 = () => {
 }
 .search-btn,
 .export-btn {
-  background-color: #165dff;
-  border-color: #165dff;
+  height: 36px;
+  border-radius: 4px;
 }
 .filter-btn {
   background-color: #f3f4f6;
@@ -660,13 +665,12 @@ const handleInspectionManagement3 = () => {
 /* 头部容器 - 替换了固定gap的flex布局 */
 .header-container {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
 }
 
 .header-actions {
   display: flex;
-  align-items: center;
   gap: 10px;
 }
 /* 12. 统计卡片样式 */