kucunB_body.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title>title</title>
  8. <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
  9. <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
  10. <link href="../../b/css/bootstrap.min.css" rel="stylesheet">
  11. <!--<link href="../../b/css/base.css" rel="stylesheet">-->
  12. <link href="../../b/css/style.css" rel="stylesheet">
  13. <style>
  14. body {
  15. width: 100% !important;
  16. overflow: hidden;
  17. }
  18. .bar {
  19. width: 100% !important;
  20. height: 170px;
  21. }
  22. .box-content {
  23. border: 0px solid #fff;
  24. margin-top: -30px;
  25. }
  26. .quan {
  27. width: 100%;
  28. height: 180px !important;
  29. margin-top: 20px;
  30. margin-left: -50px;
  31. }
  32. .text-right {
  33. position: absolute;
  34. right: 10%;
  35. top: 20%;
  36. }
  37. .aui-table-title ul, .aui-table-content ul, .aui-table-page ul {
  38. display: flex;
  39. display: -webkit-flex;
  40. }
  41. .aui-table-title ul li, .aui-table-content ul li, .aui-table-page ul li {
  42. flex: 1;
  43. text-align: center;
  44. color: #fff;
  45. padding: 8px 0;
  46. font-size: 0.6rem;
  47. }
  48. .aui-table-content ul {
  49. border-bottom: 1px solid #fff;
  50. }
  51. .aui-table-content ul li {
  52. border-right: 1px solid #fff;
  53. color: #007f86;
  54. font-size: 0.6rem;
  55. }
  56. .demo {
  57. background-color: #007f86;
  58. }
  59. .demo2 {
  60. background-color: #b5b6b6;
  61. }
  62. .aui-table-page ul li:first-of-type {
  63. flex: 2;
  64. text-align: center;
  65. }
  66. input[type=number] {
  67. -moz-appearance: textfield;
  68. }
  69. input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  70. -webkit-appearance: none;
  71. margin: 0;
  72. }
  73. .aui-page-input {
  74. width: 80% !important;
  75. background-color: #fff !important;
  76. height: 1.1rem !important;
  77. padding: 0px 5px !important;
  78. font-size: 0.7rem !important;
  79. margin-top: -2px !important;
  80. }
  81. /* 筛选条件 */
  82. .aui-tiaojian {
  83. padding: 5px 10px;
  84. border: 1px solid #ddd;
  85. width: 98%;
  86. margin-left: 1%;
  87. border-radius: 5px;
  88. margin: 2% 0;
  89. }
  90. .aui-tiaojian .aui-tiaojian-item {
  91. padding: 5px;
  92. }
  93. .aui-tiaojian .aui-tiaojian-item:first-of-type {
  94. border-bottom: 1px solid #ddd;
  95. }
  96. .aui-tiaojian .aui-tiaojian-item em {
  97. padding: 1px 5px;
  98. background-color: #009944;
  99. margin-left: 5px;
  100. color: #fff;
  101. font-size: 0.6rem;
  102. }
  103. .aui-tiaojian .aui-tiaojian-item em .aui-icon-close {
  104. font-size: 0.6rem;
  105. margin-left: 10px
  106. }
  107. </style>
  108. </head>
  109. <body>
  110. <div id="app">
  111. <div class="aui-bar aui-bar-btn" style="width:80%;margin-top: 10px;margin-bottom: 10px">
  112. <div class="aui-bar-btn-item aui-active">
  113. 出入库分析
  114. </div>
  115. <div class="aui-bar-btn-item">
  116. 成本利润分析
  117. </div>
  118. </div>
  119. <!-- 出入库分析 -->
  120. <div class="tab-content" id="ss1">
  121. <div id="xmzt">
  122. <div class="container-fluid">
  123. <canvas id="xiangmuzhitou" class="col-lg-12 xiangmuzhitou_height bar"></canvas>
  124. </div>
  125. </div>
  126. <div class="content-title"></div>
  127. <div class="row">
  128. <div class="col-lg-12">
  129. <div class="box float-e-margins">
  130. <div class="box-title">
  131. <h5>出入库分析</h5>
  132. <small class="pull-right"><i>数据截止至:2019-07-01 00:00:00</i></small>
  133. </div>
  134. <div class="box-content">
  135. <div class="row">
  136. <div class="col-sm-3">
  137. <ul class="list-group clear-list m-t-md m-b-none">
  138. <li class="list-group-item fist-item">
  139. 入库成本金额<span class="pull-right num"> 0.00 </span>
  140. </li>
  141. <li class="list-group-item">
  142. 成本比例 <span class="pull-right num"> 0.00 % </span>
  143. </li>
  144. <li class="list-group-item">
  145. 用户本金损失金额 <span class="pull-right num"> 0.00 </span>
  146. </li>
  147. <li class="list-group-item">
  148. 用户本金损失比例 <span class="pull-right num"> 0.00 % </span>
  149. </li>
  150. <li class="list-group-item">
  151. 合作渠道代偿金额 <span class="pull-right num"> 42,393,865.88 </span>
  152. </li>
  153. <li class="list-group-item">
  154. 项目展期 <span class="pull-right num"> 0.00 </span>
  155. </li>
  156. </ul>
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. <!-- 第二个 -->
  165. <div class="tab-content" id="ss2">
  166. <div class="row">
  167. <div class="col-lg-3 col-sm-6">
  168. <div class="box float-e-margins">
  169. <div class="box-content" style="background-color: transparent;">
  170. <div class="echart-chart">
  171. <canvas id="baozhangfangshifenbu" class="col-lg-8 xiangmuzhitou_height quan"></canvas>
  172. <div class="text-right">
  173. <ul class="list-unstyled">
  174. <li>
  175. <a href="#">奥森</a>&nbsp;<span class="glyphicon glyphicon-minus color_4FC1E9"></span>
  176. </li>
  177. <li>
  178. <a href="#">奥森</a>&nbsp;<span class="glyphicon glyphicon-minus color_F89135"></span>
  179. </li>
  180. <li>
  181. <a href="#">奥森</a>&nbsp;<span class="glyphicon glyphicon-minus color_F8585B"></span>
  182. </li>
  183. <li>
  184. <a href="#">奥森</a>&nbsp;<span class="glyphicon glyphicon-minus color_FFDC89"></span>
  185. </li>
  186. <li>
  187. <a href="#">奥森</a>&nbsp;<span class="glyphicon glyphicon-minus color_66CC66"></span>
  188. </li>
  189. <li>
  190. <a href="#">奥森</a>&nbsp;<span class="glyphicon glyphicon-minus color_596373"></span>
  191. </li>
  192. </ul>
  193. </div>
  194. </div>
  195. </div>
  196. </div>
  197. </div>
  198. </div>
  199. <div class="aui-tiaojian"></div>
  200. <!-- 库存表格展示 -->
  201. <div class="aui-table-title demo">
  202. <ul>
  203. <li>
  204. 品牌
  205. </li>
  206. <li>
  207. 型号
  208. </li>
  209. <li>
  210. 库存
  211. </li>
  212. </ul>
  213. </div>
  214. <div class="aui-table-content demo2">
  215. <ul >
  216. <li>
  217. 奥森
  218. </li>
  219. <li>
  220. YC-02
  221. </li>
  222. <li>
  223. 5
  224. </li>
  225. </ul>
  226. <ul >
  227. <li>
  228. 奥森
  229. </li>
  230. <li>
  231. YC-02
  232. </li>
  233. <li>
  234. 5
  235. </li>
  236. </ul>
  237. <ul >
  238. <li>
  239. 奥森
  240. </li>
  241. <li>
  242. YC-02
  243. </li>
  244. <li>
  245. 5
  246. </li>
  247. </ul>
  248. <ul >
  249. <li>
  250. 奥森
  251. </li>
  252. <li>
  253. YC-02
  254. </li>
  255. <li>
  256. 5
  257. </li>
  258. </ul>
  259. <ul >
  260. <li>
  261. 奥森
  262. </li>
  263. <li>
  264. YC-02
  265. </li>
  266. <li>
  267. 5
  268. </li>
  269. </ul>
  270. </div>
  271. </div>
  272. </div>
  273. </body>
  274. <script type="text/javascript" src="../../script/api.js"></script>
  275. <script type="text/javascript" src="../../script/aui-tab.js" ></script>
  276. <script type="text/javascript" src="../../script/vue.js"></script>
  277. <!-- Js -->
  278. <script src="../../b/js/jquery-1.8.0.min.js"></script>
  279. <script src="../../b/js/bootstrap.min.js"></script>
  280. <script src="../../b/js/setting.js"></script>
  281. <script src="../../b/js/Chart.min.js"></script>
  282. <script src="../../b/js/echarts-all.js"></script>
  283. <script type="text/javascript">
  284. apiready = function() {
  285. };
  286. var bar = document.querySelectorAll(".aui-bar-btn");
  287. if (bar) {
  288. for (var i = 0; i < bar.length; i++) {
  289. var d = bar[i];
  290. var tab = new auiTab({
  291. element : bar[i],
  292. repeatClick : true
  293. }, function(ret) {
  294. var lo = document.querySelectorAll(".tab-content");
  295. for (var i = 0; i < lo.length; i++) {
  296. lo[i].style.display = 'none';
  297. }
  298. // ret.index 1开始
  299. document.getElementById("ss" + ret.index).style.display = "block";
  300. });
  301. }
  302. }
  303. </script>
  304. </html>