second-finished

TECHF5VE · Jan 27, 2020 · 1f303ee · 1f303ee
1 parent caf84e2
commit 1f303ee
Show file tree

Hide file tree

Showing 18 changed files with 327 additions and 8 deletions.
diff --git a/src/views/Body/Second/Left/Body/Compent/img1.jpg b/src/views/Body/Second/Left/Body/Compent/img1.jpg
diff --git a/src/views/Body/Second/Left/Body/Compent/img2.jpg b/src/views/Body/Second/Left/Body/Compent/img2.jpg
diff --git a/src/views/Body/Second/Left/Body/Compent/img3.jpg b/src/views/Body/Second/Left/Body/Compent/img3.jpg
diff --git a/src/views/Body/Second/Left/Body/Compent/index.tsx 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>
+
+}
diff --git a/src/views/Body/Second/Left/Body/Compent/style.scss 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
@@ -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>
+
+}
diff --git a/src/views/Body/Second/Left/Body/style.scss 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;
+}
diff --git a/src/views/Body/Second/Left/index.tsx 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>
+}
diff --git a/src/views/Body/Second/Left/top/index.tsx 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>
+}
diff --git a/src/views/Body/Second/Left/top/style.scss 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;
+}
diff --git a/src/views/Body/Second/Right/List/index.tsx 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>
+}
diff --git a/src/views/Body/Second/Right/List/style.scss 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;
+}
diff --git a/src/views/Body/Second/Right/index.tsx 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>
+}
diff --git a/src/views/Body/Second/Right/style.scss 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;
+}
diff --git a/src/views/Body/Second/index.tsx 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>
+}
diff --git a/src/views/Body/Second/style.scss b/src/views/Body/Second/style.scss
@@ -0,0 +1,5 @@
+.main{
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
diff --git 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 "./First";
+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>
 }
diff --git a/src/views/Header/Top/Right/OpenGitHub/style.scss b/src/views/Header/Top/Right/OpenGitHub/style.scss
@@ -1,15 +1,19 @@
 .box{
-  width:80px;
+  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;
-  margin-top: 5px;
+  padding: 0 5px;
 }
 .place{
-  color:black;
+  color:rgb(144, 144, 144);
   font-size: 20px;
 }
 .icon{
-  color:black;
+  color:rgb(144, 144, 144);
   font-size: 20px;
 }