diff --git a/src/assets/fonts/9RNKTxomYL9P.woff2 b/src/assets/fonts/9RNKTxomYL9P.woff2
new file mode 100644
index 0000000..8c31415
Binary files /dev/null and b/src/assets/fonts/9RNKTxomYL9P.woff2 differ
diff --git a/src/assets/image 57.png b/src/assets/image 57.png
new file mode 100644
index 0000000..24e5dc9
Binary files /dev/null and b/src/assets/image 57.png differ
diff --git a/src/assets/image 59.png b/src/assets/image 59.png
new file mode 100644
index 0000000..24e5dc9
Binary files /dev/null and b/src/assets/image 59.png differ
diff --git a/src/assets/image 61.png b/src/assets/image 61.png
new file mode 100644
index 0000000..24e5dc9
Binary files /dev/null and b/src/assets/image 61.png differ
diff --git a/src/assets/image 66.png b/src/assets/image 66.png
new file mode 100644
index 0000000..8eda4be
Binary files /dev/null and b/src/assets/image 66.png differ
diff --git a/src/assets/image 67.png b/src/assets/image 67.png
new file mode 100644
index 0000000..eae41be
Binary files /dev/null and b/src/assets/image 67.png differ
diff --git a/src/assets/image 68.png b/src/assets/image 68.png
new file mode 100644
index 0000000..d95a5d6
Binary files /dev/null and b/src/assets/image 68.png differ
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 4da8bdf..f3c9e4a 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="w-full footer-bg">
-    <footer class="max-w-screen-xl mx-auto w-full footer  text-white p-10">
+  <div class="w-full footer-bg py-[80px]">
+    <footer class="max-w-screen-xl mx-auto w-full footer  text-white">
       <nav>
         <h6 class="footer-title">Services</h6>
         <a class="link link-hover">Branding</a>
diff --git a/src/style.css b/src/style.css
index c9dd1e2..0561254 100644
--- a/src/style.css
+++ b/src/style.css
@@ -4,4 +4,11 @@
 
 #app {
   background-color: #b8f0ff63;
+}
+
+@font-face {
+  font-family: 'MySubsetFont';
+  src: url('assets/fonts/9RNKTxomYL9P.woff2') format('woff2');
+  /* 选择最优格式 */
+  font-display: swap;
 }
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index bc35b56..302bf24 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -269,12 +269,12 @@
       </div>
     </div>
     <div class="w-full">
-      <div class="max-w-screen-xl mx-auto py-[100px]">
+      <div class="max-w-screen-xl mx-auto py-[74px]">
         <div class="text-center text-[32px] font-bold mb-[117px]">
           功能简述
         </div>
-        <div class="flex justify-between">
-          <div class="flex-custom-item relative flex justify-center flex-col">
+        <div class="flex justify-between  flex-wrap">
+          <div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
             <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
               src="../assets/image 53.png" alt="">
             <div class="text-center text-[24px] font-bold mt-[32px]">
@@ -285,7 +285,7 @@
             </div>
           </div>
 
-          <div class="flex-custom-item relative flex justify-center flex-col">
+          <div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
             <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
               src="../assets/image 53.png" alt="">
             <div class="text-center text-[24px] font-bold mt-[32px]">
@@ -296,7 +296,7 @@
             </div>
           </div>
 
-          <div class="flex-custom-item relative flex justify-center flex-col">
+          <div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
             <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
               src="../assets/image 53.png" alt="">
             <div class="text-center text-[24px] font-bold mt-[32px]">
@@ -307,6 +307,112 @@
             </div>
           </div>
 
