49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
<docs>
|
||
---
|
||
order: 4
|
||
title:
|
||
zh-CN: 组合使用
|
||
en-US: combination
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
嵌套使用，可以实现更复杂的布局。
|
||
|
||
## en-US
|
||
|
||
Nesting can achieve more complex layouts.
|
||
|
||
</docs>
|
||
|
||
<template>
|
||
<a-card :style="cardStyle" :body-style="{ padding: 0, overflow: 'hidden' }">
|
||
<a-flex justify="space-between">
|
||
<img
|
||
alt="avatar"
|
||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||
:style="imgStyle"
|
||
/>
|
||
<a-flex vertical align="flex-end" justify="space-between" :style="{ padding: '32px' }">
|
||
<a-typography>
|
||
<a-typography-title :level="3">
|
||
“antd is an enterprise-class UI design language and Vue UI library.”
|
||
</a-typography-title>
|
||
</a-typography>
|
||
<a-button type="primary" href="https://antdv.com" target="_blank">Get Start</a-button>
|
||
</a-flex>
|
||
</a-flex>
|
||
</a-card>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { CSSProperties } from 'vue';
|
||
const cardStyle: CSSProperties = {
|
||
width: '620px',
|
||
};
|
||
const imgStyle: CSSProperties = {
|
||
display: 'block',
|
||
width: '273px',
|
||
};
|
||
</script>
|