style: fix padding and background color

kailong321200875 · Apr 7, 2022 · f8c9d54 · f8c9d54
1 parent 18c6bd8
commit f8c9d54
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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,