From 8a1334ce06effea6a6fad03ea4549751737e7ef7 Mon Sep 17 00:00:00 2001 From: augushong Date: Sun, 2 May 2021 19:31:42 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BB=86=E8=8A=82;=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E6=9D=A1=E5=B9=85=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/list.html | 20 ++ demo/nav.html | 11 + demo/title.html | 32 ++- public/cdn/layui-ul.css | 600 +++++++++++++++++++++++----------------- 4 files changed, 407 insertions(+), 256 deletions(-) diff --git a/demo/list.html b/demo/list.html index c792984..ba82a33 100644 --- a/demo/list.html +++ b/demo/list.html @@ -224,4 +224,24 @@ + + +
+ 条幅(广告)列表 +
+
+
+
+
+
+
+
福牛迎春
+
天天送大礼
+
+
查看详情
+
+
+
+
+
\ No newline at end of file diff --git a/demo/nav.html b/demo/nav.html index 79817b1..0800e28 100644 --- a/demo/nav.html +++ b/demo/nav.html @@ -202,4 +202,15 @@ + +
+ 简单地分割线导航 +
+
+ 导航1 + 那个导航2 + 这个导航3 + 导航4 +
+
\ No newline at end of file diff --git a/demo/title.html b/demo/title.html index 7f3c2d1..7e460c1 100644 --- a/demo/title.html +++ b/demo/title.html @@ -10,7 +10,7 @@ Boutique Hotel
- +
@@ -23,7 +23,7 @@ Boutique Hotel
- +
@@ -36,7 +36,7 @@ Boutique Hotel
- +
@@ -44,5 +44,31 @@ + + + +
+ 分组标题 +
+
+ 销售 +
+
+ 设计 +
+ +
+
+ +
+ 分组标题-2 +
+
+ 销售 +
+
+ 设计 +
+
\ No newline at end of file diff --git a/public/cdn/layui-ul.css b/public/cdn/layui-ul.css index 46d57e8..e5307ab 100644 --- a/public/cdn/layui-ul.css +++ b/public/cdn/layui-ul.css @@ -1,18 +1,17 @@ /* 列表开始 */ -.ul-nav-tree { -} +.ul-nav-tree {} .ul-nav-tree-group-title { - font-size: 16px; + font-size : 16px; font-weight: 600; line-height: 2; } .ul-nav-tree-item { - display: flex; + display : flex; align-items: baseline; - cursor: pointer; - padding: 5px; + cursor : pointer; + padding : 5px; white-space: nowrap; } @@ -25,8 +24,8 @@ } .ul-nav-tree-item-desc { - font-size: 14px; - color: #999; + font-size : 14px; + color : #999; margin-left: 15px; } @@ -42,11 +41,11 @@ } .ul-icon-exit { - display: inline-block; - width: 16px; - height: 16px; - background-image: url("img/exit.png"); - background-size: cover; + display : inline-block; + width : 16px; + height : 16px; + background-image : url("img/exit.png"); + background-size : cover; background-position: center; } @@ -59,12 +58,13 @@ } .ul-common-flex-list { - display: flex; + display : flex; flex-wrap: wrap; } + .ul-common-flex-sb { - display: flex; - align-items: center; + display : flex; + align-items : center; justify-content: space-between; } @@ -72,14 +72,13 @@ /* 用户头像开始 */ -.ul-avatar-list { -} +.ul-avatar-list {} .ul-avatar-list-item { - display: flex; - align-items: center; - justify-content: space-between; - padding: 8px; + display : flex; + align-items : center; + justify-content : space-between; + padding : 8px; background-color: #ddd; } @@ -88,35 +87,35 @@ } .ul-avatar-list-item-img { - height: 48px; - width: 48px; - background-image: url("/static/images/avatar.png"); - background-size: cover; + height : 48px; + width : 48px; + background-image : url("/static/images/avatar.png"); + background-size : cover; background-position: center; - border-radius: 3px; - background-color: #fff; + border-radius : 3px; + background-color : #fff; } .ul-avatar-list-item-info { margin-left: 10px; - position: relative; - width: calc(100% - 48px - 10px); + position : relative; + width : calc(100% - 48px - 10px); } .ul-avatar-list-item-time { position: absolute; - right: 0; - top: 0; - color: #999; + right : 0; + top : 0; + color : #999; } .ul-avatar-list-item-tips { - color: #999; - font-size: 14px; - display: inline-block; - white-space: nowrap; - width: 100%; - overflow: hidden; + color : #999; + font-size : 14px; + display : inline-block; + white-space : nowrap; + width : 100%; + overflow : hidden; text-overflow: ellipsis; } @@ -126,15 +125,15 @@ .ul-header { background-color: #fff; - box-shadow: 0 3px 5px #999; - padding: 3px; + box-shadow : 0 3px 5px #999; + padding : 3px; } .ul-header-main { - display: flex; + display : flex; justify-content: space-between; - align-items: center; - margin: 0 auto; + align-items : center; + margin : 0 auto; } .ul-header-logo { @@ -142,25 +141,25 @@ } .ul-header-user { - display: flex; - align-items: center; + display : flex; + align-items : center; justify-content: center; } .ul-header-user-avatar { - background-image: url("/static/images/avatar.png"); - width: 45px; - height: 45px; - background-size: cover; + background-image : url("/static/images/avatar.png"); + width : 45px; + height : 45px; + background-size : cover; background-position: center; } .ul-header-user-options { - display: flex; + display : flex; align-items: center; - color: #999; - font-size: 12px; - cursor: pointer; + color : #999; + font-size : 12px; + cursor : pointer; } .ul-header-user-info { @@ -182,16 +181,16 @@ color: #666; } -.layui-nav.ul-nav-white .layui-nav-itemed > .layui-nav-child { +.layui-nav.ul-nav-white .layui-nav-itemed>.layui-nav-child { background-color: rgba(255, 255, 255, 0.6) !important; } .layui-nav-tree.ul-nav-white .layui-nav-item a:hover { background-color: #9cf; - color: #fff !important; + color : #fff !important; } -.layui-nav.ul-nav-white .layui-nav-itemed > a, +.layui-nav.ul-nav-white .layui-nav-itemed>a, .layui-nav-tree.ul-nav-white .layui-nav-title a, .layui-nav-tree.ul-nav-white .layui-nav-title a:hover { color: #666 !important; @@ -204,10 +203,10 @@ .layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this, .layui-nav-tree.ul-nav-white .layui-nav-child dd.layui-this a, .layui-nav-tree.ul-nav-white .layui-this, -.layui-nav-tree.ul-nav-white .layui-this > a, -.layui-nav-tree.ul-nav-white .layui-this > a:hover { +.layui-nav-tree.ul-nav-white .layui-this>a, +.layui-nav-tree.ul-nav-white .layui-this>a:hover { background-color: #9cf; - color: #fff; + color : #fff; } /* 导航结束 */ @@ -215,32 +214,31 @@ /* 链接导航开始 */ .ul-link-select { - display: flex; - align-items: flex-start; + display : flex; + align-items : flex-start; justify-content: flex-start; } -.ul-link-title { -} +.ul-link-title {} .ul-link-list { - display: flex; - align-items: flex-start; + display : flex; + align-items : flex-start; justify-content: flex-start; - flex-wrap: wrap; - margin-left: 15px; + flex-wrap : wrap; + margin-left : 15px; } .ul-link-item { - padding: 0px 10px; - cursor: pointer; + padding : 0px 10px; + cursor : pointer; margin-right: 10px; } .ul-link-item.current { border-radius: 15px; - border: 1px solid #6cf; - color: #6cf; + border : 1px solid #6cf; + color : #6cf; } /* 链接导航结束 */ @@ -248,84 +246,84 @@ /* 相册列表开始 */ .ul-photo-list { - display: flex; - align-items: flex-start; + display : flex; + align-items : flex-start; justify-content: flex-start; - flex-wrap: wrap; + flex-wrap : wrap; } .ul-photo-item { - margin: 15px; + margin : 15px; text-align: center; - min-width: 220px; + min-width : 220px; } .ul-photo-poster { - width: 180px; - height: 140px; - background-image: url("../static/images/avatar.png"); - background-size: cover; + 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; + margin : 0 auto; + box-shadow : 1px 1px 3px #999; } .ul-photo-info { - margin-top: 10px; - font-size: 18px; + margin-top : 10px; + font-size : 18px; line-height: 1.5; } .ul-photo-desc { font-size: 14px; - color: #999; + color : #999; } .ul-photo-card-list { - display: flex; - align-items: flex-start; + display : flex; + align-items : flex-start; justify-content: flex-start; - flex-wrap: wrap; + flex-wrap : wrap; } .ul-photo-card-item { - width: 200px; - margin: 15px; + width : 200px; + margin : 15px; box-shadow: 0 5px 10px #999; } .ul-photo-card-poster { - width: 100%; - height: 140px; - background-size: cover; + width : 100%; + height : 140px; + background-size : cover; background-position: center; } .ul-photo-card-info { - padding: 5px; - font-size: 18px; + padding : 5px; + font-size : 18px; line-height: 1.5; } .ul-photo-card-desc { font-size: 14px; - color: #999; + color : #999; } /* 相册列表结束 */ .ul-info-tips { - padding: 15px; + padding : 15px; background-color: rgba(255, 255, 255, 0.6); } .ul-card-status { - padding: 5px; + padding : 5px; border-radius: 5px; } .ul-card-options { - float: right; + float : right; cursor: pointer; } @@ -335,7 +333,7 @@ .data-img .data-img-main { max-width: 120px; - margin: 5px; + margin : 5px; } .data-img { @@ -343,7 +341,7 @@ } .ul-card-list { - display: flex; + display : flex; flex-wrap: wrap; } @@ -356,7 +354,7 @@ } .ul-title { - text-align: center; + text-align : center; line-height: 1.5; } @@ -373,15 +371,14 @@ margin-top: 8px; } -.ul-message-list { -} +.ul-message-list {} .ul-message-item { - margin-bottom: 15px; - display: flex; + margin-bottom : 15px; + display : flex; justify-content: flex-start; - align-items: flex-start; - padding: 15px; + align-items : flex-start; + padding : 15px; } .ul-message-item-left { @@ -398,35 +395,35 @@ .ul-message-item-options { position: absolute; - right: 0; - top: 0; + right : 0; + top : 0; } .ul-message-item-avatar { - background-size: cover; + background-size : cover; background-position: center; - width: 100px; - height: 100px; - border-radius: 50%; + width : 100px; + height : 100px; + border-radius : 50%; } .ul-message-item-name { - display: flex; - color: #6cf; + display : flex; + color : #6cf; font-size: 16px; } .ul-message-item-data { - display: flex; - font-size: 14px; - color: #999; + display : flex; + font-size : 14px; + color : #999; margin-top: 10px; } .ul-message-item-content { background-color: #f0f0f0; - padding: 15px; - margin-top: 10px; + padding : 15px; + margin-top : 10px; } .ul-message-item-img-list { @@ -434,19 +431,19 @@ } .ul-message-item-img { - width: 160px; - height: 120px; - background-size: cover; + width : 160px; + height : 120px; + background-size : cover; background-position: center; - margin-right: 10px; - display: inline-block; + margin-right : 10px; + display : inline-block; } .ul-nav-easy { background-color: transparent; } -.layui-nav-tree.ul-nav-easy .layui-nav-item > a { +.layui-nav-tree.ul-nav-easy .layui-nav-item>a { color: #666; } @@ -454,9 +451,9 @@ background-color: transparent; } -.layui-nav-tree.ul-nav-easy .layui-this > a { +.layui-nav-tree.ul-nav-easy .layui-this>a { background-color: transparent; - color: #6cf; + color : #6cf; } .layui-nav-tree.ul-nav-easy .layui-nav-item.layui-this a:hover { @@ -468,7 +465,7 @@ } .layui-nav-tree.ul-nav-easy .layui-nav-item a { - height: 45px; + height : 45px; line-height: 45px; } @@ -476,69 +473,68 @@ margin-bottom: 15px; } -.ul-upload-photo-list { -} +.ul-upload-photo-list {} .ul-upload-photo-item { - display: inline-block; - width: 120px; - height: 120px; - margin: 5px; + display : inline-block; + width : 120px; + height : 120px; + margin : 5px; background-color: #ddd; - cursor: pointer; - box-shadow: 0 3px 5px #999; - position: relative; + cursor : pointer; + box-shadow : 0 3px 5px #999; + position : relative; } .ul-upload-photo-main { - background-size: cover; + background-size : cover; background-position: center; - width: 100%; - height: 100%; + width : 100%; + height : 100%; } .ul-upload-photo-delete { - position: absolute; - right: 5px; - top: 5px; - z-index: 999; - font-size: 20px; - color: #fff; + 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-image : url("img/upload.png"); + background-size : cover; background-position: center; } -.ul-form-group-title { - color: #999; +.ul-group-title { + color : #999; border-bottom: 1px solid #bbb; - padding: 5px 0; + padding : 5px 0; margin-bottom: 15px; } .ul-tree-item { background-color: #fbfbfb; - cursor: pointer; + cursor : pointer; } .ul-tree-item-info { border-left: 3px solid transparent; - padding: 8px 0; - position: relative; + padding : 8px 0; + position : relative; } .ul-tree-item-info.current { background-color: #9cf; - border-color: #6699cc; + border-color : #6699cc; } .ul-tree-item-info:hover { background-color: rgb(190, 222, 255); - border-color: #6699cc; + border-color : #6699cc; } .ul-tree-item-title { @@ -547,16 +543,16 @@ .ul-tree-item-icon { position: absolute; - left: 5px; - top: 10px; + left : 5px; + top : 10px; } .ul-note-item { - display: flex; + display : flex; justify-content: flex-start; - align-items: flex-start; - cursor: pointer; - padding: 15px; + align-items : flex-start; + cursor : pointer; + padding : 15px; } .ul-note-item.current, @@ -569,20 +565,20 @@ } .ul-note-item .ul-note-item-desc { - color: #999; - font-size: 12px; + color : #999; + font-size : 12px; margin-top: 5px; } .ul-note-item .ul-note-item-time { - color: #bbb; - font-size: 12px; + color : #bbb; + font-size : 12px; margin-top: 5px; } .ul-note-item .ul-note-item-tree { - font-size: 12px; - color: #bbb; + font-size : 12px; + color : #bbb; margin-top: 5px; } @@ -605,14 +601,14 @@ .ul-nav-min { box-shadow: 2px 2px 5px #999; - padding: 5px; + padding : 5px; text-align: center; } .ul-nav-min-item { padding: 5px 0; - cursor: pointer; - color: #333; + cursor : pointer; + color : #333; display: block; } @@ -622,27 +618,27 @@ .ul-header-a { background-color: #f8f8f8; - border-bottom: 1px solid #e8e8e8; - color: #666; + border-bottom : 1px solid #e8e8e8; + color : #666; } .ul-header-a-main { - display: flex; - align-items: center; + display : flex; + align-items : center; justify-content: space-between; /* border-width: 1px 0; - border-color: #bbb; - border-style: solid; */ - padding: 5px; - margin: 0 auto; + border-color : #bbb; + border-style : solid; */ + padding : 5px; + margin : 0 auto; } .ul-header-a-nav-item { margin-right: 15px; - position: relative; - display: flex; - align-items: center; - cursor: pointer; + position : relative; + display : flex; + align-items : center; + cursor : pointer; } .ul-header-a-nav-item:hover .ul-header-a-nav-plus { @@ -650,42 +646,44 @@ } .ul-header-a-img { - height: 24px; - width: 24px; - background-size: cover; + height : 24px; + width : 24px; + background-size : cover; background-position: center; + margin-right : 10px; } .ul-header-a-right { - display: flex; + display : flex; align-items: center; } .ul-header-a-nav-plus { - position: absolute; - top: 100%; - left: 50%; - display: none; + position : absolute; + top : 100%; + left : 50%; + display : none; background-color: #fff; } .ul-nav-header-main { - display: flex; - align-items: center; + display : flex; + align-items : center; justify-content: space-between; - padding: 5px 15px; - margin: 0 auto; + padding : 5px 15px; + margin : 0 auto; } + .ul-nav-header-right { text-align: right; } .ul-nav-header-item { - display: inline-block; + display : inline-block; margin-right: 15px; - cursor: pointer; - padding: 5px 15px; - color: #333; + cursor : pointer; + padding : 5px 15px; + color : #333; } .ul-nav-header-item:hover { @@ -699,9 +697,11 @@ .ul-nav-header-red .ul-nav-header-item { color: #fff; } + .ul-nav-header-red .ul-nav-header-item:hover { color: #fedf50; } + .ul-nav-header-primary { background-color: #6cf; } @@ -709,126 +709,220 @@ .ul-nav-header-primary .ul-nav-header-item { color: #fff; } + .ul-nav-header-primary .ul-nav-header-item:hover { color: #ccffff; } .ul-card-a { - width: 180px; - display: flex; + width : 180px; + display : flex; justify-content: space-between; - border: 1px solid #bbb; - box-shadow: 2px 2px 5px #999; - color: #516073; - padding: 15px; - cursor: pointer; - margin-right: 15px; - margin-bottom: 15px; + border : 1px solid #bbb; + box-shadow : 2px 2px 5px #999; + color : #516073; + padding : 15px; + cursor : pointer; + margin-right : 15px; + margin-bottom : 15px; + position : relative; } + .ul-card-a-left { width: 40%; } + .ul-card-a-right { - display: flex; + display : flex; align-items: center; - text-align: center; - width: 50%; + text-align : center; + width : 50%; } + .ul-card-a-title { font-size: 18px; } + .ul-card-a-desc { margin-top: 5px; - font-size: 14px; + font-size : 14px; } .ul-nav-poster { - padding: 5px; - border: 1px solid #ddd; + padding : 5px; + border : 1px solid #ddd; border-top-width: 3px; } .ul-nav-poster-item { - display: flex; + display : flex; justify-content: space-between; - align-items: center; - cursor: pointer; + align-items : center; + cursor : pointer; } .ul-nav-poster-left { - display: flex; + display : flex; align-items: center; } + .ul-nav-post-title { - color: #333; + color : #333; font-weight: bold; } + .ul-nav-poster-desc { - color: #999; - font-size: 12px; + color : #999; + font-size : 12px; font-weight: 100; } + .ul-nav-poster-img { - width: 38px; - height: 38px; - margin: 5px; - background-size: cover; + width : 38px; + height : 38px; + margin : 5px; + background-size : cover; background-position: center; } + .ul-nav-poster-item:not(:last-child) { border-bottom: 1px dashed #ddd; } .ul-card-bank { - width: 249px; - border: 1px solid #e4e4e4; + width : 249px; + border : 1px solid #e4e4e4; border-radius: 5px; - box-shadow: 0 1px 1px #e9e9e9; - float: left; - margin-right: 14px; + box-shadow : 0 1px 1px #e9e9e9; + float : left; + margin-right : 14px; margin-bottom: 10px; - color: #666666; - font-size: 12px; - cursor: pointer; + color : #666666; + font-size : 12px; + cursor : pointer; } .ul-card-bank-header { - padding: 10px 0; - margin: 0 14px; + padding : 10px 0; + margin : 0 14px; border-bottom: 1px dotted #d9d9d9; } .ul-card-bank-body { - height: 40px; + height : 40px; padding: 10px 10px 20px 0; } .ul-card-bank-line { - width: 88px; - height: 23px; - font-weight: 100; - text-align: center; - background: #2e4158; + width : 88px; + height : 23px; + font-weight : 100; + text-align : center; + background : #2e4158; border-radius: 0 3px 0 0; - font-size: 14px; - float: left; + font-size : 14px; + float : left; } .ul-card-bank-footer { - padding: 3px 14px; + padding : 3px 14px; background: #f8f8f8; border-top: 1px solid #e7e7e7; } .ul-card-bank-line-triangle { - width: 0px; - height: 3px; - display: block; - float: right; - border-left: 9px solid transparent; + width : 0px; + height : 3px; + display : block; + float : right; + border-left : 9px solid transparent; border-bottom: 20px solid #fff; } + .ul-card-bank-tips { - color: #6cf; + color : #6cf; font-size: 14px; } + +.ul-nav-link-item { + display : inline-block; + margin : 5px 0; + padding : 0 10px; + border : 1px solid transparent; + color : #333; + white-space: nowrap; +} + +.ul-nav-link-item:not(:last-child) { + border-right-color: #666; +} + +.ul-group-title-2 { + background : #d2dbe0; + width : 84px; + height : 28px; + line-height : 28px; + font-size : 14px; + font-weight : bold; + text-align : center; + position : relative; + margin-top : 30px; + margin-bottom: 14px; + color : #666666; +} + +.ul-group-title-2::after { + content : ""; + width : 0; + height : 0; + position : absolute; + border-top : 14px solid transparent; + border-bottom: 14px solid transparent; + border-left : 15px solid #d2dbe0; + right : -15px; + top : 0px; + +} + +.ul-ad-list{ + +} +.ul-ad-item{ + box-shadow: 1px 1px 8px #666; + background-color: #fff; + display: flex; + align-items: center; + justify-content: space-between; + padding: 15px; + margin-bottom: 15px; +} + +.ul-ad-left{ + width: 68%; + height: 160px; +} +.ul-ad-img{ + height: 100%; + width: 100%; + background-size: cover; + background-position: center; +} + +.ul-ad-right{ + width: 28%; +} + +.ul-ad-title{ + font-size: 28px; + font-weight: 100; + margin: 0; + color: #e4393c; + +} + +.ul-ad-desc{ + font-size: 14px; +color: #666666; +margin: 26px 0; +line-height: 24px; +} \ No newline at end of file