<template>
<div class="header">
<span class="icon"></span>
<h1 class="text">hahahfds</h1>
</div>
</template>
<script>
export default {
name: 'm-header'
}
</script>
<style lang="scss" scoped>
.header {
height: 44px;
text-align: center;
// color: $color-theme;
// color:black;
background-color: black;
font-size: 0;
.icon {
display: inline-block;
vertical-align: top;
margin-top: 6px;
width: 30px;
height: 32px;
margin-right: 9px;
background-image: url(https://img-blog.csdnimg.cn/a0d98281da88480aa8be2e0dbda23fd6.jpg);
background-size: 30px 32px;
}
.text {
display: inline-block;
vertical-align: top;
line-height: 44px;
color: aqua;
font-size: 9px;
}
}
</style>
flex布局
<template>
<div class="header">
<img
class="img"
src="https://img-blog.csdnimg.cn/a0d98281da88480aa8be2e0dbda23fd6.jpg"
/>
<h1 class="text">chicken</h1>
</div>
</template>
<script>
export default {
name: "m-header",
};
</script>
<style lang="scss" scoped>
.header {
width: 100%;
height: 40px;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
.img {
// display: inline-block;
height: 30px;
width: auto;
margin-right: 6px;
}
.text {
// display: inline-block;
font-size: 10px;
}
}
</style>