vdianying-web
/
dataOverview.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据概览</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-reset.css" rel="stylesheet">
    <!--<link href="css/easyui.css" rel="stylesheet">-->
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/owl.carousel.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-table.css">
    <link rel="stylesheet" href="css/bootstrap-table-fixed-columns.css">
    <!-- Custom styles for pgc -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.js"></script>
    <script src="js/bootstrap-table-fixed-columns.js"></script>
    <script src="js/vue.js"></script>
    <![endif]-->
</head>

<body>
<section id="container" class="">
    <!--header start-->
    <header class="header white-bg">
        <div class="sidebar-toggle-box">
            <div data-original-title="折叠/展开" data-placement="right" class="icon-reorder tooltips"></div>
        </div>
        <!--logo start-->
        <a href="#" class="logo">数据中心</a>
        <!--logo end-->
        <div class="top-nav ">
            <!--search & user info start-->
            <ul class="nav pull-right top-menu">
                <!-- user login dropdown start-->
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <span class="username">王小明</span>
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu extended logout">
                        <div class="log-arrow-up"></div>
                        <li><a href="#"><i class=" icon-suitcase"></i> 账号管理</a></li>
                        <li><a href="#"><i class="icon-cog"></i> 成员管理</a></li>
                        <li><a href="login.html"><i class="icon-key"></i> 注销</a></li>
                    </ul>
                </li>
                <!-- user login dropdown end -->
            </ul>
            <!--search & user info end-->
        </div>
    </header>
    <!--header end-->
    <!--sidebar start-->
    <aside>
        <div id="sidebar" class="nav-collapse ">
            <div class="logo">
                <img src="image/icon-logo.png" alt="logo">
                <p class="sidebar-title">数据中心</p>
            </div>
            <!-- sidebar menu start-->
            <ul class="sidebar-menu">
                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <i class="icon-book"></i>
                        <span>数据汇总</span>
                        <span class="arrow"></span>
                    </a>
                    <ul class="sub">
                        <li class="selected"><a class="" href="">数据概览</a></li>
                        <li><a class="" href="">核心数据</a></li>
                        <li><a class="" href="">详细数据</a></li>
                    </ul>
                </li>
                <li class="sub-menu">
                    <a href="javascript:;" class="">
                        <i class="icon-cogs"></i>
                        <span>表格管理</span>
                        <span class="arrow"></span>
                    </a>
                    <ul class="sub">
                        <li><a class="" href="">项目管理</a></li>
                        <li><a class="" href="">表格权限</a></li>
                        <li><a class="" href="">编辑表格</a></li>
                        <li><a class="" href="">历史表格</a></li>
                    </ul>
                </li>
            </ul>
            <!-- sidebar menu end-->
        </div>
    </aside>
    <!--sidebar end-->
    <!--main content start-->
    <section id="main-content">
        <header class="header white-bg">
            <!--<div class="sidebar-toggle-box">-->
            <!--<div data-original-title="折叠/展开" data-placement="right" class="icon-reorder tooltips"></div>-->
            <!--</div>-->
            <!--&lt;!&ndash;logo start&ndash;&gt;-->
            <!--<a href="#" class="logo">数据中心</a>-->
            <!--&lt;!&ndash;logo end&ndash;&gt;-->
            <div class="top-nav ">
                <span class="add-channel"><img src="image/icon-addChannel.png" alt=""></span>
                <span class="choose-channel"><span class="cc-content">选择渠道查看详细数据 &nbsp; <img src="image/icon-down2.png" alt=""></span></span>
                <!--search & user info start-->
                <ul class="nav pull-right top-menu">
                    <!-- user login dropdown start-->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="username">王晓蒙</span>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu extended logout">
                            <div class="log-arrow-up"></div>
                            <li><a href="#"> 账号管理</a></li>
                            <li><a href="#">成员管理</a></li>
                            <!--<li><a href="login.html"><i class="icon-key"></i> <i class=" icon-suitcase"><i class="icon-cog"></i> </i>注销</a></li>-->
                        </ul>
                    </li>
                    <!-- user login dropdown end -->
                </ul>
                <!--search & user info end-->
            </div>
        </header>
        <section class="wrapper">
            <div class="data-overview">
                <div class="data-type">
                    <div class="type-name">粉丝总量</div>
                    <div class="type-name dt-active">净增粉丝</div>
                    <div class="type-name">播放数</div>
                    <div class="type-name"><img v-on:click="addProject" src="image/icon-plus.png" alt=""></div>
                    <div class="line"></div>
                </div>
                <div class="date-choose">
                    <ul>
                        <li class="dc-date dc-active">按日</li>
                        <li class="dc-date">按周</li>
                        <li class="dc-date">按月</li>
                    </ul>
                    <input type="date">
                    <img class="icon-output" src="image/icon-output.png" alt="">
                    <span>导出</span>
                </div>
                <div class="data-exhibite">
                    <table data-toggle="table" class="table table-bordered table-hover" data-show-columns="true" >
                        <thead>
                        <tr class="">
                            <th>项目/渠道</th>
                            <th>微博</th>
                            <th>微信</th>
                            <th>今日头条</th>
                            <th>QQ空间</th>
                            <th>UC</th>
                        </tr>
                        </thead>
                        <tr>
                            <td>小情书</td>
                            <td>300</td>
                            <td>323</td>
                            <td>3234</td>
                            <td>333</td>
                            <td>2345</td>
                        </tr>
                        <tr>
                            <td>小情书</td>
                            <td>300</td>
                            <td>323</td>
                            <td>3234</td>
                            <td>333</td>
                            <td>2345</td>
                        </tr>
                        <tr>
                            <td>小情书</td>
                            <td>300</td>
                            <td>323</td>
                            <td>3234</td>
                            <td>333</td>
                            <td>2345</td>
                        </tr>
                    </table>
                </div>
            </div>
        </section>
    </section>
    <!--main content end-->
</section>
<!-- js placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/jquery.customSelect.min.js"></script>
<script src="js/jquery.easyui.min.js"></script>
<!--common script for all pages-->
<script src="js/common-scripts.js"></script>
<!--script for this page-->

<script>
    //owl carousel

    $(document).ready(function() {
        $('#sidebar .sub-menu > a').click(function () {

            if($(this).hasClass("closed")) {
                $(this).removeClass("closed");
                $(this).next().slideDown(200);
            } else {
                $(this).addClass("closed");
                $(this).next().slideUp(200);
            }
        });


    });

    //custom select box

    $(function() {
        $('select.styled').customSelect();
    });
</script>
</body>

</html>