20260929

2026-09-29 15:17:13 +08:00
commit 69e6ed8c59
113 changed files with 36564 additions and 0 deletions
@@ -0,0 +1,122 @@
+<template>
+  <view class="app-navbar" :style="{'padding-top': `${getSafeTop()}px`, 'padding-bottom': '40px'}">
+    <view class="navbar-left" :style="{top: `${getSafeTop()}px`}" v-if="showBack" @click="back">
+      <u-icon name="arrow-left" color="white" size="40rpx" v-if="currentPages.length > 1"/>
+      <u-icon name="home" color="white" size="40rpx" v-else/>
+
+    </view>
+    <text class="navbar-title" :style="{ fontSize: titleSize }">{{ title }}</text>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    titleSize: {
+      type: String,
+      default: '34rpx'
+    },
+    showBack: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      currentPages: []
+    }
+  },
+  methods: {
+    getSafeTop() {
+      const systemInfo = uni.getSystemInfoSync()
+      return systemInfo.statusBarHeight
+    },
+    back(){
+      if (this.currentPages.length === 1) uni.switchTab({url: '/pages/index/index'})
+      else uni.navigateBack()
+    }
+  },
+  mounted() {
+    this.currentPages = getCurrentPages()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-navbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10rpx;
+  min-height: 56rpx;
+  background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/202ad055d8706f14cd94fae4a8bbc14c.png') no-repeat center/cover;
+}
+
+.navbar-left {
+  width: 50rpx;
+  height: 50rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 20rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 999rpx;
+}
+
+.navbar-right {
+  display: flex;
+  align-items: center;
+}
+
+.navbar-title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #111827;
+  letter-spacing: 2rpx;
+}
+
+.navbar-capsule {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  height: 52rpx;
+  padding: 0 16rpx;
+  background: #ffffff;
+  border-radius: 999rpx;
+  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.08);
+}
+
+.capsule-dots {
+  display: flex;
+  gap: 6rpx;
+}
+
+.capsule-dot {
+  width: 8rpx;
+  height: 8rpx;
+  border-radius: 50%;
+  background: #111827;
+}
+
+.capsule-divider {
+  width: 1rpx;
+  height: 24rpx;
+  background: #d1d5db;
+}
+
+.capsule-ring {
+  width: 26rpx;
+  height: 26rpx;
+  border-radius: 50%;
+  border: 3rpx solid #111827;
+}
+</style>