图书管理系统之普通用户、超级管理员页面布局（四）
前言：
在上一篇中的登录账号返回不同的控制器视图的方法已经完成，现在要做的就是将普通用户和超级管理员的一个模板给搭建在对应的控制器视图之中，当页面跳转的时候就会展现给我们
回顾：
这是上一篇创建的一个区域控制器，分别对应普通用户、超级管理员，接下来的对应视图就写在下面的两个不同的控制器视图中
Content就是存放我们需要的一些外部文件
![> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jKE77zSG-1624175707420)(G:\MVC项目搭建\图书馆系统搭建\项目笔记\image\four\1、区域.png)]](https://www.icode9.com/i/ll/?i=20210620155531458.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM5Mzc4MTkz,size_16,color_FFFFFF,t_70)
一、普通用户
1.1、效果图
模板主要是在网上下来过来，自己整理出来的，并且也是一套响应式布局
1.2、布局代码
布局就不多说，直接复制代码修改
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="#" rel="icon" />
<link href="~/Areas/JumpFile/Content/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Areas/JumpFile/Content/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/Areas/JumpFile/Content/css/animate.css" rel="stylesheet" />
<link href="~/Areas/JumpFile/Content/css/style.css" rel="stylesheet" />
</head>
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
<!--大盒子-->
<div id="wrapper">
<!--左侧导航开始-->
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="nav-close">
<i class="fa fa-times-circle"></i>
</div>
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<!-- 修改个人质料 -->
<li class="nav-header">
<div class="dropdown profile-element">
<!--头像-->
<span><img alt="image" class="img-circle" src="~/Areas/JumpFile/Content/img/profile_small.jpg" /></span>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<span class="clear">
<span class="block m-t-xs"><strong class="font-bold">Admin</strong></span>
<span class="text-muted text-xs block">普通用户<b class="caret"></b></span>
</span>
</a>
<ul class="dropdown-menu animated fadeInRight m-t-xs">
<li>
<a class="J_menuItem" href="form_avatar.html">修改头像</a>
</li>
<li>
<a class="J_menuItem" href="profile.html">个人资料</a>
</li>
<li>
<a class="J_menuItem" href="contacts.html">联系我们</a>
</li>
<li>
<a class="J_menuItem" href="mailbox.html">信箱</a>
</li>
<li class="divider"></li>
<li>
<a href="/Login/Login">安全退出</a>
</li>
</ul>
</div>
</li>
<!-- 主页 -->
<li>
<a href="#">
<i class="fa fa-home"></i>
<span class="nav-label">借阅管理</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="https://www.csdn.net/" data-index="0">我的主页</a>
</li>
<li>
<a class="J_menuItem" href="https://www.csdn.net/">借阅书籍</a>
</li>
<li>
<a class="J_menuItem" href="https://www.csdn.net/">代换书记</a>
</li>
<li>
<a class="J_menuItem" href="https://www.csdn.net/">借阅记录</a>
</li>
<!-- 跳转新的页面 -->
<li>
<a href="https://www.csdn.net/" target="_blank">我的笔记</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!--左侧导航结束-->
<!--右侧部分开始-->
<div id="page-wrapper" class="gray-bg dashbard-1">
<!-- 顶部第一部份 -->
<div class="row border-bottom">
<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
href="#"><i class="fa fa-bars"></i> </a>
<!-- 顶部查找内容 -->
<form role="search" class="navbar-form-custom" method="post" action="search_results.html">
<div class="form-group">
<input type="text" placeholder="请输入您需要查找的内容 …" class="form-control" name="top-search"
id="top-search">
</div>
</form>
</div>
<!-- 顶部右侧导航 -->
<ul class="nav navbar-top-links navbar-right">
<!-- 邮箱 -->
<li class="dropdown">
<a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
<i class="fa fa-envelope"></i> <span class="label label-warning">16</span>
</a>
<ul class="dropdown-menu dropdown-messages">
<li class="m-t-xs">
<div class="dropdown-messages-box">
<a href="profile.html" class="pull-left">
<img alt="image" class="img-circle" src="~/Areas/JumpFile/Content/img/a7.jpg">
</a>
<div class="media-body">
<small class="pull-right">46小时前</small>
<strong>小四</strong> 这个在日本投降书上签字的军官，建国后一定是个不小的干部吧？
<br>
<small class="text-muted">3天前 2016.11.8</small>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="dropdown-messages-box">
<a href="profile.html" class="pull-left">
<img alt="image" class="img-circle" src="~/Areas/JumpFile/Content/img/a4.jpg">
</a>
<div class="media-body ">
<small class="pull-right text-navy">25小时前</small>
<strong>国民岳父</strong> 如何看待“男子不满自己爱犬被称为狗，刺伤路人”？——这人比犬还凶
<br>
<small class="text-muted">昨天</small>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="text-center link-block">
<a class="J_menuItem" href="mailbox.html">
<i class="fa fa-envelope"></i> <strong> 查看所有消息</strong>
</a>
</div>
</li>
</ul>
</li>
<!-- 信息 -->
<li class="dropdown">
<a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
<i class="fa fa-bell"></i> <span class="label label-primary">8</span>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="mailbox.html">
<div>
<i class="fa fa-envelope fa-fw"></i> 您有16条未读消息
<span class="pull-right text-muted small">4分钟前</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="profile.html">
<div>
<i class="fa fa-qq fa-fw"></i> 3条新回复
<span class="pull-right text-muted small">12分钟钱</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<div class="text-center link-block">
<a class="J_menuItem" href="notifications.html">
<strong>查看所有 </strong>
<i class="fa fa-angle-right"></i>
</a>
</div>
</li>
</ul>
</li>
<!-- 购买 -->
<li class="hidden-xs">
<a href="index_v1.html" class="J_menuItem" data-index="0">
<i class="fa fa-cart-arrow-down"></i> 购买
</a>
</li>
<!-- 主题 -->
<li class="dropdown hidden-xs">
<a class="right-sidebar-toggle" aria-expanded="false">
<i class="fa fa-tasks"></i> 主题
</a>
</li>
</ul>
</nav>
</div>
<!-- 中间顶部第二行导航 -->
<div class="row content-tabs">
<button class="roll-nav roll-left J_tabLeft">
<i class="fa fa-backward"></i>
</button>
<nav class="page-tabs J_menuTabs">
<div class="page-tabs-content">
<a href="javascript:;" class="active J_menuTab" data-id="index_v1.html">首页</a>
</div>
</nav>
<button class="roll-nav roll-right J_tabRight">
<i class="fa fa-forward"></i>
</button>
<!-- 右侧 -->
<div class="btn-group roll-nav roll-right">
<button class="dropdown J_tabClose" data-toggle="dropdown">
关闭操作<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu dropdown-menu-right">
<li class="J_tabShowActive">
<a>定位当前选项卡</a>
</li>
<li class="divider"></li>
<li class="J_tabCloseAll">
<a>关闭全部选项卡</a>
</li>
<li class="J_tabCloseOther">
<a>关闭其他选项卡</a>
</li>
</ul>
</div>
<a href="/Login/Login" class="roll-nav roll-right J_tabExit"><i class="fa fa fa-sign-out"></i> 退出</a>
</div>
<div class="row J_mainContent" id="content-main">
<iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="" frameborder="0"
data-id="" seamless>
</iframe>
</div>
<!-- 页脚说明 -->
<div class="footer">
<div class="pull-right">
© 2021-6-19<a href="#" target="_blank">图书管理系统</a>
</div>
</div>
</div>
<!--右侧部分结束-->
<!--展开主题开始-->
<div id="right-sidebar">
<div class="sidebar-container">
<ul class="nav nav-tabs navs-3">
<!-- 主题 -->
<li class="active">
<a data-toggle="tab" href="#tab-1">
<i class="fa fa-gear"></i> 主题
</a>
</li>
<!-- 通知 -->
<li class="">
<a data-toggle="tab" href="#tab-2">
通知
</a>
</li>
<!-- 项目进度 -->
<li>
<a data-toggle="tab" href="#tab-3">
项目进度
</a>
</li>
</ul>
<!-- 主题展开 -->
<div class="tab-content">
<div id="tab-1" class="tab-pane active">
<div class="sidebar-title">
<h3> <i class="fa fa-comments-o"></i> 主题设置</h3>
<small><i class="fa fa-tim"></i> 你可以从这里选择和预览主题的布局和样式，这些设置会被保存在本地，下次打开的时候会直接应用这些设置。</small>
</div>
<div class="skin-setttings">
<div class="title">主题设置</div>
<div class="setings-item">
<span>收起左侧菜单</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox"
id="collapsemenu">
<label class="onoffswitch-label" for="collapsemenu">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>固定顶部</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="fixednavbar" class="onoffswitch-checkbox"
id="fixednavbar">
<label class="onoffswitch-label" for="fixednavbar">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>
固定宽度
</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="boxedlayout" class="onoffswitch-checkbox"
id="boxedlayout">
<label class="onoffswitch-label" for="boxedlayout">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="title">皮肤选择</div>
<!-- 默认皮肤 -->
<div class="setings-item default-skin nb">
<span class="skin-name ">
<a href="#" class="s-skin-0">
默认皮肤
</a>
</span>
</div>
<!-- 蓝色主题 -->
<div class="setings-item blue-skin nb">
<span class="skin-name ">
<a href="#" class="s-skin-1">
蓝色主题
</a>
</span>
</div>
<!-- 黄色/紫色主题 -->
<div class="setings-item yellow-skin nb">
<span class="skin-name ">
<a href="#" class="s-skin-3">
黄色/紫色主题
</a>
</span>
</div>
</div>
</div>
<!-- 最新通知 -->
<div id="tab-2" class="tab-pane">
<div class="sidebar-title">
<h3> <i class="fa fa-comments-o"></i> 最新通知</h3>
<small><i class="fa fa-tim"></i> 您当前有10条未读信息</small>
</div>
<!-- 展示通知 -->
<div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="~/Areas/JumpFile/Content/img/a1.jpg">
<div class="m-t-xs">
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
</div>
</div>
<div class="media-body">
据天津日报报道：瑞海公司董事长于学伟，副董事长董社轩等10人在13日上午已被控制。
<br>
<small class="text-muted">今天 4:21</small>
</div>
</a>
</div>
</div>
</div>
<!-- 最新任务 -->
<div id="tab-3" class="tab-pane">
<div class="sidebar-title">
<h3> <i class="fa fa-cube"></i> 最新任务</h3>
<small><i class="fa fa-tim"></i> 您当前有14个任务，10个已完成</small>
</div>
<!-- 暂时任务 -->
<ul class="sidebar-list">
<li>
<a href="#">
<div class="small pull-right m-t-xs">9小时以后</div>
<h4>市场调研</h4> 按要求接收教材；
<div class="small">已完成： 22%</div>
<div class="progress progress-mini">
<div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
</div>
<div class="small text-muted m-t-xs">项目截止： 4:00 - 2015.10.01</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--展开主题结束-->
</div>
<!-- 全局js -->
<script src="~/Areas/JumpFile/Content/js/jquery.min.js"></script>
<script src="~/Areas/JumpFile/Content/js/bootstrap.min.js"></script>
<script src="~/Areas/JumpFile/Content/js/jquery.metisMenu.js"></script>
<script src="~/Areas/JumpFile/Content/js/jquery.slimscroll.min.js"></script>
<script src="~/Areas/JumpFile/Content/layui/layui.js"></script>
<!-- 自定义js -->
<script src="~/Areas/JumpFile/Content/js/hplus.js"></script>
<script src="~/Areas/JumpFile/Content/js/contabs.js"></script>
<!-- 第三方插件 -->
<script src="~/Areas/JumpFile/Content/js/pace.min.js"></script>
</body>
</html>
二、超级管理员
1.1、效果
在页面的中间显示部分，我暂时在ifrom标签中写了这一个csdn的网站，后面我们需要将我们自己创建的路径给添加上去就可以了
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IGvGRH8X-1624175707424)(G:\MVC项目搭建\图书馆系统搭建\项目笔记\image\four\3、超级管理员.png)]](https://www.icode9.com/i/ll/?i=20210620155825860.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM5Mzc4MTkz,size_16,color_FFFFFF,t_70)
1.2、代码
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Areas/JumpFile/Content/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Areas/JumpFile/Content/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/Areas/JumpFile/Content/css/animate.css" rel="stylesheet" />
<link href="~/Areas/JumpFile/Content/css/style.css" rel="stylesheet" />
</head>
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
<!--大盒子-->
<div id="wrapper">
<!--左侧导航开始-->
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="nav-close">
<i class="fa fa-times-circle"></i>
</div>
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<!-- 修改个人质料 -->
<li class="nav-header">
<div class="dropdown profile-element">
<!--头像-->
<span><img alt="image" class="img-circle" src="~/Areas/JumpFile/Content/img/profile_small.jpg" /></span>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<span class="clear">
<span class="block m-t-xs"><strong class="font-bold">Admin</strong></span>
<span class="text-muted text-xs block">超级管理员<b class="caret"></b></span>
</span>
</a>
<ul class="dropdown-menu animated fadeInRight m-t-xs">
<li>
<a class="J_menuItem" href="form_avatar.html">修改头像</a>
</li>
<li>
<a class="J_menuItem" href="profile.html">个人资料</a>
</li>
<li>
<a class="J_menuItem" href="contacts.html">联系我们</a>
</li>
<li>
<a class="J_menuItem" href="mailbox.html">信箱</a>
</li>
<li class="divider"></li>
<li>
<a href="/Login/Login">安全退出</a>
</li>
</ul>
</div>
</li>
<!-- 用户管理 -->
<li>
<a href="#">
<i class="fa fa-home"></i>
<span class="nav-label">用户管理</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="https://www.csdn.net/" data-index="0">普通用户</a>
</li>
<li>
<a class="J_menuItem" href="https://www.csdn.net/">管理员</a>
</li>
</ul>
</li>
<!-- 书籍管理 -->
<li>
<a href="#">
<i class="fa fa-home"></i>
<span class="nav-label">书籍管理</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="https://www.csdn.net/" data-index="0">上传书籍</a>
</li>
<li>
<a class="J_menuItem" href="https://www.csdn.net/">更新书籍</a>
</li>
<li>
<a class="J_menuItem" href="https://www.csdn.net/">下架书籍</a>
</li>
<li>
<a class="J_menuItem" href="https://www.csdn.net/">图书分类</a>
</li>
<!-- 跳转新的页面 -->
<li>
<a href="https://www.csdn.net/" target="_blank">书籍统计</a>
</li>
</ul>
</li>
<!-- 业务管理 -->
<li>
<a href="#">
<i class="fa fa-home"></i>
<span class="nav-label">图书信息维护</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="https://www.csdn.net/" data-index="0">借出书籍</a>
</li>
<li>
<a class="J_menuItem" href="https://www.csdn.net/">归还书籍</a>
</li>
<li>
<a class="J_menuItem" href="https://www.csdn.net/">延期书籍</a>
</li>
</ul>
</li>
<!-- 数据分析 -->
<li>
<a href="#">
<i class="fa fa-home"></i>
<span class="nav-label">数据分析</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="https://www.csdn.net/" data-index="0">借出记录</a>
</li>
<li>
<a class="J_menuItem" href="https://www.csdn.net/">处罚记录</a>
</li>
<li>
<a class="J_menuItem" href="https://www.csdn.net/">罚款记录</a>
</li>
<li>
<a class="J_menuItem" href="https://www.csdn.net/">延期记录</a>
</li>
</ul>
</li>
<!-- 系统维护 -->
<li>
<a href="#">
<i class="fa fa-home"></i>
<span class="nav-label">系统维护</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="https://www.csdn.net/" data-index="0">系统更新</a>
</li>
</ul>
</li>
<!-- 功能上线 -->
<li>
<a href="#">
<i class="fa fa-home"></i>
<span class="nav-label">功能上线</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="https://www.csdn.net/" data-index="0">模块更行</a>
</li>
<li>
<a class="J_menuItem" href="https://www.csdn.net/" data-index="0">活动上线</a>
</li>
<li>
<a class="J_menuItem" href="https://www.csdn.net/" data-index="0">幸运用户</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!--左侧导航结束-->
<!--右侧部分开始-->
<div id="page-wrapper" class="gray-bg dashbard-1">
<!-- 顶部第一部份 -->
<div class="row border-bottom">
<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
href="#"><i class="fa fa-bars"></i> </a>
<!-- 顶部查找内容 -->
<form role="search" class="navbar-form-custom" method="post" action="search_results.html">
<div class="form-group">
<input type="text" placeholder="请输入您需要查找的内容 …" class="form-control" name="top-search"
id="top-search">
</div>
</form>
</div>
<!-- 顶部右侧导航 -->
<ul class="nav navbar-top-links navbar-right">
<!-- 邮箱 -->
<li class="dropdown">
<a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
<i class="fa fa-envelope"></i> <span class="label label-warning">16</span>
</a>
<ul class="dropdown-menu dropdown-messages">
<li class="m-t-xs">
<div class="dropdown-messages-box">
<a href="profile.html" class="pull-left">
<img alt="image" class="img-circle" src="~/Areas/JumpFile/Content/img/a7.jpg">
</a>
<div class="media-body">
<small class="pull-right">46小时前</small>
<strong>小四</strong> 这个在日本投降书上签字的军官，建国后一定是个不小的干部吧？
<br>
<small class="text-muted">3天前 2016.11.8</small>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="dropdown-messages-box">
<a href="profile.html" class="pull-left">
<img alt="image" class="img-circle" src="~/Areas/JumpFile/Content/img/a4.jpg">
</a>
<div class="media-body ">
<small class="pull-right text-navy">25小时前</small>
<strong>国民岳父</strong> 如何看待“男子不满自己爱犬被称为狗，刺伤路人”？——这人比犬还凶
<br>
<small class="text-muted">昨天</small>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="text-center link-block">
<a class="J_menuItem" href="mailbox.html">
<i class="fa fa-envelope"></i> <strong> 查看所有消息</strong>
</a>
</div>
</li>
</ul>
</li>
<!-- 信息 -->
<li class="dropdown">
<a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
<i class="fa fa-bell"></i> <span class="label label-primary">8</span>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="mailbox.html">
<div>
<i class="fa fa-envelope fa-fw"></i> 您有16条未读消息
<span class="pull-right text-muted small">4分钟前</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="profile.html">
<div>
<i class="fa fa-qq fa-fw"></i> 3条新回复
<span class="pull-right text-muted small">12分钟钱</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<div class="text-center link-block">
<a class="J_menuItem" href="notifications.html">
<strong>查看所有 </strong>
<i class="fa fa-angle-right"></i>
</a>
</div>
</li>
</ul>
</li>
<!-- 购买 -->
<li class="hidden-xs">
<a href="index_v1.html" class="J_menuItem" data-index="0">
<i class="fa fa-cart-arrow-down"></i> 购买
</a>
</li>
<!-- 主题 -->
<li class="dropdown hidden-xs">
<a class="right-sidebar-toggle" aria-expanded="false">
<i class="fa fa-tasks"></i> 主题
</a>
</li>
</ul>
</nav>
</div>
<!-- 中间顶部第二行导航 -->
<div class="row content-tabs">
<button class="roll-nav roll-left J_tabLeft">
<i class="fa fa-backward"></i>
</button>
<nav class="page-tabs J_menuTabs">
<div class="page-tabs-content">
<a href="javascript:;" class="active J_menuTab" data-id="index_v1.html">首页</a>
</div>
</nav>
<button class="roll-nav roll-right J_tabRight">
<i class="fa fa-forward"></i>
</button>
<!-- 右侧 -->
<div class="btn-group roll-nav roll-right">
<button class="dropdown J_tabClose" data-toggle="dropdown">
关闭操作<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu dropdown-menu-right">
<li class="J_tabShowActive">
<a>定位当前选项卡</a>
</li>
<li class="divider"></li>
<li class="J_tabCloseAll">
<a>关闭全部选项卡</a>
</li>
<li class="J_tabCloseOther">
<a>关闭其他选项卡</a>
</li>
</ul>
</div>
<a href="/Login/Login" class="roll-nav roll-right J_tabExit"><i class="fa fa fa-sign-out"></i> 退出</a>
</div>
<div class="row J_mainContent" id="content-main">
<iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="https://www.csdn.net/" frameborder="0"
data-id="" seamless>
</iframe>
</div>
<!-- 页脚说明 -->
<div class="footer">
<div class="pull-right">
© 2021-6-19<a href="#" target="_blank">图书管理系统</a>
</div>
</div>
</div>
<!--右侧部分结束-->
<!--展开主题开始-->
<div id="right-sidebar">
<div class="sidebar-container">
<ul class="nav nav-tabs navs-3">
<!-- 主题 -->
<li class="active">
<a data-toggle="tab" href="#tab-1">
<i class="fa fa-gear"></i> 主题
</a>
</li>
<!-- 通知 -->
<li class="">
<a data-toggle="tab" href="#tab-2">
通知
</a>
</li>
<!-- 项目进度 -->
<li>
<a data-toggle="tab" href="#tab-3">
项目进度
</a>
</li>
</ul>
<!-- 主题展开 -->
<div class="tab-content">
<div id="tab-1" class="tab-pane active">
<div class="sidebar-title">
<h3> <i class="fa fa-comments-o"></i> 主题设置</h3>
<small><i class="fa fa-tim"></i> 你可以从这里选择和预览主题的布局和样式，这些设置会被保存在本地，下次打开的时候会直接应用这些设置。</small>
</div>
<div class="skin-setttings">
<div class="title">主题设置</div>
<div class="setings-item">
<span>收起左侧菜单</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox"
id="collapsemenu">
<label class="onoffswitch-label" for="collapsemenu">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>固定顶部</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="fixednavbar" class="onoffswitch-checkbox"
id="fixednavbar">
<label class="onoffswitch-label" for="fixednavbar">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>
固定宽度
</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="boxedlayout" class="onoffswitch-checkbox"
id="boxedlayout">
<label class="onoffswitch-label" for="boxedlayout">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="title">皮肤选择</div>
<!-- 默认皮肤 -->
<div class="setings-item default-skin nb">
<span class="skin-name ">
<a href="#" class="s-skin-0">
默认皮肤
</a>
</span>
</div>
<!-- 蓝色主题 -->
<div class="setings-item blue-skin nb">
<span class="skin-name ">
<a href="#" class="s-skin-1">
蓝色主题
</a>
</span>
</div>
<!-- 黄色/紫色主题 -->
<div class="setings-item yellow-skin nb">
<span class="skin-name ">
<a href="#" class="s-skin-3">
黄色/紫色主题
</a>
</span>
</div>
</div>
</div>
<!-- 最新通知 -->
<div id="tab-2" class="tab-pane">
<div class="sidebar-title">
<h3> <i class="fa fa-comments-o"></i> 最新通知</h3>
<small><i class="fa fa-tim"></i> 您当前有10条未读信息</small>
</div>
<!-- 展示通知 -->
<div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="~/Areas/JumpFile/Content/img/a1.jpg">
<div class="m-t-xs">
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
</div>
</div>
<div class="media-body">
据天津日报报道：瑞海公司董事长于学伟，副董事长董社轩等10人在13日上午已被控制。
<br>
<small class="text-muted">今天 4:21</small>
</div>
</a>
</div>
</div>
</div>
<!-- 最新任务 -->
<div id="tab-3" class="tab-pane">
<div class="sidebar-title">
<h3> <i class="fa fa-cube"></i> 最新任务</h3>
<small><i class="fa fa-tim"></i> 您当前有14个任务，10个已完成</small>
</div>
<!-- 暂时任务 -->
<ul class="sidebar-list">
<li>
<a href="#">
<div class="small pull-right m-t-xs">9小时以后</div>
<h4>市场调研</h4> 按要求接收教材；
<div class="small">已完成： 22%</div>
<div class="progress progress-mini">
<div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
</div>
<div class="small text-muted m-t-xs">项目截止： 4:00 - 2015.10.01</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--展开主题结束-->
</div>
<!-- 全局js -->
<script src="~/Areas/JumpFile/Content/js/jquery.min.js"></script>
<script src="~/Areas/JumpFile/Content/js/bootstrap.min.js"></script>
<script src="~/Areas/JumpFile/Content/js/jquery.metisMenu.js"></script>
<script src="~/Areas/JumpFile/Content/js/jquery.slimscroll.min.js"></script>
<script src="~/Areas/JumpFile/Content/layui/layui.js"></script>
<!-- 自定义js -->
<script src="~/Areas/JumpFile/Content/js/hplus.js"></script>
<script src="~/Areas/JumpFile/Content/js/contabs.js"></script>
<!-- 第三方插件 -->
<script src="~/Areas/JumpFile/Content/js/pace.min.js"></script>
</body>
</html>
标签：10,选项卡,主题,管理员,普通用户,书籍,页面 来源： https://blog.csdn.net/baidu_39378193/article/details/118070860
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。