mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-05 20:02:49 +08:00
482 lines
18 KiB
HTML
482 lines
18 KiB
HTML
<fieldset class="layui-elem-field layui-field-title">
|
||
<legend>卡片A</legend>
|
||
<div class="layui-field-box">
|
||
<div class="ul-padding-md">
|
||
<div class="ul-common-flex-list">
|
||
<div class="ul-card-a" data-repeat="3">
|
||
<div class="ul-card-a-left">
|
||
<img width="100%" src="{$site_logo_src}" alt="">
|
||
</div>
|
||
<div class="ul-card-a-right">
|
||
<div class="ul-card-a-main">
|
||
<div class="ul-card-a-title">
|
||
卡片标题
|
||
</div>
|
||
<div class="ul-card-a-desc">
|
||
这是卡片说明
|
||
</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-card-bank" data-repeat="3">
|
||
<div class="ul-common-flex-sb ul-card-bank-header">
|
||
<div class="ul-card-bank-title">
|
||
中国银行
|
||
</div>
|
||
<div class="ul-card-bank-number">
|
||
尾号 ********123456
|
||
</div>
|
||
</div>
|
||
<div class="ul-common-flex-sb ul-card-bank-body">
|
||
<div class="ul-card-bank-line">
|
||
<div class="ul-card-bank-line-triangle"></div>
|
||
</div>
|
||
<div class="ul-card-bank-tips">
|
||
默认
|
||
</div>
|
||
</div>
|
||
<div class="ul-common-flex-sb ul-card-bank-footer">
|
||
<div class="ul-card-bank-time">
|
||
绑定日期:2021-03-15
|
||
</div>
|
||
<div class="ul-card-bank-name">
|
||
**宏
|
||
</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 layui-bg-gray">
|
||
<div class="layui-card ul-card">
|
||
<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>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset class="layui-elem-field layui-field-title">
|
||
<legend>数据卡片</legend>
|
||
<div class="layui-field-box">
|
||
<div class="ul-card-data-container ul-padding-md">
|
||
<div class="ul-card-data-a ul-card-data" data-repeat="2">
|
||
<div class="ul-card-data-a-title">
|
||
509778.80
|
||
</div>
|
||
<div class="ul-card-data-a-options">
|
||
<div class="ul-card-data-a-item">
|
||
<i class="layui-icon layui-icon-gift"></i>
|
||
余额
|
||
</div>
|
||
<div class="ul-card-data-a-item">
|
||
<div class="layui-btn layui-btn-xs">充值</div>
|
||
<div class="layui-btn layui-btn-xs">提现</div>
|
||
<div class="layui-btn layui-btn-xs">记录</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ul-card-data-b ul-card-data" data-repeat="2">
|
||
<div class="ul-card-data-b-main">
|
||
|
||
<div class="ul-card-data-b-icon layui-icon layui-icon-gift">
|
||
|
||
</div>
|
||
<div class="ul-card-data-b-info">
|
||
<div class="ul-card-data-b-title">
|
||
盈亏总额(元)
|
||
</div>
|
||
<div class="ul-card-data-b-value">
|
||
0.00
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="ul-card-data-c ul-card-data">
|
||
|
||
<div class="ul-card-data-c-item" data-repeat="3">
|
||
<div class="ul-card-data-c-value">
|
||
0
|
||
</div>
|
||
<div class="ul-card-data-c-title">
|
||
余额
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset class="layui-elem-field layui-field-title">
|
||
<legend>极简图标卡片</legend>
|
||
<div class="layui-field-box">
|
||
<div class="ul-card-simple-icon" data-repeat="3">
|
||
<div class="ul-card-simple-icon-image" style="background-image: url('/static/images/view.jpg');">
|
||
|
||
</div>
|
||
<div class="ul-card-simple-icon-title">
|
||
图标
|
||
</div>
|
||
</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">
|
||
|
||
<div class="ul-card-message">
|
||
<div class="header">
|
||
<div class="title">
|
||
奥宏科技·预约会议
|
||
</div>
|
||
<div class="status">
|
||
技术人员
|
||
</div>
|
||
</div>
|
||
<div class="body">
|
||
<div class="item">
|
||
<div class="item-title">
|
||
预约时间
|
||
</div>
|
||
<div class="item-value">
|
||
2022年4月4日14:29:12
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-title">
|
||
地点
|
||
</div>
|
||
<div class="item-value">
|
||
一楼会议室
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-title">
|
||
备注
|
||
</div>
|
||
<div class="item-value">
|
||
备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容备注内容
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<div class="layui-btn layui-btn-sm layui-btn-primary">取消</div>
|
||
<div class="layui-btn layui-btn-sm layui-btn-normal">确认</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 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>
|
||
|
||
<fieldset class="layui-elem-field layui-field-title">
|
||
<legend>数据卡片极简</legend>
|
||
<div class="layui-field-box">
|
||
<div class="ul-padding-md ul-bg-gray ul-mobile-box">
|
||
<div class="ul-card-data-simple">
|
||
<div class="item line">
|
||
<div class="item-title">
|
||
订单数量
|
||
</div>
|
||
<div class="item-value">
|
||
120
|
||
</div>
|
||
<div class="item-rate up">
|
||
30% ↑
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-title">
|
||
订单数量
|
||
</div>
|
||
<div class="item-value">
|
||
120
|
||
</div>
|
||
<div class="item-rate down">
|
||
30% ↓
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-title">
|
||
线下订单
|
||
</div>
|
||
<div class="item-value">
|
||
120
|
||
</div>
|
||
<div class="item-rate">
|
||
30%
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
<fieldset class="layui-elem-field layui-field-title">
|
||
<legend>数据卡片极简底色</legend>
|
||
<div class="layui-field-box">
|
||
<div class=" ul-mobile-box">
|
||
<div class="ul-card-data-simple ul-card-data-simple-bg-black">
|
||
<div class="item main">
|
||
<div class="item-title">
|
||
订单数量
|
||
</div>
|
||
<div class="item-value">
|
||
120
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-title">
|
||
订单数量
|
||
</div>
|
||
<div class="item-value">
|
||
120
|
||
</div>
|
||
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-title">
|
||
线下订单
|
||
</div>
|
||
<div class="item-value">
|
||
120
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset class="layui-elem-field layui-field-title">
|
||
<legend>数据详情卡片-简约</legend>
|
||
<div class="layui-field-box">
|
||
<div class="ul-mobile-box">
|
||
<div class="ul-data-card">
|
||
<div class="header">
|
||
<div class="mian">
|
||
<i class="layui-icon layui-icon-user"></i>
|
||
<span>奥古斯宏</span>
|
||
</div>
|
||
<div class="plus">
|
||
<div class="layui-btn layui-btn-sm">详情</div>
|
||
</div>
|
||
</div>
|
||
<div class="body">
|
||
<div class="main">
|
||
<div class="item" data-repeat="3">
|
||
<div class="item-title">
|
||
姓名：
|
||
</div>
|
||
<div class="item-value">
|
||
张三
|
||
</div>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<div class="item-title">
|
||
地址：
|
||
</div>
|
||
<div class="item-value">
|
||
内蒙古大兴安岭雷达峰红岸基地
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<div class="main">
|
||
2022年4月14日21:28:44
|
||
</div>
|
||
<div class="plus">
|
||
<div class="layui-btn layui-btn-sm layui-btn-normal">删除</div>
|
||
<div class="layui-btn layui-btn-sm layui-btn-primary">修改</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset class="layui-elem-field layui-field-title">
|
||
<legend>文件预览卡片</legend>
|
||
<div class="layui-field-box">
|
||
<blockquote class="layui-elem-quote">注意：需要引入font awesome 字体文件，但也可以使用任何其他的字体文件或图片。只不过使用图片的话，内置的文件类型的图标颜色就不能用了</blockquote>
|
||
<div class="demo-js-src" style="display: block;">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||
{volist name='[
|
||
"excel",
|
||
"zip",
|
||
"word",
|
||
"pdf",
|
||
"powerpoint",
|
||
"audio",
|
||
"code",
|
||
"image",
|
||
"video",
|
||
"text",
|
||
]' id='file'}<div class="ul-card-file ul-inline-block">
|
||
<div class="main">
|
||
<div class="info">
|
||
<div class="name">
|
||
核弹制作与发射 从入门到精通
|
||
</div>
|
||
<div class="desc">
|
||
75GB
|
||
</div>
|
||
</div>
|
||
<div class="icon {$file}">
|
||
<i class="fa fa-file-{$file}-o"></i>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<span>来自ulthon邮箱</span>
|
||
<span>2022年6月24日</span>
|
||
</div>
|
||
</div>
|
||
{/volist}
|
||
<div class="ul-card-file ul-inline-block">
|
||
<div class="main">
|
||
<div class="info">
|
||
<div class="name">
|
||
核弹制作与发射 从入门到精通
|
||
</div>
|
||
<div class="desc">
|
||
75GB
|
||
</div>
|
||
</div>
|
||
<div class="icon file">
|
||
<i class="fa fa-file-o"></i>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<span>来自ulthon邮箱</span>
|
||
<span>2022年6月24日</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ul-card-file ul-inline-block">
|
||
<div class="main">
|
||
<div class="info">
|
||
<div class="name">
|
||
核弹制作与发射 从入门到精通
|
||
</div>
|
||
<div class="desc">
|
||
75GB
|
||
</div>
|
||
</div>
|
||
<div class="icon link">
|
||
<i class="fa fa-link"></i>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<span>来自ulthon邮箱</span>
|
||
<span>2022年6月24日</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</fieldset> |