background.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <script setup lang="ts">
  2. import { Card, ConfigProvider, Flex, theme } from 'ant-design-vue';
  3. import { Welcome } from 'ant-design-x-vue';
  4. defineOptions({ name: 'AXWelcomeBackgroundSetup' });
  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:
  16. 'linear-gradient(97deg, rgba(90,196,255,0.12) 0%, rgba(174,136,255,0.12) 100%)',
  17. },
  18. ];
  19. </script>
  20. <template>
  21. <Flex vertical>
  22. <ConfigProvider
  23. v-for="({ algorithm, background }, index) in items"
  24. :key="index"
  25. :theme="{ algorithm }"
  26. >
  27. <Card :style="{ borderRadius: 0 }">
  28. <Welcome
  29. :style="{ backgroundImage: background, borderStartStartRadius: 4 }"
  30. icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
  31. title="Hello, I'm Ant Design X"
  32. description="Base on Ant Design, AGI
  33. product interface solution, create a better intelligent vision~"
  34. />
  35. </Card>
  36. </ConfigProvider>
  37. </Flex>
  38. </template>