Light-Year-Admin-Using-Iframe-v4
/
index-light.html

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
		<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板" />
		<meta name="description" content="Light Year Admin V4是一个基于Bootstrap v4.4.1的后台管理系统的HTML模板。" />
		<meta name="author" content="yinq" />
		<title>光年(Light Year Admin V4)后台管理系统模板</title>
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="default" />
		<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="js/bootstrap-multitabs/multitabs.min.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="css/style.min.css" />
		<!-- 必须引入vue.js文件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>

	<body>
		<div class="lyear-layout-web" id="app">
			<div class="lyear-layout-container">
				<!--左侧导航-->
				<aside class="lyear-layout-sidebar">
					<!-- logo -->
					<div id="logo" class="sidebar-header">
						<a href="index.html"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
					</div>
					<div class="lyear-layout-sidebar-info lyear-scroll">
						<nav class="sidebar-main">
							<!-- 多级菜单渲染 -->
							<light-menus :primary="primary" :menus="menus">
								<!-- 1级菜单渲染 -->
								<template #menu="level1">
									<light-menus :menus="level1.children" :child="level1.children.length === 0">
										<!-- 2级菜单渲染 -->
										<template #menu="level2">
											<light-menus :menus="level2.children" :child="level2.children.length === 0">
												<!-- 3级菜单渲染 -->
												<template #menu="level3">
													<light-menus :menus="level3.children" :child="level3.children.length === 0"></light-menus>
												</template>
											</light-menus>
										</template>
									</light-menus>
								</template>
							</light-menus>
						</nav>

						<div class="sidebar-footer">
							<p class="copyright">
								Copyright &copy; 2019.
								<a target="_blank" href="http://lyear.itshubao.com">IT书包</a>
								All rights reserved.
							</p>
						</div>
					</div>
				</aside>
				<!--End 左侧导航-->

				<!--头部信息-->
				<header class="lyear-layout-header">
					<nav class="navbar">
						<div class="navbar-left">
							<div class="lyear-aside-toggler">
								<span class="lyear-toggler-bar"></span>
								<span class="lyear-toggler-bar"></span>
								<span class="lyear-toggler-bar"></span>
							</div>
						</div>

						<ul class="navbar-right d-flex align-items-center">
							<li class="dropdown dropdown-notice">
								<span data-toggle="dropdown" class="icon-item">
									<i class="mdi mdi-bell-outline"></i>
									<span class="badge badge-danger">10</span>
								</span>
								<div class="dropdown-menu dropdown-menu-right">
									<div class="lyear-notifications">
										<div class="lyear-notifications-title clearfix" data-stopPropagation="true">
											<a href="#!" class="float-right">查看全部</a>
											你有 10 条未读消息
										</div>
										<div class="lyear-notifications-info lyear-scroll">
											<a href="#!" class="dropdown-item" title="树莓派销量猛增，疫情期间居家工作学习、医疗领域都需要它">
												树莓派销量猛增，疫情期间居家工作学习、医疗领域都需要它
											</a>
											<a href="#!" class="dropdown-item" title="GNOME 用户体验团队将为 GNOME Shell 提供更多改进">
												GNOME 用户体验团队将为 GNOME Shell 提供更多改进
											</a>
											<a href="#!" class="dropdown-item" title="Linux On iPhone 即将面世，支持 iOS 的双启动">Linux On iPhone 即将面世，支持 iOS 的双启动</a>
											<a href="#!" class="dropdown-item" title="GitHub 私有仓库完全免费面向团队提供">GitHub 私有仓库完全免费面向团队提供</a>
											<a href="#!" class="dropdown-item" title="Wasmtime 为 WebAssembly 增加 Go 语言绑定">Wasmtime 为 WebAssembly 增加 Go 语言绑定</a>
											<a href="#!" class="dropdown-item" title="红帽借“订阅”成开源一哥，首创者 Cormier 升任总裁">
												红帽借“订阅”成开源一哥，首创者 Cormier 升任总裁
											</a>
											<a href="#!" class="dropdown-item" title="Zend 宣布推出两项 PHP 新产品">Zend 宣布推出两项 PHP 新产品</a>
										</div>
									</div>
								</div>
							</li>
							<!--切换主题配色-->
							<li class="dropdown dropdown-skin">
								<span data-toggle="dropdown" class="icon-item"><i class="mdi mdi-palette"></i></span>
								<ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
									<li class="drop-title"><p>LOGO</p></li>
									<li class="drop-skin-li clearfix">
										<span class="inverse">
											<input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked />
											<label for="logo_bg_1"></label>
										</span>
										<span>
											<input type="radio" name="logo_bg" value="color_2" id="logo_bg_2" />
											<label for="logo_bg_2"></label>
										</span>
										<span>
											<input type="radio" name="logo_bg" value="color_3" id="logo_bg_3" />
											<label for="logo_bg_3"></label>
										</span>
										<span>
											<input type="radio" name="logo_bg" value="color_4" id="logo_bg_4" />
											<label for="logo_bg_4"></label>
										</span>
										<span>
											<input type="radio" name="logo_bg" value="color_5" id="logo_bg_5" />
											<label for="logo_bg_5"></label>
										</span>
										<span>
											<input type="radio" name="logo_bg" value="color_6" id="logo_bg_6" />
											<label for="logo_bg_6"></label>
										</span>
										<span>
											<input type="radio" name="logo_bg" value="color_7" id="logo_bg_7" />
											<label for="logo_bg_7"></label>
										</span>
										<span>
											<input type="radio" name="logo_bg" value="color_8" id="logo_bg_8" />
											<label for="logo_bg_8"></label>
										</span>
									</li>
									<li class="drop-title"><p>头部</p></li>
									<li class="drop-skin-li clearfix">
										<span class="inverse">
											<input type="radio" name="header_bg" value="default" id="header_bg_1" checked />
											<label for="header_bg_1"></label>
										</span>
										<span>
											<input type="radio" name="header_bg" value="color_2" id="header_bg_2" />
											<label for="header_bg_2"></label>
										</span>
										<span>
											<input type="radio" name="header_bg" value="color_3" id="header_bg_3" />
											<label for="header_bg_3"></label>
										</span>
										<span>
											<input type="radio" name="header_bg" value="color_4" id="header_bg_4" />
											<label for="header_bg_4"></label>
										</span>
										<span>
											<input type="radio" name="header_bg" value="color_5" id="header_bg_5" />
											<label for="header_bg_5"></label>
										</span>
										<span>
											<input type="radio" name="header_bg" value="color_6" id="header_bg_6" />
											<label for="header_bg_6"></label>
										</span>
										<span>
											<input type="radio" name="header_bg" value="color_7" id="header_bg_7" />
											<label for="header_bg_7"></label>
										</span>
										<span>
											<input type="radio" name="header_bg" value="color_8" id="header_bg_8" />
											<label for="header_bg_8"></label>
										</span>
									</li>
									<li class="drop-title"><p>侧边栏</p></li>
									<li class="drop-skin-li clearfix">
										<span class="inverse">
											<input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked />
											<label for="sidebar_bg_1"></label>
										</span>
										<span>
											<input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2" />
											<label for="sidebar_bg_2"></label>
										</span>
										<span>
											<input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3" />
											<label for="sidebar_bg_3"></label>
										</span>
										<span>
											<input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4" />
											<label for="sidebar_bg_4"></label>
										</span>
										<span>
											<input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5" />
											<label for="sidebar_bg_5"></label>
										</span>
										<span>
											<input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6" />
											<label for="sidebar_bg_6"></label>
										</span>
										<span>
											<input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7" />
											<label for="sidebar_bg_7"></label>
										</span>
										<span>
											<input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8" />
											<label for="sidebar_bg_8"></label>
										</span>
									</li>
								</ul>
							</li>
							<!--切换主题配色-->
							<li class="dropdown dropdown-profile">
								<a href="javascript:void(0)" data-toggle="dropdown" class="dropdown-toggle">
									<img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="笔下光年" />
									<span>笔下光年</span>
								</a>
								<ul class="dropdown-menu dropdown-menu-right">
									<li>
										<a class="multitabs dropdown-item" data-url="lyear_pages_profile.html" href="javascript:void(0)">
											<i class="mdi mdi-account"></i>
											个人信息
										</a>
									</li>
									<li>
										<a class="multitabs dropdown-item" data-url="lyear_pages_edit_pwd.html" href="javascript:void(0)">
											<i class="mdi mdi-lock-outline"></i>
											修改密码
										</a>
									</li>
									<li>
										<a class="dropdown-item" href="javascript:void(0)">
											<i class="mdi mdi-delete"></i>
											清空缓存
										</a>
									</li>
									<li class="dropdown-divider"></li>
									<li>
										<a class="dropdown-item" href="lyear_pages_login_1.html">
											<i class="mdi mdi-logout-variant"></i>
											退出登录
										</a>
									</li>
								</ul>
							</li>
						</ul>
					</nav>
				</header>
				<!--End 头部信息-->

				<!--页面主要内容-->
				<main class="lyear-layout-content"><div id="iframe-content"></div></main>
				<!--End 页面主要内容-->
			</div>
		</div>

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/popper.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
		<script type="text/javascript" src="js/bootstrap-multitabs/multitabs.min.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.min.js"></script>
		<script type="text/javascript" src="js/index.min.js"></script>
		<!-- 引用菜单组件 -->
		<script src="components/menus.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					primary: 0,
					menus: [
						{
							title: '首页',
							href: 'lyear_main.html',
							icon: 'mdi-home-city-outline'
						},
						{
							title: '首页 - 基础',
							href: 'index.html',
							icon: 'mdi-mailbox-outline',
							target: '_parent'
						},
						{
							title: 'UI 元素',
							icon: 'mdi-silo',
							children: [
								{
									title: '排版',
									href: 'lyear_ui_typography.html'
								}
							]
						},
						{
							title: '多级菜单',
							icon: 'mdi-folder-text-outline',
							children: [
								{
									title: '一级菜单',
									href: '#'
								},
								{
									title: '一级菜单',
									href: '#',
									children: [
										{
											title: '二级菜单',
											href: '#'
										},
										{
											title: '二级菜单',
											href: '#',
											children: [
												{
													title: '三级菜单',
													href: '#'
												},
												{
													title: '三级菜单',
													href: '#'
												}
											]
										},
										{
											title: '二级菜单',
											href: '#'
										}
									]
								},
								{
									title: '一级菜单',
									href: '#'
								}
							]
						}
					]
				}
			});
		</script>
	</body>
</html>