储运页面

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 = () => {
                     <Switch
                         size="small"
                         checked={val}
+                        className="statusSwitch"
                         onChange={(checked) => {
                             record.enabled = checked;
                             message.success(`已${checked ? '启用' : '停用'}`);
@@ -45,9 +48,9 @@ const BasicInfo = () => {
                 width: 180,
                 render: () => (
                     <Space size={12}>
-                        <Button type="link" size="small">查看详情</Button>
+                        <Button type="link" size="small" className="viewDetailBtn">查看详情</Button>
-                        <Button type="link" size="small">修改</Button>
+                        <Button type="link" size="small" className="editBtn">修改</Button>
-                        <Button type="link" size="small" danger>删除</Button>
+                        <Button type="link" size="small" danger className="deleteBtn">删除</Button>
                     </Space>
                 ),
             },
@@ -196,7 +199,7 @@ const BasicInfo = () => {
                                 <Input.TextArea rows={6} placeholder="" />
                             </Form.Item>
                             <div className={styles.formActions}>
-                                <Button type="primary" onClick={onSubmit}>保存</Button>
+                                <Button type="primary" onClick={onSubmit}>保存修改</Button>
                                 <Button onClick={onReset}>取消</Button>
                             </div>
                         </div>
@@ -238,17 +241,54 @@ const BasicInfo = () => {
                         />
                     </div>
                     <Space className={styles.filterButtons}>
-                        <Button type="primary" icon={<SearchOutlined />}>查询</Button>
+                        <Button
-                        <Button icon={<ReloadOutlined />}>重置</Button>
+                            type="primary"
-                        <Button type="primary" icon={<PlusOutlined />}>新增油检点</Button>
+                            icon={<SearchOutlined />}
-                        <Button icon={<ExportOutlined />}>批量导出</Button>
+                            className="queryBtn"
+                            style={{ backgroundImage: `url(${BtBg1})` }}
+                        >
+                            查询
+                        </Button>
+                        <Button
+                            icon={<ReloadOutlined />}
+                            className="resetBtn"
+                            style={{ backgroundImage: `url(${BtBg2})`, color: 'rgba(0, 102, 101, 1)' }}
+                        >
+                            重置
+                        </Button>
+                    </Space>
+                    <Space className={styles.filterButtonsRight}>
+                        <Button
+                            type="primary"
+                            icon={<PlusOutlined />}
+                            className="addBtn"
+                            style={{ backgroundImage: `url(${BtBg1})` }}
+                        >
+                            新增油检点
+                        </Button>
+                        <Button
+                            icon={<ExportOutlined />}
+                            className="exportBtn"
+                            style={{ backgroundImage: `url(${BtBg2})`, color: 'rgba(0, 102, 101, 1)' }}
+                        >
+                            批量导出
+                        </Button>
                     </Space>
                 </div>
                 <div className={styles.tableWrapper}>
                     <StandardTable
                         rowKey="key"
                         columns={columns}
-                        data={{ list: tableData, pagination: { total: tableData.length, pageSize: 10, current: 1 } }}
+                        data={{
+                            list: tableData,
+                            pagination: {
+                                total: tableData.length,
+                                pageSize: 10,
+                                current: 1,
+                                showTotal: (total) => `共 ${total} 条`,
+                            },
+                        }}
+                        selectionType="checkbox"
                     />
                 </div>
             </div>

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) {
+                :global {
-                    min-width: 160px;
+                    .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;
+                }
+            }
         }
     }
 }

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({
+    const [form] = Form.useForm();
-        densityP15: '0.735',
-        octane: '92',
-        flashPoint: '-38',
-        initBoilingPoint: '35',
-        ninetyBoilingPoint: '180',
-        aromaticContent: '8',
-        kinematicViscosity: '2.5',
-        rvp: '60',
-        tenBoilingPoint: '55',
-    });
 
+    // 列表筛选与数据（演示数据，可替换为接口）
     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 = () => {
                     <Switch
                         size="small"
                         checked={val}
+                        className="statusSwitch"
                         onChange={(checked) => {
                             record.enabled = checked;
                             message.success(`已${checked ? '启用' : '停用'}`);
@@ -69,11 +46,11 @@ const PhysChem = () => {
                 key: 'action',
                 fixed: 'right',
                 width: 180,
-                render: (_, record) => (
+                render: () => (
                     <Space size={12}>
-                        <Button type="link" size="small">查看详情</Button>
+                        <Button type="link" size="small" className="viewDetailBtn">查看详情</Button>
-                        <Button type="link" size="small">修改</Button>
+                        <Button type="link" size="small" className="editBtn">修改</Button>
-                        <Button type="link" size="small" danger>删除</Button>
+                        <Button type="link" size="small" danger className="deleteBtn">删除</Button>
                     </Space>
                 ),
             },
@@ -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 (
-        <div className={styles.container}>
+        <div className={styles.phycontainer}>
-            <Card className={styles.section}>
+            <div className={styles.topSection}>
-                <div className={styles.blockTitle}>理化性质</div>
+                <div className={styles.sectionHeader}>
-                <div className={styles.panel}>
+                    <span className={styles.sectionBar} />
-                    <div className={styles.formGrid}>
+                    <span className={styles.sectionTitle}>理化性质</span>
-                        <div className={styles.formItem}>
+                </div>
-                            <div className={styles.label}>标准密度(p15)<span className={styles.required}>*</span>:</div>
+                <div className={styles.topContent}>
-                            <Input
+                    <Form
-                                value={form.densityP15}
+                        form={form}
-                                onChange={(e) => setForm({ ...form, densityP15: e.target.value })}
+                        layout="vertical"
-                                addonAfter="kg/L"
+                        className={styles.basicForm}
-                                placeholder=""
+                        initialValues={{
-                            />
+                            densityP15: '0.735',
-                        </div>
+                            octane: '92',
-                        <div className={styles.formItem}>
+                            flashPoint: '-38',
-                            <div className={styles.label}>辛烷值<span className={styles.required}>*</span>:</div>
+                            sulfurContent: '8',
-                            <Input
+                            kinematicViscosity: '2.5',
-                                value={form.octane}
+                            rvp: '60',
-                                onChange={(e) => setForm({ ...form, octane: e.target.value })}
+                            initBoilingPoint: '35',
-                                placeholder=""
+                            ninetyBoilingPoint: '180',
-                            />
+                            tenBoilingPoint: '55',
-                        </div>
+                        }}
-                        <div className={styles.formItem}>
+                    >
-                            <div className={styles.label}>闪点<span className={styles.required}>*</span>:</div>
+                        <div className={styles.formBlockA}>
-                            <Input
+                            <div className={styles.blockTitle}></div>
-                                value={form.flashPoint}
+                            <div className={styles.formRow}>
-                                onChange={(e) => setForm({ ...form, flashPoint: e.target.value })}
+                                <Form.Item
-                                addonAfter="℃"
+                                    label="标准密度(p15):"
-                                placeholder=""
+                                    name="densityP15"
-                            />
+                                    rules={[{ required: true, message: '请输入标准密度' }]}
-                        </div>
+                                >
-                        <div className={styles.formItem}>
+                                    <Input addonAfter="kg/L" placeholder="" />
-                            <div className={styles.label}>初馏点<span className={styles.required}>*</span>:</div>
+                                </Form.Item>
-                            <Input
+                                <Form.Item
-                                value={form.initBoilingPoint}
+                                    label="辛烷值:"
-                                onChange={(e) => setForm({ ...form, initBoilingPoint: e.target.value })}
+                                    name="octane"
-                                addonAfter="℃"
+                                    rules={[{ required: true, message: '请输入辛烷值' }]}
-                                placeholder=""
+                                >
-                            />
+                                    <Input placeholder="" />
-                        </div>
+                                </Form.Item>
-                        <div className={styles.formItem}>
+                                <Form.Item
-                            <div className={styles.label}>90%馏出温度<span className={styles.required}>*</span>:</div>
+                                    label="闪点:"
-                            <Input
+                                    name="flashPoint"
-                                value={form.ninetyBoilingPoint}
+                                    rules={[{ required: true, message: '请输入闪点' }]}
-                                onChange={(e) => setForm({ ...form, ninetyBoilingPoint: e.target.value })}
+                                >
-                                addonAfter="℃"
+                                    <Input addonAfter="℃" placeholder="" />
-                                placeholder=""
+                                </Form.Item>
-                            />
+                            </div>
-                        </div>
+                            <div className={styles.formRow}>
-                        <div className={styles.formItem}>
+                                <Form.Item
-                            <div className={styles.label}>芳烃含量<span className={styles.required}>*</span>:</div>
+                                    label="硫含量:"
-                            <Input
+                                    name="sulfurContent"
-                                value={form.aromaticContent}
+                                    rules={[{ required: true, message: '请输入硫含量' }]}
-                                onChange={(e) => setForm({ ...form, aromaticContent: e.target.value })}
+                                >
-                                addonAfter="ppm"
+                                    <Input addonAfter="ppm" placeholder="" />
-                                placeholder=""
+                                </Form.Item>
-                            />
+                                <Form.Item
-                        </div>
+                                    label="运动粘度:"
-                        <div className={styles.formItem}>
+                                    name="kinematicViscosity"
-                            <div className={styles.label}>运动粘度:</div>
+                                >
-                            <Input
+                                    <Input addonAfter="cSt" placeholder="" />
-                                value={form.kinematicViscosity}
+                                </Form.Item>
-                                onChange={(e) => setForm({ ...form, kinematicViscosity: e.target.value })}
+                                <Form.Item
-                                addonAfter="cSt"
+                                    label="蒸汽压(RVP):"
-                                placeholder=""
+                                    name="rvp"
-                            />
+                                >
-                        </div>
+                                    <Input addonAfter="kPa" placeholder="" />
-                        <div className={styles.formItem}>
+                                </Form.Item>
-                            <div className={styles.label}>蒸汽压(RVP):</div>
+                            </div>
-                            <Input
-                                value={form.rvp}
-                                onChange={(e) => setForm({ ...form, rvp: e.target.value })}
-                                addonAfter="kPa"
-                                placeholder=""
-                            />
                         </div>
-                        <div className={styles.formItem}>
+                        <div className={styles.formBlockB}>
-                            <div className={styles.label}>10%馏出温度<span className={styles.required}>*</span>:</div>
+                            <div className={styles.blockTitle}>蒸馏数据：</div>
-                            <Input
+                            <div className={styles.formRow}>
-                                value={form.tenBoilingPoint}
+                                <Form.Item
-                                onChange={(e) => setForm({ ...form, tenBoilingPoint: e.target.value })}
+                                    label="初馏点:"
-                                addonAfter="℃"
+                                    name="initBoilingPoint"
-                                placeholder=""
+                                >
-                            />
+                                    <Input addonAfter="℃" placeholder="" />
+                                </Form.Item>
+                                <Form.Item
+                                    label="90%馏出温度:"
+                                    name="ninetyBoilingPoint"
+                                >
+                                    <Input addonAfter="℃" placeholder="" />
+                                </Form.Item>
+                            </div>
+                            <div className={styles.formRowWithActions}>
+                                <Form.Item
+                                    label="10%馏出温度:"
+                                    name="tenBoilingPoint"
+                                    className={styles.tenBoilingPointItem}
+                                >
+                                    <Input addonAfter="℃" placeholder="" />
+                                </Form.Item>
+                                <div className={styles.formActions}>
+                                    <Button type="primary" onClick={onSubmit}>保存修改</Button>
+                                    <Button onClick={onReset}>取消</Button>
+                                </div>
+                            </div>
                         </div>
-                    </div>
+                    </Form>
-                    <div className={styles.actionsRight}>
-                        <Space>
-                            <Button type="primary" onClick={onSave}>保存</Button>
-                            <Button onClick={onCancel}>取消</Button>
-                        </Space>
-                    </div>
                 </div>
-            </Card>
 
-            <Card className={styles.section}>
+                
-                <div className={styles.listHeader}>
+            </div>
-                    <div className={styles.blockTitle}>油品列表</div>
+
-                    <Space>
+
-                        <Button type="primary" icon={<PlusOutlined />}>新增油品</Button>
+            
-                        <Button icon={<ExportOutlined />}>批量导出</Button>
+            <div className={styles.bottomSection}>
-                    </Space>
+                <div className={styles.sectionHeader}>
+                    <span className={styles.sectionBar} />
+                    <span className={styles.sectionTitle}>油品列表</span>
                 </div>
-                <div className={styles.filterRow}>
+                <div className={styles.filterContent}>
                     <div className={styles.filterItem}>
-                        <div className={styles.filterLabel}>油品分类:</div>
+                        <span className={styles.filterLabel}>油品分类:</span>
                         <Select
                             value={filters.listCategory}
                             onChange={(v) => setFilters({ ...filters, listCategory: v })}
                             placeholder="全部"
-                            style={{ width: 140 }}
                             options={[
                                 { label: '全部', value: undefined },
                                 { label: '汽油', value: '汽油' },
@@ -259,12 +259,11 @@ const PhysChem = () => {
                         />
                     </div>
                     <div className={styles.filterItem}>
-                        <div className={styles.filterLabel}>油品状态:</div>
+                        <span className={styles.filterLabel}>油品状态:</span>
                         <Select
                             value={filters.listStatus}
                             onChange={(v) => setFilters({ ...filters, listStatus: v })}
                             placeholder="全部"
-                            style={{ width: 140 }}
                             options={[
                                 { label: '全部', value: undefined },
                                 { label: '启用', value: '启用' },
@@ -273,18 +272,58 @@ const PhysChem = () => {
                             allowClear
                         />
                     </div>
-                    <Space>
+                    <Space className={styles.filterButtons}>
-                        <Button type="primary" icon={<SearchOutlined />} onClick={onQuery}>查询</Button>
+                        <Button
-                        <Button icon={<ReloadOutlined />} onClick={onReset}>重置</Button>
+                            type="primary"
+                            icon={<SearchOutlined />}
+                            className="queryBtn"
+                            style={{ backgroundImage: `url(${BtBg1})` }}
+                        >
+                            查询
+                        </Button>
+                        <Button
+                            icon={<ReloadOutlined />}
+                            className="resetBtn"
+                            style={{ backgroundImage: `url(${BtBg2})`, color: 'rgba(0, 102, 101, 1)' }}
+                        >
+                            重置
+                        </Button>
                     </Space>
+                    <Space className={styles.filterButtonsRight}>
+                        <Button
+                            type="primary"
+                            icon={<PlusOutlined />}
+                            className="addBtn"
+                            style={{ backgroundImage: `url(${BtBg1})` }}
+                        >
+                            新增油检点
+                        </Button>
+                        <Button
+                            icon={<ExportOutlined />}
+                            className="exportBtn"
+                            style={{ backgroundImage: `url(${BtBg2})`, color: 'rgba(0, 102, 101, 1)' }}
+                        >
+                            批量导出
+                        </Button>
+                    </Space>
+                </div>
+                <div className={styles.tableWrapper}>
+                    <StandardTable
+                        rowKey="key"
+                        columns={columns}
+                        data={{
+                            list: tableData,
+                            pagination: {
+                                total: tableData.length,
+                                pageSize: 10,
+                                current: 1,
+                                showTotal: (total) => `共 ${total} 条`,
+                            },
+                        }}
+                        selectionType="checkbox"
+                    />
                 </div>
-                <StandardTable
+            </div>
-                    rowKey="key"
-                    columns={columns}
-                    data={{ list: tableData, pagination: { total: tableData.length, pageSize: 10, current: 1 } }}
-                    // use default small size from StandardTable
-                />
-            </Card>
         </div>
     );
 };

src/pages/business_basic/components/PhysChem.less

@@ -1,81 +1,480 @@
-@panel-border: #bfe3e3;
+@section-border: rgba(118, 194, 181, 1);
-@panel-bg: #f6fbfb;
+@section-bg: rgba(243, 249, 248, 1);
 
-.container {
+.phycontainer {
+    margin: 0;
     padding: 0;
-}
+    background: #fff;
-
-.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 {
     display: flex;
     flex-direction: column;
-}
+    gap: 15px;
+    width: 100%;
+    height: 100%;
 
-.label {
+    // 顶部区域 - 基本信息
-    color: #666;
+    .topSection {
-    font-size: 12px;
+        flex: 0 0 40%;
-    margin-bottom: 6px;
+        display: flex;
-}
+        flex-direction: column;
+        margin: 5px 15px 0 15px;
+        border: 1px solid @section-border;
+        background: @section-bg;
+        padding: 12px 20px;
 
-.required {
+        // 区域头部
-    color: #fa541c;
+        .sectionHeader {
-    margin-left: 2px;
+            display: flex;
-}
+            align-items: center;
+            gap: 10px;
+            // margin-bottom: 20px;
 
-.actionsRight {
+            // 装饰条
-    display: flex;
+            .sectionBar {
-    justify-content: flex-end;
+                width: 2px;
-    margin-top: 12px;
+                height: 16px;
-}
+                background: rgba(0, 102, 101, 1);
+                border-radius: 1px;
+            }
 
-.listHeader {
+            // 标题
-    display: flex;
+            .sectionTitle {
-    justify-content: space-between;
+                font-size: 18px;
-    align-items: center;
+                font-weight: 600;
-    margin-bottom: 12px;
+                color: #333;
-}
+            }
+        }
 
-.filterRow {
+        // 顶部内容区域
-    display: flex;
+        .topContent {
-    align-items: center;
+            flex: 1;
-    gap: 16px;
+            display: flex;
-    margin-bottom: 12px;
-}
 
-.filterItem {
+            // 基本信息表单
-    display: flex;
+            .basicForm {
-    align-items: center;
+                display: flex;
-    gap: 8px;
+                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;
+                .ant-checkbox-inner {
-    font-size: 12px;
+                    border-color: rgba(0, 102, 101, 1) !important;
-    white-space: nowrap;
+                }
-}
 
+                .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;
+                }
+            }
+        }
+    }
+}