Merge pull request #2 from hamono/master

2

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",

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>
+
+}

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
+}

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>
+
+}

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;
+}

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>
+}

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;
+}

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>
+}

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>
+}

src/views/Body/First/Right/Center/style.scss

@@ -0,0 +1,4 @@
+.main{
+  margin-top: 10px;
+  font-size: x-small;
+}

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>
+}

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;
+}

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>
+}