fix(card): fix style (#1753)

Co-authored-by: maxin <maxin@growingio.com>

src/card/demo/Card.stories.tsx

@@ -11,7 +11,7 @@ import Button, { IconButton } from '../../button';
 import Dropdown from '../../dropdown';
 import { Item, List } from '../../list';
 import { Basic, Empty, TreeData } from '../../table/demos/Table.stories';
-import { Card, Divider, Skeleton } from '../..';
+import { Card, Skeleton } from '../..';
 import Text from '../../typography/text';
 
 export default {
@@ -30,11 +30,22 @@ export default {
   },
 } as Meta;
 
-const infoCardTemplate = () => (
-  <Card fullWidthContent>
+const tableCardTemplate = () => (
+  <Card fullWidthContent clickable={false} style={{ boxShadow: '0px 3px 8px rgba(36, 46, 89, 0.05)' }}>
     <Card.Meta
+      title={
+        <div
+          style={{
+            fontWeight: 500,
+            fontSize: '18px',
+            lineHeight: '28px',
+            color: '#242e59',
+          }}
+        >
+          全部成员(233)
+        </div>
+      }
       style={{ alignItems: 'flex-start' }}
-      image={<Avatar mode="square" size="large" />}
       description={
         <Text
           style={{
@@ -44,78 +55,24 @@ const infoCardTemplate = () => (
             textOverflow: 'ellipsis',
             whiteSpace: 'normal',
           }}
-          lines={3}
-        >
-          {'这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题'.repeat(
-            5
-          )}
-        </Text>
-      }
-      title={
-        <Text
-          style={{
-            fontWeight: 500,
-            fontSize: '18px',
-            lineHeight: '28px',
-            color: '#242e59',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-          }}
+          lines={2}
         >
-          {'北区项目组'.repeat(20)}
+          这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副
         </Text>
       }
+      image={<Avatar mode="square" size="large" />}
       action={
         <>
           <Button style={{ marginRight: '8px' }}>Button</Button>
           <Button type="secondary">Button</Button>
         </>
       }
     />
-    <Divider
-      style={{
-        width: '100%',
-        margin: '0px',
-      }}
-    />
-    <Basic />
-  </Card>
-);
-
-export const infoCard = infoCardTemplate.bind({});
-const tableCardTemplate = () => (
-  <Card fullWidthContent>
-    <Card.Meta
-      title={
-        <div
-          style={{
-            fontWeight: 500,
-            fontSize: '18px',
-            lineHeight: '28px',
-            color: '#242e59',
-          }}
-        >
-          全部成员(233)
-        </div>
-      }
-    />
-    <Text
-      style={{
-        color: '#7b819c',
-        fontSize: '14px',
-        padding: '0 16px',
-        marginTop: '-8px',
-        marginBottom: '20px',
-      }}
-      lines={3}
-    >
-      这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副标题这是一个副
-    </Text>
     <Tabs
       tabListStyle={{
         borderBottom: '1px solid #dfe4ee',
         borderRadius: '0px',
-        paddingLeft: '8px',
+        padding: '0 20px',
       }}
       defaultValue="1"
     >
@@ -137,10 +94,6 @@ const DemoTemplate = () => (
       <th>Card</th>
       <th>Example</th>
     </tr>
-    <tr>
-      <td>InfoCard</td>
-      <td>{infoCardTemplate()}</td>
-    </tr>
     <tr>
       <td>TableCard</td>
       <td>{tableCardTemplate()}</td>

src/card/style/index.less

@@ -1,4 +1,4 @@
-@import '../../stylesheet/variables/index.less';
+@import (reference) '../../stylesheet/variables/index.less';
 
 @card-prefix-cls: ~'@{component-prefix}-card';
 @card-meta-prefix-cls: ~'@{component-prefix}-card-meta';
@@ -7,13 +7,14 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  box-sizing: border-box;
   padding: 16px;
   overflow: hidden;
   background-color: @gray-0;
   border: 1px solid @gray-2;
   border-radius: 8px;
   &-clickable:not(&-disabled):hover {
-    .elevation(1);
+    .elevation(2);
     cursor: pointer;
   }
   &-disabled {
@@ -23,7 +24,6 @@
   &-full-width-content {
     padding: 0;
     .@{card-meta-prefix-cls} {
-      width: calc(100% - 32px);
       padding: 16px;
     }
   }
@@ -37,6 +37,7 @@
 .@{card-meta-prefix-cls} {
   display: flex;
   align-items: center;
+  box-sizing: border-box;
   width: 100%;
   color: @gray-4;
   .text-body2();