diff --git a/.gitignore b/.gitignore
index 54f07af..62d0178 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+
 dist
 dist-ssr
 *.local
diff --git a/src/components/skuModal.vue b/src/components/skuModal.vue
index 94e6a89..9c5683c 100644
--- a/src/components/skuModal.vue
+++ b/src/components/skuModal.vue
@@ -1,25 +1,11 @@
 <template>
-    <el-dialog title="选择规格" width="800" v-model="dialogVisible">
+    <el-dialog :title="goods.name" width="800" v-model="dialogVisible">
         <div class="header">选择规格</div>
-        <div class="row">
-            <div class="title">规格</div>
+        <div class="row" v-for="(item, index) in goods.tbProductSpec.specList" :key="index">
+            <div class="title">{{ item.name }}</div>
             <div class="sku_wrap">
-                <div class="item">默认（1人份）</div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="title">温度</div>
-            <div class="sku_wrap">
-                <div class="item">冰</div>
-                <div class="item">热</div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="title">糖度</div>
-            <div class="sku_wrap">
-                <div class="item">不另外加糖</div>
-                <div class="item">半糖</div>
-                <div class="item">标准糖</div>
+                <div class="item" :class="{ active: val.selected }" v-for="(val, i) in  item.value" :key="i"
+                    @click="selectedSku(index, i)">{{ val }}</div>
             </div>
         </div>
         <div class="footer">
@@ -36,9 +22,25 @@
 <script setup>
 import { ref, defineExpose } from 'vue'
 const dialogVisible = ref(false)
+const goods = ref({})
 
-function show() {
+// 选择规格
+function selectedSku(index, i) {
+    goods.value.tbProductSpec.specList[index].value[i].selected = true
+
+    console.log(goods.value.tbProductSpec.specList[index].val[i])
+}
+
+// 显示规格
+function show(item) {
     dialogVisible.value = true
+    goods.value = item
+    goods.value.tbProductSpec.specList = JSON.parse(goods.value.tbProductSpec.specList)
+    goods.value.tbProductSpec.specList.map(item => {
+        item.selected = false
+    })
+
+    console.log(goods.value)
 }
 
 defineExpose({
diff --git a/src/views/home/components/category.vue b/src/views/home/components/category.vue
new file mode 100644
index 0000000..9fa727c
--- /dev/null
+++ b/src/views/home/components/category.vue
@@ -0,0 +1,95 @@
+<!-- 分类 -->
+<template>
+</template>
+
+<script setup>
+import { queryCategory } from '@/api/product'
+import { ref, onMounted } from 'vue'
+import { useUser } from "@/store/user.js"
+const store = useUser();
+
+const categorys = ref([])
+const categorysActive = ref(0)
+
+// 查询分类信息
+async function queryCategoryAjax() {
+    try {
+        const res = await queryCategory({
+            shopId: store.userInfo.shopId,
+            page: 1,
+            pageSize: 100
+        })
+        categorys.value = res.list
+    } catch (error) {
+        console.log(error)
+    }
+}
+
+onMounted(() => {
+    queryCategoryAjax()
+})
+</script>
+
+<style scoped lang="scss">
+.header {
+    display: flex;
+    height: 80px;
+    justify-content: space-between;
+    border-bottom: 1px solid #ececec;
+}
+
+.menus {
+    display: flex;
+    padding: 0 10px;
+
+    .item {
+        padding: 0 10px;
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        span {
+            font-size: 24px;
+        }
+
+        &.active {
+            &::after {
+                content: "";
+                width: 70%;
+                height: 2px;
+                border-radius: 4px;
+                position: absolute;
+                bottom: 0;
+                left: 15%;
+                background-color: var(--primary-color);
+            }
+
+            span {
+                color: #333;
+            }
+        }
+    }
+}
+
+.all {
+    width: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    &::before {
+        content: "";
+        height: 60%;
+        border-left: 1px solid #ececec;
+        position: absolute;
+        left: 0;
+        top: 20%;
+    }
+
+    .icon {
+        color: #555;
+        font-size: 20px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home/components/goods.vue b/src/views/home/components/goods.vue
index cf7d491..bd5b0c5 100644
--- a/src/views/home/components/goods.vue
+++ b/src/views/home/components/goods.vue
@@ -3,7 +3,7 @@
     <div class="header">
         <div class="menus">
             <div class="item" :class="{ active: categorysActive == index }" v-for="(item, index) in categorys"
-                :key="item.id" @click="categorysActive = index">
+                :key="item.id" @click="changeCategory(item, index)">
                 <el-text>{{ item.name }}</el-text>
             </div>
         </div>
@@ -20,7 +20,7 @@
         <el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'" @click="changeShopListType"></el-button>
     </div>
     <div class="shop_list" :class="{ img: shopListType == 'img' }">
-        <div class="item_wrap" v-for="item in shopList" :key="item.id" @click="showSkuHandle">
+        <div class="item_wrap" v-for="item in goodsList" :key="item.id" @click="showSkuHandle(item)">
             <div class="item">
                 <div class="dot">2</div>
                 <div class="cover" v-if="shopListType == 'img'">
@@ -48,18 +48,23 @@ const store = useUser();
 
 const skuModalRef = ref(null)
 
-const shopListType = ref('text')
+const shopListType = ref('img')
 
 const categorys = ref([])
 const categorysActive = ref(0)
 
 const commdityName = ref('')
 
-const shopList = ref([])
+const originalGoods = ref([])
+const goodsList = ref([])
 
 // 显示sku
-function showSkuHandle() {
-    skuModalRef.value.show()
+function showSkuHandle(item) {
+    if (item.typeEnum == 'sku') {
+        skuModalRef.value.show(item)
+    } else {
+
+    }
 }
 
 // 切换商品显示模式
@@ -71,6 +76,13 @@ function changeShopListType() {
     }
 }
 
+// 切换分类
+function changeCategory(item, index) {
+    categorysActive.value = index
+    // goodsList.value = originalGoods.value.find(val => val.id == item.categoryId)
+    console.log(originalGoods.value.find(val => val.id == item.categoryId))
+}
+
 // 查询分类信息
 async function queryCategoryAjax() {
     try {
@@ -99,7 +111,8 @@ async function productqueryCommodityInfoAjax() {
             page: 1,
             pageSize: 1000
         })
-        shopList.value = res
+        originalGoods.value = res
+        goodsList.value = res
     } catch (error) {
         console.log(error)
     }