<!-- 分类 -->
<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>