<!
-- src/views/PermissionApplyPage.vue
-->
<template>
<div class="permission_apply_page">
<div class="permission
-panel">
<!
-- 标题 + 帮助图标
-->
<div class="permission
-panel
-title">
{{ t('您没有当前页面的数据权限') }}
<el
-icon
class="help
-icon"
@click="handleHelpClick"
:size="20"
style="margin
-left: 8px; cursor: pointer"
>
<QuestionFilled />
</el
-icon>
</div>
<!
-- 内容区域
-->
<div class="permission
-panel
-content">
<!
-- Tab 按钮
-->
<div class="
tab-buttons" role="
tablist">
<button
v
-for="
tab in
tabs"
:key="
tab.key"
class="
tab-btn"
:class="{
active: current
Tab ===
tab.key }"
@click="switch
Tab(
tab.key)"
role="
tab"
:aria
-selected="current
Tab ===
tab.key"
tabindex="0"
>
{{
tab.label }}
</button>
</div>
<div v
-if="
tabs[
tab.key]==="not
-owned">
<NotOwnedPanel/>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue
-i18n';
import { QuestionFilled } from '@element
-plus/icons
-vue';
import NotOwnedPanel from './components/NotOwnedPanel.vue';
import OwnedPanel from './components/OwnedPanel.vue';
import PendingPanel from './components/PendingPanel.vue';
const { t } = useI18n();
const
tabs = [
{ key: 'not
-owned', label: '未拥有' },
{ key: 'owned', label: '已拥有' },
{ key: 'pending', label: '审批中' },
] as const;
const current
Tab = ref<'not
-owned' | 'owned' | 'pending'>('not
-owned');
const switch
Tab = (key: typeof current
Tab.value) => {
current
Tab.value = key;
};
const handleHelpClick = () => {
window.open(
'https://3ms.huawei.com/km/groups/3945222/blogs/details/18952136',
'_blank',
'noopener,noreferrer'
);
};
</script>
<style scoped lang="less">
@primary
-color: #5e7ce0;
@t
ext-dark: #252b3a;
@
tab-in
active-bg: var(
--btn
-hover
-color);
.permission_apply_page {
width: 100%;
height: 100%;
overflow: auto;
border
-left: 3px solid gray;
background: #fff;
}
.permission
-panel {
width: 1044px;
margin: 0 auto;
&
-title {
font
-size: 27px;
color: @t
ext-dark;
font
-weight: 600;
padding
-top: 11vh;
display: flex;
align
-items: center;
gap: 8px;
margin
-bottom: 30px;
}
&
-content {
min
-height: 400px;
}
}
.
tab-buttons {
display: flex;
margin
-bottom: 20px;
}
.
tab-btn {
width: 99px;
height: 31px;
line
-height: 31px;
border: none;
border
-radius: 2px;
cursor: pointer;
font
-size: 16px;
font
-weight: 500;
background
-color: @
tab-in
active-bg;
color: #333;
border
-right: 1px solid #ffffff;
&:focus
-visible {
outline: 2px solid @primary
-color;
border
-radius: 4px;
}
}
.
tab-btn.
active {
background
-color: @primary
-color;
color: #fff;
}
.loading {
t
ext-align: center;
padding: 40px;
color: #666;
font
-style: italic;
}
</style>
帮我补全代码
本文介绍如何通过修改CSS样式来定制ExtJS中的Tab面板样式，包括设置背景图片和位置等。
扫一扫
301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
