Result

<script setup lang="ts">
import { CfResult, CfButton } from '@chufix-design/vue';
</script>

<template>
  <CfResult status="success" title="提交成功" description="申请已发送给管理员，预计 1 个工作日内处理。">
    <template #extra>
      <CfButton variant="primary">返回首页</CfButton>
      <CfButton variant="tertiary">再交一份</CfButton>
    </template>
  </CfResult>
</template>

<CfResult
status="success"
title="Submitted"
description="Your request has been sent to the admin and should be processed within one business day."
extra={<>
  <CfButton variant="primary">Back home</CfButton>
  <CfButton variant="tertiary">Submit another</CfButton>
</>}
/>

<script setup lang="ts">
import { CfResult } from '@chufix-design/vue';
</script>

<template>
  <div class="result-status-demo">
    <CfResult status="404" size="sm" description="页面可能已移动或被删除。" />
    <CfResult status="403" size="sm" description="当前账号没有访问权限。" />
    <CfResult status="500" size="sm" description="服务暂时不可用，请稍后重试。" />
  </div>
</template>

<style scoped>
.result-status-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  width: 100%;
}
</style>

<CfResult status="404" size="sm" description="The page may have moved or been deleted." />
<CfResult status="403" size="sm" description="Your account doesn't have access." />
<CfResult status="500" size="sm" description="The service is temporarily unavailable. Please try again later." />