You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/components/UiPageHeader.vue

62 lines
1.1 KiB

<!--
* @Author: ch
* @Date: 2022-03-25 10:11:37
* @LastEditors: ch
* @LastEditTime: 2022-04-22 14:16:14
* @Description: file content
-->
<template>
<view class="header">
<image class="header--back" v-if="back" src="@/static/common/back.png" @click="$Router.back()"></image>
<slot name="custom">
<text class="header--title">{{title}}</text>
<view class="header--operation">
<slot name="operation"></slot>
</view>
</slot>
</view>
</template>
<script>
export default {
props : {
title : {
type : String,
default : ''
},
back : {
type : Boolean,
default : true
}
}
}
</script>
<style lang="scss" scoped>
.header{
height: 88rpx;
padding: 0 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
background: $color-grey1;
position: sticky;
top: var(--window-top);
z-index: 999;
&--back{
width: 14rpx;
height: 28rpx;
margin-right: 20rpx;
}
&--title{
flex: 1;
text-align: center;
font-size: 36rpx;
font-weight: bold;
}
&--operation{
position: absolute;
right: 40rpx;
top: 0;
}
}
</style>