ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-08 21:22:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增笔记列表

Browse Source
This commit is contained in:
augushong
2021-04-11 20:08:44 +08:00
parent d5baf8d810
commit 6db3199fd6
3 changed files with 91 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
demo/list.html
View File

@@ -176,10 +176,52 @@
<div class="ul-message-item-img" style="background-image: url('/static/images/view.jpg');" data-repeat="4"> <div class="ul-message-item-img" style="background-image: url('/static/images/view.jpg');" data-repeat="4">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>笔记列表</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-note-list">
<div class="ul-note-item current">
<div class="ul-note-item-icon">
<i class="layui-icon layui-icon-read"></i>
</div>
<div class="ul-note-item-info">
<div class="ul-note-item-title">未命名的笔记</div>
<div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
<div class="ul-note-item-time">2021-04-11</div>
<div class="ul-note-item-tree">
ddd
</div>
</div>
</div>
<div class="ul-note-item">
<div class="ul-note-item-icon">
<i class="layui-icon layui-icon-read"></i>
</div>
<div class="ul-note-item-info">
<div class="ul-note-item-title">未命名的笔记</div>
<div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
<div class="ul-note-item-time">2021-04-11</div>
<div class="ul-note-item-tree">
ddd
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset> </fieldset>

12
demo/tree.html
View File

@@ -101,7 +101,7 @@
} }
console.log('点击收缩目录'); console.log('点击收缩目录');
// 一般不用写这个逻辑 // 一般不用写这个逻辑
}else{ } else {
console.log('点击目录项'); console.log('点击目录项');
// 在这里写点击逻辑 // 在这里写点击逻辑
} }
@@ -128,10 +128,10 @@
<span class="ul-tree-item-title">读书笔记</span> <span class="ul-tree-item-title">读书笔记</span>
</div> </div>
<div class="ul-tree-item-children"> <div class="ul-tree-item-children">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="ul-section"> <div class="ul-section">
@@ -148,12 +148,12 @@
<span class="ul-tree-item-title">小说</span> <span class="ul-tree-item-title">小说</span>
</div> </div>
<div class="ul-tree-item-children"> <div class="ul-tree-item-children">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<pre class="layui-code demo-js"></pre> <pre class="layui-code demo-js"></pre>
@@ -194,4 +194,4 @@
</div> </div>
</div> </div>
</div> </div>
</fieldset> </fieldset>

46
public/cdn/layui-ul.css
View File

@@ -523,13 +523,13 @@
.ul-tree-item { .ul-tree-item {
background-color: #fbfbfb; background-color: #fbfbfb;
cursor: pointer; cursor : pointer;
} }
.ul-tree-item-info { .ul-tree-item-info {
border-left: 3px solid transparent; border-left: 3px solid transparent;
padding : 8px 0; padding : 8px 0;
position : relative; position : relative;
} }
@@ -537,7 +537,8 @@
background-color: #9cf; background-color: #9cf;
border-color : #6699CC; border-color : #6699CC;
} }
.ul-tree-item-info:hover{
.ul-tree-item-info:hover {
background-color: rgb(190, 222, 255); background-color: rgb(190, 222, 255);
border-color : #6699CC; border-color : #6699CC;
} }
@@ -550,4 +551,41 @@
position: absolute; position: absolute;
left : 5px; left : 5px;
top : 10px; top : 10px;
}
.ul-note-item {
display : flex;
justify-content: flex-start;
align-items : flex-start;
cursor : pointer;
padding : 15px;
}
.ul-note-item.current,
.ul-note-item:hover {
background-color: #eee;
}
.ul-note-item .ul-note-item-icon {
margin-right: 10px;
;
}
.ul-note-item .ul-note-item-desc {
color : #999;
font-size: 12px;
margin-top: 5px;
}
.ul-note-item .ul-note-item-time {
color : #bbb;
font-size : 12px;
margin-top: 5px;
}
.ul-note-item .ul-note-item-tree {
font-size : 12px;
color : #bbb;
margin-top: 5px;
} }