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.
85 lines
1.6 KiB
85 lines
1.6 KiB
<template>
|
|
<view class="x-navbar">
|
|
<x-status-bar></x-status-bar>
|
|
<view class="x-navbar__content"></view>
|
|
<view class="x-navbar__fixed">
|
|
<x-status-bar></x-status-bar>
|
|
<view class="x-navbar__content">
|
|
<view class="x-navbar__content__left">
|
|
<slot name="left"></slot>
|
|
</view>
|
|
<view class="x-navbar__content__title">
|
|
<slot></slot>
|
|
</view>
|
|
<view class="x-navbar__content__right">
|
|
<slot name="right"></slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const res = uni.getSystemInfoSync()
|
|
const statusBarHeight = ref(res.statusBarHeight)
|
|
const xNavbarStyle = computed(() => {
|
|
return {
|
|
height: statusBarHeight.value
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
$navbar__height: 75rpx;
|
|
$navbar__bg: white;
|
|
$navbar__title__size: 35px;
|
|
$navbar__title__color: deeppink;
|
|
$navbar__title__family: cursive;
|
|
|
|
.x-navbar {
|
|
|
|
.x-status-bar {
|
|
background-color: $navbar__bg;
|
|
}
|
|
|
|
.x-navbar__fixed {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-bottom: 1px solid #eaeaea;
|
|
|
|
}
|
|
|
|
.x-navbar__content {
|
|
height: $navbar__height;
|
|
background-color: $navbar__bg;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.x-navbar__content__title {
|
|
font-size: $navbar__title__size;
|
|
color: $navbar__title__color;
|
|
font-family: $navbar__title__family;
|
|
}
|
|
|
|
&__left {
|
|
position: absolute;
|
|
left: 0;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
&__right {
|
|
position: absolute;
|
|
right: 0;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|