card-widget.blade.php 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <style>
  2. .card-widget .widget-user-username, .card-widget .widget-user-desc {
  3. color: #ffffff !important;
  4. }
  5. .card-widget .card-footer {
  6. margin: 0px !important;
  7. }
  8. .widget-user .card-footer {
  9. padding-top: 50px;
  10. }
  11. .card-widget .nav-link {
  12. padding: .5rem 1rem;
  13. }
  14. </style>
  15. <div class="row">
  16. <div class="col-md-4">
  17. <div class="card card-widget widget-user-2 shadow">
  18. <div class="widget-user-header bg-warning">
  19. <div class="widget-user-image">
  20. <img class="img-circle elevation-2" src="https://m.saishiyun.net/imgpic/work-photo.png"
  21. alt="User Avatar">
  22. </div>
  23. <h3 class="widget-user-username">杨光-退伍程序员</h3>
  24. <h5 class="widget-user-desc">速码邦总设计师</h5>
  25. </div>
  26. <div class="card-footer p-0">
  27. <ul class="nav flex-column">
  28. <li class="nav-item">
  29. <a href="#" class="nav-link">
  30. 项目 <span class="float-right badge bg-primary">31</span>
  31. </a>
  32. </li>
  33. <li class="nav-item">
  34. <a href="#" class="nav-link">
  35. 任务 <span class="float-right badge bg-info">5</span>
  36. </a>
  37. </li>
  38. <li class="nav-item">
  39. <a href="#" class="nav-link">
  40. 产品 <span class="float-right badge bg-success">12</span>
  41. </a>
  42. </li>
  43. <li class="nav-item">
  44. <a href="#" class="nav-link">
  45. 关注 <span class="float-right badge bg-danger">842</span>
  46. </a>
  47. </li>
  48. </ul>
  49. </div>
  50. </div>
  51. </div>
  52. <div class="col-md-4">
  53. <div class="card card-widget widget-user shadow">
  54. <div class="widget-user-header bg-info">
  55. <h3 class="widget-user-username">极速开发 成就非凡</h3>
  56. <h5 class="widget-user-desc">速码邦 &amp; CEO</h5>
  57. </div>
  58. <div class="widget-user-image">
  59. <img class="img-circle elevation-2" src="https://m.saishiyun.net/imgpic/work-photo.png"
  60. alt="User Avatar">
  61. </div>
  62. <div class="card-footer">
  63. <div class="row">
  64. <div class="col-sm-4 border-right">
  65. <div class="description-block">
  66. <h5 class="description-header">3,200</h5>
  67. <span class="description-text">关注</span>
  68. </div>
  69. </div>
  70. <div class="col-sm-4 border-right">
  71. <div class="description-block">
  72. <h5 class="description-header">13,000</h5>
  73. <span class="description-text">粉丝</span>
  74. </div>
  75. </div>
  76. <div class="col-sm-4">
  77. <div class="description-block">
  78. <h5 class="description-header">35</h5>
  79. <span class="description-text">视频</span>
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. <div class="col-md-4">
  87. <div class="card card-widget widget-user shadow-lg">
  88. <div class="widget-user-header text-white"
  89. style="background: url('https://adminlte.io/themes/v3/dist/img/photo1.png') center center;">
  90. <h3 class="widget-user-username text-right">极速开发 成就非凡</h3>
  91. <h5 class="widget-user-desc text-right">Web Admin 利刃</h5>
  92. </div>
  93. <div class="widget-user-image">
  94. <img class="img-circle" src="https://m.saishiyun.net/imgpic/work-photo.png" alt="User Avatar">
  95. </div>
  96. <div class="card-footer">
  97. <div class="row">
  98. <div class="col-sm-4 border-right">
  99. <div class="description-block">
  100. <h5 class="description-header">3,200</h5>
  101. <span class="description-text">关注</span>
  102. </div>
  103. </div>
  104. <div class="col-sm-4 border-right">
  105. <div class="description-block">
  106. <h5 class="description-header">13,000</h5>
  107. <span class="description-text">粉丝</span>
  108. </div>
  109. </div>
  110. <div class="col-sm-4">
  111. <div class="description-block">
  112. <h5 class="description-header">35</h5>
  113. <span class="description-text">视频</span>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. </div>