安装插件后的基础文件
This commit is contained in:
panx
225
app/admin/view/developer/example/auxiliar.html
Normal file
225
app/admin/view/developer/example/auxiliar.html
Normal file
@@ -0,0 +1,225 @@
|
||||
<include file="/public/header"/>
|
||||
<!-- // 重定位style -->
|
||||
<div class="layui-fluid layui-form">
|
||||
<!--Developer-->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">弹窗组件</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-btn-container" style="margin-top: 15px;">
|
||||
<button class="layui-btn" lay-open data-title="标题" data-url="#editor" data-area="600px,500px">内置弹窗</button>
|
||||
<button class="layui-btn" lay-open data-title="标题" data-url="https://api.swiftadmin.net/" data-area="600px,500px" >iframe弹窗</button>
|
||||
<button class="layui-btn" lay-open data-url="#editor" data-area="600px,500px" >无标题弹窗</button>
|
||||
<button class="layui-btn" lay-open data-title="标题" data-url="#editor" data-area="300px,300px" >300X300弹窗</button>
|
||||
<button class="layui-btn" lay-open data-title="标题" data-url="#editor" data-area="500px,500px" data-maxmin="true" >最大化窗口</button>
|
||||
<button class="layui-btn" lay-open data-title="标题" data-url="#editor" data-area="500px,500px" data-maxmin="true" data-offset="10px">窗口定位</button>
|
||||
<button class="layui-btn" lay-open data-title="标题" data-url="#editor" data-area="500px,500px" data-maxmin="true" data-shadeClose="true" >点击阴影关闭</button>
|
||||
|
||||
</div>
|
||||
<p style="margin: 5px 0 10px 0;">
|
||||
更多弹出层的使用示例请查看 <a href="https://layuion.com/layer/" target="_blank">layer弹窗组件</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">AJAX数据提交</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="layui-btn" lay-ajax data-url="{:url('/ajax/index')}" >常规提交</button>
|
||||
<button class="layui-btn" lay-ajax data-url="{:url('/ajax/index')}" data-table="lay-tableList">刷新表格</button>
|
||||
<button class="layui-btn" lay-ajax data-url="{:url('/ajax/index')}" data-reload="parent">重载父页面</button>
|
||||
<button class="layui-btn" lay-ajax data-url="{:url('/ajax/index')}" data-reload="top">重载顶层页面</button>
|
||||
<button class="layui-btn" lay-ajax data-url="{:url('/ajax/index')}" data-confirm="确定要提交吗？">询问提交</button>
|
||||
<button class="layui-btn" lay-ajax data-url="{:url('/ajax/index')}" data-close="true">提交后关闭窗口/仅适用于窗口</button>
|
||||
<button class="layui-btn" lay-ajax data-url="{:url('/ajax/index')}" data-jump="false">关闭URL跳转</button>
|
||||
<button class="layui-btn layui-btn-primary" lay-ajax="" data-url="{:url('/ajax/index')}" data-object="type:ctype,host:chost,port:cport,user:cuser,pass:cpass">{:__('带参数提交')}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">消息通知</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="layui-btn" onclick="layui.layer.msg('成功消息');" >成功通知</button>
|
||||
<button class="layui-btn layui-btn-danger" onclick="layui.layer.error('错误通知');" >错误通知</button>
|
||||
<button class="layui-btn layui-btn-warm" onclick="layui.layer.warning('警告通知');" >警告通知</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="layui.layer.info('信息通知');" >信息通知</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">元素切换</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单选切换</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="cache_status" data-display="radioClass" lay-filter="radioStatus" value="1" title="开启" checked>
|
||||
<input type="radio" name="cache_status" data-display="radioClass" lay-filter="radioStatus" value="0" title="关闭" >
|
||||
</div>
|
||||
<div class="layui-input-inline radioClass">
|
||||
<div class="layui-input-inline">我是元素</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">下拉切换</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="cache_type" data-display="cache_type" data-disable="file" lay-filter="selectStatus" class="ctype">
|
||||
<option value="file" >file</option>
|
||||
<option value="redis" >redis</option>
|
||||
<option value="memcached">memcached</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="layui-input-inline cache_type">
|
||||
<div class="layui-input-inline">我是元素</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">下拉菜单</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-btn-container" style="margin-top: 15px;">
|
||||
<button class="layui-btn" id="demo1">
|
||||
下拉菜单
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">进度条</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-primary" lay-percent="40%"></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar" lay-percent="60%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">其他组件</div>
|
||||
<div class="layui-card-body">
|
||||
<div>其他组件和元素请参考 <a href="https://layuion.com/docs/" target="_blank">Layui官网文档</a> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="editor">
|
||||
<form action="" class="layui-form">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">我是内置弹窗内容</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">禁止编辑</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" value="我是数据" data-disabled="true" >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</script>
|
||||
|
||||
<include file="/public/footer"/>
|
||||
<script>
|
||||
layui.use('dropdown', function(){
|
||||
var dropdown = layui.dropdown
|
||||
dropdown.render({
|
||||
elem: '#demo1' //可绑定在任意元素中，此处以上述按钮为例
|
||||
,data: [{
|
||||
title: 'menu item 1'
|
||||
,id: 100
|
||||
,href: '#'
|
||||
},{
|
||||
title: 'menu item 2'
|
||||
,id: 101
|
||||
,href: '{{d.root}}/' //开启超链接
|
||||
,target: '_blank' //新窗口方式打开
|
||||
},{type: '-'},{
|
||||
title: 'menu item 3'
|
||||
,id: 102
|
||||
,type: 'group' //菜单类型，支持：normal/group/parent/-
|
||||
,child: [{
|
||||
title: 'menu item 3-1'
|
||||
,id: 103
|
||||
},{
|
||||
title: 'menu item 3-2'
|
||||
,id: 104
|
||||
,child: [{
|
||||
title: 'menu item 3-2-1'
|
||||
,id: 105
|
||||
},{
|
||||
title: 'menu item 3-2-2'
|
||||
,id: 106
|
||||
}]
|
||||
},{
|
||||
title: 'menu item 3-3'
|
||||
,id: 107
|
||||
}]
|
||||
},{type: '-'},{
|
||||
title: 'menu item 4'
|
||||
,id: 108
|
||||
},{
|
||||
title: 'menu item 5'
|
||||
,id: 109
|
||||
,child: [{
|
||||
title: 'menu item 5-1'
|
||||
,id: 11111
|
||||
,child: [{
|
||||
title: 'menu item 5-1-1'
|
||||
,id: 2111
|
||||
},{
|
||||
title: 'menu item 5-1-2'
|
||||
,id: 3111
|
||||
}]
|
||||
},{
|
||||
title: 'menu item 5-2'
|
||||
,id: 52
|
||||
}]
|
||||
},{type:'-'},{
|
||||
title: 'menu item 6'
|
||||
,id: 6
|
||||
,type: 'group'
|
||||
,isSpreadItem: false
|
||||
,child: [{
|
||||
title: 'menu item 6-1'
|
||||
,id: 61
|
||||
},{
|
||||
title: 'menu item 6-2'
|
||||
,id: 62
|
||||
}]
|
||||
}]
|
||||
,id: 'demo1'
|
||||
//菜单被点击的事件
|
||||
,click: function(obj){
|
||||
console.log(obj);
|
||||
layer.msg('回调返回的参数已显示再控制台');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
94
app/admin/view/developer/example/card.html
Normal file
94
app/admin/view/developer/example/card.html
Normal file
@@ -0,0 +1,94 @@
|
||||
<include file="/public/header"/>
|
||||
<!-- // 重定位style -->
|
||||
<div class="layui-fluid ">
|
||||
<!--Developer-->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-card layui-row ">
|
||||
<div class="layui-card-body layui-col-space10">
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-project"> <img class="layui-project-cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png">
|
||||
<div class="layui-project-body">
|
||||
<h2>Angular</h2>
|
||||
<div class="layui-project-text layui-text">希望是一个好东西，也许是最好的，好东西是不会消亡的</div>
|
||||
<div class="layui-project-desc"> <span class="time">2小时前</span>
|
||||
<div class="layui-project-head"> <img class="layui-project-head-item" lay-tips="曲丽丽" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"> <img class="layui-project-head-item" lay-tips="王昭君" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"> <img class="layui-project-head-item" lay-tips="董娜娜" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-project"> <img class="layui-project-cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png">
|
||||
<div class="layui-project-body">
|
||||
<h2>Angular</h2>
|
||||
<div class="layui-project-text layui-text">希望是一个好东西，也许是最好的，好东西是不会消亡的</div>
|
||||
<div class="layui-project-desc"> <span class="time">2小时前</span>
|
||||
<div class="layui-project-head"> <img class="layui-project-head-item" lay-tips="曲丽丽" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"> <img class="layui-project-head-item" lay-tips="王昭君" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"> <img class="layui-project-head-item" lay-tips="董娜娜" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-project"> <img class="layui-project-cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png">
|
||||
<div class="layui-project-body">
|
||||
<h2>Angular</h2>
|
||||
<div class="layui-project-text layui-text">希望是一个好东西，也许是最好的，好东西是不会消亡的</div>
|
||||
<div class="layui-project-desc"> <span class="time">2小时前</span>
|
||||
<div class="layui-project-head"> <img class="layui-project-head-item" lay-tips="曲丽丽" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"> <img class="layui-project-head-item" lay-tips="王昭君" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"> <img class="layui-project-head-item" lay-tips="董娜娜" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-project"> <img class="layui-project-cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png">
|
||||
<div class="layui-project-body">
|
||||
<h2>Angular</h2>
|
||||
<div class="layui-project-text layui-text">希望是一个好东西，也许是最好的，好东西是不会消亡的</div>
|
||||
<div class="layui-project-desc"> <span class="time">2小时前</span>
|
||||
<div class="layui-project-head"> <img class="layui-project-head-item" lay-tips="曲丽丽" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"> <img class="layui-project-head-item" lay-tips="王昭君" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"> <img class="layui-project-head-item" lay-tips="董娜娜" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="layui-article" data-index="0" data-number="1">
|
||||
<h2>Alipay</h2>
|
||||
<span class="layui-badge-rim">1楼</span>
|
||||
<div class="layui-badge-list">
|
||||
<span class="layui-badge layui-badge-gray">SwiftAdmin Pro</span>
|
||||
<span class="layui-badge layui-badge-gray">管理系统</span> <span class="layui-badge layui-badge-gray">前端框架</span> </div>
|
||||
<div class="layui-article-text layui-text">SwiftAdmin 基于Layui的一套通用型极速开发管理后台系统。 </div>
|
||||
<div class="layui-article-desc layui-text">
|
||||
<img src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png" class="head">
|
||||
<a href="javascript:;" class="name">付小小</a>  发布在 
|
||||
<a href="javascript:;">http://swiftadmin.net</a>
|
||||
</div>
|
||||
<div class="layui-article-tool">
|
||||
<span class="layui-article-tool-item star-active" lay-event="star">
|
||||
<i class="layui-icon layui-icon-rate"></i>
|
||||
<span>185</span>
|
||||
</span>
|
||||
<span class="layui-article-tool-item star-active" lay-event="like">
|
||||
<i class="layui-icon layui-icon-praise"></i>
|
||||
<span>126</span>
|
||||
</span>
|
||||
<span class="layui-article-tool-item" lay-event="comment">
|
||||
<i class="layui-icon layui-icon-dialogue"></i>
|
||||
<span>18</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<include file="/public/footer"/>
|
||||
<script>
|
||||
layui.use(['layer'], function () {
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
221
app/admin/view/developer/example/component.html
Normal file
221
app/admin/view/developer/example/component.html
Normal file
@@ -0,0 +1,221 @@
|
||||
<include file="/public/header"/>
|
||||
<!-- // 重定位style -->
|
||||
<link href="/static/system/css/content.css" rel="stylesheet" type="text/css"/>
|
||||
<div class="layui-fluid layui-form">
|
||||
<!--Developer-->
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">上传组件</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">文件上传</label>
|
||||
<div class="layui-input-inline">
|
||||
<input name="image" type="text" class="layui-input pic" placeholder="请上传或直接粘贴图片地址"/>
|
||||
</div>
|
||||
<button type="button" class="layui-btn layui-btn-normal" lay-upload="pic">{:__('上传图片')}</button>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图片上传</label>
|
||||
<div class="layui-input-block">
|
||||
<input class="layui-input layui-input-upload avatar" name="avatar">
|
||||
<button type="button" class="layui-btn" lay-choose="avatar" data-type="images">
|
||||
<i class="layui-icon layui-icon-windows"></i> 选择
|
||||
</button>
|
||||
<div class="clear"></div>
|
||||
|
||||
<div class="layui-upload-drag layui-uplpad-image mt10" lay-upload="avatar" data-type="images"
|
||||
data-accept="file" data-size="102400">
|
||||
<i class="layui-icon layui-icon-upload"></i>
|
||||
<p>点击上传，或将文件拖拽到此处</p>
|
||||
<div class="layui-hide">
|
||||
<hr>
|
||||
<img src="" class="layui-upload-dragimg avatar" alt="上传成功后渲染">
|
||||
<span class="layui-badge layui-upload-clear">删除</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">多图上传</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-imagesbox">
|
||||
<div class="layui-input-inline layui-uplpad-image">
|
||||
<div class="layui-upload-drag" lay-upload="album" data-type="multiple" data-accept="file"
|
||||
data-size="102400">
|
||||
<i class="layui-icon layui-icon-upload"></i>
|
||||
<p>点击上传，或将文件拖拽到此处</p>
|
||||
<div class="layui-hide"></div>
|
||||
</div>
|
||||
<input class="layui-upload-file" type="file" accept="" name="file">
|
||||
<button type="button" class="layui-btn layui-btn-xs layui-btn-fluid" lay-choose="album"
|
||||
data-type="multiple">
|
||||
<i class="layui-icon layui-icon-windows"></i> 选择
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">时间组件</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">时间选择</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" lay-datetime placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
|
||||
<label class="layui-form-label">左右面板</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" placeholder="yyyy-MM-dd - yyyy-MM-dd" lay-datetime=""
|
||||
data-range="true" data-datetype="datetime" data-dateformat="yyyy-MM-dd HH:mm:ss"
|
||||
lay-key="22">
|
||||
</div>
|
||||
|
||||
<label class="layui-form-label">时间选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" placeholder="HH:mm:ss" lay-datetime="" data-datetype="time"
|
||||
data-dateformat="HH:mm:ss" lay-key="22">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">年选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" placeholder="yyyy" lay-datetime="" data-datetype="year"
|
||||
data-dateformat="yyyy" lay-key="22">
|
||||
</div>
|
||||
|
||||
<label class="layui-form-label">年月选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" placeholder="yyyy-MM" lay-datetime="" data-datetype="month"
|
||||
data-dateformat="yyyy-MM" lay-key="22">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">评分组件</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">评分组件</label>
|
||||
<div class="layui-input-inline">
|
||||
<input class="layui-input layui-hide rate_8" name="rate_8">
|
||||
<div lay-rate="rate_8" data-default="1" data-class="rate_8" data-theme="#1890ff" data-length="5"
|
||||
class="layui-inline"></div>
|
||||
</div>
|
||||
|
||||
<label class="layui-form-label">显示半星</label>
|
||||
<div class="layui-input-inline">
|
||||
<input class="layui-input layui-hide rate_81" name="rate_81">
|
||||
<div lay-rate="rate_8" data-default="1" data-class="rate_81" data-half="true" data-theme="#1890ff"
|
||||
data-length="5" class="layui-inline"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开关单选</div>
|
||||
<div class="layui-card-body">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">开关</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
|
||||
</div>
|
||||
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="radio" name="sex" value="男" title="男" checked="">
|
||||
<input type="radio" name="sex" value="女" title="女">
|
||||
<input type="radio" name="sex" value="禁" title="禁用" disabled="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card" style="overflow: visible!important;">
|
||||
<div class="layui-card-header">下拉多选</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">下拉框</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="interest">
|
||||
<option value=""></option>
|
||||
<option value="0">写作</option>
|
||||
<option value="1">阅读</option>
|
||||
<option value="2">游戏</option>
|
||||
<option value="3">音乐</option>
|
||||
<option value="4">旅行</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<label class="layui-form-label">多选框</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
|
||||
<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
|
||||
<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">颜色选择器</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input class="layui-input layui-hide colorpicker_10" name="colorpicker_10">
|
||||
<div lay-colorpicker="colorpicker_10" data-value="undefined" class="layui-inline"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">标签选择器</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">常规使用</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" lay-tags>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">级联选择器</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item" >
|
||||
<label class="layui-form-label">城市</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="city" class="layui-hide" lay-cascader="" name="city" data-value="label" data-parents="1" />
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
对于第三方组件，本框架未进行高度封装，如有特殊需求，可参考第三方文档自行渲染并进行数据处理！
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<include file="/public/footer"/>
|
||||
<script>
|
||||
layui.use(['layer'], function () {
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
575
app/admin/view/developer/example/echarts.html
Normal file
575
app/admin/view/developer/example/echarts.html
Normal file
@@ -0,0 +1,575 @@
|
||||
<include file="/public/header"/>
|
||||
<!-- // 重定位style -->
|
||||
<!--Developer-->
|
||||
<style>
|
||||
.console-link-block {
|
||||
font-size: 16px;
|
||||
padding: 20px 20px;
|
||||
border-radius: 4px;
|
||||
background-color: #40D4B0;
|
||||
color: #FFFFFF !important;
|
||||
box-shadow: 0 2px 3px rgba(0, 0, 0, .05);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.console-link-block .console-link-block-num {
|
||||
font-size: 40px;
|
||||
margin-bottom: 5px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.console-link-block .console-link-block-text {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.console-link-block .console-link-block-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 50px;
|
||||
line-height: 50px;
|
||||
margin-top: -25px;
|
||||
color: #FFFFFF;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.console-link-block .console-link-block-band {
|
||||
color: #fff;
|
||||
width: 100px;
|
||||
font-size: 12px;
|
||||
padding: 2px 0 3px 0;
|
||||
background-color: #E32A16;
|
||||
line-height: inherit;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: -30px;
|
||||
transform-origin: center;
|
||||
transform: rotate(45deg) scale(.8);
|
||||
opacity: .95;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/** //统计快捷方式样式 */
|
||||
|
||||
/** 设置每个快捷块的颜色 */
|
||||
.layui-row > div:nth-child(2) .console-link-block {
|
||||
background-color: #55A5EA;
|
||||
}
|
||||
|
||||
.layui-row > div:nth-child(3) .console-link-block {
|
||||
background-color: #9DAFFF;
|
||||
}
|
||||
|
||||
.layui-row > div:nth-child(4) .console-link-block {
|
||||
background-color: #F591A2;
|
||||
}
|
||||
|
||||
.layui-row > div:nth-child(5) .console-link-block {
|
||||
background-color: #FEAA4F;
|
||||
}
|
||||
|
||||
.layui-row > div:last-child .console-link-block {
|
||||
background-color: #9BC539;
|
||||
}
|
||||
</style>
|
||||
<div class="layui-fluid">
|
||||
<!-- 快捷方式 -->
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
|
||||
<div class="console-link-block">
|
||||
<div class="console-link-block-num">15</div>
|
||||
<div class="console-link-block-text">外出申请</div>
|
||||
<i class="console-link-block-icon layui-icon layui-icon-survey"></i>
|
||||
<div class="console-link-block-band">待审批</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
|
||||
<div class="console-link-block">
|
||||
<div class="console-link-block-num">13</div>
|
||||
<div class="console-link-block-text">请假审批</div>
|
||||
<i class="console-link-block-icon layui-icon layui-icon-print"></i>
|
||||
<div class="console-link-block-band">待审批</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
|
||||
<div class="console-link-block">
|
||||
<div class="console-link-block-num">22</div>
|
||||
<div class="console-link-block-text">研发周报</div>
|
||||
<i class="console-link-block-icon layui-icon layui-icon-list"
|
||||
style="font-size: 62px;padding-right: 5px;"></i>
|
||||
<div class="console-link-block-band">去查看</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
|
||||
<div class="console-link-block">
|
||||
<div class="console-link-block-num">18</div>
|
||||
<div class="console-link-block-text">研发月报</div>
|
||||
<i class="console-link-block-icon layui-icon layui-icon-date"></i>
|
||||
<div class="console-link-block-band">去查看</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
|
||||
<div class="console-link-block">
|
||||
<div class="console-link-block-num">11</div>
|
||||
<div class="console-link-block-text">拜访记录</div>
|
||||
<i class="console-link-block-icon layui-icon layui-icon-service"></i>
|
||||
<div class="console-link-block-band">去查看</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
|
||||
<div class="console-link-block">
|
||||
<div class="console-link-block-num">26</div>
|
||||
<div class="console-link-block-text">项目申报</div>
|
||||
<i class="console-link-block-icon layui-icon layui-icon-email"></i>
|
||||
<div class="console-link-block-band">待审批</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 统计图表 -->
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md4 layui-col-sm6">
|
||||
<div class="layui-card" style="overflow: hidden;">
|
||||
<div class="layui-card-header">日统计</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="consoleChartsDay" style="height: 300px;"></div>
|
||||
<div style="color: #10B4E8;font-size: 18px;position: absolute;bottom: 85px;left: 0;right:0;text-align: center;cursor: pointer;">
|
||||
签到明细<i class="layui-icon layui-icon-right" style="font-size: 16px;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4 layui-col-sm6">
|
||||
<div class="layui-card" style="overflow: hidden;">
|
||||
<div class="layui-card-header">周统计</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="consoleChartsWeek" style="height: 300px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4 layui-col-sm6">
|
||||
<div class="layui-card" style="overflow: hidden;">
|
||||
<div class="layui-card-header">月统计</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="consoleChartsMonth" style="height: 300px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4 layui-col-sm6">
|
||||
<div class="layui-card" style="overflow: hidden;">
|
||||
<div class="layui-card-header">雷达图</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="consoleChartsWord" style="height: 300px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-md4 layui-col-sm6">
|
||||
<div class="layui-card" style="overflow: hidden;">
|
||||
<div class="layui-card-header">散点图</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="consoleChartsScatter" style="height: 300px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-md4 layui-col-sm6">
|
||||
<div class="layui-card" style="overflow: hidden;">
|
||||
<div class="layui-card-header">旭日图</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="consoleChartsSunburst" style="height: 300px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<include file="/public/footer"/>
|
||||
<script src="__STATICADMIN__module/echarts/echarts.js?console"></script>
|
||||
<script src="__STATICADMIN__module/echarts/china.js?console"></script>
|
||||
<script>
|
||||
layui.use(['layer'], function () {
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
|
||||
/** 渲染日统计图表 */
|
||||
var myCharts1 = echarts.init(document.getElementById('consoleChartsDay'));
|
||||
var options1 = {
|
||||
title: {
|
||||
text: '签到人数/应到人数', x: 'center', y: '32%',
|
||||
textStyle: {fontSize: 16, color: '#262626', fontWeight: 'normal'},
|
||||
subtextStyle: {fontSize: 39, color: '#10B4E8'}, itemGap: 20
|
||||
},
|
||||
color: ['#10B4E8', '#E0E0E0'],
|
||||
tooltip: {trigger: 'item'},
|
||||
legend: {
|
||||
orient: 'vertical', right: '0px', top: '0px',
|
||||
data: ['已签到', '未签到'], textStyle: {color: '#595959'}
|
||||
},
|
||||
series: [{name: '人数', type: 'pie', radius: ['75%', '80%'], label: {normal: {show: false}}}]
|
||||
};
|
||||
myCharts1.setOption(options1);
|
||||
// 赋值
|
||||
myCharts1.setOption({
|
||||
title: {subtext: '38/60'}, series: [{data: [{name: '已签到', value: 38}, {name: '未签到', value: 22}]}]
|
||||
});
|
||||
|
||||
/** 渲染周统计图表 */
|
||||
var myCharts2 = echarts.init(document.getElementById('consoleChartsWeek'));
|
||||
var options2 = {
|
||||
tooltip: {trigger: 'axis', axisPointer: {lineStyle: {color: '#E0E0E0'}}},
|
||||
color: ['#10B4E8', '#FFA800'],
|
||||
legend: {
|
||||
orient: 'vertical', right: '0px', top: '0px',
|
||||
data: ['已签到', '未签到'], textStyle: {color: '#595959'}
|
||||
},
|
||||
grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
|
||||
xAxis: {
|
||||
name: '星期',
|
||||
nameTextStyle: {color: '#595959'},
|
||||
type: 'category',
|
||||
data: ['周一', '周二', '周三', '周四', '周五'],
|
||||
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
|
||||
axisLabel: {color: '#8c8c8c'},
|
||||
axisTick: {alignWithLabel: true}
|
||||
},
|
||||
yAxis: {
|
||||
name: '人数',
|
||||
nameTextStyle: {color: '#595959'},
|
||||
type: 'value',
|
||||
boundaryGap: ['0', '20%'],
|
||||
axisTick: {show: false},
|
||||
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
|
||||
axisLabel: {color: '#8c8c8c'},
|
||||
splitLine: {show: false},
|
||||
splitArea: {show: false},
|
||||
minInterval: 1
|
||||
},
|
||||
series: [{
|
||||
name: '已签到', type: 'bar', stack: 'one', barMaxWidth: '30px',
|
||||
label: {normal: {show: true, position: 'inside'}}
|
||||
}, {
|
||||
name: '未签到', type: 'bar', stack: 'one', barMaxWidth: '30px',
|
||||
label: {normal: {show: true, position: 'inside'}}
|
||||
}]
|
||||
};
|
||||
myCharts2.setOption(options2);
|
||||
// 赋值
|
||||
myCharts2.setOption({series: [{data: [5, 9, 6, 3, 10]}, {data: [10, 6, 9, 12, 5]}]});
|
||||
|
||||
/** 渲染月统计图表 */
|
||||
var myCharts3 = echarts.init(document.getElementById('consoleChartsMonth'));
|
||||
var options3 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {lineStyle: {color: '#E0E0E0'}},
|
||||
formatter: '{b}号<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#10B4E8;"></span>{a0}: {c0}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#FFA800;"></span>{a1}: {c1}'
|
||||
},
|
||||
color: ['#10B4E8', '#FFA800'],
|
||||
legend: {
|
||||
orient: 'vertical', right: '0px', top: '0px',
|
||||
data: ['已签到', '未签到'], textStyle: {color: '#595959'}
|
||||
},
|
||||
grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
|
||||
xAxis: {
|
||||
name: '日期',
|
||||
nameTextStyle: {color: '#595959'},
|
||||
type: 'category',
|
||||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
|
||||
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
|
||||
axisLabel: {
|
||||
color: '#8c8c8c', interval: function (index, value) {
|
||||
return index === 0 || ((index + 1) % 5 === 0);
|
||||
}
|
||||
},
|
||||
axisTick: {alignWithLabel: true}
|
||||
},
|
||||
yAxis: {
|
||||
name: '人数',
|
||||
nameTextStyle: {color: '#595959'},
|
||||
type: 'value',
|
||||
boundaryGap: ['0', '20%'],
|
||||
axisTick: {show: false},
|
||||
axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
|
||||
axisLabel: {color: '#8c8c8c'},
|
||||
splitLine: {show: false},
|
||||
splitArea: {show: false},
|
||||
minInterval: 1
|
||||
},
|
||||
series: [
|
||||
{name: '已签到', type: 'line', smooth: false},
|
||||
{name: '未签到', type: 'line', smooth: false}
|
||||
]
|
||||
};
|
||||
myCharts3.setOption(options3);
|
||||
// 赋值
|
||||
myCharts3.setOption({
|
||||
series: [
|
||||
{data: [15, 14, 13, 13, 13, 14, 15, 16, 17, 18, 19, 18, 18, 19, 20, 19, 18, 16, 14, 12, 10, 10, 12, 14, 16, 16, 14, 13, 12, 11, 10]},
|
||||
{data: [24, 22, 20, 18, 16, 14, 13, 12, 11, 11, 10, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 23, 24, 25, 26, 26, 24, 22, 20, 18, 16]}
|
||||
]
|
||||
});
|
||||
|
||||
/** 渲染散点图 */
|
||||
var myCharts4 = echarts.init(document.getElementById('consoleChartsScatter'));
|
||||
const axisData = ['Mon', 'Tue', 'Wed', 'Very Loooong Thu', 'Fri', 'Sat', 'Sun'];
|
||||
const data = axisData.map(function (item, i) {
|
||||
return Math.round(Math.random() * 1000 * (i + 1));
|
||||
});
|
||||
const links = data.map(function (item, i) {
|
||||
return {
|
||||
source: i,
|
||||
target: i + 1
|
||||
};
|
||||
});
|
||||
links.pop();
|
||||
var options4 = {
|
||||
title: {
|
||||
text: 'Graph on Cartesian'
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: axisData
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
coordinateSystem: 'cartesian2d',
|
||||
symbolSize: 40,
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
edgeSymbol: ['circle', 'arrow'],
|
||||
edgeSymbolSize: [4, 10],
|
||||
data: data,
|
||||
links: links,
|
||||
lineStyle: {
|
||||
color: '#2f4554'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
myCharts4.setOption(options4);
|
||||
// 赋值
|
||||
myCharts4.setOption({
|
||||
series: [{
|
||||
data: [
|
||||
{name: "西藏", value: 60},
|
||||
{name: "青海", value: 167},
|
||||
{name: "宁夏", value: 210},
|
||||
{name: "海南", value: 252},
|
||||
{name: "甘肃", value: 502},
|
||||
{name: "贵州", value: 570},
|
||||
{name: "新疆", value: 661},
|
||||
{name: "云南", value: 8890},
|
||||
{name: "重庆", value: 10010},
|
||||
{name: "吉林", value: 5056},
|
||||
{name: "山西", value: 2123},
|
||||
{name: "天津", value: 9130},
|
||||
{name: "江西", value: 10170},
|
||||
{name: "广西", value: 6172},
|
||||
{name: "陕西", value: 9251},
|
||||
{name: "黑龙江", value: 5125},
|
||||
{name: "内蒙古", value: 1435},
|
||||
{name: "安徽", value: 9530},
|
||||
{name: "北京", value: 51919},
|
||||
{name: "福建", value: 3756},
|
||||
{name: "上海", value: 59190},
|
||||
{name: "湖北", value: 37109},
|
||||
{name: "湖南", value: 8966},
|
||||
{name: "四川", value: 31020},
|
||||
{name: "辽宁", value: 7222},
|
||||
{name: "河北", value: 3451},
|
||||
{name: "河南", value: 9693},
|
||||
{name: "浙江", value: 62310},
|
||||
{name: "山东", value: 39231},
|
||||
{name: "江苏", value: 35911},
|
||||
{name: "广东", value: 55891}
|
||||
]
|
||||
}]
|
||||
});
|
||||
|
||||
var myCharts5 = echarts.init(document.getElementById('consoleChartsWord'));
|
||||
var options5 = {
|
||||
legend: {
|
||||
data: ['项目一', '项目二']
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
indicator: [
|
||||
{ name: '销售额', max: 6500 },
|
||||
{ name: '评分', max: 16000 },
|
||||
{ name: '信息技术', max: 30000 },
|
||||
{ name: '客户支持', max: 38000 },
|
||||
{ name: '开发率', max: 52000 },
|
||||
{ name: '市场占有率', max: 25000 }
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Budget vs spending',
|
||||
type: 'radar',
|
||||
data: [
|
||||
{
|
||||
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
||||
name: 'Allocated Budget'
|
||||
},
|
||||
{
|
||||
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
||||
name: 'Actual Spending'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myCharts5.setOption(options5);
|
||||
|
||||
// 赋值
|
||||
var myCharts6 = echarts.init(document.getElementById('consoleChartsSunburst'));
|
||||
|
||||
|
||||
var options6 = {
|
||||
silent: true,
|
||||
series: [
|
||||
{
|
||||
radius: ['15%', '80%'],
|
||||
type: 'sunburst',
|
||||
sort: undefined,
|
||||
emphasis: {
|
||||
focus: 'ancestor'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 8,
|
||||
children: [
|
||||
{
|
||||
value: 4,
|
||||
children: [
|
||||
{
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
value: 0.5
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
children: [
|
||||
{
|
||||
children: [
|
||||
{
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
children: [
|
||||
{
|
||||
children: [
|
||||
{
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
children: [
|
||||
{
|
||||
children: [
|
||||
{
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
label: {
|
||||
color: '#000',
|
||||
textBorderColor: '#fff',
|
||||
textBorderWidth: 2,
|
||||
formatter: function (param) {
|
||||
var depth = param.treePathInfo.length;
|
||||
if (depth === 2) {
|
||||
return 'radial';
|
||||
} else if (depth === 3) {
|
||||
return 'tangential';
|
||||
} else if (depth === 4) {
|
||||
return '0';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
},
|
||||
levels: [
|
||||
{},
|
||||
{
|
||||
itemStyle: {
|
||||
color: '#CD4949'
|
||||
},
|
||||
label: {
|
||||
rotate: 'radial'
|
||||
}
|
||||
},
|
||||
{
|
||||
itemStyle: {
|
||||
color: '#F47251'
|
||||
},
|
||||
label: {
|
||||
rotate: 'tangential'
|
||||
}
|
||||
},
|
||||
{
|
||||
itemStyle: {
|
||||
color: '#FFC75F'
|
||||
},
|
||||
label: {
|
||||
rotate: 0
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myCharts6.setOption(options6);
|
||||
|
||||
/** 窗口大小改变事件 */
|
||||
window.onresize = function () {
|
||||
myCharts1.resize();
|
||||
myCharts2.resize();
|
||||
myCharts3.resize();
|
||||
myCharts4.resize();
|
||||
myCharts5.resize();
|
||||
myCharts6.resize();
|
||||
};
|
||||
|
||||
});
|
||||
</script>
|
||||
23
app/admin/view/developer/example/editor.html
Normal file
23
app/admin/view/developer/example/editor.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<include file="/public/header"/>
|
||||
<!-- // 重定位style -->
|
||||
<!--Developer-->
|
||||
<div class="layui-fluid ">
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"> Tinymce 富文本编辑器</div>
|
||||
<div class="layui-card-body">
|
||||
<textarea name="" id="" lay-editor cols="30" rows="10"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"> Cherry Markdown编辑器 腾讯出品</div>
|
||||
<div class="layui-card-body">
|
||||
<textarea name="" id="" lay-markdown cols="30" rows="10"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<include file="/public/static"/>
|
||||
<include file="/public/footer"/>
|
||||
|
||||
437
app/admin/view/developer/example/index.html
Normal file
437
app/admin/view/developer/example/index.html
Normal file
@@ -0,0 +1,437 @@
|
||||
<include file="/public/header"/>
|
||||
<!-- // 重定位style -->
|
||||
<!--Developer-->
|
||||
<div class="layui-fluid ">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
||||
<legend>综合演示</legend>
|
||||
</fieldset>
|
||||
<form class="layui-form" action="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单行输入框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" lay-verify="title" autoComplete="off" placeholder="请输入标题"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">验证必填项</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？"
|
||||
placeholder="请输入"
|
||||
autoComplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">验证手机</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="tel" name="phone" lay-verify="required|phone" autoComplete="off"
|
||||
class="layui-input demo-phone">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">验证码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="vercode" lay-verify="required" autoComplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid" style="padding: 0!important;">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">验证邮箱</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="email" lay-verify="email" autoComplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">验证日期</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd"
|
||||
autoComplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">自定义验证</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="password" lay-verify="pass" placeholder="请输入" autoComplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">6 到 12 位字符</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">范围</label>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_min" placeholder="￥" autoComplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_max" placeholder="￥" autoComplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单行选择框</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="interest" lay-filter="aihao">
|
||||
<option value=""></option>
|
||||
<option value="0">写作</option>
|
||||
<option value="1" selected="">阅读</option>
|
||||
<option value="2">游戏</option>
|
||||
<option value="3">音乐</option>
|
||||
<option value="4">旅行</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">分组选择框</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz">
|
||||
<option value="">请选择问题</option>
|
||||
<optgroup label="城市记忆">
|
||||
<option value="你工作的第一个城市">你工作的第一个城市</option>
|
||||
</optgroup>
|
||||
<optgroup label="学生时代">
|
||||
<option value="你的工号">你的工号</option>
|
||||
<option value="你最喜欢的老师">你最喜欢的老师</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">搜索选择框</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="modules" lay-verify="required" lay-search="">
|
||||
<option value="">直接选择或搜索选择</option>
|
||||
<option value="1">layer</option>
|
||||
<option value="2">form</option>
|
||||
<option value="3">layim</option>
|
||||
<option value="4">element</option>
|
||||
<option value="5">laytpl</option>
|
||||
<option value="6">upload</option>
|
||||
<option value="7">laydate</option>
|
||||
<option value="8">laypage</option>
|
||||
<option value="9">flow</option>
|
||||
<option value="10">util</option>
|
||||
<option value="11">code</option>
|
||||
<option value="12">tree</option>
|
||||
<option value="13">layedit</option>
|
||||
<option value="14">nav</option>
|
||||
<option value="15">tab</option>
|
||||
<option value="16">table</option>
|
||||
<option value="17">select</option>
|
||||
<option value="18">checkbox</option>
|
||||
<option value="19">switch</option>
|
||||
<option value="20">radio</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">联动选择框</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz1">
|
||||
<option value="">请选择省</option>
|
||||
<option value="浙江" selected="">浙江省</option>
|
||||
<option value="你的工号">江西省</option>
|
||||
<option value="你最喜欢的老师">福建省</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz2">
|
||||
<option value="">请选择市</option>
|
||||
<option value="杭州">杭州</option>
|
||||
<option value="宁波" disabled="">宁波</option>
|
||||
<option value="温州">温州</option>
|
||||
<option value="温州">台州</option>
|
||||
<option value="温州">绍兴</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz3">
|
||||
<option value="">请选择县/区</option>
|
||||
<option value="西湖区">西湖区</option>
|
||||
<option value="余杭区">余杭区</option>
|
||||
<option value="拱墅区">临安市</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">此处只是演示联动排版，并未做联动交互</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="like[write]" title="写作">
|
||||
<input type="checkbox" name="like[read]" title="阅读" checked="">
|
||||
<input type="checkbox" name="like[game]" title="游戏">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item" pane="">
|
||||
<label class="layui-form-label">原始复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
|
||||
<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
|
||||
<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">开关-默认关</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">开关-默认开</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest"
|
||||
lay-text="ON|OFF">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex" value="男" title="男" checked="">
|
||||
<input type="radio" name="sex" value="女" title="女">
|
||||
<input type="radio" name="sex" value="禁" title="禁用" disabled="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">普通文本域</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- 示例-970 -->
|
||||
<!--
|
||||
<ins class="adsbygoogle"
|
||||
style="display:inline-block;width:970px;height:90px"
|
||||
data-ad-client="ca-pub-6111334333458862"
|
||||
data-ad-slot="3820120620"></ins>
|
||||
-->
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
|
||||
<legend>赋值和取值</legend>
|
||||
</fieldset>
|
||||
|
||||
<form class="layui-form" action="" lay-filter="example">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">输入框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="username" lay-verify="title" autoComplete="off" placeholder="请输入标题"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="password" name="password" placeholder="请输入密码" autoComplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选择框</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="interest" lay-filter="aihao">
|
||||
<option value=""></option>
|
||||
<option value="0">写作</option>
|
||||
<option value="1">阅读</option>
|
||||
<option value="2">游戏</option>
|
||||
<option value="3">音乐</option>
|
||||
<option value="4">旅行</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="like[write]" title="写作">
|
||||
<input type="checkbox" name="like[read]" title="阅读">
|
||||
<input type="checkbox" name="like[daze]" title="发呆">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">开关</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex" value="男" title="男" checked="">
|
||||
<input type="radio" name="sex" value="女" title="女">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">文本域</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值
|
||||
</button>
|
||||
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
|
||||
<legend>方框风格的表单集合</legend>
|
||||
</fieldset>
|
||||
<form class="layui-form layui-form-pane" action="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">长输入框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" autoComplete="off" placeholder="请输入标题" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">短输入框</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="username" lay-verify="required" placeholder="请输入" autoComplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期选择</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="date" id="date1" autoComplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">行内表单</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="number" autoComplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="password" placeholder="请输入密码" autoComplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">范围</label>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_min" placeholder="￥" autoComplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_max" placeholder="￥" autoComplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单行选择框</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="interest" lay-filter="aihao">
|
||||
<option value=""></option>
|
||||
<option value="0">写作</option>
|
||||
<option value="1" selected="">阅读</option>
|
||||
<option value="2">游戏</option>
|
||||
<option value="3">音乐</option>
|
||||
<option value="4">旅行</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">行内选择框</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz1">
|
||||
<option value="">请选择省</option>
|
||||
<option value="浙江" selected="">浙江省</option>
|
||||
<option value="你的工号">江西省</option>
|
||||
<option value="你最喜欢的老师">福建省</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz2">
|
||||
<option value="">请选择市</option>
|
||||
<option value="杭州">杭州</option>
|
||||
<option value="宁波" disabled="">宁波</option>
|
||||
<option value="温州">温州</option>
|
||||
<option value="温州">台州</option>
|
||||
<option value="温州">绍兴</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz3">
|
||||
<option value="">请选择县/区</option>
|
||||
<option value="西湖区">西湖区</option>
|
||||
<option value="余杭区">余杭区</option>
|
||||
<option value="拱墅区">临安市</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane="">
|
||||
<label class="layui-form-label">开关-开</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest"
|
||||
title="开关">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane="">
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex" value="男" title="男" checked="">
|
||||
<input type="radio" name="sex" value="女" title="女">
|
||||
<input type="radio" name="sex" value="禁" title="禁用" disabled="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">文本域</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<include file="/public/footer"/>
|
||||
<script>
|
||||
layui.use(['layer'], function () {
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
315
app/admin/view/developer/example/table.html
Normal file
315
app/admin/view/developer/example/table.html
Normal file
@@ -0,0 +1,315 @@
|
||||
<include file="/public/header"/>
|
||||
<!-- // 重定位style -->
|
||||
<!--Developer-->
|
||||
<div class="layui-fluid ">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div id="demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 task" style="height: 260px">
|
||||
<table class="layui-table" lay-skin="nob">
|
||||
<colgroup>
|
||||
<col>
|
||||
<col>
|
||||
<col width="250">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>发起人</th>
|
||||
<th>发起时间</th>
|
||||
<th>当前进度</th>
|
||||
<th> 状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>权栈</td>
|
||||
<td>2021/01/28 10:23:46</td>
|
||||
<td>
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-blue" lay-percent="92%"
|
||||
style="width: 92%;"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="layui-badge layui-bg-blue" lay-tips="这里可以增加额外的提示信息！">已完成</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张爱玲</td>
|
||||
<td>2021/01/28 10:23:46</td>
|
||||
<td>
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-orange" lay-percent="30%"
|
||||
style="width: 30%;"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="layui-badge layui-bg-orange" lay-tips="当前任务出现BUG急需修复！">待修复</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>岳飞</td>
|
||||
<td>2021/01/28 10:23:46</td>
|
||||
<td>
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-green" lay-percent="83%"
|
||||
style="width: 83%;"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="layui-badge layui-bg-green">进行中</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>张三丰</td>
|
||||
<td>2021/01/28 10:23:46</td>
|
||||
<td>
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-red" lay-percent="54%"
|
||||
style="width: 54%;"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="layui-badge">已延期</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>乔峰</td>
|
||||
<td>2021/01/28 10:23:46</td>
|
||||
<td>
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-cyan" lay-percent="10%"
|
||||
style="width: 10%;"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="layui-badge layui-bg-cyan">未开始</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">版本信息</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="90">
|
||||
<col>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>当前版本</td>
|
||||
<td><a href="http://www.swiftadmin.net/" target="_blank">{:release()}</a>
|
||||
<a href="https://www.swiftadmin.net/download/" target="_blank"
|
||||
style="padding-left: 10px;">日志</a>
|
||||
<a href="javascript:;" sa-event="update" style="padding-left: 5px;">检查更新</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>前端框架</td>
|
||||
<td>layui-v2.6-Fix / 多语言 / 多布局 / 前端鉴权</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>后端框架</td>
|
||||
<td>ThinkPHP6lts</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PHP版本</td>
|
||||
<td>支持>=7.3 &8 QQ群：68221484</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>主要特色</td>
|
||||
<td><font color="red">ant design</font> / 零门槛 / 响应式 / 清爽</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>获取渠道</td>
|
||||
<td style="padding-bottom: 0;">
|
||||
<div class="layui-btn-container">
|
||||
<div class="layui-col-md4"><a href="https://www.swiftadmin.net/authorize.html"
|
||||
target="_blank" class="layui-btn layui-btn-danger">获取授权</a>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<a href="https://www.swiftadmin.net/download/" target="_blank" class="layui-btn">立即下载</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card" id="console">
|
||||
<div class="layui-card-header">小组成员</div>
|
||||
<div class="layui-card-body" style="height: 260px">
|
||||
<div class="console-user-group">
|
||||
<img src="__ADMINIMAGES__/user.png" class="console-user-group-head" alt=""/>
|
||||
<div class="console-user-group-name">周星星</div>
|
||||
<div class="console-user-group-desc">产品负责人</div>
|
||||
<span class="layui-badge layui-badge-green">在线</span>
|
||||
</div>
|
||||
<div class="console-user-group">
|
||||
<img src="__ADMINIMAGES__/user.png" class="console-user-group-head" alt=""/>
|
||||
<div class="console-user-group-name">周星星</div>
|
||||
<div class="console-user-group-desc">项目负责人</div>
|
||||
<span class="layui-badge layui-badge-green">在线</span>
|
||||
</div>
|
||||
<div class="console-user-group">
|
||||
<img src="__ADMINIMAGES__/user.png" class="console-user-group-head" alt=""/>
|
||||
<div class="console-user-group-name">周星星</div>
|
||||
<div class="console-user-group-desc">产品负责人</div>
|
||||
<span class="layui-badge layui-badge-red">离线</span>
|
||||
</div>
|
||||
<div class="console-user-group">
|
||||
<img src="__ADMINIMAGES__/user.png" class="console-user-group-head" alt=""/>
|
||||
<div class="console-user-group-name">周星星</div>
|
||||
<div class="console-user-group-desc">测试负责人</div>
|
||||
<span class="layui-badge layui-badge-red">离线</span>
|
||||
</div>
|
||||
<div class="console-user-group">
|
||||
<img src="__ADMINIMAGES__/user.png" class="console-user-group-head" alt=""/>
|
||||
<div class="console-user-group-name">周星星</div>
|
||||
<div class="console-user-group-desc">测试负责人</div>
|
||||
<span class="layui-badge layui-badge-red">离线</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<include file="/public/footer"/>
|
||||
<script>
|
||||
layui.use(['layer','table'], function () {
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
var table = layui.table;
|
||||
|
||||
//展示已知数据
|
||||
table.render({
|
||||
elem: '#demo'
|
||||
,cols: [[ //标题栏
|
||||
{type: 'checkbox', width: 50},
|
||||
,{field: 'id', title: 'ID', width: 80, sort: true}
|
||||
,{field: 'username', title: '用户名', width: 120}
|
||||
,{field: 'email', title: '邮箱', minWidth: 150}
|
||||
,{field: 'sign', title: '签名', minWidth: 160}
|
||||
,{field: 'sex', title: '性别', width: 80}
|
||||
,{field: 'city', title: '城市', width: 100}
|
||||
,{field: 'experience', title: '积分', width: 80, sort: true}
|
||||
]]
|
||||
,data: [{
|
||||
"id": "10001"
|
||||
,"username": "杜甫"
|
||||
,"email": "test@email.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "116"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "108"
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10002"
|
||||
,"username": "李白"
|
||||
,"email": "test@email.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "12"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
,"LAY_CHECKED": true
|
||||
}, {
|
||||
"id": "10003"
|
||||
,"username": "王勃"
|
||||
,"email": "test@email.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "65"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10004"
|
||||
,"username": "贤心"
|
||||
,"email": "test@email.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "666"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10005"
|
||||
,"username": "贤心"
|
||||
,"email": "test@email.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "86"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10006"
|
||||
,"username": "贤心"
|
||||
,"email": "test@email.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "12"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10007"
|
||||
,"username": "贤心"
|
||||
,"email": "test@email.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "16"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10008"
|
||||
,"username": "贤心"
|
||||
,"email": "test@email.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": "106"
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": "106"
|
||||
,"joinTime": "2016-10-14"
|
||||
}]
|
||||
//,skin: 'line' //表格风格
|
||||
,even: true
|
||||
,page: true //是否显示分页
|
||||
,limits: [5, 7, 10]
|
||||
//,limit: 5 //每页默认显示的数量
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user