From 1690c7fc04c91068a26293da0bc509a345104f66 Mon Sep 17 00:00:00 2001 From: augushong Date: Thu, 28 Aug 2025 12:28:57 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84ul-title=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/pc/title.html | 49 - source/components/_index.scss | 3 +- source/components/title/ul-title/_index.env | 6 + source/components/title/ul-title/_index.html | 39 + source/components/title/ul-title/_index.md | 0 source/components/title/ul-title/_index.php | 5 + source/components/title/ul-title/_index.scss | 18 + source/scss/layui-ul.css | 3218 ++++++++++++++++++ source/scss/layui-ul.scss | 18 - 9 files changed, 3288 insertions(+), 68 deletions(-) create mode 100644 source/components/title/ul-title/_index.env create mode 100644 source/components/title/ul-title/_index.html create mode 100644 source/components/title/ul-title/_index.md create mode 100644 source/components/title/ul-title/_index.php create mode 100644 source/components/title/ul-title/_index.scss create mode 100644 source/scss/layui-ul.css diff --git a/demo/pc/title.html b/demo/pc/title.html index ebd87f3..a82da30 100644 --- a/demo/pc/title.html +++ b/demo/pc/title.html @@ -1,52 +1,3 @@ -
- 标题1号 -
-
-
-
- 精品酒店 -
-
- Boutique Hotel -
-
- -
-
-
-
-
-
- 精品酒店 -
-
- Boutique Hotel -
-
- -
-
-
-
-
-
- 精品酒店 -
-
- Boutique Hotel -
-
- -
-
-
- - - - -
-
-
分组标题
diff --git a/source/components/_index.scss b/source/components/_index.scss index 8d26bdf..6179cf0 100644 --- a/source/components/_index.scss +++ b/source/components/_index.scss @@ -10,7 +10,6 @@ @import './card/ul-card-qrcode/index'; @import './card/ul-data-card/index'; @import './card/ul-easy-image/index'; -@import './group_panel/ul-group-list/index'; @import './card/ul-info-card/index'; @import './class/ul-class-1/index'; @import './descriptions/ul-descriptions-form/index'; @@ -19,6 +18,7 @@ @import './descriptions/ul-easy-item/index'; @import './element/ul-element-fixed-option/index'; @import './element/ul-loading-pos/index'; +@import './group_panel/ul-group-list/index'; @import './header/ul-header-shape/index'; @import './header/ul-shop-header/index'; @import './list/ul-ad-list/index'; @@ -43,3 +43,4 @@ @import './nav/ul-nav-grid/index'; @import './nav/ul-nav-info/index'; @import './nav/ul-nav-tree-2/index'; +@import './title/ul-title/index'; diff --git a/source/components/title/ul-title/_index.env b/source/components/title/ul-title/_index.env new file mode 100644 index 0000000..ce52626 --- /dev/null +++ b/source/components/title/ul-title/_index.env @@ -0,0 +1,6 @@ +title=ul-title +padding=0 +margin=0 +gray=0 +mobile=0 +inner_margin=0 \ No newline at end of file diff --git a/source/components/title/ul-title/_index.html b/source/components/title/ul-title/_index.html new file mode 100644 index 0000000..b4ddd72 --- /dev/null +++ b/source/components/title/ul-title/_index.html @@ -0,0 +1,39 @@ +
+
+
+ 精品酒店 +
+
+ Boutique Hotel +
+
+ +
+
+
+
+
+
+ 精品酒店 +
+
+ Boutique Hotel +
+
+ +
+
+
+
+
+
+ 精品酒店 +
+
+ Boutique Hotel +
+
+ +
+
+
\ No newline at end of file diff --git a/source/components/title/ul-title/_index.md b/source/components/title/ul-title/_index.md new file mode 100644 index 0000000..e69de29 diff --git a/source/components/title/ul-title/_index.php b/source/components/title/ul-title/_index.php new file mode 100644 index 0000000..ca5d8ed --- /dev/null +++ b/source/components/title/ul-title/_index.php @@ -0,0 +1,5 @@ + .layui-nav-child { + background-color: rgba(255, 255, 255, 0.6) !important; + padding-left: 15px; + min-width: calc(100% - 15px) !important; +} + +.layui-nav-tree.ul-nav-white .layui-nav-item a:hover { + background-color: #9cf; + color: #fff !important; +} + +.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; +} + +.layui-nav-tree.ul-nav-white .layui-nav-bar { + background-color: #6cf; +} + +.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 { + background-color: #9cf; + color: #fff; +} + +/* 导航结束 */ +/* 简约风格Form */ +.ul-form-basic .layui-form-item { + clear: unset; + margin-bottom: 6px; +} +.ul-form-basic .layui-form-label { + float: unset; + width: unset; + text-align: left; + padding: 5px 0; + font-size: 14px; + color: #000; +} +.ul-form-basic .layui-input-block { + margin-left: unset; + min-height: 30px; +} +.ul-form-basic .layui-input { + padding: 10px 11px; + height: unset; +} +.ul-form-basic .layui-form-mid { + padding: 5px 0 !important; +} +.ul-form-basic .layui-form-select dl { + top: 28px; +} +.ul-form-basic .layui-form-select dl dd, +.ul-form-basic .layui-form-select dl dt { + height: 30px; +} + +.ul-form-space-between .layui-form-item { + display: flex; + align-items: flex-start; + justify-content: space-between; + border-bottom: 2px solid #eee; +} +.ul-form-space-between .layui-form-item::after { + content: unset; +} +.ul-form-space-between .layui-form-item:last-child { + border: unset; +} +.ul-form-space-between .layui-form-item .layui-form-label { + text-align: left; + float: unset; +} +.ul-form-space-between .layui-form-item .layui-input-block { + margin-left: unset; + width: 60%; + text-align: right; +} +.ul-form-space-between .layui-form-item .layui-input { + border: unset; + text-align: right; +} +.ul-form-space-between .layui-form-item .layui-form-mid { + text-align: right; + display: block; + float: unset; +} + +.ul-field-clean { + border: unset; +} +.ul-field-clean .legend { + margin: 5px; + text-align: center; + width: 100%; + font-size: 16px; + font-weight: 600; +} +.ul-field-clean .layui-field-box { + margin-top: 8px; + background: #fff; + border-radius: 8px; + box-shadow: 0px 0px 4px rgba(77, 85, 114, 0.1); + padding: 15px; +} + +.ul-card-simple-icon { + display: inline-block; + margin-right: 15px; + margin-bottom: 15px; + box-shadow: 0 2px 12px 0 #bbb; + border-radius: 4px; + border: 1px solid #ebeef5; + background-color: #fff; + box-sizing: border-box; + width: 100px; + padding: 10px; + text-align: center; +} +.ul-card-simple-icon .ul-card-simple-icon-image { + width: 80px; + height: 80px; + background-size: cover; + background-position: center; + display: inline-block; +} +.ul-card-simple-icon .ul-card-simple-icon-title { + border-top: 2px solid #ebeef5; + margin-top: 8px; + padding-top: 8px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.ul-card-message { + border-radius: 10px 10px 0 0; + background-color: #fff; +} +.ul-card-message .header { + padding: 15px; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 14px; + font-weight: 600; + border-bottom: 2px solid #eee; +} +.ul-card-message .body { + padding: 15px; + padding-bottom: 0; +} +.ul-card-message .body .item { + display: flex; + align-items: flex-start; + justify-content: flex-start; + line-height: 1.8; + margin-bottom: 10px; +} +.ul-card-message .body .item .item-title { + width: 90px; + color: #999; +} +.ul-card-message .body .item .item-value { + white-space: normal; + width: calc(100% - 90px); +} +.ul-card-message .footer { + text-align: right; + padding: 15px; +} + +.ul-group-title-simple { + line-height: 30px; + font-size: 16px; + padding-left: 10px; + position: relative; +} +.ul-group-title-simple:before { + content: ""; + display: block; + position: absolute; + left: 0; + height: 16px; + width: 3px; + top: 7px; + border-radius: 3px; + background: linear-gradient(0deg, #7FC0FC, #4B7EEF); +} + +.ul-jumbotron { + padding: 15px; + text-align: center; +} +.ul-jumbotron .main { + margin: 20px auto; + max-width: 800px; + text-align: center; +} +.ul-jumbotron .main .title { + font-size: 32px; + font-weight: 600; +} +.ul-jumbotron .main .desc { + font-size: 18px; + line-height: 1.8; + margin: 25px auto; +} + +.ul-jumbotron.dark { + background-color: #1F2430; + color: #fff; +} + +.ul-jumbotron.clean { + background-color: #fff; +} + +.ul-jumbotron.left .main { + text-align: left; + max-width: auto; + margin-left: 30px; +} +.ul-jumbotron.left .main .desc { + margin: 25px auto 25px 0; +} + +.ul-footer { + background-color: #333; + color: #fff; +} + +.ul-footer .container { + display: flex; + margin: 0 auto; + padding: 40px 0; +} + +.ul-footer .logo { + width: 120px; +} + +.ul-footer .container > div { + padding: 0 25px; +} + +.ul-footer .container > div:not(:last-child) { + border-right: 1px solid #555; +} + +.ul-footer .ul-footer-nav a { + color: #fff; + margin: 5px 10px; + font-weight: 600; +} + +.ul-footer .ul-footer-link a { + color: #ddd; + margin: 5px 10px; +} + +.ul-footer p { + margin-top: 5px; +} + +.ul-descriptions { + display: grid; + grid-template-columns: 33.3333333333% 33.3333333333% 33.3333333333%; +} +.ul-descriptions .item { + display: inline-flex; + position: relative; + min-height: 40px; +} +.ul-descriptions .item .label { + width: 78px; + padding: 0 6px; + position: absolute; + height: 100%; + display: flex; + align-items: center; + justify-content: flex-end; + color: #333; + min-width: 78px; + font-weight: 400; +} +.ul-descriptions .item .value { + width: calc(100% - 90px - 12px); + margin-left: 102px; + display: flex; + align-items: center; + justify-content: left; + height: auto; + white-space: break-all; + word-break: break-all; + color: #666; +} +.ul-descriptions .item.article { + grid-column-start: 1; + grid-column-end: 4; +} +.ul-descriptions .item.article .label { + align-items: flex-start; + padding-top: 10px; + height: calc(100% - 10px); +} +.ul-descriptions .item.article .value .article-item { + white-space: break-spaces; + padding: 5px; +} +.ul-descriptions .item.article .value .article-item img { + max-width: 100%; +} +.ul-descriptions .item.tag .value .tag-item { + padding: 3px 6px; + border-radius: 3px; + background-color: #6cf; + color: #fff; + margin-right: 5px; + font-size: 12px; +} +.ul-descriptions .item.poster { + grid-row: span 2; +} +.ul-descriptions .item.poster .value .poster-item { + max-width: 100%; + max-height: 80px; + margin: 5px; +} +.ul-descriptions .item.line { + grid-column-start: 1; + grid-column-end: 4; +} +.ul-descriptions .item.lines { + grid-column-start: 1; + grid-column-end: 4; +} +.ul-descriptions .item.lines .label { + align-items: flex-start; + padding-top: 10px; + height: calc(100% - 10px); +} +.ul-descriptions .item.short-line { + grid-column: span 2; +} +.ul-descriptions .item.box { + grid-row: span 2; +} +.ul-descriptions.table { + border-style: solid; + border-color: #000; + border-width: 1px; + margin-right: 1px; + margin-bottom: 1px; +} +.ul-descriptions.table .item { + border-style: solid; + border-color: #000; + border-width: 0px 1px 1px 0; + margin-bottom: -1px; + margin-right: -1px; +} +.ul-descriptions.table .item .label { + position: absolute; + border-right: 1px solid #000; +} +.ul-descriptions.table .item.line { + border-right: 0; +} +.ul-descriptions.border { + border-style: solid; + border-color: rgb(235, 238, 245); + border-width: 1px; + margin-right: 1px; + margin-bottom: 0px; +} +.ul-descriptions.border .item { + border-style: solid; + border-color: rgb(235, 238, 245); + border-width: 0px 1px 1px 0; + margin-bottom: 0px; + margin-right: -1px; +} +.ul-descriptions.border .item .label { + position: absolute; + border-right: 1px solid rgb(235, 238, 245); + background-color: rgb(245, 247, 250); +} +.ul-descriptions.border .item.line { + border-right: 0; +} +.ul-descriptions.padding .item .value { + padding: 10px; + margin-left: 92px; +} + +/* 头部开始 */ +.ul-header { + background-color: #fff; + box-shadow: 0 3px 5px #999; + padding: 3px; +} + +.ul-header-main { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; +} + +.ul-header-logo { + max-height: 48px; +} + +.ul-header-user { + 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-position: center; +} + +.ul-header-user-options { + display: flex; + align-items: center; + color: #999; + font-size: 12px; + cursor: pointer; + margin-top: 5px; +} + +.ul-header-user-info { + margin-left: 10px; +} + +.layui-quote-gray { + background-color: #f0f0f0; + color: #666; + border-left-color: #ddd; +} + +.ul-card-a { + 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; + position: relative; +} + +.ul-card-a-left { + width: 40%; +} + +.ul-card-a-right { + display: flex; + align-items: center; + text-align: center; + width: 50%; +} + +.ul-card-a-title { + font-size: 18px; +} + +.ul-card-a-desc { + margin-top: 5px; + font-size: 14px; + white-space: nowrap; +} + +.ul-card-avatar-info .main { + padding: 12px; + background-color: #1E9FFF; + color: #fff; + border-radius: 6px; + position: relative; +} +.ul-card-avatar-info .main-title { + font-size: 22px; + display: flex; + margin-bottom: 14px; + align-items: center; +} +.ul-card-avatar-info .main-title .item { + margin-right: 6px; +} +.ul-card-avatar-info .item-title { + font-size: 14px; + display: flex; + margin-bottom: 8px; + align-items: center; +} +.ul-card-avatar-info .item-title .item { + margin-right: 6px; +} +.ul-card-avatar-info .footer-title { + display: flex; + font-size: 12px; + justify-content: space-between; + margin-top: 12px; + align-items: center; +} +.ul-card-avatar-info .fixed-container { + position: absolute; + top: 0; + right: 0; + padding: 15px; + z-index: 9; +} + +.ul-card-bank { + width: 249px; + border: 1px solid #e4e4e4; + border-radius: 5px; + box-shadow: 0 1px 1px #e9e9e9; + display: inline-block; + margin-right: 14px; + margin-bottom: 10px; + color: #666666; + font-size: 12px; + cursor: pointer; +} + +.ul-card-bank-header { + padding: 10px 0; + margin: 0 14px; + border-bottom: 1px dotted #d9d9d9; +} + +.ul-card-bank-body { + height: 40px; + padding: 10px 10px 20px 0; +} + +.ul-card-bank-line { + width: 88px; + height: 23px; + font-weight: 100; + text-align: center; + background: #2e4158; + border-radius: 0 3px 0 0; + font-size: 14px; + float: left; +} + +.ul-card-bank-footer { + 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; + border-bottom: 20px solid #fff; +} + +.ul-card-bank-tips { + color: #6cf; + font-size: 14px; +} + +.ul-card-data { + display: inline-block; + border: 1px solid #eee; + border-radius: 5px; + padding: 15px; + margin-right: 15px; + margin-bottom: 15px; + /* height : 70px; */ +} + +.ul-card-data-a-title { + padding-bottom: 15px; + color: #6cf; + font-size: 28px; +} + +.ul-card-data-a-item { + display: inline-block; + margin-right: 5px; +} + +.ul-card-data-b-icon { + display: inline-block; + margin-right: 15px; + font-size: 46px; + background-color: #6cf; + padding: 8px; + color: #fff; + border-radius: 5px; +} + +.ul-card-data-b-info { + display: inline-block; + margin-right: 15px; +} + +.ul-card-data-b-value { + font-size: 28px; + color: #6cf; + margin-top: 5px; +} + +.ul-card-data-b-main { + display: flex; + align-items: center; +} + +.ul-card-data-b-title { + line-height: 24px; +} + +.ul-card-data-c-item { + display: inline-block; + padding: 10px 40px; + text-align: center; + color: #999; +} + +.ul-card-data-c-item:not(:last-child) { + border-right: 1px solid #ddd; +} + +.ul-card-data-c-value { + font-size: 18px; + line-height: 30px; +} + +.ul-card-data-c-title { + font-size: 12px; +} + +.ul-card-data-simple { + display: flex; + align-items: center; + justify-content: flex-start; + background-color: #fff; +} +.ul-card-data-simple .item { + margin: 15px 0; + padding: 0 15px; + text-align: left; +} +.ul-card-data-simple .item .item-title { + font-size: 12px; + color: #666; +} +.ul-card-data-simple .item .item-value { + font-size: 16px; + font-weight: 600; + line-height: 30px; +} +.ul-card-data-simple .item .item-rate { + font-size: 12px; +} +.ul-card-data-simple .item .item-rate.up { + color: #FF5722; +} +.ul-card-data-simple .item .item-rate.up::after { + content: " ↑"; +} +.ul-card-data-simple .item .item-rate.down { + color: #1E9FFF; +} +.ul-card-data-simple .item .item-rate.down::after { + content: " ↓"; +} +.ul-card-data-simple .item.line { + border-right: 1px solid #eee; +} +.ul-card-data-simple.bg-black { + background-color: #393D49; + color: #fff; + border-radius: 15px; + padding: 15px; + box-shadow: 0 0 4px #999; +} +.ul-card-data-simple.bg-black .item { + padding: 15px; + margin: 0 10px 0 0; +} +.ul-card-data-simple.bg-black .item .item-title { + color: #fff; +} +.ul-card-data-simple.bg-black .item .item-value { + font-size: 20px; +} +.ul-card-data-simple.bg-black .item.main { + background-color: #fff; + color: #393D49; + border-radius: 15px; + box-shadow: 1px 1px 3px #999; + margin-right: 25px; +} +.ul-card-data-simple.bg-black .item.main .item-title { + color: #393D49; +} + +.ul-card-file { + background-color: #fff; + display: block; + width: 240px; + color: #000 !important; + cursor: pointer; + box-shadow: 0 0 2px #bbb; +} +.ul-card-file .main { + display: flex; + align-items: flex-start; + justify-content: space-between; + padding: 15px 15px 5px 15px; + height: 60px; +} +.ul-card-file .main .info .name { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + width: 160px; +} +.ul-card-file .main .info .desc { + color: #bbb; + font-weight: normal; + font-size: 12px; + margin-top: 5px; +} +.ul-card-file .main .icon { + font-size: 40px; + color: #999; + width: 40px; + text-align: center; +} +.ul-card-file .main .icon.file { + color: #bbb; +} +.ul-card-file .main .icon.excel { + color: rgb(32, 115, 70); +} +.ul-card-file .main .icon.zip { + color: rgb(139, 87, 42); +} +.ul-card-file .main .icon.word { + color: rgb(44, 86, 154); +} +.ul-card-file .main .icon.powerpoint { + color: rgb(242, 97, 63); +} +.ul-card-file .main .icon.pdf { + color: rgb(250, 81, 81); +} +.ul-card-file .main .icon.video { + color: #7c8eee; +} +.ul-card-file .main .icon.audio { + color: #f16c00; +} +.ul-card-file .main .icon.image { + color: #f6ad00; +} +.ul-card-file .main .icon.text { + color: #8289ad; +} +.ul-card-file .main .icon.link { + color: #4876f9; +} +.ul-card-file .footer { + display: flex; + justify-content: space-between; + font-size: 12px; + color: #999; + border-top: 1px solid #eee; + padding: 5px 15px 5px 15px; +} + +.ul-card-money { + padding: 26px; + background-color: #1E9FFF; + border-radius: 16px; + color: #fff; +} +.ul-card-money .main .title { + font-weight: 600; + font-size: 12px; +} +.ul-card-money .main .option { + display: flex; + align-items: flex-end; + justify-content: flex-start; + margin-top: 10px; +} +.ul-card-money .main .option .value { + font-size: 26px; + font-weight: 600; +} +.ul-card-money .main .option .button { + margin-left: 16px; + padding-bottom: 6px; +} +.ul-card-money .footer { + display: flex; + align-items: center; + justify-content: space-between; + text-align: center; + margin-top: 18px; +} +.ul-card-money .footer .label { + font-size: 12px; +} +.ul-card-money .footer .value { + margin-top: 8px; + font-size: 16px; +} + +.ul-card-qrcode { + position: relative; + min-height: 100px; + display: inline-block; + background-color: #eee; + padding: 10px; +} +.ul-card-qrcode .header { + padding: 20px; +} +.ul-card-qrcode .body { + position: relative; +} +.ul-card-qrcode .body .main { + padding: 36px; +} +.ul-card-qrcode .body .main .img { + width: 100%; +} +.ul-card-qrcode__main { + background-color: #fff; + border-radius: 20px; + overflow: hidden; +} +.ul-card-qrcode__point-left { + position: absolute; + width: 20px; + height: 20px; + border-radius: 20px; + background-color: #eee; + left: -10px; + top: 0; +} +.ul-card-qrcode__point-right { + position: absolute; + width: 20px; + height: 20px; + border-radius: 20px; + background-color: #eee; + right: -10px; + top: 0; +} +.ul-card-qrcode__line { + position: absolute; + width: 100%; + height: 0; + border-bottom: 2px dashed #eee; + top: 8px; + left: 0; +} + +.ul-data-card { + margin: 15px; + padding: 15px; + box-shadow: 0 0 3px #bbb; + border-radius: 5px; +} +.ul-data-card .header { + display: flex; + align-items: center; + justify-content: space-between; + padding-bottom: 10px; + border-bottom: 1px solid #eee; +} +.ul-data-card .body { + padding: 10px 0; +} +.ul-data-card .body .main { + display: flex; + align-items: flex-start; + justify-content: flex-start; + flex-wrap: wrap; +} +.ul-data-card .body .main .item { + min-width: 50%; + display: flex; + align-items: center; + margin-bottom: 10px; +} +.ul-data-card .body .main .item .item-title { + font-size: 14px; + font-weight: 600; +} +.ul-data-card .body .main .item .item-value { + font-size: 14px; +} +.ul-data-card .footer { + border-top: 1px solid #eee; + padding-top: 10px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.ul-easy-image { + margin: 5px; + border-radius: 15px; + overflow: hidden; + background-color: #fff; + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); +} +.ul-easy-image__main { + width: 100%; + height: 160px; +} +.ul-easy-image__footer { + padding: 5px 15px; + display: flex; + align-items: flex-end; + justify-content: space-between; +} +.ul-easy-image__title { + margin-top: 10px; + padding-bottom: 10px; + font-size: 16px; + font-weight: 600; +} + +.ul-info-card { + background-color: #fff; +} +.ul-info-card .header .img { + width: 100%; + height: 160px; + background-size: cover; + background-position: center; +} +.ul-info-card .body { + margin-top: 15px; +} +.ul-info-card .body .title { + text-align: center; + font-size: 18px; + font-weight: 600; + color: #333; +} +.ul-info-card .body .line { + height: 3px; + width: 60px; + background-color: #1E9FFF; + margin: 10px auto; +} +.ul-info-card .body .info { + padding: 15px; +} +.ul-info-card .body .info .info-item { + display: inline-block; + min-width: 30%; + margin-bottom: 10px; + margin-right: 1%; +} +.ul-info-card .body .info .info-item .info-title { + font-size: 12px; + color: #999; + margin-bottom: 6px; +} + +.ul-class-1 { + margin: 0 -8px; + display: flex; + align-items: flex-start; + justify-content: flex-start; + flex-wrap: wrap; + width: 100%; +} +.ul-class-1 .item { + padding: 8px; + margin: 8px; + background-color: #f0f0f0; + width: calc(50% - 32px); + border-radius: 8px; +} +.ul-class-1 .item .title { + font-size: 16px; +} +.ul-class-1 .item .desc { + font-size: 12px; + color: #333; + white-space: break-spaces; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} +.ul-class-1 .item .image { + width: 100%; + height: 100px; + background-color: #ddd; + border-radius: 8px; + margin: 6px 0; +} +.ul-class-1 .item .footer { + font-size: 12px; + color: #666; +} +.ul-class-1 .item.colord-blue { + background-color: rgb(53, 122, 250); + color: #fff; +} +.ul-class-1 .item.colord-blue .title { + color: #fff; +} +.ul-class-1 .item.colord-blue .desc { + color: #fff; +} +.ul-class-1 .item.colord-blue .footer { + color: #fff; +} + +.ul-descriptions-form { + width: 100%; +} +.ul-descriptions-form .item { + float: left; + width: calc(50% - 20px); +} +.ul-descriptions-form .item .label { + font-size: 13px; + color: #999; + padding: 10px; +} +.ul-descriptions-form .item .value { + font-size: 14px; + color: #333; + padding: 10px; +} +.ul-descriptions-form .item.full-line { + width: 100%; +} +.ul-descriptions-form .item.poster .poster-item { + height: 55px; +} +.ul-descriptions-form .item .article-item { + color: #666; + white-space: pre-wrap; + word-wrap: break-word; +} +.ul-descriptions-form.border { + width: calc(100% - 2px); + border: 1px solid #e8e8e8; + border-right: 0; + border-bottom: 0; +} +.ul-descriptions-form.border .item { + border: 1px solid #e8e8e8; + width: 50%; + border-top: 0; + border-left: 0; + margin-top: -1px; + margin-left: -1px; +} +.ul-descriptions-form.border .item.full-line { + width: 100%; +} +.ul-descriptions-form.space-between .item .label { + width: 80px; + text-align: right; + margin-right: 10px; + white-space: nowrap; + float: left; +} +.ul-descriptions-form.space-between .item .value { + margin-left: 5px; + float: left; +} +.ul-descriptions-form.space-between .item.full-line .label { + width: calc(100% - 20px); + text-align: center; + margin-right: 0; +} +.ul-descriptions-form.space-between .item.full-line .value { + margin-left: 0; +} +.ul-descriptions-form.space-between.border .item .label { + border-right: 1px solid #e8e8e8; +} +.ul-descriptions-form.space-between.border .item.full-line .label { + border-right: 0; + border-bottom: 1px solid #e8e8e8; +} +.ul-descriptions-form::after { + content: ""; + display: block; + clear: both; +} + +.ul-descriptions-info { + display: flex; + align-items: flex-start; + justify-content: space-between; + flex-wrap: wrap; + flex-shrink: 1; +} +.ul-descriptions-info__item { + width: 50%; + line-height: 2.5; + display: flex; + align-items: center; + justify-content: flex-start; + color: #333; +} +.ul-descriptions-info__item__name { + margin-right: 5px; +} +.ul-descriptions-info__item__name::after { + content: "："; +} + +.ul-descriptions-row { + border: 1px solid #F2F2F2; + color: #333333; +} +.ul-descriptions-row .label { + background-color: #FAFAFA; +} +.ul-descriptions-row .item { + padding: 6px 12px; +} +.ul-descriptions-row .item:not(:last-child) { + border-bottom: 1px solid #F2F2F2; +} + +.ul-easy-item { + display: flex; + align-items: flex-start; + justify-content: flex-start; + padding: 5px 0; +} +.ul-easy-item__name { + min-width: 50px; + color: #333; +} +.ul-easy-item__desc { + color: #777; + display: flex; + align-items: center; + justify-content: flex-start; +} +.ul-easy-item__desc__item { + margin: 0 8px; +} + +.ul-element-fixed-option { + position: fixed; + right: 0; + bottom: 0; + padding: 16px; + z-index: 999; +} +.ul-element-fixed-option .item { + text-align: center; + margin-bottom: 16px; + cursor: pointer; +} +.ul-element-fixed-option .item .icon { + padding: 6px; + box-shadow: 0 0 3px #999; + width: calc(30px + 6px); + height: calc(30px + 6px); + display: inline-block; + border-radius: 100%; + background-color: #fff; +} +.ul-element-fixed-option .item .title { + margin-top: 6px; + background-color: #fff; + color: #666; + padding: 3px; + border-radius: 3px; + font-size: 12px; +} + +.ul-loading-pos { + background-color: #eee; + color: #999; + display: inline-block; +} +.ul-loading-pos .main { + padding: 15px; +} +.ul-loading-pos.lg .main { + padding: 25px 35px; +} +.ul-loading-pos.screen { + width: 100%; +} +.ul-loading-pos.screen .main { + padding: 60px 0; + text-align: center; +} + +.ul-card-list { + display: flex; + flex-wrap: wrap; +} + +.ul-card-list .ul-card { + margin-right: 15px; +} + +.ul-card-list .layui-card:last-child { + margin-bottom: 15px; +} + +.ul-header-shape { + display: flex; + align-items: center; + justify-content: space-between; + background: linear-gradient(rgb(0, 197, 254), rgb(2, 158, 245)); + color: #fff; + padding: 10px 10px 25px 10px; + --aug-bl-inset2: 20% !important; + --aug-bl-inset1: 0px !important; + --aug-bl: 15px !important; + --aug-br-inset1: 20% !important; + --aug-br-inset2: 0px !important; + --aug-br: 15px !important; +} +.ul-header-shape > div { + flex: 1; +} +.ul-header-shape .main { + flex: 2; + margin-bottom: -55px; + font-size: 24px; + text-align: center; +} +.ul-header-shape .left .logo { + height: 50px; +} +.ul-header-shape .right { + display: flex; + align-items: center; + justify-content: flex-end; + height: 100%; +} +.ul-header-shape .right .list-item { + display: flex; + align-items: center; + justify-content: flex-end; +} +.ul-header-shape .right .list-item .item { + margin-left: 18px; + cursor: pointer; + color: #fff; +} + +.ul-shop-header { + padding: 15px; +} +.ul-shop-header__main { + display: flex; + align-items: center; + justify-content: flex-start; + position: relative; +} +.ul-shop-header__logo { + width: 80px; + height: 80px; +} +.ul-shop-header__info { + margin-left: 15px; +} +.ul-shop-header__info__name { + line-height: 30px; + font-size: 16px; + font-weight: 600; +} +.ul-shop-header__info__tag { + display: flex; + margin-top: 5px; +} +.ul-shop-header__info__tag__item { + vertical-align: middle; + margin-right: 10px; + color: #bbb; + font-size: 14px; +} +.ul-shop-header__right { + position: absolute; + right: 0; + top: 0; + height: 100%; + display: flex; + align-items: center; +} +.ul-shop-header__footer { + border-top: 1px solid #eee; + margin-top: 10px; + padding-top: 10px; + display: flex; + align-items: flex-start; + justify-content: flex-start; + font-size: 14px; + color: #999; +} +.ul-shop-header__footer__item { + margin-right: 15px; +} +.ul-shop-header__footer__item__icon { + color: #333; + margin-right: 3px; +} + +.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: 72%; + height: 170px; +} + +.ul-ad-img { + height: 100%; + width: 100%; + background-size: cover; + background-position: center; +} + +.ul-ad-right { + width: 25%; +} + +.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; +} + +.ul-avatar-list { + /* 用户头像开始 */ +} +.ul-avatar-list .ul-avatar-list-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px; + background-color: rgb(229, 228, 228); +} +.ul-avatar-list .ul-avatar-list-item.current { + background-color: rgb(216, 215, 215); +} +.ul-avatar-list .ul-avatar-list-item-img { + height: 48px; + width: 48px; + background-image: url("/static/images/avatar.png"); + background-size: cover; + background-position: center; + border-radius: 3px; + background-color: #fff; +} +.ul-avatar-list .ul-avatar-list-item-info { + margin-left: 10px; + position: relative; + width: calc(100% - 48px - 10px); +} +.ul-avatar-list .ul-avatar-list-item-time { + position: absolute; + right: 0; + top: 0; + color: rgb(187, 187, 187); +} +.ul-avatar-list .ul-avatar-list-item-tips { + color: rgb(187, 187, 187); + font-size: 14px; + display: inline-block; + white-space: nowrap; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.ul-avatar-sidebar-list .ul-avatar-sidebar-list-item { + display: flex; + align-items: center; + justify-content: flex-start; + margin-bottom: 12px; +} +.ul-avatar-sidebar-list .ul-avatar-sidebar-list-item:not(:last-child) { + margin-bottom: 12px; +} +.ul-avatar-sidebar-list .ul-avatar-sidebar-list-item-img { + width: 58px; + height: 58px; + border-radius: 58px; + background-image: url("/static/images/avatar.png"); + background-size: cover; + background-position: center; + flex-shrink: 0; +} +.ul-avatar-sidebar-list .ul-avatar-sidebar-list-item-title, +.ul-avatar-sidebar-list .ul-avatar-sidebar-list-item-intro { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +.ul-avatar-sidebar-list .ul-avatar-sidebar-list-item-info { + margin-left: 10px; + width: calc(100% - 58px - 10px); +} +.ul-avatar-sidebar-list .ul-avatar-sidebar-list-item-intro { + font-size: 12px; + color: #999; + line-height: 2; +} + +.ul-book-list { + display: flex; + align-items: flex-start; + justify-content: flex-start; + flex-wrap: wrap; +} + +.ul-book-item { + width: 140px; + display: flex; + align-items: flex-start; + justify-content: space-between; + margin-bottom: 15px; + margin-right: 15px; + cursor: pointer; + border: 1px solid transparent; +} + +.ul-book-item:hover { + border-color: #ddd; +} + +.ul-book-poster { + background-image: url(../img/book-bg.png); + background-size: cover; + background-position: center; + width: 60px; + height: 80px; + /* margin-right : 15px; */ +} + +.ul-book-info { + position: relative; + height: 80px; + width: 75px; +} + +.ul-book-title { + font-size: 16px; + color: #3e3a39; + margin-bottom: 6px; + font-weight: 600; + line-height: 1.5; + word-break: break-all; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; +} + +.ul-book-author { + font-size: 12px; + color: #3e3a39; + word-break: break-all; +} + +.ul-book-status { + font-size: 12px; + color: #99999a; + position: absolute; + bottom: 0; + left: 0; +} + +.ul-book-list.big .ul-book-item { + width: 240px; +} + +.ul-book-list.big .ul-book-poster { + width: 120px; + height: 160px; +} + +.ul-book-list.big .ul-book-info { + height: 160px; + width: 110px; +} + +.ul-course-list { + margin: -10px; + font-size: 0; + display: flex; + flex-wrap: wrap; +} + +.ul-course-item { + display: inline-block; + margin: 10px; + width: calc(25% - 20px); + background-color: #fff; + padding-bottom: 12px; + cursor: pointer; + font-size: 14px; +} + +.ul-course-item-poster { + background-position: center; + background-size: cover; + height: 140px; + transition: all 0.6s; + position: relative; +} + +.ul-course-item-tag { + position: absolute; + right: 8px; + top: 8px; + z-index: 9999; +} + +.ul-course-item-info { + padding: 6px; +} + +.ul-course-item-title { + padding: 8px 0; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.ul-course-item-option-item { + display: inline-block; + margin-right: 8px; + font-size: 12px; + color: #999; +} + +.ul-course-item-poster:hover { + transform: scale(1.2); +} + +.ul-course-item-poster-container:hover .ul-course-item-tag { + display: none; +} + +.ul-course-item-poster-container { + overflow: hidden; + position: relative; +} + +.ul-course-sidebar-item { + display: flex; + padding: 8px 0; + align-items: center; + justify-content: flex-start; +} + +.ul-course-sidebar-item:not(:last-child) { + border-bottom: 1px dotted #999; +} + +.ul-course-sidebar-item-poster { + height: 50px; + width: 80px; + background-size: cover; + background-position: center; +} + +.ul-course-sidebar-item-option-item { + display: inline-block; + font-size: 12px; + color: #999; +} + +.ul-course-sidebar-item-info { + margin-left: 8px; +} + +.ul-course-sidebar-item-title { + line-height: 2; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.ul-list-record .item-record { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #fff; + box-shadow: 0px 0px 4px rgba(77, 85, 114, 0.1); + padding: 12px; + margin-bottom: 9px; + border-radius: 12px; +} +.ul-list-record .item-record .right { + text-align: right; +} +.ul-list-record .item-record .item-name { + font-size: 14px; +} +.ul-list-record .item-record .item-desc { + font-size: 12px; + color: #999; + margin-top: 6px; +} +.ul-list-record .item-record .item-change { + font-weight: 600; + color: green; +} +.ul-list-record .item-record .item-change.status-2 { + color: orangered; +} + +.ul-list-user-info .item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 9px; + background-color: #fff; +} +.ul-list-user-info .item:not(:last-child) { + border-bottom: 1px solid #eee; +} +.ul-list-user-info .item .info { + display: flex; + align-items: center; + justify-content: flex-start; + flex-shrink: 1; +} +.ul-list-user-info .item .info .avatar { + flex-shrink: 0; +} +.ul-list-user-info .item .info .main { + margin-left: 9px; +} +.ul-list-user-info .item .info .main .header { + display: flex; + align-items: center; + margin-bottom: 8px; +} +.ul-list-user-info .item .info .main .header .name { + font-size: 14px; + font-weight: 500; + margin-right: 6px; +} +.ul-list-user-info .item .info .main .content { + display: flex; + flex-wrap: wrap; + margin-bottom: 6px; +} +.ul-list-user-info .item .info .main .footer { + display: flex; + align-items: flex-end; +} +.ul-list-user-info .tag-item { + font-size: 10px; + background-color: #c6e6fe; + color: #0091ff; + padding: 2px 4px; + border-radius: 3px 3px 3px 0; + margin-right: 6px; + white-space: nowrap; +} +.ul-list-user-info .info-item { + color: #999; + margin-right: 6px; + font-size: 12px; +} +.ul-list-user-info .title-item { + font-size: 14px; + font-weight: 500; + margin-right: 6px; +} +.ul-list-user-info .text-item { + color: #1E9FFF; + margin-right: 6px; + font-size: 12px; + line-height: 18px; +} + +.ul-music-list .ul-music-list-item { + display: flex; + align-items: center; + justify-content: left; + padding: 10px; +} +.ul-music-list .ul-music-list-item__image { + width: 50px; + height: 50px; + border-radius: 5px; +} +.ul-music-list .ul-music-list-item__number { + font-size: 16px; + font-weight: bolder; + margin: 12px; +} +.ul-music-list .ul-music-list-item__title { + color: #303133; + font-size: 16px; +} +.ul-music-list .ul-music-list-item__dot { + color: #303133; + font-size: 16px; + margin: 8px; +} +.ul-music-list .ul-music-list-item__author { + color: #999; + font-size: 13px; +} + +.ul-note-item { + display: flex; + justify-content: flex-start; + align-items: flex-start; + cursor: pointer; + padding: 15px; +} + +.ul-note-item.current, +.ul-note-item:hover { + background-color: #dedede; +} + +.ul-note-item .ul-note-item-icon { + margin-right: 10px; +} + +.ul-note-item .ul-note-item-desc { + color: #999; + font-size: 12px; + margin-top: 5px; + word-break: break-all; +} + +.ul-note-item .ul-note-item-time { + color: #bbb; + font-size: 12px; + margin-top: 5px; +} + +.ul-note-item .ul-note-item-tree { + font-size: 12px; + color: #bbb; + margin-top: 5px; +} + +.ul-order-list-simple-card .item { + box-shadow: 0 0 3px #ddd; + border-radius: 2px; + padding: 15px; + margin-bottom: 15px; + background-color: #fff; +} +.ul-order-list-simple-card .item-header { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 13px; + margin-bottom: 5px; +} +.ul-order-list-simple-card .item-header .item-header-status { + color: #1E9FFF; +} +.ul-order-list-simple-card .item-body { + margin-top: 10px; + padding-bottom: 10px; +} +.ul-order-list-simple-card .item-body .item-body-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px 0; +} +.ul-order-list-simple-card .item-body .item-body-item .item-image { + width: 90px; + height: 90px; + background-size: cover; + background-position: center; + box-shadow: 0 0 2px #999; +} +.ul-order-list-simple-card .item-body .item-body-item .item-info { + width: calc(100% - 90px - 15px); + margin-left: 15px; + height: 90px; + position: relative; +} +.ul-order-list-simple-card .item-body .item-body-item .item-info .ul-info-title { + font-weight: 500; + font-size: 15px; + margin-bottom: 5px; + text-overflow: -o-ellipsis-lastline; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} +.ul-order-list-simple-card .item-body .item-body-item .item-info .ul-info-value { + display: flex; + align-items: center; + justify-content: space-between; + color: #999; + font-size: 14px; +} +.ul-order-list-simple-card .item-body .item-body-item .item-info .ul-info-money { + position: absolute; + bottom: 0; + left: 0; + font-size: 15px; + font-weight: 600; +} +.ul-order-list-simple-card .item-footer { + padding-top: 15px; + margin-top: 5px; + border-top: 1px solid #eee; + display: flex; + align-items: center; + justify-content: space-between; +} + +.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-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-list-b { + display: flex; + align-items: flex-start; + justify-content: flex-start; + flex-wrap: wrap; +} +.ul-photo-list-b .ul-photo-item { + margin: 15px; + text-align: left; + width: 200px; +} +.ul-photo-list-b .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-list-b .ul-photo-info { + margin-top: 10px; + font-size: 18px; + line-height: 1.5; +} + +.ul-post-block-list { + display: flex; + align-items: flex-start; + justify-content: flex-start; + flex-wrap: wrap; + margin: -8px; +} +.ul-post-block-list .ul-post-block-item { + margin: 8px; + width: calc(33.3333333333% - 16px); + align-self: normal; +} +.ul-post-block-list .ul-post-block-item:hover { + background-color: #efefef; +} +.ul-post-block-list .ul-post-block-item .poster { + width: 100%; + height: 120px; +} +.ul-post-block-list .ul-post-block-item .title { + font-size: 14px; + font-weight: 600; + line-height: 20px; + color: #333; + margin: 6px; +} +.ul-post-block-list .ul-post-block-item .desc { + margin: 6px; + font-size: 12px; + line-height: 20px; + color: #999; +} +.ul-post-block-list.fixed-height .ul-post-block-item .title { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; +} +.ul-post-block-list.fixed-height .ul-post-block-item .desc { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; +} + +.ul-post-list .ul-post-item { + display: flex; + align-items: stretch; + justify-content: flex-start; + margin-top: 12px; + padding-bottom: 12px; + border-bottom: 1px solid #bbb; + position: relative; +} +.ul-post-list .ul-post-item .poster { + height: 120px; + width: 240px; + margin-right: 12px; +} +.ul-post-list .ul-post-item .main { + width: 100%; +} +.ul-post-list .ul-post-item .main .info { + padding-bottom: 28px; +} +.ul-post-list .ul-post-item .main .info .title { + font-size: 14px; + font-weight: 600; +} +.ul-post-list .ul-post-item .main .info .desc { + font-size: 12px; + color: #999; + margin-top: 4px; +} +.ul-post-list .ul-post-item .options { + display: flex; + align-items: center; + justify-content: flex-end; + position: absolute; + bottom: 12px; + right: 0; +} +.ul-post-list .ul-post-item .options .item { + margin-left: 12px; +} + +.ul-site-group { + margin-bottom: 8px; +} + +.ul-site-group-header { + font-size: 16px; + color: #333; + padding-bottom: 8px; +} + +.ul-site-list { + display: flex; + align-items: flex-start; + justify-content: flex-start; + flex-wrap: wrap; + margin-top: 8px; +} + +.ul-site-item { + width: 20%; + margin-right: 5%; + display: flex; + align-items: flex-start; + justify-content: flex-start; + margin-bottom: 15px; +} +.ul-site-item.card { + background-color: #fff; + border-radius: 5px; + padding: 10px; + margin-right: 15px; +} +.ul-site-item.same-height { + align-self: normal; +} + +.ul-site-item-logo { + width: 34px; + height: 34px; + margin-right: 8px; + margin-top: 4px; + background-size: cover; + background-position: center; +} + +.ul-site-item-info { + width: calc(100% - 34px); +} + +.ul-site-item-title { + color: #4662d9; + font-weight: bold; + text-decoration: none; +} + +.ul-site-item-desc { + font-size: 12px; + color: #666; +} + +@media screen and (max-width: 450px) { + .ul-site-list { + display: flex; + align-items: flex-start; + justify-content: space-between; + } + .ul-site-list .ul-site-item { + width: calc(50% - 10px); + margin-right: 0; + } + .ul-site-list .ul-site-item.card { + width: calc(50% - 30px); + } + .ul-site-list .ul-site-item-desc { + font-size: 11px; + margin-top: 3px; + } +} +.ul-logo { + background-color: #1E9FFF; + border-radius: 13.3333333333px; + display: flex; + align-items: center; + justify-content: center; + width: 80px; + height: 80px; + text-align: center; + color: #fff; + white-space: nowrap; +} +.ul-logo .title { + font-size: 40px; +} +.ul-logo .plus { + font-size: clac(20px); +} + +.ul-nav-block { + border-radius: 16px; + overflow: hidden; + background-color: #fff; + color: #333; +} +.ul-nav-block .item { + padding: 16px 32px; + display: flex; + align-items: center; + justify-content: flex-start; + cursor: pointer; +} +.ul-nav-block .item .item-icon { + margin-right: 16px; +} +.ul-nav-block .item.current { + background-color: rgb(255, 91, 114); + color: #fff; +} +.ul-nav-block .item:hover { + background-color: rgba(255, 91, 113, 0.772); + color: #fff; +} + +.ul-nav-grid { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: flex-start; +} +.ul-nav-grid .item { + flex: 0 0 33.3333333333%; + text-align: center; + margin-bottom: 12px; +} +.ul-nav-grid .item .icon { + text-align: center; +} +.ul-nav-grid .item .main { + padding: 6px; + display: flex; + align-items: center; + justify-content: center; + width: -moz-fit-content; + width: fit-content; + margin: 0 auto; +} +.ul-nav-grid.colord .item.red .icon { + color: #FF6961; +} +.ul-nav-grid.colord .item.orange .icon { + color: #FFA07A; +} +.ul-nav-grid.colord .item.yellow .icon { + color: #FF69B4; +} +.ul-nav-grid.colord .item.green .icon { + color: #2ECC71; +} +.ul-nav-grid.colord .item.bluegreen .icon { + color: #1ABC9C; +} +.ul-nav-grid.colord .item.blue .icon { + color: #3498DB; +} +.ul-nav-grid.colord .item.purple .icon { + color: #AF7AC5; +} +.ul-nav-grid.colord-bg .item.red .icon { + color: #fff; +} +.ul-nav-grid.colord-bg .item.red .icon .main { + background-color: #FF6961; + border-radius: 50%; +} +.ul-nav-grid.colord-bg .item.orange .icon { + color: #fff; +} +.ul-nav-grid.colord-bg .item.orange .icon .main { + background-color: #FFA07A; + border-radius: 50%; +} +.ul-nav-grid.colord-bg .item.yellow .icon { + color: #fff; +} +.ul-nav-grid.colord-bg .item.yellow .icon .main { + background-color: #FF69B4; + border-radius: 50%; +} +.ul-nav-grid.colord-bg .item.green .icon { + color: #fff; +} +.ul-nav-grid.colord-bg .item.green .icon .main { + background-color: #2ECC71; + border-radius: 50%; +} +.ul-nav-grid.colord-bg .item.bluegreen .icon { + color: #fff; +} +.ul-nav-grid.colord-bg .item.bluegreen .icon .main { + background-color: #1ABC9C; + border-radius: 50%; +} +.ul-nav-grid.colord-bg .item.blue .icon { + color: #fff; +} +.ul-nav-grid.colord-bg .item.blue .icon .main { + background-color: #3498DB; + border-radius: 50%; +} +.ul-nav-grid.colord-bg .item.purple .icon { + color: #fff; +} +.ul-nav-grid.colord-bg .item.purple .icon .main { + background-color: #AF7AC5; + border-radius: 50%; +} +.ul-nav-grid.box { + background-color: #eee; + padding: 0.5px; +} +.ul-nav-grid.box .item { + flex: 0 0 calc(33.3333333333% - 1px - 24px); + margin: 0.5px; + background-color: #fff; + padding: 12px; +} + +.ul-nav-info__item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 15px; +} +.ul-nav-info__item__main__info { + display: flex; + align-items: center; + justify-content: flex-start; +} +.ul-nav-info__item__main__icon { + margin-right: 10px; +} +.ul-nav-info__item__main__title { + font-size: 15px; + font-weight: 400; +} +.ul-nav-info__item__main__content { + margin-top: 10px; + color: #bbb; + font-size: 14px; +} +.ul-nav-info__item__right { + display: flex; + align-items: center; + justify-content: flex-end; + color: #bbb; +} +.ul-nav-info__item__right__item { + margin-left: 5px; +} +.ul-nav-info__item:not(:last-child) { + border-bottom: 1px solid #eee; +} + +.ul-nav-tree-2 .ul-nav-tree-2-group-title { + font-size: 14px; + padding: 6px 0; + color: #253647; + font-weight: 600; + word-wrap: anywhere; + display: block; +} +.ul-nav-tree-2 .ul-nav-tree-2-item { + cursor: pointer; +} +.ul-nav-tree-2 .ul-nav-tree-2-item.current .ul-nav-tree-2-item-title, .ul-nav-tree-2 .ul-nav-tree-2-item:hover .ul-nav-tree-2-item-title { + color: #6cf; + text-decoration: underline; +} +.ul-nav-tree-2 .ul-nav-tree-2-item-title { + font-size: 14px; + color: #999; + padding-left: 15px; + line-height: 24px; + word-wrap: anywhere; +} + +.ul-title { + text-align: center; + line-height: 1.5; +} + +.ul-title-main { + font-size: 16px; +} + +.ul-title-plus { + color: #999; +} + +.ul-title-line { + border-top: 2px solid #666; + margin-top: 8px; +} + +/* 链接导航开始 */ +.ul-link-select { + display: flex; + align-items: flex-start; + justify-content: flex-start; +} + +.ul-link-title { + margin-right: 15px; + white-space: nowrap; +} + +.ul-link-list { + display: flex; + align-items: flex-start; + justify-content: flex-start; + flex-wrap: wrap; +} + +.ul-link-item { + padding: 0px 10px; + cursor: pointer; + margin-right: 10px; + margin-bottom: 5px; +} + +.ul-link-item.current { + border-radius: 15px; + border: 1px solid #6cf; + color: #6cf; +} + +/* 链接导航结束 */ +.ul-info-tips { + padding: 15px; + background-color: rgba(255, 255, 255, 0.6); +} + +.ul-card-status { + padding: 5px; + border-radius: 5px; +} + +.ul-card-options { + float: right; + cursor: pointer; +} + +.data-img .data-img-main { + max-width: 120px; + margin: 5px; +} + +.data-img { + display: block; +} + +.ul-message-item { + margin-bottom: 15px; + display: flex; + justify-content: flex-start; + align-items: flex-start; + padding: 15px; +} + +.ul-message-item-left { + width: 120px; +} + +.ul-message-item-right { + width: calc(100% - 120px); +} + +.ul-message-item-info { + position: relative; +} + +.ul-message-item-options { + position: absolute; + right: 0; + top: 0; +} + +.ul-message-item-avatar { + background-size: cover; + background-position: center; + width: 100px; + height: 100px; + border-radius: 50%; +} + +.ul-message-item-name { + display: flex; + color: #6cf; + font-size: 16px; +} + +.ul-message-item-data { + display: flex; + font-size: 14px; + color: #999; + margin-top: 10px; +} + +.ul-message-item-content { + background-color: #f0f0f0; + padding: 15px; + margin-top: 10px; +} + +.ul-message-item-img-list { + margin-top: 10px; +} + +.ul-message-item-img { + width: 160px; + height: 120px; + background-size: cover; + background-position: center; + margin-right: 10px; + display: inline-block; +} + +.ul-nav-easy { + background-color: transparent; +} + +.layui-nav-tree.ul-nav-easy .layui-nav-item > a { + color: #666; +} + +.layui-nav-tree.ul-nav-easy .layui-this { + background-color: transparent; +} + +.layui-nav-tree.ul-nav-easy .layui-this > a { + 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; +} + +.layui-nav-tree.ul-nav-easy .layui-nav-item a { + height: 45px; + line-height: 45px; +} + +.search-item { + 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-group-title { + color: #999; + border-bottom: 1px solid #bbb; + padding: 5px 0; + margin-bottom: 15px; +} + +.ul-tree-item { + background-color: #fbfbfb; + cursor: pointer; +} + +.ul-tree-item.disabled, +.ul-tree-item.disabled .ul-tree-item { + background-color: #eee; + cursor: not-allowed; +} + +.ul-tree-item-info { + border-left: 3px solid transparent; + padding: 0px 0; + position: relative; + min-height: 35px; + line-height: 35px; +} + +.ul-tree-item-info.current { + background-color: #9cf; + border-color: #6699cc; +} + +.ul-tree-item-info:hover { + background-color: rgb(190, 222, 255); + border-color: #6699cc; +} + +.ul-tree-item-title { + margin-left: 25px; +} + +.ul-tree-item-icon { + position: absolute; + left: 5px; + top: 0; +} + +.ul-tree-item-info:hover .ul-tree-item-options-item { + display: block; +} + +.ul-tree-item-options { + position: absolute; + right: 15px; + top: 0; + height: 100%; + display: flex; + align-items: center; +} + +.ul-tree-item-options-item { + margin-left: 10px; + display: none; + height: 100%; + line-height: 35px; +} + +.ul-input-table { + text-align: center; +} + +.ul-input-table tbody td, +.ul-input-table tbody th { + padding: 2px 4px; +} + +.ul-input-table .layui-form-checkbox[lay-skin=primary] { + margin-top: 0px; +} + +.ul-input-table .layui-form-select dl dd { + text-align: left; +} + +.ul-nav-min { + box-shadow: 2px 2px 5px #999; + padding: 5px; + text-align: center; +} + +.ul-nav-min .ul-nav-min-item { + padding: 5px 0; + cursor: pointer; + color: #333; + display: block; +} + +.ul-nav-min-item:hover { + color: #6cf; +} + +.ul-header-a { + background-color: #f8f8f8; + border-bottom: 1px solid #e8e8e8; + color: #666; +} + +.ul-header-a-main { + display: flex; + align-items: center; + justify-content: space-between; + /* border-width: 1px 0; + 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; +} + +.ul-header-a-nav-item:hover .ul-header-a-nav-plus { + display: block; +} + +.ul-header-a-img { + height: 24px; + width: 24px; + background-size: cover; + background-position: center; + margin-right: 10px; +} + +.ul-header-a-right { + display: flex; + align-items: center; +} + +.ul-header-a-nav-plus { + position: absolute; + top: 100%; + left: 50%; + display: none; + background-color: transparent; + z-index: 99999; +} + +.ul-header-a-nav-plus > .ul-nav-min { + background-color: #fff; + margin-top: 15px; +} + +.ul-nav-header-main { + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px 15px; + margin: 0 auto; +} + +.ul-nav-header-right { + text-align: right; +} + +.ul-nav-header-item { + display: inline-block; + margin-right: 15px; + cursor: pointer; + padding: 5px 15px; + color: #333; +} + +.ul-nav-header-item:hover { + color: #6cf; +} + +.ul-nav-header-red { + background-color: #f72222; +} + +.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; +} + +.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; + 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; + position: relative; +} + +.ul-card-a-left { + width: 40%; +} + +.ul-card-a-right { + display: flex; + align-items: center; + text-align: center; + width: 50%; +} + +.ul-card-a-title { + font-size: 18px; +} + +.ul-card-a-desc { + margin-top: 5px; + font-size: 14px; + white-space: nowrap; +} + +.ul-nav-poster { + padding: 5px; + border: 1px solid #ddd; + border-top-width: 3px; +} + +.ul-nav-poster-item { + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; +} + +.ul-nav-poster-left { + display: flex; + align-items: center; +} + +.ul-nav-post-title { + color: #333; + font-weight: bold; +} + +.ul-nav-poster-desc { + color: #999; + font-size: 12px; + font-weight: 100; +} + +.ul-nav-poster-img { + 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-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-nav-card-item { + padding: 0 15px; + border: 1px solid #ddd; + border-radius: 6px; + height: 82px; + margin-bottom: 10px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.ul-nav-card-item-left { + display: flex; + align-items: center; + justify-content: flex-start; +} + +.ul-nav-card-item-icon { + font-size: 28px; + width: 50px; + height: 50px; + border-radius: 5px; + line-height: 50px; + text-align: center; + background: #2E4158; + display: inline-block; + color: #fff; + vertical-align: bottom; +} + +.ul-nav-card-item-info { + margin-left: 10px; +} + +.ul-nav-card-item-title { + font-size: 14px; + color: #253647; + font-weight: 700; + margin-bottom: 4px; +} + +.ul-nav-card-item-desc { + color: #666; + font-size: 12px; +} + +.ul-nav-card-item.disabled .ul-nav-card-item-icon { + background-color: #908b8b; +} + +.ul-doc-info-page-list { + padding: 15px; + color: #999; +} + +.ul-doc-info-page-item { + line-height: 2; + padding: 0 15px; + position: relative; +} + +.ul-doc-info-page-item.page { + cursor: pointer; + font-size: 18px; +} + +.ul-doc-info-page-item.group { + color: #bbb; + font-size: 16px; +} + +.ul-doc-info-page-item.point { + color: #eee; + font-size: 14px; +} + +.ul-doc-info-page-item.page:hover { + background-color: #555; +} + +.ul-doc-info-page-item.level-1 { + margin-left: 15px; +} + +.ul-doc-info-page-item.level-2 { + margin-left: 30px; +} + +.ul-doc-info-page-item.level-3 { + margin-left: 45px; +} + +.ul-nav-button-item { + display: flex; + align-items: center; + justify-content: flex-start; + margin-bottom: 10px; + border-radius: 8px; + padding: 10px; + box-shadow: 0px 1px 3px #bbb; + background-color: #fff; + cursor: pointer; +} + +.ul-nav-button-icon { + margin-right: 10px; +} + +.ul-nav-button-icon .icon { + font-size: 38px; + color: #999; +} + +.ul-nav-button-title { + color: #333; + font-size: 16px; + font-weight: 600; +} + +.ul-nav-button-desc { + color: #666; + font-size: 14px; +} + +.ul-timeline-rowstyle { + display: flex; + flex-wrap: nowrap; + overflow-x: auto; + width: 100%; +} + +.ul-timeline-rowstyle .layui-timeline-item { + margin-right: 15px; + min-width: 300px; +} + +.ul-timeline-rowstyle .layui-timeline-item:last-child::before { + display: block; +} \ No newline at end of file diff --git a/source/scss/layui-ul.scss b/source/scss/layui-ul.scss index 7b36c4f..fe1ffed 100644 --- a/source/scss/layui-ul.scss +++ b/source/scss/layui-ul.scss @@ -73,24 +73,6 @@ display: block; } -.ul-title { - text-align : center; - line-height: 1.5; -} - -.ul-title-main { - font-size: 16px; -} - -.ul-title-plus { - color: #999; -} - -.ul-title-line { - border-top: 2px solid #666; - margin-top: 8px; -} - .ul-message-list {} .ul-message-item {