fix(): 样式修改

src/pages/OperationCenter/OperationSales/AdsMgm/index.scss

@@ -1,18 +1,22 @@
 @import "@/assets/css/mixin.scss";
 
 .ads-mgm {
-  padding: 20px;
   width: 100%;
   height: 100%;
   overflow-y: auto;
   @include scrollBar(#8bb3e3, #3471c4);
 
   .hidden {
-    display: none;
+    display: none !important;
+  }
+
+  .mgm-wraper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding: 10px 0 0 10px;
   }
 
-  .search-group,
-  .result-group,
   .full-group {
     width: 100%;
     padding: 15px 15px 0;
@@ -22,13 +26,41 @@
   }
 
   .search-group {
+    display: block;
+    width: 375px;
+    padding: 10px;
+
+    .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: 20px;
+    }
+
+    .ant-select-selector,
+    .ant-picker,
+    .ant-input {
+      background-color: var(--color-search-list-item-bg) !important;
+      box-shadow: none !important;
+      color: var(--color-search-list-item-value);
+      border-color: var(--color-search-list-item-bd) !important;
+    }
+
     .form-box {
+      width: 100%;
       display: flex;
       align-items: center;
-      margin: 0 20px 15px 0;
+      margin-bottom: 20px;
 
       .form-txt {
         color: var(--color-search-list-item-text);
+        flex: 0 0 25%;
+        max-width: 25%;
+        text-align: right;
+        padding-right: 6px;
       }
 
       .form-con {
@@ -44,16 +76,34 @@
 
     .form-btn {
       display: flex;
-      align-items: center;
-      margin-bottom: 15px;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      margin: 40px 10px 10px;
+      padding: 0 3px;
 
       .ant-btn+.ant-btn {
         margin-left: 10px;
       }
 
-      .green {
-        background-color: #67c23a;
-        border-color: #67c23a;
+      .ant-btn span {
+        font-size: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+        font-weight: 400;
+        text-align: center;
+        color: #ffffff;
+      }
+
+      .reset {
+        width: 90px;
+        height: 36px;
+        border-radius: 4px;
+        background: var(--button-default-bg);
+      }
+
+      .submit {
+        width: calc(100% - 100px);
+        height: 36px;
+        border-radius: 4px;
       }
     }
   }
@@ -61,27 +111,30 @@
   .row-operate {
     display: flex;
     justify-content: flex-end;
-    margin-top: -20px;
+  }
 
-    .ant-btn+.ant-btn {
-      margin-left: 10px;
-    }
+  .ant-btn+.ant-btn {
+    margin-left: 10px;
+  }
 
-    .green {
-      background-color: #67c23a;
-      border-color: #67c23a;
-    }
+  .green {
+    background-color: #67c23a;
+    border-color: #67c23a;
   }
 
   .result-group {
-    margin-top: 20px;
+    width: calc(100% - 375px);
     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);
 
     .row-head {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: 10px;
+      margin-bottom: 12px;
 
       .number-wrapper {
         display: inline-flex;
@@ -102,19 +155,44 @@
       }
     }
 
-    div.ant-table-body {
-      max-height: 385px;
-      overflow-y: auto !important;
-      @include scrollBar(#8bb3e3, #3471c4);
+    .cc-result-flow {
+      width: 100%;
+      height: calc(100% - 34px - 13px);
 
-      .row-pic {
+      .yisa-table {
         width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
+        height: calc(100% - 32px - 15px);
+        overflow-y: auto !important;
+        @include scrollBar(#8bb3e3, #3471c4);
+
+        .ant-table-thead {
+          th {
+            background: var(--color-table-header-bg) !important;
+          }
+        }
+
+        .ant-table-tbody {
+          td {
+            background: var(--color-table-body-bg) !important;
+            border-bottom-color: var(--color-table-border-bottom-color);
+          }
+
+          tr:nth-child(even) {
+            td {
+              background: var(--color-table-body-bg-nth-child-even) !important;
+            }
+          }
+        }
 
-        .ant-image {
-          margin-right: 3px;
+        .row-pic {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+
+          .ant-image {
+            margin-right: 3px;
+          }
         }
       }
     }
@@ -123,6 +201,12 @@
   .full-group {
     display: flex;
 
+    .ant-select-selector,
+    .ant-picker,
+    .ant-input {
+      border-color: var(--color-search-list-item-bd) !important;
+    }
+
     .lt-box,
     .rt-box {
       width: 50%;
@@ -172,8 +256,8 @@
         border-radius: 6px;
         width: 148px;
         height: 148px;
-        background-color: #fbfdff;
-        border: 1px solid #c0ccda;
+        background-color: var(--color-container-bg);
+        border: 1px solid var(--color-search-list-item-bd);
         overflow: hidden;
         position: relative;
 
@@ -198,8 +282,8 @@
         border-radius: 6px;
         width: 148px;
         height: 148px;
-        background-color: #fbfdff;
-        border: 1px dashed #c0ccda;
+        background-color: var(--color-container-bg);
+        border: 1px dashed var(--color-search-list-item-bd);
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -234,7 +318,7 @@
 
       .row-box {
         display: flex;
-        background-color: rgb(240, 240, 240);
+        background-color: var(--color-container-bg);
         padding: 6px;
         width: fit-content;
 
@@ -273,12 +357,12 @@
     .ul-list {
       width: 300px;
       margin: 10px auto 20px;
-      border: 1px solid #ccc;
+      border: 1px solid var(--color-search-list-item-bd);
 
       li {
         width: 100%;
         height: 40px;
-        border-bottom: 1px solid #ccc;
+        border-bottom: 1px solid var(--color-search-list-item-bd);
         display: flex;
         align-items: center;
         justify-content: space-between;

src/pages/OperationCenter/OperationSales/AdsMgm/loadable.jsx

@@ -35,9 +35,11 @@ import {
   PlusOutlined,
   DeleteOutlined,
 } from "@ant-design/icons";
+import { ResultFlowResult } from "@/components";
 // import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
 import ajaxCom from "@/services";
 import ajax from "@/services/OperationCenter/OperationMarket";
+import { dictionary } from "@/config/common";
 import moment from "moment";
 import { getToken } from "@/config/cookie";
 import "./index.scss";
@@ -318,6 +320,7 @@ function AdsMgm() {
 
   // 分页
   const paginationProps = {
+    className: "pagination-common",
     position: ["bottomCenter"],
     showQuickJumper: true,
     showSizeChanger: true,
@@ -325,7 +328,9 @@ function AdsMgm() {
     total: resultData?.total,
     showTotal: () => `共 ${resultData.total || 0} 条`,
     pageSize: pageInfo.pageSize,
-    pageSizeOptions: [15, 30, 50, 100],
+    pageSizeOptions: Array.from(
+      new Set([...[15], ...(dictionary?.pageSizeOptions || [])])
+    ),
     onChange: (current, size) => {
       setPageInfo({
         ...pageInfo,
@@ -733,10 +738,11 @@ function AdsMgm() {
   return (
     <div className="ads-mgm">
       {/* 主页 */}
-      <div className={pageType === "1" ? "wraper" : "wraper hidden"}>
+      <div className={pageType === "1" ? "mgm-wraper" : "mgm-wraper hidden"}>
         <div className="search-group">
+          <div class="title">查询条件</div>
           <div className="form-box">
-            <div className="form-txt">展示模块：</div>
+            <div className="form-txt">展示模块</div>
             <Select
               className="form-con"
               allowClear
@@ -759,7 +765,7 @@ function AdsMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">展示位：</div>
+            <div className="form-txt">展示位</div>
             <Select
               className="form-con"
               allowClear
@@ -777,7 +783,7 @@ function AdsMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">区域：</div>
+            <div className="form-txt">区域</div>
             {/* <TreeSelect */}
             <Cascader
               className="form-con"
@@ -799,7 +805,7 @@ function AdsMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">分类：</div>
+            <div className="form-txt">分类</div>
             <Select
               className="form-con"
               allowClear
@@ -816,7 +822,7 @@ function AdsMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">展示状态：</div>
+            <div className="form-txt">展示状态</div>
             <Select
               className="form-con"
               allowClear
@@ -831,7 +837,7 @@ function AdsMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">展示时间：</div>
+            <div className="form-txt">展示时间</div>
             <DatePicker.RangePicker
               className="form-long"
               showTime
@@ -840,7 +846,7 @@ function AdsMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">最后修改时间：</div>
+            <div className="form-txt">最后修改时间</div>
             <DatePicker.RangePicker
               className="form-long"
               showTime
@@ -851,7 +857,7 @@ function AdsMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">广告ID：</div>
+            <div className="form-txt">广告ID</div>
             <Input
               className="form-con"
               placeholder="请输入准确信息"
@@ -862,7 +868,7 @@ function AdsMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">标题：</div>
+            <div className="form-txt">标题</div>
             <Input
               className="form-con"
               placeholder="请输入广告主题标题关键词"
@@ -873,22 +879,16 @@ function AdsMgm() {
             />
           </div>
           <div className="form-btn">
-            <Button type="primary" onClick={handleSearch} loading={loading}>
-              搜索
+            <Button className="reset" onClick={() => setFormData(defaultData)}>
+              重置
             </Button>
-            <Button onClick={() => setFormData(defaultData)}>条件重置</Button>
             <Button
+              className="submit"
               type="primary"
-              className="green"
-              onClick={() => {
-                setRowData(defRowData);
-                setPageType("2");
-              }}
+              onClick={handleSearch}
+              loading={loading}
             >
-              创建广告
-            </Button>
-            <Button type="primary" onClick={() => setPageType("4")}>
-              设置
+              搜索
             </Button>
           </div>
         </div>
@@ -896,19 +896,40 @@ function AdsMgm() {
           <div className="row-head">
             <span className="number-wrapper">
               <span className="letter">共查询到</span>
-              <span className="total-number"> {resultData.total} </span>
+              <span className="total-number"> {resultData.total || 0} </span>
               <span className="letter">条结果</span>
             </span>
+            <div>
+              <Button
+                type="primary"
+                className="green"
+                onClick={() => {
+                  setRowData(defRowData);
+                  setPageType("2");
+                }}
+              >
+                创建广告
+              </Button>
+              <Button type="primary" onClick={() => setPageType("4")}>
+                设置
+              </Button>
+            </div>
           </div>
-          <Table
-            scroll={{ y: true, scrollToFirstRowOnChange: true }}
-            rowKey={(row) => row.id}
-            columns={columns}
-            dataSource={resultData?.list || []}
-            bordered
-            loading={tabLoading}
-            pagination={paginationProps}
-          />
+          <ResultFlowResult
+            ajaxLoad={tabLoading}
+            resultData={resultData?.list || []}
+          >
+            <Table
+              // bordered
+              className="yisa-table"
+              rowKey={(row) => row.id}
+              dataSource={resultData?.list || []}
+              columns={columns}
+              pagination={false}
+              loading={tabLoading}
+            />
+            <Pagination {...paginationProps} className="pagination-common" />
+          </ResultFlowResult>
         </div>
       </div>
       {/* 创建、编辑 */}
@@ -1094,7 +1115,7 @@ function AdsMgm() {
                   <Radio value="1">页面URL</Radio>
                   <Radio value="2">应用路径</Radio>
                 </Radio.Group>
-                <div>
+                <div className="r-con">
                   {rowData?.jumpUrlType == "2" ? (
                     <Cascader
                       className="row-lg"

src/pages/OperationCenter/OperationSales/AppPushMgm/index.scss

@@ -1,18 +1,22 @@
 @import "@/assets/css/mixin.scss";
 
 .app-push-mgm {
-  padding: 20px;
   width: 100%;
   height: 100%;
   overflow-y: auto;
   @include scrollBar(#8bb3e3, #3471c4);
 
   .hidden {
-    display: none;
+    display: none !important;
+  }
+
+  .mgm-wraper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding: 10px 0 0 10px;
   }
 
-  .search-group,
-  .result-group,
   .full-group {
     width: 100%;
     padding: 15px 15px 0;
@@ -22,15 +26,44 @@
   }
 
   .search-group {
+    display: block;
+    width: 375px;
+    padding: 10px;
+
+    .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: 20px;
+    }
+
+    .ant-select-selector,
+    .ant-picker,
+    .ant-input {
+      background-color: var(--color-search-list-item-bg) !important;
+      box-shadow: none !important;
+      color: var(--color-search-list-item-value);
+      border-color: var(--color-search-list-item-bd) !important;
+    }
+
     .form-box {
+      width: 100%;
       display: flex;
       align-items: center;
-      margin: 0 20px 15px 0;
+      margin-bottom: 20px;
 
       .form-txt {
         color: var(--color-search-list-item-text);
+        flex: 0 0 25%;
+        max-width: 25%;
+        text-align: right;
+        padding-right: 6px;
       }
 
+
       .form-con {
         flex: 1;
         width: 220px;
@@ -44,16 +77,34 @@
 
     .form-btn {
       display: flex;
-      align-items: center;
-      margin-bottom: 15px;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      margin: 40px 10px 10px;
+      padding: 0 3px;
 
       .ant-btn+.ant-btn {
         margin-left: 10px;
       }
 
-      .green {
-        background-color: #67c23a;
-        border-color: #67c23a;
+      .ant-btn span {
+        font-size: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+        font-weight: 400;
+        text-align: center;
+        color: #ffffff;
+      }
+
+      .reset {
+        width: 90px;
+        height: 36px;
+        border-radius: 4px;
+        background: var(--button-default-bg);
+      }
+
+      .submit {
+        width: calc(100% - 100px);
+        height: 36px;
+        border-radius: 4px;
       }
     }
   }
@@ -61,27 +112,31 @@
   .row-operate {
     display: flex;
     justify-content: flex-end;
-    margin-top: -20px;
+  }
 
-    .ant-btn+.ant-btn {
-      margin-left: 10px;
-    }
+  .ant-btn+.ant-btn {
+    margin-left: 10px;
+  }
 
-    .green {
-      background-color: #67c23a;
-      border-color: #67c23a;
-    }
+  .green {
+    background-color: #67c23a;
+    border-color: #67c23a;
   }
 
   .result-group {
-    margin-top: 20px;
+    width: calc(100% - 375px);
     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);
+
 
     .row-head {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: 10px;
+      margin-bottom: 12px;
 
       .number-wrapper {
         display: inline-flex;
@@ -102,19 +157,44 @@
       }
     }
 
-    div.ant-table-body {
-      max-height: 385px;
-      overflow-y: auto !important;
-      @include scrollBar(#8bb3e3, #3471c4);
+    .cc-result-flow {
+      width: 100%;
+      height: calc(100% - 34px - 13px);
 
-      .row-pic {
+      .yisa-table {
         width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
+        height: calc(100% - 32px - 15px);
+        overflow-y: auto !important;
+        @include scrollBar(#8bb3e3, #3471c4);
+
+        .ant-table-thead {
+          th {
+            background: var(--color-table-header-bg) !important;
+          }
+        }
+
+        .ant-table-tbody {
+          td {
+            background: var(--color-table-body-bg) !important;
+            border-bottom-color: var(--color-table-border-bottom-color);
+          }
 
-        .ant-image {
-          margin-right: 3px;
+          tr:nth-child(even) {
+            td {
+              background: var(--color-table-body-bg-nth-child-even) !important;
+            }
+          }
+        }
+
+        .row-pic {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+
+          .ant-image {
+            margin-right: 3px;
+          }
         }
       }
     }
@@ -123,6 +203,12 @@
   .full-group {
     display: flex;
 
+    .ant-select-selector,
+    .ant-picker,
+    .ant-input {
+      border-color: var(--color-search-list-item-bd) !important;
+    }
+
     .lt-box,
     .rt-box {
       width: 50%;
@@ -196,8 +282,8 @@
         border-radius: 6px;
         width: 148px;
         height: 148px;
-        background-color: #fbfdff;
-        border: 1px solid #c0ccda;
+        background-color: var(--color-container-bg);
+        border: 1px solid var(--color-search-list-item-bd);
         overflow: hidden;
         position: relative;
 
@@ -222,8 +308,8 @@
         border-radius: 6px;
         width: 148px;
         height: 148px;
-        background-color: #fbfdff;
-        border: 1px dashed #c0ccda;
+        background-color: var(--color-container-bg);
+        border: 1px solid var(--color-search-list-item-bd);
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -258,7 +344,7 @@
 
       .row-box {
         display: flex;
-        background-color: rgb(240, 240, 240);
+        background-color: var(--color-container-bg);
         padding: 6px;
         width: fit-content;
 
@@ -297,12 +383,12 @@
     .ul-list {
       width: 300px;
       margin: 10px auto 20px;
-      border: 1px solid #ccc;
+      border: 1px solid var(--color-search-list-item-bd);
 
       li {
         width: 100%;
         height: 40px;
-        border-bottom: 1px solid #ccc;
+        border-bottom: 1px solid var(--color-search-list-item-bd);
         display: flex;
         align-items: center;
         justify-content: space-between;

src/pages/OperationCenter/OperationSales/AppPushMgm/loadable.jsx

@@ -14,8 +14,10 @@ import {
   Tooltip,
 } from "antd";
 import { ControlOutlined, LinkOutlined, HomeOutlined } from "@ant-design/icons";
+import { ResultFlowResult } from "@/components";
 // import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
 import ajax from "@/services/OperationCenter/OperationMarket";
+import { dictionary } from "@/config/common";
 import moment from "moment";
 import "./index.scss";
 
@@ -238,7 +240,9 @@ function AppPushMgm() {
     total: resultData?.total,
     showTotal: () => `共 ${resultData.total || 0} 条`,
     pageSize: pageInfo.pageSize,
-    pageSizeOptions: [15, 30, 50, 100],
+    pageSizeOptions: Array.from(
+      new Set([...[15], ...(dictionary?.pageSizeOptions || [])])
+    ),
     onChange: (current, size) => {
       setPageInfo({
         ...pageInfo,
@@ -399,10 +403,11 @@ function AppPushMgm() {
   return (
     <div className="app-push-mgm">
       {/* 主页 */}
-      <div className={pageType === "1" ? "wraper" : "wraper hidden"}>
+      <div className={pageType === "1" ? "mgm-wraper" : "mgm-wraper hidden"}>
         <div className="search-group">
+          <div class="title">查询条件</div>
           <div className="form-box">
-            <div className="form-txt">任务ID：</div>
+            <div className="form-txt">任务ID</div>
             <Input
               className="form-con"
               placeholder="请输入准确信息"
@@ -413,7 +418,7 @@ function AppPushMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">推送标题：</div>
+            <div className="form-txt">推送标题</div>
             <Input
               className="form-con"
               placeholder="请输入推送标题关键词"
@@ -424,7 +429,7 @@ function AppPushMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">推送分类：</div>
+            <div className="form-txt">推送分类</div>
             <Select
               className="form-con"
               allowClear
@@ -439,7 +444,7 @@ function AppPushMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">目标应用：</div>
+            <div className="form-txt">目标应用</div>
             <Select
               className="form-con"
               allowClear
@@ -456,7 +461,7 @@ function AppPushMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">推送状态：</div>
+            <div className="form-txt">推送状态</div>
             <Select
               className="form-con"
               allowClear
@@ -471,7 +476,7 @@ function AppPushMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">推送时间：</div>
+            <div className="form-txt">推送时间</div>
             <DatePicker.RangePicker
               className="form-long"
               showTime
@@ -480,7 +485,7 @@ function AppPushMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">最后修改时间：</div>
+            <div className="form-txt">最后修改时间</div>
             <DatePicker.RangePicker
               className="form-long"
               showTime
@@ -491,19 +496,16 @@ function AppPushMgm() {
             />
           </div>
           <div className="form-btn">
-            <Button type="primary" onClick={handleSearch} loading={loading}>
-              搜索
+            <Button className="reset" onClick={() => setFormData(defaultData)}>
+              重置
             </Button>
-            <Button onClick={() => setFormData(defaultData)}>条件重置</Button>
             <Button
+              className="submit"
               type="primary"
-              className="green"
-              onClick={() => {
-                setRowData(defRowData);
-                setPageType("2");
-              }}
+              onClick={handleSearch}
+              loading={loading}
             >
-              创建推送
+              搜索
             </Button>
           </div>
         </div>
@@ -511,19 +513,37 @@ function AppPushMgm() {
           <div className="row-head">
             <span className="number-wrapper">
               <span className="letter">共查询到</span>
-              <span className="total-number"> {resultData.total} </span>
+              <span className="total-number"> {resultData.total || 0} </span>
               <span className="letter">条结果</span>
             </span>
+            <div>
+              <Button
+                type="primary"
+                className="green"
+                onClick={() => {
+                  setRowData(defRowData);
+                  setPageType("2");
+                }}
+              >
+                创建推送
+              </Button>
+            </div>
           </div>
-          <Table
-            scroll={{ y: true, scrollToFirstRowOnChange: true }}
-            rowKey={(row) => row.id}
-            columns={columns}
-            dataSource={resultData?.list || []}
-            bordered
-            loading={tabLoading}
-            pagination={paginationProps}
-          />
+          <ResultFlowResult
+            ajaxLoad={tabLoading}
+            resultData={resultData?.list || []}
+          >
+            <Table
+              // bordered
+              className="yisa-table"
+              rowKey={(row) => row.id}
+              dataSource={resultData?.list || []}
+              columns={columns}
+              pagination={false}
+              loading={tabLoading}
+            />
+            <Pagination {...paginationProps} className="pagination-common" />
+          </ResultFlowResult>
         </div>
       </div>
       {/* 创建、编辑 */}
@@ -595,10 +615,10 @@ function AppPushMgm() {
                     );
                   })}
                 </Radio.Group>
-                <div>
+                <div className="r-con">
                   {rowData?.jumpType == "3" ? (
                     <Cascader
-                      className="row-lg"
+                      className="row-sm"
                       placeholder="请选择"
                       fieldNames={{
                         value: "pageCode",

src/pages/OperationCenter/OperationSales/InformationMgm/index.scss

@@ -2,18 +2,22 @@
 @import "@wangeditor/editor/dist/css/style.css";
 
 .information-mgm {
-  padding: 20px;
   width: 100%;
   height: 100%;
   overflow-y: auto;
   @include scrollBar(#8bb3e3, #3471c4);
 
   .hidden {
-    display: none;
+    display: none !important;
+  }
+
+  .mgm-wraper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding: 10px 0 0 10px;
   }
 
-  .search-group,
-  .result-group,
   .full-group,
   .full-wrap {
     width: 100%;
@@ -24,13 +28,41 @@
   }
 
   .search-group {
+    display: block;
+    width: 375px;
+    padding: 10px;
+
+    .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: 20px;
+    }
+
+    .ant-select-selector,
+    .ant-picker,
+    .ant-input {
+      background-color: var(--color-search-list-item-bg) !important;
+      box-shadow: none !important;
+      color: var(--color-search-list-item-value);
+      border-color: var(--color-search-list-item-bd) !important;
+    }
+
     .form-box {
+      width: 100%;
       display: flex;
       align-items: center;
-      margin: 0 20px 15px 0;
+      margin-bottom: 20px;
 
       .form-txt {
         color: var(--color-search-list-item-text);
+        flex: 0 0 25%;
+        max-width: 25%;
+        text-align: right;
+        padding-right: 6px;
       }
 
       .form-con {
@@ -46,16 +78,34 @@
 
     .form-btn {
       display: flex;
-      align-items: center;
-      margin-bottom: 15px;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      margin: 40px 10px 10px;
+      padding: 0 3px;
 
       .ant-btn+.ant-btn {
         margin-left: 10px;
       }
 
-      .green {
-        background-color: #67c23a;
-        border-color: #67c23a;
+      .ant-btn span {
+        font-size: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+        font-weight: 400;
+        text-align: center;
+        color: #ffffff;
+      }
+
+      .reset {
+        width: 90px;
+        height: 36px;
+        border-radius: 4px;
+        background: var(--button-default-bg);
+      }
+
+      .submit {
+        width: calc(100% - 100px);
+        height: 36px;
+        border-radius: 4px;
       }
     }
   }
@@ -63,16 +113,6 @@
   .row-operate {
     display: flex;
     justify-content: space-between;
-    margin-top: -20px;
-
-    .ant-btn+.ant-btn {
-      margin-left: 10px;
-    }
-
-    .green {
-      background-color: #67c23a;
-      border-color: #67c23a;
-    }
 
     .ant-radio-button-wrapper {
       border-left: 1px solid #1890ff !important;
@@ -80,15 +120,29 @@
     }
   }
 
+  .ant-btn+.ant-btn {
+    margin-left: 10px;
+  }
+
+  .green {
+    background-color: #67c23a;
+    border-color: #67c23a;
+  }
+
   .result-group {
-    margin-top: 20px;
+    width: calc(100% - 375px);
     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);
+
 
     .row-head {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: 10px;
+      margin-bottom: 12px;
 
       .number-wrapper {
         display: inline-flex;
@@ -109,36 +163,61 @@
       }
     }
 
-    div.ant-table-body {
-      max-height: 385px;
-      overflow-y: auto !important;
-      @include scrollBar(#8bb3e3, #3471c4);
+    .cc-result-flow {
+      width: 100%;
+      height: calc(100% - 34px - 13px);
 
-      .row-pic {
+      .yisa-table {
         width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
+        height: calc(100% - 32px - 15px);
+        overflow-y: auto !important;
+        @include scrollBar(#8bb3e3, #3471c4);
 
-        .ant-image {
-          margin-right: 3px;
-          width: 30px;
-          height: 30px;
+        .ant-table-thead {
+          th {
+            background: var(--color-table-header-bg) !important;
+          }
         }
-      }
 
-      .ant-table-cell {
-        position: relative;
+        .ant-table-tbody {
+          td {
+            background: var(--color-table-body-bg) !important;
+            border-bottom-color: var(--color-table-border-bottom-color);
+          }
 
-        .stick-pic {
-          position: absolute;
-          top: 0;
-          left: 0;
+          tr:nth-child(even) {
+            td {
+              background: var(--color-table-body-bg-nth-child-even) !important;
+            }
+          }
         }
-      }
 
-      .anticon-calendar {
-        color: #409eff;
+        .row-pic {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+
+          .ant-image {
+            margin-right: 3px;
+            width: 30px;
+            height: 30px;
+          }
+        }
+
+        .ant-table-cell {
+          position: relative;
+
+          .stick-pic {
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+        }
+
+        .anticon-calendar {
+          color: #409eff;
+        }
       }
     }
   }
@@ -147,6 +226,12 @@
   .edit-group {
     display: flex;
 
+    .ant-select-selector,
+    .ant-picker,
+    .ant-input {
+      border-color: var(--color-search-list-item-bd) !important;
+    }
+
     .lt-box,
     .rt-box {
       width: 50%;
@@ -224,8 +309,8 @@
         border-radius: 6px;
         width: 148px;
         height: 148px;
-        background-color: #fbfdff;
-        border: 1px solid #c0ccda;
+        background-color: var(--color-container-bg);
+        border: 1px solid var(--color-search-list-item-bd);
         overflow: hidden;
         position: relative;
 
@@ -250,8 +335,8 @@
         border-radius: 6px;
         width: 148px;
         height: 148px;
-        background-color: #fbfdff;
-        border: 1px dashed #c0ccda;
+        background-color: var(--color-container-bg);
+        border: 1px solid var(--color-search-list-item-bd);
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -287,7 +372,7 @@
 
       .row-box {
         display: flex;
-        background-color: rgb(240, 240, 240);
+        background-color: var(--color-container-bg);
         padding: 6px;
         width: fit-content;
 
@@ -326,12 +411,12 @@
     .cr-box {
       width: 540px;
       margin: 10px auto 20px;
-      border: 1px solid #ebeef5;
+      border: 1px solid var(--color-search-list-item-bd);
 
       .list-top {
         width: 100%;
         padding: 18px 20px;
-        border-bottom: 1px solid #ebeef5;
+        border-bottom: 1px solid var(--color-search-list-item-bd);
         display: flex;
         justify-content: space-between;
 
@@ -365,7 +450,7 @@
 
               &:hover,
               &.active {
-                background-color: #f0f6f9;
+                background-color: var(--color-container-bg);
               }
 
               .btn,
@@ -409,7 +494,13 @@
 
   .extra-group {
     padding: 30px 15px;
-    border-top: 1px solid rgb(220, 223, 230);
+    border-top: 1px solid var(--color-search-list-item-bd);
+
+    .ant-select-selector,
+    .ant-picker,
+    .ant-input {
+      border-color: var(--color-search-list-item-bd) !important;
+    }
 
     .row-box+.row-box {
       margin-top: 30px;

src/pages/OperationCenter/OperationSales/InformationMgm/loadable.jsx

@@ -27,11 +27,13 @@ import {
   DeleteOutlined,
   QuestionCircleFilled,
 } from "@ant-design/icons";
+import { ResultFlowResult } from "@/components";
 // import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
 import ajaxCom from "@/services";
 import ajax from "@/services/OperationCenter/OperationMarket";
 import moment from "moment";
 import { getToken } from "@/config/cookie";
+import { dictionary } from "@/config/common";
 import { Editor, Toolbar } from "@wangeditor/editor-for-react";
 import "./index.scss";
 import errorImg from "@/assets/images/layout/error.png";
@@ -397,7 +399,9 @@ function InformationMgm() {
     total: resultData?.total,
     showTotal: () => `共 ${resultData.total || 0} 条`,
     pageSize: pageInfo.pageSize,
-    pageSizeOptions: [15, 30, 50, 100],
+    pageSizeOptions: Array.from(
+      new Set([...[15], ...(dictionary?.pageSizeOptions || [])])
+    ),
     onChange: (current, size) => {
       setPageInfo({
         ...pageInfo,
@@ -810,10 +814,11 @@ function InformationMgm() {
   return (
     <div className="information-mgm">
       {/* 主页 */}
-      <div className={pageType === "1" ? "wraper" : "wraper hidden"}>
+      <div className={pageType === "1" ? "mgm-wraper" : "mgm-wraper hidden"}>
         <div className="search-group">
+          <div class="title">查询条件</div>
           <div className="form-box">
-            <div className="form-txt">资讯ID：</div>
+            <div className="form-txt">资讯ID</div>
             <Input
               className="form-con"
               placeholder="请输入准确信息"
@@ -824,7 +829,7 @@ function InformationMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">标题：</div>
+            <div className="form-txt">标题</div>
             <Input
               className="form-con"
               placeholder="请输入文章标题关键词"
@@ -835,7 +840,7 @@ function InformationMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">是否置顶：</div>
+            <div className="form-txt">是否置顶</div>
             <Select
               className="form-con"
               allowClear
@@ -846,7 +851,7 @@ function InformationMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">分类：</div>
+            <div className="form-txt">分类</div>
             <Cascader
               className="form-con"
               allowClear
@@ -864,7 +869,7 @@ function InformationMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">状态：</div>
+            <div className="form-txt">状态</div>
             <Select
               className="form-con"
               allowClear
@@ -879,7 +884,7 @@ function InformationMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">区域：</div>
+            <div className="form-txt">区域</div>
             {/* <TreeSelect */}
             <Cascader
               className="form-con"
@@ -901,7 +906,7 @@ function InformationMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">发布渠道：</div>
+            <div className="form-txt">发布渠道</div>
             <TreeSelect
               className="form-con"
               allowClear
@@ -915,7 +920,7 @@ function InformationMgm() {
             />
           </div>
           <div className="form-box">
-            <div className="form-txt">最后修改时间：</div>
+            <div className="form-txt">最后修改时间</div>
             <DatePicker.RangePicker
               className="form-long"
               showTime
@@ -926,31 +931,16 @@ function InformationMgm() {
             />
           </div>
           <div className="form-btn">
-            <Button type="primary" onClick={handleSearch} loading={loading}>
-              搜索
+            <Button className="reset" onClick={() => setFormData(defaultData)}>
+              重置
             </Button>
-            <Button onClick={() => setFormData(defaultData)}>条件重置</Button>
             <Button
+              className="submit"
               type="primary"
-              className="green"
-              onClick={() => {
-                setRowData(defRowData);
-                setGeneral("");
-                setContent("<p><br></p>");
-                setPageType("2");
-              }}
+              onClick={handleSearch}
+              loading={loading}
             >
-              创建资讯
-            </Button>
-            <Button
-              type="primary"
-              onClick={() => {
-                setCheckId("");
-                setFoldIds([]);
-                setPageType("4");
-              }}
-            >
-              设置
+              搜索
             </Button>
           </div>
         </div>
@@ -958,19 +948,49 @@ function InformationMgm() {
           <div className="row-head">
             <span className="number-wrapper">
               <span className="letter">共查询到</span>
-              <span className="total-number"> {resultData.total} </span>
+              <span className="total-number"> {resultData.total || 0} </span>
               <span className="letter">条结果</span>
             </span>
+            <div>
+              <Button
+                type="primary"
+                className="green"
+                onClick={() => {
+                  setRowData(defRowData);
+                  setGeneral("");
+                  setContent("<p><br></p>");
+                  setPageType("2");
+                }}
+              >
+                创建资讯
+              </Button>
+              <Button
+                type="primary"
+                onClick={() => {
+                  setCheckId("");
+                  setFoldIds([]);
+                  setPageType("4");
+                }}
+              >
+                设置
+              </Button>
+            </div>
           </div>
-          <Table
-            scroll={{ y: true, scrollToFirstRowOnChange: true }}
-            rowKey={(row) => row.id}
-            columns={columns}
-            dataSource={resultData?.list || []}
-            bordered
-            loading={tabLoading}
-            pagination={paginationProps}
-          />
+          <ResultFlowResult
+            ajaxLoad={tabLoading}
+            resultData={resultData?.list || []}
+          >
+            <Table
+              // bordered
+              className="yisa-table"
+              rowKey={(row) => row.id}
+              dataSource={resultData?.list || []}
+              columns={columns}
+              pagination={false}
+              loading={tabLoading}
+            />
+            <Pagination {...paginationProps} className="pagination-common" />
+          </ResultFlowResult>
         </div>
       </div>
       {/* 创建、编辑 */}