完善页面细节3

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 {

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;

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

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 {

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;