diff --git a/package.json b/package.json
index ae4dd91..af7afec 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom"
   },
-  "homepage": "https://bilibili.hamomo.top",
+  "homepage": "https://hamono.github.io",
   "devDependencies": {
     "@types/classnames": "^2.2.6",
     "@types/jest": "^23.1.1",
diff --git a/src/views/Body/DianShiJu/index.tsx b/src/views/Body/DianShiJu/index.tsx
deleted file mode 100644
index 2855e59..0000000
--- a/src/views/Body/DianShiJu/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from "react";
-
-export default function DianShiJu(){
-return <div>123456789</div>
-}
\ No newline at end of file
diff --git a/src/views/Body/First/Left/Body/Compent/img1.jpg b/src/views/Body/First/Left/Body/Compent/img1.jpg
new file mode 100644
index 0000000..1588c35
Binary files /dev/null and b/src/views/Body/First/Left/Body/Compent/img1.jpg differ
diff --git a/src/views/Body/First/Left/Body/Compent/img2.jpg b/src/views/Body/First/Left/Body/Compent/img2.jpg
new file mode 100644
index 0000000..6563166
Binary files /dev/null and b/src/views/Body/First/Left/Body/Compent/img2.jpg differ
diff --git a/src/views/Body/First/Left/Body/Compent/img3.jpg b/src/views/Body/First/Left/Body/Compent/img3.jpg
new file mode 100644
index 0000000..95e9b82
Binary files /dev/null and b/src/views/Body/First/Left/Body/Compent/img3.jpg differ
diff --git a/src/views/Body/First/Left/Body/Compent/index.tsx b/src/views/Body/First/Left/Body/Compent/index.tsx
new file mode 100644
index 0000000..c9373a0
--- /dev/null
+++ b/src/views/Body/First/Left/Body/Compent/index.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import * as style from "./style.scss";
+import img1 from "./img1.jpg";
+import img3 from "./img3.jpg";
+import img2 from "./img2.jpg";
+import { Icon } from "antd";
+
+export default function Compent() {
+  return <div className={style.box}>
+    <a href="" className={style.picture}>
+      <img src={img2} width="206px" height="120px" />
+      <img src={img1} width="206px" height="120px" className={style.hidden}/>
+      <div className={style.icon}><Icon type="team" />999</div>
+    </a>
+    <a href="" className={style.content}>
+      <img src={img3} width="40px" height="40px" className={style.img}/>
+      <div className={style.txt}>
+        <a className={style.text}>央视新闻</a><br/>
+        <span className={style.dir}>一些有用的介绍</span><br/>
+        <span className={style.tip}>娱乐·学习</span>
+      </div>
+    </a>
+  </div>
+
+}
\ No newline at end of file
diff --git a/src/views/Body/First/Left/Body/Compent/style.scss b/src/views/Body/First/Left/Body/Compent/style.scss
new file mode 100644
index 0000000..cd418c9
--- /dev/null
+++ b/src/views/Body/First/Left/Body/Compent/style.scss
@@ -0,0 +1,50 @@
+.box{
+  width: 206px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.picture{
+  width: 206px;
+  height: 120px;
+}
+.hidden{
+  position: absolute;
+  margin-left:-206px;
+}
+:hover.hidden{
+  opacity:0;
+}
+.icon{
+  margin-top: -20px;
+  margin-left: 10px;
+  color: white;
+  position: absolute;
+  font-size: 14px;
+}
+.content{
+  display: flex;
+  justify-content: space-between;
+}
+.img{
+  width: 40px;
+  height: 40px;
+}
+.txt{
+  width: 150px;
+}
+.text{
+  font-size: 16px;
+  color: black;
+}
+.dir{
+  color: black;
+  font-size: 12px;
+  line-height: 16px;
+}
+.tip{
+  color: rgb(141, 141, 141);
+  line-height: 33px;
+  font-size: smaller
+}
\ No newline at end of file
diff --git a/src/views/Body/First/Left/Body/index.tsx b/src/views/Body/First/Left/Body/index.tsx
new file mode 100644
index 0000000..cd768db
--- /dev/null
+++ b/src/views/Body/First/Left/Body/index.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import * as style from "./style.scss";
+import Compent from "./Compent";
+
+export default function Body() {
+  return <div className={style.main}>
+    <div className={style.line}>
+      <Compent />
+      <Compent />
+      <Compent />
+      <Compent />
+      <Compent />
+    </div>
+    <div className={style.line}>
+      <Compent />
+      <Compent />
+      <Compent />
+      <Compent />
+      <Compent />
+    </div>
+  </div>
+
+}
\ No newline at end of file
diff --git a/src/views/Body/First/Left/Body/style.scss b/src/views/Body/First/Left/Body/style.scss
new file mode 100644
index 0000000..b08f8f0
--- /dev/null
+++ b/src/views/Body/First/Left/Body/style.scss
@@ -0,0 +1,13 @@
+.main{
+  width: 1070px;
+  height:420px;
+  display: flex;
+  // margin-top: 5px;
+  flex-direction: column;
+  justify-content: center;
+}
+.line{
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
+}
\ No newline at end of file
diff --git a/src/views/Body/First/Left/Top/index.tsx b/src/views/Body/First/Left/Top/index.tsx
new file mode 100644
index 0000000..082821f
--- /dev/null
+++ b/src/views/Body/First/Left/Top/index.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { Icon, Button } from "antd";
+import * as style from "./style.scss";
+
+export default function Top() {
+  return <div className={style.box}>
+    <div className={style.left}>
+      <div>
+        <Icon type="play-square" className={style.iconB}/>
+        <a className={style.content}>正在直播</a>
+      </div>
+      <div className={style.dir}>
+        <div>
+          <span className={style.text}>当前共有<span className={style.num}>9999</span>个在线直播</span>
+        </div>
+        <div>
+        <Icon type="fire" className={style.iconS}/>
+          <a className={style.txt}>233秒居然能做这些</a>
+        </div>
+      </div>
+    </div>
+    <div className={style.right}>
+    <Button size="small" icon="sync">换一批</Button> 
+    <Button size="small" className={style.button}>更多<Icon type="right" /></Button>
+    </div>
+  </div>
+}
\ No newline at end of file
diff --git a/src/views/Body/First/Left/Top/style.scss b/src/views/Body/First/Left/Top/style.scss
new file mode 100644
index 0000000..f35d618
--- /dev/null
+++ b/src/views/Body/First/Left/Top/style.scss
@@ -0,0 +1,52 @@
+.box{
+  width:1070px ;
+  height:50px ;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.left{
+  width: 500px;
+  display: flex;
+  justify-content: space-between;
+}
+.iconB{
+  font-size: 40px;
+  color: skyblue;
+}
+.content{
+  font-size: 25px;
+  color: black;
+  margin-left: 10px;
+}
+.dir{
+  width: 350px;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.text{
+  font-size: 12px;
+  margin-left: 30px;
+}
+.num{
+  margin-left: 5px;
+  margin-right: 5px;
+  font-size: 12px;
+}
+.iconS{
+  color: red;
+  font-size: 12px;
+  margin-left: 10px;
+}
+.txt{
+  margin-left: 5px;
+  font-size: 12px;
+}
+.right{
+  width:168px;
+  margin-top: 15px;
+}
+.button{
+  margin-left: 20px;
+}
\ No newline at end of file
diff --git a/src/views/Body/First/Left/index.tsx b/src/views/Body/First/Left/index.tsx
new file mode 100644
index 0000000..d01b43e
--- /dev/null
+++ b/src/views/Body/First/Left/index.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import Top from "./Top";
+import Body from "./Body";
+
+export default function Left (){
+  return <div>
+    <Top />
+    <Body />
+  </div>
+}
\ No newline at end of file
diff --git a/src/views/Body/First/Right/Center/index.tsx b/src/views/Body/First/Right/Center/index.tsx
new file mode 100644
index 0000000..d0fcafc
--- /dev/null
+++ b/src/views/Body/First/Right/Center/index.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import * as style from "./style.scss";
+
+export default function Center (){
+  return <div className={style.main}>
+    没得数据(-_-#)
+  </div>
+}
\ No newline at end of file
diff --git a/src/views/Body/First/Right/Center/style.scss b/src/views/Body/First/Right/Center/style.scss
new file mode 100644
index 0000000..fdebdc9
--- /dev/null
+++ b/src/views/Body/First/Right/Center/style.scss
@@ -0,0 +1,4 @@
+.main{
+  margin-top: 10px;
+  font-size: x-small;
+}
\ No newline at end of file
diff --git a/src/views/Body/First/Right/Left/index.tsx b/src/views/Body/First/Right/Left/index.tsx
new file mode 100644
index 0000000..df34e98
--- /dev/null
+++ b/src/views/Body/First/Right/Left/index.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import * as style from "./style.scss";
+import { Avatar, Icon } from 'antd';
+
+export default function Left() {
+  return <div className={style.box}>
+    <a href="" className={style.child1}>
+      <div className={style.num}> 01</div>
+      <Avatar size="large" icon="user" />
+      <div>
+        <span className={style.text}>吴大佬</span><br />
+        <span className={style.dir}>一些有用的介绍</span>
+      </div>
+      <div className={style.icon}><Icon type="team" />999</div>
+    </a>
+    <a href="" className={style.child}>
+      <div className={style.num}> 02</div>
+      <Avatar size="large" icon="user" />
+      <div>
+        <span className={style.text}>小伙伴</span><br />
+        <span className={style.dir}>一些有用的介绍</span>
+      </div>
+      <div className={style.icon}><Icon type="team" />888</div>
+    </a>
+    <a href="" className={style.child}>
+      <div className={style.num}> 03</div>
+      <Avatar size="large" icon="user" />
+      <div>
+        <span className={style.text}>哈默默</span><br />
+        <span className={style.dir}>一些有用的介绍</span>
+      </div>
+      <div className={style.icon}><Icon type="team" />666</div>
+    </a>
+    <a href="" className={style.child}>
+      <div className={style.num1}> 4</div>
+      <Avatar size="large" icon="user" />
+      <div>
+        <span className={style.text}>哈默默</span><br />
+        <span className={style.dir}>一些有用的介绍</span>
+      </div>
+      <div className={style.icon}><Icon type="team" />666</div>
+    </a>
+    <a href="" className={style.child}>
+      <div className={style.num1}> 5</div>
+      <Avatar size="large" icon="user" />
+      <div>
+        <span className={style.text}>哈默默</span><br />
+        <span className={style.dir}>一些有用的介绍</span>
+      </div>
+      <div className={style.icon}><Icon type="team" />666</div>
+    </a>
+    <a href="" className={style.child}>
+      <div className={style.num1}> 6</div>
+      <Avatar size="large" icon="user" />
+      <div>
+        <span className={style.text}>哈默默</span><br />
+        <span className={style.dir}>一些有用的介绍</span>
+      </div>
+      <div className={style.icon}><Icon type="team" />666</div>
+    </a>
+  </div>
+}
\ No newline at end of file
diff --git a/src/views/Body/First/Right/Left/style.scss b/src/views/Body/First/Right/Left/style.scss
new file mode 100644
index 0000000..3e70cc6
--- /dev/null
+++ b/src/views/Body/First/Right/Left/style.scss
@@ -0,0 +1,48 @@
+.box{
+  width: 330px;
+}
+.child{
+  width: 330px;
+  height: 45px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 25px;
+}
+.child1{
+  width: 330px;
+  height: 45px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+}
+.num{
+  width: 15px;
+  height: 15px;
+  line-height: 15px;
+  font-size: 14px;
+  color: white;
+  background-color: skyblue;
+}
+.num1{
+    width: 15px;
+    height: 15px;
+    line-height: 15px;
+    font-size: 14px;
+    color:black;
+}
+.text{
+  font-size: 14px;
+  color: black;
+}
+.dir{
+  font-size: 14px;
+  color: black;
+}
+.icon{
+  color: rgb(131, 131, 131);
+  width: 150px;
+padding-left: 110px;
+  font-size: x-small;
+}
\ No newline at end of file
diff --git a/src/views/Body/First/Right/RightX/index.tsx b/src/views/Body/First/Right/RightX/index.tsx
new file mode 100644
index 0000000..893a290
--- /dev/null
+++ b/src/views/Body/First/Right/RightX/index.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import * as style from "./style.scss";
+import { Carousel } from 'antd';
+
+export default function RightX() {
+  return <div className={style.left}>
+      <Carousel autoplay={true} dots={true} dotPosition="bottom">
+        <div className={style.picture1}>
+          <a>
+            <p>这是我复制来的</p>
+          </a>
+        </div>
+        <div className={style.picture2}>
+          <a>
+            <p>1433223</p>
+          </a>
+        </div>
+        <div className={style.picture3}>
+          <a>
+            <p>233133上天</p>
+          </a>
+        </div>
+      </Carousel >
+    </div>
+}
diff --git a/src/views/Body/First/Right/RightX/style.scss b/src/views/Body/First/Right/RightX/style.scss
new file mode 100644
index 0000000..990d504
--- /dev/null
+++ b/src/views/Body/First/Right/RightX/style.scss
@@ -0,0 +1,26 @@
+.left {
+  width: 330px;
+  height: 320px;
+  margin-top: 10px;
+}
+.picture1 {
+  width: 330px;
+  height: 330px;
+  background-color: rgb(200, 233, 166);
+}
+.picture2 {
+  width: 330px;
+  height: 330px;
+  background-color: rgb(105, 133, 209);
+}
+.picture3 {
+  width: 330px;
+  height: 330px;
+  background-color: rgb(48, 137, 165);
+}
+p {
+  position: absolute;
+  top: 20px;
+  margin-left: 20px;
+  color: black;
+}
\ No newline at end of file
diff --git a/src/views/Body/First/Right/index.tsx b/src/views/Body/First/Right/index.tsx
new file mode 100644
index 0000000..07ba9c3
--- /dev/null
+++ b/src/views/Body/First/Right/index.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import * as style from "./style.scss";
+import RightX from "./RightX";
+// import Left from "./Left";
+// import Center from "./Center";
+
+export default function Right() {
+  return <div className={style.main}>
+    <ul className={style.line}>
+      <li><a><div className={style.tip}>直播排行</div></a></li>
+      <li><a><div className={style.tip}>关注的主播</div></a></li>
+      <li><a><div className={style.tip}>为你推荐</div></a></li>
+    </ul>
+    <RightX />
+  </div>
+}
\ No newline at end of file
diff --git a/src/views/Body/First/Right/style.scss b/src/views/Body/First/Right/style.scss
new file mode 100644
index 0000000..cce4bd3
--- /dev/null
+++ b/src/views/Body/First/Right/style.scss
@@ -0,0 +1,19 @@
+.main{
+  display: flex;
+  flex-direction: column;
+}
+.line{
+  width:330px;
+  margin-top: 32px;
+  display: flex;
+  list-style-type:none;
+}
+.tip{
+  height: 27px;
+  color: black;
+  margin-right: 20px;
+}
+:hover.tip{
+  color:skyblue;
+  border-bottom:1px solid skyblue;
+}
\ No newline at end of file
diff --git a/src/views/Body/First/index.tsx b/src/views/Body/First/index.tsx
new file mode 100644
index 0000000..b8dd59a
--- /dev/null
+++ b/src/views/Body/First/index.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import Left from "./Left";
+import Right from "./Right";
+import * as style from "./style.scss";
+
+export default function First(){
+return <div className={style.main}>
+  <Left />
+  <Right />
+</div>
+}
\ No newline at end of file
diff --git a/src/views/Body/First/style.scss b/src/views/Body/First/style.scss
new file mode 100644
index 0000000..72ba95a
--- /dev/null
+++ b/src/views/Body/First/style.scss
@@ -0,0 +1,5 @@
+.main{
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
\ No newline at end of file
diff --git a/src/views/Body/GuangGao/index.tsx b/src/views/Body/GuangGao/index.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/Body/Second/Left/Body/Compent/img1.jpg b/src/views/Body/Second/Left/Body/Compent/img1.jpg
new file mode 100644
index 0000000..1588c35
Binary files /dev/null and b/src/views/Body/Second/Left/Body/Compent/img1.jpg differ
diff --git a/src/views/Body/Second/Left/Body/Compent/img2.jpg b/src/views/Body/Second/Left/Body/Compent/img2.jpg
new file mode 100644
index 0000000..6563166
Binary files /dev/null and b/src/views/Body/Second/Left/Body/Compent/img2.jpg differ
diff --git a/src/views/Body/Second/Left/Body/Compent/img3.jpg b/src/views/Body/Second/Left/Body/Compent/img3.jpg
new file mode 100644
index 0000000..95e9b82
Binary files /dev/null and b/src/views/Body/Second/Left/Body/Compent/img3.jpg differ
diff --git a/src/views/Body/Second/Left/Body/Compent/index.tsx b/src/views/Body/Second/Left/Body/Compent/index.tsx
new file mode 100644
index 0000000..d6fcac5
--- /dev/null
+++ b/src/views/Body/Second/Left/Body/Compent/index.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import * as style from "./style.scss";
+import img1 from "./img1.jpg";
+import img2 from "./img2.jpg";
+import { Icon } from "antd";
+
+export default function Compent() {
+  return <div className={style.box}>
+    <a href="" className={style.picture}>
+      <img src={img2} width="206px" height="120px" />
+      <img src={img1} width="206px" height="120px" className={style.hidden}/>
+      <div className={style.icon}><Icon type="team" />999</div>
+    </a>
+    <a href="">
+      <div className={style.txt}>
+        <span className={style.dir}>一些有用的介绍</span><br/>
+        <span className={style.tip}>UP·学习</span>
+      </div>
+    </a>
+  </div>
+
+}
\ No newline at end of file
diff --git a/src/views/Body/Second/Left/Body/Compent/style.scss b/src/views/Body/Second/Left/Body/Compent/style.scss
new file mode 100644
index 0000000..3bbdd8f
--- /dev/null
+++ b/src/views/Body/Second/Left/Body/Compent/style.scss
@@ -0,0 +1,40 @@
+.box {
+  width: 206px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.picture {
+  width: 206px;
+  height: 120px;
+}
+.hidden {
+  position: absolute;
+  margin-left: -206px;
+}
+:hover.hidden {
+  opacity: 0;
+}
+.icon {
+  margin-top: -20px;
+  margin-left: 10px;
+  color: white;
+  position: absolute;
+  font-size: 14px;
+}
+.txt {
+  width: 150px;
+  height: 50px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.dir {
+  color: black;
+  font-size: 12px;
+}
+.tip {
+  color: rgb(141, 141, 141);
+  font-size: smaller;
+}
diff --git a/src/views/Body/Second/Left/Body/index.tsx b/src/views/Body/Second/Left/Body/index.tsx
new file mode 100644
index 0000000..cd768db
--- /dev/null
+++ b/src/views/Body/Second/Left/Body/index.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import * as style from "./style.scss";
+import Compent from "./Compent";
+
+export default function Body() {
+  return <div className={style.main}>
+    <div className={style.line}>
+      <Compent />
+      <Compent />
+      <Compent />
+      <Compent />
+      <Compent />
+    </div>
+    <div className={style.line}>
+      <Compent />
+      <Compent />
+      <Compent />
+      <Compent />
+      <Compent />
+    </div>
+  </div>
+
+}
\ No newline at end of file
diff --git a/src/views/Body/Second/Left/Body/style.scss b/src/views/Body/Second/Left/Body/style.scss
new file mode 100644
index 0000000..b08f8f0
--- /dev/null
+++ b/src/views/Body/Second/Left/Body/style.scss
@@ -0,0 +1,13 @@
+.main{
+  width: 1070px;
+  height:420px;
+  display: flex;
+  // margin-top: 5px;
+  flex-direction: column;
+  justify-content: center;
+}
+.line{
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
+}
\ No newline at end of file
diff --git a/src/views/Body/Second/Left/index.tsx b/src/views/Body/Second/Left/index.tsx
new file mode 100644
index 0000000..d01b43e
--- /dev/null
+++ b/src/views/Body/Second/Left/index.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import Top from "./Top";
+import Body from "./Body";
+
+export default function Left (){
+  return <div>
+    <Top />
+    <Body />
+  </div>
+}
\ No newline at end of file
diff --git a/src/views/Body/Second/Left/top/index.tsx b/src/views/Body/Second/Left/top/index.tsx
new file mode 100644
index 0000000..437f026
--- /dev/null
+++ b/src/views/Body/Second/Left/top/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Icon, Button } from "antd";
+import * as style from "./style.scss";
+
+export default function Top() {
+  return <div className={style.box}>
+    <div className={style.left}>
+      <div>
+        <Icon type="play-square" className={style.iconB}/>
+        <a className={style.content}>动画</a>
+      </div>
+    </div>
+    <div className={style.right}>
+    <Button size="small" icon="sync">换一批</Button> 
+    <Button size="small" className={style.button}>更多<Icon type="right" /></Button>
+    </div>
+  </div>
+}
\ No newline at end of file
diff --git a/src/views/Body/Second/Left/top/style.scss b/src/views/Body/Second/Left/top/style.scss
new file mode 100644
index 0000000..5d1b2a5
--- /dev/null
+++ b/src/views/Body/Second/Left/top/style.scss
@@ -0,0 +1,28 @@
+.box{
+  width:1070px ;
+  height:50px ;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.left{
+  width: 500px;
+  display: flex;
+  justify-content: space-between;
+}
+.iconB{
+  font-size: 40px;
+  color: skyblue;
+}
+.content{
+  font-size: 25px;
+  color: black;
+  margin-left: 10px;
+}
+.right{
+  width:168px;
+  margin-top: 15px;
+}
+.button{
+  margin-left: 20px;
+}
\ No newline at end of file
diff --git a/src/views/Body/Second/Right/List/index.tsx b/src/views/Body/Second/Right/List/index.tsx
new file mode 100644
index 0000000..7eaaaf2
--- /dev/null
+++ b/src/views/Body/Second/Right/List/index.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import * as style from "./style.scss";
+import { Avatar, Icon } from 'antd';
+
+export default function List() {
+  return <div className={style.box}>
+    <a href="" className={style.child1}>
+      <div className={style.num}> 01</div>
+      <Avatar size="large" icon="user" />
+      <div>
+        <span className={style.text}>吴大佬</span><br />
+        <span className={style.dir}>一些有用的介绍</span>
+      </div>
+      <div className={style.icon}><Icon type="team" />999</div>
+    </a>
+    <a href="" className={style.child}>
+      <div className={style.num}> 02</div>
+      <Avatar size="large" icon="user" />
+      <div>
+        <span className={style.text}>小伙伴</span><br />
+        <span className={style.dir}>一些有用的介绍</span>
+      </div>
+      <div className={style.icon}><Icon type="team" />888</div>
+    </a>
+    <a href="" className={style.child}>
+      <div className={style.num}> 03</div>
+      <Avatar size="large" icon="user" />
+      <div>
+        <span className={style.text}>哈默默</span><br />
+        <span className={style.dir}>一些有用的介绍</span>
+      </div>
+      <div className={style.icon}><Icon type="team" />666</div>
+    </a>
+    <a href="" className={style.child}>
+      <div className={style.num1}> 4</div>
+      <Avatar size="large" icon="user" />
+      <div>
+        <span className={style.text}>路人甲</span><br />
+        <span className={style.dir}>一些有用的介绍</span>
+      </div>
+      <div className={style.icon}><Icon type="team" />666</div>
+    </a>
+    <a href="" className={style.child}>
+      <div className={style.num1}> 5</div>
+      <Avatar size="large" icon="user" />
+      <div>
+        <span className={style.text}>路人乙</span><br />
+        <span className={style.dir}>一些有用的介绍</span>
+      </div>
+      <div className={style.icon}><Icon type="team" />666</div>
+    </a>
+    <a href="" className={style.child}>
+      <div className={style.num1}> 6</div>
+      <Avatar size="large" icon="user" />
+      <div>
+        <span className={style.text}>路人丙</span><br />
+        <span className={style.dir}>一些有用的介绍</span>
+      </div>
+      <div className={style.icon}><Icon type="team" />666</div>
+    </a>
+  </div>
+}
\ No newline at end of file
diff --git a/src/views/Body/Second/Right/List/style.scss b/src/views/Body/Second/Right/List/style.scss
new file mode 100644
index 0000000..5c8f4e8
--- /dev/null
+++ b/src/views/Body/Second/Right/List/style.scss
@@ -0,0 +1,49 @@
+.box{
+  width: 330px;
+  margin-top: 20px;
+}
+.child{
+  width: 330px;
+  height: 45px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 25px;
+}
+.child1{
+  width: 330px;
+  height: 45px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+}
+.num{
+  width: 15px;
+  height: 15px;
+  line-height: 15px;
+  font-size: 14px;
+  color: white;
+  background-color: skyblue;
+}
+.num1{
+    width: 15px;
+    height: 15px;
+    line-height: 15px;
+    font-size: 14px;
+    color:black;
+}
+.text{
+  font-size: 14px;
+  color: black;
+}
+.dir{
+  font-size: 14px;
+  color: black;
+}
+.icon{
+  color: rgb(131, 131, 131);
+  width: 150px;
+padding-left: 110px;
+  font-size: x-small;
+}
\ No newline at end of file
diff --git a/src/views/Body/Second/Right/index.tsx b/src/views/Body/Second/Right/index.tsx
new file mode 100644
index 0000000..aa38469
--- /dev/null
+++ b/src/views/Body/Second/Right/index.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { Button, Icon } from "antd";
+import * as style from "./style.scss";
+import List from "./List";
+
+export default function Right (){
+  return <div className={style.box}>
+    <div className={style.top}>
+      <span className={style.text}>排行榜</span>
+      <div className={style.button}><Button size="small">更多<Icon type="right" /></Button></div>
+    </div>
+    <div>
+      <List />
+    </div>
+  </div>
+}
\ No newline at end of file
diff --git a/src/views/Body/Second/Right/style.scss b/src/views/Body/Second/Right/style.scss
new file mode 100644
index 0000000..97250f3
--- /dev/null
+++ b/src/views/Body/Second/Right/style.scss
@@ -0,0 +1,17 @@
+.box{
+  width: 330px;
+}
+.top{
+  width: 330px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.text{
+  margin-top: 30px;
+  font-size: x-large;
+}
+.button{
+  height: 30px;
+  margin-top: 30px;
+}
\ No newline at end of file
diff --git a/src/views/Body/Second/index.tsx b/src/views/Body/Second/index.tsx
new file mode 100644
index 0000000..3a4d855
--- /dev/null
+++ b/src/views/Body/Second/index.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import Left from "./Left";
+import Right from "./Right";
+import * as style from "./style.scss";
+
+export default function Second(){
+return <div className={style.main}>
+  <Left />
+  <Right />
+</div>
+}
\ No newline at end of file
diff --git a/src/views/Body/Second/style.scss b/src/views/Body/Second/style.scss
new file mode 100644
index 0000000..72ba95a
--- /dev/null
+++ b/src/views/Body/Second/style.scss
@@ -0,0 +1,5 @@
+.main{
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
\ No newline at end of file
diff --git a/src/views/Body/Top/Upwait/style.scss b/src/views/Body/Top/Upwait/style.scss
index ad289bf..75e43d5 100644
--- a/src/views/Body/Top/Upwait/style.scss
+++ b/src/views/Body/Top/Upwait/style.scss
@@ -1,10 +1,9 @@
 .h4{
-  width:170px;
-  height:95px;
+  width:206px;
+  height:115px;
   position: absolute;
   margin-left: 0px;
-  margin-top: 70px;
-  background-color: white;
+  margin-top: 90px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -21,6 +20,7 @@
   position: absolute;
   margin-left: 0px;
   margin-top: 0px;
+  background-color: rgba($color: #000000, $alpha: 0.5);
 }
 .content{
   margin-top: 5px;
@@ -33,7 +33,7 @@
 }
 .box{
   position: absolute;
-  width: 170px;
-  height: 95px;
+  width: 206px;
+  height: 115px;
   overflow: hidden;
 }
\ No newline at end of file
diff --git a/src/views/Body/Top/index.tsx b/src/views/Body/Top/index.tsx
index a20943e..34aae12 100644
--- a/src/views/Body/Top/index.tsx
+++ b/src/views/Body/Top/index.tsx
@@ -10,31 +10,31 @@ export default function Top() {
     <div className={style.left}>
       <Carousel autoplay={true} dots={true} dotPosition="bottom">
         <div className={style.picture1}>
-          <a href="#">
+          <a href="">
             <p>这是一个p元素，给它设置了绝对定位</p>
             {/* <img src={img} className={style.icon1} /> */}
           </a>
         </div>
         <div className={style.picture2}>
-          <a href="#">
+          <a href="">
             <p>让它做这张图片的description部分</p>
             {/* <img src={img} className={style.icon1} /> */}
           </a>
         </div>
         <div className={style.picture3}>
-          <a href="#">
+          <a href="">
             <p>给它设置top，让它下来一点</p>
             {/* <img src={img} className={style.icon1} /> */}
           </a>
         </div>
         <div className={style.picture4}>
-          <a href="#">
+          <a href="">
             <p>再给他设置left，它却没了</p>
             {/* <img src={img} className={style.icon1} /> */}
           </a>
         </div>
         <div className={style.picture5}>
-          <a href="#">
+          <a href="">
             <p>就设置了margin-left，他又可以了</p>
             {/* <img src={img} className={style.icon1} /> */}
           </a>
@@ -44,40 +44,46 @@ export default function Top() {
     <div className={style.right}>
       <div className={style.line1}>
        
-        <div className={style.action} onMouseMove={()=>{
-          const move=document.querySelector('.h4');
-          move.style.backgroundColor='rgba(0,0,0,0.5)';
-          move.style.marginTop='0px';
-        }}>
-          <a href="#" className={style.hidden}>
+        <div className={style.action} >
+          <a href="" >
           <Upwait />
           <img src={img} className={style.icon2} />
         </a>
       </div>
       <div className={style.action}>
-        <a href="#">
+        <a href="">
           <img src={img} className={style.icon2} />
         </a>
       </div>
       <div className={style.action}>
-        <a href="#">
+        <a href="">
+          <img src={img} className={style.icon2} />
+        </a>
+      </div>
+      <div className={style.action}>
+        <a href="">
           <img src={img} className={style.icon2} />
         </a>
       </div>
     </div>
     <div className={style.line1}>
       <div className={style.action}>
-        <a href="#">
+        <a href="">
+          <img src={img} className={style.icon2} />
+        </a>
+      </div>
+      <div className={style.action}>
+        <a href="">
           <img src={img} className={style.icon2} />
         </a>
       </div>
       <div className={style.action}>
-        <a href="#">
+        <a href="">
           <img src={img} className={style.icon2} />
         </a>
       </div>
       <div className={style.action}>
-        <a href="#">
+        <a href="">
           <img src={img} className={style.icon2} />
         </a>
       </div>
diff --git a/src/views/Body/Top/style.scss b/src/views/Body/Top/style.scss
index f751503..dde1f6c 100644
--- a/src/views/Body/Top/style.scss
+++ b/src/views/Body/Top/style.scss
@@ -1,53 +1,42 @@
 .box {
-  width: 1000px;
-  height: 200px;
+  width: 1415px;
+  height: 240px;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 30px;
+  justify-content: space-between;
+  // margin-top: 30px;
 }
 .left {
-  width: 460px;
-  height: 100%;
-  overflow: hidden;
-}
-.meter {
-  width: 2300px;
-  display: flex;
+  width: 550px;
   height: 100%;
-  // justify-content: center;
-  // align-items: center;
-  // animation: move 5 infinite;
-  // -webkit-animation-delay:5s;
 }
 .picture1 {
-  width: 460px;
-  height: 200px;
+  width: 550px;
+  height: 240px;
   background-color: rgb(200, 233, 166);
 }
 .picture2 {
-  width: 460px;
-  height: 200px;
+  width: 550px;
+  height: 240px;
   background-color: rgb(105, 133, 209);
 }
 .picture3 {
-  width: 460px;
-  height: 200px;
+  width: 550px;
+  height: 240px;
   background-color: rgb(48, 137, 165);
 }
 .picture4 {
-  width: 460px;
-  height: 200px;
+  width: 550px;
+  height: 240px;
   background-color: rgb(204, 98, 138);
 }
 .picture5 {
-  width: 460px;
-  height: 200px;
+  width: 550px;
+  height: 240px;
   background-color: rgb(204, 94, 94);
 }
 .right {
-  height: 200px;
-  width: 540px;
+  height: 240px;
+  width: 855px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -58,27 +47,15 @@
   align-items: center;
 }
 .action {
-  width: 170px;
-  height: 95px;
+  width: 206px;
+  height: 115px;
   margin-left: 10px;
   background-color: black;
 }
-.hidden{
-  width: 170px;
-  height: 95px;
-  overflow: hidden;
-}
-.icon1 {
-  width: 460px;
-  height: 200px;
-}
 .icon2 {
-  width: 170px;
-  height: 95px;
+  width: 206px;
+  height: 115px;
 }
-// :hover.icon2{
-//   opacity:0.5;
-// }
 p {
   position: absolute;
   top: 20px;
diff --git a/src/views/Body/index.tsx b/src/views/Body/index.tsx
index 8b00a97..afac3db 100644
--- a/src/views/Body/index.tsx
+++ b/src/views/Body/index.tsx
@@ -1,12 +1,13 @@
 import * as React from "react";
 import * as style from "./style.scss";
-import DianShiJu from "./DianShiJu";
+import First from "./First";
 import Top from "./Top";
+import Second from "./Second";
 
-export default function Body(){
+export default function Body() {
   return <div className={style.a}>
     <Top />
-    <DianShiJu />
- 
+    <First />
+    <Second />
   </div>
 }
\ No newline at end of file
diff --git a/src/views/Body/style.scss b/src/views/Body/style.scss
index e780822..b415890 100644
--- a/src/views/Body/style.scss
+++ b/src/views/Body/style.scss
@@ -1,5 +1,5 @@
 .a{
     background-color:white;
-    width:1000px;
+    width:1415px;
     margin: 0 auto;
 }
\ No newline at end of file
diff --git a/src/views/Header/Top/Left/BaiNian/index.tsx b/src/views/Header/Top/Left/BaiNian/index.tsx
index b646cd4..5dc56b0 100644
--- a/src/views/Header/Top/Left/BaiNian/index.tsx
+++ b/src/views/Header/Top/Left/BaiNian/index.tsx
@@ -6,9 +6,9 @@ export default function BaiNian() {
   return (
   <div className={style.box}>
     <div className={style.minBox}>
-      <a href="#" className={style.moveCentext}>拜年祭</a>
-      <a href="#" className={style.moveCentext}><img src={img} className={style.move}/></a>
-      <a href="#" className={style.moveCentext}>拜年祭</a>
+      <a href="" className={style.moveCentext}>拜年祭</a>
+      <a href="" className={style.moveCentext}><img src={img} className={style.move}/></a>
+      <a href="" className={style.moveCentext}>拜年祭</a>
     </div>
   </div>
   )
diff --git a/src/views/Header/Top/Left/index.tsx b/src/views/Header/Top/Left/index.tsx
index c828c98..1e4377d 100644
--- a/src/views/Header/Top/Left/index.tsx
+++ b/src/views/Header/Top/Left/index.tsx
@@ -6,14 +6,14 @@ import BaiNian from "./BaiNian";
 
 export default function Left(){
     return <div className={style.a}>
-        <a href="#" className={style.b}>主站</a>
-        <a href="#" className={style.b}>番剧</a>
+        <a href="" className={style.b}>主站</a>
+        <a href="" className={style.b}>番剧</a>
         <Game />
-        <a href="#" className={style.b}>直播</a>
-        <a href="#" className={style.b}>会员购</a>
+        <a href="" className={style.b}>直播</a>
+        <a href="" className={style.b}>会员购</a>
         <Cartoon />
-        <a href="#" className={style.b}>赛事</a>
+        <a href="" className={style.b}>赛事</a>
         <BaiNian />
-        <a href="#" className={style.b}>下载app</a>
+        <a href="" className={style.b}>下载app</a>
     </div>
 }
\ No newline at end of file
diff --git a/src/views/Header/Top/Right/OpenGitHub/index.tsx b/src/views/Header/Top/Right/OpenGitHub/index.tsx
new file mode 100644
index 0000000..dac4536
--- /dev/null
+++ b/src/views/Header/Top/Right/OpenGitHub/index.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { Icon } from "antd";
+import * as style from "./style.scss";
+
+export default function OpenGitHub (){
+  return <a href="https://github.com/hamono/bilibili_text" className={style.box}>
+    <Icon type="select" className={style.icon} />
+    <div className={style.place} >Github</div>
+  </a>
+}
\ No newline at end of file
diff --git a/src/views/Header/Top/Right/OpenGitHub/style.scss b/src/views/Header/Top/Right/OpenGitHub/style.scss
new file mode 100644
index 0000000..6df344d
--- /dev/null
+++ b/src/views/Header/Top/Right/OpenGitHub/style.scss
@@ -0,0 +1,19 @@
+.box{
+  width:100px;
+  height: 30px;
+  border: 1px solid rgb(144, 144, 144);
+  display: flex;
+  border-radius:5px;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 20px;
+  padding: 0 5px;
+}
+.place{
+  color:rgb(144, 144, 144);
+  font-size: 20px;
+}
+.icon{
+  color:rgb(144, 144, 144);
+  font-size: 20px;
+}
\ No newline at end of file
diff --git a/src/views/Header/Top/Right/index.tsx b/src/views/Header/Top/Right/index.tsx
index 2a0160a..61cae8c 100644
--- a/src/views/Header/Top/Right/index.tsx
+++ b/src/views/Header/Top/Right/index.tsx
@@ -1,32 +1,34 @@
 import * as React from 'react';
 import * as style from './style.scss';
 import Upload from './Upload';
+import OpenGitHub from './OpenGitHub';
 
 export default function Right() {
   return (
     <div className={style.a}>
-      <a href="#" className={style.b}>
+      <a href="" className={style.b}>
         图片
       </a>
-      <a href="#" className={style.b}>
+      <a href="" className={style.b}>
         消息
       </a>
-      <a href="#" className={style.b}>
+      <a href="" className={style.b}>
         动态
       </a>
-      <a href="#" className={style.b}>
+      <a href="" className={style.b}>
         收藏
       </a>
-      <a href="#" className={style.b}>
+      <a href="" className={style.b}>
         历史
       </a>
-      <a href="#" className={style.b}>
+      <a href="" className={style.b}>
         大会员
       </a>
-      <a href="#" className={style.b}>
+      <a href="" className={style.b}>
         创作中心
       </a>
       <Upload />
+      <OpenGitHub />
     </div>
   );
 }
diff --git a/src/views/Header/Top/Right/style.scss b/src/views/Header/Top/Right/style.scss
index 604cb8d..9f7e6fa 100644
--- a/src/views/Header/Top/Right/style.scss
+++ b/src/views/Header/Top/Right/style.scss
@@ -1,6 +1,6 @@
 .a{
     // background-color: crimson;
-    width:450px;
+    width:550px;
     display: flex;
     align-items: center;
 }
diff --git a/src/views/Up/Center/index.tsx b/src/views/Up/Center/index.tsx
index e820f72..afaf75c 100644
--- a/src/views/Up/Center/index.tsx
+++ b/src/views/Up/Center/index.tsx
@@ -3,28 +3,28 @@ import * as style from "./style.scss";
 
 export default function Center(){
     return <div className={style.a}><div className={style.c}>
-        <a href="#" className={style.b}>动画</a>
-        <a href="#" className={style.b}>番剧</a>
+        <a href="" className={style.b}>动画</a>
+        <a href="" className={style.b}>番剧</a>
 </div><div className={style.c}>
-        <a href="#" className={style.b}>音乐</a>
-        <a href="#" className={style.b}>国创</a>
+        <a href="" className={style.b}>音乐</a>
+        <a href="" className={style.b}>国创</a>
      </div>   <div className={style.c}>
-        <a href="#" className={style.b}>舞蹈</a>
-        <a href="#" className={style.b}>游戏</a>
+        <a href="" className={style.b}>舞蹈</a>
+        <a href="" className={style.b}>游戏</a>
    </div>     <div className={style.c}>
-        <a href="#" className={style.b}>科技</a>
-        <a href="#" className={style.b}>数码</a>
+        <a href="" className={style.b}>科技</a>
+        <a href="" className={style.b}>数码</a>
       </div>  <div className={style.c}>
-        <a href="#" className={style.b}>生活</a>
-        <a href="#" className={style.b}>鬼畜</a>
+        <a href="" className={style.b}>生活</a>
+        <a href="" className={style.b}>鬼畜</a>
      </div>   <div className={style.c}>
-        <a href="#" className={style.b}>时尚</a>
-        <a href="#" className={style.b}>广告</a>
+        <a href="" className={style.b}>时尚</a>
+        <a href="" className={style.b}>广告</a>
      </div>   <div className={style.c}>
-        <a href="#" className={style.b}>娱乐</a>
-        <a href="#" className={style.b}>影视</a>
+        <a href="" className={style.b}>娱乐</a>
+        <a href="" className={style.b}>影视</a>
       </div>  <div className={style.c}>
-        <a href="#" className={style.b}>放映厅</a>
-        <a href="#" className={style.b}>更多 ></a></div>
+        <a href="" className={style.b}>放映厅</a>
+        <a href="" className={style.b}>更多 ></a></div>
     </div>
 }
diff --git a/src/views/Up/Left/index.tsx b/src/views/Up/Left/index.tsx
index f01a0cd..5baf808 100644
--- a/src/views/Up/Left/index.tsx
+++ b/src/views/Up/Left/index.tsx
@@ -7,11 +7,11 @@ import nmg from "./upleft3.png";
 export default function Left(){
     return <div className={style.a}>
         <div className={style.e}>
-        <a href="#" className={style.d}> <img src={img}/></a> <a href="#" className={style.b}>首页</a>
+        <a href="" className={style.d}> <img src={img}/></a> <a href="" className={style.b}>首页</a>
         </div ><div className={style.c}>
-        <a href="#" className={style.d}><img src={hhg}/></a><a href="#" className={style.b}>动态</a>
+        <a href="" className={style.d}><img src={hhg}/></a><a href="" className={style.b}>动态</a>
         </div><div className={style.c}>
-        <a href="#" className={style.d}><img src={nmg}/></a><a href="#" className={style.b}>排行榜</a>
+        <a href="" className={style.d}><img src={nmg}/></a><a href="" className={style.b}>排行榜</a>
 </div>
     </div>
 }
\ No newline at end of file
diff --git a/src/views/Up/Right/index.tsx b/src/views/Up/Right/index.tsx
index 002def6..930660a 100644
--- a/src/views/Up/Right/index.tsx
+++ b/src/views/Up/Right/index.tsx
@@ -3,11 +3,11 @@ import * as style from "./style.scss"
 
 export default function Right(){
     return <div className={style.a}><div className={style.c}>
-        <a href="#" className={style.b}>专栏</a>
-        <a href="#" className={style.b}>直播</a></div><div className={style.c}>
-        <a href="#" className={style.b}>小黑屋</a>
-        <a href="#" className={style.b}>专题</a></div><div className={style.c} >
-        <a href="#" className={style.b}>活动</a>
-        <a href="#" className={style.b}>赛事</a></div>
+        <a href="" className={style.b}>专栏</a>
+        <a href="" className={style.b}>直播</a></div><div className={style.c}>
+        <a href="" className={style.b}>小黑屋</a>
+        <a href="" className={style.b}>专题</a></div><div className={style.c} >
+        <a href="" className={style.b}>活动</a>
+        <a href="" className={style.b}>赛事</a></div>
     </div>
 }
\ No newline at end of file
diff --git a/src/views/Up/style.scss b/src/views/Up/style.scss
index 9c51866..4e9061a 100644
--- a/src/views/Up/style.scss
+++ b/src/views/Up/style.scss
@@ -4,5 +4,5 @@
     justify-content: space-between;
     align-items: center;
     margin: 0 auto;
-    width: 79%;
+    width: 1415px;
   }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 3b9c457..4e6c21a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -108,10 +108,10 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/react@^16.10":
-  version "16.9.0"
-  resolved "https://registry.npm.taobao.org/@types/react/download/@types/react-16.9.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Freact%2Fdownload%2F%40types%2Freact-16.9.0.tgz#27434f16d889a335eb4626d1f1e67eda54039e5b"
-  integrity sha1-J0NPFtiJozXrRibR8eZ+2lQDnls=
+"@types/react@^16.9.0":
+  version "16.9.19"
+  resolved "https://registry.npm.taobao.org/@types/react/download/@types/react-16.9.19.tgz#c842aa83ea490007d29938146ff2e4d9e4360c40"
+  integrity sha1-yEKqg+pJAAfSmTgUb/Lk2eQ2DEA=
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
@@ -2824,7 +2824,7 @@ getpass@^0.1.1:
 
 gh-pages@^2.2.0:
   version "2.2.0"
-  resolved "https://registry.npm.taobao.org/gh-pages/download/gh-pages-2.2.0.tgz#74ebeaca8d2b9a11279dcbd4a39ddfff3e6caa24"
+  resolved "https://registry.npm.taobao.org/gh-pages/download/gh-pages-2.2.0.tgz?cache=0&sync_timestamp=1578363672155&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgh-pages%2Fdownload%2Fgh-pages-2.2.0.tgz#74ebeaca8d2b9a11279dcbd4a39ddfff3e6caa24"
   integrity sha1-dOvqyo0rmhEnncvUo53f/z5sqiQ=
   dependencies:
     async "^2.6.1"