aid-elements-cmcc
Version:
AI Design Elements
176 lines • 7.44 kB
HTML
<html class="hb-loaded">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layout</title>
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../../dist/css/aid.min.css">
</head>
<style type="text/css">
.layout-logo{
width: 100px;
height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: absolute;
top: 15px;
left: 20px;
z-index: 2;
}
.layout-menu-assistant{
height:60px;
text-align: center;
position: relative;
}
.layout-menu-assistant .menu>.menu__item,
.layout-menu-assistant .menu>.menu__submenu{
display: inline-block;
float:none;
}
.layout-logo-left{
width: 90%;
height: 30px;
background: #5b6270;
border-radius: 3px;
margin: 15px auto;
}
.layout .menu--vertical .menu__item,
.layout .menu--vertical .menu__submenu-title{
min-width:180px;
}
.layout-sidebar,
.layout-sidebar + .col{
transition:all 2s ease-in-out 0s;
}
.layout--folded .layout-sidebar{
width:60px;
}
.layout--folded .menu--vertical>.menu__item,
.layout--folded .menu--vertical .menu__submenu-title{
color:transparent;
white-space: nowrap;
padding:0 16px;
min-width: 60px;
}
.layout--folded .menu--vertical .menu__item>i,
.layout--folded .menu__submenu-title>i{
font-size:24px;
}
.layout--folded .menu__submenu-title-icon{
display: none;
}
.layout--folded .menu--vertical .menu__item,
.layout--folded .menu--vertical .menu__submenu{
height:50px;
line-height: 50px;
}
</style>
<body class="bg-gray-lightest-5">
<div class="layout">
<div class="row no-gutters">
<div class="layout-sidebar bg-gray-darker">
<div href="#" class="layout-logo-left"></div>
<ul class="menu menu--dark menu--vertical menu--open">
<li class="menu__submenu menu__item--checked">
<div class="menu__submenu-title"><i class="aid aid-home"></i>
内容管理
<i class="menu__submenu-title-icon"></i></div>
<ul class="menu">
<li class="menu__item">文章管理</li>
<li class="menu__item menu__item--checked">评论管理</li>
<li class="menu__item">举报管理</li>
</ul>
</li>
<li class="menu__submenu">
<div class="menu__submenu-title"><i class="aid aid-account-multiple"></i>
用户管理
<i class="menu__submenu-title-icon"></i></div>
<ul class="menu" style="display: none;">
<li class="menu__item">新增用户</li>
<li class="menu__item">活跃用户</li>
</ul>
</li>
<li class="menu__submenu">
<div class="menu__submenu-title"><i class="aid aid-chart-bar"></i>
统计分析
<i class="menu__submenu-title-icon"></i></div>
<ul class="menu" style="display: none;">
<li class="menu__item-group"><span class="menu__item-group-title">使用</span>
<ul>
<li class="menu__item">新增和启动</li>
<li class="menu__item">活跃分析</li>
<li class="menu__item">时段分析</li>
</ul>
</li>
<li class="menu__item-group"><span class="menu__item-group-title">留存</span>
<ul>
<li class="menu__item">用户留存</li>
<li class="menu__item">流失用户</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="col">
<nav class="navbar navbar-expand-lg bg-white">
<a class="mr-auto"><i class="aid aid-menu text-xxl text-gray"></i></a>
<form class="form-inline">
<div class="input-group input-group--sm">
<span class="input-group-icon">
<i class="aid aid-magnify"></i>
</span>
<div class="form-input">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="搜索">
</div>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="aid aid-help-circle-outline"></i>帮助</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown__toggle">
<span class="avatar avatar--danger avatar--sm">
<span class="avatar__text">HC</span>
<i class="avatar__dot"></i>
</span>
</a>
<div class="dropdown__menu">
<a class="dropdown__item" href="#">Action</a>
<a class="dropdown__item" href="#">Another action</a>
<a class="dropdown__item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
<nav class="breadcrumb">
<a class="breadcrumb__item" href="#">
<span>首页</span>
<span class="breadcrumb__separator">/</span>
</a>
<a class="breadcrumb__item" href="#">
<span>二级</span>
<span class="breadcrumb__separator">/</span>
</a>
<a class="breadcrumb__item" href="#">
<span>三级</span>
<span class="breadcrumb__separator">/</span>
</a>
<span class="breadcrumb__item active">
<span>当前页</span>
</span>
</nav>
<div class="bg-white p-3 ml-3 mr-3">内容区域</div>
<div class="p-3 text-center text-gray-light text-sm">
2011-2016 © AI design
</div>
</div>
</div>
</div>
</body>
</html>