2022-11-09 12:28:04 +08:00
|
|
|
import React from 'react';
|
2024-04-08 14:04:08 +08:00
|
|
|
import { Flex, Layout } from 'antd';
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
const { Header, Footer, Sider, Content } = Layout;
|
|
|
|
|
2023-01-19 22:36:27 +08:00
|
|
|
const headerStyle: React.CSSProperties = {
|
|
|
|
textAlign: 'center',
|
|
|
|
color: '#fff',
|
|
|
|
height: 64,
|
2023-12-11 12:22:23 +08:00
|
|
|
paddingInline: 48,
|
2023-01-19 22:36:27 +08:00
|
|
|
lineHeight: '64px',
|
2023-12-11 12:22:23 +08:00
|
|
|
backgroundColor: '#4096ff',
|
2023-01-19 22:36:27 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const contentStyle: React.CSSProperties = {
|
|
|
|
textAlign: 'center',
|
|
|
|
minHeight: 120,
|
|
|
|
lineHeight: '120px',
|
|
|
|
color: '#fff',
|
2023-12-11 12:22:23 +08:00
|
|
|
backgroundColor: '#0958d9',
|
2023-01-19 22:36:27 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const siderStyle: React.CSSProperties = {
|
|
|
|
textAlign: 'center',
|
|
|
|
lineHeight: '120px',
|
|
|
|
color: '#fff',
|
2023-12-11 12:22:23 +08:00
|
|
|
backgroundColor: '#1677ff',
|
2023-01-19 22:36:27 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const footerStyle: React.CSSProperties = {
|
|
|
|
textAlign: 'center',
|
|
|
|
color: '#fff',
|
2023-12-11 12:22:23 +08:00
|
|
|
backgroundColor: '#4096ff',
|
|
|
|
};
|
|
|
|
|
|
|
|
const layoutStyle = {
|
|
|
|
borderRadius: 8,
|
|
|
|
overflow: 'hidden',
|
|
|
|
width: 'calc(50% - 8px)',
|
|
|
|
maxWidth: 'calc(50% - 8px)',
|
2023-01-19 22:36:27 +08:00
|
|
|
};
|
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
const App: React.FC = () => (
|
2024-04-12 12:10:38 +08:00
|
|
|
<Flex gap="middle" wrap>
|
2023-12-11 12:22:23 +08:00
|
|
|
<Layout style={layoutStyle}>
|
2023-01-19 22:36:27 +08:00
|
|
|
<Header style={headerStyle}>Header</Header>
|
|
|
|
<Content style={contentStyle}>Content</Content>
|
|
|
|
<Footer style={footerStyle}>Footer</Footer>
|
2022-11-09 12:28:04 +08:00
|
|
|
</Layout>
|
2023-12-11 12:22:23 +08:00
|
|
|
|
|
|
|
<Layout style={layoutStyle}>
|
2023-01-19 22:36:27 +08:00
|
|
|
<Header style={headerStyle}>Header</Header>
|
2023-12-11 12:22:23 +08:00
|
|
|
<Layout>
|
|
|
|
<Sider width="25%" style={siderStyle}>
|
|
|
|
Sider
|
|
|
|
</Sider>
|
2023-01-19 22:36:27 +08:00
|
|
|
<Content style={contentStyle}>Content</Content>
|
2022-11-09 12:28:04 +08:00
|
|
|
</Layout>
|
2023-01-19 22:36:27 +08:00
|
|
|
<Footer style={footerStyle}>Footer</Footer>
|
2022-11-09 12:28:04 +08:00
|
|
|
</Layout>
|
2023-12-11 12:22:23 +08:00
|
|
|
|
|
|
|
<Layout style={layoutStyle}>
|
2023-01-19 22:36:27 +08:00
|
|
|
<Header style={headerStyle}>Header</Header>
|
2023-12-11 12:22:23 +08:00
|
|
|
<Layout>
|
2023-01-19 22:36:27 +08:00
|
|
|
<Content style={contentStyle}>Content</Content>
|
2023-12-11 12:22:23 +08:00
|
|
|
<Sider width="25%" style={siderStyle}>
|
|
|
|
Sider
|
|
|
|
</Sider>
|
2022-11-09 12:28:04 +08:00
|
|
|
</Layout>
|
2023-01-19 22:36:27 +08:00
|
|
|
<Footer style={footerStyle}>Footer</Footer>
|
2022-11-09 12:28:04 +08:00
|
|
|
</Layout>
|
2023-12-11 12:22:23 +08:00
|
|
|
|
|
|
|
<Layout style={layoutStyle}>
|
|
|
|
<Sider width="25%" style={siderStyle}>
|
|
|
|
Sider
|
|
|
|
</Sider>
|
2022-11-09 12:28:04 +08:00
|
|
|
<Layout>
|
2023-01-19 22:36:27 +08:00
|
|
|
<Header style={headerStyle}>Header</Header>
|
|
|
|
<Content style={contentStyle}>Content</Content>
|
|
|
|
<Footer style={footerStyle}>Footer</Footer>
|
2022-11-09 12:28:04 +08:00
|
|
|
</Layout>
|
|
|
|
</Layout>
|
2023-12-11 12:22:23 +08:00
|
|
|
</Flex>
|
2022-11-09 12:28:04 +08:00
|
|
|
);
|
|
|
|
|
|
|
|
export default App;
|