feat():antd样式修改
parent
f3f0e5e63e
commit
b260cf3017
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
|
|
@ -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;
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
box-sizing: border-box;
|
||||
|
||||
.panel-card {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 10px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue