<template>
<div class="head app-cantent">
<div class="head-title">
<img class="back" src="@/assets/img/home/back.png" @click="handleBackData"/>
<div>{{title}}</div>
</div>
</div>
</template>
<script>
export default {
props:{
title: {
type: String,
default: '详情'
},
},
data() {
return {
};
},
mounted() {
},
methods:{
// 返回上一页
handleBackData() {
this.$router.go(-1);
},
}
}
</script>
<style lang="less" scoped>
.head{
.head-title{
position: relative;
display: flex;
padding: 20px;
font-size: 16px;
background: #2892FF;
justify-content: center;
color: #fff;
.title-item{
position: relative;
margin-right: 24px;
color: rgba(255,255,255,0.7);
&:last-child{
margin-right: 0;
}
&.title-show{
font-weight: 600;
color: #fff;
&::before{
position: absolute;
content: '';
left: 50%;
bottom: -40%;
width: 30px;
height: 3px;
transform: translate(-50%,-50%);
background: #fff;
}
}
}
.back{
position: absolute;
left: 3%;
top: 42%;
width: 14px;
height: 10px;
transform:rotate(90deg);
z-index: 3333;
}
}
}
</style>文章来源地址https://www.toymoban.com/news/detail-686751.html
文章来源：https://www.toymoban.com/news/detail-686751.html
到了这里，关于H5页面中的自定义页面导航头部组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
