yhl452493373/layui-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加单页应用的layui-admin

Browse Source
This commit is contained in:
杨黄林
2024-01-22 12:22:41 +08:00
parent acf64a0c71
commit 1b2929f32e
344 changed files with 21782 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
single/res/views/component/grid/all.html Normal file
View File

@@ -0,0 +1,80 @@
<title>全端复杂组合</title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>组件</cite></a>
<a><cite>栅格</cite></a>
<a><cite>全端复杂组合</cite></a>
</div>
</div>
<style>
/* 这段样式只是用于演示 */
#LAY-component-grid-all .layui-card-body{display: flex; justify-content: center; flex-direction: column; text-align: center; height: 200px;}
</style>
<div class="layui-fluid" id="LAY-component-grid-all">
<div class="layui-row layui-col-space10">
<div class="layui-col-xs6 layui-col-sm7 layui-col-md3">
<!-- 填充内容 -->
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs6 layui-col-sm5 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs6 layui-col-sm5 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs6 layui-col-sm7 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs6 layui-col-sm7 layui-col-md9">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs6 layui-col-sm5 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs6 layui-col-sm5 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs6 layui-col-sm7 layui-col-md9">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
</div>
</div>
<script>
layui.use(['admin'], function(){
var $ = layui.$
,admin = layui.admin
,table = layui.table
,element = layui.element;
});
</script>

122
single/res/views/component/grid/list.html Normal file
View File

@@ -0,0 +1,122 @@
<title>等比例列表排列</title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>组件</cite></a>
<a><cite>栅格</cite></a>
<a><cite>等比例列表排列</cite></a>
</div>
</div>
<style>
/* 这段样式只是用于演示 */
#LAY-component-grid-list .demo-list .layui-card{height: 267px;}
</style>
<div class="layui-fluid" id="LAY-component-grid-list">
<div class="layui-row layui-col-space10 demo-list">
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<!-- 填充内容 -->
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
<div class="layui-card">
</div>
</div>
</div>
</div>
<script>
layui.use(['admin'], function(){
var $ = layui.$
,admin = layui.admin
,table = layui.table
,element = layui.element;
});
</script>

80
single/res/views/component/grid/mobile-pc.html Normal file
View File

@@ -0,0 +1,80 @@
<title>移动桌面组合</title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>组件</cite></a>
<a><cite>栅格</cite></a>
<a><cite>移动桌面组合</cite></a>
</div>
</div>
<style>
/* 这段样式只是用于演示 */
#LAY-component-grid-mobile-pc .layui-card-body{display: flex; justify-content: center; flex-direction: column; text-align: center; height: 200px;}
</style>
<div class="layui-fluid" id="LAY-component-grid-mobile-pc">
<div class="layui-row layui-col-space10">
<div class="layui-col-xs6 layui-col-md8">
<!-- 填充内容 -->
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs6 layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs6 layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs6 layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs12 layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs6 layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs6 layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs12 layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
</div>
</div>
<script>
layui.use(['admin'], function(){
var $ = layui.$
,admin = layui.admin
,table = layui.table
,element = layui.element;
});
</script>

112
single/res/views/component/grid/mobile.html Normal file
View File

@@ -0,0 +1,112 @@
<title>按移动端排列</title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>组件</cite></a>
<a><cite>栅格</cite></a>
<a><cite>按移动端排列</cite></a>
</div>
</div>
<style>
/* 这段样式只是用于演示 */
#LAY-component-grid-mobile .layui-card-body{display: flex; justify-content: center; flex-direction: column; text-align: center; height: 200px;}
</style>
<div class="layui-fluid" id="LAY-component-grid-mobile">
<div class="layui-row layui-col-space10">
<div class="layui-col-xs6">
<!-- 填充内容 -->
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs6">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
</div>
<div class="layui-row layui-col-space10">
<div class="layui-col-xs3">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs3">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs3">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs3">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs3">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs3">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs3">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-xs3">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
</div>
</div>
<script>
layui.use(['admin'], function(){
var $ = layui.$
,admin = layui.admin
,table = layui.table
,element = layui.element;
});
</script>

84
single/res/views/component/grid/speed-dial.html Normal file
View File

@@ -0,0 +1,84 @@
<title>九宫格</title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>组件</cite></a>
<a><cite>栅格</cite></a>
<a><cite>九宫格</cite></a>
</div>
</div>
<style>
/* 这段样式只是用于演示 */
#LAY-component-grid-speed-dial .layui-card-body{display: flex; justify-content: center; flex-direction: column; text-align: center; font-size: 20px;}
#LAY-component-grid-speed-dial .layui-card-body:hover{background-color: #FAFAFA;}
</style>
<div class="layui-fluid" id="LAY-component-grid-speed-dial">
<div class="layui-row layui-col-space1">
<div class="layui-col-xs4">
<!-- 填充内容 -->
<div class="layui-card">
<div class="layui-card-body">1</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card">
<div class="layui-card-body">2</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card">
<div class="layui-card-body">3</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card">
<div class="layui-card-body">4</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card">
<div class="layui-card-body">5</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card">
<div class="layui-card-body">6</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card">
<div class="layui-card-body">7</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card">
<div class="layui-card-body">8</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card">
<div class="layui-card-body">9</div>
</div>
</div>
</div>
</div>
<script>
layui.use(['admin'], function(){
var $ = layui.$
,admin = layui.admin
,element = layui.element;
element.render('breadcrumb', 'breadcrumb');
//窗口尺寸改变事件，控制宽度相同
admin.resize(function(){
var cardBody = $('#LAY-component-grid-speed-dial .layui-card-body');
cardBody.height(cardBody.width())
});
});
</script>

143
single/res/views/component/grid/stack.html Normal file
View File

@@ -0,0 +1,143 @@
<title>低于桌面堆叠排列</title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>组件</cite></a>
<a><cite>栅格</cite></a>
<a><cite>低于桌面堆叠排列</cite></a>
</div>
</div>
<style>
/* 这段样式只是用于演示 */
#LAY-component-grid-stack .layui-card-body{display: flex; justify-content: center; flex-direction: column; text-align: center; height: 200px;}
</style>
<div class="layui-fluid" id="LAY-component-grid-stack">
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<!-- 填充内容 -->
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body"></div>
</div>
</div>
</div>
</div>
<script>
layui.use(['admin'], function(){
var $ = layui.$
,admin = layui.admin
,table = layui.table
,element = layui.element;
element.render('breadcrumb', 'breadcrumb');
});
</script>