卡片列表
Jmysy
parent
80061e7f6e
commit
d425d4d115
|
|
@ -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": "那是一种内在的东西， 他们到达不了，也无法触及的"
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
@ -151,6 +151,14 @@
|
||||||
"openType": "_iframe",
|
"openType": "_iframe",
|
||||||
"href": "view/common/senior/table.html"
|
"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,
|
"id": 222,
|
||||||
"title": "树型表格",
|
"title": "树型表格",
|
||||||
|
|
|
||||||
|
|
@ -159,24 +159,5 @@
|
||||||
"enable": "1",
|
"enable": "1",
|
||||||
"login": "1",
|
"login": "1",
|
||||||
"roleIds": null
|
"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
|
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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());
|
||||||
|
})
|
||||||
|
|
@ -48,6 +48,7 @@
|
||||||
jquery: "modules/jquery",
|
jquery: "modules/jquery",
|
||||||
mobile: "modules/mobile",
|
mobile: "modules/mobile",
|
||||||
dtree:"extends/dtree",
|
dtree:"extends/dtree",
|
||||||
|
pearCard:"extends/pearCard",
|
||||||
pearTab:"extends/pearTab",
|
pearTab:"extends/pearTab",
|
||||||
pearMenu:"extends/pearMenu",
|
pearMenu:"extends/pearMenu",
|
||||||
pearOper:"extends/pearOper",
|
pearOper:"extends/pearOper",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -88,42 +88,42 @@
|
||||||
<div class="layui-card-body">
|
<div class="layui-card-body">
|
||||||
<dl class="layuiadmin-card-status">
|
<dl class="layuiadmin-card-status">
|
||||||
<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>
|
<div>
|
||||||
<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
|
<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
|
||||||
<span>几秒前</span>
|
<span>几秒前</span>
|
||||||
</div>
|
</div>
|
||||||
</dd>
|
</dd>
|
||||||
<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>
|
<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>
|
<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>
|
<span>2天前</span>
|
||||||
</div>
|
</div>
|
||||||
</dd>
|
</dd>
|
||||||
<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>
|
<div>
|
||||||
<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
|
<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
|
||||||
<span>7天前</span>
|
<span>7天前</span>
|
||||||
</div>
|
</div>
|
||||||
</dd>
|
</dd>
|
||||||
<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>
|
<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>
|
<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>
|
<span>7天前</span>
|
||||||
</div>
|
</div>
|
||||||
</dd>
|
</dd>
|
||||||
<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>
|
<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>
|
<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>
|
<span>8天前</span>
|
||||||
</div>
|
</div>
|
||||||
</dd>
|
</dd>
|
||||||
<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>
|
<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>
|
<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>
|
<span>8天前</span>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue