<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">
<a href="/" class="item"><i class="layui-icon layui-icon-home"></i></a>
<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>
.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;
color: #fff;
}
}
}
}
.ul-header-shape {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(#00c5fe, #029ef5);
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;
}
<view class="ul-header-shape" data-augmented-ui="br-clip-x bl-clip-x">
<view class="left">
<img class="logo" src="/static/images/ulthon_logo_108.png">
</view>
<view class="main">ulthon_admin-奥宏快速开发后台</view>
<view class="right">
<view class="list-item">
<a href="/" class="item"><i class="layui-icon layui-icon-home"></i></a>
<view class="item">
<img src="/static/images/avatar.png" style="height: 30px;width: 30px;margin-right: 8px;">
<span>奥古斯宏</span>
</view>
<view class="item"><i class="layui-icon layui-icon-logout"></i></view>
</view>
</view>
</view>