财务门户设计
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
<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>
|
||||||
Reference in New Issue
Block a user