<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>文章來源地址http://www.zghlxwxcb.cn/news/detail-686751.html
文章來源：http://www.zghlxwxcb.cn/news/detail-686751.html
到了這里，關(guān)于H5頁面中的自定義頁面導(dǎo)航頭部組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
