feat: 完成对接

src/pages/index/index.vue

@@ -8,50 +8,86 @@
 }
 </route>
 <template>
-  <view
-    class="bg-white overflow-hidden pt-2 px-4"
-    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
-  >
-    <view class="mt-12">
-      <image src="/static/logo.svg" alt="" class="w-28 h-28 block mx-auto" />
+  <view class="home-page">
+    <NavBar />
+    <image
+      class="mx-auto block w-345 h-170 mt-15 rounded-10 overflow-hidden"
+      src="@/static/images/home/main-bg.png"
+      mode="aspectFill"
+    />
+    <view class="flex bg-#F5F9FF py-15 rounded-10 m-15 border-2 border-white border-solid">
+      <view class="flex-1 flex flex-col items-center" @click="handleIntroduction">
+        <image class="w-30 h-30" src="@/static/images/home/nav-1.png" mode="aspectFill" />
+        <text class="mt-8 text-14 text-#333">简介</text>
+      </view>
+      <view class="flex-1 flex flex-col items-center" @click="handleInvite">
+        <image class="w-30 h-30" src="@/static/images/home/nav-2.png" mode="aspectFill" />
+        <text class="mt-8 text-14 text-#333">抽奖转盘</text>
+      </view>
+      <view class="flex-1 flex flex-col items-center" @click="handleInvite">
+        <image class="w-30 h-30" src="@/static/images/home/nav-2.png" mode="aspectFill" />
+        <text class="mt-8 text-14 text-#333">奖励制度</text>
+      </view>
+      <view class="flex-1 flex flex-col items-center" @click="handleOfficialCommunity">
+        <image class="w-30 h-30" src="@/static/images/home/nav-3.png" mode="aspectFill" />
+        <text class="mt-8 text-14 text-#333">官方社群</text>
+      </view>
     </view>
-    <view class="text-center text-4xl main-title-color mt-4">unibest</view>
-    <view class="text-center text-2xl mt-2 mb-8">最好用的 uniapp 开发模板</view>
 
-    <view class="text-justify max-w-100 m-auto text-4 indent mb-2">{{ description }}</view>
-    <view class="text-center mt-8">
-      当前平台是：
-      <text class="text-green-500">{{ PLATFORM.platform }}</text>
+    <view class="flex bg-white py-8 px-15 rounded-10 m-15">
+      <view class="text-14 text-#333">系统公告</view>
+      <view class="text-12 ml-15 text-#999">每邀请人可以获得20股马尔代夫股权</view>
     </view>
-    <view class="text-center mt-4">
-      模板分支是：
-      <text class="text-green-500">i18n</text>
+
+    <view class="bg-white py-15 px-15 rounded-10 m-15">
+      <view class="text-14 text-#333">热点新闻</view>
+      <view class="flex mt-15" v-for="item in 10" :key="item">
+        <image
+          class="w-85 h-85 rounded-10"
+          src="@/static/images/home/news-2.png"
+          mode="aspectFill"
+        />
+        <view class="ml-15 flex-1 flex flex-col justify-between">
+          <view text-14>#人海战术#签约!中央广播电视总台与农业农村部达成战略合作</view>
+          <view class="text-12 text-#999">证券时报网</view>
+        </view>
+      </view>
     </view>
   </view>
-  <tabbar />
 </template>
 
 <script lang="ts" setup>
-import PLATFORM from '@/utils/platform'
+import NavBar from '@/components/NavBar.vue'
 
 defineOptions({
   name: 'Home',
 })
 
-// 获取屏幕边界到安全区域距离
-const { safeAreaInsets } = uni.getSystemInfoSync()
-const author = ref('菲鸽')
-const description = ref(
-  'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
-)
-// 测试 uni API 自动引入
-onLoad(() => {
-  console.log(author)
-})
+const handleIntroduction = () => {
+  uni.navigateTo({
+    url: '/pages-sub/introduction/index',
+  })
+}
+
+const handleInvite = () => {
+  uni.navigateTo({
+    url: '/pages/invite/index',
+  })
+}
+
+const handleOfficialCommunity = () => {
+  uni.navigateTo({
+    url: '/pages-sub/official-community/index',
+  })
+}
 </script>
 
 <style>
-.main-title-color {
-  color: #d14328;
+.home-page {
+  min-height: 100vh;
+  padding-bottom: 100rpx;
+  background-image: url('@/static/images/bg.png');
+  background-position: top;
+  background-size: cover;
 }
 </style>