style: replace legacy padding classes with inline pixel values

Remove the unused padding.scss stylesheet and its import from the main SCSS entrypoint. Update all legacy padding utility class names across every Vue component to use inline pixel-based utility classes (such as replacing `pl-12` with `pl-[12px]`). Also clean up extraneous whitespace and line breaks in component templates for improved readability.
2026-07-24 16:36:44 +08:00
parent e57617d2c6
commit 79b101978a
50 changed files with 247 additions and 703 deletions
--- a/src/pages/ChatMain/ChatCardOther/index.vue
+++ b/src/pages/ChatMain/ChatCardOther/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="w-full border-box flex flex-col overflow-hidden pl-12 mt-6 mb-6">
+  <view class="w-full border-box flex flex-col overflow-hidden pl-[12px] mt-6 mb-6">
    <text class="font-size-14 color-333">{{ text }}</text>
    <slot></slot>
  </view>
--- a/src/pages/ChatMain/ChatLongAnswer/index.vue
+++ b/src/pages/ChatMain/ChatLongAnswer/index.vue
@@ -6,8 +6,10 @@
    </view>

    <!-- ✅ 滚动区域 -->
-    <scroll-view class="flex-full overflow-hidden chat-scroll" scroll-y :scroll-into-view="scrollIntoViewId" scroll-with-animation @scroll="onScroll" @touchstart="onTouchStart" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
-      <view class="flex flex-col pt-12 px-16 pb-24 border-box gap-10">
+    <scroll-view class="flex-full overflow-hidden chat-scroll" scroll-y :scroll-into-view="scrollIntoViewId"
+      scroll-with-animation @scroll="onScroll" @touchstart="onTouchStart" @touchend="onTouchEnd"
+      @touchcancel="onTouchEnd">
+      <view class="flex flex-col pt-[12px] px-[16px] pb-[24px] border-box gap-10">
        <template v-if="hasStructuredLongTextData">
          <view v-if="headerSections.title || headerSections.tag" class="long-answer-header">
            <view v-if="headerSections.title" class="long-answer-title">
@@ -19,14 +21,10 @@
          </view>

          <template v-for="section in contentSections" :key="section.contentKey">
-            <LongAnswerSectionSkeleton
-              v-if="shouldRenderSectionSkeleton(section)"
-            />
+            <LongAnswerSectionSkeleton v-if="shouldRenderSectionSkeleton(section)" />

-            <ParsedValueView v-else-if="shouldUseParsedValueView(section)"
-              :field-key="section.contentKey"
-              :value="section.parsedValue !== null ? section.parsedValue : section.contentValue"
-            />
+            <ParsedValueView v-else-if="shouldUseParsedValueView(section)" :field-key="section.contentKey"
+              :value="section.parsedValue !== null ? section.parsedValue : section.contentValue" />

            <ChatMarkdown v-else :text="section.contentValue" />
          </template>
