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
2022-04-04 15:39:15 +08:00
parent a222dcd5b0
commit 27d7984784
5 changed files with 106 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
demo/pc/card.html
View File

@@ -218,5 +218,51 @@
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>用户主页名片</legend>
<div class="layui-field-box">
<div class="ul-padding-md ul-bg-gray" style="width:300px">
<div class="ul-info-card">
<div class="header">
<div class="img" style="background-image: url('/static/images/view.jpg');">
</div>
</div>
<div class="body">
<div class="title">
奥宏科技
</div>
<div class="line">
</div>
<div class="info">
<div class="info-item">
<div class="info-title">ID</div>
<div class="info-value">2369</div>
</div>
<div class="info-item">
<div class="info-title">性别</div>
<div class="info-value">男</div>
</div>
<div class="info-item">
<div class="info-title">工作时间</div>
<div class="info-value">3年</div>
</div>
<div class="info-item">
<div class="info-title">地址</div>
<div class="info-value">山东省临沂市兰山区</div>
</div>
</div>
</div>
<div class="footer">
<div class="layui-btn layui-btn-fluid layui-btn-normal">
<i class="layui-icon layui-icon-cellphone"></i> 立即联系
</div>
</div>
</div>
</div>
</div>
</fieldset>

8
demo/tpl.html
View File

@@ -1,6 +1,6 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>字段集区块 - 横线风格</legend>
<div class="layui-field-box">
内容区域
</div>
<legend>字段集区块 - 横线风格</legend>
<div class="layui-field-box">
内容区域
</div>
</fieldset>

3
source/scss/card/_index.scss
View File

@@ -1,2 +1,3 @@
@import './ul-card-simple-icon';
@import './ul-card-message';
@import './ul-card-message';
@import './ul-info-card';

48
source/scss/card/_ul-info-card.scss Normal file
View File

@@ -0,0 +1,48 @@
.ul-info-card {
background-color: #fff;
.header {
.img {
width : 100%;
height : 160px;
background-size : cover;
background-position: center;
}
}
.body {
margin-top: 15px;
.title {
text-align : center;
font-size : 18px;
font-weight: 600;
color : #333;
}
.line {
height : 3px;
width : 60px;
background-color: #1E9FFF;
margin : 10px auto;
}
.info {
padding: 15px;
.info-item {
display : inline-block;
min-width : 30%;
margin-bottom: 10px;
margin-right : 1%;
.info-title {
font-size : 12px;
color : #999;
margin-bottom: 6px;
}
}
}
}
}

8
view/index/index/index.html
View File

@@ -129,7 +129,10 @@
$('.main-content h2,.main-content>.demo-page>fieldset').each(function (index, elem) {
if ($(elem).find('.demo-js-src').length == 0) {
$(elem).children('.layui-field-box').addClass('demo-js-src').css('display', 'block');
$(elem).children('.layui-field-box')
.addClass('demo-js-src')
.css('display', 'block')
.data('title', $(elem).children('legend').text());
}
})
$('.main-content h2,.main-content>.demo-page>fieldset>legend').each(function (index, elem) {
@@ -191,7 +194,8 @@
});
var contentCode = htmlListNew.join("\n");
if ($(this).siblings('pre.demo-js').length == 0) {
$('<pre class="layui-code demo-js"></pre>').insertAfter(this);
var title = $(this).data('title');
$('<pre class="layui-code demo-js" lay-title="' + title + '"></pre>').insertAfter(this);
}
$(this).siblings('pre.demo-js').text(contentCode)
})