From 4bb876e60ea625c6362544752b9c3ab8c3340ef8 Mon Sep 17 00:00:00 2001
From: huangzhenbao <17818024429@163.com>
Date: Wed, 25 Feb 2026 15:44:38 +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=823?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/mall/admin/decoration/category.uvue     |  16 +-
 .../decoration/components/PhonePreview.uvue   |   2 +-
 pages/mall/admin/decoration/data-config.uvue  |   7 +-
 pages/mall/admin/decoration/home.uvue         |  40 +-
 pages/mall/admin/decoration/user.uvue         |   3 +-
 pages/mall/admin/design/theme-style.uvue      | 559 ++++++++++--------
 .../admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md    |  57 ++
 .../mall/admin/marketing/integral/config.uvue |   3 +-
 8 files changed, 415 insertions(+), 272 deletions(-)

diff --git a/pages/mall/admin/decoration/category.uvue b/pages/mall/admin/decoration/category.uvue
index c925ca92..17db6535 100644
--- a/pages/mall/admin/decoration/category.uvue
+++ b/pages/mall/admin/decoration/category.uvue
@@ -16,8 +16,9 @@
     </view>
 
     <!-- 分类展示区域 -->
-    <view class="content-container">
-      <view class="style-list">
+    <view class="content-container anim-fade-in">
+      <view class="main-card border-shadow">
+        <view class="style-list">
         
         <!-- 样式1 -->
         <view class="style-card-wrapper">
@@ -183,6 +184,7 @@
       </view>
     </view>
   </view>
+</view>
 </template>
 
 <script setup lang="uts">
