优化

.gitignore

@@ -7,6 +7,8 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+node_modules
+
 dist
 dist-ssr
 *.local

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>