添加common.scss

client/App.js

@@ -1,7 +1,5 @@
 import React, { Component } from 'react'
 import Routes from './routes'
-import './styles/lx.scss'
-// import './styles/index.css'
 
 class App extends Component {
   render() {

client/containers/Home/Home.js

@@ -1,12 +1,39 @@
-import React from 'react'
+import '../../styles/Home/home.scss'
-import { Button } from 'antd';
+import React, { Component } from 'react'
+import { Button, Input, Icon, Checkbox } from 'antd'
 import Header from '../../components/Header/Header.js'
 
-export default function Home() {
+class Home extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render () {
     return (
       <acticle>
         <Header />
-      <Button type="primary">Primary</Button>
+
+        <h3>YAPI</h3>
+
+        <div className="home-box">
+          <Input
+            size="large"
+            placeholder="Username"
+            prefix={<Icon type="user" style={{ fontSize: 14 }} />} />
+
+          <Input
+            size="large"
+            type="password"
+            placeholder="Password"
+            prefix={<Icon type="lock" style={{ fontSize: 14 }} />} />
+
+          <Button type="primary">登录</Button>
+        </div>
+
+        <Checkbox>记住密码</Checkbox>
       </acticle>
     )
   }
+}
+
+export default Home

client/styles/Home/home.scss

@@ -0,0 +1,6 @@
+@import '../common.scss';
+
+body {
+  border: 1px #f00 solid;
+  font-size: 1.8rem;
+}

client/styles/common.scss

@@ -0,0 +1,27 @@
+@import '~antd/dist/antd.css';
+
+html, body {
+  font-family: 'Microsoft Yahei';
+  margin: 0;
+  padding: 0;
+  height: 100;
+  font-size: 62.5%;
+}
+
+div, article, p, table, tr, td, th, ul, ol, li, h1, h2, h3, form, dl, dt, dd {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+ul {
+  list-style-type: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  color: #636363;
+}

client/styles/lx.scss

@@ -1,7 +0,0 @@
-@import '~antd/dist/antd.css';
-html {
-  body {
-    border: 1px #f00 solid;
-    background: #F99;
-  }
-}