update

src/pages/home/index.vue

@@ -1,11 +1,60 @@
 <script setup>
+import XNav from "../../components/XNav.vue";
+import nav1 from '../../static/icons/icon-新手教学.png';
+import nav2 from '../../static/icons/icon-收益榜单.png';
+import nav3 from '../../static/icons/icon-邀请好友.png';
+import nav4 from '../../static/icons/icon-添加客服.png';
+import nav5 from '../../static/icons/icon-重要消息.png';
 
+const nav = [
+    {
+        title: '新手教学',
+        icon: nav1,
+    },
+    {
+        title: '收益榜单',
+        icon: nav2,
+    },
+    {
+        title: '邀请好友',
+        icon: nav3,
+    },
+    {
+        title: '添加客服',
+        icon: nav4,
+    },
+    {
+        title: '重要消息',
+        icon: nav5,
+    },
+];
 </script>
 
 <template>
     <!--首页-->
+    <XNav :show-back="false"></XNav>
+
+    <view class="box-border !p-[20rpx]">
+        <swiper class="!h-[240rpx] !w-full overflow-hidden rounded-[8rpx]">
+            <swiper-item class="!w-full !h-full" v-for="i in [1,2,3,4,5]">
+                <image class="!w-full !h-full" mode="widthFix" src="../../static/images/banner占位.png"></image>
+            </swiper-item>
+        </swiper>
+    </view>
+
+    <view class="mt-[44rpx] !flex !gap-[50rpx] !mx-[36rpx]">
+        <view v-for="item in nav" :key="item.title" class="!flex flex-col items-center gap-[6rpx]">
+            <view class="!size-[96rpx] rounded-[20rpx] overflow-hidden">
+                <image class="!size-full" :src="item.icon"></image>
+            </view>
+
+            <view class="nav-desc">{{item.title}}</view>
+        </view>
+    </view>
 </template>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.nav-desc {
+    font-size: 20rpx;
+}
 </style>