feat():antd样式修改

src/components/ant_override.less

@@ -1,86 +1,271 @@
-.ant-table-thead>tr>th {
+/* Global Ant Design Overrides for Dashboard/Big Screen */
-  border-bottom: none !important;
-  padding: 6px 6px;
-  background: #ECF2F9  !important;
-  color: #333 !important;
-  font-weight: 600 !important;
-
-  &::before {
-    width: 0 !important;
-  }
-
-  /*&:first-child {
-    border-top-left-radius: 16px !important;
-  }
-
-  &:last-child {
-    border-top-right-radius: 16px !important;
-  }*/
-}
 
+// ==============================================================================
+// 1. Table Component
+// ==============================================================================
+.ant-table-wrapper {
   .ant-table {
     background: transparent !important;
+    color: #fff;
+
+    // Header Styles
+    .ant-table-thead > tr > th {
+      background: rgba(21, 60, 102, 0.9) !important; // Dark Blue Header
+      color: #fff !important;
+      font-weight: bold;
+      border-bottom: 1px solid rgba(0, 160, 233, 0.3);
+      padding: 12px 16px;
     }
 
+    // Body Styles
     .ant-table-tbody > tr > td {
-  //border-bottom: none !important;
+      background: rgba(0, 20, 50, 0.3) !important; // Semi-transparent dark
-  background: #fff;
+      color: #fff !important;
-  //box-shadow: 3px 2px 3px 2px #E8ECF1;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 6px 6px;
       
- /* &:first-child {
+      // Hover effect
-    border-top-left-radius: 8px;
+      &.ant-table-cell-row-hover {
-    border-bottom-left-radius: 8px;
+        background: rgba(0, 160, 233, 0.2) !important;
+      }
     }
 
-  &:last-child {
+    // Hover row global
-    border-top-right-radius: 8px;
+    .ant-table-tbody > tr:hover > td {
-    border-bottom-right-radius: 8px;
+      background: rgba(0, 160, 233, 0.2) !important;
-  }*/
     }
 
-.ant-table table,.ant-table.ant-table-bordered > .ant-table-container,
+    // Empty Data
-.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > tbody > tr > td{
+    .ant-empty-description {
-  //border-spacing: 0 8px !important;
+      color: rgba(255, 255, 255, 0.5);
-  //border:0;
+    }
   }
 
-
+  // Pagination
-.ant-radio-group {
+  .ant-pagination {
-  .ant-radio-button-wrapper:first-child {
+    .ant-pagination-item {
-    // border-radius: 8px 0 0 8px !important
+      background: transparent;
+      border-color: rgba(255, 255, 255, 0.3);
+      a { color: #fff; }
+      &-active {
+        border-color: #3b7cff;
+        background: rgba(59, 124, 255, 0.2);
+        a { color: #3b7cff; }
+      }
+    }
+    .ant-pagination-prev, .ant-pagination-next {
+      .ant-pagination-item-link {
+        background: transparent;
+        border-color: rgba(255, 255, 255, 0.3);
+        color: #fff;
+      }
+    }
+  }
 }
 
-  .ant-radio-button-wrapper:last-child {
+// ==============================================================================
-    // border-radius: 0 8px 8px 0 !important
+// 2. Input / InputNumber / TextArea Component
+// ==============================================================================
+.ant-input, .ant-input-number, .ant-input-affix-wrapper {
+  background-color: transparent !important;
+  border: 1px solid rgba(59, 124, 255, 0.6) !important; // Blueish border
+  color: #fff !important;
+  border-radius: 4px;
+  
+  &:hover, &:focus, &-focused {
+    border-color: #3b7cff !important;
+    box-shadow: 0 0 5px rgba(59, 124, 255, 0.5);
   }
 
-  .ant-radio-button-wrapper {
+  // Placeholder color
-    border: 1px solid @primary-color  !important;
+  &::placeholder {
+    color: rgba(255, 255, 255, 0.4);
+  }
+  
+  // Input Number specific
+  &.ant-input-number {
+    .ant-input-number-handler-wrap {
+      background: rgba(255, 255, 255, 0.1);
+      .ant-input-number-handler {
+        border-left: 1px solid rgba(255, 255, 255, 0.2);
+        .anticon { color: #fff; }
+      }
+    }
+    .ant-input-number-input {
+      color: #fff;
+    }
+  }
+  
+  // Affix wrapper (e.g. search icon)
+  .ant-input-prefix, .ant-input-suffix {
+    color: rgba(255, 255, 255, 0.6);
+  }
+}
+
+// ==============================================================================
+// 3. Select / DatePicker / RangePicker / TimePicker
+// ==============================================================================
+// Common Input Styles
+.ant-select-selector, .ant-picker {
+  background-color: transparent !important;
+  border: 1px solid rgba(59, 124, 255, 0.6) !important;
+  color: #fff !important;
+  border-radius: 4px;
 
   &:hover {
-      background-color: #D9EBFF;
-    }
-  }
-
-  .ant-radio-button-wrapper {
-    color: #3B7CFF;
-  }
-}
-
-.ant-checkbox-checked {
-  .ant-checkbox-inner {
-    background-color: #3b7cff !important;
     border-color: #3b7cff !important;
   }
+}
+
+// Select Specific
+.ant-select {
+  color: #fff;
+  
+  .ant-select-arrow {
+    color: #fff;
+  }
+  
+  .ant-select-clear {
+    background: transparent;
+    color: #fff;
+  }
+
+  &:not(.ant-select-disabled):hover .ant-select-selector {
+    border-color: #3b7cff !important;
+  }
+}
+
+// Dropdowns (Select, DatePicker, etc.)
+.ant-select-dropdown, .ant-picker-dropdown {
+  background-color: rgba(0, 20, 50, 0.95) !important;
+  border: 1px solid rgba(0, 160, 233, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+
+  // Select Options
+  .ant-select-item {
+    color: #fff;
+    &-option-active, &-option-selected {
+      background-color: rgba(0, 160, 233, 0.3) !important;
+    }
+  }
+  
+  // Picker Panels
+  .ant-picker-panel-container {
+    background: transparent;
+  }
+  
+  .ant-picker-header {
+    color: #fff;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    button { color: #fff; }
+  }
+  
+  .ant-picker-content {
+    th { color: #fff; }
+    td { color: rgba(255, 255, 255, 0.8); }
+  }
+  
+  .ant-picker-cell {
+    &:hover .ant-picker-cell-inner {
+      background: rgba(0, 160, 233, 0.3);
+    }
+    &-in-view {
+      color: #fff;
+    }
+    &-selected .ant-picker-cell-inner {
+      background: #3b7cff !important;
+    }
+  }
+
+  // Footer/Ranges
+  .ant-picker-footer {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  .ant-picker-ranges .ant-picker-preset > .ant-tag-blue {
+    color: #3b7cff;
+    background: rgba(59, 124, 255, 0.2);
+    border-color: #3b7cff;
+  }
+}
+
+// Picker Text Color fix
+.ant-picker-input > input {
+  color: #fff !important;
+  &::placeholder {
+    color: rgba(255, 255, 255, 0.4);
+  }
+}
+.ant-picker-suffix {
+  color: #fff;
+}
+.ant-picker-range-separator .ant-picker-separator {
+  color: #fff;
+}
+
+// ==============================================================================
+// 4. Button Component
+// ==============================================================================
+.ant-btn {
+  border-radius: 4px;
+  
+  // Primary Button (Blue)
+  &.ant-btn-primary {
+    background: #3b7cff; // Solid blue
+    border-color: #3b7cff;
+    color: #fff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    
+    &:hover, &:focus {
+      background: #5d91ff;
+      border-color: #5d91ff;
+    }
+  }
+  
+  // Default Button (Transparent/Ghost)
+  &:not(.ant-btn-primary):not(.ant-btn-link):not(.ant-btn-text) {
+    background: transparent;
+    border: 1px solid #3b7cff;
+    color: #3b7cff;
+    
+    &:hover {
+      color: #5d91ff;
+      border-color: #5d91ff;
+    }
+  }
+}
+
+// ==============================================================================
+// 5. Radio Component
+// ==============================================================================
+.ant-radio-wrapper {
+  color: #fff; // Label text color
+  margin-right: 16px;
+  
+  &:hover .ant-radio-inner {
+    border-color: #3b7cff;
+  }
+
+  .ant-radio-inner {
+    background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.6);
     
     &::after {
-    border: none !important;
+      background-color: #3b7cff; // Dot color
     }
   }
   
-.ant-checkbox-inner {
+  .ant-radio-checked {
-  border-radius: 4px !important;
+    .ant-radio-inner {
-  border-width: 1.4px !important;
+      border-color: #3b7cff;
-  border-color: #C7CBD3 !important;
+      &::after {
+        background-color: #3b7cff;
+      }
+    }
+  }
+}
+
+// Radio Group (Button Style)
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
+  background: #3b7cff;
+  border-color: #3b7cff;
+  color: #fff;
 }

src/views/Home/components/Business/SiGuan/index.js

@@ -18,7 +18,7 @@ const SiGuan = () => {
         </CommonCard>
         <CommonCard
           title="安全隐患"
-          className="panel-card card-1"
+          className="panel-card card-4"
           headerExtra={<YearSelect />}
         >
           <div className="placeholder-content">内容填充区域</div>

src/views/Home/components/Business/SiGuan/index.less

@@ -30,12 +30,25 @@
 
    .panel-card {
        flex: 1;
-       margin-bottom: 20px;
+       margin-bottom: 10px;
        &:last-child {
            margin-bottom: 0;
        }
    }
 
+   .left {
+    .card-1 { flex: 6; }
+    .card-2 { flex: 3; }
+    .card-3 { flex: 4; }
+    .card-4 { flex: 6; }
+  }
+
+  .right {
+    .card-1 { flex: 1; }
+    .card-2 { flex: 1; }
+    .card-3 { flex: 1; }
+  }
+
   .placeholder-content {
     display: flex;
     justify-content: center;

src/views/Home/components/Business/SiQuan/index.less

@@ -47,7 +47,7 @@
     box-sizing: border-box;
 
     .panel-card {
-        margin-bottom: 15px;
+        margin-bottom: 10px;
         &:last-child {
         margin-bottom: 0;
         }

src/views/Home/components/Business/SiYu/index.less

@@ -30,12 +30,22 @@
 
    .panel-card {
        flex: 1;
-       margin-bottom: 20px;
+       margin-bottom: 10px;
        &:last-child {
            margin-bottom: 0;
        }
    }
 
+   .left {
+    .card-1 { flex: 5; }
+    .card-2 { flex: 3; }
+  }
+
+  .right {
+    .card-1 { flex: 1; }
+    .card-2 { flex: 1; }
+    .card-3 { flex: 1; }
+  }
   .placeholder-content {
     display: flex;
     justify-content: center;

src/views/Home/components/Business/SiZhi/index.less

@@ -30,11 +30,20 @@
 
    .panel-card {
        flex: 1;
-       margin-bottom: 20px;
+       margin-bottom: 10px;
        &:last-child {
            margin-bottom: 0;
        }
    }
+   .left {
+    .card-1 { flex: 5; }
+    .card-2 { flex: 3; }
+  }
+
+  .right {
+    .card-1 { flex: 4; }
+    .card-2 { flex: 4; }
+  }
 
   .placeholder-content {
     display: flex;

src/views/Home/index.less

@@ -1,7 +1,9 @@
 .home-page {
   width: 100vw;
   height: 100vh;
-  background-color: #a2b7cc;
+  // background-color: #a2b7cc;
+   background: url('../../assets//images/home.png') no-repeat center top;
+  background-size: 100% 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;