index.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  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-20">
  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-8">unibest</view>
  19. <view class="text-center text-2xl mt-2 mb-8">最好用的 uniapp 开发框架</view>
  20. <view class="text-justify">
  21. unibest 是由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI 驱动的跨端快速启动模板,使用 VS Code
  22. 开发,具有代码提示、自动格式化、统一配置、代码片段等功能,同时内置了大量平时开发常用的基本组件,开箱即用,让你编写
  23. uniapp 拥有 best 体验。</view
  24. >
  25. <view class="text-blue mt-12 text-center"> 详细示例 参考 hello-unibest </view>
  26. <view class="my-2 text-center">https://github.com/codercup/hello-unibest</view>
  27. <!-- #ifndef MP-WEIXIN -->
  28. <!-- 微信使用复制按钮需要申请权限,先去掉 -->
  29. <button @click="onCopy">复制 hello-unibest github地址</button>
  30. <!-- #endif -->
  31. </view>
  32. </template>
  33. <script lang="ts" setup>
  34. // 获取屏幕边界到安全区域距离
  35. const { safeAreaInsets } = uni.getSystemInfoSync()
  36. // #ifndef MP-WEIXIN
  37. const onCopy = () => {
  38. uni.setClipboardData({
  39. data: 'https://github.com/codercup/hello-unibest',
  40. fail: (fail) => {
  41. console.error('fail', fail)
  42. },
  43. success: (success) => {
  44. console.log('success', success)
  45. },
  46. })
  47. }
  48. // #endif
  49. </script>
  50. <style>
  51. .main-title-color {
  52. /* color: #2c8d39; */
  53. color: #d14328;
  54. }
  55. </style>