123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
- <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
- <title>title</title>
- <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
- <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
- <link href="../../b/css/bootstrap.min.css" rel="stylesheet">
- <!--<link href="../../b/css/base.css" rel="stylesheet">-->
- <link href="../../b/css/style.css" rel="stylesheet">
- <style>
- body {
- width: 100% !important;
- overflow: hidden;
- }
- .bar {
- width: 100% !important;
- height: 170px;
- }
- .box-content {
- border: 0px solid #fff;
- margin-top: -30px;
- }
- .quan {
- width: 100%;
- height: 180px !important;
- margin-top: 20px;
- margin-left: -50px;
- }
- .text-right {
- position: absolute;
- right: 10%;
- top: 20%;
- }
- .aui-table-title ul, .aui-table-content ul, .aui-table-page ul {
- display: flex;
- display: -webkit-flex;
- }
- .aui-table-title ul li, .aui-table-content ul li, .aui-table-page ul li {
- flex: 1;
- text-align: center;
- color: #fff;
- padding: 8px 0;
- font-size: 0.6rem;
- }
- .aui-table-content ul {
- border-bottom: 1px solid #fff;
- }
- .aui-table-content ul li {
- border-right: 1px solid #fff;
- color: #007f86;
- font-size: 0.6rem;
- }
- .demo {
- background-color: #007f86;
- }
- .demo2 {
- background-color: #b5b6b6;
- }
- .aui-table-page ul li:first-of-type {
- flex: 2;
- text-align: center;
- }
- input[type=number] {
- -moz-appearance: textfield;
- }
- input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
- -webkit-appearance: none;
- margin: 0;
- }
- .aui-page-input {
- width: 80% !important;
- background-color: #fff !important;
- height: 1.1rem !important;
- padding: 0px 5px !important;
- font-size: 0.7rem !important;
- margin-top: -2px !important;
- }
- /* 筛选条件 */
- .aui-tiaojian {
- padding: 5px 10px;
- border: 1px solid #ddd;
- width: 98%;
- margin-left: 1%;
- border-radius: 5px;
- margin: 2% 0;
- }
- .aui-tiaojian .aui-tiaojian-item {
- padding: 5px;
- }
- .aui-tiaojian .aui-tiaojian-item:first-of-type {
- border-bottom: 1px solid #ddd;
- }
- .aui-tiaojian .aui-tiaojian-item em {
- padding: 1px 5px;
- background-color: #009944;
- margin-left: 5px;
- color: #fff;
- font-size: 0.6rem;
- }
- .aui-tiaojian .aui-tiaojian-item em .aui-icon-close {
- font-size: 0.6rem;
- margin-left: 10px
- }
- </style>
- </head>
- <body>
- <div id="app">
- <div class="aui-bar aui-bar-btn" style="width:80%;margin-top: 10px;margin-bottom: 10px">
- <div class="aui-bar-btn-item aui-active">
- 出入库分析
- </div>
- <div class="aui-bar-btn-item">
- 成本利润分析
- </div>
- </div>
- <!-- 出入库分析 -->
- <div class="tab-content" id="ss1">
- <div id="xmzt">
- <div class="container-fluid">
- <canvas id="xiangmuzhitou" class="col-lg-12 xiangmuzhitou_height bar"></canvas>
- </div>
- </div>
- <div class="content-title"></div>
- <div class="row">
- <div class="col-lg-12">
- <div class="box float-e-margins">
- <div class="box-title">
- <h5>出入库分析</h5>
- <small class="pull-right"><i>数据截止至:2019-07-01 00:00:00</i></small>
- </div>
- <div class="box-content">
- <div class="row">
- <div class="col-sm-3">
- <ul class="list-group clear-list m-t-md m-b-none">
- <li class="list-group-item fist-item">
- 入库成本金额<span class="pull-right num"> 0.00 </span>
- </li>
- <li class="list-group-item">
- 成本比例 <span class="pull-right num"> 0.00 % </span>
- </li>
- <li class="list-group-item">
- 用户本金损失金额 <span class="pull-right num"> 0.00 </span>
- </li>
- <li class="list-group-item">
- 用户本金损失比例 <span class="pull-right num"> 0.00 % </span>
- </li>
- <li class="list-group-item">
- 合作渠道代偿金额 <span class="pull-right num"> 42,393,865.88 </span>
- </li>
- <li class="list-group-item">
- 项目展期 <span class="pull-right num"> 0.00 </span>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 第二个 -->
- <div class="tab-content" id="ss2">
- <div class="row">
- <div class="col-lg-3 col-sm-6">
- <div class="box float-e-margins">
- <div class="box-content" style="background-color: transparent;">
- <div class="echart-chart">
- <canvas id="baozhangfangshifenbu" class="col-lg-8 xiangmuzhitou_height quan"></canvas>
- <div class="text-right">
- <ul class="list-unstyled">
- <li>
- <a href="#">奥森</a> <span class="glyphicon glyphicon-minus color_4FC1E9"></span>
- </li>
- <li>
- <a href="#">奥森</a> <span class="glyphicon glyphicon-minus color_F89135"></span>
- </li>
- <li>
- <a href="#">奥森</a> <span class="glyphicon glyphicon-minus color_F8585B"></span>
- </li>
- <li>
- <a href="#">奥森</a> <span class="glyphicon glyphicon-minus color_FFDC89"></span>
- </li>
- <li>
- <a href="#">奥森</a> <span class="glyphicon glyphicon-minus color_66CC66"></span>
- </li>
- <li>
- <a href="#">奥森</a> <span class="glyphicon glyphicon-minus color_596373"></span>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="aui-tiaojian"></div>
- <!-- 库存表格展示 -->
- <div class="aui-table-title demo">
- <ul>
- <li>
- 品牌
- </li>
- <li>
- 型号
- </li>
- <li>
- 库存
- </li>
- </ul>
- </div>
- <div class="aui-table-content demo2">
- <ul >
- <li>
- 奥森
- </li>
- <li>
- YC-02
- </li>
- <li>
- 5
- </li>
- </ul>
- <ul >
- <li>
- 奥森
- </li>
- <li>
- YC-02
- </li>
- <li>
- 5
- </li>
- </ul>
- <ul >
- <li>
- 奥森
- </li>
- <li>
- YC-02
- </li>
- <li>
- 5
- </li>
- </ul>
- <ul >
- <li>
- 奥森
- </li>
- <li>
- YC-02
- </li>
- <li>
- 5
- </li>
- </ul>
- <ul >
- <li>
- 奥森
- </li>
- <li>
- YC-02
- </li>
- <li>
- 5
- </li>
- </ul>
- </div>
- </div>
- </div>
- </body>
- <script type="text/javascript" src="../../script/api.js"></script>
- <script type="text/javascript" src="../../script/aui-tab.js" ></script>
- <script type="text/javascript" src="../../script/vue.js"></script>
- <!-- Js -->
- <script src="../../b/js/jquery-1.8.0.min.js"></script>
- <script src="../../b/js/bootstrap.min.js"></script>
- <script src="../../b/js/setting.js"></script>
- <script src="../../b/js/Chart.min.js"></script>
- <script src="../../b/js/echarts-all.js"></script>
- <script type="text/javascript">
- apiready = function() {
- };
- var bar = document.querySelectorAll(".aui-bar-btn");
- if (bar) {
- for (var i = 0; i < bar.length; i++) {
- var d = bar[i];
- var tab = new auiTab({
- element : bar[i],
- repeatClick : true
- }, function(ret) {
- var lo = document.querySelectorAll(".tab-content");
- for (var i = 0; i < lo.length; i++) {
- lo[i].style.display = 'none';
- }
- // ret.index 1开始
- document.getElementById("ss" + ret.index).style.display = "block";
- });
- }
- }
- </script>
- </html>
|