Commit 85c09b4e6f968ed045f25e25f5726fa74f093298
1 parent
99106785
index 调用排行榜
Showing
3 changed files
with
56 additions
and
12 deletions
css/libCss/common.css
| @@ -174,15 +174,14 @@ section{ | @@ -174,15 +174,14 @@ section{ | ||
| 174 | } | 174 | } |
| 175 | .circle-animation{ | 175 | .circle-animation{ |
| 176 | position: absolute; | 176 | position: absolute; |
| 177 | - width: 140px; | ||
| 178 | - height: 140px; | ||
| 179 | - /*border-radius: 50%;*/ | ||
| 180 | - background: url("../../image/circle-animation.png") no-repeat 0 0; | ||
| 181 | - top:29px; | ||
| 182 | - left:105px; | ||
| 183 | - animation:circle 5s infinite linear; | ||
| 184 | - -webkit-animation:circle 5s infinite linear; | ||
| 185 | - -moz-animation:circle 5s infinite linear; | 177 | + width: 180px; |
| 178 | + height: 180px; | ||
| 179 | + background: url(../../image/circle-animation.png) no-repeat 0 0; | ||
| 180 | + top: 9px; | ||
| 181 | + left: 85px; | ||
| 182 | + animation: circle 5s infinite linear; | ||
| 183 | + -webkit-animation: circle 5s infinite linear; | ||
| 184 | + -moz-animation: circle 5s infinite linear; | ||
| 186 | } | 185 | } |
| 187 | @keyframes circle{ | 186 | @keyframes circle{ |
| 188 | 0%{ transform:rotate(0deg); } | 187 | 0%{ transform:rotate(0deg); } |
| @@ -230,9 +229,41 @@ section{ | @@ -230,9 +229,41 @@ section{ | ||
| 230 | } | 229 | } |
| 231 | .ranking-list{ | 230 | .ranking-list{ |
| 232 | height: 534px; | 231 | height: 534px; |
| 232 | + background-color: #f9f9f9; | ||
| 233 | } | 233 | } |
| 234 | .ranking-list li{ | 234 | .ranking-list li{ |
| 235 | + padding-left: 24px; | ||
| 236 | + height: 56px; | ||
| 237 | + line-height: 56px; | ||
| 235 | 238 | ||
| 236 | } | 239 | } |
| 237 | - | 240 | +.ranking-list li:nth-of-type(odd){ |
| 241 | + background-color: #fff; | ||
| 242 | +} | ||
| 243 | +.ranking-list li div:nth-of-type(1){ | ||
| 244 | + float: left; | ||
| 245 | + width:42px; | ||
| 246 | + height: 56px; | ||
| 247 | + margin-right: 12px; | ||
| 248 | + background: url("../../image/ranking-icon.png") no-repeat 0 14px; | ||
| 249 | + color: #fff; | ||
| 250 | + font-size: 16px; | ||
| 251 | + text-align: center; | ||
| 252 | + vertical-align:text-top; | ||
| 253 | +} | ||
| 254 | +.ranking-list li div:nth-of-type(2){ | ||
| 255 | + color: #1f2b3d; | ||
| 256 | + float: left; | ||
| 257 | + width: 200px; | ||
| 258 | + overflow: hidden; | ||
| 259 | + white-space: nowrap; | ||
| 260 | + text-overflow: ellipsis; | ||
| 261 | + font-size: 14px; | ||
| 262 | + margin-right: 10px; | ||
| 263 | +} | ||
| 264 | +.ranking-list li div:nth-of-type(3){ | ||
| 265 | + color: #1f2b3d; | ||
| 266 | + font-size: 14px; | ||
| 267 | + float: left; | ||
| 268 | +} | ||
| 238 | /*API别表----------------------------------------*/ | 269 | /*API别表----------------------------------------*/ |
| 239 | \ No newline at end of file | 270 | \ No newline at end of file |
image/ranking-icon.png
0 → 100644
1.26 KB
index.html
| @@ -84,8 +84,21 @@ | @@ -84,8 +84,21 @@ | ||
| 84 | <span>调用排行榜</span> | 84 | <span>调用排行榜</span> |
| 85 | </div> | 85 | </div> |
| 86 | <ul class="ranking-list"> | 86 | <ul class="ranking-list"> |
| 87 | - <li>1</li> | ||
| 88 | - <li>2</li> | 87 | + <li> |
| 88 | + <div>1</div> | ||
| 89 | + <div title="任你停微信支付接口">任你停微信支付接口任你停微信支付接口</div> | ||
| 90 | + <div>99</div> | ||
| 91 | + </li> | ||
| 92 | + <li> | ||
| 93 | + <div>1</div> | ||
| 94 | + <div title="任你停微信支付接口">任你停微信支付接口任你停微信支付接口</div> | ||
| 95 | + <div>99</div> | ||
| 96 | + </li> | ||
| 97 | + <li> | ||
| 98 | + <div>1</div> | ||
| 99 | + <div title="任你停微信支付接口">任你停微信支付接口任你停微信支付接口</div> | ||
| 100 | + <div>99</div> | ||
| 101 | + </li> | ||
| 89 | </ul> | 102 | </ul> |
| 90 | </div> | 103 | </div> |
| 91 | </div> | 104 | </div> |