From 6d7cad25ea86ef5fb3b46b0feb880237fe14cacb Mon Sep 17 00:00:00 2001
From: huangzhenbao <17818024429@163.com>
Date: Wed, 25 Feb 2026 15:54:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=A1=B5=E9=9D=A2=E7=BB=86?=
 =?UTF-8?q?=E8=8A=824?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/mall/admin/decoration/category.uvue     | 527 +++++++++---------
 .../admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md    |  13 +-
 2 files changed, 282 insertions(+), 258 deletions(-)

diff --git a/pages/mall/admin/decoration/category.uvue b/pages/mall/admin/decoration/category.uvue
index 17db6535..abc3003c 100644
--- a/pages/mall/admin/decoration/category.uvue
+++ b/pages/mall/admin/decoration/category.uvue
@@ -1,6 +1,6 @@
 <template>
   <view class="admin-decoration-category">
-    <!-- 顶部标题与按钮 -->
+    <!-- 顶部标题与按钮 (PageHeader 标准模式) -->
     <view class="page-header border-shadow">
       <view class="header-left">
         <text class="page-title">商品分类</text>
@@ -15,176 +15,173 @@
       </view>
     </view>
 
-    <!-- 分类展示区域 -->
+    <!-- 分类展示区域 (Reason 26: 统一白卡模式) -->
     <view class="content-container anim-fade-in">
       <view class="main-card border-shadow">
-        <view class="style-list">
-        
-        <!-- 样式1 -->
-        <view class="style-card-wrapper">
-          <view :class="['style-card', selectedStyle === 1 ? 'active' : '']" @click="selectedStyle = 1">
-            <view class="phone-mock">
-              <view class="phone-header">
-                <text class="p-title">产品分类</text>
-                <text class="p-dots">••• Ⓞ</text>
-              </view>
-              <view class="phone-body">
-                <view class="search-bar">
-                  <text class="ic-search">🔍</text>
-                  <text class="search-ph">点击搜索商品信息</text>
+        <view class="style-grid">
+          
+          <!-- 样式 1 -->
+          <view class="style-item" @click="selectedStyle = 1">
+            <view :class="['mock-phone', selectedStyle === 1 ? 'active' : '']">
+              <view class="phone-inner">
+                <!-- 顶部栏 -->
+                <view class="p-header">
+                  <text class="p-title">产品分类</text>
+                  <text class="p-dots">••• Ⓞ</text>
                 </view>
-                <view class="style1-content">
-                  <view class="sidebar-mock">
-                    <text class="sb-item active">精选水果</text>
-                    <text class="sb-item" v-for="name in ['肉制品','水产海鲜','米面粮油','厨房主食','新鲜蛋品','调味品','日配冷藏','豆制品']" :key="name">{{name}}</text>
+                <!-- 搜索栏 -->
+                <view class="p-search">
+                  <text class="p-search-ic">🔍</text>
+                  <text class="p-search-txt">点击搜索商品信息</text>
+                </view>
+                <!-- 内容区 -->
+                <view class="p-content-row">
+                  <view class="p-side">
+                    <text class="p-side-item active">精选水果</text>
+                    <text class="p-side-item" v-for="name in ['肉制品','水产海鲜','米面粮油','厨房主食','新鲜蛋品','调味品','日配冷藏','豆制品']" :key="name">{{name}}</text>
                   </view>
-                  <view class="main-mock">
-                    <view class="category-section">
-                      <view class="section-title"><text class="st-txt">精选水果</text></view>
-                      <view class="grid-container">
-                        <view class="grid-item" v-for="i in 6" :key="i">
-                          <view class="item-img-box"><text class="item-placeholder">🍐</text></view>
-                          <text class="item-txt">{{ ['精品香蕉','坚果优选','猕猴桃','大肉块','五花肉','鸡腿'][i-1] }}</text>
-                        </view>
+                  <view class="p-main">
+                    <view class="p-section-title">精选水果</view>
+                    <view class="p-item-grid">
+                      <view class="p-grid-item" v-for="i in 6" :key="'s1-1-'+i">
+                        <view class="p-item-img-box"><text class="p-emoji">🍐</text></view>
+                        <text class="p-item-name">{{ ['精品香蕉','坚果优选','猕猴桃','精品香蕉','坚果优选','猕猴桃'][i-1] }}</text>
                       </view>
                     </view>
