diff --git a/src/components/ButtonComp/index.less b/src/components/ButtonComp/index.less
index 221aa55..fb26f33 100644
--- a/src/components/ButtonComp/index.less
+++ b/src/components/ButtonComp/index.less
@@ -10,7 +10,7 @@
 
 .confirm_btn {
   background: linear-gradient(180deg, #87CDEE 0%, #69C0E9 34%, #7ECDF2 51%, #56B9E6 63%, #81D7FE 100%);
-  box-shadow: 0px 1px 4px 0px rgba(189, 204, 224, 0.5);
+  box-shadow: 0px 1px 4px 0px rgba(81, 84, 90, 0.5);
   border-radius: 4px;
   border: 1px solid rgba(76, 106, 118, 0.22);
   color: #fff;
@@ -22,4 +22,12 @@
   border-radius: 4px;
   border: 1px solid rgba(171, 207, 223, 0.22);
   color: #65686E;
+}
+
+.delete_btn {
+  background: linear-gradient(180deg, #FFE5C5 0%, #FFE1B4 30%, #FCEED7 52%, #FFDC9B 73%, #F8E7C5 100%);
+  box-shadow: 0px 1px 4px 0px rgba(81, 84, 90, 0.5);
+  border-radius: 4px;
+  border: 1px solid #C2BFB8;
+  color: #65686E;
 }
\ No newline at end of file
diff --git a/src/components/ButtonComp/index.tsx b/src/components/ButtonComp/index.tsx
index 86be8b2..b8e4a0f 100644
--- a/src/components/ButtonComp/index.tsx
+++ b/src/components/ButtonComp/index.tsx
@@ -23,14 +23,9 @@ const ButtonComp: FC<PageProps> = ({
 
   return (
     <>
-      {
-        type == 'confirm' &&
-        <div className={`${styles.btn} ${styles.confirm_btn}`} onClick={click}>{text}</div>
-      }
-      {
-        type == 'cancel' &&
-        <div className={`${styles.btn} ${styles.cancel_btn}`} onClick={onClick}>{text}</div>
-      }
+      { type == 'confirm' && <div className={`${styles.btn} ${styles.confirm_btn}`} onClick={click}>{text}</div> }
+      { type == 'cancel' && <div className={`${styles.btn} ${styles.cancel_btn}`} onClick={onClick}>{text}</div> }
+      { type == 'delete' && <div className={`${styles.btn} ${styles.delete_btn}`} onClick={onClick}>{text}</div> }
     </>
   )
 }
diff --git a/src/components/TabsComp/index.less b/src/components/TabsComp/index.less
new file mode 100644
index 0000000..d97836b
--- /dev/null
+++ b/src/components/TabsComp/index.less
@@ -0,0 +1,37 @@
+.tabs {
+  width: 100%;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 14px;
+
+  .item_tab,
+  .active_tab {
+    font-size: 14px;
+    font-weight: 400;
+    margin-right: 50px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  .active_tab {
+    font-weight: 600;
+  }
+
+  .item_tab {
+    color: #333;
+    &:hover {
+      font-weight: 600;
+    }
+  }
+
+  .active_line {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: linear-gradient(180deg, #FFFFFF 0%, #3F9DC8 100%);
+    top: 21px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/TabsComp/index.tsx b/src/components/TabsComp/index.tsx
new file mode 100644
index 0000000..4c444ba
--- /dev/null
+++ b/src/components/TabsComp/index.tsx
@@ -0,0 +1,34 @@
+import { FC, useEffect, useState } from 'react';
+import styles from './index.less';
+
+interface PageProps {
+  dataSource: { id: string | number; name: string }[]; // tabs
+  activeTab: number; // 当前选中的tab
+  onChange: (id: any) => void;
+}
+
+const TabsComp: FC<PageProps> = ({ dataSource, activeTab, onChange }) => {
+  return (
+    <div className={styles.tabs}>
+      {dataSource.map((item: any, i: number) => {
+        return (
+          <div
+            key={i}
+            className={`${activeTab == item.id ? styles.active_tab : styles.item_tab}`}
+            onClick={() => {
+              if (item.id == activeTab) return;
+              onChange(item.id);
+            }}
+          >
+            <div style={{ position: 'relative' }}>
+              {item.name}
+              <div className={`${activeTab == item.id ? styles.active_line : ''}`}></div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default TabsComp
\ No newline at end of file
diff --git a/src/pages/GLQ/WebGLQ/SecurityPolicy/index.tsx b/src/pages/GLQ/WebGLQ/SecurityPolicy/index.tsx
index 6d364e2..96f4c8e 100644
--- a/src/pages/GLQ/WebGLQ/SecurityPolicy/index.tsx
+++ b/src/pages/GLQ/WebGLQ/SecurityPolicy/index.tsx
@@ -4,12 +4,12 @@ import { ConfigProvider, Form, Input, Table } from 'antd';
 import ButtonComp from '@/components/ButtonComp';
 import { useState } from 'react';
 import { tableTheme } from '@/utils/theme';
+import { rowClassName } from '@/utils';
 
 // 网络GLQ配置 --> 远程文件配置--> 安全策略
 export default function Page() {
   const [form] = Form.useForm();
   const [tableData, setTableData] = useState([]);
-  const [total, setTotal] = useState(0);
 
   const onFinish = (values: any) => {
     console.log('表单提交:', values);
@@ -25,42 +25,20 @@ export default function Page() {
         return <span>{index + 1}</span>;
       },
     }, {
-      title: '单位名称',
-      dataIndex: 'name',
-      key: 'name',
-      align: 'center',
+      title: '单位名称', dataIndex: 'name',  key: 'name', align: 'center',
     }, {
-      title: '设备名称',
-      dataIndex: 'age',
-      key: 'age',
-      align: 'center',
+      title: '设备名称', dataIndex: 'name',  key: 'name', align: 'center',
     }, {
-      title: '设备IP',
-      dataIndex: 'age',
-      key: 'age',
-      align: 'center',
+      title: '设备IP', dataIndex: 'name',  key: 'name', align: 'center',
     }, {
-      title: '电话号码',
-      dataIndex: 'name',
-      key: 'name',
-      align: 'center',
+      title: '电话号码', dataIndex: 'name',  key: 'name', align: 'center',
     }, {
-      title: '设备属性',
-      dataIndex: 'age',
-      key: 'age',
-      align: 'center',
+      title: '设备属性', dataIndex: 'name',  key: 'name', align: 'center',
     }, {
-      title: '设备型号',
-      dataIndex: 'age',
-      key: 'age',
-      align: 'center',
+      title: '设备型号', dataIndex: 'name',  key: 'name', align: 'center',
     },
   ]
 
-  const rowClassName = (record:any, index: any) => {
-    return index % 2 === 0 ? 'even-row' : 'odd-row';
-  };
-
   return (
     <div className={styles.params_warp}>
       <ContentWarp text={'安全策略配置'}>
diff --git a/src/pages/GLQ/WebGLQ/ServiceList/index.tsx b/src/pages/GLQ/WebGLQ/ServiceList/index.tsx
index cf53a51..9654025 100644
--- a/src/pages/GLQ/WebGLQ/ServiceList/index.tsx
+++ b/src/pages/GLQ/WebGLQ/ServiceList/index.tsx
@@ -5,12 +5,12 @@ import { ConfigProvider, Form, Input, Table } from 'antd';
 import ButtonComp from '@/components/ButtonComp';
 import { useState } from 'react';
 import { tableTheme } from '@/utils/theme';
+import { rowClassName } from '@/utils';
 
 // 网络GLQ配置 --> 远程文件配置--> 服务列表
 export default function Page() {
   const [form] = Form.useForm();
   const [tableData, setTableData] = useState([]);
-  const [total, setTotal] = useState(0);
 
   const onFinish = (values: any) => {
     console.log('表单提交:', values);
@@ -26,27 +26,14 @@ export default function Page() {
         return <span>{index + 1}</span>;
       },
     }, {
-      title: '服务名称',
-      dataIndex: 'name',
-      key: 'name',
-      align: 'center',
+      title: '服务名称', dataIndex: 'name',  key: 'name', align: 'center',
     }, {
-      title: '服务器IP',
-      dataIndex: 'age',
-      key: 'age',
-      align: 'center',
+      title: '服务器IP', dataIndex: 'name',  key: 'name', align: 'center',
     }, {
-      title: '服务端口',
-      dataIndex: 'age',
-      key: 'age',
-      align: 'center',
+      title: '服务端口', dataIndex: 'name',  key: 'name', align: 'center',
     },
   ]
 
-  const rowClassName = (record:any, index: any) => {
-    return index % 2 === 0 ? 'even-row' : 'odd-row';
-  };
-
   return (
     <div className={styles.params_warp}>
       <ContentWarp text={'服务列表配置'}>
diff --git a/src/pages/MY/KeyBodyManage/Application/index.less b/src/pages/MY/KeyBodyManage/Application/index.less
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/MY/KeyBodyManage/Application/index.tsx b/src/pages/MY/KeyBodyManage/Application/index.tsx
index 1f24c5c..3ac8077 100644
--- a/src/pages/MY/KeyBodyManage/Application/index.tsx
+++ b/src/pages/MY/KeyBodyManage/Application/index.tsx
@@ -1,9 +1,97 @@
-import styles from './index.less';
+import TabsComp from '@/components/TabsComp';
+import styles from '../../../GLQ/index.less';
+import { useState } from 'react';
+import { ConfigProvider, Form, Radio, Select, Table } from 'antd';
+import { tableTheme } from '@/utils/theme';
+import { rowClassName } from '@/utils';
+import ButtonComp from '@/components/ButtonComp';
 
 export default function Page() {
+  const [activeTab, setActiveTab] = useState(1)
+  const [tableData, setTableData] = useState([]);
+
+  const [form] = Form.useForm();
+
+  const columns: any = [
+    {
+      title: '序号',
+      key: 'index',
+      align: 'center',
+      width: 100,
+      render: (text: any, record: any, index: any) => {
+        return <span>{index + 1}</span>;
+      },
+    }, {
+      title: '申请类型', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '产品名称', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '产品编号', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '申请数量', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '申请时间', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '申请结果', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体型号', dataIndex: 'name',  key: 'name', align: 'center',
+    }
+  ]
+
+  const formItemSty = { width: '32%',  marginBottom: 20 };
+
+  const onFinish = (values: any) => {
+    console.log('表单提交:', values);
+  };
+
   return (
-    <div>
-      
+    <div className={`${styles.params_warp}`}>
+      <TabsComp
+        dataSource={[{ id: 1, name: '密钥体申请' }]}
+        activeTab={activeTab}
+        onChange={(e) => setActiveTab(e)} />
+
+      <Form form={form} layout={'inline'} onFinish={onFinish} className='mt20'>
+        <Form.Item name="33" label="" style={{ width: '100%', marginBottom: 20}}>
+          <Radio.Group>
+            <Radio value="1"> 申请新密钥体 </Radio>
+            <Radio value="2"> 申请旧密钥体 </Radio>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item name="aaa" label="密钥种类" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="产品名称" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="产品编号" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="申请类型" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="申请数量" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+      </Form>
+
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 30 }}>
+        <ButtonComp text={'申请密钥体'} onClick={() => form.submit()} />
+      </div>
+
+      <div className='mb20'>申请情况列表</div>
+
+      <ConfigProvider theme={tableTheme}>
+        <Table
+          scroll={{ y: 41 * 9 }}
+          pagination={false}
+          bordered
+          columns={columns}
+          dataSource={[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]}
+          rowKey={(record: any) => record?.id}
+          rowClassName={rowClassName}
+        />
+      </ConfigProvider>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/MY/KeyBodyManage/Cleaned/index.less b/src/pages/MY/KeyBodyManage/Cleaned/index.less
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/MY/KeyBodyManage/Cleaned/index.tsx b/src/pages/MY/KeyBodyManage/Cleaned/index.tsx
index 1f24c5c..fc4361a 100644
--- a/src/pages/MY/KeyBodyManage/Cleaned/index.tsx
+++ b/src/pages/MY/KeyBodyManage/Cleaned/index.tsx
@@ -1,9 +1,67 @@
-import styles from './index.less';
+import TabsComp from '@/components/TabsComp';
+import styles from '../../../GLQ/index.less';
+import { useState } from 'react';
+import { ConfigProvider, Table } from 'antd';
+import { tableTheme } from '@/utils/theme';
+import { rowClassName } from '@/utils';
+import ButtonComp from '@/components/ButtonComp';
 
 export default function Page() {
+  const [activeTab, setActiveTab] = useState(1)
+  const [tableData, setTableData] = useState([]);
+
+  const columns: any = [
+    {
+      title: '序号',
+      key: 'index',
+      align: 'center',
+      width: 100,
+      render: (text: any, record: any, index: any) => {
+        return <span>{index + 1}</span>;
+      },
+    }, {
+      title: '产品名称', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '产品编号', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体类型', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体型号', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '数量', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '来源', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '当前时间', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '当前状态', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '导入时间', dataIndex: 'name',  key: 'name', align: 'center',
+    }
+  ]
+
   return (
-    <div>
-      
+    <div className={`${styles.params_warp}`}>
+      <TabsComp
+        dataSource={[{ id: 1, name: '已清理密钥体列表' }]}
+        activeTab={activeTab}
+        onChange={(e) => setActiveTab(e)} />
+
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 20 }}>
+        <ButtonComp type={'cancel'} text={'刷新'} onClick={() => { }} />
+      </div>
+
+      <ConfigProvider theme={tableTheme}>
+        <Table
+          scroll={{ y: 41 * 13 }}
+          pagination={false}
+          bordered
+          columns={columns}
+          dataSource={[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]}
+          rowKey={(record: any) => record?.id}
+          rowClassName={rowClassName}
+        />
+      </ConfigProvider>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/MY/KeyBodyManage/CodeComparisonTable/index.less b/src/pages/MY/KeyBodyManage/CodeComparisonTable/index.less
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/MY/KeyBodyManage/CodeComparisonTable/index.tsx b/src/pages/MY/KeyBodyManage/CodeComparisonTable/index.tsx
index 1f24c5c..9b73008 100644
--- a/src/pages/MY/KeyBodyManage/CodeComparisonTable/index.tsx
+++ b/src/pages/MY/KeyBodyManage/CodeComparisonTable/index.tsx
@@ -1,9 +1,41 @@
-import styles from './index.less';
+import TabsComp from '@/components/TabsComp';
+import styles from '../../../GLQ/index.less';
+import { useState } from 'react';
+import { ConfigProvider, Table } from 'antd';
+import { tableTheme } from '@/utils/theme';
+import { rowClassName } from '@/utils';
+import ButtonComp from '@/components/ButtonComp';
 
 export default function Page() {
+  const [activeTab, setActiveTab] = useState(1)
+  const [tableData, setTableData] = useState([]);
+
+  const columns: any = [
+    {
+      title: '密钥体大代号', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '密钥体子代号', dataIndex: 'name',  key: 'name', align: 'center',
+    }
+  ]
+
   return (
-    <div>
-      
+    <div className={`${styles.params_warp}`}>
+      <TabsComp
+        dataSource={[{ id: 1, name: '密钥体代号对照表' }]}
+        activeTab={activeTab}
+        onChange={(e) => setActiveTab(e)} />
+
+      <ConfigProvider theme={tableTheme}>
+        <Table
+          scroll={{ y: 41 * 13 }}
+          pagination={false}
+          bordered
+          columns={columns}
+          dataSource={tableData}
+          rowKey={(record: any) => record?.id}
+          rowClassName={rowClassName}
+        />
+      </ConfigProvider>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/MY/KeyBodyManage/DistrTriple/index.less b/src/pages/MY/KeyBodyManage/DistrTriple/index.less
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/MY/KeyBodyManage/EmailDistr/index.less b/src/pages/MY/KeyBodyManage/EmailDistr/index.less
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/MY/KeyBodyManage/EmailDistr/index.tsx b/src/pages/MY/KeyBodyManage/EmailDistr/index.tsx
index 1f24c5c..5b04efe 100644
--- a/src/pages/MY/KeyBodyManage/EmailDistr/index.tsx
+++ b/src/pages/MY/KeyBodyManage/EmailDistr/index.tsx
@@ -1,9 +1,107 @@
-import styles from './index.less';
+import TabsComp from '@/components/TabsComp';
+import styles from '../../../GLQ/index.less';
+import { useState } from 'react';
+import { ConfigProvider, DatePicker, Form, Input, Select, Table } from 'antd';
+import { tableTheme } from '@/utils/theme';
+import { rowClassName } from '@/utils';
+import ButtonComp from '@/components/ButtonComp';
 
 export default function Page() {
+  const [activeTab, setActiveTab] = useState(1)
+  const [tableData, setTableData] = useState([]);
+
+  const [form] = Form.useForm();
+
+  const columns: any = [
+    {
+      title: '序号',
+      key: 'index',
+      align: 'center',
+      width: 100,
+      render: (text: any, record: any, index: any) => {
+        return <span>{index + 1}</span>;
+      },
+    }, {
+      title: '产品名称', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '产品编号', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体类型', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体型号', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '数量', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '来源', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '当前状态', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '导入时间', dataIndex: 'name',  key: 'name', align: 'center',
+    }
+  ]
+
+  const formItemSty = { width: '32%',  marginBottom: 20 };
+
+  const onFinish = (values: any) => {
+    console.log('表单提交:', values);
+  };
+
   return (
-    <div>
-      
+    <div className={`${styles.params_warp}`}>
+      <TabsComp
+        dataSource={[{ id: 1, name: '密钥体导入' }]}
+        activeTab={activeTab}
+        onChange={(e) => setActiveTab(e)} />
+
+      <Form form={form} layout={'inline'} onFinish={onFinish} className='mt20'>
+        <Form.Item name="aaa" label="产品名称" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="载体类型" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="可下载数量" style={formItemSty}>
+          <Input style={{width: 260}} />
+        </Form.Item>
+        <Form.Item name="aaa" label="产品编号" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="载体型号" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="&nbsp;&nbsp;&nbsp;&nbsp;下载授权" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="目的系统" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="配发数量" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;优先级" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="结束时间" style={formItemSty}>
+          <DatePicker style={{width: 260}} />
+        </Form.Item>
+      </Form>
+
+      <div className='mb20' style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>密钥体邮箱任务列表</div>
+        <ButtonComp type={'cancel'} text={'配发'} onClick={() => { }} />
+      </div>
+
+      <ConfigProvider theme={tableTheme}>
+        <Table
+          scroll={{ y: 41 * 9 }}
+          pagination={false}
+          bordered
+          columns={columns}
+          dataSource={[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]}
+          rowKey={(record: any) => record?.id}
+          rowClassName={rowClassName}
+        />
+      </ConfigProvider>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/MY/KeyBodyManage/FormatImport/index.less b/src/pages/MY/KeyBodyManage/FormatImport/index.less
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/MY/KeyBodyManage/FormatImport/index.tsx b/src/pages/MY/KeyBodyManage/FormatImport/index.tsx
index 1f24c5c..d1e4825 100644
--- a/src/pages/MY/KeyBodyManage/FormatImport/index.tsx
+++ b/src/pages/MY/KeyBodyManage/FormatImport/index.tsx
@@ -1,9 +1,62 @@
-import styles from './index.less';
+import TabsComp from '@/components/TabsComp';
+import styles from '../../../GLQ/index.less';
+import { useState } from 'react';
+import { ConfigProvider, Table } from 'antd';
+import { tableTheme } from '@/utils/theme';
+import { rowClassName } from '@/utils';
+import ButtonComp from '@/components/ButtonComp';
 
 export default function Page() {
+  const [activeTab, setActiveTab] = useState(1)
+  const [tableData, setTableData] = useState([]);
+
+  const columns: any = [
+    {
+      title: '序号',
+      key: 'index',
+      align: 'center',
+      width: 100,
+      render: (text: any, record: any, index: any) => {
+        return <span>{index + 1}</span>;
+      },
+    }, {
+      title: '产品名称', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体类型', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体型号', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '管理文件名', dataIndex: 'name',  key: 'name', align: 'center',
+    }
+  ]
+
   return (
-    <div>
-      
+    <div className={`${styles.params_warp}`}>
+      <TabsComp
+        dataSource={[{ id: 1, name: '密钥体格式导入和删除' }]}
+        activeTab={activeTab}
+        onChange={(e) => setActiveTab(e)} />
+
+      <div className='mb20' style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>密钥体格式列表</div>
+        <div style={{display: 'flex'}}>
+          <ButtonComp type={'cancel'} text={'密钥体格式导入'} onClick={() => { }} />
+          <div className='mr20'></div>
+          <ButtonComp type={'delete'} text={'删除'} onClick={() => { }} />
+        </div>
+      </div>
+
+      <ConfigProvider theme={tableTheme}>
+        <Table
+          scroll={{ y: 41 * 9 }}
+          pagination={false}
+          bordered
+          columns={columns}
+          dataSource={[{}, {}, {}, {}, {},{}, {}, {}, {}, {}]}
+          rowKey={(record: any) => record?.id}
+          rowClassName={rowClassName}
+        />
+      </ConfigProvider>
     </div>
   );
 }
diff --git a/src/pages/MY/KeyBodyManage/FormatPublishing/index.less b/src/pages/MY/KeyBodyManage/FormatPublishing/index.less
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/MY/KeyBodyManage/FormatPublishing/index.tsx b/src/pages/MY/KeyBodyManage/FormatPublishing/index.tsx
index 1f24c5c..24c1faa 100644
--- a/src/pages/MY/KeyBodyManage/FormatPublishing/index.tsx
+++ b/src/pages/MY/KeyBodyManage/FormatPublishing/index.tsx
@@ -1,9 +1,96 @@
-import styles from './index.less';
+import TabsComp from '@/components/TabsComp';
+import styles from '../../../GLQ/index.less';
+import { useState } from 'react';
+import { ConfigProvider, Form, Select, Table } from 'antd';
+import { tableTheme } from '@/utils/theme';
+import { rowClassName } from '@/utils';
+import ButtonComp from '@/components/ButtonComp';
 
 export default function Page() {
+  const [activeTab, setActiveTab] = useState(1)
+  const [tableData, setTableData] = useState([]);
+
+  const [form] = Form.useForm();
+
+  const columns: any = [
+    {
+      title: '序号',
+      key: 'index',
+      align: 'center',
+      width: 100,
+      render: (text: any, record: any, index: any) => {
+        return <span>{index + 1}</span>;
+      },
+    }, {
+      title: '管理系统名称', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '管理系统实体标识', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '产品名称', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '发布状态', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '当前状态', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体类型', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体型号', dataIndex: 'name',  key: 'name', align: 'center',
+    }
+  ]
+
+  const formItemSty = { width: '32%',  marginBottom: 20 };
+
+  const onFinish = (values: any) => {
+    console.log('表单提交:', values);
+  };
+
   return (
-    <div>
-      
+    <div className={`${styles.params_warp}`}>
+      <TabsComp
+        dataSource={[{ id: 1, name: '密钥体格式发布' }]}
+        activeTab={activeTab}
+        onChange={(e) => setActiveTab(e)} />
+
+      <Form form={form} layout={'inline'} onFinish={onFinish} className='mt20'>
+        <Form.Item name="aaa" label="产品名称" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="载体类型" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="载体型号" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="发布方式" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="目的系统" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+      </Form>
+
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 30 }}>
+        <ButtonComp type={'cancel'} text={'发布'} onClick={() => { }} />
+        <div className='mr20'></div>
+        <ButtonComp text={'查询'} onClick={() => form.submit()} />
+      </div>
+
+      <div className='mb20' style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>发布情况列表</div>
+        <ButtonComp type={'cancel'} text={'全部'} onClick={() => { }} />
+      </div>
+
+      <ConfigProvider theme={tableTheme}>
+        <Table
+          scroll={{ y: 41 * 9 }}
+          pagination={false}
+          bordered
+          columns={columns}
+          dataSource={[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]}
+          rowKey={(record: any) => record?.id}
+          rowClassName={rowClassName}
+        />
+      </ConfigProvider>
     </div>
   );
 }
diff --git a/src/pages/MY/KeyBodyManage/Import/index.less b/src/pages/MY/KeyBodyManage/Import/index.less
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/MY/KeyBodyManage/Import/index.tsx b/src/pages/MY/KeyBodyManage/Import/index.tsx
index 1f24c5c..92e5bee 100644
--- a/src/pages/MY/KeyBodyManage/Import/index.tsx
+++ b/src/pages/MY/KeyBodyManage/Import/index.tsx
@@ -1,9 +1,98 @@
-import styles from './index.less';
+import TabsComp from '@/components/TabsComp';
+import styles from '../../../GLQ/index.less';
+import { useState } from 'react';
+import { ConfigProvider, Form, Select, Table } from 'antd';
+import { tableTheme } from '@/utils/theme';
+import { rowClassName } from '@/utils';
+import ButtonComp from '@/components/ButtonComp';
 
 export default function Page() {
+  const [activeTab, setActiveTab] = useState(1)
+  const [tableData, setTableData] = useState([]);
+
+  const [form] = Form.useForm();
+
+  const columns: any = [
+    {
+      title: '序号',
+      key: 'index',
+      align: 'center',
+      width: 100,
+      render: (text: any, record: any, index: any) => {
+        return <span>{index + 1}</span>;
+      },
+    }, {
+      title: '产品名称', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '产品编号', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体类型', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体型号', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '数量', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '来源', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '当前状态', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '导入时间', dataIndex: 'name',  key: 'name', align: 'center',
+    }
+  ]
+
+  const formItemSty = { width: '32%',  marginBottom: 20 };
+
+  const onFinish = (values: any) => {
+    console.log('表单提交:', values);
+  };
+
   return (
-    <div>
-      
+    <div className={`${styles.params_warp}`}>
+      <TabsComp
+        dataSource={[{ id: 1, name: '密钥体导入' }]}
+        activeTab={activeTab}
+        onChange={(e) => setActiveTab(e)} />
+
+      <Form form={form} layout={'inline'} onFinish={onFinish} className='mt20'>
+        <Form.Item name="aaa" label="密钥种类" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="产品名称" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="载体类型" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="载体型号" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="产品名称" style={formItemSty}>
+          <Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+      </Form>
+
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 30 }}>
+        <ButtonComp type={'cancel'} text={'导入'} onClick={() => { }} />
+        <div className='mr20'></div>
+        <ButtonComp text={'查询'} onClick={() => form.submit()} />
+      </div>
+
+      <div className='mb20' style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>密钥体列表</div>
+        <ButtonComp type={'cancel'} text={'全部'} onClick={() => { }} />
+      </div>
+
+      <ConfigProvider theme={tableTheme}>
+        <Table
+          scroll={{ y: 41 * 9 }}
+          pagination={false}
+          bordered
+          columns={columns}
+          dataSource={[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]}
+          rowKey={(record: any) => record?.id}
+          rowClassName={rowClassName}
+        />
+      </ConfigProvider>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/MY/KeyBodyManage/ReceiptForm/index.less b/src/pages/MY/KeyBodyManage/ReceiptForm/index.less
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/MY/KeyBodyManage/ReceiptForm/index.tsx b/src/pages/MY/KeyBodyManage/ReceiptForm/index.tsx
index 1f24c5c..b8b3a02 100644
--- a/src/pages/MY/KeyBodyManage/ReceiptForm/index.tsx
+++ b/src/pages/MY/KeyBodyManage/ReceiptForm/index.tsx
@@ -1,9 +1,135 @@
-import styles from './index.less';
+import TabsComp from '@/components/TabsComp';
+import styles from '../../../GLQ/index.less';
+import { useState } from 'react';
+import { ConfigProvider, Form, Radio, Select, Table } from 'antd';
+import { tableTheme } from '@/utils/theme';
+import { rowClassName } from '@/utils';
+import ButtonComp from '@/components/ButtonComp';
 
 export default function Page() {
+  const [activeTab, setActiveTab] = useState(1)
+  const [tableData, setTableData] = useState([]);
+
+  const columns: any = [
+    {
+      title: '产品名称', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '产品编号', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '来源', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '操作员', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '导入时间', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '是否制作接', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '发来单位', dataIndex: 'name',  key: 'name', align: 'center',
+    }
+  ]
+
+  const columns1: any = [
+    {
+      title: '密码种类', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '套数', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '编号', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体种类', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体数量', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体编号', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '操作员', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '导入时间', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '备注', dataIndex: 'name',  key: 'name', align: 'center',
+    }
+  ]
+
+  const [form] = Form.useForm();
+  const formItemSty = { width: '32%',  marginBottom: 20 };
+
+  const onFinish = (values: any) => {
+    console.log('表单提交:', values);
+  };
+
   return (
-    <div>
-      
+    <div className={`${styles.params_warp}`}>
+      <TabsComp
+        dataSource={[{ id: 1, name: '密钥体接收情况单' }]}
+        activeTab={activeTab}
+        onChange={(e) => setActiveTab(e)} />
+
+      <div className='mb20' style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <Radio.Group>
+          <Radio value="1" style={{ marginRight: 100 }}> 申请新密钥体 </Radio>
+          <Radio value="2"> 申请旧密钥体 </Radio>
+        </Radio.Group>
+        <div>单号：xxxxxxx</div>
+      </div>
+
+      <ConfigProvider theme={tableTheme}>
+        <Table
+          scroll={{ y: 41 * 9 }}
+          pagination={false}
+          bordered
+          columns={columns}
+          dataSource={tableData}
+          rowKey={(record: any) => record?.id}
+          rowClassName={rowClassName}
+        />
+      </ConfigProvider>
+
+      <div style={{ display: 'flex', justifyContent: 'flex-end', margin: '20px 0' }}>
+        <ButtonComp text={'添加'} onClick={() => { }} />
+      </div>
+
+      <div className='mb20' style={{ height: 1, background: '#EDEDED' }}></div>
+
+      <Form form={form} layout={'inline'} onFinish={onFinish} className='mt20' style={{position: 'relative'}}>
+        <Form.Item name="aaa" label="密钥种类" style={formItemSty}>
+          <Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="产品名称" style={formItemSty}>
+          <Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="产品编号" style={formItemSty}>
+          <Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="申请类型" style={formItemSty}>
+          <Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+
+        <div style={{position: 'absolute', right: 0, bottom: '20px'}}>
+          <ButtonComp text={'查询'} onClick={() => { }} />
+        </div>
+      </Form>
+
+      <ConfigProvider theme={tableTheme}>
+        <Table
+          scroll={{ y: 41 * 9 }}
+          pagination={false}
+          bordered
+          columns={columns1}
+          dataSource={tableData}
+          rowKey={(record: any) => record?.id}
+          rowClassName={rowClassName}
+        />
+      </ConfigProvider>
+
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20}}>
+        <ButtonComp type={'cancel'} text={'移出'} onClick={() => form.submit()} />
+        <div className='mr20'></div>
+        <ButtonComp type={'cancel'} text={'制作'} onClick={() => form.submit()} />
+        <div className='mr20'></div>
+        <ButtonComp type={'cancel'} text={'预览'} onClick={() => form.submit()} />
+        <div className='mr20'></div>
+        <ButtonComp type={'cancel'} text={'打印'} onClick={() => form.submit()} />
+      </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/MY/KeyBodyManage/SubordinateDistr/index.less b/src/pages/MY/KeyBodyManage/SubordinateDistr/index.less
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/MY/KeyBodyManage/SubordinateDistr/index.tsx b/src/pages/MY/KeyBodyManage/SubordinateDistr/index.tsx
index 1f24c5c..f6c76b0 100644
--- a/src/pages/MY/KeyBodyManage/SubordinateDistr/index.tsx
+++ b/src/pages/MY/KeyBodyManage/SubordinateDistr/index.tsx
@@ -1,9 +1,108 @@
-import styles from './index.less';
+import TabsComp from '@/components/TabsComp';
+import styles from '../../../GLQ/index.less';
+import { useState } from 'react';
+import { ConfigProvider, Form, Input, Select, Table } from 'antd';
+import { tableTheme } from '@/utils/theme';
+import { rowClassName } from '@/utils';
+import ButtonComp from '@/components/ButtonComp';
 
 export default function Page() {
+  const [activeTab, setActiveTab] = useState(1)
+  const [tableData, setTableData] = useState([]);
+
+  const [form] = Form.useForm();
+
+  const columns: any = [
+    {
+      title: '配发类型', dataIndex: 'name',  key: 'name', align: 'center',
+    },{
+      title: '产品名称', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '产品编号', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体类型', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '载体型号', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '配发管理系统名称', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '配发管理系统实体标识', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '配发数量', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '配发状态', dataIndex: 'name',  key: 'name', align: 'center',
+    },    {
+      title: '删除标志', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '配发操作时间', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '申请管理系统名称', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '申请管理系统实体标识', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '申请数量', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '申请时间', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '配发编号', dataIndex: 'name',  key: 'name', align: 'center',
+    }, {
+      title: '申请编号', dataIndex: 'name',  key: 'name', align: 'center',
+    }
+  ]
+
+  const formItemSty = { width: '23%',  marginBottom: 20 };
+
+  const onFinish = (values: any) => {
+    console.log('表单提交:', values);
+  };
+
   return (
-    <div>
-      
+    <div className={`${styles.params_warp}`}>
+      <TabsComp
+        dataSource={[{ id: 1, name: '密钥体导入' }]}
+        activeTab={activeTab}
+        onChange={(e) => setActiveTab(e)} />
+
+      <Form form={form} layout={'inline'} onFinish={onFinish} className='mt20'>
+        <Form.Item name="aaa" label="产品名称" style={formItemSty}>
+          <Select style={{width: 180}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="产品编号" style={formItemSty}>
+          <Select style={{width: 180}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="载体类型" style={formItemSty}>
+          <Select style={{width: 180}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="载体型号" style={formItemSty}>
+          <Select style={{width: 180}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="目的系统" style={formItemSty}>
+          <Select style={{width: 180}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+        </Form.Item>
+        <Form.Item name="aaa" label="配发数量" style={formItemSty}>
+          <Input style={{width: 180}} />
+        </Form.Item>
+        <Form.Item name="aaa" label="申请编号" style={formItemSty}>
+          <Input style={{width: 180}} />
+        </Form.Item>
+      </Form>
+
+      <div className='mb20' style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>配发情况列表</div>
+        <ButtonComp type={'cancel'} text={'配发'} onClick={() => { }} />
+      </div>
+
+      <ConfigProvider theme={tableTheme}>
+        <Table
+          scroll={{ x: 800, y: 41 * 11}}
+          pagination={false}
+          bordered
+          columns={columns}
+          dataSource={[]}
+          rowKey={(record: any) => record?.id}
+          rowClassName={rowClassName}
+        />
+      </ConfigProvider>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/styles/antd.less b/src/styles/antd.less
index f5ed534..f5194af 100644
--- a/src/styles/antd.less
+++ b/src/styles/antd.less
@@ -11,4 +11,8 @@
 .ant-table-thead >tr>th,
 .ant-table-content >table >tbody>tr>td {
   border-color: #D8D8D8 !important;
+}
+
+.ant-table {
+  box-shadow: 1px 4px 0px 0px #E3E8ED;
 }
\ No newline at end of file
diff --git a/src/styles/minix.less b/src/styles/minix.less
index 592bc45..ea2af0f 100644
--- a/src/styles/minix.less
+++ b/src/styles/minix.less
@@ -22,6 +22,10 @@
   margin-bottom: 20px;
 }
 
+.mb10 {
+  margin-bottom: 10px;
+}
+
 .line {
   width: 100%;
   height: 1px;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index e69de29..0ca67a4 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -0,0 +1,3 @@
+export const  rowClassName = (record:any, index: any) => {
+  return index % 2 === 0 ? 'even-row' : 'odd-row';
+};
\ No newline at end of file