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

feat: 迁移相册上传组件

Browse Source
This commit is contained in:
augushong
2025-08-29 12:34:32 +08:00
parent 2c561a9a55
commit 480076c74f
10 changed files with 98 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
demo/pc/photo.html
View File

@@ -1,26 +0,0 @@
<fieldset class="layui-elem-field layui-field-title">
<legend>相册上传</legend>
<div class="layui-field-box">
<div class="ul-upload-photo-list">
<div class="ul-upload-photo-item" >
<div class="ul-upload-photo-delete layui-icon layui-icon-delete">
</div>
<div class="ul-upload-photo-main" style="background-image: url('/static/images/view.jpg');">
</div>
</div>
<div class="ul-upload-photo-item ul-upload-photo-button">
</div>
</div>
</div>
</fieldset>
<script>
$('.ul-upload-photo-delete').click(function(){
console.log(1111);
})
$('.ul-upload-photo-main').click(function(){
console.log(2222);
})
</script>

68
public/cdn/layui-ul.css
View File

@@ -2549,6 +2549,40 @@
word-wrap: anywhere;
}
.ul-upload-photo-item {
display: inline-block;
width: 120px;
height: 120px;
margin: 5px;
background-color: #ddd;
cursor: pointer;
box-shadow: 0 3px 5px #999;
position: relative;
}
.ul-upload-photo-main {
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
}
.ul-upload-photo-delete {
position: absolute;
right: 5px;
top: 5px;
z-index: 999;
font-size: 20px;
color: #fff;
text-shadow: 0 0 2px #000;
}
.ul-upload-photo-button {
background-image: url("img/upload.png");
background-size: cover;
background-position: center;
}
.ul-group-title {
color: #999;
border-bottom: 1px solid #bbb;
@@ -2776,40 +2810,6 @@
margin-bottom: 15px;
}
.ul-upload-photo-item {
display: inline-block;
width: 120px;
height: 120px;
margin: 5px;
background-color: #ddd;
cursor: pointer;
box-shadow: 0 3px 5px #999;
position: relative;
}
.ul-upload-photo-main {
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
}
.ul-upload-photo-delete {
position: absolute;
right: 5px;
top: 5px;
z-index: 999;
font-size: 20px;
color: #fff;
text-shadow: 0 0 2px #000;
}
.ul-upload-photo-button {
background-image: url("img/upload.png");
background-size: cover;
background-position: center;
}
.ul-tree-item {
background-color: #fbfbfb;
cursor: pointer;

2
public/cdn/layui-ul.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
source/components/_index.scss
View File

@@ -43,6 +43,7 @@
@import './nav/ul-nav-grid/index';
@import './nav/ul-nav-info/index';
@import './nav/ul-nav-tree-2/index';
@import './photo/ul-upload-photo-list/index';
@import './title/ul-group-title/index';
@import './title/ul-group-title-2/index';
@import './title/ul-group-title-simple/index';

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

@@ -0,0 +1,6 @@
title=相册上传
padding=0
margin=0
gray=0
mobile=0
inner_margin=0

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

@@ -0,0 +1,15 @@
<div class="ul-upload-photo-list">
<div class="ul-upload-photo-item">
<div class="ul-upload-photo-delete layui-icon layui-icon-delete">
</div>
<div
class="ul-upload-photo-main"
style="background-image: url('/static/images/view.jpg');"
>
</div>
</div>
<div class="ul-upload-photo-item ul-upload-photo-button">
</div>
</div>

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

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

@@ -0,0 +1,5 @@
<?php
return [
];

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

@@ -0,0 +1,36 @@
.ul-upload-photo-list {}
.ul-upload-photo-item {
display : inline-block;
width : 120px;
height : 120px;
margin : 5px;
background-color: #ddd;
cursor : pointer;
box-shadow : 0 3px 5px #999;
position : relative;
}
.ul-upload-photo-main {
background-size : cover;
background-position: center;
width : 100%;
height : 100%;
}
.ul-upload-photo-delete {
position : absolute;
right : 5px;
top : 5px;
z-index : 999;
font-size : 20px;
color : #fff;
text-shadow: 0 0 2px #000;
}
.ul-upload-photo-button {
background-image : url("img/upload.png");
background-size : cover;
background-position: center;
}

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

@@ -175,41 +175,6 @@
margin-bottom: 15px;
}
.ul-upload-photo-list {}
.ul-upload-photo-item {
display : inline-block;
width : 120px;
height : 120px;
margin : 5px;
background-color: #ddd;
cursor : pointer;
box-shadow : 0 3px 5px #999;
position : relative;
}
.ul-upload-photo-main {
background-size : cover;
background-position: center;
width : 100%;
height : 100%;
}
.ul-upload-photo-delete {
position : absolute;
right : 5px;
top : 5px;
z-index : 999;
font-size : 20px;
color : #fff;
text-shadow: 0 0 2px #000;
}
.ul-upload-photo-button {
background-image : url("img/upload.png");
background-size : cover;
background-position: center;
}
.ul-tree-item {