index 总接口数

liuqimichale
1 parent 3fc834b0
Showing 5 changed files with 105 additions and 4 deletions
css/libCss/common.css
image/circle-animation.png
image/link-con-main-1.png
image/link-con-main-2.png
index.html
@@ -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;
 }
@@ -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>