diff --git a/src/assets/business_basic/Bt_bg1.png b/src/assets/business_basic/Bt_bg1.png new file mode 100644 index 0000000..0569633 Binary files /dev/null and b/src/assets/business_basic/Bt_bg1.png differ diff --git a/src/assets/business_basic/Bt_bg2.png b/src/assets/business_basic/Bt_bg2.png new file mode 100644 index 0000000..5157c20 Binary files /dev/null and b/src/assets/business_basic/Bt_bg2.png differ diff --git a/src/pages/business_basic/components/BasicInfo.js b/src/pages/business_basic/components/BasicInfo.js index d9f89c6..62efc96 100644 --- a/src/pages/business_basic/components/BasicInfo.js +++ b/src/pages/business_basic/components/BasicInfo.js @@ -3,6 +3,8 @@ import { Form, Input, Select, Space, Button, Switch, message } from 'antd'; import { PlusOutlined, SearchOutlined, ReloadOutlined, ExportOutlined } from '@ant-design/icons'; import StandardTable from '@/components/StandardTable'; import styles from './BasicInfo.less'; +import BtBg1 from '@/assets/business_basic/Bt_bg1.png'; +import BtBg2 from '@/assets/business_basic/Bt_bg2.png'; const BasicInfo = () => { const [form] = Form.useForm(); @@ -30,6 +32,7 @@ const BasicInfo = () => { { record.enabled = checked; message.success(`已${checked ? '启用' : '停用'}`); @@ -45,9 +48,9 @@ const BasicInfo = () => { width: 180, render: () => ( - - - + + + ), }, @@ -196,7 +199,7 @@ const BasicInfo = () => {
- +
@@ -238,17 +241,54 @@ const BasicInfo = () => { /> - - - - + + + + + +
`共 ${total} 条`, + }, + }} + selectionType="checkbox" />
diff --git a/src/pages/business_basic/components/BasicInfo.less b/src/pages/business_basic/components/BasicInfo.less index c93aa2d..68e3cb0 100644 --- a/src/pages/business_basic/components/BasicInfo.less +++ b/src/pages/business_basic/components/BasicInfo.less @@ -16,9 +16,10 @@ flex: 0 0 40%; display: flex; flex-direction: column; + margin: 5px 15px 0 15px; border: 1px solid @section-border; background: @section-bg; - padding: 24px 28px; + padding: 12px 20px; // 区域头部 .sectionHeader { @@ -54,6 +55,51 @@ width: 100%; gap: 32px; + // 所有表单输入框边框颜色 + :global { + + // Input 输入框 + .ant-input { + border-color: rgba(44, 158, 157, 1) !important; + + &:hover { + border-color: rgba(44, 158, 157, 1) !important; + } + + &:focus { + border-color: rgba(44, 158, 157, 1) !important; + } + } + + // Select 下拉选择框 + .ant-select-selector { + border-color: rgba(44, 158, 157, 1) !important; + } + + .ant-select:hover .ant-select-selector { + border-color: rgba(44, 158, 157, 1) !important; + } + + .ant-select-focused .ant-select-selector { + border-color: rgba(44, 158, 157, 1) !important; + } + + // TextArea 文本域 + .ant-input-textarea { + .ant-input { + border-color: rgba(44, 158, 157, 1) !important; + + &:hover { + border-color: rgba(44, 158, 157, 1) !important; + } + + &:focus { + border-color: rgba(44, 158, 157, 1) !important; + } + } + } + } + // 表单左侧 .formLeft { flex: 1; @@ -81,14 +127,17 @@ .formRight { flex: 1; display: flex; - flex-direction: column; + flex-direction: row; + gap: 24px; + align-items: flex-start; // 描述输入项 .descriptionItem { - flex: 1; + // flex: 1; display: flex; + width: 70%; flex-direction: column; - margin-bottom: 16px; + margin-bottom: 0; :global(.ant-input) { flex: 1; @@ -102,9 +151,53 @@ // 表单操作按钮 .formActions { display: flex; - flex-direction: column; - align-items: flex-start; gap: 12px; + flex-shrink: 0; + align-self: flex-end; + + // 保存修改按钮(主按钮) + :global(.ant-btn-primary) { + background-color: rgba(4, 95, 94, 0.5) !important; + border-color: rgba(0, 143, 142, 1) !important; + + &:hover { + background-color: rgba(4, 95, 94, 0.7) !important; + border-color: rgba(0, 143, 142, 1) !important; + } + + &:focus { + background-color: rgba(4, 95, 94, 0.5) !important; + border-color: rgba(0, 143, 142, 1) !important; + } + } + + // 取消按钮(非主按钮) + :global(.ant-btn:not(.ant-btn-primary)) { + background-color: rgba(183, 229, 213, 0.2) !important; + border: 1px solid transparent !important; + border-image-source: conic-gradient( + from 102.75deg at 50% 52.91%, + rgba(249, 249, 249, 0.5) -32.95deg, + rgba(140, 160, 156, 0.5) 10.52deg, + rgba(140, 160, 156, 0.35) 32.12deg, + rgba(255, 255, 255, 0.5) 60.28deg, + rgba(255, 255, 255, 0.5) 107.79deg, + rgba(140, 160, 156, 0.35) 187.59deg, + #F9F9F9 207.58deg, + rgba(255, 255, 255, 0.5) 287.31deg, + rgba(249, 249, 249, 0.5) 327.05deg, + rgba(140, 160, 156, 0.5) 370.52deg + ) !important; + border-image-slice: 1 !important; + + &:hover { + background-color: rgba(183, 229, 213, 0.3) !important; + } + + &:focus { + background-color: rgba(183, 229, 213, 0.2) !important; + } + } } } } @@ -116,16 +209,16 @@ flex: 1; display: flex; flex-direction: column; - border: 1px solid @section-border; + // border: 1px solid @section-border; background: #fff; - padding: 24px 28px; + padding: 12px 20px; // 区域头部 .sectionHeader { display: flex; align-items: center; gap: 10px; - margin-bottom: 20px; + margin-bottom: 15px; // 装饰条 .sectionBar { @@ -150,6 +243,7 @@ gap: 20px; margin-bottom: 20px; flex-wrap: wrap; + justify-content: space-between; // 筛选项 .filterItem { @@ -163,8 +257,25 @@ font-size: 14px; } - :global(.ant-select) { - min-width: 160px; + :global { + .ant-select { + min-width: 140px; + + // 选择框样式 + .ant-select-selector { + border-color: rgba(44, 158, 157, 1) !important; + border-radius: 2px !important; + } + + &:hover .ant-select-selector { + border-color: rgba(44, 158, 157, 1) !important; + } + + &.ant-select-focused .ant-select-selector { + border-color: rgba(44, 158, 157, 1) !important; + box-shadow: 0 0 0 2px rgba(44, 158, 157, 0.2) !important; + } + } } } @@ -173,6 +284,13 @@ display: flex; gap: 12px; } + + // 右侧按钮组 + .filterButtonsRight { + display: flex; + gap: 12px; + margin-left: auto; + } } // 表格包装器 @@ -187,6 +305,76 @@ display: flex; flex-direction: column; } + + // 表头样式 + :global { + .ant-table-thead > tr > th { + color: rgba(51, 51, 51, 1) !important; + font-weight: 450 !important; + background-color: rgba(240, 247, 247, 1) !important; + text-align: center !important; + } + + // 表体样式 + .ant-table-tbody > tr > td { + color: rgba(78, 88, 86, 1) !important; + font-weight: 400 !important; + text-align: center !important; + } + + // 操作列按钮样式 + .viewDetailBtn { + color: rgba(0, 102, 101, 1) !important; + + &:hover { + color: rgba(0, 102, 101, 1) !important; + } + } + + .editBtn { + color: rgba(45, 158, 157, 1) !important; + + &:hover { + color: rgba(45, 158, 157, 1) !important; + } + } + + .deleteBtn { + color: rgba(255, 130, 109, 1) !important; + + &:hover { + color: rgba(255, 130, 109, 1) !important; + } + } + + // 状态列 Switch 样式 + .statusSwitch { + // 启用状态背景色 + &.ant-switch-checked { + background-color: rgba(20, 106, 89, 1) !important; + } + + // 停用状态背景色 + &:not(.ant-switch-checked) { + background-color: rgba(153, 153, 153, 1) !important; + } + } + + // 复选框样式 + .ant-checkbox-inner { + border-color: rgba(0, 102, 101, 1) !important; + } + + .ant-checkbox-wrapper:hover .ant-checkbox-inner, + .ant-checkbox:hover .ant-checkbox-inner { + border-color: rgba(0, 102, 101, 1) !important; + } + + .ant-checkbox-checked .ant-checkbox-inner { + background-color: rgba(0, 102, 101, 1) !important; + border-color: rgba(0, 102, 101, 1) !important; + } + } } } } \ No newline at end of file diff --git a/src/pages/business_basic/components/PhysChem.js b/src/pages/business_basic/components/PhysChem.js index 03c095c..92bf226 100644 --- a/src/pages/business_basic/components/PhysChem.js +++ b/src/pages/business_basic/components/PhysChem.js @@ -1,44 +1,20 @@ import React, { useMemo, useState } from 'react'; -import { Card, Input, Button, Space, Select, Switch, message } from 'antd'; +import { Form, Input, Select, Space, Button, Switch, message } from 'antd'; import { PlusOutlined, SearchOutlined, ReloadOutlined, ExportOutlined } from '@ant-design/icons'; import StandardTable from '@/components/StandardTable'; import styles from './PhysChem.less'; +import BtBg1 from '@/assets/business_basic/Bt_bg1.png'; +import BtBg2 from '@/assets/business_basic/Bt_bg2.png'; const PhysChem = () => { - const [form, setForm] = useState({ - densityP15: '0.735', - octane: '92', - flashPoint: '-38', - initBoilingPoint: '35', - ninetyBoilingPoint: '180', - aromaticContent: '8', - kinematicViscosity: '2.5', - rvp: '60', - tenBoilingPoint: '55', - }); + const [form] = Form.useForm(); + // 列表筛选与数据(演示数据,可替换为接口) const [filters, setFilters] = useState({ listCategory: undefined, listStatus: undefined, }); - const onSave = () => { - message.success('已保存理化性质'); - }; - - const onCancel = () => { - message.info('已取消更改'); - }; - - const onQuery = () => { - message.success('已按条件查询列表'); - }; - - const onReset = () => { - setFilters({ listCategory: undefined, listStatus: undefined }); - message.info('筛选已重置'); - }; - const columns = useMemo(() => { return [ { title: '油品信息', dataIndex: 'name', key: 'name', width: 180 }, @@ -56,6 +32,7 @@ const PhysChem = () => { { record.enabled = checked; message.success(`已${checked ? '启用' : '停用'}`); @@ -69,11 +46,11 @@ const PhysChem = () => { key: 'action', fixed: 'right', width: 180, - render: (_, record) => ( + render: () => ( - - - + + + ), }, @@ -138,118 +115,141 @@ const PhysChem = () => { }, ]; + const onSubmit = () => { + form.validateFields().then((values) => { + // 提交时可对接接口 + // eslint-disable-next-line no-console + console.log('理化性质提交: ', values); + message.success('已保存理化性质'); + }); + }; + + const onReset = () => { + form.resetFields(); + message.info('已重置理化性质'); + }; + return ( -
- -
理化性质
-
-
-
-
标准密度(p15)*:
- setForm({ ...form, densityP15: e.target.value })} - addonAfter="kg/L" - placeholder="" - /> -
-
-
辛烷值*:
- setForm({ ...form, octane: e.target.value })} - placeholder="" - /> -
-
-
闪点*:
- setForm({ ...form, flashPoint: e.target.value })} - addonAfter="℃" - placeholder="" - /> -
-
-
初馏点*:
- setForm({ ...form, initBoilingPoint: e.target.value })} - addonAfter="℃" - placeholder="" - /> -
-
-
90%馏出温度*:
- setForm({ ...form, ninetyBoilingPoint: e.target.value })} - addonAfter="℃" - placeholder="" - /> -
-
-
芳烃含量*:
- setForm({ ...form, aromaticContent: e.target.value })} - addonAfter="ppm" - placeholder="" - /> -
-
-
运动粘度:
- setForm({ ...form, kinematicViscosity: e.target.value })} - addonAfter="cSt" - placeholder="" - /> -
-
-
蒸汽压(RVP):
- setForm({ ...form, rvp: e.target.value })} - addonAfter="kPa" - placeholder="" - /> +
+
+
+ + 理化性质 +
+
+
+
+
+
+ + + + + + + + + +
+
+ + + + + + + + + +
-
-
10%馏出温度*:
- setForm({ ...form, tenBoilingPoint: e.target.value })} - addonAfter="℃" - placeholder="" - /> +
+
蒸馏数据:
+
+ + + + + + +
+
+ + + +
+ + +
+
-
-
- - - - -
+
- - -
-
油品列表
- - - - + +
+ + + +
+
+ + 油品列表
-
+
-
油品分类:
+ 油品分类: setFilters({ ...filters, listStatus: v })} placeholder="全部" - style={{ width: 140 }} options={[ { label: '全部', value: undefined }, { label: '启用', value: '启用' }, @@ -273,18 +272,58 @@ const PhysChem = () => { allowClear />
- - - + + + + + + + +
+
+ `共 ${total} 条`, + }, + }} + selectionType="checkbox" + />
- - +
); }; diff --git a/src/pages/business_basic/components/PhysChem.less b/src/pages/business_basic/components/PhysChem.less index 7c8b048..78099e4 100644 --- a/src/pages/business_basic/components/PhysChem.less +++ b/src/pages/business_basic/components/PhysChem.less @@ -1,81 +1,480 @@ -@panel-border: #bfe3e3; -@panel-bg: #f6fbfb; +@section-border: rgba(118, 194, 181, 1); +@section-bg: rgba(243, 249, 248, 1); -.container { +.phycontainer { + margin: 0; padding: 0; -} - -.section { - margin-bottom: 16px; -} - -.blockTitle { - font-size: 16px; - font-weight: 600; - color: #2f4f4f; - margin-bottom: 12px; -} - -.panel { - border: 1px solid @panel-border; - background: @panel-bg; - border-radius: 6px; - padding: 12px; -} - -.formGrid { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-column-gap: 16px; - grid-row-gap: 12px; -} - -.formItem { + background: #fff; display: flex; flex-direction: column; -} + gap: 15px; + width: 100%; + height: 100%; -.label { - color: #666; - font-size: 12px; - margin-bottom: 6px; -} + // 顶部区域 - 基本信息 + .topSection { + flex: 0 0 40%; + display: flex; + flex-direction: column; + margin: 5px 15px 0 15px; + border: 1px solid @section-border; + background: @section-bg; + padding: 12px 20px; -.required { - color: #fa541c; - margin-left: 2px; -} + // 区域头部 + .sectionHeader { + display: flex; + align-items: center; + gap: 10px; + // margin-bottom: 20px; -.actionsRight { - display: flex; - justify-content: flex-end; - margin-top: 12px; -} + // 装饰条 + .sectionBar { + width: 2px; + height: 16px; + background: rgba(0, 102, 101, 1); + border-radius: 1px; + } -.listHeader { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 12px; -} + // 标题 + .sectionTitle { + font-size: 18px; + font-weight: 600; + color: #333; + } + } -.filterRow { - display: flex; - align-items: center; - gap: 16px; - margin-bottom: 12px; -} + // 顶部内容区域 + .topContent { + flex: 1; + display: flex; -.filterItem { - display: flex; - align-items: center; - gap: 8px; -} + // 基本信息表单 + .basicForm { + display: flex; + width: 100%; + gap: 32px; + + // 所有表单输入框边框颜色 + :global { + + // Input 输入框 + .ant-input { + border-color: rgba(44, 158, 157, 1) !important; + + &:hover { + border-color: rgba(44, 158, 157, 1) !important; + } + + &:focus { + border-color: rgba(44, 158, 157, 1) !important; + } + } + + // Select 下拉选择框 + .ant-select-selector { + border-color: rgba(44, 158, 157, 1) !important; + } + + .ant-select:hover .ant-select-selector { + border-color: rgba(44, 158, 157, 1) !important; + } + + .ant-select-focused .ant-select-selector { + border-color: rgba(44, 158, 157, 1) !important; + } + + // TextArea 文本域 + .ant-input-textarea { + .ant-input { + border-color: rgba(44, 158, 157, 1) !important; + + &:hover { + border-color: rgba(44, 158, 157, 1) !important; + } + + &:focus { + border-color: rgba(44, 158, 157, 1) !important; + } + } + } + } + + // 表单块A和B - 左右平分 + .formBlockA, + .formBlockB { + flex: 1; + display: flex; + flex-direction: column; + height: 100%; + width: 50%; + + // 块标题 + .blockTitle { + font-size: 14px; + font-weight: 450; + color: #333; + min-height: 22px; // 占位高度,与有文字时的高度一致 + // margin-bottom: 16px; + } + + // 表单行 + .formRow { + display: flex; + gap: 24px; + margin-bottom: 16px; + + &:last-child { + margin-bottom: 0; + } + + :global(.ant-form-item) { + flex: 0 0 auto; + width: 180px; + margin-bottom: 0; + } + } + + // 带操作按钮的表单行 + .formRowWithActions { + display: flex; + gap: 24px; + align-items: flex-end; + justify-content: space-between; + + .tenBoilingPointItem { + flex: 0 0 auto; + width: 180px; + margin-bottom: 0; + } + + .formActions { + display: flex; + gap: 12px; + flex-shrink: 0; + + // 保存修改按钮(主按钮) + :global(.ant-btn-primary) { + background-color: rgba(4, 95, 94, 0.5) !important; + border-color: rgba(0, 143, 142, 1) !important; + + &:hover { + background-color: rgba(4, 95, 94, 0.7) !important; + border-color: rgba(0, 143, 142, 1) !important; + } + + &:focus { + background-color: rgba(4, 95, 94, 0.5) !important; + border-color: rgba(0, 143, 142, 1) !important; + } + } + + // 取消按钮(非主按钮) + :global(.ant-btn:not(.ant-btn-primary)) { + background-color: rgba(183, 229, 213, 0.2) !important; + border: 1px solid transparent !important; + border-image-source: conic-gradient( + from 102.75deg at 50% 52.91%, + rgba(249, 249, 249, 0.5) -32.95deg, + rgba(140, 160, 156, 0.5) 10.52deg, + rgba(140, 160, 156, 0.35) 32.12deg, + rgba(255, 255, 255, 0.5) 60.28deg, + rgba(255, 255, 255, 0.5) 107.79deg, + rgba(140, 160, 156, 0.35) 187.59deg, + #F9F9F9 207.58deg, + rgba(255, 255, 255, 0.5) 287.31deg, + rgba(249, 249, 249, 0.5) 327.05deg, + rgba(140, 160, 156, 0.5) 370.52deg + ) !important; + border-image-slice: 1 !important; + + &:hover { + background-color: rgba(183, 229, 213, 0.3) !important; + } + + &:focus { + background-color: rgba(183, 229, 213, 0.2) !important; + } + } + } + } + } + + // 表单左侧(保留原有样式,以防其他地方使用) + .formLeft { + flex: 1; + display: flex; + flex-direction: column; + + // 表单行 + .formRow { + display: flex; + gap: 24px; + margin-bottom: 16px; + + &:last-child { + margin-bottom: 0; + } + + :global(.ant-form-item) { + flex: 1; + margin-bottom: 0; + } + } + } + + // 表单右侧 + .formRight { + flex: 1; + display: flex; + flex-direction: row; + gap: 24px; + align-items: flex-start; + + // 描述输入项 + .descriptionItem { + // flex: 1; + display: flex; + width: 70%; + flex-direction: column; + margin-bottom: 0; + + :global(.ant-input) { + flex: 1; + } + + :global(.ant-input-textarea) { + height: 100%; + } + } + + // 表单操作按钮 + .formActions { + display: flex; + gap: 12px; + flex-shrink: 0; + align-self: flex-end; + + // 保存修改按钮(主按钮) + :global(.ant-btn-primary) { + background-color: rgba(4, 95, 94, 0.5) !important; + border-color: rgba(0, 143, 142, 1) !important; + + &:hover { + background-color: rgba(4, 95, 94, 0.7) !important; + border-color: rgba(0, 143, 142, 1) !important; + } + + &:focus { + background-color: rgba(4, 95, 94, 0.5) !important; + border-color: rgba(0, 143, 142, 1) !important; + } + } + + // 取消按钮(非主按钮) + :global(.ant-btn:not(.ant-btn-primary)) { + background-color: rgba(183, 229, 213, 0.2) !important; + border: 1px solid transparent !important; + border-image-source: conic-gradient( + from 102.75deg at 50% 52.91%, + rgba(249, 249, 249, 0.5) -32.95deg, + rgba(140, 160, 156, 0.5) 10.52deg, + rgba(140, 160, 156, 0.35) 32.12deg, + rgba(255, 255, 255, 0.5) 60.28deg, + rgba(255, 255, 255, 0.5) 107.79deg, + rgba(140, 160, 156, 0.35) 187.59deg, + #F9F9F9 207.58deg, + rgba(255, 255, 255, 0.5) 287.31deg, + rgba(249, 249, 249, 0.5) 327.05deg, + rgba(140, 160, 156, 0.5) 370.52deg + ) !important; + border-image-slice: 1 !important; + + &:hover { + background-color: rgba(183, 229, 213, 0.3) !important; + } + + &:focus { + background-color: rgba(183, 229, 213, 0.2) !important; + } + } + } + } + } + } + } + + // 底部区域 - 油品列表 + .bottomSection { + flex: 1; + display: flex; + flex-direction: column; + // border: 1px solid @section-border; + background: #fff; + padding: 12px 20px; + + // 区域头部 + .sectionHeader { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 15px; + + // 装饰条 + .sectionBar { + width: 2px; + height: 16px; + background: rgba(0, 102, 101, 1); + border-radius: 1px; + } + + // 标题 + .sectionTitle { + font-size: 18px; + font-weight: 600; + color: #333; + } + } + + // 筛选内容区域 + .filterContent { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 20px; + flex-wrap: wrap; + justify-content: space-between; + + // 筛选项 + .filterItem { + display: flex; + align-items: center; + gap: 12px; + + // 筛选标签 + .filterLabel { + color: #333; + font-size: 14px; + } + + :global { + .ant-select { + min-width: 140px; + + // 选择框样式 + .ant-select-selector { + border-color: rgba(44, 158, 157, 1) !important; + border-radius: 2px !important; + } + + &:hover .ant-select-selector { + border-color: rgba(44, 158, 157, 1) !important; + } + + &.ant-select-focused .ant-select-selector { + border-color: rgba(44, 158, 157, 1) !important; + box-shadow: 0 0 0 2px rgba(44, 158, 157, 0.2) !important; + } + } + } + } + + // 筛选按钮组 + .filterButtons { + display: flex; + gap: 12px; + } + + // 右侧按钮组 + .filterButtonsRight { + display: flex; + gap: 12px; + margin-left: auto; + } + } + + // 表格包装器 + .tableWrapper { + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + + :global(.ant-table-wrapper) { + flex: 1; + display: flex; + flex-direction: column; + } + + // 表头样式 + :global { + .ant-table-thead > tr > th { + color: rgba(51, 51, 51, 1) !important; + font-weight: 450 !important; + background-color: rgba(240, 247, 247, 1) !important; + text-align: center !important; + } + + // 表体样式 + .ant-table-tbody > tr > td { + color: rgba(78, 88, 86, 1) !important; + font-weight: 400 !important; + text-align: center !important; + } + + // 操作列按钮样式 + .viewDetailBtn { + color: rgba(0, 102, 101, 1) !important; + + &:hover { + color: rgba(0, 102, 101, 1) !important; + } + } + + .editBtn { + color: rgba(45, 158, 157, 1) !important; + + &:hover { + color: rgba(45, 158, 157, 1) !important; + } + } + + .deleteBtn { + color: rgba(255, 130, 109, 1) !important; + + &:hover { + color: rgba(255, 130, 109, 1) !important; + } + } + + // 状态列 Switch 样式 + .statusSwitch { + // 启用状态背景色 + &.ant-switch-checked { + background-color: rgba(20, 106, 89, 1) !important; + } + + // 停用状态背景色 + &:not(.ant-switch-checked) { + background-color: rgba(153, 153, 153, 1) !important; + } + } -.filterLabel { - color: #666; - font-size: 12px; - white-space: nowrap; -} + // 复选框样式 + .ant-checkbox-inner { + border-color: rgba(0, 102, 101, 1) !important; + } + .ant-checkbox-wrapper:hover .ant-checkbox-inner, + .ant-checkbox:hover .ant-checkbox-inner { + border-color: rgba(0, 102, 101, 1) !important; + } + .ant-checkbox-checked .ant-checkbox-inner { + background-color: rgba(0, 102, 101, 1) !important; + border-color: rgba(0, 102, 101, 1) !important; + } + } + } + } +} \ No newline at end of file