<template>
    <div class="header-icon-bar" @click="toConfigClick">
        <HcIcon name="settings" class="header-icon"/>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

//跳转到系统设置页面
const toConfigClick = () => {
    router.push({
        path: '/config/theme'
    });
}
</script>

<style lang="scss" scoped>
.header-icon-bar {
    position: relative;
    height: 40px;
    width: 40px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 30px;
    font-size: 26px;
    border: 1px solid #00000000;
    background: #f1f5f8;
    color: #202532;
    box-shadow: var(--hc-shadow);
}
.hc-layout-box .hc-container-view.home .hc-header-view .hc-header-content .header-icon-bar {
    border: 1px solid white;
    color: inherit;
    box-shadow: initial;
    background: initial;
}
</style>
