43 Star 408 Fork 129

笔下光年 / Light Year Admin Using Iframe v4

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
index-light.html 12.94 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
<!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>
HTML
1
https://gitee.com/yinqi/Light-Year-Admin-Using-Iframe-v4.git
git@gitee.com:yinqi/Light-Year-Admin-Using-Iframe-v4.git
yinqi
Light-Year-Admin-Using-Iframe-v4
Light Year Admin Using Iframe v4
master

搜索帮助