ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-01 10:32:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增凸出造型头部

Browse Source
This commit is contained in:
augushong
2023-04-18 15:09:20 +08:00
parent f4c61d883d
commit 6237ed07c4
8 changed files with 135 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1121,6 +1121,48 @@
text-align: center;
}
.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;
}
.ul-shop-header {
padding: 15px;
}

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

File diff suppressed because one or more lines are too long

1
source/components/_index.scss
View File

@@ -6,6 +6,7 @@
@import './descriptions/ul-descriptions-info/index';
@import './descriptions/ul-easy-item/index';
@import './element/ul-loading-pos/index';
@import './header/ul-header-shape/index';
@import './header/ul-shop-header/index';
@import './list/ul-avatar-list/index';
@import './list/ul-avatar-sidebar-list/index';

6
source/components/header/ul-header-shape/_index.env Normal file
View File

@@ -0,0 +1,6 @@
title=凸出造型头部
padding=0
margin=0
gray=0
mobile=0
inner_margin=0

24
source/components/header/ul-header-shape/_index.html Normal file
View File

@@ -0,0 +1,24 @@
<div class="ul-header-shape" data-augmented-ui="br-clip-x bl-clip-x">
<div class="left">
<img class="logo" src="/static/images/ulthon_logo_108.png">
</div>
<div class="main">
ulthon_admin-奥宏快速开发后台
</div>
<div class="right">
<div class="list-item">
<div class="item">
<i class="layui-icon layui-icon-home"></i>
</div>
<div class="item">
<img src="/static/images/avatar.png" style="height: 30px;width: 30px;margin-right: 8px;">
<span>奥古斯宏</span>
</div>
<div class="item">
<i class="layui-icon layui-icon-logout"></i>
</div>
</div>
</div>
</div>

2
source/components/header/ul-header-shape/_index.md Normal file
View File

@@ -0,0 +1,2 @@
> 注意，当前组件用到了augmented-ui。

5
source/components/header/ul-header-shape/_index.php Normal file
View File

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

54
source/components/header/ul-header-shape/_index.scss Normal file
View File

@@ -0,0 +1,54 @@
.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;
&>div {
flex: 1;
}
.main {
flex: 2;
margin-bottom: -55px;
font-size: 24px;
text-align: center;
}
.left {
.logo {
height: 50px;
}
}
.right {
display: flex;
align-items: center;
justify-content: flex-end;
height: 100%;
.list-item {
display: flex;
align-items: center;
justify-content: flex-end;
.item {
margin-left: 18px;
cursor: pointer;
}
}
}
}