mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-08 21:22:48 +08:00
feat: 迁移消息列表
This commit is contained in:
augushong
@@ -1,51 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1945,6 +1945,72 @@
|
|||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
.ul-music-list .ul-music-list-item {
|
.ul-music-list .ul-music-list-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -2710,72 +2776,6 @@
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ul-nav-easy {
|
.ul-nav-easy {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|||||||
2
public/cdn/layui-ul.min.css
vendored
2
public/cdn/layui-ul.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -29,6 +29,7 @@
|
|||||||
@import './list/ul-course-sidebar-list/index';
|
@import './list/ul-course-sidebar-list/index';
|
||||||
@import './list/ul-list-record/index';
|
@import './list/ul-list-record/index';
|
||||||
@import './list/ul-list-user-info/index';
|
@import './list/ul-list-user-info/index';
|
||||||
|
@import './list/ul-message-list/index';
|
||||||
@import './list/ul-music-list/index';
|
@import './list/ul-music-list/index';
|
||||||
@import './list/ul-note-list/index';
|
@import './list/ul-note-list/index';
|
||||||
@import './list/ul-order-list-simple-card/index';
|
@import './list/ul-order-list-simple-card/index';
|
||||||
|
|||||||
6
source/components/list/ul-message-list/_index.env
Normal file
6
source/components/list/ul-message-list/_index.env
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
title=内容丰富的留言列表
|
||||||
|
padding=1
|
||||||
|
margin=0
|
||||||
|
gray=1
|
||||||
|
mobile=0
|
||||||
|
inner_margin=0
|
||||||
54
source/components/list/ul-message-list/_index.html
Normal file
54
source/components/list/ul-message-list/_index.html
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
<div class="ul-message-list">
|
||||||
|
<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>
|
||||||
0
source/components/list/ul-message-list/_index.md
Normal file
0
source/components/list/ul-message-list/_index.md
Normal file
5
source/components/list/ul-message-list/_index.php
Normal file
5
source/components/list/ul-message-list/_index.php
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
return [
|
||||||
|
|
||||||
|
];
|
||||||
68
source/components/list/ul-message-list/_index.scss
Normal file
68
source/components/list/ul-message-list/_index.scss
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
@@ -73,73 +73,6 @@
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ul-nav-easy {
|
.ul-nav-easy {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|||||||
Reference in New Issue
Block a user