diff --git a/src/pages/category/category.vue b/src/pages/category/category.vue
index 7f9b38d..ceada1c 100644
--- a/src/pages/category/category.vue
+++ b/src/pages/category/category.vue
@@ -1,11 +1,236 @@
-
-
- category
+
+
+
+
+ 女靴
+
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+
+
+
+
+
+
+ {{ item.name }}
+ 全部
+
+
+
+
+ {{ goods.name }}
+
+ ¥
+ {{ goods.price }}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/category/components/PageSkeleton.vue b/src/pages/category/components/PageSkeleton.vue
new file mode 100644
index 0000000..e0d9d88
--- /dev/null
+++ b/src/pages/category/components/PageSkeleton.vue
@@ -0,0 +1,510 @@
+
+
+
+
+
+ 女靴
+
+
+
+
+
+ 居家
+
+
+ 美食
+
+
+ 服饰
+
+
+ 母婴
+
+
+ 个护
+
+
+ 严选
+
+
+ 数码
+
+
+ 运动
+
+
+ 杂项
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 居家生活用品
+ 全部
+
+
+
+
+ 极光限定 珠光蓝珐琅锅
+
+ ¥
+ 199.00
+
+
+
+
+ 钻石陶瓷涂层多用锅18cm 小奶锅
+
+ ¥
+ 149.00
+
+
+
+
+
+
+ 收纳
+ 全部
+
+
+
+
+ 开发员自留款，带滚轮双层脏衣篓
+
+ ¥
+ 125.00
+
+
+
+
+ 换季好帮手，大容量防尘衣物收纳袋
+
+ ¥
+ 69.00
+
+
+
+
+ 可水洗的布艺收纳盒
+
+ ¥
+ 29.90
+
+
+
+
+ 爆款明星好物，抽屉式透明储物柜
+
+ ¥
+ 129.00
+
+
+
+
+ 给衣柜减减肥，真空防潮压缩袋
+
+ ¥
+ 79.00
+
+
+
+
+ 拉开抽屉不凌乱，磨砂抽屉整理盒套装
+
+ ¥
+ 49.00
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/category/styles/category.scss b/src/pages/category/styles/category.scss
new file mode 100644
index 0000000..d9b3431
--- /dev/null
+++ b/src/pages/category/styles/category.scss
@@ -0,0 +1,138 @@
+page {
+ height: 100%;
+ overflow: hidden;
+}
+.viewport {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+.search {
+ padding: 20rpx 30rpx;
+ background-color: #fff;
+ .input {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 64rpx;
+ padding-left: 26rpx;
+ color: #8b8b8b;
+ font-size: 28rpx;
+ border-radius: 32rpx;
+ background-color: #f3f4f4;
+ }
+}
+.icon-search {
+ &::before {
+ margin-right: 10rpx;
+ }
+}
+/* 分类 */
+.categories {
+ flex: 1;
+ min-height: 400rpx;
+ display: flex;
+}
+/* 一级分类 */
+.primary {
+ overflow: hidden;
+ width: 180rpx;
+ flex: none;
+ background-color: #f6f6f6;
+ .item {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 96rpx;
+ font-size: 26rpx;
+ color: #595c63;
+ position: relative;
+ &::after {
+ content: '';
+ position: absolute;
+ left: 42rpx;
+ bottom: 0;
+ width: 96rpx;
+ border-top: 1rpx solid #e3e4e7;
+ }
+ }
+ .active {
+ background-color: #fff;
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 8rpx;
+ height: 100%;
+ background-color: #27ba9b;
+ }
+ }
+}
+.primary .item:last-child::after,
+.primary .active::after {
+ display: none;
+}
+/* 二级分类 */
+.secondary {
+ background-color: #fff;
+ .carousel {
+ height: 200rpx;
+ margin: 0 30rpx 20rpx;
+ border-radius: 4rpx;
+ overflow: hidden;
+ }
+ .panel {
+ margin: 0 30rpx 0rpx;
+ }
+ .title {
+ height: 60rpx;
+ line-height: 60rpx;
+ color: #333;
+ font-size: 28rpx;
+ border-bottom: 1rpx solid #f7f7f8;
+ .more {
+ float: right;
+ padding-left: 20rpx;
+ font-size: 24rpx;
+ color: #999;
+ }
+ }
+ .more {
+ &::after {
+ font-family: 'erabbit' !important;
+ content: '\e6c2';
+ }
+ }
+ .section {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 20rpx 0;
+ .goods {
+ width: 150rpx;
+ margin: 0rpx 20rpx 20rpx 0;
+ &:nth-child(3n) {
+ margin-right: 0;
+ }
+ .image {
+ width: 150rpx;
+ height: 150rpx;
+ }
+ .name {
+ padding: 5rpx;
+ font-size: 22rpx;
+ color: #333;
+ }
+ .price {
+ padding: 5rpx;
+ font-size: 18rpx;
+ color: #cf4444;
+ }
+ .number {
+ font-size: 24rpx;
+ margin-left: 2rpx;
+ }
+ }
+ }
+}
diff --git a/src/services/category.ts b/src/services/category.ts
new file mode 100644
index 0000000..53463e0
--- /dev/null
+++ b/src/services/category.ts
@@ -0,0 +1,11 @@
+import { http } from '@/utils/http'
+import type { CategoryTopItem } from '@/types/category'
+/**
+ * 分类列表-小程序
+ */
+export const getCategoryTopAPI = () => {
+ return http({
+ method: 'GET',
+ url: '/category/top',
+ })
+}
diff --git a/src/types/category.d.ts b/src/types/category.d.ts
new file mode 100644
index 0000000..180f2fc
--- /dev/null
+++ b/src/types/category.d.ts
@@ -0,0 +1,27 @@
+import type { GoodsItem } from './global'
+
+/** 一级分类项 */
+export type CategoryTopItem = {
+ /** 二级分类集合[ 二级分类项 ] */
+ children: CategoryChildItem[]
+ /** 一级分类id */
+ id: string
+ /** 一级分类图片集[ 一级分类图片项 ] */
+ imageBanners: string[]
+ /** 一级分类名称 */
+ name: string
+ /** 一级分类图片 */
+ picture: string
+}
+
+/** 二级分类项 */
+export type CategoryChildItem = {
+ /** 商品集合[ 商品项 ] */
+ goods: GoodsItem[]
+ /** 二级分类id */
+ id: string
+ /** 二级分类名称 */
+ name: string
+ /** 二级分类图片 */
+ picture: string
+}