完成数据库展示页的静态样式，完成用户数据展示页的静态样式

public/scr/index_databaseList/css/Default.css

@@ -0,0 +1,196 @@
+a{
+	text-decoration: none;/*去除a标签下划线*/
+}
+
+/*顶部导航栏样式*/
+.container{
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+}
+.header{
+	display: flex;
+	height: 64px;
+	background-color: #2196f3;
+	box-shadow: 0 4 5 #c4c0bd;
+	box-shadow: 0px 4px 5px #c4c0bd;/*边框阴影*/
+	align-items: baseline;
+}
+.header i{
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    color: #fff;
+}
+.header_column{
+    display: flex;
+    flex: 1;
+    width: 275px;
+    height: 22px;
+    margin: auto 0;
+    align-items: center;
+}
+.header_column i{
+	margin-left: 40px;
+	cursor: pointer;
+}
+.img_left{
+	flex-direction: row;
+	width: 25px;
+	height: 25px;
+}
+.header_column a{
+	font-size: 24px;
+	font-family: Roboto,Noto,Helvetica,Arial,sans-serif;/*字体样式*/
+	color: #fff;
+	margin-left: 34px;
+}
+.header_icon{
+	display: flex;
+    flex: 1;
+    justify-content: flex-end;
+    margin: auto;
+    margin-right: 25px;
+}
+
+/*左侧导航栏样式*/
+.body{
+	display: flex;
+}
+#sidebar{
+	width: 225px;
+    height: 500px;
+    flex: 1;
+    flex-direction: column;
+    position: relative;
+	top: 0px;
+    left: -225px;
+}
+.row{
+    height: 49px;
+    display: flex;
+    width: 225px;
+    margin: 0 21px;
+    justify-content: flex-start;
+    align-items: center;
+}
+.row i{
+	width: 24px;
+	height: 24px;
+	font-size: 24px;
+	color: #757474;
+	margin-left: 18px;
+}
+.row p{
+    color: #333;
+    margin-left: 35px;
+}
+
+/*页面导航样式*/
+.main{
+	width: 100%;
+    height: auto!important;
+    color: black;
+    display: flex;
+    flex: 5;
+}
+.main_row{
+	width: 1125px;
+	height: 140px;
+	padding: 10px;
+	position: relative;
+	top: 47px;
+}
+.icon{
+	float: left;
+}
+.col_user{
+    float: left;
+    width: 330px;
+    height: 74px;
+    padding: 10px;
+}
+.col_database{
+	float: left;
+	width: 330px;
+	height: 74px;
+	padding: 10px;
+}
+.col_service{
+	float: left;
+	width: 330px;
+	height: 74px;
+	padding: 10px;
+}
+.main_row i{
+	width: 74px;
+	height: 74px;
+	font-size: 74px;
+	color: #757474;
+}
+
+/*文本和数字样式*/
+.col_text{
+	float: left;
+}
+.user_text{
+	padding: 10px 5px;
+	font-size: 18px;
+	color: #333;
+}
+.database_text{
+	padding: 10px 5px;
+	font-size: 18px;
+	color: #333;
+}
+.service_text{
+	padding: 10px 5px;
+	font-size: 18px;
+	color: #333;
+}
+.user_number{
+	padding: 0px 5px;
+	font-size: 24px;
+	color: #333;
+	line-height: 0.7;
+}
+.database_number{
+	padding: 0px 5px;
+	font-size: 24px;
+	color: #333;
+	line-height: 0.7;
+}
+.service_number{
+	padding: 0px 5px;
+	font-size: 24px;
+	color: #333;
+    line-height: 0.7;
+}
+
+
+/*font-icon替换矢量图*/
+@font-face {
+        font-family: 'Material Icons';
+        font-style: normal;
+        font-weight: 400;
+        src: local('Material Icons'),
+        local('MaterialIcons-Regular'),
+        url(MaterialIcons-Regular.woff2) format('woff2'),
+        url(MaterialIcons-Regular.woff) format('woff');
+    }
+
+    .material-icons {
+    	font-style: normal;
+        font-family: 'Material Icons';
+        /* Support for all WebKit browsers. */
+        -webkit-font-smoothing: antialiased;
+        /* Support for Safari and Chrome. */
+        text-rendering: optimizeLegibility;
+        /* Support for Firefox. */
+        -moz-osx-font-smoothing: grayscale;
+        /* Support for IE. */
+        -webkit-font-feature-settings: 'liga';
+        -moz-font-feature-settings: 'liga';
+        font-feature-settings: 'liga';
+    }

