root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

卡片列表

develop
Jmysy 2020-06-23 23:16:34 +08:00
parent 80061e7f6e
commit d425d4d115
7 changed files with 329 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
admin/data/card.json Normal file
View File

@ -0,0 +1,27 @@
{
"code": 0,
"msg": "...",
"count": 3,
"data": [{
"id": "1",
"image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
"title": "Alipay",
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的"
},{
"id": "2",
"image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
"title": "Layui",
"remark": "生命就像一盒巧克力，结果往往出人意料"
},{
"id": "1",
"image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
"title": "Angular",
"remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的"
},
{
"id": "1",
"image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
"title": "React",
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的"
}]
}

8
admin/data/menu.json
View File

@ -151,6 +151,14 @@
"openType": "_iframe",
"href": "view/common/senior/table.html"
},
{
"id": 225,
"title": "卡片列表",
"icon": "layui-icon layui-icon-face-smile",
"type": 1,
"openType": "_iframe",
"href": "view/common/senior/card.html"
},
{
"id": 222,
"title": "树型表格",

19
admin/data/user.json
View File

@ -159,24 +159,5 @@
"enable": "1",
"login": "1",
"roleIds": null
}, {
"createTime": null,
"createBy": null,
"updateTime": null,
"updateBy": null,
"remark": null,
"userId": "442492965651353600",
"username": "970796069",
"password": null,
"salt": null,
"status": null,
"realName": "王二麻子",
"email": null,
"avatar": null,
"sex": "1",
"phone": "1555324324234",
"enable": "1",
"login": "1",
"roleIds": null
}]
}

116
component/layui/lay/extends/pearCard.js Normal file
View File

@ -0,0 +1,116 @@
layui.define(['table', 'laypage','jquery', 'element'], function(exports) {
"use strict";
var MOD_NAME = 'pearCard',
$ = layui.jquery,
element = layui.element,
laypage = layui.laypage;
var pearCard = function(opt) {
this.option = opt;
};
pearCard.prototype.render = function(opt) {
var option = {
// 构建的模型
elem: opt.elem,
// 数据 url 连接
url: opt.url,
// lineSize 每行的个数
lineSize: opt.lineSize ? opt.lineSize : 4,
// 共多少个
pageSize: opt.pageSize ? opt.pageSize : 12,
// 当前页
currentPage: opt.currentSize ? opt.currentSize : 0,
// 完 成 函 数
done: opt.done ? opt.done : function() {
alert("跳转页面");
}
}
// 根 据 请 求 方 式 获 取 数 据
if (option.url != null) {
// 复制数据
option.data = getData(option.url).data;
}
// 根据结果进行相应结构的创建
var html = createComponent(option.data);
$(option.elem).html(html);
// 初始化分页组件
laypage.render({
elem: 'cardpage'
,count: 100
,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
,jump: function(obj){
console.log(obj)
}
});
return new pearCard(option);
}
function createComponent(data) {
var html = "<div class='pear-card'>"
var content = createCards(data);
var page = "<div id='cardpage'></div>"
content = content + page;
html += content + "</div>"
return html;
}
/** 创建指定数量的卡片 */
function createCards(data) {
var content = "<div class='layui-row layui-col-space30'>";
$.each(data, function(i, item) {
content += createCard(item);
})
content += "</div>"
return content;
}
/** 创建一个卡片 */
function createCard(item) {
var card =
'<div class="layui-col-md3 ew-datagrid-item" data-index="0" data-number="1"> <div class="project-list-item"> <img class="project-list-item-cover" src="'+item.image+'"> <div class="project-list-item-body"> <h2>'+item.title+'</h2> <div class="project-list-item-text layui-text">'+item.remark+'</div> <div class="project-list-item-desc"> <span class="time">几秒内</span> <div class="ew-head-list"> <img class="ew-head-list-item" lay-tips="曲丽丽" lay-offset="0,-5px" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"> <img class="ew-head-list-item" lay-tips="王昭君" lay-offset="0,-5px" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"> <img class="ew-head-list-item" lay-tips="董娜娜" lay-offset="0,-5px" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"> </div> </div> </div> </div> </div>'
return card;
}
/** 同 步 请 求 获 取 数 据 */
function getData(url) {
$.ajaxSettings.async = false;
var data = null;
$.get(url, function(result) {
data = result;
});
$.ajaxSettings.async = true;
return data;
}
exports(MOD_NAME, new pearCard());
})

1
component/layui/layui.js
View File

