From 393682d998a401488b31206f5be404db07662197 Mon Sep 17 00:00:00 2001
From: ddcat1115 <ddcat1115@gmail.com>
Date: Fri, 27 Oct 2017 17:41:42 +0800
Subject: [PATCH] update card style

---
 src/routes/List/CardList.js         |  2 +-
 src/routes/List/CardList.less       | 15 ++++++++----
 src/routes/List/CoverCardList.js    |  1 +
 src/routes/List/CoverCardList.less  | 36 +++++++++++++++++++----------
 src/routes/List/FilterCardList.js   |  2 +-
 src/routes/List/FilterCardList.less |  3 +++
 6 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/routes/List/CardList.js b/src/routes/List/CardList.js
index c7423e7b..d4c968ce 100644
--- a/src/routes/List/CardList.js
+++ b/src/routes/List/CardList.js
@@ -63,7 +63,7 @@ export default class CardList extends PureComponent {
             dataSource={['', ...list]}
             renderItem={item => (item ? (
               <List.Item key={item.id}>
-                <Card actions={[<a>操作一</a>, <a>操作二</a>]}>
+                <Card className={styles.card} actions={[<a>操作一</a>, <a>操作二</a>]}>
                   <Link to="/list/card-list">
                     <Card.Meta
                       avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
diff --git a/src/routes/List/CardList.less b/src/routes/List/CardList.less
index 528d338e..ded72a3c 100644
--- a/src/routes/List/CardList.less
+++ b/src/routes/List/CardList.less
@@ -3,9 +3,15 @@
 
 .cardList {
   margin-bottom: -24px;
-  :global {
-    .ant-card-meta-content {
-      margin-top: 0;
+
+  .card {
+    :global {
+      .ant-card-meta-title {
+        margin-bottom: 12px;
+      }
+      .ant-card-actions {
+        background: #f7f9fa;
+      }
     }
   }
 }
@@ -24,7 +30,7 @@
   border-color: @border-color-base;
   color: @text-color-secondary;
   width: 100%;
-  height: 185px;
+  height: 188px;
 }
 
 .cardAvatar {
@@ -35,7 +41,6 @@
 
 .cardDescription {
   .textOverflowMulti();
-  color: @text-color;
 }
 
 .pageHeaderContent {
diff --git a/src/routes/List/CoverCardList.js b/src/routes/List/CoverCardList.js
index 19953e15..82856fbc 100644
--- a/src/routes/List/CoverCardList.js
+++ b/src/routes/List/CoverCardList.js
@@ -77,6 +77,7 @@ export default class CoverCardList extends PureComponent {
         renderItem={item => (
           <List.Item>
             <Card
+              className={styles.card}
               hoverable
               cover={<img alt={item.title} src={item.cover} />}
             >
diff --git a/src/routes/List/CoverCardList.less b/src/routes/List/CoverCardList.less
index 0664ff70..a847c0c8 100644
--- a/src/routes/List/CoverCardList.less
+++ b/src/routes/List/CoverCardList.less
@@ -3,23 +3,35 @@
 
 .coverCardList {
   margin-bottom: -24px;
-  :global {
-    .ant-card-meta-title > a {
-      color: @heading-color;
-    }
-    .ant-card:hover .ant-card-meta-title > a {
-      color: @primary-color;
+
+  .card {
+    :global {
+      .ant-card-meta-title {
+        margin-bottom: 4px;
+      }
+      .ant-card-meta-title > a {
+        color: @heading-color;
+      }
+      .ant-card-meta-description {
+        height: 44px;
+        line-height: 22px;
+        overflow: hidden;
+      }
     }
-    .ant-card-meta-description {
-      color: @text-color-secondary;
-      height: 44px;
-      line-height: 22px;
-      overflow: hidden;
+
+    &:hover {
+      :global {
+        .ant-card-meta-title > a {
+          color: @primary-color;
+        }
+      }
     }
   }
+
   .cardItemContent {
     display: flex;
-    margin-top: 12px;
+    margin-top: 16px;
+    margin-bottom: -4px;
     line-height: 20px;
     height: 20px;
     & > span {
diff --git a/src/routes/List/FilterCardList.js b/src/routes/List/FilterCardList.js
index b4e08d19..51b2ae50 100644
--- a/src/routes/List/FilterCardList.js
+++ b/src/routes/List/FilterCardList.js
@@ -224,7 +224,7 @@ export default class FilterCardList extends PureComponent {
               <List.Item key={item.id}>
                 <Card
                   hoverable
-                  bodyStyle={{ paddingBottom: 16 }}
+                  bodyStyle={{ paddingBottom: 20 }}
                   actions={[
                     <Tooltip title="下载"><Icon type="download" /></Tooltip>,
                     <Tooltip title="编辑"><Icon type="edit" /></Tooltip>,
diff --git a/src/routes/List/FilterCardList.less b/src/routes/List/FilterCardList.less
index cd255840..23a88dff 100644
--- a/src/routes/List/FilterCardList.less
+++ b/src/routes/List/FilterCardList.less
@@ -11,6 +11,9 @@
     .ant-card-meta-avatar {
       font-size: 0;
     }
+    .ant-card-actions {
+      background: #f7f9fa;
+    }
   }
   .cardInfo {
     .clearfix();
-- 
GitLab