mirrors2/naive-ui-admin
1
0
Fork 0
mirror of https://github.com/jekip/naive-ui-admin.git synced 2026-02-04 13:42:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

统一account页面与system中state的封装

Browse Source
This commit is contained in:
J.Bean
2024-10-18 18:10:35 +08:00
parent 01f9ba1046
commit b88c047643
1 changed files with 44 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/views/setting/account/account.vue
View File

@@ -7,7 +7,7 @@
class="thing-cell" class="thing-cell"
v-for="item in typeTabList" v-for="item in typeTabList"
:key="item.key" :key="item.key"
:class="{ 'thing-cell-on': type === item.key }" :class="{ 'thing-cell-on': state.type === item.key }"
@click="switchType(item)" @click="switchType(item)"
> >
<template #header>{{ item.name }}</template> <template #header>{{ item.name }}</template>
@@ -16,61 +16,63 @@
</n-card> </n-card>
</n-grid-item> </n-grid-item>
<n-grid-item span="18"> <n-grid-item span="18">
<n-card :bordered="false" size="small" :title="typeTitle" class="proCard"> <n-card :bordered="false" size="small" :title="state.typeTitle" class="proCard">
<BasicSetting v-if="type === 1" /> <BasicSetting v-if="state.type === 1" />
<SafetySetting v-if="type === 2" /> <SafetySetting v-if="state.type === 2" />
</n-card> </n-card>
</n-grid-item> </n-grid-item>
</n-grid> </n-grid>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { reactive, ref } from 'vue';
import BasicSetting from './BasicSetting.vue'; import BasicSetting from './BasicSetting.vue';
import SafetySetting from './SafetySetting.vue'; import SafetySetting from './SafetySetting.vue';
const typeTabList = [ const typeTabList = [
{ {
name: '基本设置', name: '基本设置',
desc: '个人账户信息设置', desc: '个人账户信息设置',
key: 1, key: 1,
}, },
{ {
name: '安全设置', name: '安全设置',
desc: '密码，邮箱等设置', desc: '密码，邮箱等设置',
key: 2, key: 2,
}, },
]; ];
const type = ref(1); const state = reactive({
const typeTitle = ref('基本设置'); type: 1,
typeTitle: '基本设置',
});
function switchType(e) { function switchType(e) {
type.value = e.key; state.type = e.key;
typeTitle.value = e.name; state.typeTitle = e.name;
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.thing-cell { .thing-cell {
margin: 0 -16px 10px; margin: 0 -16px 10px;
padding: 5px 16px; padding: 5px 16px;
&:hover { &:hover {
background: #f3f3f3; background: #f3f3f3;
cursor: pointer; cursor: pointer;
}
} }
}
.thing-cell-on { .thing-cell-on {
background: #f0faff; background: #f0faff;
color: #2d8cf0;
::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
color: #2d8cf0; color: #2d8cf0;
::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
color: #2d8cf0;
}
&:hover {
background: #f0faff;
}
} }
&:hover {
background: #f0faff;
}
}
</style> </style>