-                    <view class="category-section">
-                      <view class="section-title"><text class="st-txt">肉制品</text></view>
-                      <view class="grid-container">
-                         <view class="grid-item" v-for="i in 3" :key="i">
-                          <view class="item-img-box"><text class="item-placeholder">🥩</text></view>
-                          <text class="item-txt">{{ ['大肉块','五花肉','鸡腿'][i-1] }}</text>
-                        </view>
+                    <view class="p-section-title">肉制品</view>
+                    <view class="p-item-grid">
+                      <view class="p-grid-item" v-for="i in 3" :key="'s1-2-'+i">
+                        <view class="p-item-img-box"><text class="p-emoji">🥩</text></view>
+                        <text class="p-item-name">{{ ['大肉块','五花肉','鸡腿'][i-1] }}</text>
                       </view>
                     </view>
                   </view>
                 </view>
-              </view>
-              <view class="phone-tabbar">
-                <view class="tb-item"><text class="tb-ic">🏠</text></view>
-                <view class="tb-item active"><text class="tb-ic">📂</text></view>
-                <view class="tb-item"><text class="tb-ic">🛒</text></view>
-                <view class="tb-item"><text class="tb-ic">👤</text></view>
+                <!-- 底部栏 -->
+                <view class="p-tabbar">
+                  <view class="p-tab-item"><text class="p-tab-ic">🏠</text><text class="p-tab-txt">首页</text></view>
+                  <view class="p-tab-item active"><text class="p-tab-ic">📂</text><text class="p-tab-txt">分类</text></view>
+                  <view class="p-tab-item"><text class="p-tab-ic">🛒</text><text class="p-tab-txt">购物车</text></view>
+                  <view class="p-tab-item"><text class="p-tab-ic">👤</text><text class="p-tab-txt">我的</text></view>
+                </view>
               </view>
             </view>
+            <text :class="['style-label', selectedStyle === 1 ? 'active' : '']">样式1</text>
           </view>
-          <text class="style-name" :style="{color: selectedStyle === 1 ? '#2d8cf0' : '#666'}">样式1</text>
-        </view>
 
-        <!-- 样式2 -->
-        <view class="style-card-wrapper">
-          <view :class="['style-card', selectedStyle === 2 ? 'active' : '']" @click="selectedStyle = 2">
-            <view class="phone-mock">
-               <view class="phone-header-img"></view>
-               <view class="phone-header-v2">
-                 <text class="p2-title">分类</text>
-                 <view class="home-ic">🏠</view>
-               </view>
-               <view class="phone-body p2-body">
-                 <view class="search-bar-v2">
-                   <text class="ic-search">🔍</text>
-                   <text class="search-ph">点击搜索商品信息</text>
-                 </view>
-                 <view class="tabs-v2">
-                   <text class="t2-item active">水果</text>
-                   <text class="t2-item">全部</text>
-                   <text class="t2-item">热带水果</text>
-                   <text class="t2-item">西瓜葡萄</text>
-                   <text class="t2-arrow">▼</text>
-                 </view>
-                 <view class="style2-content">
-                    <view class="sidebar-v2">
-                      <text class="s2-item active">乳品</text>
-                      <text class="s2-item">午间零食</text>
-                      <text class="s2-item">新鲜蔬菜</text>
-                      <text class="s2-item">美妆护肤</text>
-                      <text class="s2-item">宠物用品</text>
-                      <text class="s2-item">户外玩具</text>
-                    </view>
-                    <view class="main-v2">
-                      <view class="banner-mock-v2">
-                        <text class="b-txt">深层 V8 高清直屏\n双镜头/VR科技体验</text>
-                      </view>
-                      <view class="prod-v2" v-for="i in 2" :key="i">
-                        <text class="p-name">Haier/海尔 BCD-216STPT 时尚静音冰箱 三门出门租家用小型电冰箱</text>
-                        <view class="p-price-row">
-                          <text class="p-price">¥999.00</text>
-                          <text class="p-sales">已售 92</text>
-                          <view class="btn-buy"><text class="buy-txt">立即购买</text></view>
-                        </view>
-                      </view>
-                    </view>
-                 </view>
-               </view>
-               <view class="cart-badge">🛒<text class="badge-num">7</text></view>
-               <view class="footer-p2">
-                 <text class="f2-total">¥999.00</text>
-                 <view class="btn-settle"><text class="settle-txt">去结算</text></view>
-               </view>
-            </view>
-          </view>
-          <text class="style-name" :style="{color: selectedStyle === 2 ? '#2d8cf0' : '#666'}">样式2</text>
-        </view>
-
-        <!-- 样式3 -->
-        <view class="style-card-wrapper">
-          <view :class="['style-card', selectedStyle === 3 ? 'active' : '']" @click="selectedStyle = 3">
-            <view class="phone-mock">
-              <view class="phone-header">
-                <text class="p-title">产品分类</text>
-              </view>
-              <view class="phone-body">
-                <view class="search-bar-v3">
-                  <view class="home-btn">🏠</view>
-                  <view class="search-input-v3">
-                    <text class="ic-search">🔍</text>
-                    <text class="search-ph">搜索商品</text>
-                  </view>
+          <!-- 样式 2 -->
+          <view class="style-item" @click="selectedStyle = 2">
+            <view :class="['mock-phone', selectedStyle === 2 ? 'active' : '']">
+              <view class="phone-inner">
+                <!-- 状态栏 -->
+                <view class="p-stat-bar">
+                  <text class="p-time">9:41 AM</text>
+                  <text class="p-bat">100% 🔋</text>
                 </view>
