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
2023-03-31 20:56:34 +08:00
parent c6f568a7b3
commit dcd0cd3216
20 changed files with 2813 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.gitignore vendored
View File

@@ -6,9 +6,3 @@
ul.db
composer.lock
public/upload/*
/public/cdn/layui-ul.css
/public/cdn/layui-ul.css.map
/public/cdn/layui-ul.min.css
/public/cdn/layui-ul.min.css.map
/public/cdn/layui-ul-change.css
/public/cdn/layui-ul-change.min.css

39
demo/pc/list.html
View File

@@ -117,45 +117,6 @@
</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>

191
public/cdn/layui-ul-change.css Normal file
View File

@@ -0,0 +1,191 @@
.layui-nav-tree .layui-nav-item a:hover {
background-color: #6699CC;
}
.layui-bg-black {
background-color: #66CCFF !important;
}
.layui-nav-tree .layui-nav-child dd.layui-this,
.layui-nav-tree .layui-nav-child dd.layui-this a,
.layui-nav-tree .layui-this,
.layui-nav-tree .layui-this > a,
.layui-nav-tree .layui-this > a:hover {
background-color: #6699CC;
}
.layui-layout-admin .layui-logo {
color: #fff;
line-height: 45px;
}
.layui-layout-admin .layui-header {
background-color: #39BDFF;
}
.layui-nav {
background-color: #66CCFF;
}
.layui-header {
height: 45px;
}
.layui-nav .layui-nav-item {
line-height: 45px;
}
.layui-nav .layui-nav-item a {
color: #FFFFFF;
}
.layui-nav .layui-nav-child a {
color: #66CCFF;
}
.layui-nav .layui-this::after,
.layui-nav-bar,
.layui-nav-tree .layui-nav-itemed::after {
background-color: #CCFFFF;
}
.layui-tab-brief > .layui-tab-title .layui-this {
color: #66CCFF;
}
.layui-tab-brief > .layui-tab-more li.layui-this::after,
.layui-tab-brief > .layui-tab-title .layui-this::after {
border-color: #66CCFF;
}
.layui-btn {
background-color: #66CCFF;
}
.layui-btn-danger {
background-color: #FF5722;
}
.layui-btn-primary {
background-color: #fff;
color: #666;
border-color: #d2d2d2;
}
.layui-btn-primary:hover {
border-color: #6cf;
}
.layui-btn.layui-btn-disabled {
background-color: #FBFBFB;
}
.layui-form-radio > i:hover,
.layui-form-radioed > i {
color: #66CCFF;
}
.layui-form-radio:hover *,
.layui-form-radioed,
.layui-form-radioed > i {
color: #66CCFF;
}
.layui-elem-quote {
border-color: #66CCFF;
}
.layui-laydate td.layui-this {
background-color: #66CCFF !important;
}
.layui-form-checkbox[lay-skin=primary]:hover i {
border-color: #66CCFF;
}
.layui-form-checked[lay-skin=primary] i {
border-color: #66CCFF !important;
background-color: #66CCFF !important;
}
.layui-form-checked span,
.layui-form-checked:hover span {
background-color: #66CCFF;
}
.layui-form-checked i,
.layui-form-checked:hover i {
color: #66CCFF;
}
.layui-form-select dl dd.layui-this {
background-color: #66CCFF;
}
.layui-form-label {
width: unset;
padding: 3px 3px;
float: unset;
text-align: left;
font-weight: 600;
font-size: 15px;
}
.layui-input-block {
margin-left: 0;
}
.layui-form-pane .layui-form-label {
float: left;
font-weight: normal;
font-size: 14px;
}
.layui-nav-tree .layui-nav-item a {
height: 35px;
line-height: 35px;
}
.layui-nav-tree {
width: 140px;
}
.layui-layout-admin .layui-side {
width: 140px;
top: 45px;
}
.layui-layout-admin .layui-footer {
left: 140px;
height: 35px;
line-height: 35px;
}
.layui-layout-admin .layui-body {
top: 45px;
}
.layui-side-scroll {
width: 140px;
}
.layui-body {
left: 140px;
}
.layui-nav .layui-nav-child dd.layui-this a,
.layui-nav-child dd.layui-this {
background-color: #19B3FF;
}
.layui-nav-child {
padding: 0;
}
.layui-nav-tree .layui-nav-bar {
background-color: #66CCFF;
}
.layui-form-label .layui-word-aux {
font-size: 12px;
}

1
public/cdn/layui-ul-change.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.layui-nav-tree .layui-nav-item a:hover{background-color:#69c}.layui-bg-black{background-color:#6cf !important}.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-nav-child dd.layui-this a,.layui-nav-tree .layui-this,.layui-nav-tree .layui-this>a,.layui-nav-tree .layui-this>a:hover{background-color:#69c}.layui-layout-admin .layui-logo{color:#fff;line-height:45px}.layui-layout-admin .layui-header{background-color:#39bdff}.layui-nav{background-color:#6cf}.layui-header{height:45px}.layui-nav .layui-nav-item{line-height:45px}.layui-nav .layui-nav-item a{color:#fff}.layui-nav .layui-nav-child a{color:#6cf}.layui-nav .layui-this::after,.layui-nav-bar,.layui-nav-tree .layui-nav-itemed::after{background-color:#cff}.layui-tab-brief>.layui-tab-title .layui-this{color:#6cf}.layui-tab-brief>.layui-tab-more li.layui-this::after,.layui-tab-brief>.layui-tab-title .layui-this::after{border-color:#6cf}.layui-btn{background-color:#6cf}.layui-btn-danger{background-color:#ff5722}.layui-btn-primary{background-color:#fff;color:#666;border-color:#d2d2d2}.layui-btn-primary:hover{border-color:#6cf}.layui-btn.layui-btn-disabled{background-color:#fbfbfb}.layui-form-radio>i:hover,.layui-form-radioed>i{color:#6cf}.layui-form-radio:hover *,.layui-form-radioed,.layui-form-radioed>i{color:#6cf}.layui-elem-quote{border-color:#6cf}.layui-laydate td.layui-this{background-color:#6cf !important}.layui-form-checkbox[lay-skin=primary]:hover i{border-color:#6cf}.layui-form-checked[lay-skin=primary] i{border-color:#6cf !important;background-color:#6cf !important}.layui-form-checked span,.layui-form-checked:hover span{background-color:#6cf}.layui-form-checked i,.layui-form-checked:hover i{color:#6cf}.layui-form-select dl dd.layui-this{background-color:#6cf}.layui-form-label{width:unset;padding:3px 3px;float:unset;text-align:left;font-weight:600;font-size:15px}.layui-input-block{margin-left:0}.layui-form-pane .layui-form-label{float:left;font-weight:normal;font-size:14px}.layui-nav-tree .layui-nav-item a{height:35px;line-height:35px}.layui-nav-tree{width:140px}.layui-layout-admin .layui-side{width:140px;top:45px}.layui-layout-admin .layui-footer{left:140px;height:35px;line-height:35px}.layui-layout-admin .layui-body{top:45px}.layui-side-scroll{width:140px}.layui-body{left:140px}.layui-nav .layui-nav-child dd.layui-this a,.layui-nav-child dd.layui-this{background-color:#19b3ff}.layui-nav-child{padding:0}.layui-nav-tree .layui-nav-bar{background-color:#6cf}.layui-form-label .layui-word-aux{font-size:12px}

2470
public/cdn/layui-ul.css Normal file
View File

File diff suppressed because it is too large Load Diff

1
public/cdn/layui-ul.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
source/components/_index.scss
View File

@@ -5,5 +5,8 @@
@import './list/ul-book-item/index';
@import './list/ul-music-list/index';
@import './list/ul-order-list-simple-card/index';
@import './list/ul-photo-card-list/index';
@import './list/ul-photo-list/index';
@import './list/ul-photo-list-b/index';
@import './list/ul-site-group/index';
@import './nav/ul-nav-info/index';

5
source/components/list/ul-photo-card-list/_index.env Normal file
View File

@@ -0,0 +1,5 @@
title=相册列表-卡片
padding=0
margin=0
gray=0
mobile=0

14
source/components/list/ul-photo-card-list/_index.html Normal file
View File

@@ -0,0 +1,14 @@
<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>

0
source/components/list/ul-photo-card-list/_index.md Normal file
View File

31
source/components/list/ul-photo-card-list/_index.scss Normal file
View File

@@ -0,0 +1,31 @@
.ul-photo-card-list {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap : wrap;
}
.ul-photo-card-item {
width : 200px;
margin : 15px;
box-shadow: 0 5px 10px #999;
}
.ul-photo-card-poster {
width : 100%;
height : 140px;
background-size : cover;
background-position: center;
}
.ul-photo-card-info {
padding : 5px;
font-size : 18px;
line-height: 1.5;
}
.ul-photo-card-desc {
font-size: 14px;
color : #999;
}

5
source/components/list/ul-photo-list-b/_index.env Normal file
View File

@@ -0,0 +1,5 @@
title=相册列表-精简
padding=0
margin=0
gray=0
mobile=0

11
source/components/list/ul-photo-list-b/_index.html Normal file
View File

@@ -0,0 +1,11 @@
<div class="ul-photo-list-b">
<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-desc">相册说明内容</div>
</div>
</div>
</div>

0
source/components/list/ul-photo-list-b/_index.md Normal file
View File

29
source/components/list/ul-photo-list-b/_index.scss Normal file
View File

@@ -0,0 +1,29 @@
.ul-photo-list-b {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap : wrap;
.ul-photo-item {
margin : 15px;
text-align: left;
width : 200px;
}
.ul-photo-poster {
width : 100%;
height : 120px;
background-image : url("../static/images/avatar.png");
background-size : cover;
background-position: center;
margin : 0 auto;
box-shadow : 1px 1px 3px #bbb;
}
.ul-photo-info {
margin-top : 10px;
font-size : 18px;
line-height: 1.5;
}
}

5
source/components/list/ul-photo-list/_index.env Normal file
View File

@@ -0,0 +1,5 @@
title=相册列表
padding=0
margin=0
gray=0
mobile=0

13
source/components/list/ul-photo-list/_index.html Normal file
View File

@@ -0,0 +1,13 @@
<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>

0
source/components/list/ul-photo-list/_index.md Normal file
View File

33
source/components/list/ul-photo-list/_index.scss Normal file
View File

@@ -0,0 +1,33 @@
.ul-photo-list {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap : wrap;
}
.ul-photo-item {
margin : 15px;
text-align: center;
min-width : 220px;
}
.ul-photo-poster {
width : 180px;
height : 140px;
background-image : url("../static/images/avatar.png");
background-size : cover;
background-position: center;
margin : 0 auto;
box-shadow : 1px 1px 3px #999;
}
.ul-photo-info {
margin-top : 10px;
font-size : 18px;
line-height: 1.5;
}
.ul-photo-desc {
font-size: 14px;
color : #999;
}

68
source/scss/layui-ul.scss
View File

@@ -47,74 +47,6 @@
/* 链接导航结束 */
/* 相册列表开始 */
.ul-photo-list {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap : wrap;
}
.ul-photo-item {
margin : 15px;
text-align: center;
min-width : 220px;
}
.ul-photo-poster {
width : 180px;
height : 140px;
background-image : url("../static/images/avatar.png");
background-size : cover;
background-position: center;
margin : 0 auto;
box-shadow : 1px 1px 3px #999;
}
.ul-photo-info {
margin-top : 10px;
font-size : 18px;
line-height: 1.5;
}
.ul-photo-desc {
font-size: 14px;
color : #999;
}
.ul-photo-card-list {
display : flex;
align-items : flex-start;
justify-content: flex-start;
flex-wrap : wrap;
}
.ul-photo-card-item {
width : 200px;
margin : 15px;
box-shadow: 0 5px 10px #999;
}
.ul-photo-card-poster {
width : 100%;
height : 140px;
background-size : cover;
background-position: center;
}
.ul-photo-card-info {
padding : 5px;
font-size : 18px;
line-height: 1.5;
}
.ul-photo-card-desc {
font-size: 14px;
color : #999;
}
/* 相册列表结束 */
.ul-info-tips {
padding : 15px;