+          <div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
+            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
+              src="../assets/image 66.png" alt="">
+            <div class="text-center text-[24px] font-bold mt-[32px]">
+              检索追踪
+            </div>
+            <div class="text-center text-custom-content flex-1  flex items-center">
+              通过样品编号、名称、类型等多种方式快速定 位样品信息，实时记录样品的流通和 使用情况综合查询
+            </div>
+          </div>
+
+          <div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
+            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
+              src="../assets/image 57.png" alt="">
+            <div class="text-center text-[24px] font-bold mt-[32px]">
+              库存库位
+            </div>
+            <div class="text-center text-custom-content flex-1  flex items-center">
+              分类编码、库位规划布局以及智能化推荐库位，通 过标识迅速追踪定位，支持可视化自定义创建库 位，实现了通过库位查样品或通过样品查库位
+            </div>
+          </div>
+
+
+          <div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
+            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
+              src="../assets/image 67.png" alt="">
+            <div class="text-center text-[24px] font-bold mt-[32px]">
+              系统管理
+            </div>
+            <div class="text-center text-custom-content flex-1  flex items-center">
+              菜单、按钮、公告、附件、基础数据、消息通知 配置、全局字典等系统配置
+            </div>
+          </div>
+
+          <div class="flex-custom-item relative flex justify-center flex-col">
+            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
+              src="../assets/image 59.png" alt="">
+            <div class="text-center text-[24px] font-bold mt-[32px]">
+              库存预警
+            </div>
+            <div class="text-center text-custom-content flex-1  flex items-center">
+              动态监控样品库存状态，库存量查询与统计。 根据阈值实时检测库存量，低于阈值企微、 邮件、短信等渠道即刻发出预警通知
+            </div>
+          </div>
+
+          <div class="flex-custom-item relative flex justify-center flex-col">
+            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
+              src="../assets/image 68.png" alt="">
+            <div class="text-center text-[24px] font-bold mt-[32px]">
+              可视化页面
+            </div>
+            <div class="text-center text-custom-content flex-1  flex items-center">
+              直观展示设备使用情况和库存库位信息，具备实时 更新、交互查询、全局可观等功能，支持快速了 解使用率、预警情况及库位布局
+            </div>
+          </div>
+
+          <div class="flex-custom-item relative flex justify-center flex-col">
+            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
+              src="../assets/image 61.png" alt="">
+            <div class="text-center text-[24px] font-bold mt-[32px]">
+              自由扩展
+            </div>
+            <div class="text-center text-custom-content flex-1  flex items-center">
+              支持接入智能化监控设备，如温感、烟感、温湿 器等设备，提供REST API接口衔接各种 LIMS系统
+            </div>
+          </div>
+
+
+        </div>
+      </div>
+    </div>
+    <div class="w-full service-custom-bg py-[60px]">
+      <div class="max-w-screen-xl mx-auto">
+        <div class="text-center text-[32px] font-bold mb-[40px]">
+          服务与价格
+        </div>
+        <div class="flex gap-[28px]">
+          <div class="base-wrap flex-1">
+            <div class="base-price  base-one">
+              <div class="base-icon base-icon-one">
+                旗舰版
+              </div>
+              <div class="flex items-center mt-[124px] justify-center">
+                <span class="price-title mr-[16px]">早鸟价</span>
+                <div>
+                  <span class="price-content">49,999</span>
+                  <span class="price-unit"> 元/年</span>
+                </div>
+
+              </div>
+            </div>
+          </div>
+          <div class="base-wrap flex-1">
+            <div class="base-price  base-two">
+              <div class="base-icon base-icon-two">
+                豪华版
+              </div>
+            </div>
+          </div>
+          <div class="base-wrap flex-1">
+            <div class="base-price  base-three">
+              <div class="base-icon base-icon-three">
+                标准版
+              </div>
+            </div>
+          </div>
 
         </div>
       </div>
@@ -421,6 +527,82 @@ const btnList = ref([
   text-underline-position: from-font;
   text-decoration-skip-ink: none;
   color: #666666;
-  padding: 0px 31px;
+  padding: 0px 16px;
+}
+
+.service-custom-bg {
+  background: linear-gradient(98.33deg, rgba(0, 62, 160, 0.05) 0%, rgba(10, 169, 248, 0.05) 100.12%);
+}
+
+.base-wrap {
+  border-radius: 14px;
+  background-color: #fff;
+}
+
+.base-price {
+  height: 507px;
+  border-radius: 14px;
+  position: relative;
+  margin: 3px;
+  box-sizing: border-box;
+  overflow: hidden;
+  /* padding: 2px; */
+}
+
+.base-icon {
+  width: 188px;
+  height: 64px;
+  top: 0;
+  right: 0;
+  position: absolute;
+  /* background: linear-gradient(96.87deg, #FFFEF9 0%, #ADA293 96.38%); */
+  border-radius: 0 0 0 14px;
+  font-family: 'MySubsetFont';
+  font-size: 32px;
+  text-align: center;
+  line-height: 64px;
+}
+
+.base-icon-one {
+  background: linear-gradient(96.87deg, #FFFEF9 0%, #ADA293 96.38%);
+  color: #493B3B;
+}
+
+.base-icon-two {
+  background: linear-gradient(96.87deg, #FFE079 0%, #BE8945 96.38%);
+  color: #FFFFFF;
+}
+
+.base-icon-three {
+  background: #FFFDF5;
+  color: #333333;
+}
+
+
+.base-one {
+  background: linear-gradient(180deg, #E3EAFA 0%, #FFFFFF 100%);
+}
+
+.base-two {
+  background: linear-gradient(180deg, #FFF7E4 0%, rgba(247, 243, 233, 0.1) 100%);
+}
+
+.base-three {
+  background: linear-gradient(180deg, #C9E7FF 0%, #FFFFFF 100%);
+}
+
+.price-title {
+  font-family: PingFang SC;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.price-content {
+  font-family: 'D-DIN';
+  font-size: 40px;
+  font-weight: 700;
+}
+.price-unit {
+  font-size: 22px;
 }
 </style>