财务门户设计

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>
</div> </div>
<!-- 右侧控制按钮 -->
<button <button
class="control-btn right-btn" class="control-btn right-btn"
@click="scrollCards('right')" @click="scrollCards('right')"
@@ -73,10 +72,10 @@
loginCode: userinfo.value.loginCode, loginCode: userinfo.value.loginCode,
} }
const result = await bizDataReportUserListAll(params); const result = await bizDataReportUserListAll(params);
cardListData.value = result || []; // 防止返回 null 导致渲染异常 cardListData.value = result || [];
} catch (error) { } catch (error) {
console.error('获取应用列表失败:', error); console.error('获取应用列表失败:', error);
cardListData.value = []; // 异常时置空列表,显示空状态 cardListData.value = [];
} }
}; };
@@ -90,9 +89,7 @@
const { scrollLeft, clientWidth } = scrollWrapper.value; const { scrollLeft, clientWidth } = scrollWrapper.value;
const listScrollWidth = cardList.value.scrollWidth; const listScrollWidth = cardList.value.scrollWidth;
// 左滚判断
canScrollLeft.value = scrollLeft > scrollAccuracy; canScrollLeft.value = scrollLeft > scrollAccuracy;
// 右滚判断
const remainingScroll = listScrollWidth - (scrollLeft + clientWidth); const remainingScroll = listScrollWidth - (scrollLeft + clientWidth);
canScrollRight.value = remainingScroll > scrollTolerance; canScrollRight.value = remainingScroll > scrollTolerance;
}; };
@@ -217,7 +214,6 @@
</script> </script>
<style scoped> <style scoped>
/* 样式部分保持不变 */
.card-container { .card-container {
width: 100%; width: 100%;
height: 12vh; 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> <template>
<PageWrapper :sidebarWidth="220"> <div class="web-page-container">
<template #sidebar> <div style="width: 100%;">
<div class="config-sidebar"> <MySchedule />
<div </div>
v-for="item in configItems" <Tabs v-model:activeKey="activeKey">
:key="item.key" <TabPane key="1" tab="便签管理">
class="sidebar-item" <NoteTodo />
:class="{ active: activeKey === item.key }" </TabPane>
@click="activeKey = item.key" <TabPane key="2" tab="日程管理">
> <Calendar />
<Icon :icon="item.icon" size="14"/> {{ item.label }} </TabPane>
</div> <TabPane key="3" tab="我的待办">
</div> <ItemsInfo />
</template> </TabPane>
<!-- 主内容区域 --> <TabPane key="4" tab="文件管理">
<div class="config-content"> <MyfileInfo />
<div v-if="activeKey === '1'" class="config-panel"> </TabPane>
<Welcome /> </Tabs>
</div> </div>
</div>
</PageWrapper>
</template> </template>
<script lang="ts" setup name="AboutPage"> <script lang="ts" setup name="AboutPage">
import { h, ref } from 'vue'; import { h, ref, onMounted } from 'vue';
import { Icon } from '@jeesite/core/components/Icon'; import { Tag, Tabs, TabPane } from 'ant-design-vue';
import { PageWrapper } from '@jeesite/core/components/Page'; import NoteTodo from './components/NoteTodo.vue';
import { Tag, Tabs ,TabPane } from 'ant-design-vue'; import MySchedule from './components/MySchedule.vue';
import Welcome from './components/Welcome.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 activeKey = ref('1');
const configItems = [
{ key: '1', label: '工作台', icon: 'simple-line-icons:grid' },
];
</script> </script>
<style scoped> <style scoped lang="less">
/* 侧边栏样式 */ .web-page-container {
.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 {
width: 100%; width: 100%;
height: 100%; background-color: #e8f4f8;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0 2px;
} }
</style> </style>