Commit 393682d9 authored by ddcat1115's avatar ddcat1115

update card style

parent 99ae700f
...@@ -63,7 +63,7 @@ export default class CardList extends PureComponent { ...@@ -63,7 +63,7 @@ export default class CardList extends PureComponent {
dataSource={['', ...list]} dataSource={['', ...list]}
renderItem={item => (item ? ( renderItem={item => (item ? (
<List.Item key={item.id}> <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"> <Link to="/list/card-list">
<Card.Meta <Card.Meta
avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />} avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
......
...@@ -3,9 +3,15 @@ ...@@ -3,9 +3,15 @@
.cardList { .cardList {
margin-bottom: -24px; margin-bottom: -24px;
:global {
.ant-card-meta-content { .card {
margin-top: 0; :global {
.ant-card-meta-title {
margin-bottom: 12px;
}
.ant-card-actions {
background: #f7f9fa;
}
} }
} }
} }
...@@ -24,7 +30,7 @@ ...@@ -24,7 +30,7 @@
border-color: @border-color-base; border-color: @border-color-base;
color: @text-color-secondary; color: @text-color-secondary;
width: 100%; width: 100%;
height: 185px; height: 188px;
} }
.cardAvatar { .cardAvatar {
...@@ -35,7 +41,6 @@ ...@@ -35,7 +41,6 @@
.cardDescription { .cardDescription {
.textOverflowMulti(); .textOverflowMulti();
color: @text-color;
} }
.pageHeaderContent { .pageHeaderContent {
......
...@@ -77,6 +77,7 @@ export default class CoverCardList extends PureComponent { ...@@ -77,6 +77,7 @@ export default class CoverCardList extends PureComponent {
renderItem={item => ( renderItem={item => (
<List.Item> <List.Item>
<Card <Card
className={styles.card}
hoverable hoverable
cover={<img alt={item.title} src={item.cover} />} cover={<img alt={item.title} src={item.cover} />}
> >
......
...@@ -3,23 +3,35 @@ ...@@ -3,23 +3,35 @@
.coverCardList { .coverCardList {
margin-bottom: -24px; margin-bottom: -24px;
:global {
.ant-card-meta-title > a { .card {
color: @heading-color; :global {
} .ant-card-meta-title {
.ant-card:hover .ant-card-meta-title > a { margin-bottom: 4px;
color: @primary-color; }
.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; &:hover {
height: 44px; :global {
line-height: 22px; .ant-card-meta-title > a {
overflow: hidden; color: @primary-color;
}
}
} }
} }
.cardItemContent { .cardItemContent {
display: flex; display: flex;
margin-top: 12px; margin-top: 16px;
margin-bottom: -4px;
line-height: 20px; line-height: 20px;
height: 20px; height: 20px;
& > span { & > span {
......
...@@ -224,7 +224,7 @@ export default class FilterCardList extends PureComponent { ...@@ -224,7 +224,7 @@ export default class FilterCardList extends PureComponent {
<List.Item key={item.id}> <List.Item key={item.id}>
<Card <Card
hoverable hoverable
bodyStyle={{ paddingBottom: 16 }} bodyStyle={{ paddingBottom: 20 }}
actions={[ actions={[
<Tooltip title="下载"><Icon type="download" /></Tooltip>, <Tooltip title="下载"><Icon type="download" /></Tooltip>,
<Tooltip title="编辑"><Icon type="edit" /></Tooltip>, <Tooltip title="编辑"><Icon type="edit" /></Tooltip>,
......
...@@ -11,6 +11,9 @@ ...@@ -11,6 +11,9 @@
.ant-card-meta-avatar { .ant-card-meta-avatar {
font-size: 0; font-size: 0;
} }
.ant-card-actions {
background: #f7f9fa;
}
} }
.cardInfo { .cardInfo {
.clearfix(); .clearfix();
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment