新增相册

.gitignore

@@ -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

demo/pc/list.html

@@ -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>

public/cdn/layui-ul-change.css

@@ -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;
+}

public/cdn/layui-ul-change.min.css

@@ -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}

source/components/_index.scss

@@ -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';

source/components/list/ul-photo-card-list/_index.env

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

source/components/list/ul-photo-card-list/_index.html

@@ -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>

source/components/list/ul-photo-card-list/_index.scss

@@ -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;
+}

source/components/list/ul-photo-list-b/_index.env

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

source/components/list/ul-photo-list-b/_index.html

@@ -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>

source/components/list/ul-photo-list-b/_index.scss

@@ -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;
+    }
+
+}

source/components/list/ul-photo-list/_index.env

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

source/components/list/ul-photo-list/_index.html

@@ -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>

source/components/list/ul-photo-list/_index.scss

@@ -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;
+}

source/scss/layui-ul.scss

@@ -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;