index.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page;推荐使用json5,更强大,且允许注释 -->
  2. <route lang="json5" type="home">
  3. {
  4. style: {
  5. navigationStyle: 'custom',
  6. navigationBarTitleText: '首页',
  7. },
  8. }
  9. </route>
  10. <template>
  11. <view
  12. class="bg-white overflow-hidden pt-2 px-4"
  13. :style="{ marginTop: safeAreaInsets?.top + 'px' }"
  14. >
  15. <view class="mt-12">
  16. <image src="/static/logo.svg" alt="" class="w-28 h-28 block mx-auto" />
  17. </view>
  18. <view class="text-center text-4xl main-title-color mt-4">unibest</view>
  19. <view class="text-center text-2xl mt-2 mb-8">最好用的 uniapp 开发模板</view>
  20. <view class="text-justify max-w-100 m-auto text-4 indent mb-2">{{ description }}</view>
  21. <view class="text-center mt-8">
  22. 当前平台是:
  23. <text class="text-green-500">{{ PLATFORM.platform }}</text>
  24. </view>
  25. <view class="text-center mt-4">
  26. 模板分支是:
  27. <text class="text-green-500">base</text>
  28. </view>
  29. </view>
  30. </template>
  31. <script lang="ts" setup>
  32. import { TestEnum } from '@/typings'
  33. import PLATFORM from '@/utils/platform'
  34. defineOptions({
  35. name: 'Home',
  36. })
  37. // 获取屏幕边界到安全区域距离
  38. const { safeAreaInsets } = uni.getSystemInfoSync()
  39. const author = ref('菲鸽')
  40. const description = ref(
  41. 'unibest 是一个集成了多种工具和技术的 uniapp 开发模板,由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI + VSCode 构建,模板具有代码提示、自动格式化、统一配置、代码片段等功能,并内置了许多常用的基本组件和基本功能,让你编写 uniapp 拥有 best 体验。',
  42. )
  43. // 测试 uni API 自动引入
  44. onLoad(() => {
  45. console.log(author)
  46. console.log(TestEnum.A)
  47. })
  48. </script>
  49. <style>
  50. .main-title-color {
  51. color: #d14328;
  52. }
  53. </style>