3. 走马灯与侧边栏多重菜单

Antd 24栅格系统

import styles from './App.module.css'
import { Header, Footer } from './components'
import { Row, Col } from 'antd'
function App() {
  return (
    <div className={styles.App}>
      <Header />
      <div className={styles['page-content']}>
        <Row style={{ marginTop: 20 }}>
          <Col span={6}>
            <div style={{ background: 'red' }}>多重菜单</div>
          </Col>
          <Col span={18}>
            <div style={{ background: 'blue' }}>走马灯</div>
          </Col>
        </Row>
      </div>
      <Footer />
    </div>
  )
}

React可以通过 style 属性设置css, style 是个对象

Carousel 走马灯

import { Image, Carousel as AntCarousel } from 'antd'
import styles from './Carousel.module.css'
import carouselImage1 from '../../assets/images/carousel_1.jpg'
import carouselImage2 from '../../assets/images/carousel_2.jpg'
import carouselImage3 from '../../assets/images/carousel_3.jpg'
export const Carousel: React.FC = () => {
  return (
    <AntCarousel autoplay className={styles.slider}>
      <Image src={carouselImage1} />
      <Image src={carouselImage2} />
      <Image src={carouselImage3} />
    </AntCarousel>
  )
}