0926

src/views/zhinengxunjian/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="box-container">
       <!-- 导航栏 -->
-      <div class="navigation-tabs">
+      <!-- <div class="navigation-tabs">
         <div class="nav-tab active" @click="handleInspection1">待办事项</div>
         <div class="nav-tab" @click="handleInspection2">巡检管理</div>
         <div class="nav-tab" @click="handleInspection3">试验管理</div>
@@ -10,7 +10,7 @@
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
-      </div>
+      </div> -->
       <div class="main-content">
         <!-- 左侧日历区域 -->
         <div class="calendar-container">
@@ -54,6 +54,7 @@
               class="todo-item"
               :class="{ 'important': item.taskLevel === '重要', 'completed': item.status === 2 }"
             >
+              <el-checkbox class="todo-checkbox" :checked="item.status === 2" @change="handleStatusChange(item, $event)"></el-checkbox>
               <div
                 class="todo-color-indicator"
                 :class="{
@@ -63,7 +64,6 @@
                   completed: item.status === 2
                 }"
               ></div>
-              <el-checkbox class="todo-checkbox" :checked="item.status === 2" @change="handleStatusChange(item, $event)"></el-checkbox>
               <div class="todo-content">
                 <div class="todo-main">
                   <div class="todo-title">{{ item.title }}</div>
@@ -590,16 +590,6 @@ const handleInspection7 = () => {
   min-height: 100vh;
 }
 
-/* 导航栏样式 */
-.navigation-tabs {
-  display: flex;
-  margin-bottom: 20px;
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-  padding: 2px;
-}
-
 /* 已完成任务的样式 */
 .todo-color-indicator.completed {
   background-color: #dcdfe6;
@@ -609,7 +599,15 @@ const handleInspection7 = () => {
   color: #909399;
   text-decoration: line-through;
 }
-
+/* 导航栏样式 */
+.navigation-tabs {
+  display: flex;
+  margin-bottom: 20px;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  padding: 2px;
+}
 .nav-tab {
   padding: 12px 24px;
   cursor: pointer;
@@ -849,13 +847,14 @@ const handleInspection7 = () => {
 
 /* 悬停显示操作按钮 */
 .todo-item:hover .todo-actions {
-  opacity: 1;
+  background: linear-gradient(to right, rgba(173, 216, 230, 0), rgb(64, 158, 255));
   right: 0;
+  opacity: 0.8;
 }
 
-/* 内容区域平移以给按钮留出空间 */
+/* 取消内容区域平移效果 */
 .todo-item:hover .todo-content {
-  transform: translateX(-120px);
+  transform: none;
 }
 
 .action-icon {
@@ -942,7 +941,7 @@ const handleInspection7 = () => {
   background-color: #ff4d4f;
 }
 
-::v-deep .custom-date-cell {
+:deep(.custom-date-cell) {
   width: 100%;
   height: 100%;
   padding: 5px;
@@ -983,13 +982,13 @@ const handleInspection7 = () => {
 }
 
 /* 穿透作用域，强制设置日历单元格为正方形 */
-::v-deep .el-calendar-table td {
+:deep(.el-calendar-table td) {
   padding: 2px;
   vertical-align: top;
   width: 120px; /* 强制宽度 */
   height: 120px; /* 强制高度（与宽度一致） */
 }
-::v-deep .el-calendar-day {
+:deep(.el-calendar-day) {
   padding: 0; /* 移除默认内边距 */
   width: 100%;
   height: 100%;