public/scr/index_databaseList/css/databaseList.css

@@ -0,0 +1,182 @@
+@charset "UTF-8";
+/**
+ *
+ * @authors ide
+ * @email   794958215@qq.com
+ * @date    2018-06-14 19:20:45
+ * @version $Id$
+ */
+ *{margin: 0;padding: 0;}
+ a{text-decoration: none;}
+ ul,li{list-style: none;}
+body{font-size: 14px;font-family: "微软雅黑";}
+
+.mdui-container{
+    height: auto !important;
+    /*height: 1640px;*/
+    /* width: 90%; */
+    width:auto !important;
+    margin: auto;
+}
+.mdui-text-color-theme{
+    color:#2196f3!important;
+    line-height: 60px;
+}
+.mdui-table-fluid{
+    width: 100%;
+    border: 1px solid rgba(0,0,0,.12);
+    border-top: none;
+    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+}
+.mdui-toolbar{
+    height:56px;
+    width:98%;
+    margin: auto;
+    display: flex;
+}
+.mdui-typo-title{
+    font-size: 20px;
+    font-weight: 500;
+    letter-spacing: .02em;
+}
+.mdui-row1{
+    display: flex;
+    flex: 1;
+    align-items: center;
+}
+.mdui-row2{
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: flex-end;
+}
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Material Icons'),
+    local('MaterialIcons-Regular'),
+    url(MaterialIcons-Regular.woff2) format('woff2'),
+    url(MaterialIcons-Regular.woff) format('woff');
+}
+
+.material-icons {
+    font-family: 'Material Icons';
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+    /* Support for IE. */
+    -webkit-font-feature-settings: 'liga';
+    -moz-font-feature-settings: 'liga';
+    font-feature-settings: 'liga';
+    font-size: 24px;
+    font-style: normal;
+    margin:15px;
+    user-select: none;
+    cursor: pointer;
+}
+.mdui-table{
+    width: 100%;
+    height: 500px;
+}
+
+.mdui-table th{
+    font-size: 13px;
+    line-height: 32px;
+    color: rgba(0,0,0,.54);
+    text-align: left;
+    padding: 15px 16px;
+    border-top: 1px solid rgba(0,0,0,.12);
+}
+.icon{
+    margin-left: 7px;
+    vertical-align: middle;
+}
+.mdui-table-cell-checkbox{
+    width:1px;
+    padding-right: 1px !important;
+}
+.table_column1{
+    /*width:115px;*/
+    width:13%;
+    padding-left: 3px !important;
+}
+.table_column2{
+    /*width:289px;*/
+    width:29%;
+}
+.table_column3{
+    /*width:275px;*/
+    width:16%;
+}
+.table_column5{
+    /*width:95px;*/
+    width:20%;
+    text-align: right !important;
+    padding-right: 3px !important;
+}
+.mdui-table td{
+    /*vertical-align: baseline;*/
+    font-size: 13px;
+    line-height: 32px;
+    color: rgba(0,0,0,.54);
+    text-align: left;
+    padding: 15px 16px;
+    border-top: 1px solid rgba(0,0,0,.12);
+}
+#mdui-btn{
+    margin-right: -1px;
+}
+.mdui-btn{
+    position: relative;
+    display: inline-block;
+    min-width: 88px;
+    height: 36px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0 16px;
+    margin: 0;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 36px;
+    color: inherit;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: .04em;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+    zoom: 1;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background: 0 0;
+    border: none;
+    border-radius: 2px;
+    outline: 0;
+    -webkit-transition: all .2s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .2s cubic-bezier(.4,0,1,1);
+    transition: all .2s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .2s cubic-bezier(.4,0,1,1);
+    transition: all .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,1,1);
+    transition: all .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,1,1),-webkit-box-shadow .2s cubic-bezier(.4,0,1,1);
+    will-change: box-shadow;
+    -webkit-user-drag: none;
+}
+
+.mdui-color-theme-accent{
+    color: rgba(0,0,0,.87)!important;
+    background-color: #40c4ff!important;
+}
+.mdui-float-right{
+    float: right !important;
+}
+.mdui-btn:hover{
+    background: #e8e0e08c;
+}

