fix: card style problem in ant-design-vue@1.1.0

master
chenghx 7 years ago
parent 2eb09c01b7
commit 7d7b08644f
  1. 28
      src/pages/list/CardList.vue
  2. 35
      src/pages/list/search/ApplicationList.vue

@ -17,10 +17,8 @@
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large" />
<div class="meta-content" slot="description">{{item.content}}</div>
</a-card-meta>
<ul class="ant-card-actions" slot="actions">
<li><a >操作一</a></li>
<li><a >操作二</a></li>
</ul>
<a slot="actions">操作一</a>
<a slot="actions">操作一</a>
</a-card>
</template>
</a-list-item>
@ -71,28 +69,6 @@ export default {
height: 48px;
border-radius: 48px;
}
.ant-card-actions{
background: #f7f9fa;
li{
float: left;
text-align: center;
margin: 12px 0;
color: rgba(0, 0, 0, 0.45);
width: 50%;
a{
color: rgba(0,0,0,.45);
line-height: 22px;
display: inline-block;
width: 100%;
}
a:hover{
color: #1890ff;
}
}
li:not(:last-child) {
border-right: 1px solid #e8e8e8;
}
}
.new-btn{
background-color: #fff;
border-radius: 2px;

@ -9,17 +9,16 @@
<a-card-meta title="Angular">
<a-avatar slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" size="small" />
</a-card-meta>
<ul class="actions" slot="actions">
<a-tooltip class="tool" title="下载">
<a-tooltip class="tool" title="下载" slot="actions">
<a-icon type="download" />
</a-tooltip>
<a-tooltip class="tool" title="编辑">
<a-tooltip class="tool" title="编辑" slot="actions">
<a-icon type="edit" />
</a-tooltip>
<a-tooltip class="tool" title="分享">
<a-tooltip class="tool" title="分享" slot="actions">
<a-icon type="share-alt" />
</a-tooltip>
<a-dropdown class="tool">
<a-dropdown class="tool" slot="actions">
<a-icon type="ellipsis" />
<a-menu slot="overlay">
<a-menu-item>1 item</a-menu-item>
@ -27,7 +26,6 @@
<a-menu-item>3 item</a-menu-item>
</a-menu>
</a-dropdown>
</ul>
<div class="content">
<div>
<p>活跃用户</p>
@ -101,29 +99,4 @@ export default {
}
}
}
.actions{
border-top: 1px solid #e8e8e8;
background: #f5f8fa;
zoom: 1;
list-style: none;
margin: 0;
padding: 0;
height: 47px;
.tool{
width: 25%;
float: left;
text-align: center;
margin: 12px 0;
color: rgba(0,0,0,.45);
cursor: pointer;
font-size: 16px;
line-height: 22px;
&:hover{
color: #1890ff;
}
&:not(:last-child) {
border-right: 1px solid #e8e8e8;
}
}
}
</style>

Loading…
Cancel
Save