Browse Source

update card style

ddcat1115 8 years ago
parent
commit
393682d998

+ 1 - 1
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} />}

+ 10 - 5
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 {

+ 1 - 0
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} />}
             >

+ 24 - 12
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 {

+ 1 - 1
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>,

+ 3 - 0
src/routes/List/FilterCardList.less

@@ -11,6 +11,9 @@
     .ant-card-meta-avatar {
       font-size: 0;
     }
+    .ant-card-actions {
+      background: #f7f9fa;
+    }
   }
   .cardInfo {
     .clearfix();