public/scr/index_databaseList/index-databaseList.html

@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<html lang = "en">
+<head>
+	<meta charset = "UTF-8">
+	<title>CloudSql_首页</title>
+</head>
+<link rel = "stylesheet" type = "text/css" href = "css/Default.css">
+<link rel = "stylesheet" type = "text/css" href = "css/databaseList.css">
+<body>
+	<div class = "container">
+		<!-- 顶部导航栏 -->
+		<div class = "header">
+			<div class = "header_column">
+				<i class = "mdui-icon material-icons" id="icon">menu</i>
+				<a href = "">CloudSQL Admin Panel</a>
+			</div>
+			<div class = 'header_icon'>
+				<a href = ""><i class = "mdui-icon material-icons">exit_to_app</i></a>
+		    </div>
+		</div>
+
+		<!-- body -->
+		<div class = 'body'>
+			<!-- 左侧导航栏 -->
+			<div id="sidebar">
+				<div class = 'row'>
+					<i class = "mdui-list-item-icon mdui-icon material-icons">view_list</i>
+					<p class = 'p_database'>数据库列表</p>
+				</div>
+				<div class = 'row'>
+					<i class = "mdui-list-item-icon mdui-icon material-icons">person</i>
+					<p class = 'p_user'>用户列表</p>
+				</div>
+				<div class = 'row'>
+					<i class = "mdui-list-item-icon mdui-icon material-icons">info</i>
+					<p class = 'p_about'>关于</p>
+				</div>
+			</div>
+
+			<!-- 页面导航 -->
+			<div class = "main">
+				<div class='mdui-container'>
+        <h2 class='mdui-text-color-theme'>用户数据库列表</h2>
+        <div class='mdui-table-fluid'>
+            <div class='mdui-toolbar'>
+                <div class='mdui-row1'>
+                    <i class="mdui-icon material-icons">menu</i>
+                    <span class="mdui-typo-title">工具栏</span>
+                </div>
+                <div class='mdui-row2'>
+                        <i class="mdui-icon material-icons">search</i>
+                        <i class="mdui-icon material-icons">refresh</i>
+                </div>
+            </div>
+            <table class='mdui-table'>
+                <thead>
+                    <tr>
+                        <th class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></th>
+                        <th class='table_column1'>数据库名</th>
+                        <th class='table_column2'>用户ID</th>
+                        <th class='table_column3'>用户名称</th>
+                        <th class='table_column4'>创建时间</th>
+                        <th class="table_column5">操作</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button></td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button></td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                </tbody>
+
+            </table>
+            <div class="mdui-float-right">
+                <span class="mdui-float-left">共18页，当前为</span>
+                <input class="mdui-float-left" name="pageNum" type="text">
+                <span class="mdui-float-left">页</span>
+                <button class="mdui-float-left mdui-btn">跳转</button>
+            </div>
+        </div>
+    </div>
+
+			</div>
+		</div>
+	</div>
+
+	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
+	<script src="js/Default.js" type="text/javascript"></script>
+</body>
+</html>

public/scr/index_databaseList/js/Default.js

@@ -0,0 +1,19 @@
+
+// 左导航栏点击事件
+$(function(){
+    var count = 0;
+    $("#icon").click(function() {
+        if(count == 0){
+            count++;
+            // count=1;
+            $('#sidebar').animate({
+                left : 0,
+            },800)
+        }else if (count == 1) {
+            count = 0;
+            $('#sidebar').animate({
+                left : '-225px',
+            },800)
+        }
+    });
+})

public/scr/index_userList/css/Default.css

