ttk-app-core/src/apps/app-demo/layout/nesting/app.js

@ttk/recat enterprise develop framework

import React, { useEffect } from 'react'
import { Layout } from 'antd'
import Box from '@/components/floatbox';
import './style.less'
const { Fragment } = React

const { Header, Footer, Sider, Content } = Layout;

export default React.memo(Page)
function Page(props) {
  return (
    <div style={{height: "100%"}}>
      <Box className="box-header" width="100%" height="60px">header</Box>
      <Box className="box-aside" width="300px" height="100%-160px">asside</Box>
      <Box className="box-content" width="100%-300" height="100%-160px">
        <Box className="box-content-search" width="100%" height="100px">search</Box>
        <Box className="box-content-table" width="100%" height="100%-140px">table</Box>
        <Box className="box-content-tips" width="50%" height="40">tips</Box>
        <Box className="box-content-pagination">pagination</Box>
      </Box>
      <Box className="box-footer" width="100%" height="100px">footer</Box>
    </div>
  )
}