@@ -197,11 +195,11 @@ const computeTitle = (text = "") => {
 const onScroll = (e) => {
  try {
    const { scrollTop = 0, scrollHeight = 0 } = e.detail || {};
-    
+
    // 计算距离底部的距离（使用准确的 scroll-view 高度）
    const viewHeight = scrollViewHeight.value;
    const distanceToBottom = scrollHeight - scrollTop - viewHeight;
-    
+
    // 判断是否在底部附近（允许 SCROLL_THRESHOLD 的误差范围）
    // 注意：只更新 isNearBottom，不在滚动时强制改变 userInteracting
    const atBottom = distanceToBottom <= SCROLL_THRESHOLD;
@@ -279,11 +277,11 @@ onLoad(({ message = "", streamId = "", finished = "0", tagToneColor = "" }) => {
        nextTick(() => {
          // 每次接收数据都重新测量高度（content size 可能变化，比如加载图）
          measureScrollViewHeight();
-          
+
          // 流式完成时强制滚动到底部
          if (finished) {
            scrollToBottom();
-          } 
+          }
          // 流式中的数据更新：只有在用户未交互且接近底部时才自动滚动
          else if (!userInteracting.value && isNearBottom.value) {
            scrollToBottom();
--- a/src/pages/ChatMain/ChatMainList/index.vue
+++ b/src/pages/ChatMain/ChatMainList/index.vue
@@ -22,8 +22,8 @@

    <view v-show="tabIndex === 0" class="discovery-shell flex-full" @touchstart.capture="handleDiscoveryPanelTouchStart"
      @touchstart="handleDiscoveryPanelTouchStart" @touchmove.capture="handleDiscoveryPanelTouchMove"
-      @touchmove="handleDiscoveryPanelTouchMove"
-      @touchend="handleDiscoveryPanelTouchEnd" @touchcancel="handleDiscoveryPanelTouchEnd">
+      @touchmove="handleDiscoveryPanelTouchMove" @touchend="handleDiscoveryPanelTouchEnd"
+      @touchcancel="handleDiscoveryPanelTouchEnd">
      <view class="home-welcome-panel">
        <HomeWelcome class="flex-shrink-0" :mainPageDataModel="mainPageDataModel" />
      </view>
@@ -138,7 +138,7 @@
    </scroll-view>

    <!-- 输入框区域 -->
-    <view class="pb-safe-area">
+    <view class="pb-[20px]">
      <ChatQuickAccess />
      <ChatInputArea ref="inputAreaRef" v-model="inputMessage" :holdKeyboard="holdKeyboard"
        :is-session-active="isSessionActive" :stop-request="stopRequest" @send="sendMessageAction"
--- a/src/pages/ChatMain/ChatTopNavBar/index.vue
+++ b/src/pages/ChatMain/ChatTopNavBar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="border-box h-44 flex flex-items-center pl-12 pr-12" :style="navBarStyle">
+  <view class="border-box h-44 flex flex-items-center pl-[12px] pr-[12px]" :style="navBarStyle">
    <view class="nav-icon-button" @tap.stop="showDrawer">
      <uni-icons type="bars" size="24" color="#ffffff" />
    </view>
--- a/src/pages/ChatMain/ChatTopWelcome/index.vue
+++ b/src/pages/ChatMain/ChatTopWelcome/index.vue
@@ -1,8 +1,8 @@
 v
 <template>
-  <view class="welcome-content border-box p-12">
+  <view class="welcome-content border-box p-[12px]">
    <view class="wrap rounded-20">
-      <view class="flex flex-items-center flex-justify-between border-box pl-12 pr-12">
+      <view class="flex flex-items-center flex-justify-between border-box pl-[12px] pr-[12px]">
        <SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
          :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
          :displayWidth="spriteStyle.displayWidth" :fps="16" />
--- a/src/pages/ChatMain/NoticeMessage/detail.vue
+++ b/src/pages/ChatMain/NoticeMessage/detail.vue
@@ -6,11 +6,11 @@
    </view>

    <!-- ✅ 滚动区域 -->
-    <scroll-view class="flex-full overflow-hidden" scroll-y >
-      <view class="pb-24 border-box overflow-hidden">
+    <scroll-view class="flex-full overflow-hidden" scroll-y>
+      <view class="pb-[24px] border-box overflow-hidden">
        <image v-if="coverImage" class="w-full h-auto block" :src="coverImage" mode="widthFix" />

-        <view class="pt-16 px-12 pb-24 border-box">
+        <view class="pt-[16px] px-[12px] pb-[24px] border-box">
          <view class="color-171717 font-size-16 font-weight-600">{{ detailTitle }}</view>

          <view v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-16">
@@ -18,7 +18,7 @@
            <text class="color-171717 font-size-12 font-weight-600 ml-8">发布时间：{{ publishTime }}</text>
          </view>

-          <view class="mt-20 pt-16 color-666 font-size-14 line-height-20 border-top">{{ noticeContent }}</view>
+          <view class="mt-20 pt-[16px] color-666 font-size-14 line-height-20 border-top">{{ noticeContent }}</view>
        </view>
      </view>
    </scroll-view>
@@ -61,7 +61,6 @@ onLoad((query = {}) => {
 </script>

 <style lang="scss" scoped>
-
 .notice-time-tag {
  display: inline-flex;
  height: 28px;
@@ -71,5 +70,4 @@ onLoad((query = {}) => {
  border-radius: 14px;
  box-sizing: border-box;
 }
-
 </style>
--- a/src/pages/ChatModule/AnswerComponent/index.vue
+++ b/src/pages/ChatModule/AnswerComponent/index.vue
@@ -2,17 +2,13 @@
  <view v-if="shouldRenderCard" class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
    <!-- 占位撑开 -->
    <view class="w-vw"></view>
-    <view class="flex flex-col px-16 pt-16 pb-12 border-box" @click="lookDetailAction">
+    <view class="flex flex-col px-[16px] pt-[16px] pb-[12px] border-box" @click="lookDetailAction">
      <view v-if="tag" class="long-answer-tag" :style="longAnswerTagStyle">{{ tag }}</view>
      <view v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-4">
        <text class="font-size-16 font-600 text-color-900"> {{ title }}</text>
      </view>
      <!-- 文字内容，根据数据模式限制预览行数 -->
-      <view
-        v-if="processedContent"
-        class="answer-content font-size-12 font-color-600"
-        :style="answerContentStyle"
-      >
+      <view v-if="processedContent" class="answer-content font-size-12 font-color-600" :style="answerContentStyle">
        <ChatMarkdown :text="processedContent" :fontColor="'#94A3B8'" />
      </view>
      <!-- 超过2行时显示...提示 -->
@@ -154,7 +150,7 @@ onBeforeUnmount(cleanupStreamWatchers);
 const lookDetailAction = () => {
  const message = previewContent.value ? String(previewContent.value) : "";
  // 使用 StreamManager 以 streamId 转发当前及后续流式更新，详情页通过 streamId 订阅
-  const streamId = `stream_${Date.now()}_${Math.random().toString(36).slice(2,8)}`;
+  const streamId = `stream_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
  const updateStream = () => {
    StreamManager.updateStream(
      streamId,
@@ -211,6 +207,7 @@ const lookDetailAction = () => {
  text-overflow: ellipsis;
  line-height: 16px;
 }
+
 .long-answer-tag {
  display: inline-flex;
  width: fit-content;
--- a/src/pages/ChatModule/CallMobile/index.vue
+++ b/src/pages/ChatModule/CallMobile/index.vue
@@ -1,16 +1,17 @@
 <template>
  <uni-popup ref="popup" type="center" :safe-area="false">
-    <view class="popup-content bg-white border-box mx-24 px-12 py-16 rounded-12">
-      <view class="header flex flex-items-center pb-12">
-        <view class="title flex-full text-center font-size-17 color-000 font-500 ml-24">呼叫热线</view>
+    <view class="popup-content bg-white border-box mx-24 px-[12px] py-16 rounded-12">
+      <view class="header flex flex-items-center pb-[12px]">
+        <view class="title flex-full text-center font-size-17 color-000 font-500 ml-[24px]">呼叫热线</view>
        <uni-icons type="close" size="24" color="#CACFD8" @click="close" />
      </view>

-      <view class="border-box pl-12 pr-12">
+      <view class="border-box pl-[12px] pr-[12px]">
        <view class="font-size-16 color-A3A3A3 line-height-22">
-            如有任何疑问，欢迎随时致电景区咨询热线：
-            <text class="color-2563EB" @click="handleClick(mobleNumber1)">{{mobleNumber1}}</text> / <text class="color-2563EB" @click="handleClick(mobleNumber2)">{{mobleNumber2}}</text>，
-            我们将全程为您提供细致解答与暖心服务。
+          如有任何疑问，欢迎随时致电景区咨询热线：
+          <text class="color-2563EB" @click="handleClick(mobleNumber1)">{{ mobleNumber1 }}</text> / <text
+            class="color-2563EB" @click="handleClick(mobleNumber2)">{{ mobleNumber2 }}</text>，
+          我们将全程为您提供细致解答与暖心服务。
        </view>
      </view>
    </view>
@@ -33,10 +34,10 @@ const close = () => {
 };

 const handleClick = (phoneNumber) => {
-    close();
-    uni.makePhoneCall({
-      phoneNumber: phoneNumber,
-    });
+  close();
+  uni.makePhoneCall({
+    phoneNumber: phoneNumber,
+  });
 };

 uni.$on("SHOW_CALL_MOBILE_POPUP", () => {
@@ -44,6 +45,4 @@ uni.$on("SHOW_CALL_MOBILE_POPUP", () => {
 });
 </script>

-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
--- a/src/pages/ChatModule/DetailCardCompontent/index.vue
+++ b/src/pages/ChatModule/DetailCardCompontent/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="w-full pb-12">
+  <view class="w-full pb-[12px]">
    <view class="w-vw"></view>
    <template v-if="toolCall.picture && toolCall.picture.length > 0">
      <ModuleTitle :title="图片详情" />
--- a/src/pages/ChatModule/FacilityLocationCard/index.vue
+++ b/src/pages/ChatModule/FacilityLocationCard/index.vue
@@ -2,7 +2,7 @@
  <view class="facility-location-card bg-white rounded-24 overflow-hidden w-full">
    <image class="facility-location-card__image block w-full" :src="data.image" mode="aspectFill" />

-    <view class="facility-location-card__body px-24 pb-24">
+    <view class="facility-location-card__body px-[24px] pb-[24px]">
      <view class="facility-location-card__title-row flex flex-items-center">
        <view class="facility-location-card__badge color-2563EB bg-[#eff6ff] font-size-12 font-900">
          {{ type.text }}
--- a/src/pages/ChatModule/GeneratorPhotoComponent/index.vue
+++ b/src/pages/ChatModule/GeneratorPhotoComponent/index.vue
@@ -3,7 +3,7 @@
    <!-- 占位撑开 -->
    <view class="w-vw"></view>
    <view class="content flex flex-col m-4 border-box rounded-24">
-      <view class="flex flex-col p-6 border-box flex-items-center justify-center">
+      <view class="flex flex-col p-[6px] border-box flex-items-center justify-center">
        <image class="w-full rounded-20" :src="componentDataMap.background" mode="widthFix" />

        <!-- 左上角标签 -->
@@ -18,10 +18,10 @@
          {{ componentDataMap.description }}
        </text>

-        <view class="w-full border-box px-12 pb-[8px] flex flex-row" @click="jumpClick">
-          <view class="btn-bg w-full border-box p-4 rounded-24 flex flex-row">
+        <view class="w-full border-box px-[12px] pb-[8px] flex flex-row" @click="jumpClick">
+          <view class="btn-bg w-full border-box p-[4px] rounded-24 flex flex-row">
            <view
-              class="btn-bg-sub w-full border-box p-16 rounded-20 flex flex-row flex-items-center flex-justify-center color-white text-center font-size-18 font-800">
+              class="btn-bg-sub w-full border-box p-[16px] rounded-20 flex flex-row flex-items-center flex-justify-center color-white text-center font-size-18 font-800">
              {{ componentDataMap.buttonName }}
            </view>
          </view>
--- a/src/pages/ChatModule/LongTextGuideCardPreview/index.vue
+++ b/src/pages/ChatModule/LongTextGuideCardPreview/index.vue
@@ -2,7 +2,7 @@
  <view class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
    <!-- 占位撑开 -->
    <view class="w-vw"></view>
-    <view class="flex flex-col px-16 pt-16 pb-12 border-box" @click="openDetail(item)">
+    <view class="flex flex-col px-[16px] pt-[16px] pb-[12px] border-box" @click="openDetail(item)">

      <view class="long-text-guide-card__badge font-size-12 font-900" :class="`is-${item.badgeTone}`">
        {{ item.badge }}
--- a/src/pages/ChatModule/MoreService/index.vue
+++ b/src/pages/ChatModule/MoreService/index.vue
@@ -1,13 +1,13 @@
 <template>
  <uni-popup ref="popup" type="bottom" :safe-area="false">
-    <view class="popup-content border-box pt-12 pl-12 pr-12">
-      <view class="header flex flex-items-center pb-12">
-        <view class="title flex-full text-center font-size-17 color-000 font-500 ml-24">更多服务</view>
+    <view class="popup-content border-box pt-[12px] pl-[12px] pr-[12px]">
+      <view class="header flex flex-items-center pb-[12px]">
+        <view class="title flex-full text-center font-size-17 color-000 font-500 ml-[24px]">更多服务</view>
        <uni-icons type="close" size="24" color="#CACFD8" @click="close" />
      </view>

-      <view class="list bg-white border-box pl-20 pr-20">
-        <view class="item border-box border-bottom pt-20 pb-20" v-for="(item, index) in list" :key="index">
+      <view class="list bg-white border-box pl-[20px] pr-[20px]">
+        <view class="item border-box border-bottom pt-[20px] pb-[20px]" v-for="(item, index) in list" :key="index">
          <view class="flex flex-items-center flex-justify-center">
            <image v-if="item.icon" class="left" :src="item.icon" />
            <view class="center flex-full">
--- a/src/pages/ChatModule/OpenMapComponent/index.vue
+++ b/src/pages/ChatModule/OpenMapComponent/index.vue
@@ -2,8 +2,8 @@
    <view class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
        <!-- 占位撑开 -->
        <view class="w-vw"></view>
-        <view class="flex flex-items-center flex-justify-between p-12 border-box" @click="openMap">
-            <view class="rounded-16 p-16 bg-[#F0F8F3]">
+        <view class="flex flex-items-center flex-justify-between p-[12px] border-box" @click="openMap">
+            <view class="rounded-16 p-[16px] bg-[#F0F8F3]">
                <view class="w-32 h-32 rounded-full bg-white flex flex-items-center flex-justify-center">
                    <uni-icons type="location" size="16" color="#171717" />
                </view>
--- a/src/pages/ChatModule/RecommendationListCard/index.vue
+++ b/src/pages/ChatModule/RecommendationListCard/index.vue
@@ -1,35 +1,23 @@
 <template>
  <view class="recommendation-list-card w-full">
-    <scroll-view
-      class="recommendation-list-card__scroll scroll-x whitespace-nowrap w-full"
-      scroll-x
-      :show-scrollbar="false"
-      enhanced
-    >
-      <view
-        v-for="item in items"
-        :key="item.id || item.title"
+    <scroll-view class="recommendation-list-card__scroll scroll-x whitespace-nowrap w-full" scroll-x
+      :show-scrollbar="false" enhanced>
+      <view v-for="item in items" :key="item.id || item.title"
        class="recommendation-list-card__item inline-block bg-white rounded-20 overflow-hidden"
-        :class="{ 'is-disabled': disabled }"
-        @click="handleSelect(item)"
-      >
-        <image
-          class="recommendation-list-card__image block w-full"
-          :src="item.image"
-          mode="aspectFill"
-        />
-        <view class="recommendation-list-card__body p-16">
+        :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
+        <image class="recommendation-list-card__image block w-full" :src="item.image" mode="aspectFill" />
+        <view class="recommendation-list-card__body p-[16px]">
          <view class="recommendation-list-card__name color-1E293B font-size-18 font-900 ellipsis-1">
            {{ item.title }}
          </view>
-          <view class="recommendation-list-card__distance flex flex-items-center gap-4 mt-4 color-94A3B8 font-size-12 font-800">
+          <view
+            class="recommendation-list-card__distance flex flex-items-center gap-4 mt-4 color-94A3B8 font-size-12 font-800">
            <text class="recommendation-list-card__pin">⌖</text>
            <text>{{ item.distance }}</text>
          </view>
          <view
            class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-12 color-334155 font-size-12 font-900"
-            @click.stop="handleSelect(item)"
-          >
+            @click.stop="handleSelect(item)">
            {{ getActionText(item) }}
          </view>
        </view>
--- a/src/pages/ChatModule/SharedVisual/ActionRow.vue
+++ b/src/pages/ChatModule/SharedVisual/ActionRow.vue
@@ -1,10 +1,9 @@
 <template>
-  <view
-    class="visual-action-row flex flex-items-center gap-12 p-12 bg-white rounded-18 border-box"
-    :class="{ 'is-disabled': disabled }"
-    @click="handleClick"
-  >
-    <view class="visual-action-row__icon flex flex-items-center flex-justify-center w-42 h-42 rounded-14 font-size-18 font-900" :class="toneClass">
+  <view class="visual-action-row flex flex-items-center gap-12 p-[12px] bg-white rounded-18 border-box"
+    :class="{ 'is-disabled': disabled }" @click="handleClick">
+    <view
+      class="visual-action-row__icon flex flex-items-center flex-justify-center w-42 h-42 rounded-14 font-size-18 font-900"
+      :class="toneClass">
      <slot name="icon">{{ icon }}</slot>
    </view>
    <view class="visual-action-row__body flex-full">
--- a/src/pages/ChatModule/SharedVisual/DetailShell.vue
+++ b/src/pages/ChatModule/SharedVisual/DetailShell.vue
@@ -1,6 +1,6 @@
 <template>
  <CardShell variant="detail">
-    <view class="visual-detail__header flex flex-items-center px-16 border-box border-bottom-F1F5F9">
+    <view class="visual-detail__header flex flex-items-center px-[16px] border-box border-bottom-F1F5F9">
      <view class="visual-detail__back mr-8 rounded-full bg-[#f8fafc] color-334155 font-900 text-center"
        @click="$emit('back')">
        <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
--- a/src/pages/Discovery/components/QuickQuestions/index.vue
+++ b/src/pages/Discovery/components/QuickQuestions/index.vue
@@ -1,14 +1,14 @@
 <template>
-  <view class="container pl-12">
+  <view class="container pl-[12px]">
    <view class="container-scroll font-size-0 scroll-x whitespace-nowrap">

-      <view class="card-item bg-white inline-block rounded-20 mr-10"
-        v-for="(item, index) in list" :key="index" @click="sendReply(item)">
+      <view class="card-item bg-white inline-block rounded-20 mr-10" v-for="(item, index) in list" :key="index"
+        @click="sendReply(item)">

-        <view class="flex flex-row flex-justify-start p-10"> 
+        <view class="flex flex-row flex-justify-start p-[10px]">
          <image class="card-img flex-shrink-0 rounded-14" :src="createSvgIndex(index)" />

-          <view class="min-width-0 flex flex-col flex-full border-box pl-8 py-4" >
+          <view class="min-width-0 flex flex-col flex-full border-box pl-[8px] py-[4px]">
            <view class="w-full font-size-12 font-600 color-171717 ellipsis-1">
              {{ item.title }}
            </view>
@@ -17,7 +17,7 @@
            </view>
          </view>
        </view>
-        
+
      </view>
    </view>
  </view>
--- a/src/pages/goods/album/index.vue
+++ b/src/pages/goods/album/index.vue
@@ -1,12 +1,12 @@
 <template>
  <view class="bg-[#f5f7fa] flex flex-col h-screen overflow-hidden">
    <TopNavBar title="房间相册" backgroundColor="transparent" />
-    <view class="p-8">
+    <view class="p-[8px]">
      <text class="ml-4 font-size-18 color-171717 font-500">全部({{ albumList.length }})</text>
    </view>

    <scroll-view scroll-y class="scroll-container overflow-auto">
-      <view class="pl-4 pr-4 pb-24">
+      <view class="pl-[4px] pr-[4px] pb-[24px]">
        <view class="grid-container">
          <view class="album-item" v-for="(item, index) in albumList" :key="index">
            <view class="album-image-wrapper">
--- a/src/pages/goods/components/GoodFacility/index.vue
+++ b/src/pages/goods/components/GoodFacility/index.vue
@@ -1,16 +1,10 @@
 <template>
  <view class="border-box border-top-8">
-    <view
-      class="border-box pt-12 pl-12 pr-12"
-      v-for="(moduleItem, index) in goodsData.commodityEquipment"
-      :key="index"
-    >
-      <view
-        class="flex flex-items-start flex-col"
-        :class="{
-          'border-bottom': index < goodsData.commodityEquipment.length - 1,
-        }"
-      >
+    <view class="border-box pt-[12px] pl-[12px] pr-[12px]" v-for="(moduleItem, index) in goodsData.commodityEquipment"
+      :key="index">
+      <view class="flex flex-items-start flex-col" :class="{
+        'border-bottom': index < goodsData.commodityEquipment.length - 1,
+      }">
        <view class="flex flex-items-center flex-row flex-shrink-0">
          <uni-icons fontFamily="znicons" size="20" color="#171717">
            {{ zniconsMap[moduleItem.icon] }}
@@ -19,12 +13,9 @@
            {{ moduleItem.title }}
          </text>
        </view>
-        <view class="border-box flex flex-col flex-items-start mt-4 pb-12">
-          <text
-            class="font-size-12 color-525866 line-height-20 mb-4"
-            v-for="(text, index) in moduleItem.desc"
-            :key="index"
-          >
+        <view class="border-box flex flex-col flex-items-start mt-4 pb-[12px]">
+          <text class="font-size-12 color-525866 line-height-20 mb-4" v-for="(text, index) in moduleItem.desc"
+            :key="index">
            {{ text }}
          </text>
        </view>
--- a/src/pages/goods/components/GoodInfo/index.vue
+++ b/src/pages/goods/components/GoodInfo/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="good-info border-box pl-12 pr-12">
+  <view class="good-info border-box pl-[12px] pr-[12px]">
    <!-- 标题区域 -->
    <view class="title-section">
      <text class="title">
@@ -13,11 +13,7 @@
    <!-- 设施信息区域 -->
    <view class="facilities-section" v-if="facilitiesList.length">
      <view class="facilities-grid">
-        <view
-          class="facility-item"
-          v-for="(facility, index) in facilitiesList"
-          :key="index"
-        >
+        <view class="facility-item" v-for="(facility, index) in facilitiesList" :key="index">
          <text class="facility-text">{{ facility }}</text>
        </view>
      </view>
--- a/src/pages/goods/components/GoodPackage/index.vue
+++ b/src/pages/goods/components/GoodPackage/index.vue
@@ -1,18 +1,13 @@
 <template>
-  <view class="border-box border-top-8 pl-12 pr-12 pt-6 pb-12">
-    <ModuleTitle
-        v-if="showTitle"
-        title="套餐包含内容"
-    />
-    <view class="flex flex-items-start flex-col"
-        v-for="(item, index) in goodsData.commodityPackageConfig" :key="index"
-    >
-        <view class="title-row py-4 ml-4">
-          <text class="left font-size-14 color-171717">{{ item.name }}</text>
-          <view class="sep" aria-hidden="true"></view>
-          <text class="right font-size-14 color-171717">{{ item.count }}{{ item.unit }}</text>
-        </view>
-        
+  <view class="border-box border-top-8 pl-[12px] pr-[12px] pt-[6px] pb-[12px]">
+    <ModuleTitle v-if="showTitle" title="套餐包含内容" />
+    <view class="flex flex-items-start flex-col" v-for="(item, index) in goodsData.commodityPackageConfig" :key="index">
+      <view class="title-row py-[4px] ml-4">
+        <text class="left font-size-14 color-171717">{{ item.name }}</text>
+        <view class="sep" aria-hidden="true"></view>
+        <text class="right font-size-14 color-171717">{{ item.count }}{{ item.unit }}</text>
+      </view>
+
    </view>
  </view>
 </template>
--- a/src/pages/goods/index.vue
+++ b/src/pages/goods/index.vue
@@ -39,7 +39,7 @@
        {{ calculatedTotalPrice }}
      </view>

-      <view class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8" @click="navigateToPay(goodsData)">
+      <view class="btn border-box rounded-10 flex flex-items-center ml-auto pl-[8px]" @click="navigateToPay(goodsData)">
        <image class="icon" src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png" />
        <text class="font-size-16 font-500 color-white">立即预定</text>
      </view>