@ -48,6 +48,7 @@
jquery: "modules/jquery",
mobile: "modules/mobile",
dtree:"extends/dtree",
pearCard:"extends/pearCard",
pearTab:"extends/pearTab",
pearMenu:"extends/pearMenu",
pearOper:"extends/pearOper",

171
view/common/senior/card.html Normal file
View File

@ -0,0 +1,171 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../../../component/layui/css/layui.css" rel="stylesheet" />
<link href="../../../admin/css/pearCommon.css" rel="stylesheet" />
<style>
.project-list-item {
background-color: #fff;
border-radius: 4px;
cursor: pointer;
transition: all .2s;
}
.project-list-item:hover{
box-shadow: 2px 0 4px rgba(0, 21, 41, .35);
}
.project-list-item .project-list-item-cover {
width: 100%;
height: 220px;
display: block;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.project-list-item-body {
padding: 20px;
border: 1px solid #e8e8e8;
}
.project-list-item .project-list-item-body > h2 {
font-size: 18px;
color: #333;
margin-bottom: 12px;
}
.project-list-item .project-list-item-text {
height: 44px;
overflow: hidden;
margin-bottom: 12px;
}
.project-list-item .project-list-item-desc {
position: relative;
}
.project-list-item .project-list-item-desc .time {
color: #999;
font-size: 12px;
}
.project-list-item .project-list-item-desc .ew-head-list {
position: absolute;
right: 0;
top: 0;
}
.ew-head-list .ew-head-list-item:first-child {
margin-left: 0;
}
.ew-head-list .ew-head-list-item {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid #fff;
margin-left: -10px;
}
.ew-head-list .ew-head-list-item {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid #fff;
margin-left: -10px;
}
.pear-card{
padding:20px;
}
.pear-card .layui-laypage .layui-laypage-curr .layui-laypage-em {
border-radius:0px !important;
}
</style>
</head>
<body>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">卡片标题</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
<label class="layui-form-label">卡片名称</label>
<div class="layui-input-inline">
<input type="text" name="username" placeholder="" class="layui-input">
</div>
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</form>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">
卡片列表
</div>
<div class="layui-card-body">
<table id="user-table" lay-filter="user-table"></table>
</div>
</div>
</body>
<script type="text/html" id="user-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</script>
<script type="text/html" id="user-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>
<script type="text/html" id="user-enable">
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" {{ d.enable == 0 ? 'checked' : '' }}>
</script>
<script type="text/html" id="user-sex">
{{#if (d.sex == 1) { }}
<span>男</span>
{{# }else if(d.sex == 2){ }}
<span>女</span>
{{# } }}
</script>
<script type="text/html" id="user-login">
{{#if (d.login == 0) { }}
<span>在线</span>
{{# }else if(d.sex == 1){ }}
<span>离线</span>
{{# } }}
</script>
<script type="text/html" id="user-createTime">
{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
</script>
<script src="../../../component/layui/layui.js"></script>
<script>
layui.use(['table','form','jquery','pearCard'],function () {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let pearCard = layui.pearCard;
let MODULE_PATH = "/system/user/";
pearCard.render({
elem:'#user-table',
url:'../../../admin/data/card.json',
})
})
</script>
</body>
</html>

12
view/console/console1.html
View File

@ -88,42 +88,42 @@
<div class="layui-card-body">
<dl class="layuiadmin-card-status">
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;" src="../../../Pear%20Admin%20v%201.0/assets/images/avatar.jpg"></a></div>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;" src="../../../assets/images/avatar.jpg"></a></div>
<div>
<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
<span>几秒前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;" src="../../../Pear%20Admin%20v%201.0/assets/images/avatar.jpg"></a></div>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;" src="../../../assets/images/avatar.jpg"></a></div>
<div>
<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
<span>2天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;" src="../../../Pear%20Admin%20v%201.0/assets/images/avatar.jpg"></a></div>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;" src="../../../assets/images/avatar.jpg"></a></div>
<div>
<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
<span>7天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;" src="../../../Pear%20Admin%20v%201.0/assets/images/avatar.jpg"></a></div>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;" src="../../../assets/images/avatar.jpg"></a></div>
<div>
<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
<span>7天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;" src="../../../Pear%20Admin%20v%201.0/assets/images/avatar.jpg"></a></div>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;" src="../../../assets/images/avatar.jpg"></a></div>
<div>
<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
<span>8天前</span>
</div>
</dd>
<dd>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;" src="../../../Pear%20Admin%20v%201.0/assets/images/avatar.jpg"></a></div>
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;" src="../../../assets/images/avatar.jpg"></a></div>
<div>
<p>贤心 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
<span>8天前</span>