diff --git a/src/components/JbcSwiper.vue b/src/components/JbcSwiper.vue
new file mode 100644
index 0000000..c82f4e4
--- /dev/null
+++ b/src/components/JbcSwiper.vue
@@ -0,0 +1,70 @@
+<template>
+  <view class="carousel">
+    <swiper :circular="true" :autoplay="false" :interval="3000" @change="handleChange">
+      <swiper-item v-for="item in props.list" :key="item.id">
+        <navigator url="/pages/index/index" hover-class="none" class="navigator">
+          <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
+        </navigator>
+      </swiper-item>
+    </swiper>
+    <!-- 指示点 -->
+    <view class="indicator">
+      <text
+        v-for="(item, index) in props.list"
+        :key="item.id"
+        class="dot"
+        :class="{ active: index === activeIndex }"
+      ></text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { BannerItem } from '@/types/home'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  list: BannerItem[]
+}>()
+
+// 当前轮播图索引
+const activeIndex = ref(0)
+// 轮播图切换
+const handleChange: UniHelper.SwiperOnChange = (e) => {
+  activeIndex.value = e.detail!.current
+}
+</script>
+
+<style lang="scss">
+/* 轮播图 */
+.carousel {
+  height: 280rpx;
+  position: relative;
+  overflow: hidden;
+  transform: translateY(0);
+  background-color: #efefef;
+  .indicator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 16rpx;
+    display: flex;
+    justify-content: center;
+    .dot {
+      width: 30rpx;
+      height: 6rpx;
+      margin: 0 8rpx;
+      border-radius: 6rpx;
+      background-color: rgba(255, 255, 255, 0.4);
+    }
+    .active {
+      background-color: #fff;
+    }
+  }
+  .navigator,
+  .image {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/manifest.json b/src/manifest.json
index 309b9ec..c38e717 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,72 +1,72 @@
 {
-    "name" : "",
-    "appid" : "",
-    "description" : "",
-    "versionName" : "1.0.0",
-    "versionCode" : "100",
-    "transformPx" : false,
-    /* 5+App特有相关 */
-    "app-plus" : {
-        "usingComponents" : true,
-        "nvueStyleCompiler" : "uni-app",
-        "compilerVersion" : 3,
-        "splashscreen" : {
-            "alwaysShowBeforeRender" : true,
-            "waiting" : true,
-            "autoclose" : true,
-            "delay" : 0
-        },
-        /* 模块配置 */
-        "modules" : {},
-        /* 应用发布信息 */
-        "distribute" : {
-            /* android打包配置 */
-            "android" : {
-                "permissions" : [
-                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
-                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
-                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
-                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera\"/>",
-                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
-                ]
-            },
-            /* ios打包配置 */
-            "ios" : {},
-            /* SDK配置 */
-            "sdkConfigs" : {}
-        }
+  "name": "",
+  "appid": "",
+  "description": "",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  /* 5+App特有相关 */
+  "app-plus": {
+    "usingComponents": true,
+    "nvueStyleCompiler": "uni-app",
+    "compilerVersion": 3,
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
     },
-    /* 快应用特有相关 */
-    "quickapp" : {},
-    /* 小程序特有相关 */
-    "mp-weixin" : {
-        "appid" : "",
-        "setting" : {
-            "urlCheck" : false
-        },
-        "usingComponents" : true
+    /* 模块配置 */
+    "modules": {},
+    /* 应用发布信息 */
+    "distribute": {
+      /* android打包配置 */
+      "android": {
+        "permissions": [
+          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+          "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+          "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+          "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+          "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+          "<uses-feature android:name=\"android.hardware.camera\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+        ]
+      },
+      /* ios打包配置 */
+      "ios": {},
+      /* SDK配置 */
+      "sdkConfigs": {}
+    }
+  },
+  /* 快应用特有相关 */
+  "quickapp": {},
+  /* 小程序特有相关 */
+  "mp-weixin": {
+    "appid": "",
+    "setting": {
+      "urlCheck": false
     },
-    "mp-alipay" : {
-        "usingComponents" : true
-    },
-    "mp-baidu" : {
-        "usingComponents" : true
-    },
-    "mp-toutiao" : {
-        "usingComponents" : true
-    },
-    "uniStatistics": {  
-        "enable": false
-    },
-    "vueVersion" : "3"
+    "usingComponents": true
+  },
+  "mp-alipay": {
+    "usingComponents": true
+  },
+  "mp-baidu": {
+    "usingComponents": true
+  },
+  "mp-toutiao": {
+    "usingComponents": true
+  },
+  "uniStatistics": {
+    "enable": false
+  },
+  "vueVersion": "3"
 }
diff --git a/src/pages.json b/src/pages.json
index 2c0f778..3137818 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -7,8 +7,8 @@
     "custom": {
       // uni-ui 规则如下配置
       "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
-      // 以 Xtx 开头的组件，在 components 文件夹中查找引入（需要重启服务器）
-      "^Xtx(.*)": "@/components/Xtx$1.vue"
+      // 以 Jbc 开头的组件，在 components 文件夹中查找引入（需要重启服务器）
+      "^Jbc(.*)": "@/components/Jbc$1.vue"
     }
   },
   // 页面路由
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 4b73e38..8975062 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,14 +1,26 @@
 <template>
   <CustomNavbar />
-  <view class="content">
-    {{ title }}
-  </view>
+  <JbcSwiper :list="bannerList" />
+  <view class="content"> home </view>
 </template>
 
 <script setup lang="ts">
+import type { BannerItem } from '@/types/home'
 import CustomNavbar from './components/CustomNavbar.vue'
 import { ref } from 'vue'
-const title = ref('Hello')
+import { getHomeBanner } from '@/services/home'
+import { onLoad } from '@dcloudio/uni-app'
+
+// 获取轮播图数据
+const bannerList = ref<BannerItem[]>([])
+const getBannerList = async () => {
+  const res = await getHomeBanner()
+  bannerList.value = res.result
+  console.log('bannerList: ', bannerList.value)
+}
+onLoad(() => {
+  getBannerList()
+})
 </script>
 
 <style></style>
diff --git a/src/services/home.ts b/src/services/home.ts
new file mode 100644
index 0000000..350bed1
--- /dev/null
+++ b/src/services/home.ts
@@ -0,0 +1,17 @@
+import type { BannerItem } from '@/types/home'
+import { http } from '@/utils/http'
+
+/**
+ * 获取首页轮播图
+ * @param distributionSite - 广告区域展示位置: 1 为首页（默认值）; 2 为商品分类页
+ * @returns 轮播图数据
+ */
+export const getHomeBanner = (distributionSite = 1) => {
+  return http<BannerItem[]>({
+    url: '/home/banner',
+    method: 'GET',
+    data: {
+      distributionSite,
+    },
+  })
+}
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
new file mode 100644
index 0000000..adae446
--- /dev/null
+++ b/src/types/components.d.ts
@@ -0,0 +1,10 @@
+import JbcSwiper from '@/components/JbcSwiper.vue'
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    JbcSwiper: typeof JbcSwiper
+  }
+}
+
+// 组件实例类型
+export type JbcSwiperInstance = InstanceType<typeof JbcSwiper>
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
new file mode 100644
index 0000000..468846d
--- /dev/null
+++ b/src/types/global.d.ts
@@ -0,0 +1,39 @@
+/** 通用分页结果类型 */
+export type PageResult<T> = {
+  /** 列表数据 */
+  items: T[]
+  /** 总条数 */
+  counts: number
+  /** 当前页数 */
+  page: number
+  /** 总页数 */
+  pages: number
+  /** 每页条数 */
+  pageSize: number
+}
+
+/** 通用分页参数类型 */
+export type PageParams = {
+  /** 页码：默认值为 1 */
+  page?: number
+  /** 页大小：默认值为 10 */
+  pageSize?: number
+}
+
+/** 通用商品类型 */
+export type GoodsItem = {
+  /** 商品描述 */
+  desc: string
+  /** 商品折扣 */
+  discount: number
+  /** id */
+  id: string
+  /** 商品名称 */
+  name: string
+  /** 商品已下单数量 */
+  orderNum: number
+  /** 商品图片 */
+  picture: string
+  /** 商品价格 */
+  price: number
+}
diff --git a/src/types/home.d.ts b/src/types/home.d.ts
new file mode 100644
index 0000000..32e2539
--- /dev/null
+++ b/src/types/home.d.ts
@@ -0,0 +1,42 @@
+import type { GoodsItem } from './global'
+
+/** 首页-广告区域数据类型 */
+export type BannerItem = {
+  /** 跳转链接 */
+  hrefUrl: string
+  /** id */
+  id: string
+  /** 图片链接 */
+  imgUrl: string
+  /** 跳转类型 */
+  type: number
+}
+
+/** 首页-前台类目数据类型 */
+export type CategoryItem = {
+  /** 图标路径 */
+  icon: string
+  /** id */
+  id: string
+  /** 分类名称 */
+  name: string
+}
+
+/** 首页-热门推荐数据类型 */
+export type HotItem = {
+  /** 说明 */
+  alt: string
+  /** id */
+  id: string
+  /** 图片集合[ 图片路径 ] */
+  pictures: string[]
+  /** 跳转地址 */
+  target: string
+  /** 标题 */
+  title: string
+  /** 推荐类型 */
+  type: string
+}
+
+/** 猜你喜欢-商品类型 */
+export type GuessItem = GoodsItem
diff --git a/src/utils/http.ts b/src/utils/http.ts
index c68988b..8211efc 100644
--- a/src/utils/http.ts
+++ b/src/utils/http.ts
@@ -51,7 +51,7 @@ uni.addInterceptor('uploadFile', interceptorOptions)
  *    3.2 其他错误 -> 根据后端错误信息轻提示
  *    3.3 网络错误 -> 提示用户换网络
  */
-interface Data<T> {
+type Data<T> = {
   code: number
   msg: string
   result: T