diff --git a/src/compenents/back-bar/index.module.less b/src/compenents/back-bar/index.module.less
new file mode 100644
index 0000000..a114e55
--- /dev/null
+++ b/src/compenents/back-bar/index.module.less
@@ -0,0 +1,20 @@
+.back-bar-box {
+  width: 100%;
+  height: auto;
+  float: left;
+  display: flex;
+  align-items: center;
+
+  .line {
+    width: 1px;
+    height: 14px;
+    background-color: #d8d8d8;
+    margin-right: 15px;
+  }
+
+  .name {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333333;
+  }
+}
diff --git a/src/compenents/back-bar/index.tsx b/src/compenents/back-bar/index.tsx
new file mode 100644
index 0000000..1ae53fd
--- /dev/null
+++ b/src/compenents/back-bar/index.tsx
@@ -0,0 +1,29 @@
+import { Button } from "antd";
+import { useState } from "react";
+import styles from "./index.module.less";
+import { useNavigate } from "react-router-dom";
+import { LeftOutlined } from "@ant-design/icons";
+
+interface PropInterface {
+  title: string;
+}
+
+export const BackBartment = (props: PropInterface) => {
+  const [loading, setLoading] = useState<boolean>(true);
+  const navigate = useNavigate();
+  return (
+    <div className={styles["back-bar-box"]}>
+      <Button
+      style={{paddingLeft:0}}
+        icon={<LeftOutlined />}
+        type="link"
+        danger
+        onClick={() => navigate(-1)}
+      >
+        返回
+      </Button>
+      <div className={styles["line"]}></div>
+      <div className={styles["name"]}>{props.title}</div>
+    </div>
+  );
+};
diff --git a/src/compenents/index.ts b/src/compenents/index.ts
index 08add1d..14b2134 100644
--- a/src/compenents/index.ts
+++ b/src/compenents/index.ts
@@ -2,4 +2,5 @@ export * from "./footer";
 export * from "./header";
 export * from "./leftMenu";
 export * from "./upload-image-button";
-export * from ".//treeDepartment";
\ No newline at end of file
+export * from "./treeDepartment";
+export * from "./back-bar";
\ No newline at end of file
diff --git a/src/pages/member/create.tsx b/src/pages/member/create.tsx
index 437ffcb..11a836b 100644
--- a/src/pages/member/create.tsx
+++ b/src/pages/member/create.tsx
@@ -3,7 +3,7 @@ import { Row, Col, Form, Input, Cascader, Button, message } from "antd";
 import styles from "./create.module.less";
 import { user, department } from "../../api/index";
 import { useNavigate } from "react-router-dom";
