LoongPanel-Asp/web/pages/settings.vue

67 lines
1.3 KiB
Vue

<script setup lang="ts">
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
definePageMeta({
layout: 'main',
middleware: ['auth']
})
const mainLayoutStore=useMainLayoutStore()
</script>
<template>
<div class="setting-layout">
<div class="setting-list">
<div @click="navigateTo('/settings/panelSettings')" v-if="mainLayoutStore.UserInfo.role==='Admin'">
<Icon name="Settings2"/>
<p>平台设置</p>
</div>
<div >
<Icon name="UserRoundCog"/>
<p>账号设置</p>
</div>
<div @click="navigateTo('/settings/alertSettings')">
<Icon name="BellElectric"/>
<p>告警设置</p>
</div>
</div>
<div class="setting-content">
<NuxtPage/>
</div>
</div>
</template>
<style scoped lang="scss">
@import "base";
.setting-layout{
*{
@include SC_Font
}
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
min-height: 800px;
width: 100%;
gap: $gap*2;
}
.setting-list,.setting-content{
background: $light-bg-color;
border: $border;
border-radius: $radius;
}
.setting-list{
display: flex;
flex-direction: column;
gap: $gap;
padding: $padding;
div{
display: flex;
padding: $padding;
gap: $gap;
cursor: pointer;
&:hover{
background: $light-bg-underline-color;
border-radius: $radius;
}
}
}
</style>