|
|
@@ -0,0 +1,113 @@
|
|
|
+<template>
|
|
|
+ <view class="custom-navbar" :style="{ '--top-inset': topInset + 'px' }">
|
|
|
+ <view class="navbar-content">
|
|
|
+ <view class="navbar-left" v-if="showBack" @click="handleBack">
|
|
|
+ <text class="back-icon">‹</text>
|
|
|
+ </view>
|
|
|
+ <text class="navbar-title">{{ title }}</text>
|
|
|
+ <view class="navbar-right"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'CustomNavBar',
|
|
|
+ props: {
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ default: '量化交易大师'
|
|
|
+ },
|
|
|
+ showBack: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ topInset: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created: function() {
|
|
|
+ // #ifdef H5
|
|
|
+ // H5（含微信内置浏览器）优先使用 CSS 的 env(safe-area-inset-top) 处理刘海屏
|
|
|
+ // uni.getSystemInfoSync 在 H5 下返回的 statusBarHeight/safeArea 可能不准确，容易导致顶部叠加出空白
|
|
|
+ this.topInset = 0
|
|
|
+ return
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ var systemInfo = uni.getSystemInfoSync()
|
|
|
+
|
|
|
+ var statusBarHeight = systemInfo.statusBarHeight || 0
|
|
|
+ var safeTop = 0
|
|
|
+ if (systemInfo.safeAreaInsets && systemInfo.safeAreaInsets.top) {
|
|
|
+ safeTop = systemInfo.safeAreaInsets.top
|
|
|
+ } else if (systemInfo.safeArea && systemInfo.safeArea.top) {
|
|
|
+ safeTop = systemInfo.safeArea.top
|
|
|
+ }
|
|
|
+
|
|
|
+ this.topInset = Math.max(statusBarHeight, safeTop, 0)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleBack: function() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1,
|
|
|
+ fail: function() {
|
|
|
+ uni.switchTab({ url: '/pages/index/index' })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.custom-navbar {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 999;
|
|
|
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
|
+ padding-top: calc(var(--top-inset, 0px) + env(safe-area-inset-top));
|
|
|
+ padding-top: calc(var(--top-inset, 0px) + constant(safe-area-inset-top));
|
|
|
+}
|
|
|
+
|
|
|
+.navbar-content {
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.navbar-left {
|
|
|
+ width: 60px;
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.back-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 300;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.navbar-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+
|
|
|
+.navbar-right {
|
|
|
+ width: 60px;
|
|
|
+}
|
|
|
+</style>
|
