xl-mobile/src/pages/home/index.vue

<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 lang="scss" scoped>
.nav-desc {
    font-size: 20rpx;
}
</style>