财务门户设计

This commit is contained in:
2026-02-20 22:09:01 +08:00
parent dc6a21c448
commit 528e6665bb
3 changed files with 39 additions and 119 deletions

View File

@@ -24,7 +24,6 @@
</div>
</div>
<!-- 右侧控制按钮 -->
<button
class="control-btn right-btn"
@click="scrollCards('right')"
@@ -73,10 +72,10 @@
loginCode: userinfo.value.loginCode,
}
const result = await bizDataReportUserListAll(params);
cardListData.value = result || []; // 防止返回 null 导致渲染异常
cardListData.value = result || [];
} catch (error) {
console.error('获取应用列表失败:', error);
cardListData.value = []; // 异常时置空列表,显示空状态
cardListData.value = [];
}
};
@@ -90,9 +89,7 @@
const { scrollLeft, clientWidth } = scrollWrapper.value;
const listScrollWidth = cardList.value.scrollWidth;
// 左滚判断
canScrollLeft.value = scrollLeft > scrollAccuracy;
// 右滚判断
const remainingScroll = listScrollWidth - (scrollLeft + clientWidth);
canScrollRight.value = remainingScroll > scrollTolerance;
};
@@ -217,7 +214,6 @@
</script>
<style scoped>
/* 样式部分保持不变 */
.card-container {
width: 100%;
height: 12vh;

View File

@@ -1,43 +0,0 @@
<template>
<div class="web-page-container">
<MySchedule />
<Tabs v-model:activeKey="activeKey">
<TabPane key="1" tab="日程管理">
<Calendar />
</TabPane>
<TabPane key="2" tab="我的待办">
<ItemsInfo />
</TabPane>
<TabPane key="3" tab="文件管理">
<MyfileInfo />
</TabPane>
<TabPane key="4" tab="便签管理">
<NoteTodo />
</TabPane>
</Tabs>
</div>
</template>
<script lang="ts" setup name="AboutPage">
import { h, ref, onMounted } from 'vue';
import { Tag, Tabs, TabPane } from 'ant-design-vue';
import NoteTodo from './NoteTodo.vue';
import MySchedule from './MySchedule.vue';
import Calendar from './calendar/list.vue';
import ItemsInfo from './listItem/list.vue';
import MyfileInfo from './myfiles/index.vue';
const activeKey = ref('1');
</script>
<style scoped lang="less">
// 整体容器样式
.web-page-container {
width: 100%;
background-color: #e8f4f8;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0 2px;
}
</style>

View File

@@ -1,77 +1,44 @@
<template>
<PageWrapper :sidebarWidth="220">
<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">
<Welcome />
</div>
</div>
</PageWrapper>
<div class="web-page-container">
<div style="width: 100%;">
<MySchedule />
</div>
<Tabs v-model:activeKey="activeKey">
<TabPane key="1" tab="便签管理">
<NoteTodo />
</TabPane>
<TabPane key="2" tab="日程管理">
<Calendar />
</TabPane>
<TabPane key="3" tab="我的待办">
<ItemsInfo />
</TabPane>
<TabPane key="4" tab="文件管理">
<MyfileInfo />
</TabPane>
</Tabs>
</div>
</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 Welcome from './components/Welcome.vue';
import { h, ref, onMounted } from 'vue';
import { Tag, Tabs, TabPane } from 'ant-design-vue';
import NoteTodo from './components/NoteTodo.vue';
import MySchedule from './components/MySchedule.vue';
import Calendar from './components/calendar/list.vue';
import ItemsInfo from './components/listItem/list.vue';
import MyfileInfo from './components/myfiles/index.vue';
const activeKey = ref('1');
const configItems = [
{ key: '1', label: '工作台', icon: 'simple-line-icons:grid' },
];
</script>
<style scoped>
/* 侧边栏样式 */
.config-sidebar {
padding: 4px 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: 2px;
height: 100%;
box-sizing: border-box;
background-color: #fff;
}
.config-panel {
<style scoped lang="less">
.web-page-container {
width: 100%;
height: 100%;
background-color: #e8f4f8;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0 2px;
}
</style>