fix(admin): card css bug
This commit is contained in:
ringosix
parent
37d9e4c0be
commit
1bd321b391
|
|
@ -143,6 +143,7 @@ export default class extends WeElement<Props> {
|
|||
|
||||
return (
|
||||
<code-demo-container>
|
||||
|
||||
<code-demo
|
||||
title="简单卡片"
|
||||
describe={'只包含内容区域'}
|
||||
|
|
@ -150,12 +151,71 @@ export default class extends WeElement<Props> {
|
|||
style={gridStyle}
|
||||
>
|
||||
<div slot="demo" class={tw`px-5 py-5`}>
|
||||
<o-card title="Simple Card" hoverable="always">
|
||||
<div slot="cover"></div>
|
||||
<p>Simple Card</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</o-card>
|
||||
<div style="margin: 2% 5%; height: 200px; width: 300px;">
|
||||
<o-card title="Simple Card" hoverable="always" block="1">
|
||||
<div slot="cover"></div>
|
||||
<p>Simple Card</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</o-card>
|
||||
</div>
|
||||
</div>
|
||||
</code-demo>
|
||||
|
||||
<code-demo
|
||||
title="相册卡片"
|
||||
describe="支持封面、头像、标题和描述信息的卡片"
|
||||
code={this.mdD}
|
||||
style={gridStyle}
|
||||
>
|
||||
<div slot="demo" class={tw`flex justify-around px-5 py-5`}>
|
||||
<div style="margin: 20% 5%; height: 200px; width: 300px;">
|
||||
<o-card
|
||||
block="1"
|
||||
title="Action card"
|
||||
id="myActionC"
|
||||
actions={[
|
||||
{ icon: 'add-ic-call-rounded' },
|
||||
{ icon: 'add-comment-rounded' }
|
||||
]}
|
||||
hoverable="always"
|
||||
>
|
||||
<o-image
|
||||
slot="cover"
|
||||
src="https://cdc-old-dcloud-migrate-1258344706.cos.ap-guangzhou.myqcloud.com/data2/material/thumb/1/1190188000/VCG41N1127233809.jpg/thumb"
|
||||
></o-image>
|
||||
<div style="display: flex; justify-content: space-around; margin: 10px 0px">
|
||||
<o-avatar
|
||||
style="margin: auto 0px;"
|
||||
src="https://wx.gtimg.com/resource/feuploader/202108/fb85c997c6476acd7a1441043fdda775_204x204.png"
|
||||
></o-avatar>
|
||||
<div>
|
||||
<p style="font-weight: 600; font-size: 1.2em;">Card title</p>
|
||||
<p>This is the description</p>
|
||||
</div>
|
||||
</div>
|
||||
</o-card>
|
||||
</div>
|
||||
<div style="margin: 20% 5%; height: 200px; width: 300px;">
|
||||
<o-card block="1" hoverable="true" size="medium">
|
||||
<o-image
|
||||
slot="cover"
|
||||
src="https://cdc-old-dcloud-migrate-1258344706.cos.ap-guangzhou.myqcloud.com/data2/material/thumb/1/1199435000/VCG211199435578.jpg/thumb"
|
||||
></o-image>
|
||||
<p>OMI Card</p>
|
||||
<p>
|
||||
<o-link
|
||||
underline="0"
|
||||
type="primary"
|
||||
target="_blank"
|
||||
href="https://tencent.github.io/omi/"
|
||||
slot="extra"
|
||||
>
|
||||
Welcome to OMI
|
||||
</o-link>
|
||||
</p>
|
||||
</o-card>
|
||||
</div>
|
||||
</div>
|
||||
</code-demo>
|
||||
|
||||
|
|
@ -166,20 +226,22 @@ export default class extends WeElement<Props> {
|
|||
style={gridStyle}
|
||||
>
|
||||
<div slot="demo" class={tw`px-5 py-5`}>
|
||||
<o-card title="Default size card" hoverable="always">
|
||||
<o-link
|
||||
underline="0"
|
||||
type="primary"
|
||||
target="_blank"
|
||||
href="https://tencent.github.io/omi/"
|
||||
slot="extra"
|
||||
>
|
||||
More
|
||||
</o-link>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</o-card>
|
||||
<div style="margin: 2% 5%; height: 200px; width: 300px;">
|
||||
<o-card title="Default size card" hoverable="always" block="1">
|
||||
<o-link
|
||||
underline="0"
|
||||
type="primary"
|
||||
target="_blank"
|
||||
href="https://tencent.github.io/omi/"
|
||||
slot="extra"
|
||||
>
|
||||
More
|
||||
</o-link>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</o-card>
|
||||
</div>
|
||||
</div>
|
||||
</code-demo>
|
||||
|
||||
|
|
@ -190,7 +252,9 @@ export default class extends WeElement<Props> {
|
|||
style={gridStyle}
|
||||
>
|
||||
<div slot="demo" class={tw`px-5 py-5`}>
|
||||
<div style="margin: 2% 5%; height: 200px; width: 300px;">
|
||||
<o-card
|
||||
block="1"
|
||||
title="Action card"
|
||||
hoverable="always"
|
||||
size="medium"
|
||||
|
|
@ -214,72 +278,25 @@ export default class extends WeElement<Props> {
|
|||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</o-card>
|
||||
<o-card
|
||||
title="DNT's card"
|
||||
id="myActionB"
|
||||
actions={[{ icon: 'add-ic-call-rounded' }]}
|
||||
hoverable="true"
|
||||
>
|
||||
<o-avatar slot="extra">DNT</o-avatar>
|
||||
<p>Tel:</p>
|
||||
<p>Company:</p>
|
||||
<p>...</p>
|
||||
</o-card>
|
||||
</div>
|
||||
<div style="margin: 2% 5%; height: 200px; width: 300px;">
|
||||
<o-card
|
||||
block="1"
|
||||
title="DNT's card"
|
||||
id="myActionB"
|
||||
actions={[{ icon: 'add-ic-call-rounded' }]}
|
||||
hoverable="true"
|
||||
>
|
||||
<o-avatar slot="extra">DNT</o-avatar>
|
||||
<p>Tel:</p>
|
||||
<p>Company:</p>
|
||||
<p>...</p>
|
||||
</o-card>
|
||||
</div>
|
||||
</div>
|
||||
</code-demo>
|
||||
|
||||
<code-demo
|
||||
title="相册卡片"
|
||||
describe="支持封面、头像、标题和描述信息的卡片"
|
||||
code={this.mdD}
|
||||
style={gridStyle}
|
||||
>
|
||||
<div slot="demo" class={tw`px-5 py-5`}>
|
||||
<o-card
|
||||
title="Action card"
|
||||
size="large"
|
||||
id="myActionC"
|
||||
actions={[
|
||||
{ icon: 'add-ic-call-rounded' },
|
||||
{ icon: 'add-comment-rounded' }
|
||||
]}
|
||||
hoverable="true"
|
||||
>
|
||||
<o-image
|
||||
slot="cover"
|
||||
src="https://cdc-old-dcloud-migrate-1258344706.cos.ap-guangzhou.myqcloud.com/data2/material/thumb/1/1190188000/VCG41N1127233809.jpg/thumb"
|
||||
></o-image>
|
||||
<div style="display: flex; justify-content: space-around; margin: 10px 0px">
|
||||
<o-avatar
|
||||
style="margin: auto 0px;"
|
||||
src="https://wx.gtimg.com/resource/feuploader/202108/fb85c997c6476acd7a1441043fdda775_204x204.png"
|
||||
></o-avatar>
|
||||
<div>
|
||||
<p style="font-weight: 600; font-size: 1.2em;">Card title</p>
|
||||
<p>This is the description</p>
|
||||
</div>
|
||||
</div>
|
||||
</o-card>
|
||||
<o-card hoverable="true">
|
||||
<o-image
|
||||
slot="cover"
|
||||
src="https://cdc-old-dcloud-migrate-1258344706.cos.ap-guangzhou.myqcloud.com/data2/material/thumb/1/1199435000/VCG211199435578.jpg/thumb"
|
||||
></o-image>
|
||||
<p>OMI Card</p>
|
||||
<p>
|
||||
<o-link
|
||||
underline="0"
|
||||
type="primary"
|
||||
target="_blank"
|
||||
href="https://tencent.github.io/omi/"
|
||||
slot="extra"
|
||||
>
|
||||
Welcome to OMI
|
||||
</o-link>
|
||||
</p>
|
||||
</o-card>
|
||||
</div>
|
||||
</code-demo>
|
||||
|
||||
</code-demo-container>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue