财务门户设计
This commit is contained in:
@@ -23,8 +23,7 @@
|
||||
</Card>
|
||||
</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;
|
||||
|
||||
@@ -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>
|
||||
@@ -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';
|
||||
|
||||
<script lang="ts" setup name="AboutPage">
|
||||
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>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user