@@ -0,0 +1,196 @@
+a{
+	text-decoration: none;/*去除a标签下划线*/
+}
+
+/*顶部导航栏样式*/
+.container{
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+}
+.header{
+	display: flex;
+	height: 64px;
+	background-color: #2196f3;
+	box-shadow: 0 4 5 #c4c0bd;
+	box-shadow: 0px 4px 5px #c4c0bd;/*边框阴影*/
+	align-items: baseline;
+}
+.header i{
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    color: #fff;
+}
+.header_column{
+    display: flex;
+    flex: 1;
+    width: 275px;
+    height: 22px;
+    margin: auto 0;
+    align-items: center;
+}
+.header_column i{
+	margin-left: 40px;
+	cursor: pointer;
+}
+.img_left{
+	flex-direction: row;
+	width: 25px;
+	height: 25px;
+}
+.header_column a{
+	font-size: 24px;
+	font-family: Roboto,Noto,Helvetica,Arial,sans-serif;/*字体样式*/
+	color: #fff;
+	margin-left: 34px;
+}
+.header_icon{
+	display: flex;
+    flex: 1;
+    justify-content: flex-end;
+    margin: auto;
+    margin-right: 25px;
+}
+
+/*左侧导航栏样式*/
+.body{
+	display: flex;
+}
+#sidebar{
+	width: 225px;
+    height: 500px;
+    flex: 1;
+    flex-direction: column;
+    position: relative;
+	top: 0px;
+    left: -225px;
+}
+.row{
+    height: 49px;
+    display: flex;
+    width: 225px;
+    margin: 0 21px;
+    justify-content: flex-start;
+    align-items: center;
+}
+.row i{
+	width: 24px;
+	height: 24px;
+	font-size: 24px;
+	color: #757474;
+	margin-left: 18px;
+}
+.row p{
+    color: #333;
+    margin-left: 35px;
+}
+
+/*页面导航样式*/
+.main{
+	width: 100%;
+    height: auto!important;
+    color: black;
+    display: flex;
+    flex: 5;
+}
+.main_row{
+	width: 1125px;
+	height: 140px;
+	padding: 10px;
+	position: relative;
+	top: 47px;
+}
+.icon{
+	float: left;
+}
+.col_user{
+    float: left;
+    width: 330px;
+    height: 74px;
+    padding: 10px;
+}
+.col_database{
+	float: left;
+	width: 330px;
+	height: 74px;
+	padding: 10px;
+}
+.col_service{
+	float: left;
+	width: 330px;
+	height: 74px;
+	padding: 10px;
+}
+.main_row i{
+	width: 74px;
+	height: 74px;
+	font-size: 74px;
+	color: #757474;
+}
+
+/*文本和数字样式*/
+.col_text{
+	float: left;
+}
+.user_text{
+	padding: 10px 5px;
+	font-size: 18px;
+	color: #333;
+}
+.database_text{
+	padding: 10px 5px;
+	font-size: 18px;
+	color: #333;
+}
+.service_text{
+	padding: 10px 5px;
+	font-size: 18px;
+	color: #333;
+}
+.user_number{
+	padding: 0px 5px;
+	font-size: 24px;
+	color: #333;
+	line-height: 0.7;
+}
+.database_number{
+	padding: 0px 5px;
+	font-size: 24px;
+	color: #333;
+	line-height: 0.7;
+}
+.service_number{
+	padding: 0px 5px;
+	font-size: 24px;
+	color: #333;
+    line-height: 0.7;
+}
+
+
+/*font-icon替换矢量图*/
+@font-face {
+        font-family: 'Material Icons';
+        font-style: normal;
+        font-weight: 400;
+        src: local('Material Icons'),
+        local('MaterialIcons-Regular'),
+        url(MaterialIcons-Regular.woff2) format('woff2'),
+        url(MaterialIcons-Regular.woff) format('woff');
+    }
+
+    .material-icons {
+    	font-style: normal;
+        font-family: 'Material Icons';
+        /* Support for all WebKit browsers. */
+        -webkit-font-smoothing: antialiased;
+        /* Support for Safari and Chrome. */
+        text-rendering: optimizeLegibility;
+        /* Support for Firefox. */
+        -moz-osx-font-smoothing: grayscale;
+        /* Support for IE. */
+        -webkit-font-feature-settings: 'liga';
+        -moz-font-feature-settings: 'liga';
+        font-feature-settings: 'liga';
+    }

public/scr/index_userList/css/userList.css