@@ -246,7 +248,15 @@ const handleReset = () => {
 
 .content-container {
   flex: 1;
-  padding: 30px 40px;
+  padding: 0;
+  margin-top: 20px;
+}
+
+.main-card {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 40px;
+  min-height: 800px;
 }
 
 .style-list {
diff --git a/pages/mall/admin/decoration/components/PhonePreview.uvue b/pages/mall/admin/decoration/components/PhonePreview.uvue
index 963e591c..1db45f61 100644
--- a/pages/mall/admin/decoration/components/PhonePreview.uvue
+++ b/pages/mall/admin/decoration/components/PhonePreview.uvue
@@ -259,7 +259,7 @@ const getGroupMockOrigPrice = (i: number): string => {
 <style scoped lang="scss">
 .preview-column {
   width: 420px;
-  background-color: #f7f8fa;
+  background-color: #ffffff;
   display: flex;
   justify-content: center;
   padding: 40px;
diff --git a/pages/mall/admin/decoration/data-config.uvue b/pages/mall/admin/decoration/data-config.uvue
index b0581876..2f7e438f 100644
--- a/pages/mall/admin/decoration/data-config.uvue
+++ b/pages/mall/admin/decoration/data-config.uvue
@@ -13,7 +13,7 @@
     </view>
 
     <!-- 主内容区：三栏布局 -->
-    <view class="main-content">
+    <view class="main-content anim-fade-in">
       <view class="card-container border-shadow">
         <!-- A. 左栏：配置分类菜单 -->
         <MenuSide 
@@ -213,7 +213,8 @@ const handleSelectLink = (index: number) => {
 
 .main-content {
   flex: 1;
-  padding: 24px;
+  padding: 0;
+  margin-top: 20px;
 }
 
 .card-container {
@@ -245,7 +246,7 @@ const handleSelectLink = (index: number) => {
 .settings-desc { font-size: 13px; color: #999; }
 
 /* 开屏广告特有样式 */
-.ad-special-fields { padding: 20px; background-color: #f6f8fb; border-radius: 8px; margin-bottom: 20px; }
+.ad-special-fields { padding: 20px; background-color: #fff; border: 1px solid #f0f0f0; border-radius: 8px; margin-bottom: 20px; }
 .form-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 15px; }
 .field-label { width: 80px; font-size: 14px; color: #333; }
 .input-with-unit { display: flex; flex-direction: row; align-items: center; }
diff --git a/pages/mall/admin/decoration/home.uvue b/pages/mall/admin/decoration/home.uvue
index 2f2cfec0..196cb5a2 100644
--- a/pages/mall/admin/decoration/home.uvue
+++ b/pages/mall/admin/decoration/home.uvue
@@ -1,8 +1,18 @@
 <template>
   <view class="admin-decoration-home">
+    <view class="page-header border-shadow">
+      <view class="header-left">
+        <text class="page-title">店铺装修</text>
+      </view>
+      <view class="header-right">
+        <!-- 如果需要右上角按钮可添加 -->
+      </view>
+    </view>
+
     <view class="content-container">
-      <!-- 左侧：手机预览区 -->
-      <view class="preview-section border-shadow">
+      <view class="main-card border-shadow">
+        <!-- 左侧：手机预览区 -->
+        <view class="preview-section">
         <view class="phone-mock">
           <view class="phone-inner">
             <view class="phone-header-img">
@@ -88,7 +98,7 @@
 
       <!-- 右侧：列表管理区 -->
       <view class="list-section">
-        <view class="manage-card border-shadow">
+        <view class="manage-card">
           <view class="action-bar">
             <view class="btn-primary-blue mr-10" @click="handleAdd">
               <text class="btn-txt">添加页面</text>
@@ -156,7 +166,6 @@
           </view>
         </view>
       </view>
-    </view>
 
     <!-- 添加页面侧边栏 -->
     <view v-if="showDrawer" :class="['drawer-mask', isClosing ? 'mask-fade-out' : '']" @click="closeDrawer">
@@ -281,6 +290,17 @@ const handleSaveDesign = () => {
   min-height: auto;
 }
 
+.page-header {
+  height: 60px;
+  padding: 0 24px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.page-title { font-size: 16px; font-weight: 600; color: #303133; }
+
 .border-shadow {
   background-color: #fff;
   border-radius: 4px;
@@ -290,7 +310,16 @@ const handleSaveDesign = () => {
 .content-container {
   display: flex;
   flex-direction: row;
-  gap: 20px;
+  margin-top: 20px;
+}
+
+.main-card {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 /* 左侧手机预览区 */
@@ -301,6 +330,7 @@ const handleSaveDesign = () => {
   justify-content: center;
   align-items: center;
   padding: 40px 0;
+  border-right: 1px solid #f0f0f0;
 }
 
 .phone-mock {
diff --git a/pages/mall/admin/decoration/user.uvue b/pages/mall/admin/decoration/user.uvue
index fbb849e8..ef413b56 100644
--- a/pages/mall/admin/decoration/user.uvue
+++ b/pages/mall/admin/decoration/user.uvue
@@ -296,6 +296,7 @@ const handleMember = () => {
 .content-container {
   flex: 1;
   padding: 0;
+  margin-top: 20px;
 }
 
 .main-card {
@@ -310,7 +311,7 @@ const handleMember = () => {
 .preview-panel {
   width: 420px;
   padding: 40px;
-  background-color: #f7f8fa;
+  background-color: #ffffff;
   display: flex;
   justify-content: center;
   border-right: 1px solid #f0f0f0;
diff --git a/pages/mall/admin/design/theme-style.uvue b/pages/mall/admin/design/theme-style.uvue
index 08f3bdb7..b0f7da32 100644
--- a/pages/mall/admin/design/theme-style.uvue
+++ b/pages/mall/admin/design/theme-style.uvue
@@ -1,168 +1,193 @@
 <template>
   <view class="admin-main">
     <!-- 头部操作区 -->
-    <view class="header-container">
-      <text class="page-title">主题风格</text>
-      <button class="save-btn" type="primary" size="mini" @click="handleSave">保存</button>
-    </view>
-
-    <!-- 选项卡/卡片容器 -->
-    <view class="card-container selection-area">
-      <view class="theme-list">
-        <view 
-          v-for="(item, index) in themeOptions" 
-          :key="index"
-          class="theme-item"
-          :class="{ active: selectedThemeId === item.id }"
-          @click="selectedThemeId = item.id"
-        >
-          <view class="color-preview" :style="{ backgroundColor: item.color }"></view>
-          <text class="theme-name">{{ item.name }}</text>
-        </view>
+    <view class="page-header border-shadow">
+      <view class="header-left">
+        <text class="page-title">主题风格</text>
+      </view>
+      <view class="header-right">
+        <button class="save-btn" type="primary" size="mini" @click="handleSave">保存</button>
       </view>
     </view>
 
-    <!-- 预览区 -->
-    <view class="preview-section">
-      <!-- 预览 1: 个人中心 -->
-      <view class="preview-card">
-        <text class="p-title">个人中心</text>
-        <view class="mock-phone">
-          <view class="mock-status-bar"></view>
-          <view class="mock-content user-center">
-            <view class="header-bg" :style="{ backgroundColor: currentThemeColor }">
-              <view class="user-info-row">
-                <view class="mock-avatar"></view>
-                <view class="user-meta">
-                  <view class="name-line">
-                    <text class="name">我的名字我的名字</text>
-                    <view class="vip-badge">SVIP</view>
-                  </view>
-                  <text class="user-id">ID: 3659884 ></text>
-                </view>
-                <view class="settings-icons">
-                   <text class="ic">🔔</text>
-                   <text class="ic">⚙️</text>
-                </view>
-              </view>
-              <view class="stats-row">
-                <view class="stat-item"><text class="val">0.00</text><text class="lab">余额</text></view>
-                <view class="stat-item"><text class="val">20</text><text class="lab">积分</text></view>
-                <view class="stat-item"><text class="val">25</text><text class="lab">优惠券</text></view>
-              </view>
-            </view>
-            <view class="vip-card-banner">
-               <view class="vip-left">
-                 <text class="vip-l-t1">会员可享多项权益</text>
-                 <text class="vip-l-t2">会员剩余434天</text>
-               </view>
-               <view class="btn-vip">立即续费</view>
-            </view>
-            
-            <view class="order-section">
-              <view class="o-title"><text>订单中心</text><text class="more">查看全部 ></text></view>
-              <view class="o-icons">
-                <view class="o-item">📦<text>待付款</text></view>
-                <view class="o-item">🚚<text>待发货</text></view>
-                <view class="o-item">🎁<text>待收货</text></view>
-                <view class="o-item">⭐<text>待评价</text></view>
-                <view class="o-item">🔄<text>售后/退款</text></view>
-              </view>
-            </view>
-
-            <view class="invite-banner">
-               <text class="i-t1">邀请好友赚佣金</text>
-               <text class="i-t2">推广好友注册</text>
-            </view>
-
-            <view class="service-section">
-               <view class="s-title">我的服务</view>
-               <view class="s-grid">
-                  <view class="s-item">👤<text>会员中心</text></view>
-                  <view class="s-item">📢<text>我的推广</text></view>
-                  <view class="s-item">📅<text>签到</text></view>
-                  <view class="s-item">🎫<text>优惠券</text></view>
-               </view>
-            </view>
-
-            <view class="mock-tabbar">
-               <view class="t-item">🏠<text>首页</text></view>
-               <view class="t-item">🔍<text>分类</text></view>
-               <view class="t-item">🛒<text>购物车</text></view>
-               <view class="t-item active" :style="{ color: currentThemeColor }">👤<text>我的</text></view>
+    <!-- 主要内容区 -->
+    <view class="main-content anim-fade-in">
+      <view class="main-card border-shadow">
+        <!-- 选项配置: 1:1 复刻参考图 -->
+        <view class="selection-area">
+          <view class="theme-list">
+            <view 
+              v-for="(item, index) in themeOptions" 
+              :key="index"
+              class="theme-item"
+              :class="{ active: selectedThemeId === item.id }"
+              @click="selectedThemeId = item.id"
+            >
+              <view class="color-preview" :style="{ backgroundColor: item.color }"></view>
+              <text class="theme-name">{{ item.name }}</text>
             </view>
           </view>
         </view>
-      </view>
 
-      <!-- 预览 2: 商品详情 -->
-      <view class="preview-card">
-        <text class="p-title">商品详情</text>
-        <view class="mock-phone">
-          <view class="mock-status-bar"></view>
-          <view class="mock-content product-detail">
-             <view class="p-gallery">
-               <text class="p-page">1/5</text>
-             </view>
-             <view class="p-main-info">
-               <view class="p-price-row">
-                 <text class="p-symbol" :style="{ color: currentThemeColor }">¥</text>
-                 <text class="p-price" :style="{ color: currentThemeColor }">199.00</text>
-                 <text class="p-old-price">¥ 100.00</text>
-                 <view class="p-tag-svip">SVIP</view>
-               </view>
-               <text class="p-name">企鹅针织条纹四件套新款上市性价比高</text>
-               <view class="p-stats">
-                 <text>原价: ¥ 234.00</text>
-                 <text>累计销量: 2999999件</text>
-                 <text>库存: 1452件</text>
-               </view>
-             </view>
-             <view class="p-options">
-               <view class="opt-row"><text class="opt-lab">优惠券:</text><view class="tags"><text class="t-red">满100减30</text><text class="t-red">满100减30</text></view><text class="more">></text></view>
-               <view class="opt-row"><text class="opt-lab">活动:</text><view class="tags"><text class="t-action" :style="{ backgroundColor: currentThemeColor }">参与拼团</text><text class="t-action" :style="{ backgroundColor: currentThemeColor }">参与砍价</text><text class="t-action" :style="{ backgroundColor: currentThemeColor }">参与秒杀</text></view><text class="more">></text></view>
-             </view>
-             <view class="p-footer">
-                <view class="f-icons">
-                  <view class="fi"><text>💬</text><text>客服</text></view>
-                  <view class="fi"><text>⭐</text><text>收藏</text></view>
-                  <view class="fi"><text>🛒</text><text>购物车</text></view>
-                </view>
-                <view class="f-btns">
-                  <view class="f-btn cart" :style="{ backgroundColor: currentThemeColor, opacity: 0.7 }">加入购物车</view>
-                  <view class="f-btn buy" :style="{ backgroundColor: currentThemeColor }">立即购买</view>
-                </view>
-             </view>
-          </view>
-        </view>
-      </view>
-
-      <!-- 预览 3: 拼团列表 -->
-      <view class="preview-card">
-        <text class="p-title">拼团列表</text>
-        <view class="mock-phone">
-          <view class="mock-status-bar"></view>
-          <view class="mock-content group-list">
-             <view class="g-header" :style="{ backgroundColor: currentThemeColor }">
-               <text class="g-h-title">拼团列表</text>
-               <view class="g-participation">
-                  <view class="g-avatars"></view>
-                  <text>9999人参与</text>
-               </view>
-             </view>
-             <view class="g-item" v-for="i in 4" :key="i">
-                <view class="g-img"></view>
-                <view class="g-info">
-                  <text class="g-name">2021年新款吊灯简约现代大气家用客厅灯北欧风格餐厅卧...</text>
-                  <view class="g-bottom">
-                    <view class="g-prices">
-                      <text class="g-p-old">¥ 199.00</text>
-                      <text class="g-p-now" :style="{ color: currentThemeColor }">¥ 124.00</text>
+        <!-- 预览区: 1:1 复刻参考图 -->
+        <view class="preview-section">
+          <!-- 预览 1: 个人中心 -->
+          <view class="preview-card-item">
+            <text class="p-title">个人中心</text>
+            <view class="mock-phone">
+              <view class="mock-inner">
+                <view class="mock-status-bar"></view>
+                <view class="mock-content user-center">
+                  <view class="header-bg" :style="{ backgroundColor: currentThemeColor }">
+                    <view class="user-info-row">
+                      <view class="mock-avatar"></view>
+                      <view class="user-meta">
+                        <view class="name-line">
+                          <text class="name">我的名字我的名字</text>
+                          <view class="vip-badge">SVIP</view>
+                        </view>
+                        <text class="user-id">ID: 3659884 ></text>
+                      </view>
+                      <view class="settings-icons">
+                         <text class="ic">🔔</text>
+                         <text class="ic">⚙️</text>
+                      </view>
                     </view>
-                    <view class="g-btn" :style="{ backgroundColor: currentThemeColor }">{{ i % 2 === 0 ? '去拼团' : '已售罄' }}</view>
+                    <view class="stats-row">
+                      <view class="stat-item"><text class="val">0.00</text><text class="lab">余额</text></view>
+                      <view class="stat-item"><text class="val">20</text><text class="lab">积分</text></view>
+                      <view class="stat-item"><text class="val">25</text><text class="lab">优惠券</text></view>
+                    </view>
+                  </view>
+                  <view class="vip-card-banner">
+                     <view class="vip-left">
+                       <text class="vip-l-t1">会员可享多项权益</text>
+                       <text class="vip-l-t2">会员剩余434天</text>
+                     </view>
+                     <view class="btn-vip">立即续费</view>
+                  </view>
+                  
+                  <view class="order-section">
+                    <view class="o-title"><text>订单中心</text><text class="more">查看全部 ></text></view>
+                    <view class="o-icons">
+                      <view class="o-item">📦<text>待付款</text></view>
+                      <view class="o-item">🚚<text>待发货</text></view>
+                      <view class="o-item">🎁<text>待收货</text></view>
+                      <view class="o-item">⭐<text>待评价</text></view>
+                      <view class="o-item">🔄<text>售后/退款</text></view>
+                    </view>
+                  </view>
+
+                  <view class="invite-banner">
+                     <text class="i-t1">邀请好友赚佣金</text>
+                     <text class="i-t2">推广好友注册</text>
+                  </view>
+
+                  <view class="service-section">
+                     <view class="s-title">我的服务</view>
+                     <view class="s-grid">
+                        <view class="s-item">👤<text>会员中心</text></view>
+                        <view class="s-item">📢<text>我的推广</text></view>
+                        <view class="s-item">📅<text>签到</text></view>
+                        <view class="s-item">🎫<text>优惠券</text></view>
+                     </view>
+                  </view>
+
+                  <view class="mock-tabbar">
+                     <view class="t-item">🏠<text>首页</text></view>
+                     <view class="t-item">🔍<text>分类</text></view>
+                     <view class="t-item">🛒<text>购物车</text></view>
+                     <view class="t-item active" :style="{ color: currentThemeColor }">👤<text>我的</text></view>
                   </view>
                 </view>
-             </view>
+              </view>
+            </view>
+          </view>
+
+          <!-- 预览 2: 商品详情 -->
+          <view class="preview-card-item">
+            <text class="p-title">商品详情</text>
+            <view class="mock-phone">
+              <view class="mock-inner">
+                <view class="mock-status-bar"></view>
+                <view class="mock-content product-detail">
+                   <view class="p-gallery">
+                     <text class="p-page">1/5</text>
+                   </view>
+                   <view class="p-main-info">
+                     <view class="p-price-row">
+                       <text class="p-symbol" :style="{ color: currentThemeColor }">¥</text>
+                       <text class="p-price" :style="{ color: currentThemeColor }">199.00</text>
+                       <text class="p-old-price">¥ 100.00</text>
+                       <view class="p-tag-svip">SVIP</view>
+                     </view>
+                     <text class="p-name">企鹅针织条纹四件套新款上市性价比高</text>
+                     <view class="p-stats">
+                       <text class="ps-t">原价: ¥ 234.00</text>
+                       <text class="ps-t">累计销量: 2999999件</text>
+                       <text class="ps-t">库存: 1452件</text>
+                     </view>
+                   </view>
+                   <view class="p-options">
+                     <view class="opt-row">
+                        <text class="opt-lab">优惠券:</text>
+                        <view class="tags-row"><text class="tag-outline">满100减30</text><text class="tag-outline">满100减30</text></view>
+                        <text class="more">></text>
+                     </view>
+                     <view class="opt-row">
+                        <text class="opt-lab">活动:</text>
+                        <view class="tags-row"><text class="tag-fill" :style="{ backgroundColor: currentThemeColor }">参与拼团</text><text class="tag-fill" :style="{ backgroundColor: currentThemeColor }">参与秒杀</text></view>
+                        <text class="more">></text>
+                     </view>
+                   </view>
+                   <view class="p-footer">
+                      <view class="f-icons">
+                        <view class="fi"><text>💬</text><text class="fi-t">客服</text></view>
+                        <view class="fi"><text>⭐</text><text class="fi-t">收藏</text></view>
+                        <view class="fi"><text>🛒</text><text class="fi-t">购物车</text></view>
+                      </view>
+                      <view class="f-btns">
+                        <view class="f-btn cart" :style="{ backgroundColor: currentThemeColor, opacity: 0.7 }">加入购物车</view>
+                        <view class="f-btn buy" :style="{ backgroundColor: currentThemeColor }">立即购买</view>
+                      </view>
+                   </view>
+                </view>
+              </view>
+            </view>
+          </view>
+
+          <!-- 预览 3: 拼团列表 -->
+          <view class="preview-card-item">
+            <text class="p-title">拼团列表</text>
+            <view class="mock-phone">
+              <view class="mock-inner">
+                <view class="mock-status-bar"></view>
+                <view class="mock-content group-list">
+                   <view class="g-header" :style="{ backgroundColor: currentThemeColor }">
+                     <text class="g-h-title">拼团列表</text>
+                     <view class="g-participation">
+                        <text class="g-p-txt">9999人参与</text>
+                     </view>
+                   </view>
+                   <view class="g-item" v-for="i in 3" :key="i">
+                      <view class="g-img"></view>
+                      <view class="g-info">
+                        <text class="g-name-v2">2021年新款吊灯简约现代大气家用客厅灯北欧风格...</text>
+                        <view class="g-bottom-v2">
+                          <view class="g-prices-v2">
+                            <text class="g-p-old-v2">¥ 199.00</text>
+                            <view class="p-now-row">
+                               <text class="ps">¥</text>
+                               <text class="pv" :style="{ color: currentThemeColor }">124.00</text>
+                            </view>
+                          </view>
+                          <view class="g-btn-v2" :style="{ backgroundColor: currentThemeColor }">{{ i % 2 === 0 ? '去拼团' : '已售罄' }}</view>
+                        </view>
+                      </view>
+                   </view>
+                </view>
+              </view>
+            </view>
           </view>
         </view>
       </view>
@@ -202,127 +227,124 @@ const handleSave = () => {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .admin-main {
   padding: 0;
+  background-color: transparent;
+  min-height: auto;
+  display: flex;
+  flex-direction: column;
 }
 
-.header-container {
+.border-shadow {
+  background-color: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+}
+
+.page-header {
+  height: 60px;
+  padding: 0 24px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  background-color: #fff;
-  padding: 10px 20px;
-  border-bottom: 1px solid #f0f0f0;
+  z-index: 100;
 }
 
-.page-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #333;
+.page-title { font-size: 16px; font-weight: bold; color: #333; }
+
+.main-content {
+  flex: 1;
+  padding: 0;
+  margin-top: 20px;
 }
 
-.selection-area {
+.main-card {
   background-color: #fff;
-  padding: 20px;
-  margin: 15px;
-  border-radius: 4px;
+  border-radius: 8px;
+  min-height: 800px;
+  padding: 30px 40px;
+}
+
+/* 1:1 复刻参考图：颜色选择区 */
+.selection-area { 
+  margin-bottom: 30px; 
 }
 
 .theme-list {
   display: flex;
   flex-direction: row;
-  gap: 20px;
+  gap: 15px;
 }
 
 .theme-item {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 8px 16px;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
+  padding: 10px 20px;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
   cursor: pointer;
+  background-color: #fff;
 }
 
 .theme-item.active {
-  border-color: #1890ff;
-  background-color: #e6f7ff;
+  border-color: #2d8cf0;
+  border-width: 1px;
 }
 
-.color-preview {
-  width: 16px;
-  height: 16px;
-  border-radius: 2px;
-  margin-right: 8px;
-}
-
-.theme-name {
-  font-size: 14px;
-  color: #606266;
-}
+.color-preview { width: 14px; height: 14px; border-radius: 2px; margin-right: 10px; }
+.theme-name { font-size: 14px; color: #333; }
 
+/* 预览区布局 */
 .preview-section {
   display: flex;
   flex-direction: row;
-  gap: 20px;
-  padding: 0 15px 20px;
+  gap: 30px;
+  padding-bottom: 40px;
   overflow-x: auto;
 }
 
-.preview-card {
-  background-color: #fff;
-  padding: 16px;
-  border-radius: 4px;
-  width: 292px;
+.preview-card-item {
+  width: 300px;
   flex-shrink: 0;
 }
 
 .p-title {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: bold;
   color: #333;
-  margin-bottom: 12px;
+  margin-bottom: 20px;
   display: block;
   text-align: center;
 }
 
 .mock-phone {
-  width: 260px;
-  height: 540px;
-  border: 1px solid #eee;
-  border-radius: 2px;
+  width: 280px;
+  height: 580px;
+  border: 1px solid #eeeeee;
+  border-radius: 4px;
   margin: 0 auto;
   overflow: hidden;
-  background-color: #f8f8f8;
+  background-color: #f5f5f5;
+  padding: 8px; /* 模拟边框 */
+}
+
+.mock-inner {
+  width: 100%;
+  height: 100%;
+  background-color: #f5f5f5;
   position: relative;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
+  overflow: hidden;
 }
 
-.mock-status-bar {
-  height: 20px;
-}
+.mock-status-bar { height: 20px; }
+.mock-content { height: calc(100% - 20px); overflow-y: auto; }
 
-.mock-content {
-  height: calc(100% - 20px);
-  overflow-y: auto;
-}
-
-/* User Center Mock */
-.user-center .header-bg {
-  padding: 20px 15px 40px;
-  color: #fff;
-}
-
-.user-info-row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.mock-avatar { width: 50px; height: 50px; background-color: #eee; border-radius: 50%; margin-right: 12px; }
+/* 个人中心 Mock */
+.user-center .header-bg { padding: 25px 15px 45px; color: #fff; }
+.user-info-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; }
+.mock-avatar { width: 50px; height: 50px; background-color: #eee; border-radius: 50%; border: 2px solid rgba(255,255,255,0.8); margin-right: 12px; }
 .user-meta { flex: 1; }
 .name-line { display: flex; flex-direction: row; align-items: center; margin-bottom: 4px; }
 .name { font-size: 14px; font-weight: bold; }
@@ -332,62 +354,83 @@ const handleSave = () => {
 
 .stats-row { display: flex; flex-direction: row; justify-content: space-around; }
 .stat-item { display: flex; flex-direction: column; align-items: center; }
-.stat-item .val { font-weight: bold; font-size: 16px; margin-bottom: 4px; }
-.stat-item .lab { font-size: 12px; opacity: 0.9; }
+.stat-item .val { font-weight: bold; font-size: 15px; margin-bottom: 4px; }
+.stat-item .lab { font-size: 11px; opacity: 0.8; }
 
 .vip-card-banner {
-  margin: -30px 15px 15px;
+  margin: -25px 12px 12px;
   background: linear-gradient(90deg, #fceabb 0%, #f8b500 100%);
   border-radius: 8px;
-  padding: 12px 15px;
+  padding: 10px 12px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
 }
-.vip-left { display: flex; flex-direction: column; }
-.vip-l-t1 { font-size: 12px; color: #845506; font-weight: bold; }
-.vip-l-t2 { font-size: 10px; color: #845506; opacity: 0.8; }
-.btn-vip { font-size: 10px; background: #333; color: #fff; padding: 4px 10px; border-radius: 12px; }
+.vip-l-t1 { font-size: 11px; color: #845506; font-weight: bold; }
+.vip-l-t2 { font-size: 9px; color: #845506; opacity: 0.8; }
+.btn-vip { font-size: 9px; background: #333; color: #fff; padding: 3px 10px; border-radius: 10px; }
 
-.order-section { background: #fff; margin: 0 15px 15px; border-radius: 8px; padding: 15px; }
-.o-title { display: flex; flex-direction: row; justify-content: space-between; font-size: 12px; margin-bottom: 15px; }
+.order-section { background: #fff; margin: 0 12px 12px; border-radius: 8px; padding: 12px; }
+.o-title { display: flex; flex-direction: row; justify-content: space-between; font-size: 11px; margin-bottom: 15px; color: #333; }
 .o-icons { display: flex; flex-direction: row; justify-content: space-between; }
-.o-item { display: flex; flex-direction: column; align-items: center; font-size: 10px; gap: 6px; }
+.o-item { display: flex; flex-direction: column; align-items: center; font-size: 10px; gap: 5px; color: #666; }
 
-.invite-banner { margin: 0 15px 15px; height: 60px; background: #fff1f0; border-radius: 8px; padding: 15px; display: flex; flex-direction: column; border: 1px dashed #ffa39e; }
-.i-t1 { font-size: 12px; color: #cf1322; font-weight: bold; margin-bottom: 4px; }
-.i-t2 { font-size: 10px; color: #cf1322; opacity: 0.7; }
+.invite-banner { margin: 0 12px 12px; height: 50px; background: #fff1f0; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; border: 1px dashed #ffa39e; }
+.i-t1 { font-size: 11px; color: #cf1322; font-weight: bold; margin-bottom: 2px; }
+.i-t2 { font-size: 9px; color: #cf1322; opacity: 0.7; }
 
-.service-section { background: #fff; margin: 0 15px; border-radius: 8px; padding: 15px; }
-.s-title { font-size: 12px; font-weight: bold; margin-bottom: 15px; }
+.service-section { background: #fff; margin: 0 12px; border-radius: 8px; padding: 12px; }
+.s-title { font-size: 11px; font-weight: bold; margin-bottom: 12px; }
 .s-grid { display: flex; flex-direction: row; flex-wrap: wrap; }
-.s-item { width: 25%; display: flex; flex-direction: column; align-items: center; font-size: 10px; gap: 8px; margin-bottom: 10px; }
+.s-item { width: 25%; display: flex; flex-direction: column; align-items: center; font-size: 9px; gap: 6px; margin-bottom: 10px; color: #666; }
 
 .mock-tabbar { position: absolute; bottom: 0; width: 100%; height: 50px; background: #fff; border-top: 1px solid #eee; display: flex; flex-direction: row; }
-.t-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: #999; }
-.t-item.active { color: #e93323; }
+.t-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 9px; color: #999; }
 
-/* Product Mock */
-.product-detail .p-gallery { height: 260px; background-color: #eee; position: relative; }
-.p-page { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.5); color: #fff; border-radius: 10px; padding: 2px 8px; font-size: 10px; }
-.p-main-info { background: #fff; padding: 15px; margin-bottom: 10px; }
-.p-price-row { display: flex; flex-direction: row; align-items: baseline; margin-bottom: 8px; }
-.p-symbol { font-size: 14px; font-weight: bold; }
-.p-price { font-size: 24px; font-weight: bold; margin: 0 8px; }
-.p-old-price { font-size: 12px; color: #999; text-decoration: line-through; margin-right: 8px; }
+/* 商品详情 Mock */
+.product-detail .p-gallery { height: 180px; background-color: #eee; background-image: url('/static/logo.png'); background-size: cover; position: relative; }
+.p-page { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.5); color: #fff; border-radius: 10px; padding: 2px 6px; font-size: 9px; }
+.p-main-info { background: #fff; padding: 12px; margin-bottom: 8px; }
+.p-price-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 6px; }
+.p-symbol { font-size: 12px; font-weight: bold; }
+.p-price { font-size: 18px; font-weight: bold; margin: 0 5px; }
+.p-old-price { font-size: 10px; color: #999; text-decoration: line-through; margin-right: 8px; }
+.p-tag-svip { background-color: #333; color: #fadb14; font-size: 9px; padding: 1px 4px; border-radius: 2px; }
+.p-name { font-size: 13px; font-weight: bold; color: #333; display: block; margin-bottom: 8px; }
+.p-stats { display: flex; flex-direction: column; gap: 4px; }
+.ps-t { font-size: 10px; color: #999; }
 
-.p-options { background: #fff; padding: 15px; margin-bottom: 10px; }
-.opt-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 12px; }
-.opt-lab { width: 50px; font-size: 12px; color: #999; }
-.p-footer { position: absolute; bottom: 0; width: 100%; height: 60px; background: #fff; border-top: 1px solid #eee; display: flex; flex-direction: row; padding: 8px 15px; align-items: center; }
-.f-icons { display: flex; flex-direction: row; gap: 15px; margin-right: 10px; }
-.f-btns { flex: 1; display: flex; flex-direction: row; height: 36px; border-radius: 18px; overflow: hidden; }
-.f-btn { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }
+.p-options { background: #fff; padding: 12px; margin-bottom: 8px; }
+.opt-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 10px; }
+.opt-lab { width: 45px; font-size: 11px; color: #999; }
+.tags-row { flex: 1; display: flex; flex-direction: row; gap: 5px; }
+.tag-outline { border: 1px solid #ff4d4f; color: #ff4d4f; font-size: 9px; padding: 1px 4px; border-radius: 2px; }
+.tag-fill { color: #fff; font-size: 9px; padding: 2px 6px; border-radius: 2px; }
+.p-options .more { color: #ccc; font-size: 12px; }
 
-/* Group List Mock */
-.group-list .g-header { padding: 15px; }
-.g-h-title { color: #fff; font-size: 16px; font-weight: bold; display: block; margin-bottom: 10px; }
-.g-item { background: #fff; border-radius: 8px; margin: 12px; padding: 12px; display: flex; flex-direction: row; }
-.g-img { width: 90px; height: 90px; background: #eee; border-radius: 4px; margin-right: 12px; }
+.p-footer { position: absolute; bottom: 0; width: 100%; height: 50px; background: #fff; border-top: 1px solid #eee; display: flex; flex-direction: row; padding: 5px 10px; align-items: center; }
+.f-icons { display: flex; flex-direction: row; gap: 10px; margin-right: 5px; }
+.fi { display: flex; flex-direction: column; align-items: center; font-size: 14px; gap: 2px; }
+.fi-t { font-size: 9px; color: #666; }
+.f-btns { flex: 1; display: flex; flex-direction: row; height: 32px; border-radius: 16px; overflow: hidden; }
+.f-btn { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; }
+
+/* 拼团列表 Mock */
+.group-list .g-header { padding: 15px; position: relative; }
+.g-h-title { color: #fff; font-size: 14px; font-weight: bold; display: block; margin-bottom: 10px; text-align: center; }
+.g-p-txt { color: #fff; font-size: 10px; opacity: 0.9; text-align: center; display: block; }
+.g-item { background: #fff; border-radius: 8px; margin: 10px; padding: 10px; display: flex; flex-direction: row; }
+.g-img { width: 80px; height: 80px; background: #eee; border-radius: 4px; margin-right: 12px; }
+.g-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
+.g-name-v2 { font-size: 12px; color: #333; line-height: 1.4; height: 34px; overflow: hidden; }
+.g-bottom-v2 { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; }
+.g-p-old-v2 { font-size: 9px; color: #999; text-decoration: line-through; }
+.p-now-row { display: flex; flex-direction: row; align-items: baseline; }
+.ps { font-size: 10px; font-weight: bold; margin-right: 2px; }
+.pv { font-size: 15px; font-weight: bold; }
+.g-btn-v2 { padding: 4px 12px; border-radius: 15px; color: #fff; font-size: 10px; }
+
+.anim-fade-in { animation: fadeIn 0.4s ease-out; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
 </style>
\ No newline at end of file
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 854e001b..35a6ad04 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
@@ -1930,3 +1930,60 @@ const iconMap: Record<string, string> = {
 1. **标准化 Script 标签**：统一使用 `<script setup lang="uts">` 或 `<script lang="uts">`（配合 `defineComponent`）。
 2. **规范响应式声明**：避免在 `reactive` 上直接使用泛型（如 `reactive<T>(...)`），应使用类型断言 `reactive(...) as T`。
 3. **避免遗留的 Options API 写法**：尽量将旧的 `export default { data(), methods() }` 结构转换为 Composition API 模式，以获得最佳的 UTS 编译支持。
+
+### 原因二十三：AdminLayout 循环依赖导致 500 错误 (Circular Dependency)
+
+**问题描述：**
+在 H5 环境下，为某个子页面添加 `AdminLayout` 包裹后，Vite 或编译器报错 `500 Internal Server Error (ERR_ABORTED)`，且页面无法加载。
+
+**原因：**
+
+1. **依赖闭环**：`AdminLayout` 导入了侧边栏和路由逻辑，路由逻辑引用了 `adminComponentMap.uts`，而映射表又导入了所有子页面组件。
+2. **递归调用**：如果子页面组件再次导入 `AdminLayout` 试图自我包裹，就会形成死循环依赖，导致 Vite 开发服务器或编译后的模块加载失败。
+
+**解决方案：**
+
+1. **分层包裹架构**：所有注册在 `adminComponentMap.uts` 中的“子页面组件”**必须禁止** 导入和使用 `AdminLayout`。
+2. **统一入口提供布局**：由父级容器（如 `admin/index.uvue` 或顶层路由组件）负责一次性提供 `AdminLayout` 框架。
+
+### 原因二十四：标签切换/动态显显引起的高度抖动 (Layout Jitter)
+
+**问题描述：**
+使用 `v-if` 在不同配置标签间切换，或者动态显示/隐藏表单项时，外部卡片（Card）的尺寸会突然跳动，影响视觉稳定性。
+
+**解决方案：**
+
+1. **预设最小高度**：在 `config-card` 或 `config-body` 上显式设置 `min-height`（如 `550px` 或 `600px`），确保即使内容较少，容器高度也保持不变。
+2. **容器钳制**：确保 `min-height` 足够覆盖该页面中所有可能出现的最高配置项组合。
+
+### 原因二十五：边距一致性与像素级对齐 (Margin Consistency)
+
+**问题描述：**
+页面顶部标题、内容卡片、底部边距在不同页面不一致。例如：有些页面顶部紧贴 breadcrumb，有些页面底部多出大量空白，左右间距不统一。
+
+**解决方案：**
+
+1. **容器级 padding 置空**：子页面根组件（如 `.admin-page`）应设置 `padding: 0`，完全信任 `AdminLayout.uvue` 中 `.content-inner` 提供的 `20px` 标准边距 (`--admin-page-padding-desktop`)。
+2. **三段式间距 (20px 规则)**：
+   - **Header-to-Content Gap (20px)**: 顶部白色标题栏与下方内容卡片之间，统一定义 `margin-top: 20px`。
+   - **External Padding (20px)**: 由框架层 `.content-inner` 提供全局 20px 间距，确保页面四周留白均匀。
+3. **内容区域一致性**：所有装修类的预览组件（如 `.preview-column`）和管理卡片（如 `.manage-card`）应通过这种 20px 的分层间距保持视觉节奏一致。
+
+### 原因二十六：装修模块的“白色背景卡片”统一化 (Unified White Card Pattern)
+
+**问题描述：**
+装修（Decoration）和设计（Design）模块中，预览区（PhonePreview）和设置区（Settings）如果背景色参差不齐（灰白交替）或使用独立阴影的小卡片，会显得界面琐碎且不专业。
+
+**解决方案：**
+
+1. **大卡片容器化**：将左侧预览、中间预览、右侧配置等所有相关内容全部封装在一个 `.main-card` 或 `.card-container` 白色背景容器内，并使用统一阴影 (`0 2px 12px 0 rgba(0, 0, 0, 0.05)`)。
+2. **示例应用 - 主题风格 (theme-style.uvue)**：
+   - 移除原有的多个独立预览 Card，统一至一个大背景。
+   - 颜色选择项（ThemeItem）重构为带有 1px 细边框和特定圆角的微型容器。
+   - 预览手机（MockPhone）间距固定为 30px，并确保在容器内水平平铺。
+3. **避免深色背景块**：在配置表单内部，尽量避免使用深灰色（如 `#f6f8fb`）背景块，改用白色背景加浅灰色细边框 (`1px solid #f0f0f0`)，使整体视觉更加通透一致。
+4. **内部列间距对齐**：左边栏（MenuSide）、中预览（PhonePreview）、右配置（Settings）的内部 Padding 应维持在 30px-40px 左右，确保内容呼吸感一致。
+
+---
+
+这个指南现在涵盖了 uni-app-x 项目开发中最常见的 26 类问题，为后续开发提供了完整的故障排除和标准化指导。 🚀
diff --git a/pages/mall/admin/marketing/integral/config.uvue b/pages/mall/admin/marketing/integral/config.uvue
index b24eb0bf..744b22c0 100644
--- a/pages/mall/admin/marketing/integral/config.uvue
+++ b/pages/mall/admin/marketing/integral/config.uvue
@@ -134,6 +134,7 @@ const handleSubmit = () => {
   max-width: 1000px;
   margin: 0 auto;
   overflow: hidden;
+  min-height: 650px;
 }
 
 /* 顶部标签 */
@@ -165,7 +166,7 @@ const handleSubmit = () => {
 
 .config-body {
   padding: 40px 60px;
-  min-height: 480px;
+  min-height: 550px;
 }
 
 .form-item {