diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 108a98378a2a6ad60f24e58d0ca88cd1b1f39cd9..a895e10b222ddf82ad932bc48f74e0bb38abff3f 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -6,6 +6,7 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const SelectBox: typeof import('./src/components/selectBox/index.vue')['default']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']
diff --git a/index.html b/index.html
index 38729f06e5b55acb54a364c080b76f633ca445de..a7dabe1e6ea1dcf1e179e2f27b870b10bddaa099 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
     body,
     #app {
       height: 100%;
+      width: 100%;
       margin: 0;
       padding: 0 !important;
     }
diff --git a/mock/physical.js b/mock/physical.js
new file mode 100644
index 0000000000000000000000000000000000000000..4cad05bb4d94444db685da2150d2f888f85a4131
--- /dev/null
+++ b/mock/physical.js
@@ -0,0 +1,207 @@
+import { mock } from "mockjs";
+
+// mock 用户数据
+export default [
+  // 套餐分类
+  {
+    url: '/api/physical/classification',
+    method: 'get',
+    response: () => {
+      return {
+        code: 0,
+        msg: 'ok',
+        data: [
+          {
+            name: '优雅绅士 男性体检',
+            total: 812,
+            url: '/physical/packageList?det=man&total=812'
+          },
+          {
+            name: '粉红挚爱 女性体检',
+            total: 371,
+            url: '/physical/packageList?det=woman&total=372'
+          },
+          {
+            name: '关爱父母 长者体检',
+            total: 100,
+            url: '/physical/packageList?det=parent&total=100'
+          },
+          {
+            name: '职场无忧 入职体检',
+            total: 112,
+            url: '/physical/packageList?det=work&total=112'
+          }
+        ]
+      };
+    }
+  },
+  // 套餐列表
+  // 根据query不同返回不同的数据
+  {
+    url: '/api/physical/packageList',
+    method: 'get',
+    response: (req) => {
+      const query = new URLSearchParams(req.url.split('?')[1]); // 获取查询参数
+      const det = query.get('det'); // 获取 query.det 的值
+      const page = parseInt(query.get('page')) || 1; // 获取页码，默认为第一页
+      const pageSize = 10; // 每页显示的条数
+      const totalCount = 100
+
+      let responseData;
+      switch (det) {
+        case 'man':
+          responseData = {
+            code: 0,
+            msg: 'ok',
+            data: generateData(totalCount, '鹏程万里体检套餐(男)', '南方医科大学附属第三医院', 1000, 500, page, pageSize)
+          };
+          break;
+          case 'woman':
+          responseData = {
+            code: 0,
+            msg: 'ok',
+            data: generateData(totalCount, '花开富贵体检套餐(女)', '东方医科大学附属第三医院', 1200, 700, page, pageSize)
+          };
+          break;
+          case 'parent':
+            responseData = {
+              code: 0,
+              msg: 'ok',
+              data: generateData(totalCount, '老年人体检套餐', '北方医科大学附属第三医院', 800, 300, page, pageSize)
+            };
+            break;
+            case 'work':
+              responseData = {
+                code: 0,
+                msg: 'ok',
+                data: generateData(totalCount, '入职体检套餐', '西方医科大学附属第三医院', 300, -200, page, pageSize)
+          };
+          break;
+          default:
+            responseData = {
+              code: -1,
+              msg: '请传递正确的det'
+            };
+          }
+          if(page*pageSize > totalCount){
+            responseData = {
+              code: -1,
+              msg: '没数据了'
+            };
+           }
+
+      
+
+      return responseData;
+    }
+  },
+  {
+    url: '/api/physical/packageDetails',
+    method: 'get',
+    response: (req) => {
+      const query = new URLSearchParams(req.url.split('?')[1]); // 获取查询参数
+      const det = query.get('det'); 
+      const id = parseInt('id')
+
+      let responseData;
+      switch (det) {
+        case 'man':
+          responseData = {
+            code: 0,
+            msg: 'ok',
+            data: {
+              id:1,
+              bannerurl:'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+              title:'鹏程万里体检套餐(男)',
+              location:'南方医科大学附属第三医院',
+              oldprice:1498,
+              sellingprice:998,
+              volume:15941
+            }
+          };
+          break;
+          case 'woman':
+          responseData = {
+            code: 0,
+            msg: 'ok',
+            data: {
+              id:1,
+              bannerurl:'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+              title:'花开富贵体检套餐(女)',
+              location:'东方医科大学附属第三医院',
+              oldprice:1998,
+              sellingprice:1498,
+              volume:23751
+            }
+          };
+          break;
+          case 'parent':
+            responseData = {
+              code: 0,
+              msg: 'ok',
+              data: {
+                id:1,
+                bannerurl:'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+                title:'老年人体检套餐',
+                location:'北方医科大学附属第三医院',
+                oldprice:1298,
+                sellingprice:798,
+                volume:56413
+              }
+            };
+            break;
+            case 'work':
+              responseData = {
+                code: 0,
+                msg: 'ok',
+                data: {
+                  id:1,
+                  bannerurl:'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+                  title:'入职体检套餐',
+                  location:'西方医科大学附属第三医院',
+                  oldprice:798,
+                  sellingprice:298,
+                  volume:35416
+                }
+          };
+          break;
+          default:
+            responseData = {
+              code: -1,
+              msg: '请传递正确的det'
+            };
+          }
+
+      
+
+      return responseData;
+    }
+  },
+];
+
+
+
+
+// 套餐列表调用的函数
+function generateData(totalCount, name, location, basePrice, priceDifference, page, pageSize) {
+  const data = [];
+
+  const startIndex = (page - 1) * pageSize;
+  const endIndex = Math.min(startIndex + pageSize, totalCount);
+
+  for (let i = startIndex; i < endIndex; i++) {
+    const randomPrice = Math.floor(Math.random() * Math.abs(priceDifference)) + 1; // 生成1到priceDifference之间的随机数
+    const oldPrice = basePrice + randomPrice; // oldprice为basePrice加上随机数
+    const sellingPrice = oldPrice - priceDifference; // sellingprice为oldprice减去priceDifference
+    const id = i + 1; // 生成唯一标识符
+    data.push({
+      id: id,
+      imgurl: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+      name: name,
+      location: location,
+      oldprice: oldPrice,
+      sellingprice: sellingPrice
+    });
+  }
+  return data;
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 96d6c760d7d6ecc83e526fdf4aa700e417e9d850..1bdde5f399be7eeb1299a28ee4ae966fd785f663 100644
--- a/package.json
+++ b/package.json
@@ -8,19 +8,21 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "amfe-flexible": "^2.2.1",
     "axios": "^1.6.2",
     "dayjs": "^1.11.10",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.0",
     "vant": "^4.8.0",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.5",
-    "pinia-plugin-persistedstate": "^3.2.0"
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@vant/auto-import-resolver": "^1.0.2",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
     "mockjs": "^1.1.0",
+    "postcss-pxtorem": "^5.1.1",
     "sass": "^1.69.5",
     "unplugin-auto-import": "^0.16.7",
     "unplugin-vue-components": "^0.25.2",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..8d5dfc9e026cd4bbd7342f6576581ae7120d0e2d
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+    plugins: {
+        // postcss-pxtorem 插件的版本需要 >= 5.0.0
+        // 适用版本 5.1.1
+        // npm install postcss-pxtorem@5.1.1 -D
+        'postcss-pxtorem': {
+            rootValue({ file }) { // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
+                // 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
+                return file.indexOf('vant') !== -1 ? 37.5 : 75;
+            },
+            // 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
+            propList: ['*'],
+        },
+    },
+};
\ No newline at end of file
diff --git a/src/api/physicalApi.js b/src/api/physicalApi.js
new file mode 100644
index 0000000000000000000000000000000000000000..1b53d774e9633dd22572f9da9217c6900ae0fbcd
--- /dev/null
+++ b/src/api/physicalApi.js
@@ -0,0 +1,34 @@
+import { post, get,put } from '@/utils/http'
+
+
+
+/**
+ *  套餐分类 
+ *  @returns Promise
+ */
+export const physicalPackageClassification = ()=>get('/api/physical/classification')
+
+
+
+/**
+ *  套餐列表 
+ *  @returns Promise
+ */
+export const physicalPackageList = (type,page=1)=>get(`/api/physical/PackageList?det=${type}&page=${page}`)
+
+
+/**
+ *  套餐详情的上半部分
+ *  @returns Promise
+ */
+export const physicalPackageDetailsApi = (id,type)=>get(`/api/physical/packageDetails?id=${id}&det=${type}`)
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/index.js b/src/components/index.js
index a4b90088b128c8d28de452ca07de63e34cdc1623..b7f0134a080190703b2ddf6a0325cb540abbafbb 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,6 +1,11 @@
-
-import situationTitle from './situationTitle'
-
-export default (app) => {
-  app.component('situationTitle', situationTitle)
+import selectBox from './selectBox/index.js'
+import organBox from './organBox/index.js'
+import setMealBox from './setMealBox/index.js'
+import situationTitle from './situationTitle'
+
+export default (app) => {
+  app.component('SelectBox', selectBox)
+  app.component('OrganBox', organBox)
+  app.component('SetMealBox', setMealBox)
+  app.component('situationTitle', situationTitle)
 }
\ No newline at end of file
diff --git a/src/components/organBox/index.js b/src/components/organBox/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3cb3621d0cd1060ecd27475faa7aee227126efc6
--- /dev/null
+++ b/src/components/organBox/index.js
@@ -0,0 +1 @@
+export { default } from './index.vue'
\ No newline at end of file
diff --git a/src/components/organBox/index.vue b/src/components/organBox/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b29b126c835225a1f8858b89a3473dc3b0940a21
--- /dev/null
+++ b/src/components/organBox/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="box" @click="onSubmit">
+        <div style="width: 130px;">
+            <van-image width="130" height="130" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+            <div>
+                <p class="box-title">南方医科大学附属第三医院</p>
+                <p class="box-text">100个套餐</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+const emit = defineEmits()
+// --------------------------------------------提交
+const onSubmit = () => {
+    emit('onClick','onClick')
+}
+
+</script>
+
+<style lang="scss" scoped>
+.box{
+    margin: 0px 10px;
+}
+.box-title{
+    font-size: 30px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.box-text{
+    font-size: 26px; 
+    color: green;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/selectBox/index.js b/src/components/selectBox/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3cb3621d0cd1060ecd27475faa7aee227126efc6
--- /dev/null
+++ b/src/components/selectBox/index.js
@@ -0,0 +1 @@
+export { default } from './index.vue'
\ No newline at end of file
diff --git a/src/components/selectBox/index.vue b/src/components/selectBox/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..120a3df81fe234ec5b3b94efa738df7b75f19faa
--- /dev/null
+++ b/src/components/selectBox/index.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="router-box" @click="onSubmit">
+        <van-image :width="width" :height="height" :src="url">
+            <template v-slot:error>加载失败</template>
+        </van-image>
+        <div class="main">
+            <p class="router-title">{{ title }}</p>
+            <p class="router-text"><span v-for="item in textList">{{ item }}</span></p>
+        </div>
+    </div>
+</template>
+<script setup >
+const { width, height, url = '', title = '', text = '' } = defineProps(['width', 'height', 'url', 'title', 'text']);
+
+const emit = defineEmits();
+
+const onSubmit = () => {
+    emit('onSubmit', "onSubmit")
+}
+
+const textList = computed(()=>{
+    if(typeof text === 'string') return [text]
+    return text
+})
+
+</script>
+
+<style lang="scss" scoped>
+.router-box {
+    display: flex;
+    background-color: 	#F5FFFA;
+    padding: 10px 20px;
+    border-radius: 10px;
+    margin-bottom: 20px;
+}
+
+.main {
+    margin-left: 10px;
+
+    .router-title {
+        margin-top: 5px;
+        font-size: 30px;
+    }
+
+    .router-text {
+        margin-top: 5px;
+        font-size: 24px;
+        color: #ccc;
+
+        span {
+            margin-right: 10px;
+        }
+    }
+}
+.van-image {
+    overflow: hidden;
+    border-radius: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/setMealBox/index.js b/src/components/setMealBox/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3cb3621d0cd1060ecd27475faa7aee227126efc6
--- /dev/null
+++ b/src/components/setMealBox/index.js
@@ -0,0 +1 @@
+export { default } from './index.vue'
\ No newline at end of file
diff --git a/src/components/setMealBox/index.vue b/src/components/setMealBox/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f616e2cba9acf177da11466e925ff1ecfc881987
--- /dev/null
+++ b/src/components/setMealBox/index.vue
@@ -0,0 +1,46 @@
+<template>
+    <div class="box" @click="onSubmit">
+        <div style="width: 160px;">
+            <van-image width="160" height="160" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+            <div>
+                <p class="box-title">老年人体检套餐（女）</p>
+                <p class="box-text">南方医科大学附属第三医院</p>
+                <p class="box-money">￥998 <s>￥1200</s></p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+const emit = defineEmits()
+// --------------------------------------------提交
+const onSubmit = () => {
+    emit('onClick','onClick')
+}
+
+</script>
+
+<style lang="scss" scoped>
+.box{
+    margin: 0px 10px;
+    margin-bottom: 10px;
+}
+.box-title{
+    font-size: 30px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.box-text{
+    font-size: 28px; 
+    color: green;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.box-money{
+    font-size: 24px;
+    color: #ccc;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/situationTitle/index.vue b/src/components/situationTitle/index.vue
index b6c155555f24b50a47e7e475ffb017a032016fcc..0f540aeb16ac6366b6d0a37ae72fa9bcd8ef3483 100644
--- a/src/components/situationTitle/index.vue
+++ b/src/components/situationTitle/index.vue
@@ -4,46 +4,65 @@
             <img src="https://cdn7.axureshop.com/demo2023/112525/images/%E9%A1%B5%E9%9D%A2%E7%BA%BF%E6%A1%86%E5%9B%BE/u499.png" alt="">
             返回
         </div>
-        
-        <span>{{ useroute.name }}</span>
+        <span>
+            <span>{{ route.name }}</span>
+            <span class="situationTitle-total"> {{ props.total }} </span>
+        </span>
     </div>
 </template>
 
 <script setup lang="ts">
+import {defineProps} from "vue";
 import { useRoute } from "vue-router";
-const useroute = useRoute()
+const route = useRoute()
 const gobackClickHandle=()=>{
     history.back()
 }
-
+const props = defineProps({
+  total: {
+    type: String,
+    required: false
+  }
+});
 </script>
 
 <style lang="scss" scoped>
 .main-title{
+    position: relative;
     width: 100%;
-    height: 2.75rem;
-    margin-top: 1.25rem;
+    height: 88px;
+    margin-top: 40px;
     background-color: #FFF;
-    line-height: 2.75rem;
-     
+    line-height: 88px;
+     text-align: center;
 }
 .main-title>span{
     font-family:'应用字体';
-    font-size: 20px;
+    font-size: 40px;
     font-weight: 350;
     font-kerning: normal;
-    margin-left: 5.05rem;
+    margin:0 auto;
 }
 .goback-btn{
-    margin-left: 1.25rem;
+    position: absolute;
+    left: 40px;
     display: inline-block;
     color:rgb(118, 194, 161);
-    font-size: 1rem;
+    font-size: 32px;
     font-weight: 400;
+
     img{
-        width: .5rem;
-        height: .875rem;
-        margin-right: .1875rem;
+        width: 16px;
+        height: 28px;
+        margin-right: 6px;
     }
 }
+.situationTitle-total{
+    font-size: 24px;
+    font-weight: 400;
+    position: absolute;
+    top: 38.4px;
+    left: 352px;
+    color:rgb(150, 159, 162);
+}
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index afc18763e441e151bccc0614755df10f29ed8519..833872bc0e63e5d51e0e7b7ff1d41ae02897415c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,8 @@ import registerComponents  from './components'
 
 import App from './App.vue'
 import router from './router'
+import { Lazyload } from 'vant';
+import 'amfe-flexible'
 
 const app = createApp(App)
 
@@ -14,5 +16,8 @@ pinia.use(persistedState)
 
 app.use(pinia)
 app.use(router)
+app.use(Lazyload, {
+    lazyComponent: true,
+  });
 registerComponents(app)
 app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index af2f102333044101f30abe17a70130444f319320..995aaea8b57eebf338728f5262e02db86c6afbfb 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,7 +24,6 @@ const router = createRouter({
     // 体检
     {
       path: '/physical',
-      component: () => import('@/views/physical/index.vue'),
       name: 'physical',
       redirect: '/physical/packageClassification',
       children:physicalChildren
diff --git a/src/router/routers/physical.js b/src/router/routers/physical.js
index a9eadb80a845e121f33384912b67ff890ebf3c27..ad446677f15e53eb5e5a0dc67e39d3d69de4b8e9 100644
--- a/src/router/routers/physical.js
+++ b/src/router/routers/physical.js
@@ -5,6 +5,16 @@ const routes = [
                 name: '套餐分类',
                 component: () => import('@/views/physical/index.vue'),
 
+            },
+            {
+                path:'packageList',
+                name:'体检套餐',
+                component:()=>import('@/views/packageList/index.vue'),
+            },
+            {
+                path:'packageDetails/:id/:det',
+                name:'套餐详情',
+                component:()=>import('@/views/packageDetails/index.vue'),
             }
         ]
             // {
diff --git a/src/utils/tools.js b/src/utils/tools.js
index f61dd721a4dc8666771b8515d347da6e2b42ae51..8dd5dae7bd9368978dd932215e96730f974d34d8 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -129,3 +129,17 @@ export const objToQueryString = (obj) => {
   }
   return ret;
 };
+
+
+// 节流函数
+export const throttle = (fn, delay = 100)=>{
+  let timer = null
+  return function (...args) {
+    if (!timer) {
+      timer = setTimeout(() => {
+        fn.apply(this, args)
+        timer = null
+      }, delay)
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/admin/index.vue b/src/views/admin/index.vue
index b14a0392362e2235e2181eaf163f61fcba39e5ea..3838e5e650026074a495b9f1fbeb5bdbc8f64cb2 100644
--- a/src/views/admin/index.vue
+++ b/src/views/admin/index.vue
@@ -1,43 +1,46 @@
 <template>
-    <div>
+    <div class="admin">
         <van-nav-bar title="标题" right-text="按钮" />
-        <div>
-            <div class="router-box" @click="goPhysical">
-                <van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" >
-                    <template v-slot:error>加载失败</template>
-                </van-image>
-                <div>
-                    <p>我要体检</p>
-                    <p>机构套餐 随心选择</p>
-                </div>
-            </div>
-            <div class="router-box" @click="goSubscribe">
-                <van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" >
-                    <template v-slot:error>加载失败</template>
-                </van-image>
-                <div>
-                    <p>我的预约</p>
-                    <p>按需加项 更改日期</p>
-                </div>
-            </div>
-            <div class="router-box" @click="goReportInfo">
-                <van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" >
-                    <template v-slot:error>加载失败</template>
-                </van-image>
+        <div class="router-content">
+            <SelectBox @onSubmit="goPhysical" :text="['机构套餐', '随心选择']" title="我要体检" width="50" height="50"
+                url="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+            <SelectBox @onSubmit="goSubscribe" :text="['按需加项', '更改日期']" title="我的预约" width="50" height="50"
+                url="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+            <SelectBox @onSubmit="goReportInfo" :text="['报告管理', '趋势分析']" title="我的报告" width="50" height="50"
+                url="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+            <SelectBox @onSubmit="goRead" :text="['在线医生', '答疑解惑']" title="报告解读" width="50" height="50"
+                url="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+        </div>
+        <div class="organ-content">
+            <van-notice-bar mode="link" @click="goSubscribe" background="#fff" color="green">
                 <div>
-                    <p>我的报告</p>
-                    <p>报告管理 趋势分析</p>
+                    <span style="font-size: 20px; color: #000;">推荐机构</span>
+                    <span class="more">更多</span>
                 </div>
+            </van-notice-bar>
+            <div class="content">
+                <OrganBox @onClick="organInfo" />
+                <OrganBox />
+                <OrganBox />
             </div>
-            <div class="router-box" @click="goRead">
-                <van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" >
-                    <template v-slot:error>加载失败</template>
-                </van-image>
+        </div>
+        <div class="setMeal-content">
+            <van-notice-bar mode="link" @click="goSubscribe" background="#fff" color="green">
                 <div>
-                    <p>报告解读</p>
-                    <p>在线医生 答疑解惑</p>
+                    <span style="font-size: 20px; color: #000;">推荐套餐</span>
+                    <span class="more">更多</span>
                 </div>
-            </div>
+            </van-notice-bar>
+            <lazy-component class="content">
+                <SetMealBox @onClick="organInfo" />
+                <SetMealBox />
+                <SetMealBox />
+                <SetMealBox />
+                <SetMealBox />
+                <SetMealBox />
+                <SetMealBox />
+                <SetMealBox />
+            </lazy-component>
         </div>
     </div>
 </template>
@@ -46,27 +49,78 @@
 
 const router = useRouter()
 
+// ------------------------------------------方法
+// ========================路由跳转
+
 const goPhysical = () => {
-    console.log(router);
     router.push('/physical')
 }
 const goSubscribe = () => {
-    console.log(router);
     router.push('/subscribe')
 }
 const goReportInfo = () => {
-    console.log(router);
     router.push('/reportInfo')
 }
 const goRead = () => {
-    console.log(router);
     router.push('/read')
 }
+// 机构跳转
+const organInfo = () => {
+    router.push('/read')
+}
+
 </script>
 
 <style lang="scss" scoped>
-.router-box{
+.router-content {
     display: flex;
-    background-color: #eee;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    padding-top: 20px;
+}
+
+.admin {
+    height: 100%;
+}
+
+.more {
+    margin-left: 420px;
+}
+
+.van-notice-bar {
+    margin-bottom: 20px;
+}
+
+.organ-content {
+    margin-bottom: 10px;
+
+    .content {
+        display: flex;
+        overflow: auto;
+        padding: 0 10px;
+    }
+}
+
+.setMeal-content {
+    margin-bottom: 10px;
+
+    .content {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+    }
+}
+
+/* 去掉默认的滚动条样式 */
+::-webkit-scrollbar {
+    display: none;
+}
+
+/* 使用 scrollbar-width 和 scrollbar-color 属性定义滚动条样式 */
+body {
+    scrollbar-width: thin;
+    /* 细条样式 */
+    scrollbar-color: #409EFF;
+    /* 滚动条颜色 */
 }
 </style>
\ No newline at end of file
diff --git a/src/views/packageDetails/index.vue b/src/views/packageDetails/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6cfd0955b91f184c7fae4e01a2c876f472d0679
--- /dev/null
+++ b/src/views/packageDetails/index.vue
@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <situationTitle/>
+        <Suspense>
+            <detailBanner/>
+        </Suspense>
+    </div>
+</template>
+
+<script setup>
+
+import detailBanner from './ui/detailBanner.vue'
+
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/packageDetails/ui/detailBanner.vue b/src/views/packageDetails/ui/detailBanner.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f72c9eabc1ce8ae4851ff639d66ada46716669e7
--- /dev/null
+++ b/src/views/packageDetails/ui/detailBanner.vue
@@ -0,0 +1,45 @@
+<template>
+    <div class="detailBanner-parent">
+        <div>
+            <van-image
+            width="345"
+            height="230"
+            :src="listData.bannerurl"
+            />
+        </div>
+        <span class="detailBanner-title">{{ listData.title }}</span>
+        <span class="detailBanner-location">{{ listData.location }}</span>
+        <div class="detailBanner-pricebox">
+            <div class="detailBanner-firstbox">
+                <span class="detailBanner-oldprice">￥{{ listData.oldprice }}</span>
+                <span class="detailBanner-sellingprice">￥{{ listData.sellingprice }}</span>
+            </div>
+            <span class="detailBanner-volume">{{ listData.volume }}</span>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {ref} from 'vue'
+import { useRoute } from 'vue-router'
+import { physicalPackageDetailsApi } from '@/api/physicalApi'
+
+const route = useRoute()
+const id = route.params.id
+const det = route.params.det
+const listData = ref({})
+
+// const  loadBannerData=()=>{
+    const ret = await physicalPackageDetailsApi(id,det)
+    if(ret.code===0){
+        console.log(ret.data);
+        listData.value=ret.data
+    }
+// }
+</script>
+
+<style lang="scss" scoped>
+// .detailBanner-parent{
+//     justify-content: baseline;
+// }
+</style>
\ No newline at end of file
diff --git a/src/views/packageList/index.vue b/src/views/packageList/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5ca751f6bc2a3578722777953a2e7f0c5b3f1fa2
--- /dev/null
+++ b/src/views/packageList/index.vue
@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <situationTitle :total="total"/>
+    </div>
+    <Suspense>
+        <packageList />
+    </Suspense>
+</template>
+
+<script setup>
+import packageList from './ui/packageList.vue'
+import { useRoute } from 'vue-router';
+const route = useRoute();
+const total = route.query.total;
+const type = route.query.det
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/packageList/ui/packageList.vue b/src/views/packageList/ui/packageList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4085321ac1ac4e5690280d99282f2207867a81f4
--- /dev/null
+++ b/src/views/packageList/ui/packageList.vue
@@ -0,0 +1,156 @@
+<template>
+  <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="packageListParentDiv">
+    <van-list
+    class="packageList vant-clearfix"
+    v-model:loading="loading"
+    :finished="finished"
+    finished-text="没有更多了"
+    @load="onLoad"
+    :offset="50"
+    >
+    <van-skeleton title  :row="20" :loading="guJialoading" >
+      
+      <lazy-component class="packageList-item vant-clearfix" v-for="item in listData" @click="goDetail(item.id)">
+        <van-image
+        width="155"
+        height="145"
+        radius="5"
+        v-lazy="item.imgurl"
+        :src="item.imgurl"
+        />
+        <span class="packageList-name">{{ item.name }}</span>
+        <span class="packageList-location">{{ truncateLocation(item.location) }}</span>
+        <div class="price-box vant-clearfix" >
+          <span class="price-sellingprice">￥{{ item.sellingprice }}</span>
+          <span class="price-oldprice">￥{{ item.oldprice }}</span>
+        </div>
+      </lazy-component>
+    </van-skeleton>
+    </van-list>
+  </van-pull-refresh>
+</template>
+
+<script setup>
+import { physicalPackageList } from '@/api/physicalApi'
+import { useRoute,useRouter } from 'vue-router';
+import { ref, reactive, onMounted } from 'vue'
+// 瀑布流
+const loading = ref(false);
+// 页数
+const paging = ref(1)
+// 下拉刷新
+const refreshing = ref(false);
+// 滚动到底部
+const finished = ref(false);
+
+const route = useRoute();
+const router = useRouter()
+
+// 渲染数据
+const listData = ref([]) 
+
+// 是否显示骨架屏
+const guJialoading = ref(true)
+
+// 加载数据的方法
+    const onLoad = async () => {
+      // loading.value = true;
+      if (refreshing.value) {
+        listData.value = [];
+        refreshing.value = false;
+      }
+      // 异步更新数据
+      const ret = await physicalPackageList(route.query.det,paging.value)
+      if (ret.code === 0) {
+        listData.value.push(...ret.data) // 通过 .value 更新响应式变量
+        guJialoading.value = false
+        loading.value = false;
+        paging.value++
+      }
+      // 加载状态结束
+      // 数据全部加载完成
+      else if(ret.code=== -1){
+        finished.value = true;
+      }
+    };
+    
+    
+// 下拉刷新
+const onRefresh = () => {
+  // 清空列表数据
+      finished.value = false;
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      loading.value = true;
+      paging.value=1
+      onLoad();
+    };
+
+
+
+
+// 计算属性=>长度超过 maxLength 显示为 '...'
+const truncateLocation = (location) => {
+  const maxLength = 10;
+  if (location.length > maxLength) {
+    return location.substring(0, maxLength) + '...';
+  } else {
+    return location;
+  }
+}
+
+const goDetail = (id)=>{
+  const det = route.query.det
+  router.push({ name: '套餐详情', params: { id,det } });
+}
+
+</script>
+
+<style lang="scss" scoped>
+// .packageListParentDiv{
+//   width: 100%;
+//   height: 100%;
+// }
+.packageList{
+    margin-top: 43.2px;
+    margin-bottom: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    padding-bottom: 50px;
+    .van-pull-refresh{
+      width: 100%;
+    }
+    .packageList-item{
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 35px;
+        .packageList-name{
+            font-size: 28px;
+            line-height: 36px;
+            color: rgb(69,81,84);
+        }
+        .packageList-location{
+            color:rgb(150, 159, 162);
+            font-size: 24px;
+        }
+        .price-box{
+            display: flex;
+            align-content: flex-start;
+            .price-sellingprice,.price-oldprice{
+                color:rgb(69, 81, 84);
+                font-size: 28px;
+                margin-right: 20px;
+              }
+              .price-oldprice{
+                color:rgb(150, 159, 162);
+                background-image: url('	https://cdn7.axureshop.com/demo2023/112525/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u75.png');
+                background-repeat: no-repeat;
+                background-position: center center ;
+                background-size: 2px center;
+            }
+        }
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/physical/index.vue b/src/views/physical/index.vue
index c4bf7b879b33fa1d3d67f84868dcec28d6307cd5..4507d5e0b22c59d8c4a9da2f33e16561429f8dac 100644
--- a/src/views/physical/index.vue
+++ b/src/views/physical/index.vue
@@ -2,10 +2,13 @@
     <div>
         <situationTitle />
     </div>
+    <Suspense>
+        <classification />
+    </Suspense>
 </template>
 
 <script setup>
-
+import classification from './ui/classification.vue'
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/physical/ui/classification.vue b/src/views/physical/ui/classification.vue
new file mode 100644
index 0000000000000000000000000000000000000000..46b081ba35bb43297da13876782c0cf04432806f
--- /dev/null
+++ b/src/views/physical/ui/classification.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="classification-cards">
+        <van-cell-group inset v-for="item in data" :key="item.name">
+  <van-cell is-link :to="item.url" center>
+  <!-- 使用 title 插槽来自定义标题 -->
+  <template #title>
+    <van-image
+    radius="5"
+  width="50"
+  height="50"
+  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+/>
+    <span class="custom-title">{{ item.name }}</span>
+    <span class="custom-total">{{ item.total }} 个</span>
+  </template>
+</van-cell>
+</van-cell-group>
+    </div>
+</template>
+
+<script setup>
+import { physicalPackageClassification } from '@/api/physicalApi.js'
+let ret = await physicalPackageClassification()
+const data = ref([])
+if(ret.code === 0){
+    data.value =  ret.data
+}
+</script>
+
+<style lang="scss" scoped>
+.van-cell{
+    background-color:rgb(244, 246, 246);
+    margin-top:26px;
+}
+.custom-title{
+    font-size:32px;
+    position:relative;
+    top:-58px;
+    left:12.4px;
+    color:rgb(69,81,84);
+}
+.custom-total{
+    position:relative;
+    top:-13.2px;
+    left:-249.2px;
+    color:rgb(150,159,162);
+    font-size:24px;
+}
+</style>
\ No newline at end of file