Browse Source

update card style

pull/37/head
ddcat1115 9 years ago
parent
commit
393682d998
  1. 2
      src/routes/List/CardList.js
  2. 13
      src/routes/List/CardList.less
  3. 1
      src/routes/List/CoverCardList.js
  4. 22
      src/routes/List/CoverCardList.less
  5. 2
      src/routes/List/FilterCardList.js
  6. 3
      src/routes/List/FilterCardList.less

2
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} />}

13
src/routes/List/CardList.less

@ -3,9 +3,15 @@
.cardList {
margin-bottom: -24px;
.card {
:global {
.ant-card-meta-content {
margin-top: 0;
.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
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} />}
>

22
src/routes/List/CoverCardList.less

@ -3,23 +3,35 @@
.coverCardList {
margin-bottom: -24px;
.card {
:global {
.ant-card-meta-title {
margin-bottom: 4px;
}
.ant-card-meta-title > a {
color: @heading-color;
}
.ant-card:hover .ant-card-meta-title > a {
color: @primary-color;
}
.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 {

2
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
src/routes/List/FilterCardList.less

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

Loading…
Cancel
Save