75 lines
1.5 KiB
Vue
75 lines
1.5 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 @click="navigateTo(`/settings/userSettings/${mainLayoutStore.UserInfo.id}`)" >
|
|
<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: 74.645vh;
|
|
height: 100%;
|
|
width: 100%;
|
|
gap: $gap*2;
|
|
|
|
}
|
|
.setting-list,.setting-content{
|
|
background: $light-bg-color;
|
|
border: $border;
|
|
border-radius: $radius;
|
|
color: $light-text-color;
|
|
overflow: hidden;
|
|
.dark-mode &{
|
|
background: $dark-bg-color;
|
|
color: $dark-text-color;
|
|
}
|
|
}
|
|
.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> |