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
Files
c56be80feda991a70b89dbc99b46f5eff49103ab
layui-ul/demo/pc/list.html
augushong c56be80fed 优化样式设置
2022-08-23 10:51:03 +08:00

546 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<fieldset class="layui-elem-field layui-field-title">
<legend>头像列表</legend>
<div class="layui-field-box">
<div class="demo-js-src" style="display: block;">
<div class="ul-avatar-list">
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
</div>
<div class="ul-avatar-list" style="width: 400px;">
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
</div>
<div class="ul-avatar-list" style="width: 200px;">
<div class="ul-avatar-list-item current">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
<div class="ul-avatar-list-item">
<div class="ul-avatar-list-item-img"></div>
<div class="ul-avatar-list-item-info">
<div class="ul-avatar-list-item-title">
张三
</div>
<div class="ul-avatar-list-item-tips">
深山旅馆电话事件的最新消息
</div>
<div class="ul-avatar-list-item-time">
19:54
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>侧边头像列表</legend>
<div class="layui-field-box ">
<div class="demo-js-src" style="display: block;">
<div class="ul-avatar-sidebar-list" style="width: 200px;">
<div class="ul-avatar-sidebar-list-item" data-repeat="3">
<div class="ul-avatar-sidebar-list-item-img"></div>
<div class="ul-avatar-sidebar-list-item-info">
<div class="ul-avatar-sidebar-list-item-title">
张三
</div>
<div class="ul-avatar-sidebar-list-item-intro">
法外狂徒不寂寞
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>相册列表</legend>
<div class="layui-field-box">
<div class="demo-js-src" style="display: block;">
<div class="ul-photo-list">
<div class="ul-photo-item" data-repeat="3">
<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>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>卡片式相册列表</legend>
<div class="layui-field-box">
<div class="ul-photo-card-list">
<div class="ul-photo-card-item" data-repeat="7">
<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>
</div>
</fieldset>
<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-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>
</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 class="layui-elem-field layui-field-title">
<legend>条幅(广告)列表</legend>
<div class="layui-field-box">
<div class="ul-ad-list">
<div class="ul-ad-item" data-repeat="3">
<div class="ul-ad-left">
<div class="ul-ad-img" style="background-image: url('/static/images/view.jpg');"></div>
</div>
<div class="ul-ad-right">
<div class="ul-ad-title">福牛迎春</div>
<div class="ul-ad-desc">天天送大礼</div>
<div class="ul-ad-options">
<div class="layui-btn">查看详情</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-bg-gray ul-padding-md">
<div class="ul-course-list">
<a class="ul-course-item" data-repeat="10">
<div class="ul-course-item-poster-container">
<div class="layui-btn layui-btn-xs ul-course-item-tag">
免费
</div>
<div class="ul-course-item-poster" style="background-image: url('/static/images/view.jpg');">
</div>
</div>
<div class="ul-course-item-info">
<div class="ul-course-item-title">
PHP8最新特性介绍和演示
</div>
<div class="ul-course-item-options">
<div class="ul-course-item-option-item ul-color-main">
免费
</div>
<div class="ul-course-item-option-item">
初级
</div>
<div class="ul-course-item-option-item">
3节课
</div>
<div class="ul-course-item-option-item">
1人报名
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>课程侧边列表</legend>
<div class="layui-field-box ">
<div class="ul-bg-gray ul-padding-md" style="width: 300px;">
<div class="ul-course-sidebar-list">
<a class="ul-course-sidebar-item" data-repeat="4">
<div class="ul-course-sidebar-item-poster-container">
<div class="ul-course-sidebar-item-poster" style="background-image: url('/static/images/view.jpg');">
</div>
</div>
<div class="ul-course-sidebar-item-info">
<div class="ul-course-sidebar-item-title">
PHP8最新特性介绍和演示
</div>
<div class="ul-course-sidebar-item-options">
<div class="ul-course-sidebar-item-option-item ul-color-main">
免费
</div>
<div class="ul-course-sidebar-item-option-item">
初级
</div>
<div class="ul-course-sidebar-item-option-item">
3节课
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>图书列表</legend>
<div class="layui-field-box">
<div class="layui-word-aux">一般大小</div>
<div class="ul-padding-md">
<div class="ul-book-list">
<div class="ul-book-item" data-repeat="6">
<div class="ul-book-poster" style="background-image: url('/static/images/view.jpg');">
</div>
<div class="ul-book-info">
<div class="ul-book-title">三体</div>
<div class="ul-book-author">刘慈欣</div>
<div class="ul-book-status">阅读次数333</div>
</div>
</div>
</div>
</div>
<div class="layui-word-aux">加大</div>
<div class="ul-padding-md">
<div class="ul-book-list big">
<div class="ul-book-item" data-repeat="6">
<div class="ul-book-poster" style="background-image: url('/static/images/view.jpg');">
</div>
<div class="ul-book-info">
<div class="ul-book-title">三体</div>
<div class="ul-book-author">刘慈欣</div>
<div class="ul-book-status"><span>阅读</span><span>3333</span></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-site-group" data-repeat="2">
<div class="ul-site-group-header">
新上线
</div>
<div class="ul-site-list">
<div class="ul-site-item" data-repeat="5">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
layui奥宏样式库
</div>
<div class="ul-site-item-desc">
纯CSS的组件案例样式大全
</div>
</div>
</div>
<div class="ul-site-item">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
layui奥宏样式库
</div>
<div class="ul-site-item-desc">
纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全
</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-site-group ul-bg-gray ul-padding-md" data-repeat="2">
<div class="ul-site-group-header">
新上线
</div>
<div class="ul-site-list">
<div class="ul-site-item card" data-repeat="5">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
layui奥宏样式库
</div>
<div class="ul-site-item-desc">
纯CSS的组件案例样式大全
</div>
</div>
</div>
<div class="ul-site-item card">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
layui奥宏样式库
</div>
<div class="ul-site-item-desc">
纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全
</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-site-group ul-bg-gray ul-padding-md" data-repeat="2">
<div class="ul-site-group-header">
新上线
</div>
<div class="ul-site-list">
<div class="ul-site-item card same-height" data-repeat="5">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
layui奥宏样式库
</div>
<div class="ul-site-item-desc">
纯CSS的组件案例样式大全
</div>
</div>
</div>
<div class="ul-site-item card same-height">
<div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
</div>
<div class="ul-site-item-info">
<div class="ul-site-item-title">
layui奥宏样式库
</div>
<div class="ul-site-item-desc">
纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全
</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-order-list-simple-card ul-bg-gray ul-padding-md">
<div class="item" data-repeat="3">
<div class="item-header">
<div class="item-header-title"> <i class="layui-icon layui-icon-home"></i> 奥宏商店</div>
<div class="item-header-status">处理中</div>
</div>
<div class="item-body">
<div class="item-body-item">
<div class="item-image" style="background-image: url('/static/images/view.jpg');">
</div>
<div class="item-info">
<div class="ul-info-title">商品名称商品名称商品名称商品名称商品名称商品名称</div>
<div class="ul-info-value">
<div class="ul-info-value-item">
500ml
</div>
<div class="ul-info-value-item">
数量×2
</div>
</div>
<div class="ul-info-money">
￥1300.00
</div>
</div>
</div>
</div>
<div class="item-footer">
<div class="item-footer-item">
2022年4月4日11:31:24
</div>
<div class="item-footer-item">
<div class="">
<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>
</div>
</div>
</fieldset>
Reference in New Issue View Git Blame Copy Permalink