首页

components/BottomTabbar.vue

@@ -1,53 +0,0 @@
-<template>
-  <view class="bottom-tabbar">
-    <view
-      v-for="item in items"
-      :key="item.value"
-      class="tabbar-item"
-      :class="{active: item.value === modelValue}"
-      @click="$emit('update:modelValue', item.value)"
-    >
-      <uv-icon :name="item.icon" :color="item.value === modelValue ? '#2885ff' : '#888'" size="22" />
-      <view class="name">{{ item.label }}</view>
-    </view>
-  </view>
-</template>
-<script setup>
-const props = defineProps({
-  items: {
-    type: Array,
-    required: true
-  },
-  modelValue: {
-    type: [String, Number],
-    required: true
-  }
-});
-const emit = defineEmits(['update:modelValue']);
-</script>
-<style scoped lang="scss">
-.bottom-tabbar {
-  position: fixed;
-  left: 0; right: 0; bottom: 0;
-  display: flex;
-  height: 104rpx;
-  background: #fff;
-  border-top: 1px solid #f0f0f0;
-  z-index: 99;
-}
-.tabbar-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: #888;
-  font-size: 12px;
-}
-.tabbar-item.active {
-  color: #2885ff;
-}
-.name {
-  margin-top: 7rpx;
-}
-</style>

components/TopTabs.vue

@@ -1,60 +0,0 @@
-<template>
-  <view class="top-tabs">
-    <view
-      v-for="tab in tabs"
-      :key="tab.value"
-      class="tab"
-      :class="{active: tab.value === modelValue}"
-      @click="$emit('update:modelValue', tab.value)"
-    >
-      {{ tab.label }}
-    </view>
-  </view>
-</template>
-
-<script setup>
-const props = defineProps({
-  tabs: {
-    type: Array,
-    required: true,
-    default: () => []
-  },
-  modelValue: {
-    type: [String, Number],
-    required: true
-  }
-});
-const emit = defineEmits(['update:modelValue']);
-</script>
-
-<style scoped lang="scss">
-.top-tabs {
-  display: flex;
-  border-bottom: 1px solid #eee;
-  background: #fff;
-}
-.tab {
-  flex: 1;
-  padding: 24rpx 0 18rpx 0;
-  text-align: center;
-  font-size: 15px;
-  color: #888;
-  position: relative;
-  transition: color .2s;
-}
-.tab.active {
-  color: #2885ff;
-  font-weight: 600;
-}
-.tab.active::after {
-  content: '';
-  display: block;
-  position: absolute;
-  left: 25%;
-  right: 25%;
-  height: 4rpx;
-  border-radius: 3rpx;
-  background: #2885ff;
-  bottom: 0;
-}
-</style>

pages.json

@@ -10,7 +10,7 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationStyle": "custom"
+				"navigationBarTitleText": "办公管理"
 			}
 		}
 	],

pages/index/index.vue

@@ -1,23 +1,23 @@
 <template>
-  <view class="status_bar">
+
-  </view>
   <!-- 顶部Tabs栏 -->
-<view class="fixed">
+  <view class="fixed-tabs" >
-  <uv-tabs :list="topTabs" @click="click"></uv-tabs>
+    <uv-tabs :list="topTabs" @click="click"></uv-tabs>
-</view>
-
-
-
-  <!-- 日期条 -->
-  <DateBar :days="weekDays" v-model="selectedDate" />
-
-  <view>
-    <uv-calendar ref="calendar"  mode="single" @confirm="handleConfirm"></uv-calendar>
-    <button @click="openCalendar">打开</button>
   </view>
 
-  <!-- 时间轴表格 -->
+  <!-- 内容区域 -->
-  <TimeTable :hours="hours" :events="eventsInDay" />
+  <view class="content-wrapper" :style="{ paddingTop: (  tabsHeight) + 'px' }">
+    <!-- 日期条 -->
+    <DateBar :days="weekDays" v-model="selectedDate" />
+
+    <view>
+      <uv-calendar ref="calendar"  mode="single" @change="handleConfirm" closeOnClickConfirm="false"></uv-calendar>
+      <button @click="openCalendar">选择日期</button>
+    </view>
+
+    <!-- 时间轴表格 -->
+    <TimeTable :hours="hours" :events="eventsInDay" />
+  </view>
 
   <!-- 悬浮新建按钮 -->
   <FabPlus @click="showAdd = true" />
@@ -35,14 +35,19 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
-import TopTabs from '@/components/TopTabs.vue';
+
 import DateBar from '@/components/DateBar.vue';
 import TimeTable from '@/components/TimeTable.vue';
 import FabPlus from '@/components/FabPlus.vue';
-import BottomTabbar from '@/components/BottomTabbar.vue';
+
 import AddEventModal from '@/components/AddEventModal.vue';
 
+// 获取状态栏高度
+
+const tabsHeight = ref(44); // tabs 高度，单位：px
+
+
 // 顶部tabs选项
 const topTabs = [
   { name: '日程编辑', value: 0 },
@@ -52,6 +57,11 @@ const topTabs = [
 ];
 const topTabValue = ref(0);
 
+function click(item) {
+  topTabValue.value = item.value;
+  console.log('切换tab:', item.name);
+}
+
 // 生成一周日期
 function getWeekDays() {
   const days = [];
@@ -126,8 +136,25 @@ const tabbarVal = ref(1);
 <style lang="scss" scoped>
 
 .status_bar {
-  height: var(--status-bar-height);
   width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+
+.fixed-tabs {
+  position: fixed;
+  left: 0;
+  right: 0;
+  width: 100%;
+  background: #fff;
+  z-index: 999;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+}
+
+.content-wrapper {
+  min-height: 100vh;
 }
 
 :deep(.bottom-tabbar) { z-index: 1000 !important; }
@@ -135,9 +162,4 @@ const tabbarVal = ref(1);
 .schedule-timeline {
   padding-bottom: 130rpx !important;
 }
-.fixed{
-  position: relative;
-  left: 0;
-  width: 100%;
-}
 </style>