@@ -0,0 +1,182 @@
+@charset "UTF-8";
+/**
+ *
+ * @authors ide
+ * @email   794958215@qq.com
+ * @date    2018-06-14 19:20:45
+ * @version $Id$
+ */
+ *{margin: 0;padding: 0;}
+ a{text-decoration: none;}
+ ul,li{list-style: none;}
+body{font-size: 14px;font-family: "微软雅黑";}
+
+.mdui-container{
+    height: auto !important;
+    /*height: 1640px;*/
+    /* width: 82%; */
+    width:auto !important;
+    margin: auto;
+}
+.mdui-text-color-theme{
+    color:#2196f3!important;
+    line-height: 60px;
+}
+.mdui-table-fluid{
+    width: 100%;
+    border: 1px solid rgba(0,0,0,.12);
+    border-top: none;
+    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+}
+.mdui-toolbar{
+    height:56px;
+    width:98%;
+    margin: auto;
+    display: flex;
+}
+.mdui-typo-title{
+    font-size: 20px;
+    font-weight: 500;
+    letter-spacing: .02em;
+}
+.mdui-row1{
+    display: flex;
+    flex: 1;
+    align-items: center;
+}
+.mdui-row2{
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: flex-end;
+}
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Material Icons'),
+    local('MaterialIcons-Regular'),
+    url(MaterialIcons-Regular.woff2) format('woff2'),
+    url(MaterialIcons-Regular.woff) format('woff');
+}
+
+.material-icons {
+    font-family: 'Material Icons';
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+    /* Support for IE. */
+    -webkit-font-feature-settings: 'liga';
+    -moz-font-feature-settings: 'liga';
+    font-feature-settings: 'liga';
+    font-size: 24px;
+    font-style: normal;
+    margin:15px;
+    user-select: none;
+    cursor: pointer;
+}
+.mdui-table{
+    width: 100%;
+    height: 500px;
+}
+
+.mdui-table th{
+    font-size: 13px;
+    line-height: 32px;
+    color: rgba(0,0,0,.54);
+    text-align: left;
+    padding: 15px 16px;
+    border-top: 1px solid rgba(0,0,0,.12);
+}
+.icon{
+    margin-left: 7px;
+    vertical-align: middle;
+}
+.mdui-table-cell-checkbox{
+    width:1px;
+    padding-right: 1px !important;
+}
+.table_column1{
+    /*width:115px;*/
+    width:13%;
+    padding-left: 3px !important;
+}
+.table_column2{
+    /*width:289px;*/
+    width:29%;
+}
+.table_column3{
+    /*width:275px;*/
+    width:16%;
+}
+.table_column5{
+    /*width:95px;*/
+    width:20%;
+    text-align: right !important;
+    padding-right: 3px !important;
+}
+.mdui-table td{
+    /*vertical-align: baseline;*/
+    font-size: 13px;
+    line-height: 32px;
+    color: rgba(0,0,0,.54);
+    text-align: left;
+    padding: 15px 16px;
+    border-top: 1px solid rgba(0,0,0,.12);
+}
+#mdui-btn{
+    margin-right: -1px;
+}
+.mdui-btn{
+position: relative;
+    display: inline-block;
+    min-width: 88px;
+    height: 36px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0 16px;
+    margin: 0;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 36px;
+    color: inherit;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: .04em;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+    zoom: 1;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background: 0 0;
+    border: none;
+    border-radius: 2px;
+    outline: 0;
+    -webkit-transition: all .2s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .2s cubic-bezier(.4,0,1,1);
+    transition: all .2s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .2s cubic-bezier(.4,0,1,1);
+    transition: all .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,1,1);
+    transition: all .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,1,1),-webkit-box-shadow .2s cubic-bezier(.4,0,1,1);
+    will-change: box-shadow;
+    -webkit-user-drag: none;
+}
+
+.mdui-color-theme-accent{
+    color: rgba(0,0,0,.87)!important;
+    background-color: #40c4ff!important;
+}
+.mdui-float-right{
+    float: right !important;
+}
+.mdui-btn:hover{
+    background: #e8e0e08c;
+}

public/scr/index_userList/index-userList.html

