diff --git a/h5/pages.json b/h5/pages.json
index c1d0438..07f9c3e 100644
--- a/h5/pages.json
+++ b/h5/pages.json
@@ -1,5 +1,6 @@
 {
-	"pages": [{
+	"pages": [
+		{
 			"path": "pages/main/index/index",
 			"style": {
 				"navigationBarTitleText": "海南现代妇女儿童医院",
@@ -51,6 +52,20 @@
 			"style": {
 				"navigationBarTitleText": ""
 			}
+		},
+		{
+			"path": "pages/main/packageDetails/packageDetails",
+			"style": {
+				"navigationBarTitleText": "套餐详情"
+			}
+		},
+		{
+			"path": "pages/main/optionalProject/optionalProject",
+			"style": {
+				"navigationBarTitleText": "体检套餐加项",
+				"navigationBarBackgroundColor": "#D8EDF2",
+				"navigationBarTextStyle": "black"
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/h5/pages/main/index/index.vue b/h5/pages/main/index/index.vue
index 43ac990..e057b10 100644
--- a/h5/pages/main/index/index.vue
+++ b/h5/pages/main/index/index.vue
@@ -21,9 +21,9 @@
 	const $store = useStore()
 
 	const getUserInfo = async () => {
-		const response = await $api('UserInfo')
-		$response(response, () => {
-			$store.user = response.data.info
+		const response = await $api('UserInfo')
+		$response(response, () => {
+			$store.user = response.data.info
 		})
 	}
 	const switch_arr = [
diff --git a/h5/pages/main/optionalProject/optionalProject.vue b/h5/pages/main/optionalProject/optionalProject.vue
new file mode 100644
index 0000000..e57e7c7
--- /dev/null
+++ b/h5/pages/main/optionalProject/optionalProject.vue
@@ -0,0 +1,121 @@
+<script setup>
+/**
+ * name：
+ * user：sa0ChunLuyu
+ * date：2024年9月11日 19:24:50
+ */
+import { ref } from "vue";
+import { $api, $response } from "@/api";
+import { onShow } from "@dcloudio/uni-app";
+import { useStore } from "@/store";
+const $store = useStore();
+
+let leftList = ref({}); // 左侧列表
+let tabIndex = ref(""); // 默认选中
+let rightLeft = ref([]); // 右侧列表
+let selectList = ref([]); // 选中列表
+
+const getAllItems = async (e) => {
+  const response = await $api("GetAllItems", {
+    search: e?.value,
+  });
+  $response(response, () => {
+    leftList.value = response.data.list;
+    if (Object.keys(leftList.value).length) {
+      let keys = Object.keys(leftList.value);
+      tabIndex.value = keys[0];
+      rightLeft.value = leftList.value[keys[0]].children;
+    }
+  });
+};
+
+const mountedAction = () => {
+  getAllItems();
+};
+
+const config_ref = ref(null);
+const configRef = (e) => {
+  if (!config_ref.value) {
+    config_ref.value = e;
+    mountedAction();
+  }
+};
+
+onShow(() => {
+  if (!!config_ref.value) {
+    mountedAction();
+  }
+});
+</script>
+<template>
+  <view>
+    <view v-if="!!$store.config">
+      <view :ref="configRef"></view>
+    </view>
+  </view>
+  <view class="bg-#d8edf2">
+    <uni-search-bar
+      class="search"
+      radius="100"
+      placeholder="请输入关键字搜索"
+      @clear="getAllItems()"
+      @cancel="getAllItems()"
+      @confirm="getAllItems"
+    />
+  </view>
+  <view class="mt-20rpx flex min-h-100%">
+    <view class="min-w-214rpx max-w-214rpx mr-20rpx h-100% text-center">
+      <view
+        class="w-100% rounded-r-full text-#0E0E0E text-25rpx px-20rpx w-100% center h-84rpx box-border"
+        v-for="(item, index) in leftList"
+        :key="index"
+        :class="{
+          'bg-gradient-to-r from-#edf6f5 to-#bbdfe2': tabIndex == index,
+        }"
+        @click="(tabIndex = index), (rightLeft = item.children)"
+      >
+        {{ item.title }}
+      </view>
+    </view>
+    <view class="grow h-100% bg-#fff">
+      <view
+        v-for="(item, index) in rightLeft"
+        :key="index"
+        :class="{
+          '!b-0': index == rightLeft.length - 1,
+        }"
+        class="flex justify-between center py-30rpx px-20rpx b-b-1px b-b-solid b-b-#e5e5e5"
+        @click="
+          () => {
+            selectList.push(item.id);
+          }
+        "
+      >
+        <text class="w-40% text-#0E0E0E text-25rpx">{{ item.title }}</text>
+        <view class="w-50% items-center flex justify-end">
+          <text class="text-#EC3D15 text-26rpx mr-40rpx"
+            >¥ {{ item.price }}</text
+          >
+          <view
+            :class="{
+              '!bg-#EEA61E !b-#EEA61E': selectList.includes(item.id),
+            }"
+            class="w-24rpx h-24rpx b-1 b-solid b-#DCDCDC bg-#F8F8F8 rounded-3rpx center"
+          >
+            <image
+              v-if="selectList.includes(item.id)"
+              class="w-20rpx"
+              src="@/static/assets/select.png"
+              mode="widthFix"
+            />
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<style scoped>
+.search > .uni-searchbar__box {
+  justify-content: flex-start !important;
+}
+</style>
diff --git a/h5/pages/main/packageDetails/packageDetails.vue b/h5/pages/main/packageDetails/packageDetails.vue
new file mode 100644
index 0000000..7adca7a
--- /dev/null
+++ b/h5/pages/main/packageDetails/packageDetails.vue
@@ -0,0 +1,49 @@
+<script setup>
+	/**
+	 * name：
+	 * user：sa0ChunLuyu
+	 * date：2024年9月11日 19:24:50
+	 */
+	import {
+		ref
+	} from 'vue'
+	import {
+		$api,
+		$response
+	} from '@/api'
+	import {
+		onShow
+	} from '@dcloudio/uni-app'
+	import {
+		useStore
+	} from '@/store'
+	const $store = useStore()
+
+	const mountedAction = () => {
+console.log(config_ref.value);
+	}
+
+	const config_ref = ref(null)
+	const configRef = (e) => {
+		if (!config_ref.value) {
+			config_ref.value = e
+			mountedAction()
+		}
+	}
+
+	onShow(() => {
+		if (!!config_ref.value) {
+			mountedAction()
+		}
+	})
+</script>
+<template>
+	<view>
+		<view v-if="!!$store.config">
+			<view :ref="configRef"></view>
+		</view>
+	</view>
+</template>
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/h5/static/assets/select.png b/h5/static/assets/select.png
new file mode 100644
index 0000000..92905dc
Binary files /dev/null and b/h5/static/assets/select.png differ