<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>
Custom page navigation header component in H5 page
Guess you like
Origin blog.csdn.net/weixin_53818172/article/details/132610091
Recommended
Ranking