Browse Source

fix: 任务管理固定顶部导航及过滤组件

ZhaoJun 1 year ago
parent
commit
5b300431dd

+ 8 - 4
src/pages/TaskManage/Detail/TaskList/TaskList.tsx

@@ -332,10 +332,14 @@ const TaskList: React.FC<IPropsType> = (props) => {
 
   return (
     <PageContent closeable={false}>
-      <PageTitle returnable>
-        {MandateType.find((item) => item.value === mandateType)?.label}
-      </PageTitle>
-      <TopFilter filters={topFiltersConfig} onChange={onTopFilterChange} />
+      <div className={styles.topContainer}>
+        <div className={styles.fixedTop}>
+          <PageTitle returnable>
+            {MandateType.find((item) => item.value === mandateType)?.label}
+          </PageTitle>
+          <TopFilter filters={topFiltersConfig} onChange={onTopFilterChange} />
+        </div>
+      </div>
       <Spin spinning={loading || loadData}>
         <List
           itemLayout="horizontal"

+ 21 - 10
src/pages/TaskManage/Detail/TaskList/taskList.less

@@ -5,11 +5,11 @@
 
   .collapseLabel {
     width: 100%;
-    .ant-collapse-arrow{
+    .ant-collapse-arrow {
       font-size: 24px;
     }
     :global {
-      .ant-collapse-item{
+      .ant-collapse-item {
         margin-bottom: 0;
       }
       .ant-collapse-header {
@@ -23,7 +23,7 @@
           flex: unset;
           margin-inline-end: unset;
         }
-        .ant-collapse-arrow{
+        .ant-collapse-arrow {
           font-size: 24px;
         }
       }
@@ -54,26 +54,37 @@
   }
 }
 
-.fontS28{
+.topContainer {
+  height: 120px;
+  .fixedTop {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 10;
+    background-color: #ffffff;
+  }
+}
+
+.fontS28 {
   font-size: 28px;
 }
 
-.fontS26{
+.fontS26 {
   font-size: 26px;
 }
 
-.fontS24{
+.fontS24 {
   font-size: 24px;
 }
 
-.fontS20{
+.fontS20 {
   font-size: 20px;
 }
 
-.fontS18{
+.fontS18 {
   font-size: 18px;
 }
 
-.fontS16{
+.fontS16 {
   font-size: 16px;
-}
+}