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

增加自动重复,新增留言列表

Browse Source
This commit is contained in:
augushong
2021-03-30 12:58:53 +08:00
parent 4b985dc382
commit fd411bda6b
4 changed files with 147 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
demo/group_panel.html
View File

@@ -16,43 +16,7 @@
<div class="layui-field-box">
<div class="ul-card-list">
<div class="layui-card ul-card" style="width:300px">
<div class="layui-card-header">
<span class="ul-card-status layui-bg-green">意向</span>
<span class="ul-card-title">卡片面板</span>
<span class="ul-card-options">
<span>2021年3月29日</span>
<span class=""><i class="layui-icon layui-icon-right"></i></span>
</span>
</div>
<div class="layui-card-body">
<div class="data-item">
<span class="data-title">入库时间:</span>
<span class="data-value">2021年3月29日16:33:21</span>
</div>
<div class="data-item">
<span class="data-title">用户名称:</span>
<span class="data-value">奥古斯宏</span>
</div>
<div class="data-item">
<span class="data-title">公司名称:</span>
<span class="data-value">临沂奥宏网络科技有限公司</span>
</div>
<div class="data-item">
<span class="data-title">电话:</span>
<span class="data-value">13012341234</span>
</div>
<div class="data-item">
<span class="data-title">相册:</span>
<span class="data-img">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
<img class="data-img-main" src="/static/images/view.jpg" alt="">
</span>
</div>
</div>
</div>
<div class="layui-card ul-card" style="width:300px">
<div class="layui-card ul-card" style="width:300px" data-repeat="2">
<div class="layui-card-header">
<span class="ul-card-status layui-bg-green">意向</span>
<span class="ul-card-title">卡片面板</span>
@@ -88,6 +52,7 @@
</div>
</div>
</div>
</div>
</div>
</fieldset>

93
demo/list.html
View File

@@ -100,7 +100,7 @@
<legend>相册列表</legend>
<div class="layui-field-box">
<div class="ul-photo-list">
<div class="ul-photo-item">
<div class="ul-photo-item" data-repeat="3">
<div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');">
</div>
@@ -110,26 +110,7 @@
<div class="ul-photo-desc">相册说明内容</div>
</div>
</div>
<div class="ul-photo-item">
<div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');">
</div>
<div class="ul-photo-info">
<div class="ul-photo-title">周末野外广场树林写真</div>
<div class="ul-photo-plus">45P+1V</div>
<div class="ul-photo-desc">相册说明内容</div>
</div>
</div>
<div class="ul-photo-item">
<div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');">
</div>
<div class="ul-photo-info">
<div class="ul-photo-title">周末野外广场树林写真</div>
<div class="ul-photo-plus">45P+1V</div>
<div class="ul-photo-desc">相册说明内容</div>
</div>
</div>
</div>
</div>
</fieldset>
@@ -137,7 +118,8 @@
<legend>卡片式相册列表</legend>
<div class="layui-field-box">
<div class="ul-photo-card-list">
<div class="ul-photo-card-item">
<div class="ul-photo-card-item" data-repeat="7">
<div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">
</div>
@@ -147,34 +129,55 @@
<div class="ul-photo-card-plus">45P+1V</div>
</div>
</div>
<div class="ul-photo-card-item">
<div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">
</div>
<div class="ul-photo-card-info">
<div class="ul-photo-card-title">周末野外广场树林写真</div>
<div class="ul-photo-card-desc">相册说明内容</div>
<div class="ul-photo-card-plus">45P+1V</div>
</div>
</div>
<div class="ul-photo-card-item">
<div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">
</div>
</div>
</fieldset>
</div>
<div class="ul-photo-card-info">
<div class="ul-photo-card-title">周末野外广场树林写真</div>
<div class="ul-photo-card-desc">相册说明内容</div>
<div class="ul-photo-card-plus">45P+1V</div>
</div>
</div>
<div class="ul-photo-card-item">
<div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">
<fieldset class="layui-elem-field layui-field-title">
<legend>内容丰富的留言列表</legend>
<div class="layui-field-box layui-bg-gray">
<div class="ul-message-list ul-padding-md">
<div class="ul-message-item ul-bg-white" data-repeat="3">
<div class="ul-message-item-left">
<div class="ul-message-item-avatar" style="background-image: url('/static/images/avatar.png');">
</div>
</div>
<div class="ul-photo-card-info">
<div class="ul-photo-card-title">周末野外广场树林写真</div>
<div class="ul-photo-card-desc">相册说明内容</div>
<div class="ul-photo-card-plus">45P+1V</div>
<div class="ul-message-item-right">
<div class="ul-message-item-info">
<div class="ul-message-item-name">
<div class="data-item">
奥古斯宏
</div>
<div class="data-item">
程序员
</div>
</div>
<div class="ul-message-item-data">
<div class="data-item split-border">
<span class="data-title">联系方式:</span>
<span class="data-value">13012341234</span>
</div>
<div class="data-item">
<span class="data-title">价位:</span>
<span class="data-value">￥3</span>
</div>
</div>
<div class="ul-message-item-options">
<div class="layui-btn">查看详情</div>
</div>
</div>
<div class="ul-message-item-content">
百度是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。
</div>
<div class="ul-message-item-img-list">
<div class="ul-message-item-img" style="background-image: url('/static/images/view.jpg');" data-repeat="4">
</div>
</div>
</div>
</div>
</div>

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

