Prechádzať zdrojové kódy

feat(custom-nav): 支持自定义导航栏透明度

- 添加 opacity 属性控制导航栏背景透明度
- 默认透明度设置为 0.9
- 移除原有固定背景色样式
- 更新首页使用透明导航栏样式
- 添加页面容器样式支持全屏布局
- 添加用户信息区域占位样式
mcbaiyun 1 mesiac pred
rodič
commit
84dfeb7ac1

+ 8 - 3
src/components/custom-nav.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="custom-nav">
+  <view class="custom-nav" :style="navStyle">
     <view class="status_bar"></view>
     <view class="nav-content">
       <view class="nav-left" @click="leftTypeComputed !== 'none' && handleLeft()">
@@ -33,14 +33,20 @@ interface Props {
   title: string
   // leftType: 'back' | 'home' | 'none' | 'scan',默认 'back'
   leftType?: 'back' | 'home' | 'none' | 'scan'
+  opacity?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  leftType: 'back'
+  leftType: 'back',
+  opacity: 0.9
 })
 
 const leftTypeComputed = computed(() => props.leftType || 'back')
 
+const navStyle = computed(() => ({
+  backgroundColor: `rgba(255, 255, 255, ${props.opacity})`
+}))
+
 const emit = defineEmits<{
   (e: 'scan', payload: any): void
   (e: 'scanError', err: any): void
@@ -104,7 +110,6 @@ const handleLeft = () => {
   right: 0;
   z-index: 1000;
   height: calc(var(--status-bar-height) + 44px);
-  background-color: #ffffffe7;
   border-bottom: 1px solid #eee;
 }
 

+ 26 - 3
src/pages/public/index/index.vue

@@ -1,7 +1,12 @@
 <template>
-  <CustomNav title="首页" leftType="scan" @scan="handleScan" />
-  <view class="content">
+  <CustomNav title="首页" leftType="scan" @scan="handleScan" :opacity="0" />
+  <view class="page-container">
+    <view class="content">
+      <view class="user-info">
+        
+      </view>
 
+    </view>
   </view>
   <TabBar />
 </template>
@@ -22,4 +27,22 @@ function handleScan(res: any) {
 }
 </script>
 
-<style></style>
+<style>
+.page-container {
+  min-height: 100vh;
+  padding-top: calc(var(--status-bar-height) + 44px);
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+.content {
+  width: 100%;
+}
+
+.user-info {
+  width: 100%;
+  height: 100px;
+}
+</style>