From de45b5c3358efd9688920a1c76ebb338fe28f040 Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Mon, 20 Nov 2017 17:33:57 +0800
Subject: [PATCH] index 总接口数

---
 css/libCss/common.css      | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 image/circle-animation.png | Bin 0 -> 2404 bytes
 image/link-con-main-1.png  | Bin 0 -> 9357 bytes
 image/link-con-main-2.png  | Bin 0 -> 14966 bytes
 index.html                 | 33 +++++++++++++++++++++++++++++----
 5 files changed, 105 insertions(+), 4 deletions(-)
 create mode 100644 image/circle-animation.png
 create mode 100644 image/link-con-main-1.png
 create mode 100644 image/link-con-main-2.png

diff --git a/css/libCss/common.css b/css/libCss/common.css
index 99348cf..bc5fb1a 100644
--- a/css/libCss/common.css
+++ b/css/libCss/common.css
@@ -27,6 +27,9 @@ ul,li,ol{
 .boder-raduis5{
     border-radius: 5px;
 }
+.border-bottom1{
+   border-bottom: 1px solid #e5e5e5;
+}
 input,button,select,textarea{outline:none;}
 /*头部--------------------------------------------------*/
 header{
@@ -144,8 +147,81 @@ section{
     background-color: #fff;
     float: left;
 }
+.link-con-bottom-wrap{
+    width: 734px;
+    background-color: #fff;
+    height: 304px;
+    margin-top: 32px;
+}
+.link-con-title{
+    height: 46px;
+    padding-left: 24px;
+    line-height: 46px;
+}
+.link-con-title span{
+    padding-left: 11px;
+    border-left: 3px solid #2abb9b;
+    color: #000;
+    font-size: 16px;
+}
+.link-con-main{
+    height: 198px;
+}
+.link-con-main-1{
+    position: relative;
+    text-align: center;
+    background: url("../../image/link-con-main-1.png") no-repeat center center;
+}
+.circle-animation{
+    position: absolute;
+    width: 140px;
+    height: 140px;
+    /*border-radius: 50%;*/
+    background: url("../../image/circle-animation.png") no-repeat 0 0;
+    top:29px;
+    left:105px;
+    animation:circle 5s infinite linear;
+    -webkit-animation:circle 5s infinite linear;
+    -moz-animation:circle 5s infinite linear;
+}
+@keyframes circle{
+    0%{ transform:rotate(0deg); }
+    100%{ transform:rotate(360deg); }
+}
+@-webkit-keyframes circle{
+    0%{ transform:rotate(0deg); }
+    100%{ transform:rotate(360deg); }
+}
+@-moz-keyframes circle{
+    0%{ transform:rotate(0deg); }
+    100%{ transform:rotate(360deg); }
+}
+.link-con-main-1 span{
+    display: inline-block;
+    width: 100%;
+}
+.link-con-main-1 span:nth-of-type(1){
+    font-size: 52px;
+    color: #1f2b3d;
+    padding-top: 50px;
+}
+.link-con-main-2{
+    background: url("../../image/link-con-main-2.png") no-repeat center center;
+}
+.link-con-main-2 span{
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+}
+.link-con-main-2 span:nth-of-type(1){
+    font-size: 52px;
+    padding-top: 50px;
+}
 .link-con-right{
     width: 336px;
+    height: 581px;
+    background-color: #fff;
 }
 
 
diff --git a/image/circle-animation.png b/image/circle-animation.png
new file mode 100644
index 0000000..2c9997e
Binary files /dev/null and b/image/circle-animation.png differ
diff --git a/image/link-con-main-1.png b/image/link-con-main-1.png
new file mode 100644
index 0000000..c560e15
Binary files /dev/null and b/image/link-con-main-1.png differ
diff --git a/image/link-con-main-2.png b/image/link-con-main-2.png
new file mode 100644
index 0000000..210061c
Binary files /dev/null and b/image/link-con-main-2.png differ
diff --git a/index.html b/index.html
index bd3c339..57e4783 100644
--- a/index.html
+++ b/index.html
@@ -52,12 +52,37 @@
             <div class="link-con">
                 <div class="link-con-1">
                     <div class="link-con-left float-left">
-                        <div class="link-con-left-wrap marginright32 boder-raduis5"></div>
-                        <div class="link-con-left-wrap boder-raduis5"></div>
+                        <div class="link-con-left-wrap marginright32 boder-raduis5">
+                            <div class="link-con-title border-bottom1">
+                                <span>总接口数</span>
+                            </div>
+                            <div class="link-con-main-1 link-con-main">
+                                <span>560</span>
+                                <span>总计(个)</span>
+                                <div class="circle-animation"></div>
+                            </div>
+                        </div>
+                        <div class="link-con-left-wrap boder-raduis5">
+                            <div class="link-con-title border-bottom1">
+                                <span>今日活跃接口数</span>
+                            </div>
+                            <div class="link-con-main-2 link-con-main">
+                                <span>56</span>
+                                <span>总计(个)</span>
+                            </div>
+                        </div>
                         <div class="clearfix"></div>
-                        <div></div>
+                        <div class="link-con-bottom-wrap boder-raduis5">
+                            <div class="link-con-title">
+                                <span>接入接口统计</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="link-con-right float-left boder-raduis5">
+                        <div class="link-con-title border-bottom1">
+                            <span>调用排行榜</span>
+                        </div>
                     </div>
-                    <div class="link-con-right float-left">2</div>
                 </div>
 
 
--
libgit2 0.21.4