<template>
<div class="goBack">
<div class="goBackTop">
<img class="back" @click="goback" src="static/images/my/searchCoin/fan@2x.png" alt="">
<div class="text">
<slot name="header"></slot>
</div>
<div class="jilu" @click="handleList">
<!-- <img class="imgs" src="static/images/my/coinOperate/jilu@2x.png" alt="">
<p class="text">行情</p> -->
<slot name="right"></slot>
</div>
</div>
</div>
</template>
<script>
export default{
methods: {
goback(){
this.$router.go(-1)
},
handleList() {
this.$emit("click")
}
}
}
</script>
<style lang="less" scoped>
.goBack{
.goBackTop{
display: flex;
color: #CFE4F3;
width: 100%;
height: 2.56rem;
line-height: 2.56rem;
background:rgba(6,29,46,1);
padding-left: .8rem;
box-sizing: border-box;
box-shadow:0px 8px 18px 0px rgba(0,13,21,0.54);
.back{
width: .586667rem;
height: .96rem;
margin-top: .8rem;
}
.text{
width: 100%;
flex: 1;
text-align: center;
}
.jilu{
position: absolute;
right: .8rem;
.imgs{
display: inline-block;
width: .64rem;
height: .693333rem;
margin-top: 1.013333rem;
float: left;
}
.text{
display: inline;
padding-left: .266667rem;
font-size: .693333rem;
color: #809AAD;
line-height: 2.56rem;
}
}
}
}
</style>
在组件中引用
<div>
<go-back>
<template v-slot:header>
<span>USDT充值</span>
</template>
<template v-slot:right>
<div @click="handleList">
<img class="imgs" src="static/images/my/coinOperate/jilu@2x.png" alt="">
<p class="text">充币记录</p >
</div>
</template>
</go-back>
</div>
<script>
import goBack "@/components/goBack.vue";//顶部导航
components: {
goBack
}
</script>
效果: