refactor(goods): replace scss styles with inline tailwind utilities

delete the redundant goods page stylesheet and update all template styling to use Tailwind CSS utilities instead of scoped scss, adjust price display and button styling to match the original design while preserving all page functionality

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>

src/pages/goods/styles/index.scss

@@ -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;
-  }
-}