卡片示例
就眠仪式
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,
|
||||
"openType": "_iframe",
|
||||
"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,
|
||||
|
|
|
|||
|
|
@ -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/link.css");
|
||||
@import url("pear-module/step.css");
|
||||
@import url("pear-module/card.css");
|
||||
@import url("pear-module/tab.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",
|
||||
button: "button",
|
||||
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