新增图集上传

demo/photo.html

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

public/cdn/layui-ul.css

@@ -458,9 +458,11 @@
   background-color: transparent;
   color           : #6cf;
 }
+
 .layui-nav-tree.ul-nav-easy .layui-nav-item.layui-this a:hover {
   color: #6cf;
 }
+
 .layui-nav-tree.ul-nav-easy .layui-nav-item a:hover {
   color: #fff;
 }
@@ -469,3 +471,43 @@
   height     : 45px;
   line-height: 45px;
 }
+
+.search-item {
+  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;
+}