-import { UploadImageButton } from "../../compenents";
+import { UploadImageButton, BackBartment } from "../../compenents";
 
 interface Option {
   value: string | number;
@@ -80,90 +80,95 @@ export const MemberCreatePage: React.FC = () => {
     <>
       <Row className="playedu-main-body">
         <Col>
-          <Form
-            form={form}
-            name="basic"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            style={{ width: 600 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="学员姓名"
-              name="name"
-              rules={[{ required: true, message: "请输入学员姓名!" }]}
+          <div className="float-left mb-24">
+            <BackBartment title="添加学员" />
+          </div>
+          <div className="float-left">
+            <Form
+              form={form}
+              name="basic"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              style={{ width: 600 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Input placeholder="请输入学员姓名" />
-            </Form.Item>
-            <Form.Item
-              label="学员头像"
-              name="avatar"
-              rules={[{ required: true, message: "请上传学员头像!" }]}
-            >
-              <div className="c-flex">
-                <div className="d-flex">
-                  <UploadImageButton
-                    onSelected={(url) => {
-                      setAvatar(url);
-                      form.setFieldsValue({ avatar: url });
-                    }}
-                  ></UploadImageButton>
-                </div>
-                {avatar && (
-                  <img className="form-avatar mt-10" src={avatar} alt="" />
-                )}
-              </div>
-            </Form.Item>
-            <Form.Item
-              label="登录密码"
-              name="password"
-              rules={[{ required: true, message: "请输入登录密码!" }]}
-            >
-              <Input.Password placeholder="请输入登录密码" />
-            </Form.Item>
-            <Form.Item
-              label="学员邮箱"
-              name="email"
-              rules={[{ required: true, message: "请输入学员邮箱!" }]}
-            >
-              <Input placeholder="请输入学员邮箱" />
-            </Form.Item>
-            <Form.Item
-              label="身份证号"
-              name="idCard"
-              rules={[{ required: true, message: "请输入身份证号!" }]}
-            >
-              <Input placeholder="请输入身份证号" />
-            </Form.Item>
-            <Form.Item
-              label="学员部门"
-              name="dep_ids"
-              rules={[{ required: true, message: "请选择学员部门!" }]}
-            >
-              <Cascader
-                options={departments}
-                onChange={onChange}
-                multiple
-                maxTagCount="responsive"
-                placeholder="请选择学员部门"
-              />
-            </Form.Item>
-            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-              <Button type="primary" htmlType="submit">
-                保存
-              </Button>
-              <Button
-                className="ml-15"
-                htmlType="button"
-                onClick={() => navigate(-1)}
+              <Form.Item
+                label="学员姓名"
+                name="name"
+                rules={[{ required: true, message: "请输入学员姓名!" }]}
               >
-                取消
-              </Button>
-            </Form.Item>
-          </Form>
+                <Input placeholder="请输入学员姓名" />
+              </Form.Item>
+              <Form.Item
+                label="学员头像"
+                name="avatar"
+                rules={[{ required: true, message: "请上传学员头像!" }]}
+              >
+                <div className="c-flex">
+                  <div className="d-flex">
+                    <UploadImageButton
+                      onSelected={(url) => {
+                        setAvatar(url);
+                        form.setFieldsValue({ avatar: url });
+                      }}
+                    ></UploadImageButton>
+                  </div>
+                  {avatar && (
+                    <img className="form-avatar mt-10" src={avatar} alt="" />
+                  )}
+                </div>
+              </Form.Item>
+              <Form.Item
+                label="登录密码"
+                name="password"
+                rules={[{ required: true, message: "请输入登录密码!" }]}
+              >
+                <Input.Password placeholder="请输入登录密码" />
+              </Form.Item>
+              <Form.Item
+                label="学员邮箱"
+                name="email"
+                rules={[{ required: true, message: "请输入学员邮箱!" }]}
+              >
+                <Input placeholder="请输入学员邮箱" />
+              </Form.Item>
+              <Form.Item
+                label="身份证号"
+                name="idCard"
+                rules={[{ required: true, message: "请输入身份证号!" }]}
+              >
+                <Input placeholder="请输入身份证号" />
+              </Form.Item>
+              <Form.Item
+                label="学员部门"
+                name="dep_ids"
+                rules={[{ required: true, message: "请选择学员部门!" }]}
+              >
+                <Cascader
+                  options={departments}
+                  onChange={onChange}
+                  multiple
+                  maxTagCount="responsive"
+                  placeholder="请选择学员部门"
+                />
+              </Form.Item>
+              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+                <Button type="primary" htmlType="submit">
+                  保存
+                </Button>
+                <Button
+                  className="ml-15"
+                  htmlType="button"
+                  onClick={() => navigate(-1)}
+                >
+                  取消
+                </Button>
+              </Form.Item>
+            </Form>
+          </div>
         </Col>
       </Row>
     </>
diff --git a/src/pages/member/update.tsx b/src/pages/member/update.tsx
index 30f0f6f..4f2e0a8 100644
--- a/src/pages/member/update.tsx
+++ b/src/pages/member/update.tsx
@@ -3,7 +3,7 @@ import { Row, Col, Form, Input, Cascader, Button, message } from "antd";
 import styles from "./update.module.less";
 import { user, department } from "../../api/index";
 import { useParams, useNavigate } from "react-router-dom";
-import { UploadImageButton } from "../../compenents";
+import { UploadImageButton, BackBartment } from "../../compenents";
 
 interface Option {
   value: string | number;
@@ -102,97 +102,102 @@ export const MemberUpdatePage: React.FC = () => {
     <>
       <Row className="playedu-main-body">
         <Col>
-          <Form
-            form={form}
-            name="basic"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            style={{ width: 600 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="学员姓名"
-              name="name"
-              rules={[{ required: true, message: "请输入学员姓名!" }]}
+          <div className="float-left mb-24">
+            <BackBartment title="编辑学员" />
+          </div>
+          <div className="float-left">
+            <Form
+              form={form}
+              name="basic"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              style={{ width: 600 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Input placeholder="请输入学员姓名" />
-            </Form.Item>
-            <Form.Item
-              label="学员昵称"
-              name="nickname"
-              rules={[{ required: true, message: "请输入学员昵称!" }]}
-            >
-              <Input placeholder="请输入学员昵称" />
-            </Form.Item>
-            <Form.Item
-              label="学员头像"
-              name="avatar"
-              rules={[{ required: true, message: "请上传学员头像!" }]}
-            >
-              <div className="c-flex">
-                <div className="d-flex">
-                  <UploadImageButton
-                    onSelected={(url) => {
-                      setAvatar(url);
-                      form.setFieldsValue({ avatar: url });
-                    }}
-                  ></UploadImageButton>
-                </div>
-                {avatar && (
-                  <img className="form-avatar mt-10" src={avatar} alt="" />
-                )}
-              </div>
-            </Form.Item>
-            <Form.Item
-              label="登录密码"
-              name="password"
-              rules={[{ required: true, message: "请输入登录密码!" }]}
-            >
-              <Input.Password placeholder="请输入登录密码" />
-            </Form.Item>
-            <Form.Item
-              label="学员邮箱"
-              name="email"
-              rules={[{ required: true, message: "请输入学员邮箱!" }]}
-            >
-              <Input placeholder="请输入学员邮箱" />
-            </Form.Item>
-            <Form.Item
-              label="身份证号"
-              name="idCard"
-              rules={[{ required: true, message: "请输入身份证号!" }]}
-            >
-              <Input placeholder="请输入身份证号" />
-            </Form.Item>
-            <Form.Item
-              label="学员部门"
-              name="dep_ids"
-              rules={[{ required: true, message: "请选择学员部门!" }]}
-            >
-              <Cascader
-                options={departments}
-                onChange={onChange}
-                multiple
-                maxTagCount="responsive"
-                placeholder="请选择学员部门"
-              />
-            </Form.Item>
-            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-              <Button type="primary" htmlType="submit">
-                保存
-              </Button>
-              <Button
-                className="ml-15"
-                htmlType="button"
-                onClick={() => navigate(-1)}
+              <Form.Item
+                label="学员姓名"
+                name="name"
+                rules={[{ required: true, message: "请输入学员姓名!" }]}
               >
-                取消
-              </Button>
-            </Form.Item>
-          </Form>
+                <Input placeholder="请输入学员姓名" />
+              </Form.Item>
+              <Form.Item
+                label="学员昵称"
+                name="nickname"
+                rules={[{ required: true, message: "请输入学员昵称!" }]}
+              >
+                <Input placeholder="请输入学员昵称" />
+              </Form.Item>
+              <Form.Item
+                label="学员头像"
+                name="avatar"
+                rules={[{ required: true, message: "请上传学员头像!" }]}
+              >
+                <div className="c-flex">
+                  <div className="d-flex">
+                    <UploadImageButton
+                      onSelected={(url) => {
+                        setAvatar(url);
+                        form.setFieldsValue({ avatar: url });
+                      }}
+                    ></UploadImageButton>
+                  </div>
+                  {avatar && (
+                    <img className="form-avatar mt-10" src={avatar} alt="" />
+                  )}
+                </div>
+              </Form.Item>
+              <Form.Item
+                label="登录密码"
+                name="password"
+                rules={[{ required: true, message: "请输入登录密码!" }]}
+              >
+                <Input.Password placeholder="请输入登录密码" />
+              </Form.Item>
+              <Form.Item
+                label="学员邮箱"
+                name="email"
+                rules={[{ required: true, message: "请输入学员邮箱!" }]}
+              >
+                <Input placeholder="请输入学员邮箱" />
+              </Form.Item>
+              <Form.Item
+                label="身份证号"
+                name="idCard"
+                rules={[{ required: true, message: "请输入身份证号!" }]}
+              >
+                <Input placeholder="请输入身份证号" />
+              </Form.Item>
+              <Form.Item
+                label="学员部门"
+                name="dep_ids"
+                rules={[{ required: true, message: "请选择学员部门!" }]}
+              >
+                <Cascader
+                  options={departments}
+                  onChange={onChange}
+                  multiple
+                  maxTagCount="responsive"
+                  placeholder="请选择学员部门"
+                />
+              </Form.Item>
+              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+                <Button type="primary" htmlType="submit">
+                  保存
+                </Button>
+                <Button
+                  className="ml-15"
+                  htmlType="button"
+                  onClick={() => navigate(-1)}
+                >
+                  取消
+                </Button>
+              </Form.Item>
+            </Form>
+          </div>
         </Col>
       </Row>
     </>
diff --git a/src/pages/system/administrator/create.tsx b/src/pages/system/administrator/create.tsx
index 3fa3bc4..000c1e7 100644
--- a/src/pages/system/administrator/create.tsx
+++ b/src/pages/system/administrator/create.tsx
@@ -3,6 +3,7 @@ import { Row, Col, Form, Input, Select, Switch, Button, message } from "antd";
 import styles from "./create.module.less";
 import { adminUser } from "../../../api/index";
 import { useNavigate } from "react-router-dom";
+import { BackBartment } from "../../../compenents";
 
 export const AdministratorCreatePage: React.FC = () => {
   const navigate = useNavigate();
@@ -62,81 +63,86 @@ export const AdministratorCreatePage: React.FC = () => {
     <>
       <Row className="playedu-main-body">
         <Col>
-          <Form
-            form={form}
-            name="basic"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            style={{ width: 600 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item label="角色" name="roleIds">
-              <div className="d-flex">
-                <Select
-                  style={{ width: 300 }}
-                  mode="multiple"
-                  allowClear
-                  placeholder="请选择角色"
-                  onChange={handleChange}
-                  options={roles}
-                />
-                <Button
-                  type="link"
-                  danger
-                  onClick={() => navigate(`/system/adminroles`)}
-                >
-                  角色管理
-                </Button>
-              </div>
-            </Form.Item>
-            <Form.Item
-              label="姓名"
-              name="name"
-              rules={[{ required: true, message: "请输入姓名!" }]}
+          <div className="float-left mb-24">
+            <BackBartment title="添加管理员" />
+          </div>
+          <div className="float-left">
+            <Form
+              form={form}
+              name="basic"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              style={{ width: 600 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Input style={{ width: 300 }} placeholder="请输入姓名" />
-            </Form.Item>
-            <Form.Item
-              label="邮箱"
-              name="email"
-              rules={[{ required: true, message: "请输入学员邮箱!" }]}
-            >
-              <Input style={{ width: 300 }} placeholder="请输入学员邮箱" />
-            </Form.Item>
-            <Form.Item
-              label="密码"
-              name="password"
-              rules={[{ required: true, message: "请输入登录密码!" }]}
-            >
-              <Input.Password
-                style={{ width: 300 }}
-                placeholder="请输入登录密码"
-              />
-            </Form.Item>
-            <Form.Item
-              label="禁止登录"
-              name="is_ban_login"
-              valuePropName="checked"
-              rules={[{ required: true, message: "请选择禁止登录!" }]}
-            >
-              <Switch onChange={onChange} />
-            </Form.Item>
-            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-              <Button type="primary" htmlType="submit">
-                保存
-              </Button>
-              <Button
-                className="ml-15"
-                htmlType="button"
-                onClick={() => navigate(-1)}
+              <Form.Item label="角色" name="roleIds">
+                <div className="d-flex">
+                  <Select
+                    style={{ width: 300 }}
+                    mode="multiple"
+                    allowClear
+                    placeholder="请选择角色"
+                    onChange={handleChange}
+                    options={roles}
+                  />
+                  <Button
+                    type="link"
+                    danger
+                    onClick={() => navigate(`/system/adminroles`)}
+                  >
+                    角色管理
+                  </Button>
+                </div>
+              </Form.Item>
+              <Form.Item
+                label="姓名"
+                name="name"
+                rules={[{ required: true, message: "请输入姓名!" }]}
               >
-                取消
-              </Button>
-            </Form.Item>
-          </Form>
+                <Input style={{ width: 300 }} placeholder="请输入姓名" />
+              </Form.Item>
+              <Form.Item
+                label="邮箱"
+                name="email"
+                rules={[{ required: true, message: "请输入学员邮箱!" }]}
+              >
+                <Input style={{ width: 300 }} placeholder="请输入学员邮箱" />
+              </Form.Item>
+              <Form.Item
+                label="密码"
+                name="password"
+                rules={[{ required: true, message: "请输入登录密码!" }]}
+              >
+                <Input.Password
+                  style={{ width: 300 }}
+                  placeholder="请输入登录密码"
+                />
+              </Form.Item>
+              <Form.Item
+                label="禁止登录"
+                name="is_ban_login"
+                valuePropName="checked"
+                rules={[{ required: true, message: "请选择禁止登录!" }]}
+              >
+                <Switch onChange={onChange} />
+              </Form.Item>
+              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+                <Button type="primary" htmlType="submit">
+                  保存
+                </Button>
+                <Button
+                  className="ml-15"
+                  htmlType="button"
+                  onClick={() => navigate(-1)}
+                >
+                  取消
+                </Button>
+              </Form.Item>
+            </Form>
+          </div>
         </Col>
       </Row>
     </>
diff --git a/src/pages/system/administrator/update.tsx b/src/pages/system/administrator/update.tsx
index 4e1f3ad..f9365a9 100644
--- a/src/pages/system/administrator/update.tsx
+++ b/src/pages/system/administrator/update.tsx
@@ -3,6 +3,7 @@ import { Row, Col, Form, Input, Select, Switch, Button, message } from "antd";
 import styles from "./update.module.less";
 import { adminUser } from "../../../api/index";
 import { useParams, useNavigate } from "react-router-dom";
+import { BackBartment } from "../../../compenents";
 
 export const AdministratorUpdatePage: React.FC = () => {
   const params = useParams();
@@ -80,80 +81,85 @@ export const AdministratorUpdatePage: React.FC = () => {
     <>
       <Row className="playedu-main-body">
         <Col>
-          <Form
-            form={form}
-            name="basic"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            style={{ width: 600 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item label="角色" name="roleIds">
-              <div className="d-flex">
-                <Select
-                  style={{ width: 300 }}
-                  mode="multiple"
-                  allowClear
-                  placeholder="请选择角色"
-                  onChange={handleChange}
-                  options={roles}
-                />
-                <Button
-                  type="link"
-                  danger
-                  onClick={() => navigate(`/system/adminroles`)}
-                >
-                  角色管理
-                </Button>
-              </div>
-            </Form.Item>
-            <Form.Item
-              label="姓名"
-              name="name"
-              rules={[{ required: true, message: "请输入姓名!" }]}
+          <div className="float-left mb-24">
+            <BackBartment title="编辑管理员" />
+          </div>
+          <div className="float-left">
+            <Form
+              form={form}
+              name="basic"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              style={{ width: 600 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Input style={{ width: 300 }} placeholder="请输入姓名" />
-            </Form.Item>
-            <Form.Item
-              label="邮箱"
-              name="email"
-              rules={[{ required: true, message: "请输入学员邮箱!" }]}
-            >
-              <Input style={{ width: 300 }} placeholder="请输入学员邮箱" />
-            </Form.Item>
-            <Form.Item
-              label="密码"
-              name="password"
-              rules={[{ required: true, message: "请输入登录密码!" }]}
-            >
-              <Input.Password
-                style={{ width: 300 }}
-                placeholder="请输入登录密码"
-              />
-            </Form.Item>
-            <Form.Item
-              label="禁止登录"
-              name="is_ban_login"
-              valuePropName="checked"
-            >
-              <Switch onChange={onChange} />
-            </Form.Item>
-            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-              <Button type="primary" htmlType="submit">
-                保存
-              </Button>
-              <Button
-                className="ml-15"
-                htmlType="button"
-                onClick={() => navigate(-1)}
+              <Form.Item label="角色" name="roleIds">
+                <div className="d-flex">
+                  <Select
+                    style={{ width: 300 }}
+                    mode="multiple"
+                    allowClear
+                    placeholder="请选择角色"
+                    onChange={handleChange}
+                    options={roles}
+                  />
+                  <Button
+                    type="link"
+                    danger
+                    onClick={() => navigate(`/system/adminroles`)}
+                  >
+                    角色管理
+                  </Button>
+                </div>
+              </Form.Item>
+              <Form.Item
+                label="姓名"
+                name="name"
+                rules={[{ required: true, message: "请输入姓名!" }]}
               >
-                取消
-              </Button>
-            </Form.Item>
-          </Form>
+                <Input style={{ width: 300 }} placeholder="请输入姓名" />
+              </Form.Item>
+              <Form.Item
+                label="邮箱"
+                name="email"
+                rules={[{ required: true, message: "请输入学员邮箱!" }]}
+              >
+                <Input style={{ width: 300 }} placeholder="请输入学员邮箱" />
+              </Form.Item>
+              <Form.Item
+                label="密码"
+                name="password"
+                rules={[{ required: true, message: "请输入登录密码!" }]}
+              >
+                <Input.Password
+                  style={{ width: 300 }}
+                  placeholder="请输入登录密码"
+                />
+              </Form.Item>
+              <Form.Item
+                label="禁止登录"
+                name="is_ban_login"
+                valuePropName="checked"
+              >
+                <Switch onChange={onChange} />
+              </Form.Item>
+              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+                <Button type="primary" htmlType="submit">
+                  保存
+                </Button>
+                <Button
+                  className="ml-15"
+                  htmlType="button"
+                  onClick={() => navigate(-1)}
+                >
+                  取消
+                </Button>
+              </Form.Item>
+            </Form>
+          </div>
         </Col>
       </Row>
     </>
diff --git a/src/pages/system/adminroles/create.tsx b/src/pages/system/adminroles/create.tsx
index 5847144..ab68749 100644
--- a/src/pages/system/adminroles/create.tsx
+++ b/src/pages/system/adminroles/create.tsx
@@ -3,6 +3,7 @@ import { Row, Col, Form, Input, Select, Button, message } from "antd";
 import styles from "./create.module.less";
 import { adminRole } from "../../../api/index";
 import { useNavigate } from "react-router-dom";
+import { BackBartment } from "../../../compenents";
 
 export const AdminrolesCreatePage: React.FC = () => {
   const navigate = useNavigate();
@@ -47,47 +48,52 @@ export const AdminrolesCreatePage: React.FC = () => {
     <>
       <Row className="playedu-main-body">
         <Col>
-          <Form
-            form={form}
-            name="basic"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            style={{ width: 600 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="姓名"
-              name="name"
-              rules={[{ required: true, message: "请输入角色名!" }]}
+          <div className="float-left mb-24">
+            <BackBartment title="添加管理员角色" />
+          </div>
+          <div className="float-left">
+            <Form
+              form={form}
+              name="basic"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              style={{ width: 600 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Input style={{ width: 300 }} placeholder="请输入角色名" />
-            </Form.Item>
-            <Form.Item label="权限" name="permission_ids">
-              <Select
-                style={{ width: 300 }}
-                mode="multiple"
-                allowClear
-                placeholder="请选择权限"
-                onChange={handleChange}
-                options={permissions}
-              />
-            </Form.Item>
-            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-              <Button type="primary" htmlType="submit">
-                保存
-              </Button>
-              <Button
-                className="ml-15"
-                htmlType="button"
-                onClick={() => navigate(-1)}
+              <Form.Item
+                label="姓名"
+                name="name"
+                rules={[{ required: true, message: "请输入角色名!" }]}
               >
-                取消
-              </Button>
-            </Form.Item>
-          </Form>
+                <Input style={{ width: 300 }} placeholder="请输入角色名" />
+              </Form.Item>
+              <Form.Item label="权限" name="permission_ids">
+                <Select
+                  style={{ width: 300 }}
+                  mode="multiple"
+                  allowClear
+                  placeholder="请选择权限"
+                  onChange={handleChange}
+                  options={permissions}
+                />
+              </Form.Item>
+              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+                <Button type="primary" htmlType="submit">
+                  保存
+                </Button>
+                <Button
+                  className="ml-15"
+                  htmlType="button"
+                  onClick={() => navigate(-1)}
+                >
+                  取消
+                </Button>
+              </Form.Item>
+            </Form>
+          </div>
         </Col>
       </Row>
     </>
diff --git a/src/pages/system/adminroles/index.tsx b/src/pages/system/adminroles/index.tsx
index d8603d0..986e62e 100644
--- a/src/pages/system/adminroles/index.tsx
+++ b/src/pages/system/adminroles/index.tsx
@@ -15,6 +15,7 @@ import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
 import { adminRole } from "../../../api/index";
 import { dateFormat } from "../../../utils/index";
 import { Link, useNavigate } from "react-router-dom";
+import { BackBartment } from "../../../compenents";
 
 interface DataType {
   id: React.Key;
@@ -106,6 +107,9 @@ export const SystemAdminrolesPage: React.FC = () => {
   return (
     <>
       <div className="playedu-main-body">
+        <div className="float-left mb-24">
+          <BackBartment title="管理员角色" />
+        </div>
         <div className="float-left j-b-flex mb-24">
           <div className="d-flex">
             <Link
diff --git a/src/pages/system/adminroles/update.tsx b/src/pages/system/adminroles/update.tsx
index 1884883..f3ae371 100644
--- a/src/pages/system/adminroles/update.tsx
+++ b/src/pages/system/adminroles/update.tsx
@@ -3,6 +3,7 @@ import { Row, Col, Form, Input, Select, Button, message } from "antd";
 import styles from "./update.module.less";
 import { adminRole } from "../../../api/index";
 import { useParams, useNavigate } from "react-router-dom";
+import { BackBartment } from "../../../compenents";
 
 export const AdminrolesUpdatePage: React.FC = () => {
   const params = useParams();
@@ -62,47 +63,52 @@ export const AdminrolesUpdatePage: React.FC = () => {
     <>
       <Row className="playedu-main-body">
         <Col>
-          <Form
-            form={form}
-            name="basic"
-            labelCol={{ span: 8 }}
-            wrapperCol={{ span: 16 }}
-            style={{ width: 600 }}
-            initialValues={{ remember: true }}
-            onFinish={onFinish}
-            onFinishFailed={onFinishFailed}
-            autoComplete="off"
-          >
-            <Form.Item
-              label="姓名"
-              name="name"
-              rules={[{ required: true, message: "请输入角色名!" }]}
+          <div className="float-left mb-24">
+            <BackBartment title="编辑管理员角色" />
+          </div>
+          <div className="float-left">
+            <Form
+              form={form}
+              name="basic"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              style={{ width: 600 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
             >
-              <Input style={{ width: 300 }} placeholder="请输入角色名" />
-            </Form.Item>
-            <Form.Item label="权限" name="permission_ids">
-              <Select
-                style={{ width: 300 }}
-                mode="multiple"
-                allowClear
-                placeholder="请选择权限"
-                onChange={handleChange}
-                options={permissions}
-              />
-            </Form.Item>
-            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-              <Button type="primary" htmlType="submit">
-                保存
-              </Button>
-              <Button
-                className="ml-15"
-                htmlType="button"
-                onClick={() => navigate(-1)}
+              <Form.Item
+                label="姓名"
+                name="name"
+                rules={[{ required: true, message: "请输入角色名!" }]}
               >
-                取消
-              </Button>
-            </Form.Item>
-          </Form>
+                <Input style={{ width: 300 }} placeholder="请输入角色名" />
+              </Form.Item>
+              <Form.Item label="权限" name="permission_ids">
+                <Select
+                  style={{ width: 300 }}
+                  mode="multiple"
+                  allowClear
+                  placeholder="请选择权限"
+                  onChange={handleChange}
+                  options={permissions}
+                />
+              </Form.Item>
+              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+                <Button type="primary" htmlType="submit">
+                  保存
+                </Button>
+                <Button
+                  className="ml-15"
+                  htmlType="button"
+                  onClick={() => navigate(-1)}
+                >
+                  取消
+                </Button>
+              </Form.Item>
+            </Form>
+          </div>
         </Col>
       </Row>
     </>