-                <view class="tabs-v3">
-                  <text class="t3-item active">水果</text>
-                  <text class="t3-item specialty">时时生鲜</text>
-                  <text class="t3-item">休闲零食</text>
-                  <text class="t3-item">坚果蜜饯</text>
-                  <text class="t3-arrow">∨</text>
+                <!-- 顶部导航 -->
+                <view class="p-header-v2">
+                   <view class="p-back">🏠</view>
+                   <view class="p-search-box-v2">
+                     <text class="p-search-ic">🔍</text>
+                     <text class="p-search-txt">点击搜索商品信息</text>
+                   </view>
                 </view>
-                <view class="style3-content">
-                  <view class="sidebar-v3">
-                     <text class="s3-item active">乳品</text>
-                     <text class="s3-item">午间零食</text>
-                     <text class="s3-item">新鲜蔬菜</text>
-                     <text class="s3-item">特惠专区</text>
-                     <text class="s3-item">大闸蟹</text>
-                     <text class="s3-item">精选礼盒</text>
+                <!-- 分类选项卡 -->
+                <view class="p-tab-row-v2">
+                  <text class="p-tab-v2 active">水果</text>
+                  <text class="p-tab-v2">全部</text>
+                  <text class="p-tab-v2">热带水果</text>
+                  <text class="p-tab-v2">西瓜葡萄</text>
+                  <text class="p-arrow-v2">▼</text>
+                </view>
+                <!-- 内容区 -->
+                <view class="p-content-row">
+                  <view class="p-side-v2">
+                    <text class="p-side-item-v2 active">乳品</text>
+                    <text class="p-side-item-v2" v-for="name in ['休闲零食','新鲜蔬菜','美妆护肤','宠物用品','图书玩具']" :key="name">{{name}}</text>
                   </view>
-                  <view class="main-v3">
-                    <view class="prod-v3" v-for="i in 5" :key="i">
-                      <view class="pv-img"></view>
-                      <view class="pv-info">
-                        <text class="pv-name">【橙中爱马仕】果际新骑士晚季甜橙10个单装</text>
-                        <text class="pv-price">¥25.99</text>
-                      </view>
-                      <view class="pv-add-box">
-                         <text class="pv-add">🛒</text>
-                      </view>
+                  <view class="p-main">
+                    <view class="p-banner-v2">
+                      <text class="p-banner-txt">深层 V8 高清直屏\n双镜头/VR科技体验</text>
+                    </view>
+                    <view class="p-prod-list-v2">
+                       <view class="p-prod-v2" v-for="i in 2" :key="'s2-'+i">
+                         <text class="p-prod-title">Haier/海尔 BCD-216STPT 时尚静音冰箱 三门出口租家用小型电冰箱</text>
+                         <view class="p-prod-footer-v2">
+                           <text class="p-price">¥999.00</text>
+                           <text class="p-sales">已售 92</text>
+                           <view class="p-buy-btn">立即购买</view>
+                         </view>
+                       </view>
                     </view>
                   </view>
                 </view>
-              </view>
-              <view class="cart-v3">
-                <view class="c3-ic-box">🛒<text class="c3-badge">7</text></view>
-                <text class="c3-price">¥999.00</text>
-                <view class="btn-settle-v3"><text class="settle-txt">去结算</text></view>
+                <!-- 蓝色底部条 -->
+                <view class="p-cart-bar">
+                   <view class="p-cart-icon-box">🛒<text class="p-cart-badge">7</text></view>
+                   <text class="p-cart-total">¥999.00</text>
+                   <view class="p-settle-btn">去结算</view>
+                </view>
               </view>
             </view>
