卡片示例
就眠仪式
parent
e044690daf
commit
6e324b6124
|
|
@ -0,0 +1,56 @@
|
||||||
|
{
|
||||||
|
"code": 0,
|
||||||
|
"msg": "...",
|
||||||
|
"count": 3,
|
||||||
|
"data": [{
|
||||||
|
"id": "1",
|
||||||
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
|
||||||
|
"title": "Alipay",
|
||||||
|
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
||||||
|
"time": "几秒前"
|
||||||
|
},{
|
||||||
|
"id": "2",
|
||||||
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
|
||||||
|
"title": "Layui",
|
||||||
|
"remark": "生命就像一盒巧克力，结果往往出人意料",
|
||||||
|
"time": "几秒前"
|
||||||
|
},{
|
||||||
|
"id": "1",
|
||||||
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
|
||||||
|
"title": "Angular",
|
||||||
|
"remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
|
||||||
|
"time": "几秒前"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1",
|
||||||
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
|
||||||
|
"title": "React",
|
||||||
|
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
||||||
|
"time": "几秒前"
|
||||||
|
},{
|
||||||
|
"id": "1",
|
||||||
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
|
||||||
|
"title": "Alipay",
|
||||||
|
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
||||||
|
"time": "几秒前"
|
||||||
|
},{
|
||||||
|
"id": "2",
|
||||||
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
|
||||||
|
"title": "Layui",
|
||||||
|
"remark": "生命就像一盒巧克力，结果往往出人意料",
|
||||||
|
"time": "几秒前"
|
||||||
|
},{
|
||||||
|
"id": "1",
|
||||||
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
|
||||||
|
"title": "Angular",
|
||||||
|
"remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的",
|
||||||
|
"time": "几秒前"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1",
|
||||||
|
"image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
|
||||||
|
"title": "React",
|
||||||
|
"remark": "那是一种内在的东西， 他们到达不了，也无法触及的",
|
||||||
|
"time": "几秒前"
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
@ -114,6 +114,13 @@
|
||||||
"type": 1,
|
"type": 1,
|
||||||
"openType": "_iframe",
|
"openType": "_iframe",
|
||||||
"href": "view/document/tinymce.html"
|
"href": "view/document/tinymce.html"
|
||||||
|
}, {
|
||||||
|
"id": 2036,
|
||||||
|
"title": "卡片组件",
|
||||||
|
"icon": "layui-icon layui-icon-face-cry",
|
||||||
|
"type": 1,
|
||||||
|
"openType": "_iframe",
|
||||||
|
"href": "view/document/card.html"
|
||||||
}]
|
}]
|
||||||
}, {
|
}, {
|
||||||
"id": 202,
|
"id": 202,
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
@ -21,5 +21,6 @@
|
||||||
@import url("pear-module/code.css");
|
@import url("pear-module/code.css");
|
||||||
@import url("pear-module/link.css");
|
@import url("pear-module/link.css");
|
||||||
@import url("pear-module/step.css");
|
@import url("pear-module/step.css");
|
||||||
|
@import url("pear-module/card.css");
|
||||||
@import url("pear-module/tab.css");
|
@import url("pear-module/tab.css");
|
||||||
@import url("pear-module/tag.css");
|
@import url("pear-module/tag.css");
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,102 @@
|
||||||
|
layui.define(['table', 'laypage','jquery', 'element'], function(exports) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var MOD_NAME = 'card',
|
||||||
|
$ = 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">'+item.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());
|
||||||
|
})
|
||||||
|
|
@ -30,5 +30,6 @@ layui.config({
|
||||||
topBar: "topBar",
|
topBar: "topBar",
|
||||||
button: "button",
|
button: "button",
|
||||||
design: "design",
|
design: "design",
|
||||||
dropdown: "dropdown"
|
dropdown: "dropdown",
|
||||||
|
card: "card"
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title></title>
|
||||||
|
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
|
||||||
|
</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 src="../../component/pear/pear.js"></script>
|
||||||
|
<script>
|
||||||
|
layui.use(['table','form','jquery','card'],function () {
|
||||||
|
let table = layui.table;
|
||||||
|
let form = layui.form;
|
||||||
|
let $ = layui.jquery;
|
||||||
|
let card = layui.card;
|
||||||
|
|
||||||
|
let MODULE_PATH = "/system/user/";
|
||||||
|
|
||||||
|
card.render({
|
||||||
|
elem:'#user-table',
|
||||||
|
url:'../../admin/data/card.json',
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue