109 lines
4.1 KiB
HTML
109 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>omiu Card</title>
|
||
<script type="module" src="/src/index.tsx"></script>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
|
||
<img src="//alloyteam.github.io/github.png" alt="">
|
||
</a>
|
||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||
|
||
<script src="https://unpkg.com/@omiu/link"></script>
|
||
|
||
<!-- 这里导入需要的OmiU-component -->
|
||
<script src="https://unpkg.com/@omiu/icon@0.0.2/add-a-photo-rounded.js"></script>
|
||
<script src="https://unpkg.com/@omiu/icon@0.0.2/add-comment-rounded.js"></script>
|
||
<script src="https://unpkg.com/@omiu/icon@0.0.2/add-ic-call-rounded.js"></script>
|
||
<script src="https://unpkg.com/@omiu/avatar"></script>
|
||
<script src="https://unpkg.com/@omiu/image"></script>
|
||
|
||
<div style="height: 100vh; display: flex; justify-content: space-around; flex-wrap: wrap; background: #F0F2F5;">
|
||
|
||
<div style="margin: 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 style="margin: 5%; height: 200px; width: 300px;">
|
||
<o-card title="Simple Card" hoverable="always" block="1">
|
||
<!-- slot="cover" 若不填充内容，则header栏不显示。-简洁卡片 -->
|
||
<div slot="cover">
|
||
</div>
|
||
<p>Simple Card</p>
|
||
<p>Card content</p>
|
||
<p>Card content</p>
|
||
</o-card>
|
||
</div>
|
||
|
||
|
||
<!-- 若需实现底部栏按钮，id,actions为必选参数 -->
|
||
<div style="margin: 5%; height: 200px; width: 300px;">
|
||
<o-card title="Action card" hoverable="always" actions="[{icon: 'add-a-photo-rounded'},{icon: 'add-ic-call-rounded'},{icon: 'add-comment-rounded'}]" 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 style="margin: 5%; height: 200px; width: 300px;">
|
||
<o-card title="DNT's card" actions="[{icon: 'add-ic-call-rounded'}]" hoverable="true" block="1">
|
||
<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 bordered=true hoverable="true" title="Action card" actions="[{icon: 'add-ic-call-rounded'},{icon: 'add-comment-rounded'}]" block="1">
|
||
<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;">
|
||
<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: 2% 5%; height: 200px; width: 300px;">
|
||
<o-card hoverable="true" block="1">
|
||
<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 style="font-weight: 500">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>
|
||
|
||
<script>
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|