+            <text :class="['style-label', selectedStyle === 2 ? 'active' : '']">样式2</text>
           </view>
-          <text class="style-name" :style="{color: selectedStyle === 3 ? '#2d8cf0' : '#666'}">样式3</text>
-        </view>
 
+          <!-- 样式 3 -->
+          <view class="style-item" @click="selectedStyle = 3">
+            <view :class="['mock-phone', selectedStyle === 3 ? 'active' : '']">
+              <view class="phone-inner">
+                <!-- 顶部导航 -->
+                <view class="p-header">
+                  <text class="p-title">产品分类</text>
+                </view>
+                <view class="p-header-v3">
+                   <view class="p-back">🏠</view>
+                   <view class="p-search-box-v3">
+                     <text class="p-search-ic">🔍</text>
+                     <text class="p-search-txt">搜索商品</text>
+                   </view>
+                </view>
+                <!-- 分类项 -->
+                <view class="p-tab-row-v3">
+                   <text class="p-tab-item-v3">水果</text>
+                   <text class="p-tab-item-v3 active">时令生鲜</text>
+                   <text class="p-tab-item-v3">休闲零食</text>
+                   <text class="p-tab-item-v3">坚果蜜饯</text>
+                   <text class="p-arrow-v3">∨</text>
+                </view>
+                <!-- 内容区 -->
+                <view class="p-content-row">
+                  <view class="p-side-v3">
+                    <text class="p-side-item-v3 active">乳品</text>
+                    <text class="p-side-item-v3" v-for="name in ['休闲零食','新鲜蔬菜','特惠专区','大闸蟹','精选礼盒']" :key="name">{{name}}</text>
+                  </view>
+                  <view class="p-main-v3">
+                    <view class="p-prod-row-v3" v-for="i in 5" :key="'s3-'+i">
+                       <view class="p-prod-img-v3"></view>
+                       <view class="p-prod-info-v3">
+                         <text class="p-prod-name-v3">【橙中爱马仕】果际新骑士晚季甜橙10个单装</text>
+                         <text class="p-prod-price-v3">¥25.99</text>
+                       </view>
+                       <view class="p-prod-action-v3">🛒</view>
+                    </view>
+                  </view>
+                </view>
+                 <!-- 红色底部条 -->
+                 <view class="p-cart-bar-v3">
+                   <view class="p-cart-icon-box-v3">🛒<text class="p-cart-badge">7</text></view>
+                   <text class="p-cart-total-v3">¥999.00</text>
+                   <view class="p-settle-btn-v3">去结算</view>
+                </view>
+              </view>
+            </view>
+            <text :class="['style-label', selectedStyle === 3 ? 'active' : '']">样式3</text>
+          </view>
+
+        </view>
       </view>
     </view>
   </view>
-</view>
 </template>
 
 <script setup lang="uts">
@@ -193,7 +190,6 @@ import { ref } from 'vue'
 const selectedStyle = ref(1)
 
 const handleSave = () => {
-  console.log('Saving classification style:', selectedStyle.value)
   uni.showToast({ title: '保存成功', icon: 'success' })
 }
 