@@ -55,6 +55,10 @@
border-right: 1px solid #bbb;
}
.ul-bg-white {
background-color: #fff;
}
/* 通用类结束 */
/* 用户头像开始 */
@@ -282,12 +286,12 @@
width : 200px;
margin : 15px;
box-shadow: 0 5px 10px #999;
}
.ul-photo-card-poster {
width : 100%;
height: 140px;
width : 100%;
height : 140px;
background-size : cover;
background-position: center;
}
@@ -322,6 +326,10 @@
cursor: pointer;
}
.data-item {
margin-right: 15px;
}
.data-img .data-img-main {
max-width: 120px;
margin : 5px;
@@ -344,20 +352,88 @@
margin-bottom: 15px;
}
.ul-title{
text-align: center;
.ul-title {
text-align : center;
line-height: 1.5;
}
.ul-title-main{
.ul-title-main {
font-size: 16px;
}
.ul-title-plus{
.ul-title-plus {
color: #999;
}
.ul-title-line{
.ul-title-line {
border-top: 2px solid #666;
margin-top: 8px;
}
.ul-message-list {}
.ul-message-item {
margin-bottom : 15px;
display : flex;
justify-content: flex-start;
align-items : flex-start;
padding : 15px;
}
.ul-message-item-left {
width: 120px;
}
.ul-message-item-right {
width: calc(100% - 120px);
}
.ul-message-item-info{
position: relative;
}
.ul-message-item-options{
position: absolute;
right: 0;
top: 0;
}
.ul-message-item-avatar {
background-size : cover;
background-position: center;
width : 100px;
height : 100px;
border-radius : 50%;
}
.ul-message-item-name {
display : flex;
color : #6cf;
font-size: 16px;
}
.ul-message-item-data {
display : flex;
font-size : 14px;
color : #999;
margin-top: 10px;
}
.ul-message-item-content {
background-color: #f0f0f0;
padding : 15px;
margin-top : 10px;
}
.ul-message-item-img-list{
margin-top: 10px;
}
.ul-message-item-img {
width : 160px;
height : 120px;
background-size : cover;
background-position: center;
margin-right: 10px;
display: inline-block;
}

14
view/index/index/index.html
View File

@@ -74,7 +74,19 @@
</div>
</div>
<script>
layui.use(['element','form'])
function renderRepeat(elem) {
$(elem).find('[data-repeat]').each(function () {
for (let index = 1; index < $(this).data('repeat'); index++) {
var clone = $(this).clone()
clone.insertAfter(this)
renderRepeat(clone)
}
})
}
renderRepeat('body')
layui.use(['element', 'form'])
</script>
</body>