diff --git a/src/pages/goods/index.vue b/src/pages/goods/index.vue
index f2effba..29f1f73 100644
--- a/src/pages/goods/index.vue
+++ b/src/pages/goods/index.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="goods-container">
+  <div class="flex flex-col h-screen bg-white">
     <TopNavBar :title="navOpacity < 0.5 ? '' : '商品详情'" :background="`rgba(217, 238, 255, ${navOpacity})`"
       :titleColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
       :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'" />
 
     <!-- 滚动区域 -->
-    <div class="content-wrapper" @scroll="handleScroll">
+    <div class="flex-1 overflow-y-auto" @scroll="handleScroll">
       <imgSwiper :border-radius="0" :height="300" :images="goodsData.commodityPhotoList" thumbnailBottom="42px" />
 
-      <div class="goods-content">
+      <div class="bg-white py-[20px] relative -mt-[30px] z-10 rounded-t-[28px]">
         <!-- 商品信息组件 -->
         <GoodInfo :goodsData="goodsData" />
 
@@ -38,13 +38,19 @@
     </div>
 
     <!-- 立即抢购 -->
-    <div class="footer border-top">
-      <div class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8">
-        {{ calculatedTotalPrice }}
+    <div
+      class="sticky bottom-0 bg-white px-[12px] pt-[12px] pb-[24px] z-10 shrink-0 flex items-center border-t border-ink-200">
+      <div class="flex items-center mr-[8px] text-[#FF3D60]">
+        <span class="text-[16px] font-medium">¥</span>
+        <span class="text-[20px] font-bold  leading-[28px]">
+          {{ calculatedTotalPrice }}
+        </span>
       </div>
 
-      <div class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8" @click="navigateToPay(goodsData)">
-        <img class="icon" src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png" />
+      <div
+        class="flex items-center ml-auto pl-[8px] rounded-[10px] w-[120px] h-[48px] bg-linear-[90deg, #ff3d60_57%, #ff990c_100%]"
+        @click="navigateToPay(goodsData)">
+        <img class="w-[34px] h-[48px]" src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png" />
         <span class="font-size-16 font-500 color-white">立即预定</span>
       </div>
     </div>
diff --git a/src/pages/goods/styles/index.scss b/src/pages/goods/styles/index.scss
deleted file mode 100644
index 67eaa1c..0000000
--- a/src/pages/goods/styles/index.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-$button-color: #00a6ff;
-
-.goods-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background-color: #fff;
-
-  // 顶部导航栏固定样式
-  :deep(.top-nav-bar) {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    flex-shrink: 0;
-    transition: background-color 0.3s ease;
-  }
-
-  // 使用须知样式
-  .use-notice {
-    margin: 16px 0;
-  }
-
-  .use-notice-content {
-    .module-item {
-      display: flex;
-      align-items: flex-start;
-      flex-direction: column;
-      padding: 12px 0;
-
-      .module-icon {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        margin-right: 8px;
-        flex-shrink: 0;
-
-        .module-title {
-          font-size: 14px;
-          color: #333;
-          text-align: center;
-          word-wrap: break-word;
-          margin-left: 4px;
-        }
-      }
-
-      .module-desc {
-        flex: 1;
-        font-size: 12px;
-        color: #666;
-        line-height: 1.5;
-        margin-top: 4px;
-      }
-    }
-    .border-bottom {
-      border-bottom: 1px solid #f0f0f0;
-    }
-  }
-
-  .content-wrapper {
-    flex: 1;
-    height: 0; // 关键：让flex子项能够正确计算高度
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch; // iOS平滑滚动
-  }
-
-  .goods-content {
-    border-radius: 28px 28px 0 0;
-    background-color: #fff;
-    padding: 20px 0;
-    position: relative;
-    margin-top: -30px;
-    z-index: 1;
-  }
-}
-
-.footer {
-  position: sticky;
-  bottom: 0;
-  background-color: #fff;
-  box-sizing: border-box;
-  padding: 12px 12px 24px;
-  z-index: 10;
-  flex-shrink: 0; // 防止被压缩
-  display: flex;
-  align-items: center;
-
-  .amt {
-    &::before {
-      content: "¥";
-      font-size: 16px;
-      font-weight: 500;
-    }
-  }
-
-  .btn {
-    width: 120px;
-    height: 48px;
-    background: linear-gradient(90deg, #ff3d60 57%, #ff990c 100%);
-  }
-
-  .icon {
-    height: 48px;
-    width: 34px;
-  }
-}