diff --git a/admin/data/card.json b/admin/data/card.json new file mode 100644 index 0000000..e531747 --- /dev/null +++ b/admin/data/card.json @@ -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": "几秒前" + }] +} diff --git a/admin/data/menu.json b/admin/data/menu.json index c5c4a2e..c88b119 100644 --- a/admin/data/menu.json +++ b/admin/data/menu.json @@ -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, diff --git a/component/pear/css/pear-module/card.css b/component/pear/css/pear-module/card.css new file mode 100644 index 0000000..06b0d7a --- /dev/null +++ b/component/pear/css/pear-module/card.css @@ -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; + } \ No newline at end of file diff --git a/component/pear/css/pear.css b/component/pear/css/pear.css index 7694da5..fea9e57 100644 --- a/component/pear/css/pear.css +++ b/component/pear/css/pear.css @@ -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"); diff --git a/component/pear/module/card.js b/component/pear/module/card.js new file mode 100644 index 0000000..6a4f476 --- /dev/null +++ b/component/pear/module/card.js @@ -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 = "
" + var content = createCards(data); + var page = "
" + content = content + page; + html += content + "
" + return html; + } + + + /** 创建指定数量的卡片 */ + function createCards(data) { + + var content = "
"; + $.each(data, function(i, item) { + + content += createCard(item); + + }) + content += "
" + return content; + } + + + /** 创建一个卡片 */ + function createCard(item) { + + var card = + '

'+item.title+'

'+item.remark+'
'+item.time+'
' + + 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()); +}) diff --git a/component/pear/pear.js b/component/pear/pear.js index 586c32f..257f5c6 100644 --- a/component/pear/pear.js +++ b/component/pear/pear.js @@ -30,5 +30,6 @@ layui.config({ topBar: "topBar", button: "button", design: "design", - dropdown: "dropdown" + dropdown: "dropdown", + card: "card" }); diff --git a/view/document/card.html b/view/document/card.html new file mode 100644 index 0000000..ab9939d --- /dev/null +++ b/view/document/card.html @@ -0,0 +1,104 @@ + + + + + + + + + +
+
+
+
+ +
+ +
+ +
+ +
+ + + +
+
+
+
+
+
+ 卡片列表 +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + \ No newline at end of file