84 lines
1.3 KiB
Vue
84 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<view class="my-header">
|
||
|
|
<view class="my-icons" @click="goback">
|
||
|
|
<slot></slot>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 标题和右侧内容包裹在一起 -->
|
||
|
|
<view class="title-wrapper">
|
||
|
|
<view class="my-text">{{ titles }}</view>
|
||
|
|
<view class="right-slot">
|
||
|
|
<slot name="right"></slot>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 占位空 view 保持三栏布局 -->
|
||
|
|
<view class="my-icons"></view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
titles: String
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
goback() {
|
||
|
|
uni.navigateBack()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.my-header {
|
||
|
|
width: 100%;
|
||
|
|
height: 200rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
color: #fff;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 0px 15px;
|
||
|
|
padding-top: 40px;
|
||
|
|
z-index: 99999;
|
||
|
|
background: linear-gradient(180deg, #054DF3 0%, #55A3FF 100%);
|
||
|
|
position: fixed;
|
||
|
|
top: 0px;
|
||
|
|
|
||
|
|
.my-icons {
|
||
|
|
width: 40px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-wrapper {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex: 1;
|
||
|
|
|
||
|
|
.my-text {
|
||
|
|
font-weight: bold;
|
||
|
|
margin-right: 8rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right-slot {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|