From 4424fc51c260715afb2a62ae78f26b8079370211 Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Thu, 28 Aug 2025 19:35:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9OCard=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=8F=98=E9=87=8F=E6=98=A0=E5=B0=84=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E5=9B=BE=E6=96=87=E5=8D=A1=E7=89=87=E5=86=85=E8=BE=B9?=
 =?UTF-8?q?=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/card/OCard.vue        |  7 ++++-
 packages/opendesign/src/card/style/index.scss |  2 +-
 packages/opendesign/src/card/style/media.scss | 31 +++++++++++++------
 packages/opendesign/src/card/style/var.scss   | 10 ++++--
 4 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/packages/opendesign/src/card/OCard.vue b/packages/opendesign/src/card/OCard.vue
index bbfcf4ff..95ab9390 100644
--- a/packages/opendesign/src/card/OCard.vue
+++ b/packages/opendesign/src/card/OCard.vue
@@ -29,6 +29,10 @@ const isTitleLimited = computed(() => {
 const isDetailLimited = computed(() => {
   return !isUndefined(props.detailMaxRow);
 });
+
+const hasCover = computed(() => {
+  return Boolean(slots.cover || props.cover);
+});
 </script>
 
 <template>
@@ -43,13 +47,14 @@ const isDetailLimited = computed(() => {
         'o-card-hoverable': props.hoverable || !!props.href,
         'o-card-cursor-pointer': props.cursor === 'pointer' || !!props.href,
         'o-card-no-responsive': props.noResponsive,
+        'o-card-cover': hasCover,
       },
     ]"
   >
     <slot name="card">
       <!-- cover -->
       <div
-        v-if="!!slots.cover || props.cover"
+        v-if="hasCover"
         class="o-card-cover"
         :class="[
           props.coverClass,
diff --git a/packages/opendesign/src/card/style/index.scss b/packages/opendesign/src/card/style/index.scss
index e6b6f59b..8bb47c58 100644
--- a/packages/opendesign/src/card/style/index.scss
+++ b/packages/opendesign/src/card/style/index.scss
@@ -1,3 +1,3 @@
 @use './style.scss' as *;
-@use './media.scss' as *;
 @use './var.scss' as *;
+@use './media.scss' as *;
diff --git a/packages/opendesign/src/card/style/media.scss b/packages/opendesign/src/card/style/media.scss
index 3d1a3e0a..28506133 100644
--- a/packages/opendesign/src/card/style/media.scss
+++ b/packages/opendesign/src/card/style/media.scss
@@ -1,6 +1,6 @@
 @use '../../_styles/mixin.scss' as *;
 
-@include respond-to('laptop') {
+@include respond-to('laptop-pc_s') {
   .o-card {
     &:not(.o-card-no-responsive) {
       --card-radius: var(--o-radius_control-m);
@@ -9,7 +9,8 @@
       --card-header-text-size: var(--o-font_size-text2);
       --card-header-text-height: var(--o-line_height-text2);
 
-      --card-main-padding: 16px 24px;
+      --card-main-padding-v: 16px;
+      --card-main-padding-h: 24px;
 
       --card-icon-gap: 12px;
 
@@ -20,11 +21,14 @@
       --card-footer-gap: 16px;
       --card-footer-text-size: var(--o-font_size-tip2);
       --card-footer-text-height: var(--o-line_height-tip2);
+
+      &.o-card-cover {
+        --card-main-padding-h: 16px;
+      }
     }
   }
 }
-
-@include respond-to('pad') {
+@include respond-to('pad_h') {
   .o-card {
     &:not(.o-card-no-responsive) {
       --card-radius: var(--o-radius_control-s);
@@ -34,10 +38,11 @@
       --card-header-text-size: var(--o-font_size-text1);
       --card-header-text-height: var(--o-line_height-text1);
 
-      --card-main-padding: 12px 16px;
+      --card-main-padding-v: 12px;
+      --card-main-padding-h: 16px;
 
       --card-icon-gap: 8px;
-      --card-icon-size: var(--o-icon_size_control-l);
+      --card-icon-size: var(--o-icon_size-xl);
 
       --card-content-gap: 8px;
       --card-content-text-size: var(--o-font_size-tip1);
@@ -58,18 +63,22 @@
       .o-card-cover-hr {
         --card-cover-padding: 4px 4px 4px 0;
       }
+
+      &.o-card-cover {
+        --card-main-padding-h: 12px;
+      }
     }
   }
 }
-
-@include respond-to('phone') {
+@include respond-to('<=pad_v') {
   .o-card {
     &:not(.o-card-no-responsive) {
       --card-radius: var(--o-radius_control-s);
 
       --card-cover-radius: var(--o-radius_control-xs);
 
-      --card-main-padding: 12px 16px;
+      --card-main-padding-v: 8px;
+      --card-main-padding-h: 12px;
 
       --card-header-text-size: var(--o-font_size-tip1);
       --card-header-text-height: var(--o-line_height-tip1);
@@ -96,6 +105,10 @@
       .o-card-cover-hr {
         --card-cover-padding: 4px 4px 4px 0;
       }
+
+      &.o-card-cover {
+        --card-main-padding-h: 8px;
+      }
     }
   }
 }
diff --git a/packages/opendesign/src/card/style/var.scss b/packages/opendesign/src/card/style/var.scss
index 16b6f5cf..db218bd1 100644
--- a/packages/opendesign/src/card/style/var.scss
+++ b/packages/opendesign/src/card/style/var.scss
@@ -11,11 +11,13 @@
   --card-h-cover-width: 45%;
   --card-h-cover-max-width: 320px;
 
-  --card-main-padding: 24px 32px;
+  --card-main-padding-v: 24px;
+  --card-main-padding-h: 32px;
+  --card-main-padding: var(--card-main-padding-v) var(--card-main-padding-h);
 
   --card-icon-gap: 16px;
   --card-icon-color: var(--o-color-info1);
-  --card-icon-size: var(--o-icon_size_control-xl);
+  --card-icon-size: var(--o-icon_size-2xl);
 
   --card-header-color: var(--o-color-info1);
   --card-header-text-size: var(--o-font_size-h3);
@@ -34,6 +36,10 @@
   --card-footer-color: var(--o-color-info2);
   --card-footer-text-size: var(--o-font_size-tip1);
   --card-footer-text-height: var(--o-line_height-tip1);
+
+  &.o-card-cover {
+    --card-main-padding-h: 24px;
+  }
 }
 
 .o-card-cover-v {
-- 
Gitee