index.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  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 h-full overflow-hidden pt-2 px-4"
  13. :style="{ marginTop: safeAreaInsets?.top + 'px' }"
  14. >
  15. <view class="mt-8">
  16. <image src="/static/logo.svg" alt="" class="w-40 h-40 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 text-xl">
  21. unibest 是由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI 驱动的跨端快速启动模板,使用 VS Code
  22. 开发,具有代码提示、自动格式化、统一配置、代码片段等功能,同时内置了大量平时开发常用的基本组件,开箱即用,让你编写
  23. uniapp 拥有 best 体验。</view
  24. >
  25. <view class="text-blue mt-8 text-center text-xl">
  26. <text class="font-800">详细示例 </text>参考 hello-unibest
  27. </view>
  28. <view class="m-4"> https://github.com/codercup/hello-unibest </view>
  29. <button @click="onCopy">复制 hello-unibest github地址</button>
  30. </view>
  31. </template>
  32. <script lang="ts" setup>
  33. // 获取屏幕边界到安全区域距离
  34. const { safeAreaInsets } = uni.getSystemInfoSync()
  35. const onCopy = () => {
  36. uni.setClipboardData({
  37. data: 'https://github.com/codercup/hello-unibest',
  38. fail: (fail) => {
  39. console.error('fail', fail)
  40. },
  41. success: (success) => {
  42. console.log('success', success)
  43. },
  44. })
  45. }
  46. </script>
  47. <style>
  48. .main-title-color {
  49. /* color: #2c8d39; */
  50. color: #d14328;
  51. }
  52. </style>