基于SpringBoot的后台管理系统（6）主界面框架

最新推荐文章于 2024-07-30 13:51:05 发布
code&&coder
最新推荐文章于 2024-07-30 13:51:05 发布
阅读量749
点赞数 1
分类专栏： SpringBoot 后台管理系统
本文链接：https://blog.csdn.net/u010906468/article/details/107186201
版权
SpringBoot 后台管理系统专栏收录该内容
9 篇文章 4 订阅
订阅专栏
主界面框架

代码
测试
代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 折叠面板</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>

        .row.no-gutter {
            margin-left: -15px;
            margin-right: -15px;
        }
        .row.no-gutter > [class*='col-'] {
            padding-right: 0;
            padding-left: 0;
        }
    </style>
    <style type="text/css">
        ul li{
            list-style: none;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
            $('.tree li.parent_li > span').on('click', function (e) {
                var children = $(this).parent('li.parent_li').find(' > ul > li');
                if (children.is(":visible")) {
                    children.hide('fast');
                    $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
                } else {
                    children.show('fast');
                    $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
                }
                e.stopPropagation();
            });
        });
    </script>
</head>
<div class="container-fluid">
    <div class="row clearfix no-gutter">
        <div class="col-md-1 column">
            <div class="title_left" style="height: 50px; background-color: #2e6da4">
                <div class="col-md-12">
                    <img src="../image/linux.png" width="157" height="48" style="margin-left: -15px;">
                </div>
            </div>
        </div>
        <div class="col-md-11 column">
            <div class="title_right" style="height: 50px; background-color: #337ab7">
                <div class="col-md-10">
                    <p style="color: white;padding-left: 30px;padding-top: 15px"></p>
                </div>
                <div class="col-md-1">
                    <img src="../image/user.png" class="img-circle" style="margin-left: 120px;margin-top: 10px;">
                </div>
                <div class="col-md-1">
                    <ul class="nav navbar-nav navbar-right" style="background-color: #337ab7">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" style="background-color: #337ab7;color: white;" data-toggle="dropdown">zhanghw<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="">个人中心</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="">修改密码</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="/logout/logout">退出登录</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row clearfix no-gutter">
        <div class="col-md-1 column">
            <div class="body_left" style="height: 890px; background-color: #1b6d85">
                <div class="panel-group" id="accordion" style="background-color: #1b6d85;margin-left: 25px;padding: 0px;border: #1b6d85">
                    <div class="panel panel-default" style="background-color: #1b6d85;border: #1b6d85">
                        <div class="panel-heading" style="background-color: #1b6d85;border: #1b6d85">
                            <h4 class="panel-title" style="background-color: #1b6d85;border: #1b6d85">
                                <a data-toggle="collapse" data-parent="#accordion"
                                   href="#collapseOne">
                                    <p style="color: white;background-color: #1b6d85;margin: 0px;padding: 0px;">我的主页</p>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse" style="margin: 0px;padding: 0px;background-color: #1b6d85;border: #1b6d85">
                            <div class="panel-body" style="margin: 0px;padding: 0px; background-color: #1b6d85;border: #1b6d85">
                                <div class="panel-body" style="margin: 0px;padding: 0px; background-color: #1b6d85;border: #1b6d85">
                                    <a href="#tab_zhanghw" data-toggle="tab" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">zhanghw</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default" style="background-color: #1b6d85;border: #1b6d85">
                        <div class="panel-heading" style="background-color: #1b6d85;border: #1b6d85">
                            <h4 class="panel-title" style="background-color: #1b6d85;border: #1b6d85">
                                <a data-toggle="collapse" data-parent="#accordion"
                                   href="#collapseTwo">
                                    <p style="color: white;background-color: #1b6d85;margin: 0px;padding: 0px;">系统管理</p>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse" style="margin: 0px;padding: 0px;background-color: #1b6d85;border: #1b6d85">
                            <div class="panel-body" style="margin: 0px;padding: 0px; background-color: #1b6d85;border: #1b6d85">
                                <a href="#tab_userMgr" data-toggle="tab" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">用户管理</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">角色管理</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">菜单管理</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">部门管理</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">岗位管理</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">菜单管理</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">参数设置</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">通知公告</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">日志管理</a>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default" style="background-color: #1b6d85;border: #1b6d85">
                        <div class="panel-heading" style="background-color: #1b6d85;border: #1b6d85">
                            <h4 class="panel-title" style="background-color: #1b6d85;border: #1b6d85">
                                <a data-toggle="collapse" data-parent="#accordion"
                                   href="#collapseThree">
                                    <p style="color: white;background-color: #1b6d85;margin: 0px;padding: 0px;">系统监控</p>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse" style="margin: 0px;padding: 0px;background-color: #1b6d85;border: #1b6d85">
                            <div class="panel-body" style="margin: 0px;padding: 0px; background-color: #1b6d85;border: #1b6d85">
                                <div class="panel-body" style="margin: 0px;padding: 0px; background-color: #1b6d85;border: #1b6d85">
                                    <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">在线用户</a>
                                    <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">定时任务</a>
                                    <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">数据监控</a>
                                    <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">服务监控</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-11 column">
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade" id="tab_zhanghw">
                    <div class="row clearfix" style="margin-left: 15px;margin-top: 15px;margin-right: 15px; background-color: whitesmoke">
                        <div class="col-md-6 column">
                            <div><p>zhanghw后台管理框架</p></div>
                            <div><p>该框架可用于所有的Web应用程序，如网站后台，网站后台中心，CMS，CRM，OA等等。当然，你也可以对其进行深度定制，以做出更强的系统。所有前后端代码经过封装，出错率低，易于维护。同时支持移动客户端访问，系统会陆续更新一些实用功能</p></div>
                            <div><p>当前版本：v1.0.0</p></div>
                        </div>
                        <div class="col-md-6 column">
                            <div><p>技术选型：</p></div>
                            <div><p>1.核心框架：Spring Boot</p></div>
                            <div><p>2.安全框架：Apache Shiro</p></div>
                            <div><p>3.模板引擎：Thymeleaf</p></div>
                            <div><p>4.持久层框架：MyBatis</p></div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab_userMgr">
                    <div class="row">
                        <div class="col-md-1 column">
                            <div class="tree" style="background-color: whitesmoke; margin-top: 10px;">
                                <ul style="margin-left: -40px;padding-left: -40px;">
                                    <li>
                                        <span class="btn btn-sm"><i class="glyphicon glyphicon-exclamation-sign"></i>zhanghw科技</span>
                                        <ul style="margin-left: -30px;padding-left: -30px;">
                                            <li>
                                                <span class="btn btn-sm"><i class="glyphicon glyphicon-list-alt"></i> 深圳总公司</span>
                                                <ul style="margin-left: -20px;padding-left: -20px;">
                                                    <li>
                                                        <span class="btn btn-sm"><i class="glyphicon glyphicon-file"></i> 研发部门</span>
                                                    </li>
                                                    <li>
                                                        <span class="btn btn-sm"><i class="glyphicon glyphicon-file"></i> 测试部门</span>
                                                    </li>
                                                    <li>
                                                        <span class="btn btn-sm"><i class="glyphicon glyphicon-file"></i> 销售部门</span>
                                                    </li>
                                                    <li>
                                                        <span class="btn btn-sm"><i class="glyphicon glyphicon-file"></i> 财务部门</span>
                                                    </li>
                                                    <li>
                                                        <span class="btn btn-sm"><i class="glyphicon glyphicon-file"></i> 运维部门</span>
                                                    </li>
                                                    <li>
                                                        <span class="btn btn-sm"><i class="glyphicon glyphicon-file"></i> 法务部门</span>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <span class="btn btn-sm"><i class="glyphicon glyphicon-list-alt"></i> 上海分公司</span>
                                                <ul style="margin-left: -20px;padding-left: -20px;">
                                                    <li>
                                                        <span class="btn btn-sm"><i class="glyphicon glyphicon-file"></i> 研发部门</span>
                                                    </li>
                                                    <li>
                                                        <span class="btn btn-sm"><i class="glyphicon glyphicon-file"></i> 测试部门</span>
                                                    </li>
                                                    <li>
                                                        <span class="btn btn-sm"><i class="glyphicon glyphicon-file"></i> 销售部门</span>
                                                    </li>
                                                    <li>
                                                        <span class="btn btn-sm"><i class="glyphicon glyphicon-file"></i> 财务部门</span>
                                                    </li>
                                                    <li>
                                                        <span class="btn btn-sm"><i class="glyphicon glyphicon-file"></i> 运维部门</span>
                                                    </li>
                                                    <li>
                                                        <span class="btn btn-sm"><i class="glyphicon glyphicon-file"></i> 法务部门</span>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>

                        </div>
                        <div class="col-md-11 column">
                            <div class="row clearfix" style="margin-right: 15px;margin-top: 10px;">
                                <div class="col-md-12 column" style="background-color: whitesmoke;height: 60px;">
                                    <p>任你怎说安守我本分，始终相信沉默是金--张国荣</p>
                                    <button id='add'    type='button' style="background-color: #4CAF50;border: none">新增</button>
                                    <button id='modify' type='button' style="background-color: #008CBA;border: none">修改</button>
                                    <button id='del'    type='button' style="background-color: #f44336;border: none">删除</button>
                                    <button id='import' type='button' style="background-color: #985f0d;color: black;border: none">导入</button>
                                    <button id='export' type='button' style="background-color: #555555;color: white;border: none">导出</button>
                                </div>
                            </div>
                            <div class="row clearfix" style="margin-right: 15px;margin-top: 10px;">
                                <div class="col-md-12 column" style="background-color: whitesmoke; height: 830px;">
                                    <table class="table table-striped">
                                        <thead>
                                        <tr>
                                            <th><input type="checkbox"></th>
                                            <th>用户ID</th>
                                            <th>登录名称</th>
                                            <th>用户名称</th>
                                            <th>所属部门</th>
                                            <th>手机号码</th>
                                            <th>用户状态</th>
                                            <th>创建时间</th>
                                            <th>登录时间</th>
                                            <th style="padding-left: 60px;">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <th><input type="checkbox"></th>
                                            <td>1</td>
                                            <td>admin</td>
                                            <td>zhw</td>
                                            <td>研发部门</td>
                                            <td>18888888888</td>
                                            <td>在线</td>
                                            <td>2020年7月7日10:18:52</td>
                                            <td>2020年7月7日10:20:40</td>
                                            <td>
                                                <button id='update' type='button' style="background-color: #2aabd2;border: none">编辑</button>
                                                <button id='delete' type='button' style="background-color: #f44336;border: none">删除</button>
                                                <button id='reset'  type='button' style="background-color: #8c8c8c;border: none">重置</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th><input type="checkbox"></th>
                                            <td>2</td>
                                            <td>vip</td>
                                            <td>wang</td>
                                            <td>测试部门</td>
                                            <td>1999999999</td>
                                            <td>离线</td>
                                            <td>2020年7月7日10:18:58</td>
                                            <td>2020年7月7日10:20:51</td>
                                            <td>
                                                <button id='update1' type='button' style="background-color: #2aabd2;border: none">编辑</button>
                                                <button id='delete1' type='button' style="background-color: #f44336;border: none">删除</button>
                                                <button id='reset1'  type='button' style="background-color: #8c8c8c;border: none">重置</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th><input type="checkbox"></th>
                                            <td>3</td>
                                            <td>visitor</td>
                                            <td>wang</td>
                                            <td>总监部门</td>
                                            <td>1999999999</td>
                                            <td>离线</td>
                                            <td>2020年7月7日10:18:58</td>
                                            <td>2020年7月7日10:20:51</td>
                                            <td>
                                                <button id='update2' type='button' style="background-color: #2aabd2;border: none">编辑</button>
                                                <button id='delete2' type='button' style="background-color: #f44336;border: none">删除</button>
                                                <button id='reset2'  type='button' style="background-color: #8c8c8c;border: none">重置</button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade in active" id="tab_welcome">
                    <div class="row clearfix" style="margin-left: 15px;margin-top: 15px;margin-right: 15px; background-color: whitesmoke;height: 50px;">
                        <div class="col-md-12 column">
                            <div><p align="center" style="color: red;font-family: 'Microsoft Yi Baiti';font-size: 20px;">仅供学习和交流，严禁用于任何商业用途！</p></div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="ejb">
                    <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<body>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
</body>
</html>