130 lines
3.4 KiB
Plaintext
130 lines
3.4 KiB
Plaintext
<template>
|
|
<div>
|
|
<div class="n-layout-page-header">
|
|
<a-card :bordered="false" title="表单详情">
|
|
表单除了提交数据，有时也用于显示只读信息。
|
|
</a-card>
|
|
</div>
|
|
<a-card
|
|
:bordered="false"
|
|
title="基本信息"
|
|
class="mt-4 proCard"
|
|
:segmented="{ content: 'hard' }"
|
|
>
|
|
<a-descriptions label-placement="left" class="py-2">
|
|
<a-descriptions-item>
|
|
<template #label>收款人姓名</template>
|
|
啊俊
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="收款账户">NaiveUiAdmin@qq.com</a-descriptions-item>
|
|
<a-descriptions-item label="付款类型">支付宝</a-descriptions-item>
|
|
<a-descriptions-item label="付款账户">NaiveUiAdmin@163.com</a-descriptions-item>
|
|
<a-descriptions-item label="转账金额">￥1980.00</a-descriptions-item>
|
|
<a-descriptions-item label="状态">
|
|
<a-tag type="success"> 已到账</a-tag>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-card>
|
|
<a-card
|
|
:bordered="false"
|
|
title="其它信息"
|
|
class="mt-4 proCard"
|
|
:segmented="{ content: 'hard' }"
|
|
>
|
|
<a-descriptions label-placement="left" class="py-2">
|
|
<a-descriptions-item>
|
|
<template #label>城市</template>
|
|
深圳
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="性别">男</a-descriptions-item>
|
|
<a-descriptions-item label="邮箱">NaiveUiAdmin@qq.com</a-descriptions-item>
|
|
<a-descriptions-item label="地址">广东省深圳市南山区</a-descriptions-item>
|
|
<a-descriptions-item label="生日">1991-06-04</a-descriptions-item>
|
|
<a-descriptions-item label="认证">
|
|
<a-tag type="success"> 已认证</a-tag>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</a-card>
|
|
<a-card
|
|
:bordered="false"
|
|
title="表格信息"
|
|
class="mt-4 proCard"
|
|
:segmented="{ content: 'hard' }"
|
|
>
|
|
<a-table size="small" :dataSource="dataSource" :columns="columns" :pagination="false">
|
|
<template #bodyCell="{ column }">
|
|
<template v-if="column.key === 'action'">
|
|
<a-space>
|
|
<a-button size="small" type="primary" danger>删除</a-button>
|
|
<a-button size="small" type="primary">查看</a-button>
|
|
</a-space>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const dataSource = [
|
|
{
|
|
id: 1,
|
|
name: 'Ah jung',
|
|
age: '男',
|
|
city: '深圳',
|
|
birthday: '2000-11-09',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '西门飞雪',
|
|
age: '男',
|
|
city: '广州',
|
|
birthday: '1991-09-11',
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '泰坦巨人',
|
|
age: '男',
|
|
city: '北京',
|
|
birthday: '1990-11-03',
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '猎魔人',
|
|
age: '女',
|
|
city: '浙江',
|
|
birthday: '2001-11-09',
|
|
},
|
|
];
|
|
|
|
const columns = [
|
|
{
|
|
title: '姓名',
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
},
|
|
{
|
|
title: '性别',
|
|
dataIndex: 'age',
|
|
key: 'age',
|
|
},
|
|
{
|
|
title: '城市',
|
|
dataIndex: 'city',
|
|
key: 'city',
|
|
},
|
|
{
|
|
title: '生日',
|
|
dataIndex: 'birthday',
|
|
key: 'birthday',
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
key: 'action',
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<style lang="less" scoped></style>
|