58 lines
1.7 KiB
Vue
58 lines
1.7 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { NCard, NDatePicker, NForm, NFormItemGi, NGrid, NInput, NInputNumber } from 'naive-ui'
|
||
|
|
import { reactive, useTemplateRef } from 'vue'
|
||
|
|
|
||
|
|
const formRef = useTemplateRef('formRef')
|
||
|
|
|
||
|
|
const formData = reactive({
|
||
|
|
name: '阅读之星年度总决赛',
|
||
|
|
startTime: null,
|
||
|
|
endTime: null,
|
||
|
|
groupCount: 40,
|
||
|
|
teamCount: 4,
|
||
|
|
})
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
formRef,
|
||
|
|
formData,
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<NCard :bordered="false" class="rounded-xl shadow-sm">
|
||
|
|
<div class="mb-4 flex items-center gap-2 border-l-4 border-blue-600 pl-3">
|
||
|
|
<span class="text-base font-bold">基础活动信息</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<NForm ref="formRef" label-placement="top" :show-feedback="false">
|
||
|
|
<NGrid :x-gap="24" :y-gap="24" cols="1 s:2 m:4 l:5" responsive="screen">
|
||
|
|
<NFormItemGi span="1" label="比赛名称">
|
||
|
|
<NInput v-model:value="formData.name" placeholder="请输入比赛名称" />
|
||
|
|
</NFormItemGi>
|
||
|
|
|
||
|
|
<NFormItemGi label="开始时间">
|
||
|
|
<NDatePicker
|
||
|
|
v-model:value="formData.startTime" type="datetime" clearable class="w-full"
|
||
|
|
placeholder="年 / 月 / 日 --:--"
|
||
|
|
/>
|
||
|
|
</NFormItemGi>
|
||
|
|
|
||
|
|
<NFormItemGi label="结束时间">
|
||
|
|
<NDatePicker
|
||
|
|
v-model:value="formData.endTime" type="datetime" clearable class="w-full"
|
||
|
|
placeholder="年 / 月 / 日 --:--"
|
||
|
|
/>
|
||
|
|
</NFormItemGi>
|
||
|
|
|
||
|
|
<NFormItemGi label="小组总数">
|
||
|
|
<NInputNumber v-model:value="formData.groupCount" class="w-full" />
|
||
|
|
</NFormItemGi>
|
||
|
|
|
||
|
|
<NFormItemGi label="单组队伍">
|
||
|
|
<NInputNumber v-model:value="formData.teamCount" class="w-full" />
|
||
|
|
</NFormItemGi>
|
||
|
|
</NGrid>
|
||
|
|
</NForm>
|
||
|
|
</NCard>
|
||
|
|
</template>
|