diff --git a/src/assets/images/home.png b/src/assets/images/home.png new file mode 100644 index 0000000..0c42b84 Binary files /dev/null and b/src/assets/images/home.png differ diff --git a/src/components/ant_override.less b/src/components/ant_override.less index 6e9aa5d..a15c56e 100644 --- a/src/components/ant_override.less +++ b/src/components/ant_override.less @@ -1,86 +1,271 @@ -.ant-table-thead>tr>th { - border-bottom: none !important; - padding: 6px 6px; - background: #ECF2F9 !important; - color: #333 !important; - font-weight: 600 !important; +/* Global Ant Design Overrides for Dashboard/Big Screen */ - &::before { - width: 0 !important; - } +// ============================================================================== +// 1. Table Component +// ============================================================================== +.ant-table-wrapper { + .ant-table { + background: transparent !important; + color: #fff; - /*&:first-child { - border-top-left-radius: 16px !important; - } + // 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; + } - &:last-child { - border-top-right-radius: 16px !important; - }*/ -} + // Body Styles + .ant-table-tbody > tr > td { + background: rgba(0, 20, 50, 0.3) !important; // Semi-transparent dark + color: #fff !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + + // Hover effect + &.ant-table-cell-row-hover { + background: rgba(0, 160, 233, 0.2) !important; + } + } -.ant-table { - background: transparent !important; -} + // Hover row global + .ant-table-tbody > tr:hover > td { + background: rgba(0, 160, 233, 0.2) !important; + } -.ant-table-tbody>tr>td { - //border-bottom: none !important; - background: #fff; - //box-shadow: 3px 2px 3px 2px #E8ECF1; - padding: 6px 6px; - - /* &:first-child { - border-top-left-radius: 8px; - border-bottom-left-radius: 8px; - } - - &:last-child { - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; - }*/ -} - -.ant-table table,.ant-table.ant-table-bordered > .ant-table-container, -.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > tbody > tr > td{ - //border-spacing: 0 8px !important; - //border:0; -} - - -.ant-radio-group { - .ant-radio-button-wrapper:first-child { - // border-radius: 8px 0 0 8px !important - } - - .ant-radio-button-wrapper:last-child { - // border-radius: 0 8px 8px 0 !important - } - - .ant-radio-button-wrapper { - border: 1px solid @primary-color !important; - - &:hover { - background-color: #D9EBFF; + // Empty Data + .ant-empty-description { + color: rgba(255, 255, 255, 0.5); } } - .ant-radio-button-wrapper { - color: #3B7CFF; + // Pagination + .ant-pagination { + .ant-pagination-item { + 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-checkbox-checked { - .ant-checkbox-inner { - background-color: #3b7cff !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); + } + + // Placeholder color + &::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 { border-color: #3b7cff !important; } +} - &::after { - border: none !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; } } -.ant-checkbox-inner { - border-radius: 4px !important; - border-width: 1.4px !important; - border-color: #C7CBD3 !important; -} \ No newline at end of file +// 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 { + background-color: #3b7cff; // Dot color + } + } + + .ant-radio-checked { + .ant-radio-inner { + border-color: #3b7cff; + &::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; +} diff --git a/src/views/Home/components/Business/SiGuan/index.js b/src/views/Home/components/Business/SiGuan/index.js index 5910581..4d845b6 100644 --- a/src/views/Home/components/Business/SiGuan/index.js +++ b/src/views/Home/components/Business/SiGuan/index.js @@ -18,7 +18,7 @@ const SiGuan = () => { } >
内容填充区域
diff --git a/src/views/Home/components/Business/SiGuan/index.less b/src/views/Home/components/Business/SiGuan/index.less index e826c97..80a964b 100644 --- a/src/views/Home/components/Business/SiGuan/index.less +++ b/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; diff --git a/src/views/Home/components/Business/SiQuan/index.less b/src/views/Home/components/Business/SiQuan/index.less index 22c12d2..16ab8e3 100644 --- a/src/views/Home/components/Business/SiQuan/index.less +++ b/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; } diff --git a/src/views/Home/components/Business/SiYu/index.less b/src/views/Home/components/Business/SiYu/index.less index 4cd64a3..dc151d5 100644 --- a/src/views/Home/components/Business/SiYu/index.less +++ b/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; diff --git a/src/views/Home/components/Business/SiZhi/index.less b/src/views/Home/components/Business/SiZhi/index.less index 187015f..c577b0e 100644 --- a/src/views/Home/components/Business/SiZhi/index.less +++ b/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; diff --git a/src/views/Home/index.less b/src/views/Home/index.less index f7f60b2..ba04603 100644 --- a/src/views/Home/index.less +++ b/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;