首页

src/views/index.vue

@@ -2,13 +2,13 @@
   <div class="app-container home">
     <!--    <h2>安心E查工作台</h2>-->
     <div class="tabs-container">
-      <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
+      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
         <el-tab-pane label="今日" name="today"></el-tab-pane>
         <el-tab-pane label="本周" name="week"></el-tab-pane>
         <el-tab-pane label="本月" name="month"></el-tab-pane>
         <el-tab-pane label="自定义" name="customize"></el-tab-pane>
       </el-tabs>
-      <div v-if="activeName === 'customize'" class="date-picker-container">
+      <div v-if="activeName === 'customize'" class="date-picker-container" style="margin: 0 0 15px 10px;">
         <el-date-picker
           v-model="dataRange"
           type="datetimerange"
@@ -720,49 +720,9 @@ watch(
     }
   }
 }
-//.tabs-container {
-//  position: relative;
-//  display: flex;
-//  align-items: center;
-//  gap: 20px;
-//
-//  .demo-tabs {
-//    flex: 1;
-//    min-width: 300px;
-//  }
-//
-//  .date-picker-container {
-//    width: 350px;
-//    min-width: 300px;
-//    flex-shrink: 1;
-//    margin-left: -1000px;
-//    margin-top: -15px;
-//
-//    :deep(.el-date-editor) {
-//      width: 100%;
-//      min-width: 360px;
-//    }
-//  }
-//}
+
 .tabs-container {
-  position: relative;
   display: flex;
-
-  .demo-tabs {
-    flex: 1;
-  }
-
-  .date-picker-container {
-    position: absolute;
-    left: 21%;
-    right: 0;
-    top: 0;
-    z-index: 1;
-    padding: 2px 0;
-
-    :deep(.el-date-editor) {
-      width: 360px;
-    }
-  }
+  align-items: center;
 }
 </style>