fix: ui

pages/package-order/package-order.vue

@@ -1,20 +1,21 @@
 <template>
 	<view class="container">
-		<view class="package-tabs">
-			<view class="package-tab-indicator" :style="{ left: packageTypeIndex === 0 ? '8rpx' : '50%' }"></view>
+		<view class="tab-section">
+			<view class="tab-header">
+			<view class="tab-indicator" :style="{ left: packageTypeIndex === 0 ? '8rpx' : '50%' }"></view>
 			<view
 				v-for="tab in packageTypeTabs"
 				:key="tab.value"
-				class="package-tab"
+				class="tab-item"
 				:class="{ active: activePackageType === tab.value }"
 				@tap="switchPackageType(tab.value)"
 			>
 				{{ tab.label }}
 			</view>
-		</view>
+			</view>
 
 		<swiper
-			class="package-swiper"
+			class="tab-swiper package-swiper"
 			:current="packageTypeIndex"
 			:circular="false"
 			:acceleration="true"
@@ -53,6 +54,7 @@
 				</scroll-view>
 			</swiper-item>
 		</swiper>
+		</view>
 
 		<up-popup :show="showModal" mode="center" @close="showModal = false">
 			<view class="payment-popup">
@@ -717,6 +719,59 @@
 		overflow: hidden;
 	}
 
+	.tab-section {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.tab-header {
+		flex-shrink: 0;
+		display: flex;
+		position: relative;
+		background: #fff;
+		border-radius: 16rpx;
+		padding: 8rpx;
+	}
+
+	.tab-indicator {
+		position: absolute;
+		top: 8rpx;
+		width: calc(50% - 16rpx);
+		height: calc(100% - 16rpx);
+		background: var(--primary);
+		border-radius: 12rpx;
+		transition: left 0.3s ease;
+		z-index: 0;
+	}
+
+	.tab-item {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 20rpx 0;
+		font-size: 28rpx;
+		font-weight: 500;
+		color: var(--text-tertiary);
+		position: relative;
+		z-index: 1;
+		transition: color 0.3s;
+
+		&.active {
+			color: #fff;
+			font-weight: 600;
+		}
+	}
+
+	.tab-swiper {
+		margin-top: 20rpx;
+		flex: 1 1 0;
+		min-height: 0;
+		height: auto;
+	}
+
 	.container .package-tabs {
 		display: flex;
 		gap: 0;