88 lines
2.1 KiB
Vue
88 lines
2.1 KiB
Vue
<template>
|
|
<PageWrapper :sidebarWidth="180">
|
|
<template #sidebar>
|
|
<div class="config-sidebar">
|
|
<div
|
|
v-for="item in configItems"
|
|
:key="item.key"
|
|
class="sidebar-item"
|
|
:class="{ active: activeKey === item.key }"
|
|
@click="activeKey = item.key"
|
|
>
|
|
<Icon :icon="item.icon" size="14"/> {{ item.label }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 主内容区域 -->
|
|
<div class="config-content">
|
|
<div v-if="activeKey === '1'" class="config-panel">
|
|
<MailSent />
|
|
</div>
|
|
<div v-if="activeKey === '2'" class="config-panel">
|
|
<MailReceived />
|
|
</div>
|
|
<div v-if="activeKey === '3'" class="config-panel">
|
|
<MailAttachments />
|
|
</div>
|
|
</div>
|
|
</PageWrapper>
|
|
</template>
|
|
<script lang="ts" setup name="AboutPage">
|
|
import { h, ref } from 'vue';
|
|
import { Icon } from '@jeesite/core/components/Icon';
|
|
import { PageWrapper } from '@jeesite/core/components/Page';
|
|
import { Tag, Tabs ,TabPane } from 'ant-design-vue';
|
|
import MailSent from './sent/list.vue';
|
|
import MailReceived from './received/list.vue';
|
|
import MailAttachments from './attachments/list.vue';
|
|
|
|
const activeKey = ref('1');
|
|
const configItems = [
|
|
{ key: '1', label: '发件箱', icon: 'simple-line-icons:note' },
|
|
{ key: '2', label: '收件箱', icon: 'ant-design:inbox-outlined' } ,
|
|
{ key: '3', label: '附件箱', icon: 'ant-design:profile-outlined' } ,
|
|
];
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 侧边栏样式 */
|
|
.config-sidebar {
|
|
padding: 12px 0;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.sidebar-item {
|
|
padding: 12px 24px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: 14px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
}
|
|
|
|
.sidebar-item:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.sidebar-item.active {
|
|
background-color: #e6f7ff;
|
|
color: #1890ff;
|
|
font-weight: 320;
|
|
border-right: 3px solid #1890ff;
|
|
}
|
|
|
|
/* 主内容区域样式 */
|
|
.config-content {
|
|
padding: 8px;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.config-panel {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style> |