diff --git a/src/assets/business_basic/Frame.png b/src/assets/business_basic/Frame.png deleted file mode 100644 index 04c3628..0000000 Binary files a/src/assets/business_basic/Frame.png and /dev/null differ diff --git a/src/assets/business_basic/Union.svg b/src/assets/business_basic/Union.svg new file mode 100644 index 0000000..8cd4544 --- /dev/null +++ b/src/assets/business_basic/Union.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/business_basic/background1.png b/src/assets/business_basic/background1.png deleted file mode 100644 index 2065e2f..0000000 Binary files a/src/assets/business_basic/background1.png and /dev/null differ diff --git a/src/assets/business_basic/background_lqyj.svg b/src/assets/business_basic/background_lqyj.svg deleted file mode 100644 index 13c7204..0000000 --- a/src/assets/business_basic/background_lqyj.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/assets/business_basic/background_re.svg b/src/assets/business_basic/background_re.svg deleted file mode 100644 index 2652d05..0000000 --- a/src/assets/business_basic/background_re.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/src/assets/business_basic/bgOil.png b/src/assets/business_basic/bgOil.png new file mode 100644 index 0000000..a9838ef Binary files /dev/null and b/src/assets/business_basic/bgOil.png differ diff --git a/src/assets/business_basic/download.png b/src/assets/business_basic/download.png deleted file mode 100644 index 17e6519..0000000 Binary files a/src/assets/business_basic/download.png and /dev/null differ diff --git a/src/assets/business_basic/eqicon1.png b/src/assets/business_basic/eqicon1.png deleted file mode 100644 index 03c5873..0000000 Binary files a/src/assets/business_basic/eqicon1.png and /dev/null differ diff --git a/src/assets/business_basic/eqicon2.png b/src/assets/business_basic/eqicon2.png deleted file mode 100644 index a2b1e28..0000000 Binary files a/src/assets/business_basic/eqicon2.png and /dev/null differ diff --git a/src/assets/business_basic/eqicon3.png b/src/assets/business_basic/eqicon3.png deleted file mode 100644 index a00929f..0000000 Binary files a/src/assets/business_basic/eqicon3.png and /dev/null differ diff --git a/src/assets/business_basic/eqicon4.png b/src/assets/business_basic/eqicon4.png deleted file mode 100644 index 2ae2b09..0000000 Binary files a/src/assets/business_basic/eqicon4.png and /dev/null differ diff --git a/src/assets/business_basic/export1.png b/src/assets/business_basic/export1.png deleted file mode 100644 index b2beef1..0000000 Binary files a/src/assets/business_basic/export1.png and /dev/null differ diff --git a/src/assets/business_basic/fire_fighting1.png b/src/assets/business_basic/fire_fighting1.png deleted file mode 100644 index 55eae7d..0000000 Binary files a/src/assets/business_basic/fire_fighting1.png and /dev/null differ diff --git a/src/assets/business_basic/fire_fighting2.png b/src/assets/business_basic/fire_fighting2.png deleted file mode 100644 index 1ab52fd..0000000 Binary files a/src/assets/business_basic/fire_fighting2.png and /dev/null differ diff --git a/src/assets/business_basic/fire_fighting3.png b/src/assets/business_basic/fire_fighting3.png deleted file mode 100644 index 04a941f..0000000 Binary files a/src/assets/business_basic/fire_fighting3.png and /dev/null differ diff --git a/src/assets/business_basic/icon_echart.svg b/src/assets/business_basic/icon_echart.svg deleted file mode 100644 index 7c08254..0000000 --- a/src/assets/business_basic/icon_echart.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/business_basic/iconre1.svg b/src/assets/business_basic/iconre1.svg deleted file mode 100644 index d5dcf48..0000000 --- a/src/assets/business_basic/iconre1.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/assets/business_basic/iconre2.svg b/src/assets/business_basic/iconre2.svg deleted file mode 100644 index 6e46eb5..0000000 --- a/src/assets/business_basic/iconre2.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/assets/business_basic/iconre3.svg b/src/assets/business_basic/iconre3.svg deleted file mode 100644 index 2e5a600..0000000 --- a/src/assets/business_basic/iconre3.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/assets/business_basic/img1.png b/src/assets/business_basic/img1.png deleted file mode 100644 index 55eae7d..0000000 Binary files a/src/assets/business_basic/img1.png and /dev/null differ diff --git a/src/assets/business_basic/import1.png b/src/assets/business_basic/import1.png deleted file mode 100644 index 21358ae..0000000 Binary files a/src/assets/business_basic/import1.png and /dev/null differ diff --git a/src/assets/business_basic/ssbj1.svg b/src/assets/business_basic/ssbj1.svg deleted file mode 100644 index 3e59c5c..0000000 --- a/src/assets/business_basic/ssbj1.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/business_basic/ssbj2.svg b/src/assets/business_basic/ssbj2.svg deleted file mode 100644 index d72e292..0000000 --- a/src/assets/business_basic/ssbj2.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/assets/business_basic/ssbj3.svg b/src/assets/business_basic/ssbj3.svg deleted file mode 100644 index be58394..0000000 --- a/src/assets/business_basic/ssbj3.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/business_basic/ssbj4.svg b/src/assets/business_basic/ssbj4.svg deleted file mode 100644 index dd9ca3c..0000000 --- a/src/assets/business_basic/ssbj4.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/business_basic/upload.png b/src/assets/business_basic/upload.png deleted file mode 100644 index 9661a47..0000000 Binary files a/src/assets/business_basic/upload.png and /dev/null differ diff --git a/src/pages/business_basic/components/BasicInfo.js b/src/pages/business_basic/components/BasicInfo.js index 32ab40a..d9f89c6 100644 --- a/src/pages/business_basic/components/BasicInfo.js +++ b/src/pages/business_basic/components/BasicInfo.js @@ -1,5 +1,5 @@ import React, { useMemo, useState } from 'react'; -import { Card, Form, Input, Select, Space, Button, 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 './BasicInfo.less'; @@ -128,13 +128,16 @@ const BasicInfo = () => { return (
- -
基本信息
-
+
+
+ + 基本信息 +
+
{ description: '92号汽油，适用于大多数汽油发动机，具有优良的抗爆性能和清洁性能。', }} > - - - - - - - - - - - - -
- +
+
+ + + + + + +
+
+ + + +
+
+
+ + + +
- +
- - - -
-
油品列表
- - - - +
+
+
+ + 油品列表
-
+
-
油品分类:
+ 油品分类: setFilters({ ...filters, listStatus: v })} placeholder="全部" - style={{ width: 140 }} options={[ { label: '全部', value: undefined }, { label: '启用', value: '启用' }, @@ -234,17 +237,21 @@ const BasicInfo = () => { allowClear />
- + + +
- - +
+ +
+
); }; diff --git a/src/pages/business_basic/components/BasicInfo.less b/src/pages/business_basic/components/BasicInfo.less index a03b1c2..c93aa2d 100644 --- a/src/pages/business_basic/components/BasicInfo.less +++ b/src/pages/business_basic/components/BasicInfo.less @@ -1,72 +1,192 @@ -@panel-border: #bfe3e3; -@panel-bg: #f6fbfb; +@section-border: rgba(118, 194, 181, 1); +@section-bg: rgba(243, 249, 248, 1); .container { + 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: 1fr 1fr 1.5fr 120px; // 左2列输入、右侧描述、最右按钮列 - grid-column-gap: 16px; - grid-row-gap: 12px; - align-items: start; -} - -.colDesc { - grid-column: 3 / span 1; - grid-row: 1 / span 2; -} - -.colButtons { - grid-column: 4 / span 1; - grid-row: 1 / span 2; + background: #fff; display: flex; - justify-content: flex-start; -} + flex-direction: column; + gap: 15px; + width: 100%; + height: 100%; -.listHeader { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 12px; -} + // 顶部区域 - 基本信息 + .topSection { + flex: 0 0 40%; + display: flex; + flex-direction: column; + border: 1px solid @section-border; + background: @section-bg; + padding: 24px 28px; -.filterRow { - display: flex; - align-items: center; - gap: 16px; - margin-bottom: 12px; -} + // 区域头部 + .sectionHeader { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 20px; -.filterItem { - display: flex; - align-items: center; - gap: 8px; -} + // 装饰条 + .sectionBar { + width: 2px; + height: 16px; + background: rgba(0, 102, 101, 1); + border-radius: 1px; + } + + // 标题 + .sectionTitle { + font-size: 18px; + font-weight: 600; + color: #333; + } + } + + // 顶部内容区域 + .topContent { + flex: 1; + display: flex; + + // 基本信息表单 + .basicForm { + display: flex; + width: 100%; + gap: 32px; + + // 表单左侧 + .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: column; + + // 描述输入项 + .descriptionItem { + flex: 1; + display: flex; + flex-direction: column; + margin-bottom: 16px; + + :global(.ant-input) { + flex: 1; + } + + :global(.ant-input-textarea) { + height: 100%; + } + } + + // 表单操作按钮 + .formActions { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; + } + } + } + } + } + + // 底部区域 - 油品列表 + .bottomSection { + flex: 1; + display: flex; + flex-direction: column; + border: 1px solid @section-border; + background: #fff; + padding: 24px 28px; + + // 区域头部 + .sectionHeader { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 20px; + + // 装饰条 + .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; + + // 筛选项 + .filterItem { + display: flex; + align-items: center; + gap: 12px; + + // 筛选标签 + .filterLabel { + color: #333; + font-size: 14px; + } + + :global(.ant-select) { + min-width: 160px; + } + } -.filterLabel { - color: #666; - font-size: 12px; - white-space: nowrap; -} + // 筛选按钮组 + .filterButtons { + display: flex; + gap: 12px; + } + } + // 表格包装器 + .tableWrapper { + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + :global(.ant-table-wrapper) { + flex: 1; + display: flex; + flex-direction: column; + } + } + } +} \ No newline at end of file diff --git a/src/pages/business_basic/components/OilDataManagement.js b/src/pages/business_basic/components/OilDataManagement.js index 6556f04..0730150 100644 --- a/src/pages/business_basic/components/OilDataManagement.js +++ b/src/pages/business_basic/components/OilDataManagement.js @@ -15,48 +15,54 @@ const OilDataManagement = () => { return (
-
当前：
- - - + + +
{firstMenu === 'basic' ? : } diff --git a/src/pages/business_basic/components/OilDataManagement.less b/src/pages/business_basic/components/OilDataManagement.less index 9020e8e..adb1fc9 100644 --- a/src/pages/business_basic/components/OilDataManagement.less +++ b/src/pages/business_basic/components/OilDataManagement.less @@ -1,25 +1,73 @@ .container { - padding: 20px; - // background: #f5f5f5; + padding: 15px 0px; min-height: 100%; .topBar { display: flex; - align-items: center; - gap: 12px; - padding: 8px 12px; - background: #f0f7f7; - border: 1px solid #e1eeee; - border-radius: 6px; + + height: 46px; margin-bottom: 16px; .currentLabel { - color: #2f4f4f; - font-weight: 600; + border-top-left-radius: 20px; + height: 100%; + width: 230px; + display: flex; + align-items: center; + padding-left: 22px; + color: #fff; + font-size: 17px; + font-weight: 450; + background: pink; + background-image: url('@/assets/business_basic/bgOil.png'); + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center center; + } + + .selectsWrapper { + height: 100%; + // width: 230px; + background-color: #fff; + border: 1px solid transparent; + border-image-source: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(167, 229, 228, 0) 59.69%, #A7E5E4 79.76%); + border-image-slice: 1; + + display: flex; + align-items: center; + gap: 12px; + flex: 1; } .topSelect { - width: 160px; + width: 130px; + display: flex; + align-items: center; + text-align: center; + box-shadow: none; + + :global(.ant-select-selector) { + border: transparent !important; + background-image: url('@/assets/business_basic/Union.svg'); + background-repeat: no-repeat; + background-position: center center; + font-size: 12px; + color: rgba(0, 102, 101, 1); + background-size: 100% 100%; + box-shadow: none !important; + } + + :global(.ant-select-focused .ant-select-selector), + :global(.ant-select-selector:hover) { + border: transparent !important; + box-shadow: none !important; + + } + + :global(.ant-select-arrow) { + right: 25px; + color: rgba(0, 102, 101, 1); + } } } @@ -87,5 +135,4 @@ } } } -} - +} \ No newline at end of file