index.html 63 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>西咸新区-绿建能耗监测平台</title>
  7. <meta name="keywords" content="大气,响应式,CMS,手机电脑,后台管理,管理系统,网站模板,全套下载" />
  8. <meta name="description" content="大气响应式CMS手机电脑后台管理系统网站模板全套下载。" />
  9. <meta name="viewport" content="width=device-width, initial-scale=1">
  10. <meta name="renderer" content="webkit">
  11. <meta http-equiv="Cache-Control" content="no-siteapp" />
  12. <link rel="icon" type="image/png" href="assets/i/favicon.png">
  13. <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
  14. <meta name="apple-mobile-web-app-title" content="Amaze UI" />
  15. <link rel="stylesheet" href="assets/css/amazeui.min.css" />
  16. <link rel="stylesheet" href="assets/css/admin.css">
  17. <link rel="stylesheet" href="assets/css/app.css">
  18. <script src="assets/js/echarts.min.js"></script>
  19. </head>
  20. <style>
  21. .header-title-class {
  22. color: #5a8dbb;
  23. font-weight: bold;
  24. font-size: 20px;
  25. }
  26. </style>
  27. <body data-type="index">
  28. <header class="am-topbar am-topbar-inverse admin-header">
  29. <div class="am-topbar-brand diplay-flex-start">
  30. <a href="javascript:;" class="tpl-logo" style="width: 35px;">
  31. <img src="assets/img/self/header-icon.svg" alt="">
  32. </a>
  33. <div class="margin-left-20"><span class="header-title-class">西咸新区</span>-绿建能耗监测平台</div>
  34. </div>
  35. <div class="am-icon-list tpl-header-nav-hover-ico am-fl am-margin-right">
  36. </div>
  37. <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>
  38. <div class="am-collapse am-topbar-collapse" id="topbar-collapse">
  39. <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list tpl-header-list">
  40. <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
  41. <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
  42. <span class="am-icon-bell-o"></span> 提醒 <span class="am-badge tpl-badge-success am-round">5</span></span>
  43. </a>
  44. <ul class="am-dropdown-content tpl-dropdown-content">
  45. <li class="tpl-dropdown-content-external">
  46. <h3>你有 <span class="tpl-color-success">5</span> 条提醒</h3><a href="###">全部</a></li>
  47. <li class="tpl-dropdown-list-bdbc"><a href="#" class="tpl-dropdown-list-fl"><span class="am-icon-btn am-icon-plus tpl-dropdown-ico-btn-size tpl-badge-success"></span> 【预览模块】移动端 查看时 手机、电脑框隐藏。</a>
  48. <span class="tpl-dropdown-list-fr">3小时前</span>
  49. </li>
  50. <li class="tpl-dropdown-list-bdbc"><a href="#" class="tpl-dropdown-list-fl"><span class="am-icon-btn am-icon-check tpl-dropdown-ico-btn-size tpl-badge-danger"></span> 移动端,导航条下边距处理</a>
  51. <span class="tpl-dropdown-list-fr">15分钟前</span>
  52. </li>
  53. <li class="tpl-dropdown-list-bdbc"><a href="#" class="tpl-dropdown-list-fl"><span class="am-icon-btn am-icon-bell-o tpl-dropdown-ico-btn-size tpl-badge-warning"></span> 追加统计代码</a>
  54. <span class="tpl-dropdown-list-fr">2天前</span>
  55. </li>
  56. </ul>
  57. </li>
  58. <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
  59. <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
  60. <span class="am-icon-comment-o"></span> 消息 <span class="am-badge tpl-badge-danger am-round">9</span></span>
  61. </a>
  62. <ul class="am-dropdown-content tpl-dropdown-content">
  63. <li class="tpl-dropdown-content-external">
  64. <h3>你有 <span class="tpl-color-danger">9</span> 条新消息</h3><a href="###">全部</a></li>
  65. <li>
  66. <a href="#" class="tpl-dropdown-content-message">
  67. <span class="tpl-dropdown-content-photo">
  68. <img src="assets/img/user02.png" alt=""> </span>
  69. <span class="tpl-dropdown-content-subject">
  70. <span class="tpl-dropdown-content-from"> 禁言小张 </span>
  71. <span class="tpl-dropdown-content-time">10分钟前 </span>
  72. </span>
  73. <span class="tpl-dropdown-content-font"> Amaze UI 的诞生,依托于 GitHub 及其他技术社区上一些优秀的资源;Amaze UI 的成长,则离不开用户的支持。 </span>
  74. </a>
  75. <a href="#" class="tpl-dropdown-content-message">
  76. <span class="tpl-dropdown-content-photo">
  77. <img src="assets/img/user03.png" alt=""> </span>
  78. <span class="tpl-dropdown-content-subject">
  79. <span class="tpl-dropdown-content-from"> Steam </span>
  80. <span class="tpl-dropdown-content-time">18分钟前</span>
  81. </span>
  82. <span class="tpl-dropdown-content-font"> 为了能最准确的传达所描述的问题, 建议你在反馈时附上演示,方便我们理解。 </span>
  83. </a>
  84. </li>
  85. </ul>
  86. </li>
  87. <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
  88. <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
  89. <span class="am-icon-calendar"></span> 进度 <span class="am-badge tpl-badge-primary am-round">4</span></span>
  90. </a>
  91. <ul class="am-dropdown-content tpl-dropdown-content">
  92. <li class="tpl-dropdown-content-external">
  93. <h3>你有 <span class="tpl-color-primary">4</span> 个任务进度</h3><a href="###">全部</a></li>
  94. <li>
  95. <a href="javascript:;" class="tpl-dropdown-content-progress">
  96. <span class="task">
  97. <span class="desc">Amaze UI 用户中心 v1.2 </span>
  98. <span class="percent">45%</span>
  99. </span>
  100. <span class="progress">
  101. <div class="am-progress tpl-progress am-progress-striped"><div class="am-progress-bar am-progress-bar-success" style="width:45%"></div></div>
  102. </span>
  103. </a>
  104. </li>
  105. <li>
  106. <a href="javascript:;" class="tpl-dropdown-content-progress">
  107. <span class="task">
  108. <span class="desc">新闻内容页 </span>
  109. <span class="percent">30%</span>
  110. </span>
  111. <span class="progress">
  112. <div class="am-progress tpl-progress am-progress-striped"><div class="am-progress-bar am-progress-bar-secondary" style="width:30%"></div></div>
  113. </span>
  114. </a>
  115. </li>
  116. <li>
  117. <a href="javascript:;" class="tpl-dropdown-content-progress">
  118. <span class="task">
  119. <span class="desc">管理中心 </span>
  120. <span class="percent">60%</span>
  121. </span>
  122. <span class="progress">
  123. <div class="am-progress tpl-progress am-progress-striped"><div class="am-progress-bar am-progress-bar-warning" style="width:60%"></div></div>
  124. </span>
  125. </a>
  126. </li>
  127. </ul>
  128. </li>
  129. <li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen" class="tpl-header-list-link"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>
  130. <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
  131. <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
  132. <span class="tpl-header-list-user-nick">禁言小张</span><span class="tpl-header-list-user-ico"> <img src="assets/img/user01.png"></span>
  133. </a>
  134. <ul class="am-dropdown-content">
  135. <li><a href="#"><span class="am-icon-bell-o"></span> 资料</a></li>
  136. <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
  137. <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
  138. </ul>
  139. </li>
  140. <li><a href="###" class="tpl-header-list-link"><span class="am-icon-sign-out tpl-header-list-ico-out-size"></span></a></li>
  141. </ul>
  142. </div>
  143. </header>
  144. <div class="tpl-page-container tpl-page-header-fixed">
  145. <div class="tpl-left-nav tpl-left-nav-hover">
  146. <div class="tpl-left-nav-title">
  147. Administrator 管理菜单
  148. </div>
  149. <div class="tpl-left-nav-list">
  150. <ul class="tpl-left-nav-menu">
  151. <li class="tpl-left-nav-item">
  152. <a href="index.html" class="nav-link active">
  153. <i class="am-icon-home"></i>
  154. <span>能耗总览</span>
  155. </a>
  156. </li>
  157. <li class="tpl-left-nav-item">
  158. <a href="javascript:;" class="nav-link tpl-left-nav-link-list">
  159. <i class="am-icon-bar-chart"></i>
  160. <span>数据中心</span>
  161. <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
  162. <!-- <i class="tpl-left-nav-content tpl-badge-danger">12</i> -->
  163. </a>
  164. <ul class="tpl-left-nav-sub-menu">
  165. <li>
  166. <a href="table-font-list.html">
  167. <i class="am-icon-angle-right"></i>
  168. <span>数据综合分析</span>
  169. <i class="am-icon-star tpl-left-nav-content-ico am-fr am-margin-right"></i>
  170. </a>
  171. <a href="form-news-list.html">
  172. <i class="am-icon-angle-right"></i>
  173. <span>项目单位能耗排名</span>
  174. </a>
  175. <a href="form-news-list.html">
  176. <i class="am-icon-angle-right"></i>
  177. <span>快捷报表</span>
  178. </a>
  179. </li>
  180. </ul>
  181. </li>
  182. <li class="tpl-left-nav-item">
  183. <a href="javascript:;" class="nav-link tpl-left-nav-link-list">
  184. <i class="am-icon-table"></i>
  185. <span>项目管理</span>
  186. <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
  187. </a>
  188. <ul class="tpl-left-nav-sub-menu">
  189. <li>
  190. <a href="table-font-list.html">
  191. <i class="am-icon-angle-right"></i>
  192. <span>项目地图</span>
  193. <i class="am-icon-star tpl-left-nav-content-ico am-fr am-margin-right"></i>
  194. </a>
  195. <a href="form-news-list.html">
  196. <i class="am-icon-angle-right"></i>
  197. <span>项目列表</span>
  198. </a>
  199. </li>
  200. </ul>
  201. </li>
  202. <li class="tpl-left-nav-item">
  203. <a href="javascript:;" class="nav-link tpl-left-nav-link-list">
  204. <i class="am-icon-wpforms"></i>
  205. <span>接入管理</span>
  206. <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
  207. </a>
  208. <ul class="tpl-left-nav-sub-menu">
  209. <li>
  210. <a href="form-amazeui.html">
  211. <i class="am-icon-angle-right"></i>
  212. <span>接入设备管理</span>
  213. <i class="am-icon-star tpl-left-nav-content-ico am-fr am-margin-right"></i>
  214. </a>
  215. <a href="form-line.html">
  216. <i class="am-icon-angle-right"></i>
  217. <span>接入系统管理</span>
  218. </a>
  219. <a href="form-line.html">
  220. <i class="am-icon-angle-right"></i>
  221. <span>新项目接入审核</span>
  222. </a>
  223. <a href="form-line.html">
  224. <i class="am-icon-angle-right"></i>
  225. <span>接入证明</span>
  226. </a>
  227. </li>
  228. </ul>
  229. </li>
  230. <li class="tpl-left-nav-item">
  231. <a href="javascript:;" class="nav-link tpl-left-nav-link-list">
  232. <i class="am-icon-wpforms"></i>
  233. <span>报警管理</span>
  234. <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
  235. </a>
  236. <ul class="tpl-left-nav-sub-menu">
  237. <li>
  238. <a href="form-amazeui.html">
  239. <i class="am-icon-angle-right"></i>
  240. <span>通讯数据异常报警</span>
  241. <i class="am-icon-star tpl-left-nav-content-ico am-fr am-margin-right"></i>
  242. </a>
  243. <a href="form-line.html">
  244. <i class="am-icon-angle-right"></i>
  245. <span>超标项目报警</span>
  246. </a>
  247. <a href="form-line.html">
  248. <i class="am-icon-angle-right"></i>
  249. <span>定额审计</span>
  250. </a>
  251. </li>
  252. </ul>
  253. </li>
  254. <li class="tpl-left-nav-item">
  255. <a href="login.html" class="nav-link tpl-left-nav-link-list">
  256. <i class="am-icon-key"></i>
  257. <span>碳排放</span>
  258. </a>
  259. </li>
  260. <li class="tpl-left-nav-item">
  261. <a href="javascript:;" class="nav-link tpl-left-nav-link-list">
  262. <i class="am-icon-wpforms"></i>
  263. <span>系统设置</span>
  264. <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
  265. </a>
  266. <ul class="tpl-left-nav-sub-menu">
  267. <li>
  268. <a href="form-amazeui.html">
  269. <i class="am-icon-angle-right"></i>
  270. <span>数据字典维护</span>
  271. <i class="am-icon-star tpl-left-nav-content-ico am-fr am-margin-right"></i>
  272. </a>
  273. <a href="form-line.html">
  274. <i class="am-icon-angle-right"></i>
  275. <span>系统日志</span>
  276. </a>
  277. <a href="form-line.html">
  278. <i class="am-icon-angle-right"></i>
  279. <span>操作角色及权限</span>
  280. </a>
  281. <a href="form-line.html">
  282. <i class="am-icon-angle-right"></i>
  283. <span>操作员管理</span>
  284. </a>
  285. </li>
  286. </ul>
  287. </li>
  288. </ul>
  289. </div>
  290. </div>
  291. <div class="tpl-content-wrapper">
  292. <!-- <div class="tpl-content-page-title">
  293. Amaze UI 首页组件
  294. </div> -->
  295. <ol class="am-breadcrumb">
  296. <li><a href="#" class="am-icon-home">首页</a></li>
  297. <li><a href="#">分类</a></li>
  298. <li class="am-active">内容</li>
  299. </ol>
  300. <div class="tpl-content-scope">
  301. <div class="note note-info">
  302. <h3>Amaze UI 为移动而生
  303. <span class="close" data-close="note"></span>
  304. </h3>
  305. <p> Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。</p>
  306. <p><span class="label label-danger">提示:</span> Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果。
  307. </p>
  308. </div>
  309. </div>
  310. <div class="row">
  311. <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
  312. <div class="dashboard-stat blue">
  313. <div class="visual">
  314. <i class="am-icon-comments-o"></i>
  315. </div>
  316. <div class="details">
  317. <div class="number"> 1349 </div>
  318. <div class="desc"> 新消息 </div>
  319. </div>
  320. <a class="more" href="#"> 查看更多
  321. <i class="m-icon-swapright m-icon-white"></i>
  322. </a>
  323. </div>
  324. </div>
  325. <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
  326. <div class="dashboard-stat red">
  327. <div class="visual">
  328. <i class="am-icon-bar-chart-o"></i>
  329. </div>
  330. <div class="details">
  331. <div class="number"> 62% </div>
  332. <div class="desc"> 收视率 </div>
  333. </div>
  334. <a class="more" href="#"> 查看更多
  335. <i class="m-icon-swapright m-icon-white"></i>
  336. </a>
  337. </div>
  338. </div>
  339. <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
  340. <div class="dashboard-stat green">
  341. <div class="visual">
  342. <i class="am-icon-apple"></i>
  343. </div>
  344. <div class="details">
  345. <div class="number"> 653 </div>
  346. <div class="desc"> 苹果设备 </div>
  347. </div>
  348. <a class="more" href="#"> 查看更多
  349. <i class="m-icon-swapright m-icon-white"></i>
  350. </a>
  351. </div>
  352. </div>
  353. <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
  354. <div class="dashboard-stat purple">
  355. <div class="visual">
  356. <i class="am-icon-android"></i>
  357. </div>
  358. <div class="details">
  359. <div class="number"> 786 </div>
  360. <div class="desc"> 安卓设备 </div>
  361. </div>
  362. <a class="more" href="#"> 查看更多
  363. <i class="m-icon-swapright m-icon-white"></i>
  364. </a>
  365. </div>
  366. </div>
  367. </div>
  368. <div class="row">
  369. <div class="am-u-md-6 am-u-sm-12 row-mb">
  370. <div class="tpl-portlet">
  371. <div class="tpl-portlet-title">
  372. <div class="tpl-caption font-green ">
  373. <i class="am-icon-cloud-download"></i>
  374. <span> Cloud 数据统计</span>
  375. </div>
  376. <div class="actions">
  377. <ul class="actions-btn">
  378. <li class="red-on">昨天</li>
  379. <li class="green">前天</li>
  380. <li class="blue">本周</li>
  381. </ul>
  382. </div>
  383. </div>
  384. <!--此部分数据请在 js文件夹下中的 app.js 中的 “百度图表A” 处修改数据 插件使用的是 百度echarts-->
  385. <div class="tpl-echarts" id="tpl-echarts-A">
  386. </div>
  387. </div>
  388. </div>
  389. <div class="am-u-md-6 am-u-sm-12 row-mb">
  390. <div class="tpl-portlet">
  391. <div class="tpl-portlet-title">
  392. <div class="tpl-caption font-red ">
  393. <i class="am-icon-bar-chart"></i>
  394. <span> Cloud 动态资料</span>
  395. </div>
  396. <div class="actions">
  397. <ul class="actions-btn">
  398. <li class="purple-on">昨天</li>
  399. <li class="green">前天</li>
  400. <li class="dark">本周</li>
  401. </ul>
  402. </div>
  403. </div>
  404. <div class="tpl-scrollable">
  405. <div class="number-stats">
  406. <div class="stat-number am-fl am-u-md-6">
  407. <div class="title am-text-right"> Total </div>
  408. <div class="number am-text-right am-text-warning"> 2460 </div>
  409. </div>
  410. <div class="stat-number am-fr am-u-md-6">
  411. <div class="title"> Total </div>
  412. <div class="number am-text-success"> 2460 </div>
  413. </div>
  414. </div>
  415. <table class="am-table tpl-table">
  416. <thead>
  417. <tr class="tpl-table-uppercase">
  418. <th>人员</th>
  419. <th>余额</th>
  420. <th>次数</th>
  421. <th>效率</th>
  422. </tr>
  423. </thead>
  424. <tbody>
  425. <tr>
  426. <td>
  427. <img src="assets/img/user01.png" alt="" class="user-pic">
  428. <a class="user-name" href="###">禁言小张</a>
  429. </td>
  430. <td>¥3213</td>
  431. <td>65</td>
  432. <td class="font-green bold">26%</td>
  433. </tr>
  434. <tr>
  435. <td>
  436. <img src="assets/img/user02.png" alt="" class="user-pic">
  437. <a class="user-name" href="###">Alex.</a>
  438. </td>
  439. <td>¥2635</td>
  440. <td>52</td>
  441. <td class="font-green bold">32%</td>
  442. </tr>
  443. <tr>
  444. <td>
  445. <img src="assets/img/user03.png" alt="" class="user-pic">
  446. <a class="user-name" href="###">Tinker404</a>
  447. </td>
  448. <td>¥1267</td>
  449. <td>65</td>
  450. <td class="font-green bold">51%</td>
  451. </tr>
  452. <tr>
  453. <td>
  454. <img src="assets/img/user04.png" alt="" class="user-pic">
  455. <a class="user-name" href="###">Arron.y</a>
  456. </td>
  457. <td>¥657</td>
  458. <td>65</td>
  459. <td class="font-green bold">73%</td>
  460. </tr>
  461. <tr>
  462. <td>
  463. <img src="assets/img/user05.png" alt="" class="user-pic">
  464. <a class="user-name" href="###">Yves</a>
  465. </td>
  466. <td>¥3907</td>
  467. <td>65</td>
  468. <td class="font-green bold">12%</td>
  469. </tr>
  470. <tr>
  471. <td>
  472. <img src="assets/img/user06.png" alt="" class="user-pic">
  473. <a class="user-name" href="###">小黄鸡</a>
  474. </td>
  475. <td>¥900</td>
  476. <td>65</td>
  477. <td class="font-green bold">10%</td>
  478. </tr>
  479. </tbody>
  480. </table>
  481. </div>
  482. </div>
  483. </div>
  484. </div>
  485. <div class="row">
  486. <div class="am-u-md-6 am-u-sm-12 row-mb">
  487. <div class="tpl-portlet">
  488. <div class="tpl-portlet-title">
  489. <div class="tpl-caption font-green ">
  490. <span>指派任务</span>
  491. <span class="caption-helper">16 件</span>
  492. </div>
  493. <div class="tpl-portlet-input">
  494. <div class="portlet-input input-small input-inline">
  495. <div class="input-icon right">
  496. <i class="am-icon-search"></i>
  497. <input type="text" class="form-control form-control-solid" placeholder="搜索..."> </div>
  498. </div>
  499. </div>
  500. </div>
  501. <div id="wrapper" class="wrapper">
  502. <div id="scroller" class="scroller">
  503. <ul class="tpl-task-list">
  504. <li>
  505. <div class="task-checkbox">
  506. <input type="hidden" value="1" name="test">
  507. <input type="checkbox" class="liChild" value="2" name="test"> </div>
  508. <div class="task-title">
  509. <span class="task-title-sp"> Amaze UI Icon 组件目前使用了 Font Awesome </span>
  510. <span class="label label-sm label-success">技术部</span>
  511. <span class="task-bell">
  512. <i class="am-icon-bell-o"></i>
  513. </span>
  514. </div>
  515. <div class="task-config">
  516. <div class="am-dropdown tpl-task-list-dropdown" data-am-dropdown>
  517. <a href="###" class="am-dropdown-toggle tpl-task-list-hover " data-am-dropdown-toggle>
  518. <i class="am-icon-cog"></i> <span class="am-icon-caret-down"></span>
  519. </a>
  520. <ul class="am-dropdown-content tpl-task-list-dropdown-ul">
  521. <li>
  522. <a href="javascript:;">
  523. <i class="am-icon-check"></i> 保存 </a>
  524. </li>
  525. <li>
  526. <a href="javascript:;">
  527. <i class="am-icon-pencil"></i> 编辑 </a>
  528. </li>
  529. <li>
  530. <a href="javascript:;">
  531. <i class="am-icon-trash-o"></i> 删除 </a>
  532. </li>
  533. </ul>
  534. </div>
  535. </div>
  536. </li>
  537. <li>
  538. <div class="task-checkbox">
  539. <input type="hidden" value="1" name="test">
  540. <input type="checkbox" class="liChild" value="2" name="test"> </div>
  541. <div class="task-title">
  542. <span class="task-title-sp"> 在 data-am-dropdown 里指定要适应到的元素,下拉内容的宽度会设置为该元素的宽度。当然可以直接在 CSS 里设置下拉内容的宽度。 </span>
  543. <span class="label label-sm label-danger">运营</span>
  544. </div>
  545. <div class="task-config">
  546. <div class="am-dropdown tpl-task-list-dropdown" data-am-dropdown>
  547. <a href="###" class="am-dropdown-toggle tpl-task-list-hover " data-am-dropdown-toggle>
  548. <i class="am-icon-cog"></i> <span class="am-icon-caret-down"></span>
  549. </a>
  550. <ul class="am-dropdown-content tpl-task-list-dropdown-ul">
  551. <li>
  552. <a href="javascript:;">
  553. <i class="am-icon-check"></i> 保存 </a>
  554. </li>
  555. <li>
  556. <a href="javascript:;">
  557. <i class="am-icon-pencil"></i> 编辑 </a>
  558. </li>
  559. <li>
  560. <a href="javascript:;">
  561. <i class="am-icon-trash-o"></i> 删除 </a>
  562. </li>
  563. </ul>
  564. </div>
  565. </div>
  566. </li>
  567. <li>
  568. <div class="task-checkbox">
  569. <input type="hidden" value="1" name="test">
  570. <input type="checkbox" class="liChild" value="2" name="test"> </div>
  571. <div class="task-title">
  572. <span class="task-title-sp"> 使用 LESS: 通过设置变量 @fa-font-path 覆盖默认的值,如 @fa-font-path: "../fonts";。这个变量定义在 icon.less 里。 </span>
  573. <span class="label label-sm label-warning">市场部</span>
  574. </div>
  575. <div class="task-config">
  576. <div class="am-dropdown tpl-task-list-dropdown" data-am-dropdown>
  577. <a href="###" class="am-dropdown-toggle tpl-task-list-hover " data-am-dropdown-toggle>
  578. <i class="am-icon-cog"></i> <span class="am-icon-caret-down"></span>
  579. </a>
  580. <ul class="am-dropdown-content tpl-task-list-dropdown-ul">
  581. <li>
  582. <a href="javascript:;">
  583. <i class="am-icon-check"></i> 保存 </a>
  584. </li>
  585. <li>
  586. <a href="javascript:;">
  587. <i class="am-icon-pencil"></i> 编辑 </a>
  588. </li>
  589. <li>
  590. <a href="javascript:;">
  591. <i class="am-icon-trash-o"></i> 删除 </a>
  592. </li>
  593. </ul>
  594. </div>
  595. </div>
  596. </li>
  597. <li>
  598. <div class="task-checkbox">
  599. <input type="hidden" value="1" name="test">
  600. <input type="checkbox" class="liChild" value="2" name="test"> </div>
  601. <div class="task-title">
  602. <span class="task-title-sp"> 添加 .am-btn-group-justify class 让按钮组里的按钮平均分布,填满容器宽度。 </span>
  603. <span class="label label-sm label-default">已废弃</span>
  604. </div>
  605. <div class="task-config">
  606. <div class="am-dropdown tpl-task-list-dropdown" data-am-dropdown>
  607. <a href="###" class="am-dropdown-toggle tpl-task-list-hover " data-am-dropdown-toggle>
  608. <i class="am-icon-cog"></i> <span class="am-icon-caret-down"></span>
  609. </a>
  610. <ul class="am-dropdown-content tpl-task-list-dropdown-ul">
  611. <li>
  612. <a href="javascript:;">
  613. <i class="am-icon-check"></i> 保存 </a>
  614. </li>
  615. <li>
  616. <a href="javascript:;">
  617. <i class="am-icon-pencil"></i> 编辑 </a>
  618. </li>
  619. <li>
  620. <a href="javascript:;">
  621. <i class="am-icon-trash-o"></i> 删除 </a>
  622. </li>
  623. </ul>
  624. </div>
  625. </div>
  626. </li>
  627. <li>
  628. <div class="task-checkbox">
  629. <input type="hidden" value="1" name="test">
  630. <input type="checkbox" class="liChild" value="2" name="test"> </div>
  631. <div class="task-title">
  632. <span class="task-title-sp"> 按照示例组织好 HTML 结构(不加 data-am-dropdown 属性),然后通过 JS 来调用。 </span>
  633. <span class="label label-sm label-success">技术部</span>
  634. <span class="task-bell">
  635. <i class="am-icon-bell-o"></i>
  636. </span>
  637. </div>
  638. <div class="task-config">
  639. <div class="am-dropdown tpl-task-list-dropdown" data-am-dropdown>
  640. <a href="###" class="am-dropdown-toggle tpl-task-list-hover " data-am-dropdown-toggle>
  641. <i class="am-icon-cog"></i> <span class="am-icon-caret-down"></span>
  642. </a>
  643. <ul class="am-dropdown-content tpl-task-list-dropdown-ul">
  644. <li>
  645. <a href="javascript:;">
  646. <i class="am-icon-check"></i> 保存 </a>
  647. </li>
  648. <li>
  649. <a href="javascript:;">
  650. <i class="am-icon-pencil"></i> 编辑 </a>
  651. </li>
  652. <li>
  653. <a href="javascript:;">
  654. <i class="am-icon-trash-o"></i> 删除 </a>
  655. </li>
  656. </ul>
  657. </div>
  658. </div>
  659. </li>
  660. <li>
  661. <div class="task-checkbox">
  662. <input type="hidden" value="1" name="test">
  663. <input type="checkbox" class="liChild" value="2" name="test"> </div>
  664. <div class="task-title">
  665. <span class="task-title-sp"> 添加 .am-btn-group-justify class 让按钮组里的按钮平均分布,填满容器宽度。 </span>
  666. <span class="label label-sm label-default">已废弃</span>
  667. </div>
  668. <div class="task-config">
  669. <div class="am-dropdown tpl-task-list-dropdown" data-am-dropdown>
  670. <a href="###" class="am-dropdown-toggle tpl-task-list-hover " data-am-dropdown-toggle>
  671. <i class="am-icon-cog"></i> <span class="am-icon-caret-down"></span>
  672. </a>
  673. <ul class="am-dropdown-content tpl-task-list-dropdown-ul">
  674. <li>
  675. <a href="javascript:;">
  676. <i class="am-icon-check"></i> 保存 </a>
  677. </li>
  678. <li>
  679. <a href="javascript:;">
  680. <i class="am-icon-pencil"></i> 编辑 </a>
  681. </li>
  682. <li>
  683. <a href="javascript:;">
  684. <i class="am-icon-trash-o"></i> 删除 </a>
  685. </li>
  686. </ul>
  687. </div>
  688. </div>
  689. </li>
  690. <li>
  691. <div class="task-checkbox">
  692. <input type="hidden" value="1" name="test">
  693. <input type="checkbox" class="liChild" value="2" name="test"> </div>
  694. <div class="task-title">
  695. <span class="task-title-sp"> 使用 LESS: 通过设置变量 @fa-font-path 覆盖默认的值,如 @fa-font-path: "../fonts";。这个变量定义在 icon.less 里。 </span>
  696. <span class="label label-sm label-warning">市场部</span>
  697. </div>
  698. <div class="task-config">
  699. <div class="am-dropdown tpl-task-list-dropdown" data-am-dropdown>
  700. <a href="###" class="am-dropdown-toggle tpl-task-list-hover " data-am-dropdown-toggle>
  701. <i class="am-icon-cog"></i> <span class="am-icon-caret-down"></span>
  702. </a>
  703. <ul class="am-dropdown-content tpl-task-list-dropdown-ul">
  704. <li>
  705. <a href="javascript:;">
  706. <i class="am-icon-check"></i> 保存 </a>
  707. </li>
  708. <li>
  709. <a href="javascript:;">
  710. <i class="am-icon-pencil"></i> 编辑 </a>
  711. </li>
  712. <li>
  713. <a href="javascript:;">
  714. <i class="am-icon-trash-o"></i> 删除 </a>
  715. </li>
  716. </ul>
  717. </div>
  718. </div>
  719. </li>
  720. <li>
  721. <div class="task-checkbox">
  722. <input type="hidden" value="1" name="test">
  723. <input type="checkbox" class="liChild" value="2" name="test"> </div>
  724. <div class="task-title">
  725. <span class="task-title-sp"> 添加 .am-btn-group-justify class 让按钮组里的按钮平均分布,填满容器宽度。 </span>
  726. <span class="label label-sm label-default">已废弃</span>
  727. </div>
  728. <div class="task-config">
  729. <div class="am-dropdown tpl-task-list-dropdown" data-am-dropdown>
  730. <a href="###" class="am-dropdown-toggle tpl-task-list-hover " data-am-dropdown-toggle>
  731. <i class="am-icon-cog"></i> <span class="am-icon-caret-down"></span>
  732. </a>
  733. <ul class="am-dropdown-content tpl-task-list-dropdown-ul">
  734. <li>
  735. <a href="javascript:;">
  736. <i class="am-icon-check"></i> 保存 </a>
  737. </li>
  738. <li>
  739. <a href="javascript:;">
  740. <i class="am-icon-pencil"></i> 编辑 </a>
  741. </li>
  742. <li>
  743. <a href="javascript:;">
  744. <i class="am-icon-trash-o"></i> 删除 </a>
  745. </li>
  746. </ul>
  747. </div>
  748. </div>
  749. </li>
  750. <li>
  751. <div class="task-checkbox">
  752. <input type="hidden" value="1" name="test">
  753. <input type="checkbox" class="liChild" value="2" name="test"> </div>
  754. <div class="task-title">
  755. <span class="task-title-sp"> 按照示例组织好 HTML 结构(不加 data-am-dropdown 属性),然后通过 JS 来调用。 </span>
  756. <span class="label label-sm label-success">技术部</span>
  757. <span class="task-bell">
  758. <i class="am-icon-bell-o"></i>
  759. </span>
  760. </div>
  761. <div class="task-config">
  762. <div class="am-dropdown tpl-task-list-dropdown" data-am-dropdown>
  763. <a href="###" class="am-dropdown-toggle tpl-task-list-hover " data-am-dropdown-toggle>
  764. <i class="am-icon-cog"></i> <span class="am-icon-caret-down"></span>
  765. </a>
  766. <ul class="am-dropdown-content tpl-task-list-dropdown-ul">
  767. <li>
  768. <a href="javascript:;">
  769. <i class="am-icon-check"></i> 保存 </a>
  770. </li>
  771. <li>
  772. <a href="javascript:;">
  773. <i class="am-icon-pencil"></i> 编辑 </a>
  774. </li>
  775. <li>
  776. <a href="javascript:;">
  777. <i class="am-icon-trash-o"></i> 删除 </a>
  778. </li>
  779. </ul>
  780. </div>
  781. </div>
  782. </li>
  783. </ul>
  784. </div>
  785. </div>
  786. </div>
  787. </div>
  788. <div class="am-u-md-6 am-u-sm-12 row-mb">
  789. <div class="tpl-portlet">
  790. <div class="tpl-portlet-title">
  791. <div class="tpl-caption font-green ">
  792. <span>项目进度</span>
  793. </div>
  794. </div>
  795. <div class="am-tabs tpl-index-tabs" data-am-tabs>
  796. <ul class="am-tabs-nav am-nav am-nav-tabs">
  797. <li class="am-active"><a href="#tab1">进行中</a></li>
  798. <li><a href="#tab2">已完成</a></li>
  799. </ul>
  800. <div class="am-tabs-bd">
  801. <div class="am-tab-panel am-fade am-in am-active" id="tab1">
  802. <div id="wrapperA" class="wrapper">
  803. <div id="scroller" class="scroller">
  804. <ul class="tpl-task-list tpl-task-remind">
  805. <li>
  806. <div class="cosB">
  807. 12分钟前
  808. </div>
  809. <div class="cosA">
  810. <span class="cosIco">
  811. <i class="am-icon-bell-o"></i>
  812. </span>
  813. <span> 注意:Chrome 和 Firefox 下, display: inline-block; 或 display: block; 的元素才会应用旋转动画。<span class="tpl-label-info"> 提取文件
  814. <i class="am-icon-share"></i>
  815. </span></span>
  816. </div>
  817. </li>
  818. <li>
  819. <div class="cosB">
  820. 36分钟前
  821. </div>
  822. <div class="cosA">
  823. <span class="cosIco label-danger">
  824. <i class="am-icon-bolt"></i>
  825. </span>
  826. <span> FontAwesome 在绘制图标的时候不同图标宽度有差异, 添加 .am-icon-fw 将图标设置为固定的宽度,解决宽度不一致问题(v2.3 新增)。</span>
  827. </div>
  828. </li>
  829. <li>
  830. <div class="cosB">
  831. 2小时前
  832. </div>
  833. <div class="cosA">
  834. <span class="cosIco label-info">
  835. <i class="am-icon-bullhorn"></i>
  836. </span>
  837. <span> 使用 flexbox 实现,只兼容 IE 10+ 及其他现代浏览器。</span>
  838. </div>
  839. </li>
  840. <li>
  841. <div class="cosB">
  842. 1天前
  843. </div>
  844. <div class="cosA">
  845. <span class="cosIco label-warning">
  846. <i class="am-icon-plus"></i>
  847. </span>
  848. <span> 部分用户反应在过长的 Tabs 中滚动页面时会意外触发 Tab 切换事件,用户可以选择禁用触控操作。</span>
  849. </div>
  850. </li>
  851. <li>
  852. <div class="cosB">
  853. 12分钟前
  854. </div>
  855. <div class="cosA">
  856. <span class="cosIco">
  857. <i class="am-icon-bell-o"></i>
  858. </span>
  859. <span> 注意:Chrome 和 Firefox 下, display: inline-block; 或 display: block; 的元素才会应用旋转动画。<span class="tpl-label-info"> 提取文件
  860. <i class="am-icon-share"></i>
  861. </span></span>
  862. </div>
  863. </li>
  864. <li>
  865. <div class="cosB">
  866. 36分钟前
  867. </div>
  868. <div class="cosA">
  869. <span class="cosIco label-danger">
  870. <i class="am-icon-bolt"></i>
  871. </span>
  872. <span> FontAwesome 在绘制图标的时候不同图标宽度有差异, 添加 .am-icon-fw 将图标设置为固定的宽度,解决宽度不一致问题(v2.3 新增)。</span>
  873. </div>
  874. </li>
  875. <li>
  876. <div class="cosB">
  877. 2小时前
  878. </div>
  879. <div class="cosA">
  880. <span class="cosIco label-info">
  881. <i class="am-icon-bullhorn"></i>
  882. </span>
  883. <span> 使用 flexbox 实现,只兼容 IE 10+ 及其他现代浏览器。</span>
  884. </div>
  885. </li>
  886. </ul>
  887. </div>
  888. </div>
  889. </div>
  890. <div class="am-tab-panel am-fade" id="tab2">
  891. <div id="wrapperB" class="wrapper">
  892. <div id="scroller" class="scroller">
  893. <ul class="tpl-task-list tpl-task-remind">
  894. <li>
  895. <div class="cosB">
  896. 12分钟前
  897. </div>
  898. <div class="cosA">
  899. <span class="cosIco">
  900. <i class="am-icon-bell-o"></i>
  901. </span>
  902. <span> 注意:Chrome 和 Firefox 下, display: inline-block; 或 display: block; 的元素才会应用旋转动画。<span class="tpl-label-info"> 提取文件
  903. <i class="am-icon-share"></i>
  904. </span></span>
  905. </div>
  906. </li>
  907. <li>
  908. <div class="cosB">
  909. 36分钟前
  910. </div>
  911. <div class="cosA">
  912. <span class="cosIco label-danger">
  913. <i class="am-icon-bolt"></i>
  914. </span>
  915. <span> FontAwesome 在绘制图标的时候不同图标宽度有差异, 添加 .am-icon-fw 将图标设置为固定的宽度,解决宽度不一致问题(v2.3 新增)。</span>
  916. </div>
  917. </li>
  918. <li>
  919. <div class="cosB">
  920. 2小时前
  921. </div>
  922. <div class="cosA">
  923. <span class="cosIco label-info">
  924. <i class="am-icon-bullhorn"></i>
  925. </span>
  926. <span> 使用 flexbox 实现,只兼容 IE 10+ 及其他现代浏览器。</span>
  927. </div>
  928. </li>
  929. <li>
  930. <div class="cosB">
  931. 1天前
  932. </div>
  933. <div class="cosA">
  934. <span class="cosIco label-warning">
  935. <i class="am-icon-plus"></i>
  936. </span>
  937. <span> 部分用户反应在过长的 Tabs 中滚动页面时会意外触发 Tab 切换事件,用户可以选择禁用触控操作。</span>
  938. </div>
  939. </li>
  940. <li>
  941. <div class="cosB">
  942. 12分钟前
  943. </div>
  944. <div class="cosA">
  945. <span class="cosIco">
  946. <i class="am-icon-bell-o"></i>
  947. </span>
  948. <span> 注意:Chrome 和 Firefox 下, display: inline-block; 或 display: block; 的元素才会应用旋转动画。<span class="tpl-label-info"> 提取文件
  949. <i class="am-icon-share"></i>
  950. </span></span>
  951. </div>
  952. </li>
  953. <li>
  954. <div class="cosB">
  955. 36分钟前
  956. </div>
  957. <div class="cosA">
  958. <span class="cosIco label-danger">
  959. <i class="am-icon-bolt"></i>
  960. </span>
  961. <span> FontAwesome 在绘制图标的时候不同图标宽度有差异, 添加 .am-icon-fw 将图标设置为固定的宽度,解决宽度不一致问题(v2.3 新增)。</span>
  962. </div>
  963. </li>
  964. <li>
  965. <div class="cosB">
  966. 2小时前
  967. </div>
  968. <div class="cosA">
  969. <span class="cosIco label-info">
  970. <i class="am-icon-bullhorn"></i>
  971. </span>
  972. <span> 使用 flexbox 实现,只兼容 IE 10+ 及其他现代浏览器。</span>
  973. </div>
  974. </li>
  975. </ul>
  976. </div>
  977. </div>
  978. </div>
  979. </div>
  980. </div>
  981. </div>
  982. </div>
  983. </div>
  984. </div>
  985. </div>
  986. <script src="assets/js/jquery-2.1.1.js"></script>
  987. <script src="assets/js/amazeui.min.js"></script>
  988. <script src="assets/js/iscroll.js"></script>
  989. <script src="assets/js/app.js"></script>
  990. </body>
  991. </html>