back-bar组件

This commit is contained in:
禺狨 2023-03-07 10:26:52 +08:00
parent 2176bbf7a1
commit 87b29bf0cd
10 changed files with 485 additions and 397 deletions

View File

@ -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;
}
}

View File

@ -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>
);
};

View File

@ -2,4 +2,5 @@ export * from "./footer";
export * from "./header";
export * from "./leftMenu";
export * from "./upload-image-button";
export * from ".//treeDepartment";
export * from "./treeDepartment";
export * from "./back-bar";

View File

@ -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>
</>

View File

@ -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>
</>

View File

@ -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>
</>

View File

@ -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>
</>

View File

@ -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>
</>

View File

@ -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

View File

@ -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>
</>