<template>
<view class="headbox">
<image class="bankicon" src="@/static/image/head/bankicon.png" @click="bank()" mode=""></image>
<text class="titlecls">{{ title }}</text>
<text></text>
</view>
</template>
<script>
export default {
props: ['title'],// 接收传入的标题数据
methods: {
// 返回
bank() {
uni.navigateBack({
delta: 1 //返回上一页
});
}
}
}
</script>
<style scoped lang="scss">
.headbox {
width: 100%;
height: 166rpx;
background-image: url(@/static/image/head/headbg.png);
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
.bankicon {
width: 80rpx;
height: 88rpx;
margin-top: 70rpx;
}
.titlecls {
font-size: 34rpx;
color: #fff;
font-weight: bold;
margin-top: 70rpx;
margin-left: -7%;
}
}
</style>
在main.js里引入
import Header from '@/components/head/index.vue'; // 引入Header组件
Vue.component('Header',Header)
在页面直接使用
<Header title="实时数据"></Header>