@@ -204,11 +200,9 @@ const handleReset = () => {
 
 <style scoped lang="scss">
 .admin-decoration-category {
-  padding: 0;
-  background-color: transparent;
-  min-height: auto;
   display: flex;
   flex-direction: column;
+  background-color: transparent;
 }
 
 .border-shadow {
@@ -216,6 +210,7 @@ const handleReset = () => {
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
 }
 
+/* PageHeader */
 .page-header {
   height: 60px;
   padding: 0 24px;
@@ -223,11 +218,8 @@ const handleReset = () => {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  z-index: 10;
 }
-
 .page-title { font-size: 16px; font-weight: 600; color: #303133; }
-
 .header-right { display: flex; flex-direction: row; gap: 12px; }
 
 .btn-primary, .btn-ghost {
@@ -239,17 +231,15 @@ const handleReset = () => {
   justify-content: center;
   cursor: pointer;
 }
-
 .btn-primary { background-color: #2d8cf0; }
-.btn-ghost { border: 1px solid #dcdfe6; position: relative; }
-
+.btn-ghost { border: 1px solid #dcdfe6; }
 .btn-txt { color: #fff; font-size: 14px; }
 .ghost-txt { color: #606266; font-size: 14px; }
 
+/* Content Container */
 .content-container {
-  flex: 1;
-  padding: 0;
   margin-top: 20px;
+  flex: 1;
 }
 
 .main-card {
@@ -259,138 +249,161 @@ const handleReset = () => {
   min-height: 800px;
 }
 
-.style-list {
-  display: flex;
-  flex-direction: row;
-  gap: 30px;
-  flex-wrap: wrap;
+/* Responsive Grid (1250px -> 3, 700px -> 1) */
+.style-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 40px;
 }
 
-.style-card-wrapper {
+@media (max-width: 1250px) {
+  .style-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 700px) {
+  .style-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.style-item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 15px;
-}
-
-.style-card {
-  width: 320px;
-  height: 640px;
-  background-color: #fff;
-  border: 2px solid transparent;
-  border-radius: 20px;
-  overflow: hidden;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+  gap: 16px;
   cursor: pointer;
+}
+
+/* Mock Phone Structure */
+.mock-phone {
+  width: 300px;
+  height: 620px;
+  border: 1px solid #eeeeee;
+  border-radius: 12px;
+  padding: 8px;
+  background-color: #fff;
   transition: all 0.3s;
+  box-shadow: 0 2px 15px rgba(0,0,0,0.05);
+  position: relative;
 }
 
-.style-card.active {
+.mock-phone.active {
   border-color: #2d8cf0;
-  box-shadow: 0 4px 20px rgba(45, 140, 240, 0.2);
+  box-shadow: 0 4px 25px rgba(45, 140, 240, 0.15);
 }
 
-.style-name { font-size: 14px; font-weight: bold; }
+.phone-inner {
+  width: 100%;
+  height: 100%;
+  background-color: #f8f8f8;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
 
-/* Phone Mockup Common */
-.phone-mock { width: 100%; height: 100%; display: flex; flex-direction: column; background-color: #fff; }
-.phone-header { height: 44px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 15px; border-bottom: 1px solid #eee; }
+.style-label {
+  font-size: 14px;
+  color: #333;
+}
+.style-label.active {
+  color: #2d8cf0;
+  font-weight: bold;
+}
+
+/* Style 1 Specific */
+.p-header { height: 44px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 12px; background-color: #fff; border-bottom: 1px solid #f0f0f0; }
 .p-title { font-size: 15px; font-weight: bold; color: #333; }
 .p-dots { font-size: 12px; color: #333; }
 
-.phone-body { flex: 1; background-color: #f8f8f8; display: flex; flex-direction: column; overflow: hidden; }
+.p-search { margin: 8px; height: 32px; background-color: #fff; border-radius: 16px; border: 1px solid #eee; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }
+.p-search-ic { font-size: 10px; margin-right: 6px; color: #999; }
+.p-search-txt { font-size: 11px; color: #999; }
 
-/* Style 1 Specific */
-.search-bar { height: 32px; background-color: #f2f2f2; margin: 10px; border-radius: 16px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }
-.ic-search { font-size: 12px; margin-right: 6px; color: #999; }
-.search-ph { font-size: 11px; color: #999; }
+.p-content-row { flex: 1; display: flex; flex-direction: row; overflow: hidden; }
+.p-side { width: 80px; background-color: #f7f7f7; display: flex; flex-direction: column; }
+.p-side-item { height: 44px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666; }
+.p-side-item.active { background-color: #fff; color: #f2270c; font-weight: bold; position: relative; }
+.p-side-item.active::before { content: ''; position: absolute; left: 0; top: 15px; height: 14px; width: 3px; background-color: #f2270c; }
 
-.style1-content { flex: 1; display: flex; flex-direction: row; }
-.sidebar-mock { width: 80px; background-color: #f7f7f7; display: flex; flex-direction: column; }
-.sb-item { height: 44px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666; }
-.sb-item.active { background-color: #fff; color: #f2270c; font-weight: bold; position: relative; }
-.sb-item.active::before { content: ''; position: absolute; left: 0; top: 15px; height: 14px; width: 3px; background-color: #f2270c; }
+.p-main { flex: 1; background-color: #fff; padding: 12px; overflow-y: auto; }
+.p-section-title { font-size: 12px; font-weight: bold; color: #333; margin-bottom: 12px; }
+.p-item-grid { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
+.p-grid-item { width: 60px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
+.p-item-img-box { width: 50px; height: 50px; background-color: #f9f9f9; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
+.p-emoji { font-size: 24px; }
+.p-item-name { font-size: 10px; color: #666; text-align: center; }
 
-.main-mock { flex: 1; background-color: #fff; padding: 10px; }
-.section-title { margin-bottom: 10px; }
-.st-txt { font-size: 12px; font-weight: bold; color: #333; }
-.grid-container { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
-.grid-item { width: 68px; display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
-.item-img-box { width: 50px; height: 50px; background-color: #f5f5f5; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
-.item-placeholder { font-size: 24px; }
-.item-txt { font-size: 10px; color: #666; }
-
-.phone-tabbar { height: 48px; display: flex; flex-direction: row; border-top: 1px solid #eee; }
-.tb-item { flex: 1; display: flex; align-items: center; justify-content: center; }
-.tb-ic { font-size: 20px; color: #999; }
-.tb-item.active .tb-ic { color: #f2270c; }
+.p-tabbar { height: 50px; background-color: #fff; border-top: 1px solid #f0f0f0; display: flex; flex-direction: row; }
+.p-tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
+.p-tab-ic { font-size: 18px; color: #999; }
+.p-tab-txt { font-size: 9px; color: #999; }
+.p-tab-item.active .p-tab-ic, .p-tab-item.active .p-tab-txt { color: #f2270c; }
 
 /* Style 2 Specific */
-.phone-header-img { height: 20px; background-color: #fff; }
-.phone-header-v2 { height: 34px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 12px; }
-.p2-title { font-size: 14px; font-weight: bold; flex: 1; text-align: center; }
-.home-ic { font-size: 16px; margin-right: 20px;}
+.p-stat-bar { height: 24px; padding: 0 12px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: #fff; }
+.p-time { font-size: 10px; font-weight: bold; }
+.p-bat { font-size: 10px; }
 
-.search-bar-v2 { height: 30px; background-color: #fff; margin: 8px 12px; border-radius: 15px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; border: 1px solid #eee; }
-.tabs-v2 { height: 40px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 15px; }
-.t2-item { font-size: 12px; color: #333; }
-.t2-item.active { color: #f2270c; font-weight: bold; border-bottom: 2px solid #f2270c; }
-.t2-arrow { font-size: 10px; color: #999; }
+.p-header-v2 { height: 44px; background-color: #fff; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 10px; }
+.p-back { font-size: 16px; }
+.p-search-box-v2 { flex: 1; height: 30px; background-color: #f5f5f5; border-radius: 15px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }
 
-.style2-content { flex: 1; display: flex; flex-direction: row; }
-.sidebar-v2 { width: 70px; background-color: #f7f7f7; }
-.s2-item { height: 48px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #333; }
-.s2-item.active { background-color: #fff; font-weight: bold; }
+.p-tab-row-v2 { height: 40px; background-color: #fff; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 15px; }
+.p-tab-v2 { font-size: 12px; color: #333; }
+.p-tab-v2.active { color: #f2270c; font-weight: bold; border-bottom: 2px solid #f2270c; padding-bottom: 2px; }
+.p-arrow-v2 { font-size: 10px; color: #999; flex: 1; text-align: right; }
 
-.main-v2 { flex: 1; background-color: #fff; padding: 10px; }
-.banner-mock-v2 { height: 80px; background-color: #0081ff; border-radius: 6px; padding: 10px; display: flex; align-items: center; margin-bottom: 12px; }
-.b-txt { font-size: 12px; color: #fff; font-weight: bold; line-height: 1.4; }
+.p-side-v2 { width: 70px; background-color: #f7f7f7; }
+.p-side-item-v2 { height: 48px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #333; }
+.p-side-item-v2.active { background-color: #fff; font-weight: bold; }
 
-.prod-v2 { border-bottom: 1px solid #f5f5f5; padding-bottom: 10px; margin-bottom: 10px; }
-.p-name { font-size: 11px; color: #333; line-height: 1.3; margin-bottom: 8px; max-height: 28px; overflow: hidden; }
-.p-price-row { display: flex; flex-direction: row; align-items: center; }
-.p-price { font-size: 12px; color: #f2270c; font-weight: bold; margin-right: 6px; }
-.p-sales { font-size: 9px; color: #999; flex: 1; }
-.btn-buy { background-color: #f2270c; padding: 4px 8px; border-radius: 10px; }
-.buy-txt { font-size: 9px; color: #fff; }
+.p-banner-v2 { height: 80px; background-color: #1a56f0; border-radius: 6px; padding: 12px; display: flex; align-items: center; margin-bottom: 12px; }
+.p-banner-txt { color: #fff; font-size: 12px; font-weight: bold; line-height: 1.4; }
 
-.cart-badge { position: absolute; bottom: 65px; left: 15px; width: 34px; height: 34px; background-color: #fff; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
-.badge-num { position: absolute; top: 0; right: 0; background-color: #f2270c; color: #fff; font-size: 9px; width: 14px; height: 14px; border-radius: 7px; text-align: center; }
+.p-prod-v2 { border-bottom: 1px solid #f0f0f0; padding-bottom: 12px; margin-bottom: 12px; }
+.p-prod-title { font-size: 11px; color: #333; line-height: 1.4; margin-bottom: 8px; }
+.p-prod-footer-v2 { display: flex; flex-direction: row; align-items: center; }
+.p-price { font-size: 14px; color: #f2270c; font-weight: bold; flex: 1; }
+.p-sales { font-size: 10px; color: #999; margin-right: 12px; }
+.p-buy-btn { background-color: #f2270c; color: #fff; font-size: 10px; padding: 4px 10px; border-radius: 12px; }
 
-.footer-p2 { height: 50px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 15px; border-top: 1px solid #eee; }
-.f2-total { font-size: 16px; color: #f2270c; font-weight: bold; }
-.btn-settle { background-color: #f2270c; padding: 6px 16px; border-radius: 18px; }
-.settle-txt { color: #fff; font-size: 14px; }
+.p-cart-bar { height: 50px; background-color: #fff; border-top: 1px solid #f0f0f0; display: flex; flex-direction: row; align-items: center; padding: 0 12px; margin-top: auto; }
+.p-cart-icon-box { width: 36px; height: 36px; background-color: #f2270c; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; position: relative; margin-top: -10px; }
+.p-cart-badge { position: absolute; top: -4px; right: -4px; background-color: #fff; color: #f2270c; font-size: 9px; width: 14px; height: 14px; border-radius: 7px; text-align: center; border: 1px solid #f2270c; }
+.p-cart-total { font-size: 15px; color: #f2270c; font-weight: bold; flex: 1; margin-left: 10px; }
+.p-settle-btn { background-color: #f2270c; color: #fff; font-size: 14px; padding: 6px 20px; border-radius: 20px; }
 
 /* Style 3 Specific */
-.search-bar-v3 { height: 44px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 10px; background-color: #fff; }
-.home-btn { font-size: 16px; }
-.search-input-v3 { flex: 1; height: 30px; background-color: #f5f5f5; border-radius: 15px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }
+.p-header-v3 { height: 44px; background-color: #fff; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 10px; }
+.p-search-box-v3 { flex: 1; height: 30px; background-color: #f5f5f5; border-radius: 15px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }
 
-.tabs-v3 { height: 40px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 12px; background-color: #fff; }
-.t3-item { font-size: 12px; color: #666; white-space: nowrap; }
-.t3-item.active { color: #f2270c; font-weight: bold; font-size: 14px; }
-.t3-item.specialty { background-color: #f2270c; color: #fff; padding: 2px 8px; border-radius: 10px; }
-.t3-arrow { font-size: 12px; color: #ccc; flex: 1; text-align: right; }
+.p-tab-row-v3 { height: 44px; background-color: #fff; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 12px; }
+.p-tab-item-v3 { font-size: 12px; color: #666; }
+.p-tab-item-v3.active { background-color: #f2270c; color: #fff; padding: 4px 10px; border-radius: 14px; }
+.p-arrow-v3 { font-size: 10px; color: #ccc; flex: 1; text-align: right; }
 
-.style3-content { flex: 1; display: flex; flex-direction: row; background-color: #fff; }
-.sidebar-v3 { width: 75px; background-color: #f7f7f7; }
-.s3-item { height: 50px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666; }
-.s3-item.active { background-color: #fff; color: #333; font-weight: bold; position: relative; }
-.s3-item.active::before { content: ''; position: absolute; left: 0; top: 18px; height: 14px; width: 3px; background-color: #f2270c; }
+.p-side-v3 { width: 75px; background-color: #f7f7f7; }
+.p-side-item-v3 { height: 48px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666; }
+.p-side-item-v3.active { background-color: #fff; color: #333; font-weight: bold; position: relative; }
+.p-side-item-v3.active::before { content: ''; position: absolute; left: 0; top: 17px; height: 14px; width: 3px; background-color: #f2270c; }
 
-.main-v3 { flex: 1; padding: 10px; }
-.prod-v3 { display: flex; flex-direction: row; margin-bottom: 12px; position: relative; }
-.pv-img { width: 70px; height: 70px; background-color: #f5f5f5; border-radius: 4px; margin-right: 10px; }
-.pv-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
-.pv-name { font-size: 11px; color: #333; line-height: 1.3; overflow: hidden; max-height: 30px; }
-.pv-price { font-size: 13px; color: #f2270c; font-weight: bold; }
-.pv-add-box { position: absolute; right: 0; bottom: 0; }
-.pv-add { font-size: 18px; color: #f2270c; }
+.p-main-v3 { flex: 1; background-color: #fff; padding: 12px; overflow-y: auto; }
+.p-prod-row-v3 { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; }
+.p-prod-img-v3 { width: 70px; height: 70px; background-color: #f5f5f5; border-radius: 4px; margin-right: 12px; }
+.p-prod-info-v3 { flex: 1; display: flex; flex-direction: column; gap: 8px; }
+.p-prod-name-v3 { font-size: 12px; color: #333; line-height: 1.4; }
+.p-prod-price-v3 { font-size: 14px; color: #f2270c; font-weight: bold; }
+.p-prod-action-v3 { font-size: 20px; color: #f2270c; }
+
+.p-cart-bar-v3 { height: 50px; background-color: #fff; border-top: 1px solid #f0f0f0; display: flex; flex-direction: row; align-items: center; padding: 0 12px; margin-top: auto; }
+.p-cart-icon-box-v3 { width: 36px; height: 36px; background-color: #fff; border-radius: 18px; border: 1px solid #f2270c; display: flex; align-items: center; justify-content: center; color: #f2270c; font-size: 18px; position: relative; margin-top: -10px; }
+.p-cart-total-v3 { font-size: 15px; color: #f2270c; font-weight: bold; flex: 1; margin-left: 10px; }
+.p-settle-btn-v3 { background-color: #f2270c; color: #fff; font-size: 14px; padding: 6px 20px; border-radius: 20px; }
 
-.cart-v3 { height: 50px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; border-top: 1px solid #eee; position: relative; }
-.c3-ic-box { font-size: 24px; color: #f2270c; margin-right: 10px; position: relative; margin-top: -15px;}
-.c3-badge { position: absolute; top: 0; right: -5px; background-color: #f2270c; color: #fff; font-size: 9px; width: 14px; height: 14px; border-radius: 7px; text-align: center; }
-.c3-price { font-size: 14px; color: #f2270c; font-weight: bold; flex: 1; }
-.btn-settle-v3 { background-color: #f2270c; padding: 6px 20px; border-radius: 20px; }
 </style>
+
diff --git a/pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md b/pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md
index 35a6ad04..da45594f 100644
--- a/pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md
+++ b/pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md
@@ -23,7 +23,18 @@
      - `768px - 1199px`: 固定 2 列 (`grid-template-columns: repeat(2, minmax(0, 1fr))`)。
      - `< 768px`: 固定 1 列 (`grid-template-columns: repeat(1, minmax(0, 1fr))`)。
   4. 使用 `minmax(0, 1fr)` 配分子项 `min-width: 0` 确保在任何容器宽度下网格不被撑爆。
-- **强制规则**: 任何页面都不允许出现一行 3 个卡片的情况。
+- **强制规则**: 任何页面都不允许出现一行 3 个卡片的情况。(注：除非是类似“商品分类”样式的预览展示，需遵循下文响应式规则)
+
+#### **原因二十七：响应式预览网格布局 (装饰/设计模块规范)**
+
+- **现象**: 在小屏下预览手机模型重叠或在大屏下留白过多。
+- **解决方案**:
+  1. 使用 `display: grid` 代替 `flex-wrap`。
+  2. **三段式响应式**:
+     - `> 1250px`: `grid-template-columns: repeat(3, 1fr);` (一行 3 个)
+     - `700px ~ 1250px`: `grid-template-columns: repeat(2, 1fr);` (一行 2 个)
+     - `< 700px`: `grid-template-columns: 1fr;` (一行 1 个)
+  3. **Case Study**: `pages/mall/admin/decoration/category.uvue` (商品分类) 采用了此标准实现 1:1 视觉复刻。
 
 #### **原因十三：侧边栏响应式断点与 Overlay 冲突 (严重体验红线)**