dengyinhuan
3 years ago
8 changed files with 114 additions and 2 deletions
@ -0,0 +1,7 @@ |
|||||
|
import React from 'react' |
||||
|
import './style.less' |
||||
|
export default function Leftbottom() { |
||||
|
return ( |
||||
|
<div className='build-left-bottom'>Leftbottom</div> |
||||
|
) |
||||
|
} |
@ -0,0 +1,7 @@ |
|||||
|
import React from 'react' |
||||
|
import './style.less' |
||||
|
export default function Leftcenter() { |
||||
|
return ( |
||||
|
<div className='build-left-center'>Leftcenter</div> |
||||
|
) |
||||
|
} |
@ -0,0 +1,7 @@ |
|||||
|
import React from 'react' |
||||
|
import './style.less' |
||||
|
export default function Lefttop() { |
||||
|
return ( |
||||
|
<div className='build-left-top'>Lefttop</div> |
||||
|
) |
||||
|
} |
@ -0,0 +1,7 @@ |
|||||
|
import React from 'react' |
||||
|
import './style.less' |
||||
|
export default function Rightbottom() { |
||||
|
return ( |
||||
|
<div className='build-right-bottom'>Rightbottom</div> |
||||
|
) |
||||
|
} |
@ -0,0 +1,7 @@ |
|||||
|
import React from 'react' |
||||
|
import './style.less' |
||||
|
export default function Rightcenter() { |
||||
|
return ( |
||||
|
<div className='build-right-center'>Rightcenter</div> |
||||
|
) |
||||
|
} |
@ -0,0 +1,7 @@ |
|||||
|
import React from 'react' |
||||
|
import './style.less' |
||||
|
export default function Righttop() { |
||||
|
return ( |
||||
|
<div className='build-right-top'>Righttop</div> |
||||
|
) |
||||
|
} |
@ -1,8 +1,25 @@ |
|||||
import React from 'react' |
import React from 'react' |
||||
|
import LeftTop from './Lefttop' |
||||
|
import LeftCenter from './Leftcenter' |
||||
|
import LeftBottom from './Leftbottom' |
||||
|
import RightTop from './Righttop' |
||||
|
import Rightcenter from './Rightcenter' |
||||
|
import Rightbottom from './Rightbottom' |
||||
|
import './style.less' |
||||
const Build = () => { |
const Build = () => { |
||||
return ( |
return ( |
||||
<>建设</> |
<div className='bgbuild'> |
||||
|
<div className='bgbuild-left'> |
||||
|
<LeftTop/> |
||||
|
<LeftCenter/> |
||||
|
<LeftBottom/> |
||||
|
</div> |
||||
|
<div className='bgbuild-right'> |
||||
|
<RightTop/> |
||||
|
<Rightcenter/> |
||||
|
<Rightbottom/> |
||||
|
</div> |
||||
|
</div> |
||||
) |
) |
||||
} |
} |
||||
export default Build |
export default Build |
||||
|
@ -0,0 +1,53 @@ |
|||||
|
.bgbuild{ |
||||
|
// box-sizing: border-box; |
||||
|
padding: 0 15px 0 15px; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.bgbuild-left{ |
||||
|
width: 25%; |
||||
|
height: 100%; |
||||
|
.build-left-top{ |
||||
|
width: 100%; |
||||
|
height: 33%; |
||||
|
background-color: pink; |
||||
|
margin-bottom: 3%; |
||||
|
} |
||||
|
.build-left-center{ |
||||
|
width: 100%; |
||||
|
height: 33%; |
||||
|
background-color: pink; |
||||
|
margin-bottom: 3%; |
||||
|
} |
||||
|
.build-left-bottom{ |
||||
|
width: 100%; |
||||
|
height: 30%; |
||||
|
background-color: pink; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.bgbuild-right{ |
||||
|
width: 25%; |
||||
|
height: 100%; |
||||
|
.build-right-top{ |
||||
|
width: 100%; |
||||
|
height: 33%; |
||||
|
background-color: pink; |
||||
|
margin-bottom: 3%; |
||||
|
} |
||||
|
.build-right-center{ |
||||
|
width: 100%; |
||||
|
height: 33%; |
||||
|
background-color: pink; |
||||
|
margin-bottom: 3%; |
||||
|
} |
||||
|
.build-right-bottom{ |
||||
|
width: 100%; |
||||
|
height: 30%; |
||||
|
background-color: pink; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
Loading…
Reference in new issue