From b98687bebc7a708d8a89991606ac8979438c6948 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Thu, 28 May 2026 09:02:12 +0800
Subject: [PATCH] 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         |  22 +++---
 src/pages/goods/styles/index.scss | 107 ------------------------------
 2 files changed, 14 insertions(+), 115 deletions(-)
 delete mode 100644 src/pages/goods/styles/index.scss

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