效果图

采用flex布局
<div class="page">
<div class="bg-box">
<img src="../../assets/img/pic_home@2x.png" alt="">
<div class="userInfo-box">
<span>何露露</span>
<span>管理员</span>
</div>
<div class="setup-btn">
<img src="../../assets/img/ic/setting_white_home@2x.png" alt="">
</div>
</div>
<div class="icon-box">
</div>
</div>
<style lang="less">
.bg-box{
margin-bottom: 10px;
position: relative; //令设置按钮右对齐
display: flex;
align-items:center; //垂直居中
height: 125px;
line-height: 125px;
width: auto;
background-image: linear-gradient(-136deg, #35A6F7 0%, #1875ED 100%);
img:first-child{
margin-left: 15px;
width: 65px;
height: 65px;
}
.setup-btn{
position: absolute; //令设置按钮右对齐
right: 15px;
height: 100%;
img{
width: 24px;
height: 24px;
}
}
.userInfo-box{
margin-left: 12px;
display: flex;
flex-direction: column;
justify-content: center; //水平居中
height: 125px;
span{
color: rgba(255,255,255,0.87);
height: 20px; //关键处-元素水平居中
line-height: 20px; //关键处-元素水平居中
font-size: 12px;
}
span:first-child{
font-size: 18px;
}
span:last-child{
margin-top:5px;
}
}
}
.icon-box{
height: 250px;
border: 1px solid red;
}
</style>