background.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <script setup lang="tsx">
  2. import { Card, ConfigProvider, Flex, theme } from 'ant-design-vue';
  3. import { Welcome } from 'ant-design-x-vue';
  4. defineOptions({ name: 'AXWelcomeBackground' });
  5. const items: {
  6. algorithm: typeof theme.defaultAlgorithm;
  7. background: string;
  8. }[] = [
  9. {
  10. algorithm: theme.defaultAlgorithm,
  11. background: 'linear-gradient(97deg, #f2f9fe 0%, #f7f3ff 100%)',
  12. },
  13. {
  14. algorithm: theme.darkAlgorithm,
  15. background: 'linear-gradient(97deg, rgba(90,196,255,0.12) 0%, rgba(174,136,255,0.12) 100%)',
  16. },
  17. ];
  18. defineRender(() => {
  19. return (
  20. <Flex vertical>
  21. {items.map(({ algorithm, background }, index) => (
  22. <ConfigProvider
  23. key={index}
  24. theme={{
  25. algorithm,
  26. }}
  27. >
  28. <Card style={{ borderRadius: 0 }}>
  29. <Welcome
  30. style={{
  31. backgroundImage: background,
  32. borderStartStartRadius: 4,
  33. }}
  34. icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
  35. title="Hello, I'm Ant Design X"
  36. description="Base on Ant Design, AGI product interface solution, create a better intelligent vision~"
  37. />
  38. </Card>
  39. </ConfigProvider>
  40. ))}
  41. </Flex>
  42. )
  43. });
  44. </script>