fix(): 修改发票设置和商户信息页面样式等

src/config/character.config.js

@@ -693,7 +693,30 @@ export default {
       "text": "女性",
       "value": 2
     },
-  ]
+  ],
+  // 财务管理 -- 异常处理 车场类型
+  roadType: [
+    {
+        label: "全部",
+        value: 0,
+    },
+    {
+        label: "路侧平行",
+        value: 1,
+    },
+    {
+        label: "路侧垂停",
+        value: 2,
+    },
+    {
+        label: "封闭车场",
+        value: 3,
+    },
+    {
+        label: "半封闭车场",
+        value: 4,
+    },
+  ],
 }
 //商户名称
 export const merchantName = [
@@ -726,4 +749,5 @@ export const schedule = [
 ]
 // 页数格式
 export const pageSizeOptions = ["10", "40", "100"];
+;
 

src/pages/FinancialMgm/ExceptionDeal/StartExceptionDeal/index.jsx

@@ -1,15 +1,256 @@
 import React, { useState, useRef, useEffect } from "react";
-// import {  message, Pagination, Table, Space, Modal, } from "antd";
-// import { dictionary, utils } from "@/config/common";
-// import moment from 'moment'
-// import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
-// import ajax from "@/services"
-// import {  FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components"
-// import "./index.scss";
-// import errorImg from "@/assets/images/layout/error.png"
-// import {  useLocation } from "react-router-dom";
+import {
+  message,
+  Pagination,
+  Table,
+  Space,
+  Modal,
+  Select,
+  Input,
+  Cascader,
+  DatePicker,
+  Button
+} from "antd";
+import { dictionary, utils } from "@/config/common";
+import moment from "moment";
+import {
+  useSessionStorageState,
+  useUpdateEffect,
+  useSize,
+  useUpdate,
+} from "ahooks";
+import ajax from "@/services";
+import {
+  FormInput,
+  FormSelect,
+  OptionPanel,
+  ResultPanel,
+  FormSliderPicker,
+  AreaCascader,
+  ImgResize,
+  ImgZoom,
+} from "@/components";
+import "./index.scss";
+import errorImg from "@/assets/images/layout/error.png";
+import { useLocation } from "react-router-dom";
 function StartExceptionDeal() {
-    return <div>StartExceptionDeal</div>
+  // 默认数据
+  const defaultData = {
+    park_id: "", // 停车订单ID
+    operator_id: 0, // 商户名称
+    area: [0], // 区域
+    road_id: "", // 车场名称
+    road_type: 0, // 车场类型
+    plate: "", // 车牌号
+    exit_gate: 2, // 出入场类型
+    start_date: moment().subtract(7, "days").startOf("day").format("YYYY-MM-DD HH:mm:ss"), // 开始时间
+    end_date: moment().format("YYYY-MM-DD HH:mm:ss"), // 结束时间
+  };
+  // session缓存
+  const [defaultParams, setDefaultParams] = useSessionStorageState(
+    "formData_editOrderInquiry",
+    { defaultValue: null }
+  );
+
+  // 表单数据
+  const [formData, setFormData] = useState({
+    ...defaultData,
+    ...defaultParams,
+  });
+  const [operatorList, setOperatorList] = useState([
+    { value: 0, label: "全部" },
+  ]); //商户名称
+  const [areaList, setAreaList] = useState([]); //区域的下拉数据
+  
+  const [loading, setLoading] = useState(false); // 检索按钮加载状态
+
+  // 获取商户名称
+  const $getAllOperator = () => {
+    ajax
+      .getAllOperator()
+      .then((res) => {
+        if (res.status === 20000 || res.status == 0) {
+          setOperatorList(res.data || { value: 0, label: "全部" });
+        } else {
+          message.error(res.message);
+        }
+      })
+      .catch((error) => {
+        message.error(error.message);
+      });
+  };
+
+  // 获取区域树结构
+  const $getAreaList = () => {
+    ajax
+      .getAreaTree()
+      .then((res) => {
+        if (res.status === 20000 || res.status == 0) {
+          setAreaList(
+            res.data || [{ name: "全部", id: 0, level: 1, children: [] }]
+          );
+        } else {
+          message.error(res.message);
+        }
+      })
+      .catch((error) => {
+        message.error(error.message);
+      });
+  };
+
+  useEffect(() => {
+    $getAllOperator();
+    $getAreaList();
+  }, []);
+
+  return (
+    <div className="start-exception-deal edit-order-inquiry">
+      <div className="paid-search">
+        <div className="title">查询条件</div>
+        <div className="form-Wrap">
+          <div className="yisa-search">
+            <label>停车订单ID</label>
+            <Input
+              className="form-con"
+              placeholder="请输入停车订单ID"
+              value={formData?.park_id}
+              allowClear
+              onChange={(e) =>
+                setFormData({ ...formData, park_id: e.target.value || "" })
+              }
+            />
+          </div>
+          <div className="yisa-search">
+            <label>区域</label>
+            <Cascader
+              className="form-con"
+              popupClassName="start-exception-deal-cascader"
+              options={areaList}
+              placeholder="请选择区域"
+              expandTrigger="hover"
+              // changeOnSelect
+              fieldNames={{
+                label: "name",
+                value: "id",
+                children: "children",
+              }}
+              value={formData.area}
+              onChange={(v, option) => {
+                setFormData({ ...formData, area: v ? v : [0] });
+              }}
+            />
+          </div>
+          <div className="yisa-search">
+            <label>商户名称</label>
+            <Select
+              className="form-con"
+              placeholder="请选择"
+              options={operatorList}
+              allowClear
+              value={formData.operator_id}
+              onChange={(v) => setFormData({ ...formData, operator_id: v || 0})}
+            />
+          </div>
+          <div className="yisa-search">
+            <label>车场名称</label>
+            <Input
+              className="form-con"
+              placeholder="请输入车场名称"
+              allowClear
+              value={formData?.road_id}
+              onChange={(e) =>
+                setFormData({ ...formData, road_id: e.target.value || "" })
+              }
+            />
+          </div>
+          <div className="yisa-search">
+            <label>车场类型</label>
+            <Select
+              className="form-con"
+              placeholder="请选择"
+              allowClear
+              options={dictionary.roadType}
+              value={formData.road_type}
+              onChange={(v) => setFormData({ ...formData, road_type: v || 0})}
+            />
+          </div>
+          <div className="yisa-search">
+            <label>车牌号</label>
+            <Input
+              className="form-con"
+              placeholder="请输入车牌号"
+              allowClear
+              value={formData?.plate}
+              onChange={(e) =>
+                setFormData({ ...formData, plate: e.target.value || "" })
+              }
+            />
+          </div>
+          <div className="yisa-search">
+            <label>出入场类型</label>
+            <Select
+              className="form-con"
+              placeholder="请选择"
+              options={[
+                {
+                  label: "出场",
+                  value: 1,
+                },
+                {
+                  label: "入场",
+                  value: 2,
+                },
+              ]}
+              value={formData.exit_gate}
+              onChange={(v) => setFormData({ ...formData, exit_gate: v})}
+            />
+          </div>
+          <div className="yisa-search">
+            <label>开始时间</label>
+            <DatePicker
+              className="form-con"
+              showTime 
+              format={"YYYY-MM-DD HH:mm:ss"}
+              defaultValue={moment(formData.start_date)}
+              disabledDate={(current) => current > moment(formData.end_date)}
+              onChange={(date, time) => {
+                setFormData({ ...formData, start_date: time || null })
+              }}
+            />
+          </div>
+          <div className="yisa-search">
+            <label>结束时间</label>
+            <DatePicker
+              className="form-con"
+              showTime 
+              format={"YYYY-MM-DD HH:mm:ss"}
+              defaultValue={moment(formData.end_date)}
+              disabledDate={(current) => current < moment(formData.start_date)}
+              onChange={(date, time) => {
+                setFormData({ ...formData, end_date: time || null })
+              }}
+            />
+          </div>
+          <div className="form-btn">
+              <Button
+                className="reset"
+                onClick={() => setFormData(defaultData)}
+              >
+                重置
+              </Button>
+              <Button
+                className="submit"
+                type="primary"
+                // onClick={handleSearch}
+                loading={loading}
+              >
+                查询
+              </Button>
+            </div>
+        </div>
+      </div>
+    </div>
+  );
 }
 
-export default StartExceptionDeal;
+export default StartExceptionDeal;

src/pages/FinancialMgm/ExceptionDeal/StartExceptionDeal/index.scss

@@ -1,5 +1,14 @@
 @import "@/assets/css/mixin.scss";
-$color-container-bg : var(--color-container-bg);
-$color-user-list-bg : var(--color-user-list-bg);
-$color-text : var(--color-text);
-$color-primary : var(--color-primary);
+$color-container-bg: var(--color-container-bg);
+$color-user-list-bg: var(--color-user-list-bg);
+$color-text: var(--color-text);
+$color-primary: var(--color-primary);
+
+.start-exception-deal {
+}
+
+.start-exception-deal-cascader {
+  .ant-cascader-menu-item-active {
+    background-color: var(--color-tag-bg) !important;
+  }
+}

src/pages/MerchantMgm/InvoiceConf/index.scss

@@ -5,148 +5,206 @@ $color-text : var(--color-text);
 $color-primary : var(--color-primary);
 
 .invoiceConf {
-  .panel {
-    width: 100%;
-    height: 100px;
-    padding-top: 20px;
-    padding-left: 0.625rem;
-    background: none;
-
-    .btn {
-      margin: 5px 5px;
-      border-radius: 5px;
-      border: none;
-    }
-    .reset-btn {
-      color: #000;
-      background-color: #fff;
-    }
-
-    .create-btn {
-      background-color: #67C23A;
-
-    }
-
-    .search-btn {
-      background-color: #409EFF;
-    }
-    .panel-1 {
-      display: flex;
-      align-items: center;
-
-      .ant-input{
-        background: transparent;
-        border-color: var(--color-border);
-      }
-
-      .form-item{
-        margin: 5px 40px;
+  height: 100%;
+  .merchant-info-table {
+    display: flex;
+    height: 100%;
+    padding-top: 10px;
+    .panel {
+      display: block;
+      width: 375px;
+      padding: 0 10px 20px 20px;
+      background: transparent;
+      .title {
+        width: 100%;
+        font-size: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+        font-weight: 700;
+        text-align: left;
+        color: var(--color-text);
+        margin-bottom: 10px;
       }
-
-
-      .ant-select-arrow {
-          background: none !important;
+      .panel-1 {
+        display: flex;
+        >.ant-form-inline {
+          display: block;
+          .ant-form-item-row {
+            flex: 1;
+            .ant-input-group {
+              display: flex;
+              .ant-input-group-addon {
+                width: 120px;
+                margin-right: 10px;
+              }
+            }
+            .ant-form-item-control {
+              flex: 1;
+            }
+          }
         }
-
-
-        .yisa-cascader {
-          width: 8rem;
+  
+        .yisa-search {
+          display: flex;
+          flex-basis: fit-content;
+          align-items: center;
+          margin: 10px 0;
+          label {
+            display: inline-block;
+            width: 120px;
+            text-align: right;
+            margin-right: 10px;
+          }
+          .yisa-cascader {
+            width: 120px;
+            background: transparent;
+            border-color: var(--color-border);
+          }
+  
+          .yisa-select {
+            // width: 190px;
+  
+            .ant-select-selector {
+              background: transparent;
+              border-color: var(--color-border);
+            }
+  
+          }
+  
+          .form-input {
+            // width: 190px;
+            background: transparent;
+            border-color: var(--color-border);
+          }
+  
+          .ant-select-arrow {
+            background: none !important;
+          }
+  
+          .ant-input {
+            background: transparent;
+            border-color: var(--color-border);
+          }
+        }
+        .search-group-item {
           background: transparent;
           border-color: var(--color-border);
         }
-
-        .yisa-select {
-          width: 11.875rem;
-
-          .ant-select-selector {
-            background: transparent;
-            border-color: var(--color-border);
+  
+  
+        .btnBox {
+          display: flex;
+          margin-top: 20px;
+          align-items: center;
+          margin-right: 0;
+          .ant-form-item-control-input-content {
+            display: flex;
+            justify-content: space-between;
+          }
+          .btn {
+            width: 110px;
+            height: 36px;
+            // margin: 0 5px;
+            border-radius: 5px;
+            border: none;
+          }
+  
+          .search-btn {
+            background-color: #409EFF;
+          }
+  
+          .reset-btn {
+            color: #000;
+            background-color: #fff;
+          }
+  
+          .create-btn {
+            background-color: #67C23A;
+  
           }
-
         }
-
-      .search-group-item {
-        margin-right: 0.625rem;
-        width: 16.875rem;
-        background: transparent;
-        border-color: var(--color-border);
-
       }
     }
+    .table-content {
+      flex: 1;
+      padding-bottom: 15px;
+      padding: 20px;
+      background: var(--color-user-list-bg);
+      border-top-left-radius: 20px;
+      box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
+      .table {
+        width: 100%;
+        max-height: calc(100% - 50px);
+        .ant-table-body {
+          @include scrollBar(var(--color-user-list-bg), #3B97FF);
 
-
-  }
-
-  .table {
-    width: 98%;
-    margin: 15px 10px 10px 15px;
-
-
-    .ant-table-thead {
-      th {
-        padding: 0px 16px;
-        height: 50px;
-      }
-
-      .ant-table-cell {
-        background: var(--color-table-header-bg) !important;
-        font-weight: 700;
-
-        &::before {
-          display: none;
         }
-      }
-    }
-
-    .ant-table-tbody {
-      tr {
-        &:nth-child(2n) {
-          td {
-            background: #3E4557 !important;
+        .ant-table-thead {
+          th {
+            padding: 0px 16px;
+            height: 50px;
           }
-        }
-
-        &:hover {
-          td {
-            background: #3E4557 !important;
+    
+          .ant-table-cell {
+            background: var(--color-table-header-bg) !important;
+            font-weight: 700;
+    
+            &::before {
+              display: none;
+            }
           }
         }
-
-        td {
-          background: #3E4557 !important;
-          border-bottom-color: #f2f2f2;
+    
+        .ant-table-tbody {
+          tr {
+            &:nth-child(2n) {
+              td {
+                background: #3E4557 !important;
+              }
+            }
+    
+            &:hover {
+              td {
+                background: #3E4557 !important;
+              }
+            }
+    
+            td {
+              background: #3E4557 !important;
+              border-bottom-color: #f2f2f2;
+            }
+          }
         }
-      }
-    }
-
-    .ant-pagination-options {
-      .ant-select {
-        &:hover {
+    
+        .ant-pagination-options {
+          .ant-select {
+            &:hover {
+              .ant-select-selector {
+                border-color: #f5f6f9;
+                box-shadow: none;
+              }
+            }
+          }
+    
           .ant-select-selector {
             border-color: #f5f6f9;
-            box-shadow: none;
           }
-        }
-      }
-
-      .ant-select-selector {
-        border-color: #f5f6f9;
-      }
-
-      .ant-select-focused {
-        .ant-select-selector {
-          box-shadow: none !important;
-          border-color: #f5f6f9 !important;
-        }
-      }
-
-      .ant-pagination-options-quick-jumper {
-        input {
-          background: #3E4557;
-          border-color: #f5f6f9;
-
-          &:focus {
-            box-shadow: none;
+    
+          .ant-select-focused {
+            .ant-select-selector {
+              box-shadow: none !important;
+              border-color: #f5f6f9 !important;
+            }
+          }
+    
+          .ant-pagination-options-quick-jumper {
+            input {
+              background: #3E4557;
+              border-color: #f5f6f9;
+    
+              &:focus {
+                box-shadow: none;
+              }
+            }
           }
         }
       }
@@ -162,9 +220,9 @@ $color-primary : var(--color-primary);
   }
 
   #create {
-    height: 800px;
+    height: 100%;
     overflow-y: scroll;
-
+    @include scrollBar(var(--color-user-list-bg), #3B97FF);
     .create-form {
       .btns {
         display: flex;
@@ -281,9 +339,9 @@ $color-primary : var(--color-primary);
   }
 
   #check {
-    height: 800px;
+    height: 100%;
     overflow-y: scroll;
-
+    @include scrollBar(var(--color-user-list-bg), #3B97FF);
     .check-form {
       .btns {
         display: flex;

src/pages/MerchantMgm/InvoiceConf/loadable.jsx

@@ -551,8 +551,9 @@ function InvoiceConf() {
 
       {
         !createVisible && !checkVisible ?
-          <>
+          <div className="merchant-info-table">
             <div className="panel">
+              <div className="title">查询条件</div>
               <div className="panel-1">
 
                 <Form
@@ -569,14 +570,14 @@ function InvoiceConf() {
                     label="配置ID："
                     name="info_id"
                     labelAlign="left"
-                    className="form-item"
+                    className="form-item yisa-search"
                   >
-                    <Input placeholder="请输入准确信息"></Input>
+                    <Input className="form-input" placeholder="请输入准确信息"></Input>
                   </Form.Item>
 
                   <Form.Item
                     name="type_name"
-                    className="form-item"
+                    className="form-item yisa-search"
                   >
                     <Input
                       addonBefore={
@@ -596,7 +597,7 @@ function InvoiceConf() {
                     label="发票平台："
                     name="receipt_type"
                     labelAlign="left"
-                    className="form-item"
+                    className="form-item yisa-search"
                   >
                     <Select
                       className="yisa-select"
@@ -609,7 +610,7 @@ function InvoiceConf() {
                     label="状态："
                     name="status"
                     labelAlign="left"
-                    className="form-item"
+                    className="form-item yisa-search"
                   >
                     <Select
                       className="yisa-select"
@@ -622,7 +623,7 @@ function InvoiceConf() {
                     label="最近修改时间："
                     name="last_time"
                     labelAlign="left"
-                    className="form-item"
+                    className="form-item yisa-search"
                   >
                     <RangePicker
                       defaultValue={[moment(formData.start), moment(formData.end)]}
@@ -632,17 +633,13 @@ function InvoiceConf() {
                     />
                   </Form.Item>
 
-                  <Form.Item>
+                  <Form.Item className="btnBox" layout="inline">
                     <Button type="primary" className="search-btn btn" icon={<SearchOutlined />} onClick={() => { getSearchData() }}>
                       搜索
                     </Button>
-                  </Form.Item>
-                  <Form.Item>
                     <Button type="primary" className="reset-btn btn" onClick={() => { getResetData() }}>
                       条件重置
                     </Button>
-                  </Form.Item>
-                  <Form.Item>
                     <Button type="primary" className="create-btn btn" onClick={() => { createData() }}>
                       创建用户
                     </Button>
@@ -650,32 +647,35 @@ function InvoiceConf() {
                 </Form>
               </div>
             </div>
-            <Table
-              columns={columns}
-              className="table"
-              pagination={false}
-              dataSource={tableData}
-              loading={loading}
-            ></Table>
-            <Pagination
-              className="pagination-common"
-              showSizeChanger
-              showQuickJumper
-              showTotal={() => {
-                if (total) {
-                  return `共 ${total} 条`
+            <div className="table-content">
+              <Table
+                columns={columns}
+                className="table"
+                pagination={false}
+                dataSource={tableData}
+                loading={loading}
+                scroll={{ y: "calc(100vh - 280px)" }}
+              ></Table>
+              <Pagination
+                className="pagination-common"
+                showSizeChanger
+                showQuickJumper
+                showTotal={() => {
+                  if (total) {
+                    return `共 ${total} 条`
+                  }
+                  else return `共 0 条`
                 }
-                else return `共 0 条`
-              }
-              }
-              total={total}
-              current={pageInfo.pn}
-              pageSize={pageInfo.page_size}
-              pageSizeOptions={pageSizeOptions}
-              onChange={changePn}
-              onShowSizeChange={changeLength}
-            />
-          </> :
+                }
+                total={total}
+                current={pageInfo.pn}
+                pageSize={pageInfo.page_size}
+                pageSizeOptions={pageSizeOptions}
+                onChange={changePn}
+                onShowSizeChange={changeLength}
+              />
+            </div>
+          </div> :
           ''
       }
 

src/pages/MerchantMgm/MerchantInfo/index.scss

@@ -5,158 +5,206 @@ $color-text : var(--color-text);
 $color-primary : var(--color-primary);
 
 #MerchantInfo {
-  .panel {
-    width: 100%;
-    // height: 100px;
-    padding-top: 20px;
-    padding-left: 20px;
-    background: none;
-
-    .panel-1 {
-      display: flex;
-
-      .yisa-search {
+  height: 100%;
+  .merchant-info-table {
+    display: flex;
+    height: 100%;
+    padding-top: 10px;
+    .panel {
+      display: block;
+      width: 375px;
+      padding: 0 10px 20px 20px;
+      background: transparent;
+      .title {
+        width: 100%;
+        font-size: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+        font-weight: 700;
+        text-align: left;
+        color: var(--color-text);
+        margin-bottom: 10px;
+      }
+      .panel-1 {
         display: flex;
-        flex-basis: fit-content;
-        align-items: center;
-        width: 288px;
-        margin: 10px 5px;
-
-        .yisa-cascader {
-          width: 100px;
-          background: transparent;
-          border-color: var(--color-border);
+        >.ant-form-inline {
+          display: block;
+          .ant-form-item-row {
+            flex: 1;
+            .ant-input-group {
+              display: flex;
+              .ant-input-group-addon {
+                width: 120px;
+                margin-right: 10px;
+              }
+            }
+            .ant-form-item-control {
+              flex: 1;
+            }
+          }
         }
-
-        .yisa-select {
-          width: 190px;
-
-          .ant-select-selector {
+  
+        .yisa-search {
+          display: flex;
+          flex-basis: fit-content;
+          align-items: center;
+          margin: 10px 0;
+          label {
+            display: inline-block;
+            width: 120px;
+            text-align: right;
+            margin-right: 10px;
+          }
+          .yisa-cascader {
+            width: 120px;
+            background: transparent;
+            border-color: var(--color-border);
+          }
+  
+          .yisa-select {
+            // width: 190px;
+  
+            .ant-select-selector {
+              background: transparent;
+              border-color: var(--color-border);
+            }
+  
+          }
+  
+          .form-input {
+            // width: 190px;
+            background: transparent;
+            border-color: var(--color-border);
+          }
+  
+          .ant-select-arrow {
+            background: none !important;
+          }
+  
+          .ant-input {
             background: transparent;
             border-color: var(--color-border);
           }
-
-        }
-
-        .form-input {
-          width: 190px;
-          background: transparent;
-          border-color: var(--color-border);
-        }
-
-        .ant-select-arrow {
-          background: none !important;
         }
-
-        .ant-input {
+        .search-group-item {
           background: transparent;
           border-color: var(--color-border);
         }
-      }
-      .search-group-item {
-        background: transparent;
-        border-color: var(--color-border);
-      }
-
-
-      .btnBox {
-        display: flex;
-        align-items: center;
-
-        .btn {
-          margin: 0 5px;
-          border-radius: 5px;
-          border: none;
-        }
-
-        .search-btn {
-          background-color: #409EFF;
-        }
-
-        .reset-btn {
-          color: #000;
-          background-color: #fff;
-        }
-
-        .create-btn {
-          background-color: #67C23A;
-
+  
+  
+        .btnBox {
+          display: flex;
+          margin-top: 20px;
+          align-items: center;
+          margin-right: 0;
+          .ant-form-item-control-input-content {
+            display: flex;
+            justify-content: space-between;
+          }
+          .btn {
+            width: 110px;
+            height: 36px;
+            // margin: 0 5px;
+            border-radius: 5px;
+            border: none;
+          }
+  
+          .search-btn {
+            background-color: #409EFF;
+          }
+  
+          .reset-btn {
+            color: #000;
+            background-color: #fff;
+          }
+  
+          .create-btn {
+            background-color: #67C23A;
+  
+          }
         }
       }
     }
+    .table-content {
+      flex: 1;
+      padding-bottom: 15px;
+      padding: 20px;
+      background: var(--color-user-list-bg);
+      border-top-left-radius: 20px;
+      box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
+      .table {
+        width: 100%;
+        max-height: calc(100% - 50px);
+        .ant-table-body {
+          @include scrollBar(var(--color-user-list-bg), #3B97FF);
 
-  }
-
-  .table {
-    width: 98%;
-    margin: 15px 10px 10px 15px;
-
-
-    .ant-table-thead {
-      th {
-        padding: 0px 16px;
-        height: 50px;
-      }
-
-      .ant-table-cell {
-        background: var(--color-table-header-bg) !important;
-        font-weight: 700;
-
-        &::before {
-          display: none;
         }
-      }
-    }
-
-    .ant-table-tbody {
-      tr {
-        &:nth-child(2n) {
-          td {
-            background: #3E4557 !important;
+        .ant-table-thead {
+          th {
+            padding: 0px 16px;
+            height: 50px;
           }
-        }
-
-        &:hover {
-          td {
-            background: #3E4557 !important;
+    
+          .ant-table-cell {
+            background: var(--color-table-header-bg) !important;
+            font-weight: 700;
+    
+            &::before {
+              display: none;
+            }
           }
         }
-
-        td {
-          background: #3E4557 !important;
-          border-bottom-color: #f2f2f2;
+    
+        .ant-table-tbody {
+          tr {
+            &:nth-child(2n) {
+              td {
+                background: #3E4557 !important;
+              }
+            }
+    
+            &:hover {
+              td {
+                background: #3E4557 !important;
+              }
+            }
+    
+            td {
+              background: #3E4557 !important;
+              border-bottom-color: #f2f2f2;
+            }
+          }
         }
-      }
-    }
-
-    .ant-pagination-options {
-      .ant-select {
-        &:hover {
+    
+        .ant-pagination-options {
+          .ant-select {
+            &:hover {
+              .ant-select-selector {
+                border-color: #f5f6f9;
+                box-shadow: none;
+              }
+            }
+          }
+    
           .ant-select-selector {
             border-color: #f5f6f9;
-            box-shadow: none;
           }
-        }
-      }
-
-      .ant-select-selector {
-        border-color: #f5f6f9;
-      }
-
-      .ant-select-focused {
-        .ant-select-selector {
-          box-shadow: none !important;
-          border-color: #f5f6f9 !important;
-        }
-      }
-
-      .ant-pagination-options-quick-jumper {
-        input {
-          background: #3E4557;
-          border-color: #f5f6f9;
-
-          &:focus {
-            box-shadow: none;
+    
+          .ant-select-focused {
+            .ant-select-selector {
+              box-shadow: none !important;
+              border-color: #f5f6f9 !important;
+            }
+          }
+    
+          .ant-pagination-options-quick-jumper {
+            input {
+              background: #3E4557;
+              border-color: #f5f6f9;
+    
+              &:focus {
+                box-shadow: none;
+              }
+            }
           }
         }
       }
@@ -172,8 +220,9 @@ $color-primary : var(--color-primary);
   }
 
   #create {
-    height: 800px;
+    height: 100%;
     overflow-y: scroll;
+    @include scrollBar(var(--color-user-list-bg), #3B97FF);
 
     .create-form {
       .ant-form-item-label{
@@ -352,9 +401,9 @@ $color-primary : var(--color-primary);
   }
 
   #check {
-    height: 800px;
+    height: 100%;
     overflow-y: scroll;
-
+    @include scrollBar(var(--color-user-list-bg), #3B97FF);
     .check-form {
       .btns {
         display: flex;

src/pages/MerchantMgm/MerchantInfo/loadable.jsx

@@ -766,8 +766,9 @@ function MerchantInfo() {
     <div id="MerchantInfo" >
       {
         !createVisible && !updateVisible && !checkVisible ?
-          <>
+          <div className="merchant-info-table">
             <div className="panel">
+              <div className="title">查询条件</div>
               <div className="panel-1">
                 <Form
                   form={searchForm}
@@ -853,10 +854,10 @@ function MerchantInfo() {
                     className="btnBox"
                     layout="inline"
                   >
-                    <Button type="primary" className="search-btn btn" icon={<SearchOutlined />} onClick={() => { getSearchData() }}>
+                    <Button type="primary" className="search-btn btn color-btn" icon={<SearchOutlined />} onClick={() => { getSearchData() }}>
                       搜索
                     </Button>
-                    <Button type="primary" className="reset-btn btn" onClick={() => { getResetData() }}>
+                    <Button type="primary" className="reset-btn btn color-reset" onClick={() => { getResetData() }}>
                       条件重置
                     </Button>
                     <Button type="primary" className="create-btn btn" onClick={() => { createData() }}>
@@ -866,16 +867,18 @@ function MerchantInfo() {
                 </Form>
               </div>
             </div>
-
-            <Table
-              columns={columns}
-              className="table"
-              pagination={false}
-              dataSource={tableData}
-              loading={loading}
-            ></Table>
-            <Pagination
-              className="pagination-common"
+            <div className="table-content">
+              <Table
+                columns={columns}
+                className="table"
+                pagination={false}
+                dataSource={tableData}
+                loading={loading}
+                rowKey={(record) => record.id}
+                scroll={{ y: "calc(100vh - 280px)" }}
+              ></Table>
+              <Pagination
+                className="pagination-common"
               showSizeChanger
               showQuickJumper
               showTotal={() => {
@@ -890,9 +893,10 @@ function MerchantInfo() {
               pageSize={pageInfo.page_size}
               pageSizeOptions={pageSizeOptions}
               onChange={changePn}
-              onShowSizeChange={changeLength}
-            />
-          </> : ''
+                onShowSizeChange={changeLength}
+              />
+            </div>
+          </div> : ''
       }
 
       {