1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>AdminLTE 2 | Dashboard</title> 7 <!-- Tell the browser to be responsive to screen width 告诉浏览器响应屏幕宽度--> 8 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> 9 <!-- Bootstrap 3.3.7 --> 10 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> 11 <!-- Font Awesome字体 --> 12 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"> 13 <!-- Ionicons --> 14 <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css"> 15 <!-- jvectormap --> 16 <link rel="stylesheet" href="bower_components/jvectormap/jquery-jvectormap.css"> 17 <!-- Theme style --> 18 <link rel="stylesheet" href="dist/css/AdminLTE.min.css"> 19 <!-- AdminLTE Skins. Choose a skin from the css/skins 20 folder instead of downloading all of them to reduce the load. 21 从css/中选择一个皮肤文件夹，而不是下载所有它们，以减少负载--> 22 <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css"> 23 24 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries 25 HTML5 Shim和响应。js IE8支持HTML5元素和媒体查询--> 26 <!-- WARNING: Respond.js doesn't work if you view the page via file:// 27 警告:回应。如果通过file://查看页面，js就无法工作--> 28 <!--[if lt IE 9]> 29 <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 30 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 31 <![endif]--> 32 33 <!-- Google Font谷歌字体 --> 34 <link rel="stylesheet" 35 href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> 36 </head> 37 <body class="hold-transition skin-blue sidebar-mini"> 38 <div class="wrapper"> 39 <!--顶部栏--> 40 <header class="main-header"> 41 42 <!-- Logo --> 43 <a href="index2.html" class="logo"> 44 <!-- mini logo for sidebar mini 50x50 pixels 小图标的工具条迷你50x50像素--> 45 <span class="logo-mini"><b>A</b>LT</span> 46 <!-- logo for regular state and mobile devices 普通状态和移动设备的标识--> 47 <span class="logo-lg"><b>Admin</b>LTE</span> 48 </a> 49 50 <!-- Header Navbar: style can be found in header.less 标题导航栏:风格可以在标题--> 51 <nav class="navbar navbar-static-top"> 52 <!-- Sidebar toggle button侧边栏切换按钮--> 53 <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"> 54 <span class="sr-only">Toggle navigation</span> 55 </a> 56 <!-- Navbar Right Menu导航栏右菜单 --> 57 <div class="navbar-custom-menu"> 58 <ul class="nav navbar-nav"> 59 <!-- Messages: style can be found in dropdown.less主题可体现在下拉菜单--> 60 <li class="dropdown messages-menu"> 61 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 62 <i class="fa fa-envelope-o"></i> 63 <span class="label label-success">4</span> 64 </a> 65 <ul class="dropdown-menu"> 66 <li class="header">You have 4 messages</li> 67 <li> 68 <!-- inner menu: contains the actual data内部菜单:包含实际数据 --> 69 <ul class="menu"> 70 <li><!-- start message --> 71 <a href="#"> 72 <div class="pull-left"> 73 <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> 74 </div> 75 <h4> 76 Support Team 77 <small><i class="fa fa-clock-o"></i> 5 mins</small> 78 </h4> 79 <p>Why not buy a new awesome theme?</p> 80 </a> 81 </li> 82 <!-- end message --> 83 <li> 84 <a href="#"> 85 <div class="pull-left"> 86 <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image"> 87 </div> 88 <h4> 89 AdminLTE Design Team 90 <small><i class="fa fa-clock-o"></i> 2 hours</small> 91 </h4> 92 <p>Why not buy a new awesome theme?</p> 93 </a> 94 </li> 95 <li> 96 <a href="#"> 97 <div class="pull-left"> 98 <img src="dist/img/user4-128x128.jpg" class="img-circle" alt="User Image"> 99 </div> 100 <h4> 101 Developers 102 <small><i class="fa fa-clock-o"></i> Today</small> 103 </h4> 104 <p>Why not buy a new awesome theme?</p> 105 </a> 106 </li> 107 <li> 108 <a href="#"> 109 <div class="pull-left"> 110 <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image"> 111 </div> 112 <h4> 113 Sales Department 114 <small><i class="fa fa-clock-o"></i> Yesterday</small> 115 </h4> 116 <p>Why not buy a new awesome theme?</p> 117 </a> 118 </li> 119 <li> 120 <a href="#"> 121 <div class="pull-left"> 122 <img src="dist/img/user4-128x128.jpg" class="img-circle" alt="User Image"> 123 </div> 124 <h4> 125 Reviewers 126 <small><i class="fa fa-clock-o"></i> 2 days</small> 127 </h4> 128 <p>Why not buy a new awesome theme?</p> 129 </a> 130 </li> 131 </ul> 132 </li> 133 <li class="footer"><a href="#">See All Messages</a></li> 134 </ul> 135 </li> 136 <!-- Notifications: style can be found in dropdown.less 主题可体现在下拉菜单--> 137 <li class="dropdown notifications-menu"> 138 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 139 <i class="fa fa-bell-o"></i> 140 <span class="label label-warning">10</span> 141 </a> 142 <ul class="dropdown-menu"> 143 <li class="header">You have 10 notifications</li> 144 <li> 145 <!-- inner menu: contains the actual data 包含实际数据--> 146 <ul class="menu"> 147 <li> 148 <a href="#"> 149 <i class="fa fa-users text-aqua"></i> 5 new members joined today 150 </a> 151 </li> 152 <li> 153 <a href="#"> 154 <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the 155 page and may cause design problems 156 </a> 157 </li> 158 <li> 159 <a href="#"> 160 <i class="fa fa-users text-red"></i> 5 new members joined 161 </a> 162 </li> 163 <li> 164 <a href="#"> 165 <i class="fa fa-shopping-cart text-green"></i> 25 sales made 166 </a> 167 </li> 168 <li> 169 <a href="#"> 170 <i class="fa fa-user text-red"></i> You changed your username 171 </a> 172 </li> 173 </ul> 174 </li> 175 <li class="footer"><a href="#">View all</a></li> 176 </ul> 177 </li> 178 <!-- Tasks: style can be found in dropdown.less任务栏 --> 179 <li class="dropdown tasks-menu"> 180 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 181 <i class="fa fa-flag-o"></i> 182 <span class="label label-danger">9</span> 183 </a> 184 <!--下拉的菜单--> 185 <ul class="dropdown-menu"> 186 <li class="header">You have 9 tasks</li> 187 <li> 188 <!-- inner menu: contains the actual data包含实际数据 --> 189 <ul class="menu"> 190 <li><!-- Task item 任务项--> 191 <a href="#"> 192 <h3> 193 Design some buttons 194 <small class="pull-right">20%</small> 195 </h3> 196 <div class="progress xs"> 197 <div class="progress-bar progress-bar-aqua" style=" 20%" role="progressbar" 198 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> 199 <span class="sr-only">20% Complete</span> 200 </div> 201 </div> 202 </a> 203 </li> 204 <!-- end task item结束任务项 --> 205 <li><!-- Task item 任务项--> 206 <a href="#"> 207 <h3> 208 Create a nice theme 209 <small class="pull-right">40%</small> 210 </h3> 211 <div class="progress xs"> 212 <div class="progress-bar progress-bar-green" style=" 40%" role="progressbar" 213 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> 214 <span class="sr-only">40% Complete</span> 215 </div> 216 </div> 217 </a> 218 </li> 219 <!-- end task item结束任务项 --> 220 <li><!-- Task item --> 221 <a href="#"> 222 <h3> 223 Some task I need to do 224 <small class="pull-right">60%</small> 225 </h3> 226 <div class="progress xs"> 227 <div class="progress-bar progress-bar-red" style=" 60%" role="progressbar" 228 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> 229 <span class="sr-only">60% Complete</span> 230 </div> 231 </div> 232 </a> 233 </li> 234 <!-- end task item --> 235 <li><!-- Task item --> 236 <a href="#"> 237 <h3> 238 Make beautiful transitions 239 <small class="pull-right">80%</small> 240 </h3> 241 <!--进度条--> 242 <div class="progress xs"> 243 <div class="progress-bar progress-bar-yellow" style=" 80%" role="progressbar" 244 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> 245 <span class="sr-only">80% Complete</span> 246 </div> 247 </div> 248 </a> 249 </li> 250 <!-- end task item --> 251 </ul> 252 </li> 253 <li class="footer"> 254 <a href="#">View all tasks</a> 255 </li> 256 </ul> 257 </li> 258 <!-- User Account: style can be found in dropdown.less 用户帐号--> 259 <li class="dropdown user user-menu"> 260 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 261 <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"> 262 <span class="hidden-xs">Alexander Pierce</span> 263 </a> 264 <ul class="dropdown-menu"> 265 <!-- User image 用户照片--> 266 <li class="user-header"> 267 <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> 268 269 <p> 270 Alexander Pierce - Web Developer 271 <small>Member since Nov. 2012</small> 272 </p> 273 </li> 274 <!-- Menu Body菜单主体 --> 275 <li class="user-body"> 276 <div class="row"> 277 <div class="col-xs-4 text-center"> 278 <a href="#">Followers</a> 279 </div> 280 <div class="col-xs-4 text-center"> 281 <a href="#">Sales</a> 282 </div> 283 <div class="col-xs-4 text-center"> 284 <a href="#">Friends</a> 285 </div> 286 </div> 287 <!-- /.row --> 288 </li> 289 <!-- Menu Footer菜单底部--> 290 <li class="user-footer"> 291 <div class="pull-left"> 292 <a href="#" class="btn btn-default btn-flat">Profile</a> 293 </div> 294 <div class="pull-right"> 295 <a href="#" class="btn btn-default btn-flat">Sign out</a> 296 </div> 297 </li> 298 </ul> 299 </li> 300 <!-- Control Sidebar Toggle Button控件侧栏切换按钮 --> 301 <li> 302 <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a> 303 </li> 304 </ul> 305 </div> 306 307 </nav> 308 </header> 309 <!-- Left side column. contains the logo and sidebar左侧边栏 --> 310 <aside class="main-sidebar"> 311 <!-- sidebar: style can be found in sidebar.less侧边栏:样式可以在侧边栏找到 --> 312 <section class="sidebar"> 313 <!-- Sidebar user panel侧边栏用户面板 --> 314 <div class="user-panel"> 315 <div class="pull-left image"> 316 <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> 317 </div> 318 <div class="pull-left info"> 319 <p>Alexander Pierce</p> 320 <a href="#"><i class="fa fa-circle text-success"></i> Online</a> 321 </div> 322 </div> 323 <!-- search form 搜索框--> 324 <form action="#" method="get" class="sidebar-form"> 325 <div class="input-group"> 326 <input type="text" name="q" class="form-control" placeholder="Search..."> 327 <span class="input-group-btn"> 328 <button type="submit" name="search" id="search-btn" class="btn btn-flat"> 329 <i class="fa fa-search"></i> 330 </button> 331 </span> 332 </div> 333 </form> 334 <!-- /.search form --> 335 <!-- sidebar menu: : style can be found in sidebar.less侧边菜单 --> 336 <ul class="sidebar-menu" data-widget="tree"> 337 <li class="header">MAIN NAVIGATION</li> 338 <li class="active treeview menu-open"> 339 <a href="#"> 340 <i class="fa fa-dashboard"></i> <span>Dashboard</span> 341 <span class="pull-right-container"> 342 <i class="fa fa-angle-left pull-right"></i> 343 </span> 344 </a> 345 <ul class="treeview-menu"> 346 <li><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li> 347 <li class="active"><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li> 348 </ul> 349 </li> 350 <!--抽屉--> 351 <li class="treeview"> 352 <a href="#"> 353 <i class="fa fa-files-o"></i> 354 <span>Layout Options</span> 355 <span class="pull-right-container"> 356 <span class="label label-primary pull-right">4</span> 357 </span> 358 </a> 359 <ul class="treeview-menu"> 360 <li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li> 361 <li><a href="pages/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li> 362 <li><a href="pages/layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li> 363 <li><a href="pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li> 364 </ul> 365 </li> 366 <li> 367 <a href="pages/widgets.html"> 368 <i class="fa fa-th"></i> <span>Widgets</span> 369 <span class="pull-right-container"> 370 <small class="label pull-right bg-green">new</small> 371 </span> 372 </a> 373 </li> 374 <li class="treeview"> 375 <a href="#"> 376 <i class="fa fa-pie-chart"></i> 377 <span>Charts</span> 378 <span class="pull-right-container"> 379 <i class="fa fa-angle-left pull-right"></i> 380 </span> 381 </a> 382 <ul class="treeview-menu"> 383 <li><a href="pages/charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li> 384 <li><a href="pages/charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li> 385 <li><a href="pages/charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li> 386 <li><a href="pages/charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li> 387 </ul> 388 </li> 389 <li class="treeview"> 390 <a href="#"> 391 <i class="fa fa-laptop"></i> 392 <span>UI Elements</span> 393 <span class="pull-right-container"> 394 <i class="fa fa-angle-left pull-right"></i> 395 </span> 396 </a> 397 <ul class="treeview-menu"> 398 <li><a href="pages/UI/general.html"><i class="fa fa-circle-o"></i> General</a></li> 399 <li><a href="pages/UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li> 400 <li><a href="pages/UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li> 401 <li><a href="pages/UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li> 402 <li><a href="pages/UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li> 403 <li><a href="pages/UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li> 404 </ul> 405 </li> 406 <li class="treeview"> 407 <a href="#"> 408 <i class="fa fa-edit"></i> <span>Forms</span> 409 <span class="pull-right-container"> 410 <i class="fa fa-angle-left pull-right"></i> 411 </span> 412 </a> 413 <ul class="treeview-menu"> 414 <li><a href="pages/forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li> 415 <li><a href="pages/forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li> 416 <li><a href="pages/forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li> 417 </ul> 418 </li> 419 <li class="treeview"> 420 <a href="#"> 421 <i class="fa fa-table"></i> <span>Tables</span> 422 <span class="pull-right-container"> 423 <i class="fa fa-angle-left pull-right"></i> 424 </span> 425 </a> 426 <ul class="treeview-menu"> 427 <li><a href="pages/tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li> 428 <li><a href="pages/tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li> 429 </ul> 430 </li> 431 <li> 432 <a href="pages/calendar.html"> 433 <i class="fa fa-calendar"></i> <span>Calendar</span> 434 <span class="pull-right-container"> 435 <small class="label pull-right bg-red">3</small> 436 <small class="label pull-right bg-blue">17</small> 437 </span> 438 </a> 439 </li> 440 <li> 441 <a href="pages/mailbox/mailbox.html"> 442 <i class="fa fa-envelope"></i> <span>Mailbox</span> 443 <span class="pull-right-container"> 444 <small class="label pull-right bg-yellow">12</small> 445 <small class="label pull-right bg-green">16</small> 446 <small class="label pull-right bg-red">5</small> 447 </span> 448 </a> 449 </li> 450 <li class="treeview"> 451 <a href="#"> 452 <i class="fa fa-folder"></i> <span>Examples</span> 453 <span class="pull-right-container"> 454 <i class="fa fa-angle-left pull-right"></i> 455 </span> 456 </a> 457 <ul class="treeview-menu"> 458 <li><a href="pages/examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li> 459 <li><a href="pages/examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li> 460 <li><a href="pages/examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li> 461 <li><a href="pages/examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li> 462 <li><a href="pages/examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li> 463 <li><a href="pages/examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li> 464 <li><a href="pages/examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li> 465 <li><a href="pages/examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li> 466 <li><a href="pages/examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li> 467 </ul> 468 </li> 469 <li class="treeview"> 470 <a href="#"> 471 <i class="fa fa-share"></i> <span>Multilevel</span> 472 <span class="pull-right-container"> 473 <i class="fa fa-angle-left pull-right"></i> 474 </span> 475 </a> 476 <ul class="treeview-menu"> 477 <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li> 478 <li class="treeview"> 479 <a href="#"><i class="fa fa-circle-o"></i> Level One 480 <span class="pull-right-container"> 481 <i class="fa fa-angle-left pull-right"></i> 482 </span> 483 </a> 484 <ul class="treeview-menu"> 485 <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li> 486 <li class="treeview"> 487 <a href="#"><i class="fa fa-circle-o"></i> Level Two 488 <span class="pull-right-container"> 489 <i class="fa fa-angle-left pull-right"></i> 490 </span> 491 </a> 492 <ul class="treeview-menu"> 493 <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li> 494 <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li> 495 </ul> 496 </li> 497 </ul> 498 </li> 499 <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li> 500 </ul> 501 </li> 502 <li><a href="https://adminlte.io/docs"><i class="fa fa-book"></i> <span>Documentation</span></a></li> 503 <li class="header">LABELS</li> 504 <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li> 505 <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li> 506 <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li> 507 </ul> 508 </section> 509 <!-- /.sidebar --> 510 </aside> 511 512 <!-- Content Wrapper. Contains page content内容包装器。包含页面内容 --> 513 <div class="content-wrapper"> 514 <!-- Content Header (Page header)内容标题 --> 515 <section class="content-header"> 516 <h1> 517 Dashboard 518 <small>Version 2.0</small> 519 </h1> 520 <ol class="breadcrumb"> 521 <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> 522 <li class="active">Dashboard</li> 523 </ol> 524 </section> 525 526 <!-- Main content主要内容 --> 527 <section class="content"> 528 <!-- Info boxes 信息框--> 529 <div class="row"> 530 <div class="col-md-3 col-sm-6 col-xs-12"> 531 <div class="info-box"> 532 <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span> 533 534 <div class="info-box-content"> 535 <span class="info-box-text">CPU Traffic</span> 536 <span class="info-box-number">90<small>%</small></span> 537 </div> 538 <!-- /.info-box-content --> 539 </div> 540 <!-- /.info-box --> 541 </div> 542 <!-- /.col --> 543 <div class="col-md-3 col-sm-6 col-xs-12"> 544 <div class="info-box"> 545 <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span> 546 547 <div class="info-box-content"> 548 <span class="info-box-text">Likes</span> 549 <span class="info-box-number">41,410</span> 550 </div> 551 <!-- /.info-box-content --> 552 </div> 553 <!-- /.info-box --> 554 </div> 555 <!-- /.col --> 556 557 <!-- fix for small devices only只修复小型设备 --> 558 <div class="clearfix visible-sm-block"></div> 559 560 <div class="col-md-3 col-sm-6 col-xs-12"> 561 <div class="info-box"> 562 <span class="info-box-icon bg-green"><i class="ion ion-ios-cart-outline"></i></span> 563 564 <div class="info-box-content"> 565 <span class="info-box-text">Sales</span> 566 <span class="info-box-number">760</span> 567 </div> 568 <!-- /.info-box-content --> 569 </div> 570 <!-- /.info-box --> 571 </div> 572 <!-- /.col --> 573 <div class="col-md-3 col-sm-6 col-xs-12"> 574 <div class="info-box"> 575 <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span> 576 577 <div class="info-box-content"> 578 <span class="info-box-text">New Members</span> 579 <span class="info-box-number">2,000</span> 580 </div> 581 <!-- /.info-box-content --> 582 </div> 583 <!-- /.info-box --> 584 </div> 585 <!-- /.col --> 586 </div> 587 <!-- /.row --> 588 589 <div class="row"> 590 <div class="col-md-12"> 591 <div class="box"> 592 <div class="box-header with-border"> 593 <h3 class="box-title">Monthly Recap Report</h3> 594 595 <div class="box-tools pull-right"> 596 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> 597 </button> 598 <div class="btn-group"> 599 <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"> 600 <i class="fa fa-wrench"></i></button> 601 <ul class="dropdown-menu" role="menu"> 602 <li><a href="#">Action</a></li> 603 <li><a href="#">Another action</a></li> 604 <li><a href="#">Something else here</a></li> 605 <li class="divider"></li> 606 <li><a href="#">Separated link</a></li> 607 </ul> 608 </div> 609 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> 610 </div> 611 </div> 612 <!-- /.box-header --> 613 <div class="box-body"> 614 <div class="row"> 615 <div class="col-md-8"> 616 <p class="text-center"> 617 <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong> 618 </p> 619 620 <div class="chart"> 621 <!-- Sales Chart Canvas --> 622 <canvas id="salesChart" style="height: 180px;"></canvas> 623 </div> 624 <!-- /.chart-responsive --> 625 </div> 626 <!-- /.col --> 627 <div class="col-md-4"> 628 <p class="text-center"> 629 <strong>Goal Completion</strong> 630 </p> 631 632 <div class="progress-group"> 633 <span class="progress-text">Add Products to Cart</span> 634 <span class="progress-number"><b>160</b>/200</span> 635 636 <div class="progress sm"> 637 <div class="progress-bar progress-bar-aqua" style=" 80%"></div> 638 </div> 639 </div> 640 <!-- /.progress-group --> 641 <div class="progress-group"> 642 <span class="progress-text">Complete Purchase</span> 643 <span class="progress-number"><b>310</b>/400</span> 644 645 <div class="progress sm"> 646 <div class="progress-bar progress-bar-red" style=" 80%"></div> 647 </div> 648 </div> 649 <!-- /.progress-group --> 650 <div class="progress-group"> 651 <span class="progress-text">Visit Premium Page</span> 652 <span class="progress-number"><b>480</b>/800</span> 653 654 <div class="progress sm"> 655 <div class="progress-bar progress-bar-green" style=" 80%"></div> 656 </div> 657 </div> 658 <!-- /.progress-group --> 659 <div class="progress-group"> 660 <span class="progress-text">Send Inquiries</span> 661 <span class="progress-number"><b>250</b>/500</span> 662 663 <div class="progress sm"> 664 <div class="progress-bar progress-bar-yellow" style=" 80%"></div> 665 </div> 666 </div> 667 <!-- /.progress-group --> 668 </div> 669 <!-- /.col --> 670 </div> 671 <!-- /.row --> 672 </div> 673 <!-- ./box-body --> 674 <div class="box-footer"> 675 <div class="row"> 676 <div class="col-sm-3 col-xs-6"> 677 <div class="description-block border-right"> 678 <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 17%</span> 679 <h5 class="description-header">$35,210.43</h5> 680 <span class="description-text">TOTAL REVENUE</span> 681 </div> 682 <!-- /.description-block --> 683 </div> 684 <!-- /.col --> 685 <div class="col-sm-3 col-xs-6"> 686 <div class="description-block border-right"> 687 <span class="description-percentage text-yellow"><i class="fa fa-caret-left"></i> 0%</span> 688 <h5 class="description-header">$10,390.90</h5> 689 <span class="description-text">TOTAL COST</span> 690 </div> 691 <!-- /.description-block --> 692 </div> 693 <!-- /.col --> 694 <div class="col-sm-3 col-xs-6"> 695 <div class="description-block border-right"> 696 <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 20%</span> 697 <h5 class="description-header">$24,813.53</h5> 698 <span class="description-text">TOTAL PROFIT</span> 699 </div> 700 <!-- /.description-block --> 701 </div> 702 <!-- /.col --> 703 <div class="col-sm-3 col-xs-6"> 704 <div class="description-block"> 705 <span class="description-percentage text-red"><i class="fa fa-caret-down"></i> 18%</span> 706 <h5 class="description-header">1200</h5> 707 <span class="description-text">GOAL COMPLETIONS</span> 708 </div> 709 <!-- /.description-block --> 710 </div> 711 </div> 712 <!-- /.row --> 713 </div> 714 <!-- /.box-footer --> 715 </div> 716 <!-- /.box --> 717 </div> 718 <!-- /.col --> 719 </div> 720 <!-- /.row --> 721 722 <!-- Main row主要 --> 723 <div class="row"> 724 <!-- Left col --> 725 <div class="col-md-8"> 726 <!-- MAP & BOX PANE --> 727 <div class="box box-success"> 728 <div class="box-header with-border"> 729 <h3 class="box-title">Visitors Report</h3> 730 731 <div class="box-tools pull-right"> 732 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> 733 </button> 734 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> 735 </div> 736 </div> 737 <!-- /.box-header --> 738 <div class="box-body no-padding"> 739 <div class="row"> 740 <div class="col-md-9 col-sm-8"> 741 <div class="pad"> 742 <!-- Map will be created here --> 743 <div id="world-map-markers" style="height: 325px;"></div> 744 </div> 745 </div> 746 <!-- /.col --> 747 <div class="col-md-3 col-sm-4"> 748 <div class="pad box-pane-right bg-green" style="min-height: 280px"> 749 <div class="description-block margin-bottom"> 750 <div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div> 751 <h5 class="description-header">8390</h5> 752 <span class="description-text">Visits</span> 753 </div> 754 <!-- /.description-block --> 755 <div class="description-block margin-bottom"> 756 <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div> 757 <h5 class="description-header">30%</h5> 758 <span class="description-text">Referrals</span> 759 </div> 760 <!-- /.description-block --> 761 <div class="description-block"> 762 <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div> 763 <h5 class="description-header">70%</h5> 764 <span class="description-text">Organic</span> 765 </div> 766 <!-- /.description-block --> 767 </div> 768 </div> 769 <!-- /.col --> 770 </div> 771 <!-- /.row --> 772 </div> 773 <!-- /.box-body --> 774 </div> 775 <!-- /.box --> 776 <div class="row"> 777 <div class="col-md-6"> 778 <!-- DIRECT CHAT --> 779 <div class="box box-warning direct-chat direct-chat-warning"> 780 <div class="box-header with-border"> 781 <h3 class="box-title">Direct Chat</h3> 782 783 <div class="box-tools pull-right"> 784 <span data-toggle="tooltip" title="3 New Messages" class="badge bg-yellow">3</span> 785 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> 786 </button> 787 <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" 788 data-widget="chat-pane-toggle"> 789 <i class="fa fa-comments"></i></button> 790 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i> 791 </button> 792 </div> 793 </div> 794 <!-- /.box-header --> 795 <div class="box-body"> 796 <!-- Conversations are loaded here --> 797 <div class="direct-chat-messages"> 798 <!-- Message. Default to the left --> 799 <div class="direct-chat-msg"> 800 <div class="direct-chat-info clearfix"> 801 <span class="direct-chat-name pull-left">Alexander Pierce</span> 802 <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span> 803 </div> 804 <!-- /.direct-chat-info --> 805 <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image"> 806 <!-- /.direct-chat-img --> 807 <div class="direct-chat-text"> 808 Is this template really for free? That's unbelievable! 809 </div> 810 <!-- /.direct-chat-text --> 811 </div> 812 <!-- /.direct-chat-msg --> 813 814 <!-- Message to the right --> 815 <div class="direct-chat-msg right"> 816 <div class="direct-chat-info clearfix"> 817 <span class="direct-chat-name pull-right">Sarah Bullock</span> 818 <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span> 819 </div> 820 <!-- /.direct-chat-info --> 821 <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image"> 822 <!-- /.direct-chat-img --> 823 <div class="direct-chat-text"> 824 You better believe it! 825 </div> 826 <!-- /.direct-chat-text --> 827 </div> 828 <!-- /.direct-chat-msg --> 829 830 <!-- Message. Default to the left --> 831 <div class="direct-chat-msg"> 832 <div class="direct-chat-info clearfix"> 833 <span class="direct-chat-name pull-left">Alexander Pierce</span> 834 <span class="direct-chat-timestamp pull-right">23 Jan 5:37 pm</span> 835 </div> 836 <!-- /.direct-chat-info --> 837 <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image"> 838 <!-- /.direct-chat-img --> 839 <div class="direct-chat-text"> 840 Working with AdminLTE on a great new app! Wanna join? 841 </div> 842 <!-- /.direct-chat-text --> 843 </div> 844 <!-- /.direct-chat-msg --> 845 846 <!-- Message to the right --> 847 <div class="direct-chat-msg right"> 848 <div class="direct-chat-info clearfix"> 849 <span class="direct-chat-name pull-right">Sarah Bullock</span> 850 <span class="direct-chat-timestamp pull-left">23 Jan 6:10 pm</span> 851 </div> 852 <!-- /.direct-chat-info --> 853 <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image"> 854 <!-- /.direct-chat-img --> 855 <div class="direct-chat-text"> 856 I would love to. 857 </div> 858 <!-- /.direct-chat-text --> 859 </div> 860 <!-- /.direct-chat-msg --> 861 862 </div> 863 <!--/.direct-chat-messages--> 864 865 <!-- Contacts are loaded here --> 866 <div class="direct-chat-contacts"> 867 <ul class="contacts-list"> 868 <li> 869 <a href="#"> 870 <img class="contacts-list-img" src="dist/img/user1-128x128.jpg" alt="User Image"> 871 872 <div class="contacts-list-info"> 873 <span class="contacts-list-name"> 874 Count Dracula 875 <small class="contacts-list-date pull-right">2/28/2015</small> 876 </span> 877 <span class="contacts-list-msg">How have you been? I was...</span> 878 </div> 879 <!-- /.contacts-list-info --> 880 </a> 881 </li> 882 <!-- End Contact Item --> 883 <li> 884 <a href="#"> 885 <img class="contacts-list-img" src="dist/img/user7-128x128.jpg" alt="User Image"> 886 887 <div class="contacts-list-info"> 888 <span class="contacts-list-name"> 889 Sarah Doe 890 <small class="contacts-list-date pull-right">2/23/2015</small> 891 </span> 892 <span class="contacts-list-msg">I will be waiting for...</span> 893 </div> 894 <!-- /.contacts-list-info --> 895 </a> 896 </li> 897 <!-- End Contact Item --> 898 <li> 899 <a href="#"> 900 <img class="contacts-list-img" src="dist/img/user3-128x128.jpg" alt="User Image"> 901 902 <div class="contacts-list-info"> 903 <span class="contacts-list-name"> 904 Nadia Jolie 905 <small class="contacts-list-date pull-right">2/20/2015</small> 906 </span> 907 <span class="contacts-list-msg">I'll call you back at...</span> 908 </div> 909 <!-- /.contacts-list-info --> 910 </a> 911 </li> 912 <!-- End Contact Item --> 913 <li> 914 <a href="#"> 915 <img class="contacts-list-img" src="dist/img/user5-128x128.jpg" alt="User Image"> 916 917 <div class="contacts-list-info"> 918 <span class="contacts-list-name"> 919 Nora S. Vans 920 <small class="contacts-list-date pull-right">2/10/2015</small> 921 </span> 922 <span class="contacts-list-msg">Where is your new...</span> 923 </div> 924 <!-- /.contacts-list-info --> 925 </a> 926 </li> 927 <!-- End Contact Item --> 928 <li> 929 <a href="#"> 930 <img class="contacts-list-img" src="dist/img/user6-128x128.jpg" alt="User Image"> 931 932 <div class="contacts-list-info"> 933 <span class="contacts-list-name"> 934 John K. 935 <small class="contacts-list-date pull-right">1/27/2015</small> 936 </span> 937 <span class="contacts-list-msg">Can I take a look at...</span> 938 </div> 939 <!-- /.contacts-list-info --> 940 </a> 941 </li> 942 <!-- End Contact Item --> 943 <li> 944 <a href="#"> 945 <img class="contacts-list-img" src="dist/img/user8-128x128.jpg" alt="User Image"> 946 947 <div class="contacts-list-info"> 948 <span class="contacts-list-name"> 949 Kenneth M. 950 <small class="contacts-list-date pull-right">1/4/2015</small> 951 </span> 952 <span class="contacts-list-msg">Never mind I found...</span> 953 </div> 954 <!-- /.contacts-list-info --> 955 </a> 956 </li> 957 <!-- End Contact Item --> 958 </ul> 959 <!-- /.contatcts-list --> 960 </div> 961 <!-- /.direct-chat-pane --> 962 </div> 963 <!-- /.box-body --> 964 <div class="box-footer"> 965 <form action="#" method="post"> 966 <div class="input-group"> 967 <input type="text" name="message" placeholder="Type Message ..." class="form-control"> 968 <span class="input-group-btn"> 969 <button type="button" class="btn btn-warning btn-flat">Send</button> 970 </span> 971 </div> 972 </form> 973 </div> 974 <!-- /.box-footer--> 975 </div> 976 <!--/.direct-chat --> 977 </div> 978 <!-- /.col --> 979 980 <div class="col-md-6"> 981 <!-- USERS LIST --> 982 <div class="box box-danger"> 983 <div class="box-header with-border"> 984 <h3 class="box-title">Latest Members</h3> 985 986 <div class="box-tools pull-right"> 987 <span class="label label-danger">8 New Members</span> 988 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> 989 </button> 990 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i> 991 </button> 992 </div> 993 </div> 994 <!-- /.box-header --> 995 <div class="box-body no-padding"> 996 <ul class="users-list clearfix"> 997 <li> 998 <img src="dist/img/user1-128x128.jpg" alt="User Image"> 999 <a class="users-list-name" href="#">Alexander Pierce</a> 1000 <span class="users-list-date">Today</span> 1001 </li> 1002 <li> 1003 <img src="dist/img/user8-128x128.jpg" alt="User Image"> 1004 <a class="users-list-name" href="#">Norman</a> 1005 <span class="users-list-date">Yesterday</span> 1006 </li> 1007 <li> 1008 <img src="dist/img/user7-128x128.jpg" alt="User Image"> 1009 <a class="users-list-name" href="#">Jane</a> 1010 <span class="users-list-date">12 Jan</span> 1011 </li> 1012 <li> 1013 <img src="dist/img/user6-128x128.jpg" alt="User Image"> 1014 <a class="users-list-name" href="#">John</a> 1015 <span class="users-list-date">12 Jan</span> 1016 </li> 1017 <li> 1018 <img src="dist/img/user2-160x160.jpg" alt="User Image"> 1019 <a class="users-list-name" href="#">Alexander</a> 1020 <span class="users-list-date">13 Jan</span> 1021 </li> 1022 <li> 1023 <img src="dist/img/user5-128x128.jpg" alt="User Image"> 1024 <a class="users-list-name" href="#">Sarah</a> 1025 <span class="users-list-date">14 Jan</span> 1026 </li> 1027 <li> 1028 <img src="dist/img/user4-128x128.jpg" alt="User Image"> 1029 <a class="users-list-name" href="#">Nora</a> 1030 <span class="users-list-date">15 Jan</span> 1031 </li> 1032 <li> 1033 <img src="dist/img/user3-128x128.jpg" alt="User Image"> 1034 <a class="users-list-name" href="#">Nadia</a> 1035 <span class="users-list-date">15 Jan</span> 1036 </li> 1037 </ul> 1038 <!-- /.users-list --> 1039 </div> 1040 <!-- /.box-body --> 1041 <div class="box-footer text-center"> 1042 <a href="javascript:void(0)" class="uppercase">View All Users</a> 1043 </div> 1044 <!-- /.box-footer --> 1045 </div> 1046 <!--/.box --> 1047 </div> 1048 <!-- /.col --> 1049 </div> 1050 <!-- /.row --> 1051 1052 <!-- TABLE: LATEST ORDERS --> 1053 <div class="box box-info"> 1054 <div class="box-header with-border"> 1055 <h3 class="box-title">Latest Orders</h3> 1056 1057 <div class="box-tools pull-right"> 1058 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> 1059 </button> 1060 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> 1061 </div> 1062 </div> 1063 <!-- /.box-header --> 1064 <div class="box-body"> 1065 <div class="table-responsive"> 1066 <table class="table no-margin"> 1067 <thead> 1068 <tr> 1069 <th>Order ID</th> 1070 <th>Item</th> 1071 <th>Status</th> 1072 <th>Popularity</th> 1073 </tr> 1074 </thead> 1075 <tbody> 1076 <tr> 1077 <td><a href="pages/examples/invoice.html">OR9842</a></td> 1078 <td>Call of Duty IV</td> 1079 <td><span class="label label-success">Shipped</span></td> 1080 <td> 1081 <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div> 1082 </td> 1083 </tr> 1084 <tr> 1085 <td><a href="pages/examples/invoice.html">OR1848</a></td> 1086 <td>Samsung Smart TV</td> 1087 <td><span class="label label-warning">Pending</span></td> 1088 <td> 1089 <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div> 1090 </td> 1091 </tr> 1092 <tr> 1093 <td><a href="pages/examples/invoice.html">OR7429</a></td> 1094 <td>iPhone 6 Plus</td> 1095 <td><span class="label label-danger">Delivered</span></td> 1096 <td> 1097 <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div> 1098 </td> 1099 </tr> 1100 <tr> 1101 <td><a href="pages/examples/invoice.html">OR7429</a></td> 1102 <td>Samsung Smart TV</td> 1103 <td><span class="label label-info">Processing</span></td> 1104 <td> 1105 <div class="sparkbar" data-color="#00c0ef" data-height="20">90,80,-90,70,-61,83,63</div> 1106 </td> 1107 </tr> 1108 <tr> 1109 <td><a href="pages/examples/invoice.html">OR1848</a></td> 1110 <td>Samsung Smart TV</td> 1111 <td><span class="label label-warning">Pending</span></td> 1112 <td> 1113 <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div> 1114 </td> 1115 </tr> 1116 <tr> 1117 <td><a href="pages/examples/invoice.html">OR7429</a></td> 1118 <td>iPhone 6 Plus</td> 1119 <td><span class="label label-danger">Delivered</span></td> 1120 <td> 1121 <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div> 1122 </td> 1123 </tr> 1124 <tr> 1125 <td><a href="pages/examples/invoice.html">OR9842</a></td> 1126 <td>Call of Duty IV</td> 1127 <td><span class="label label-success">Shipped</span></td> 1128 <td> 1129 <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div> 1130 </td> 1131 </tr> 1132 </tbody> 1133 </table> 1134 </div> 1135 <!-- /.table-responsive --> 1136 </div> 1137 <!-- /.box-body --> 1138 <div class="box-footer clearfix"> 1139 <a href="javascript:void(0)" class="btn btn-sm btn-info btn-flat pull-left">Place New Order</a> 1140 <a href="javascript:void(0)" class="btn btn-sm btn-default btn-flat pull-right">View All Orders</a> 1141 </div> 1142 <!-- /.box-footer --> 1143 </div> 1144 <!-- /.box --> 1145 </div> 1146 <!-- /.col --> 1147 1148 <div class="col-md-4"> 1149 <!-- Info Boxes Style 2 --> 1150 <div class="info-box bg-yellow"> 1151 <span class="info-box-icon"><i class="ion ion-ios-pricetag-outline"></i></span> 1152 1153 <div class="info-box-content"> 1154 <span class="info-box-text">Inventory</span> 1155 <span class="info-box-number">5,200</span> 1156 1157 <div class="progress"> 1158 <div class="progress-bar" style=" 50%"></div> 1159 </div> 1160 <span class="progress-description"> 1161 50% Increase in 30 Days 1162 </span> 1163 </div> 1164 <!-- /.info-box-content --> 1165 </div> 1166 <!-- /.info-box --> 1167 <div class="info-box bg-green"> 1168 <span class="info-box-icon"><i class="ion ion-ios-heart-outline"></i></span> 1169 1170 <div class="info-box-content"> 1171 <span class="info-box-text">Mentions</span> 1172 <span class="info-box-number">92,050</span> 1173 1174 <div class="progress"> 1175 <div class="progress-bar" style=" 20%"></div> 1176 </div> 1177 <span class="progress-description"> 1178 20% Increase in 30 Days 1179 </span> 1180 </div> 1181 <!-- /.info-box-content --> 1182 </div> 1183 <!-- /.info-box --> 1184 <div class="info-box bg-red"> 1185 <span class="info-box-icon"><i class="ion ion-ios-cloud-download-outline"></i></span> 1186 1187 <div class="info-box-content"> 1188 <span class="info-box-text">Downloads</span> 1189 <span class="info-box-number">114,381</span> 1190 1191 <div class="progress"> 1192 <div class="progress-bar" style=" 70%"></div> 1193 </div> 1194 <span class="progress-description"> 1195 70% Increase in 30 Days 1196 </span> 1197 </div> 1198 <!-- /.info-box-content --> 1199 </div> 1200 <!-- /.info-box --> 1201 <div class="info-box bg-aqua"> 1202 <span class="info-box-icon"><i class="ion-ios-chatbubble-outline"></i></span> 1203 1204 <div class="info-box-content"> 1205 <span class="info-box-text">Direct Messages</span> 1206 <span class="info-box-number">163,921</span> 1207 1208 <div class="progress"> 1209 <div class="progress-bar" style=" 40%"></div> 1210 </div> 1211 <span class="progress-description"> 1212 40% Increase in 30 Days 1213 </span> 1214 </div> 1215 <!-- /.info-box-content --> 1216 </div> 1217 <!-- /.info-box --> 1218 1219 <div class="box box-default"> 1220 <div class="box-header with-border"> 1221 <h3 class="box-title">Browser Usage</h3> 1222 1223 <div class="box-tools pull-right"> 1224 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> 1225 </button> 1226 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> 1227 </div> 1228 </div> 1229 <!-- /.box-header --> 1230 <div class="box-body"> 1231 <div class="row"> 1232 <div class="col-md-8"> 1233 <div class="chart-responsive"> 1234 <canvas id="pieChart" height="150"></canvas> 1235 </div> 1236 <!-- ./chart-responsive --> 1237 </div> 1238 <!-- /.col --> 1239 <div class="col-md-4"> 1240 <ul class="chart-legend clearfix"> 1241 <li><i class="fa fa-circle-o text-red"></i> Chrome</li> 1242 <li><i class="fa fa-circle-o text-green"></i> IE</li> 1243 <li><i class="fa fa-circle-o text-yellow"></i> FireFox</li> 1244 <li><i class="fa fa-circle-o text-aqua"></i> Safari</li> 1245 <li><i class="fa fa-circle-o text-light-blue"></i> Opera</li> 1246 <li><i class="fa fa-circle-o text-gray"></i> Navigator</li> 1247 </ul> 1248 </div> 1249 <!-- /.col --> 1250 </div> 1251 <!-- /.row --> 1252 </div> 1253 <!-- /.box-body --> 1254 <div class="box-footer no-padding"> 1255 <ul class="nav nav-pills nav-stacked"> 1256 <li><a href="#">United States of America 1257 <span class="pull-right text-red"><i class="fa fa-angle-down"></i> 12%</span></a></li> 1258 <li><a href="#">India <span class="pull-right text-green"><i class="fa fa-angle-up"></i> 4%</span></a> 1259 </li> 1260 <li><a href="#">China 1261 <span class="pull-right text-yellow"><i class="fa fa-angle-left"></i> 0%</span></a></li> 1262 </ul> 1263 </div> 1264 <!-- /.footer --> 1265 </div> 1266 <!-- /.box --> 1267 1268 <!-- PRODUCT LIST --> 1269 <div class="box box-primary"> 1270 <div class="box-header with-border"> 1271 <h3 class="box-title">Recently Added Products</h3> 1272 1273 <div class="box-tools pull-right"> 1274 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> 1275 </button> 1276 <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> 1277 </div> 1278 </div> 1279 <!-- /.box-header --> 1280 <div class="box-body"> 1281 <ul class="products-list product-list-in-box"> 1282 <li class="item"> 1283 <div class="product-img"> 1284 <img src="dist/img/default-50x50.gif" alt="Product Image"> 1285 </div> 1286 <div class="product-info"> 1287 <a href="javascript:void(0)" class="product-title">Samsung TV 1288 <span class="label label-warning pull-right">$1800</span></a> 1289 <span class="product-description"> 1290 Samsung 32" 1080p 60Hz LED Smart HDTV. 1291 </span> 1292 </div> 1293 </li> 1294 <!-- /.item --> 1295 <li class="item"> 1296 <div class="product-img"> 1297 <img src="dist/img/default-50x50.gif" alt="Product Image"> 1298 </div> 1299 <div class="product-info"> 1300 <a href="javascript:void(0)" class="product-title">Bicycle 1301 <span class="label label-info pull-right">$700</span></a> 1302 <span class="product-description"> 1303 26" Mongoose Dolomite Men's 7-speed, Navy Blue. 1304 </span> 1305 </div> 1306 </li> 1307 <!-- /.item --> 1308 <li class="item"> 1309 <div class="product-img"> 1310 <img src="dist/img/default-50x50.gif" alt="Product Image"> 1311 </div> 1312 <div class="product-info"> 1313 <a href="javascript:void(0)" class="product-title">Xbox One <span 1314 class="label label-danger pull-right">$350</span></a> 1315 <span class="product-description"> 1316 Xbox One Console Bundle with Halo Master Chief Collection. 1317 </span> 1318 </div> 1319 </li> 1320 <!-- /.item --> 1321 <li class="item"> 1322 <div class="product-img"> 1323 <img src="dist/img/default-50x50.gif" alt="Product Image"> 1324 </div> 1325 <div class="product-info"> 1326 <a href="javascript:void(0)" class="product-title">PlayStation 4 1327 <span class="label label-success pull-right">$399</span></a> 1328 <span class="product-description"> 1329 PlayStation 4 500GB Console (PS4) 1330 </span> 1331 </div> 1332 </li> 1333 <!-- /.item --> 1334 </ul> 1335 </div> 1336 <!-- /.box-body --> 1337 <div class="box-footer text-center"> 1338 <a href="javascript:void(0)" class="uppercase">View All Products</a> 1339 </div> 1340 <!-- /.box-footer --> 1341 </div> 1342 <!-- /.box --> 1343 </div> 1344 <!-- /.col --> 1345 </div> 1346 <!-- /.row --> 1347 </section> 1348 <!-- /.content --> 1349 </div> 1350 <!-- /.content-wrapper --> 1351 <!--底部--> 1352 <footer class="main-footer"> 1353 <div class="pull-right hidden-xs"> 1354 <b>Version</b> 2.4.0 1355 </div> 1356 <strong>Copyright © 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights 1357 reserved. 1358 </footer> 1359 1360 <!-- Control Sidebar控制栏,右边 --> 1361 <aside class="control-sidebar control-sidebar-dark"> 1362 <!-- Create the tabs创建选项卡 --> 1363 <ul class="nav nav-tabs nav-justified control-sidebar-tabs"> 1364 <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li> 1365 <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li> 1366 </ul> 1367 <!-- Tab panes选项卡窗格 --> 1368 <div class="tab-content"> 1369 <!-- Home tab content home标签内容 --> 1370 <div class="tab-pane" id="control-sidebar-home-tab"> 1371 <h3 class="control-sidebar-heading">Recent Activity</h3> 1372 <ul class="control-sidebar-menu"> 1373 <li> 1374 <a href="javascript:void(0)"> 1375 <i class="menu-icon fa fa-birthday-cake bg-red"></i> 1376 1377 <div class="menu-info"> 1378 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4> 1379 1380 <p>Will be 23 on April 24th</p> 1381 </div> 1382 </a> 1383 </li> 1384 <li> 1385 <a href="javascript:void(0)"> 1386 <i class="menu-icon fa fa-user bg-yellow"></i> 1387 1388 <div class="menu-info"> 1389 <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4> 1390 1391 <p>New phone +1(800)555-1234</p> 1392 </div> 1393 </a> 1394 </li> 1395 <li> 1396 <a href="javascript:void(0)"> 1397 <i class="menu-icon fa fa-envelope-o bg-light-blue"></i> 1398 1399 <div class="menu-info"> 1400 <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4> 1401 1402 <p>nora@example.com</p> 1403 </div> 1404 </a> 1405 </li> 1406 <li> 1407 <a href="javascript:void(0)"> 1408 <i class="menu-icon fa fa-file-code-o bg-green"></i> 1409 1410 <div class="menu-info"> 1411 <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4> 1412 1413 <p>Execution time 5 seconds</p> 1414 </div> 1415 </a> 1416 </li> 1417 </ul> 1418 <!-- /.control-sidebar-menu --> 1419 1420 <h3 class="control-sidebar-heading">Tasks Progress</h3> 1421 <ul class="control-sidebar-menu"> 1422 <li> 1423 <a href="javascript:void(0)"> 1424 <h4 class="control-sidebar-subheading"> 1425 Custom Template Design 1426 <span class="label label-danger pull-right">70%</span> 1427 </h4> 1428 1429 <div class="progress progress-xxs"> 1430 <div class="progress-bar progress-bar-danger" style=" 70%"></div> 1431 </div> 1432 </a> 1433 </li> 1434 <li> 1435 <a href="javascript:void(0)"> 1436 <h4 class="control-sidebar-subheading"> 1437 Update Resume 1438 <span class="label label-success pull-right">95%</span> 1439 </h4> 1440 1441 <div class="progress progress-xxs"> 1442 <div class="progress-bar progress-bar-success" style=" 95%"></div> 1443 </div> 1444 </a> 1445 </li> 1446 <li> 1447 <a href="javascript:void(0)"> 1448 <h4 class="control-sidebar-subheading"> 1449 Laravel Integration 1450 <span class="label label-warning pull-right">50%</span> 1451 </h4> 1452 1453 <div class="progress progress-xxs"> 1454 <div class="progress-bar progress-bar-warning" style=" 50%"></div> 1455 </div> 1456 </a> 1457 </li> 1458 <li> 1459 <a href="javascript:void(0)"> 1460 <h4 class="control-sidebar-subheading"> 1461 Back End Framework 1462 <span class="label label-primary pull-right">68%</span> 1463 </h4> 1464 1465 <div class="progress progress-xxs"> 1466 <div class="progress-bar progress-bar-primary" style=" 68%"></div> 1467 </div> 1468 </a> 1469 </li> 1470 </ul> 1471 <!-- /.control-sidebar-menu --> 1472 1473 </div> 1474 <!-- /.tab-pane --> 1475 1476 <!-- Settings tab content setting标签内容--> 1477 <div class="tab-pane" id="control-sidebar-settings-tab"> 1478 <form method="post"> 1479 <h3 class="control-sidebar-heading">General Settings</h3> 1480 1481 <div class="form-group"> 1482 <label class="control-sidebar-subheading"> 1483 Report panel usage 1484 <input type="checkbox" class="pull-right" checked> 1485 </label> 1486 1487 <p> 1488 Some information about this general settings option 1489 </p> 1490 </div> 1491 <!-- /.form-group --> 1492 1493 <div class="form-group"> 1494 <label class="control-sidebar-subheading"> 1495 Allow mail redirect 1496 <input type="checkbox" class="pull-right" checked> 1497 </label> 1498 1499 <p> 1500 Other sets of options are available 1501 </p> 1502 </div> 1503 <!-- /.form-group --> 1504 1505 <div class="form-group"> 1506 <label class="control-sidebar-subheading"> 1507 Expose author name in posts 1508 <input type="checkbox" class="pull-right" checked> 1509 </label> 1510 1511 <p> 1512 Allow the user to show his name in blog posts 1513 </p> 1514 </div> 1515 <!-- /.form-group --> 1516 1517 <h3 class="control-sidebar-heading">Chat Settings</h3> 1518 1519 <div class="form-group"> 1520 <label class="control-sidebar-subheading"> 1521 Show me as online 1522 <input type="checkbox" class="pull-right" checked> 1523 </label> 1524 </div> 1525 <!-- /.form-group --> 1526 1527 <div class="form-group"> 1528 <label class="control-sidebar-subheading"> 1529 Turn off notifications 1530 <input type="checkbox" class="pull-right"> 1531 </label> 1532 </div> 1533 <!-- /.form-group --> 1534 1535 <div class="form-group"> 1536 <label class="control-sidebar-subheading"> 1537 Delete chat history 1538 <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a> 1539 </label> 1540 </div> 1541 <!-- /.form-group --> 1542 </form> 1543 </div> 1544 <!-- /.tab-pane --> 1545 </div> 1546 </aside> 1547 <!-- /.control-sidebar --> 1548 <!-- Add the sidebar's background. This div must be placed 1549 immediately after the control sidebar 添加侧边栏的背景。必须放置此div 1550 在控件侧边栏之后--> 1551 <div class="control-sidebar-bg"></div> 1552 1553 </div> 1554 <!-- ./wrapper --> 1555 1556 <!-- jQuery 3 --> 1557 <script src="bower_components/jquery/dist/jquery.min.js"></script> 1558 <!-- Bootstrap 3.3.7 --> 1559 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 1560 <!-- FastClick --> 1561 <script src="bower_components/fastclick/lib/fastclick.js"></script> 1562 <!-- AdminLTE App --> 1563 <script src="dist/js/adminlte.min.js"></script> 1564 <!-- Sparkline --> 1565 <script src="bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script> 1566 <!-- jvectormap --> 1567 <script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script> 1568 <script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script> 1569 <!-- SlimScroll --> 1570 <script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script> 1571 <!-- ChartJS --> 1572 <script src="bower_components/chart.js/Chart.js"></script> 1573 <!-- AdminLTE dashboard demo (This is only for demo purposes) --> 1574 <script src="dist/js/pages/dashboard2.js"></script> 1575 <!-- AdminLTE for demo purposes --> 1576 <script src="dist/js/demo.js"></script> 1577 </body> 1578 </html>