From 04077c5f49b10e179aa4055968da135052b740fd Mon Sep 17 00:00:00 2001 From: chf <156704883@qq.com> Date: Thu, 25 Aug 2022 15:10:02 +0800 Subject: [PATCH 1/2] =?UTF-8?q?message=20=E5=A2=9E=E5=8A=A0=20empty=20?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/data/message.json | 190 ++++++++++---------------- component/pear/css/module/message.css | 46 +++++++ component/pear/module/message.js | 8 ++ 3 files changed, 129 insertions(+), 115 deletions(-) diff --git a/admin/data/message.json b/admin/data/message.json index ee74bb6..7cf9263 100644 --- a/admin/data/message.json +++ b/admin/data/message.json @@ -2,129 +2,89 @@ "id": 1, "title": "通知", "children": [{ - "id": 11, - "avatar": "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png", - "title": "你收到了 14 份新周报", - "context": "这是消息内容。", - "form": "就眠仪式", - "time": "刚刚" - }, { - "id": 12, - "avatar": "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png", - "title": "曲妮妮 已通过第三轮面试", - "context": "这是消息内容。", - "form": "就眠仪式", - "time": "刚刚" - }, - { - "id": 11, - "avatar": "https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png", - "title": "可以区分多种通知类型", - "context": "这是消息内容。", - "form": "就眠仪式", - "time": "刚刚" - }, { - "id": 12, - "avatar": "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png", - "title": "左侧图标用于区分不同的类型", - "context": "这是消息内容。", - "form": "就眠仪式", - "time": "刚刚" - }, - { - "id": 11, - "avatar": "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png", - "title": "内容不要超过两行字", - "context": "这是消息内容。", - "form": "就眠仪式", - "time": "刚刚" - } - ] + "id": 11, + "avatar":"https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png", + "title": "你收到了 14 份新周报", + "context": "这是消息内容。", + "form": "就眠仪式", + "time": "刚刚" + }, { + "id": 12, + "avatar":"https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png", + "title": "曲妮妮 已通过第三轮面试", + "context": "这是消息内容。", + "form": "就眠仪式", + "time": "刚刚" + }, + { + "id": 11, + "avatar":"https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png", + "title": "可以区分多种通知类型", + "context": "这是消息内容。", + "form": "就眠仪式", + "time": "刚刚" + }, { + "id": 12, + "avatar":"https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png", + "title": "左侧图标用于区分不同的类型", + "context": "这是消息内容。", + "form": "就眠仪式", + "time": "刚刚" + }, + { + "id": 11, + "avatar":"https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png", + "title": "内容不要超过两行字", + "context": "这是消息内容。", + "form": "就眠仪式", + "time": "刚刚" + }] }, { "id": 2, "title": "消息", "children": [{ - "id": 11, - "avatar": "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png", - "title": "你收到了 14 份新周报", - "context": "这是消息内容。", - "form": "就眠仪式", - "time": "刚刚" - }, { - "id": 12, - "avatar": "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png", - "title": "曲妮妮 已通过第三轮面试", - "context": "这是消息内容。", - "form": "就眠仪式", - "time": "刚刚" - }, - { - "id": 11, - "avatar": "https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png", - "title": "可以区分多种通知类型", - "context": "这是消息内容。", - "form": "就眠仪式", - "time": "刚刚" - }, { - "id": 12, - "avatar": "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png", - "title": "左侧图标用于区分不同的类型", - "context": "这是消息内容。", - "form": "就眠仪式", - "time": "刚刚" - }, - { - "id": 11, - "avatar": "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png", - "title": "内容不要超过两行字", - "context": "这是消息内容。", - "form": "就眠仪式", - "time": "刚刚" - } - ] + "id": 11, + "avatar":"https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png", + "title": "你收到了 14 份新周报", + "context": "这是消息内容。", + "form": "就眠仪式", + "time": "刚刚" + }, { + "id": 12, + "avatar":"https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png", + "title": "曲妮妮 已通过第三轮面试", + "context": "这是消息内容。", + "form": "就眠仪式", + "time": "刚刚" + }, + { + "id": 11, + "avatar":"https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png", + "title": "可以区分多种通知类型", + "context": "这是消息内容。", + "form": "就眠仪式", + "time": "刚刚" + }, { + "id": 12, + "avatar":"https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png", + "title": "左侧图标用于区分不同的类型", + "context": "这是消息内容。", + "form": "就眠仪式", + "time": "刚刚" + }, + { + "id": 11, + "avatar":"https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png", + "title": "内容不要超过两行字", + "context": "这是消息内容。", + "form": "就眠仪式", + "time": "刚刚" + }] }, { "id": 3, "title": "代办", - "children": [{ - "id": 11, - "avatar": "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png", - "title": "你收到了 14 份新周报", - "context": "这是消息内容。", - "form": "就眠仪式", - "time": "刚刚" - }, { - "id": 12, - "avatar": "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png", - "title": "曲妮妮 已通过第三轮面试", - "context": "这是消息内容。", - "form": "就眠仪式", - "time": "刚刚" - }, - { - "id": 11, - "avatar": "https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png", - "title": "可以区分多种通知类型", - "context": "这是消息内容。", - "form": "就眠仪式", - "time": "刚刚" - }, { - "id": 12, - "avatar": "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png", - "title": "左侧图标用于区分不同的类型", - "context": "这是消息内容。", - "form": "就眠仪式", - "time": "刚刚" - }, - { - "id": 11, - "avatar": "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png", - "title": "内容不要超过两行字", - "context": "这是消息内容。", - "form": "就眠仪式", - "time": "刚刚" - } - ] + "children": [] } ] diff --git a/component/pear/css/module/message.css b/component/pear/css/module/message.css index 85475c6..223e79c 100644 --- a/component/pear/css/module/message.css +++ b/component/pear/css/module/message.css @@ -82,3 +82,49 @@ .pear-notice *::-webkit-scrollbar-corner { background: #f6f6f6; } + +/** 增加 empty 样式 */ +.pear-empty { + margin: 0 8px; + font-size: 14px; + line-height: 1.5715; + text-align: center; +} +.pear-empty-normal { + margin: 32px 0; + color: #00000040; +} +.pear-empty-normal .pear-empty-image { + height: 40px; +} + +.pear-empty-image { + height: 100px; + margin-bottom: 8px; +} +.pear-empty-image svg { + height: 100%; + margin: auto; +} + +.pear-empty-img-simple-g { + stroke: #d9d9d9; +} +.pear-empty-img-default-g { + fill: #fff; +} +.pear-empty-img-simple-path { + fill: #fafafa; +} +.pear-empty-img-default-path-1 { + fill: #aeb8c2; +} +.pear-empty-img-default-path-2 { + fill: url(#linearGradient-1); +} +.pear-empty-img-default-path-3 { + fill: #f5f5f7; +} +.pear-empty-img-default-path-4, .pear-empty-img-default-path-5 { + fill: #dce0e6; +} diff --git a/component/pear/module/message.js b/component/pear/module/message.js index 9a7e204..49d221d 100644 --- a/component/pear/module/message.js +++ b/component/pear/module/message.js @@ -105,6 +105,14 @@ layui.define(['table', 'jquery', 'element'], function (exports) { '
' + note.time + '
' + ''; }) + + if(item.children.length==0){ + //没有数据时展示 + //简单样式 + //noticeContent +='

暂无数据

'; + //复杂样式 + noticeContent +='

暂无数据

'; + } noticeContent += ''; }) -- Gitee From 8bbed7c651efd2ad31cf989f5cb01348fdb8cc02 Mon Sep 17 00:00:00 2001 From: chf <156704883@qq.com> Date: Sat, 27 Aug 2022 09:21:55 +0800 Subject: [PATCH 2/2] =?UTF-8?q?empty=E6=A0=B7=E5=BC=8F=E5=9E=82=E7=9B=B4?= =?UTF-8?q?=E5=B1=85=E4=B8=AD=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- component/pear/css/module/message.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/component/pear/css/module/message.css b/component/pear/css/module/message.css index 223e79c..0a61d09 100644 --- a/component/pear/css/module/message.css +++ b/component/pear/css/module/message.css @@ -18,7 +18,6 @@ text-align: center; border-right: 1px solid whitesmoke; } - /*排除最后一个 li 右边框*/ .pear-notice .layui-tab-title li:last-child { border-right: none; @@ -47,7 +46,7 @@ padding-left: 20px; border-bottom: 1px solid whitesmoke; padding-top: 10px; - padding-bottom: 10px; + padding-bottom: 15px; } .pear-notice-end { float: right; @@ -82,13 +81,15 @@ .pear-notice *::-webkit-scrollbar-corner { background: #f6f6f6; } - /** 增加 empty 样式 */ .pear-empty { - margin: 0 8px; font-size: 14px; line-height: 1.5715; - text-align: center; + min-height: 200px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .pear-empty-normal { margin: 32px 0; @@ -128,3 +129,5 @@ .pear-empty-img-default-path-4, .pear-empty-img-default-path-5 { fill: #dce0e6; } + + -- Gitee