@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<html lang = "en">
+<head>
+	<meta charset = "UTF-8">
+	<title>CloudSql_首页</title>
+</head>
+<link rel = "stylesheet" type = "text/css" href = "css/Default.css">
+<link rel = "stylesheet" type = "text/css" href = "css/userList.css">
+<body>
+	<div class = "container">
+		<!-- 顶部导航栏 -->
+		<div class = "header">
+			<div class = "header_column">
+				<i class = "mdui-icon material-icons" id="icon">menu</i>
+				<a href = "">CloudSQL Admin Panel</a>
+			</div>
+			<div class = 'header_icon'>
+				<a href = ""><i class = "mdui-icon material-icons">exit_to_app</i></a>
+		    </div>
+		</div>
+
+		<!-- body -->
+		<div class = 'body'>
+			<!-- 左侧导航栏 -->
+			<div id="sidebar">
+				<div class = 'row'>
+					<i class = "mdui-list-item-icon mdui-icon material-icons">view_list</i>
+					<p class = 'p_database'>数据库列表</p>
+				</div>
+				<div class = 'row'>
+					<i class = "mdui-list-item-icon mdui-icon material-icons">person</i>
+					<p class = 'p_user'>用户列表</p>
+				</div>
+				<div class = 'row'>
+					<i class = "mdui-list-item-icon mdui-icon material-icons">info</i>
+					<p class = 'p_about'>关于</p>
+				</div>
+			</div>
+
+			<!-- 页面导航 -->
+			<div class = "main">
+				<div class='mdui-container'>
+        <h2 class='mdui-text-color-theme'>用户数据库列表</h2>
+        <div class='mdui-table-fluid'>
+            <div class='mdui-toolbar'>
+                <div class='mdui-row1'>
+                    <i class="mdui-icon material-icons">menu</i>
+                    <span class="mdui-typo-title">工具栏</span>
+                </div>
+                <div class='mdui-row2'>
+                        <i class="mdui-icon material-icons">search</i>
+                        <i class="mdui-icon material-icons">refresh</i>
+                </div>
+            </div>
+            <table class='mdui-table'>
+                <thead>
+                    <tr>
+                        <th class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></th>
+                        <th class='table_column1'>用户昵称</th>
+                        <th class='table_column2'>用户ID</th>
+                        <th class='table_column3'>数据库密码</th>
+                        <th class='table_column4'>用户注册时间</th>
+                        <th class="table_column5">操作</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>shengboceshi1</td>
+                        <td class='table_column2'>014d06ed-e1b9-487e-b1da-ef7c8e02dbc4</td>
+                        <td class='table_column3'></td>
+                        <td class='table_column4'>2017-11-29 07:29:56</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button></td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button></td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                    <tr>
+                         <td class=' mdui-table-cell-checkbox'><i class="material-icons icon">check_box_outline_blank</i></td>
+                        <td class='table_column1'>mcp1</td>
+                        <td class='table_column2'>f7cf0dc7-1447-415c-92c2-d2fe68c2bcf6</td>
+                        <td class='table_column3'>13670264009</td>
+                        <td class='table_column4'>2016-12-20 08:55:44</td>
+                        <td class="table_column5">
+                            <button class="mdui-btn" id='mdui-btn'>查看详情</button>
+                            <button class="mdui-btn mdui-color-theme-accent">删除</button>
+                        </td>
+                    </tr>
+                </tbody>
+
+            </table>
+            <div class="mdui-float-right">
+                <span class="mdui-float-left">共18页，当前为</span>
+                <input class="mdui-float-left" name="pageNum" type="text">
+                <span class="mdui-float-left">页</span>
+                <button class="mdui-float-left mdui-btn">跳转</button>
+            </div>
+        </div>
+    </div>
+
+			</div>
+		</div>
+	</div>
+
+	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
+	<script src="js/Default.js" type="text/javascript"></script>
+</body>
+</html>

public/scr/index_userList/js/Default.js

@@ -0,0 +1,19 @@
+
+// 左导航栏点击事件
+$(function(){
+    var count = 0;
+    $("#icon").click(function() {
+        if(count == 0){
+            count++;
+            // count=1;
+            $('#sidebar').animate({
+                left : 0,
+            },800)
+        }else if (count == 1) {
+            count = 0;
+            $('#sidebar').animate({
+                left : '-225px',
+            },800)
+        }
+    });
+})