优化日程界面

2026-07-15 18:14:17 +08:00
parent 11e0763766
commit bca5170e22
19 changed files with 2805 additions and 1070 deletions
@@ -1,179 +1,87 @@
 <template>
-
 	<view class="app-tabbar">
-
-		<view class="tabbar-pill">
-
+		<view class="tabbar-inner">
 			<view
-
 				v-for="tab in tabs"
-
 				:key="tab.name"
-
 				class="tab-item"
-
 				:class="{ active: current === tab.name }"
-
 				@tap="onChange(tab.name)"
-
 			>
-
 				<FaIcon
-
 					:name="tab.icon"
-
-					:color="current === tab.name ? '#3c9cff' : '#9acafc'"
-
-					:size="20"
-
+					:color="current === tab.name ? '#3c9cff' : '#909399'"
+					:size="22"
 				/>
-
 				<text class="tab-text">{{ tab.text }}</text>
-
 			</view>
-
 		</view>
-
 		<view class="safe-area" />
-
 	</view>
-
 </template>

-
-
 <script setup>
-
 const props = defineProps({
-
 	current: {
-
 		type: String,
-
 		default: 'dashboard'
-
 	}
-
 })

-
-
 const tabs = [
-
 	{ name: 'dashboard', text: '仪表盘', icon: 'table-cells' },
-
 	{ name: 'features', text: '功能', icon: 'grip' },
-
 	{ name: 'profile', text: '我的', icon: 'user' }
-
 ]

-
-
 const routes = {
-
 	dashboard: '/pages/dashboard/dashboard',
-
 	features: '/pages/features/features',
-
 	profile: '/pages/profile/profile'
-
 }

-
-
 function onChange(name) {
-
 	if (name === props.current) return
-
 	uni.redirectTo({ url: routes[name] })
-
 }
-
 </script>

-
-
 <style scoped>
-
 .app-tabbar {
-
 	flex-shrink: 0;
-
-	padding: 16rpx 32rpx 0;
-
 	background: #ffffff;
-
+	border-top: 1rpx solid #ebeef5;
+	box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
 }

-
-
-.tabbar-pill {
-
+.tabbar-inner {
 	display: flex;
-
 	align-items: center;
-
 	justify-content: space-around;
-
-	background: #ffffff;
-
-	border: 2rpx solid #e8f0f8;
-
-	border-radius: 999rpx;
-
-	padding: 16rpx 12rpx;
-
+	padding: 12rpx 0 8rpx;
 }

-
-
 .tab-item {
-
 	flex: 1;
-
 	display: flex;
-
 	flex-direction: column;
-
 	align-items: center;
-
-	gap: 6rpx;
-
+	gap: 4rpx;
 	padding: 8rpx 0;

+	&.active .tab-text {
+		color: #3c9cff;
+		font-weight: 500;
+	}
 }

-
-
 .tab-text {
-
 	font-size: 22rpx;
-
-	color: #9acafc;
-
+	color: #909399;
 }

-
-
-.tab-item.active .tab-text {
-
-	color: #3c9cff;
-
-	font-weight: 500;
-
-}
-
-
-
 .safe-area {
-
 	height: constant(safe-area-inset-bottom);
-
 	height: env(safe-area-inset-bottom);
-
 }
-
 </style>
-
-