From f8c9d54687edafd92f5b61bf5288bb1188c73f01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=87=AF=E9=BE=99?= <502431556@qq.com>
Date: Thu, 7 Apr 2022 10:18:47 +0800
Subject: [PATCH] style: fix padding and background color

---
 .../src/ContentDetailWrap.vue                 |  2 +-
 .../ContentWrap/src/ContentWrap.vue           | 32 +++++++++----------
 src/layout/components/AppView.vue             |  2 +-
 3 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/ContentDetailWrap/src/ContentDetailWrap.vue b/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
index 89e88ec..d0b639e 100644
--- a/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
+++ b/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
@@ -24,7 +24,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div :class="[`${prefixCls}-container`, 'relative']" ref="contentDetailWrap">
+  <div :class="[`${prefixCls}-container`, 'relative bg-[#fff]']" ref="contentDetailWrap">
     <Sticky :offset="offset">
       <div
         :class="[
diff --git a/src/components/ContentWrap/src/ContentWrap.vue b/src/components/ContentWrap/src/ContentWrap.vue
index bc848d5..705b6bb 100644
--- a/src/components/ContentWrap/src/ContentWrap.vue
+++ b/src/components/ContentWrap/src/ContentWrap.vue
@@ -14,22 +14,20 @@ defineProps({
 </script>
 
 <template>
-  <div style="padding: var(--app-content-padding)">
-    <ElCard :class="[prefixCls, 'mb-20px']" shadow="never">
-      <template v-if="title" #header>
-        <div class="flex items-center">
-          <span class="text-16px font-700">{{ title }}</span>
-          <ElTooltip v-if="message" effect="dark" placement="right">
-            <template #content>
-              <div class="max-w-200px">{{ message }}</div>
-            </template>
-            <Icon class="ml-5px" icon="bi:question-circle-fill" :size="14" />
-          </ElTooltip>
-        </div>
-      </template>
-      <div>
-        <slot></slot>
+  <ElCard :class="[prefixCls, 'mb-20px']" shadow="never">
+    <template v-if="title" #header>
+      <div class="flex items-center">
+        <span class="text-16px font-700">{{ title }}</span>
+        <ElTooltip v-if="message" effect="dark" placement="right">
+          <template #content>
+            <div class="max-w-200px">{{ message }}</div>
+          </template>
+          <Icon class="ml-5px" icon="bi:question-circle-fill" :size="14" />
+        </ElTooltip>
       </div>
-    </ElCard>
-  </div>
+    </template>
+    <div>
+      <slot></slot>
+    </div>
+  </ElCard>
 </template>
diff --git a/src/layout/components/AppView.vue b/src/layout/components/AppView.vue
index 16c681d..1cc009a 100644
--- a/src/layout/components/AppView.vue
+++ b/src/layout/components/AppView.vue
@@ -22,7 +22,7 @@ const getCaches = computed((): string[] => {
 <template>
   <section
     :class="[
-      'w-[100%] bg-[var(--app-contnet-bg-color)]',
+      'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-contnet-bg-color)]',
       {
         '!min-h-[calc(100%-var(--app-footer-height))]':
           fixedHeader && (layout === 'classic' || layout === 'topLeft') && footer,