财务条
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

112 lines
2.7 KiB

<template>
<div class="mb-60">
<van-nav-bar
title="资源管理"
left-arrow
@click-left="onClickLeft"
/>
<van-tabs v-model:active="active" shrink line-width="60px" color="#59B4FF" title-active-color="#59B4FF">
<van-tab title="财务管理">
<!-- 财务管理页面 -->
<div class="bg-white p-4 mt-5 flex text-gray-500 flex-col d_jump">
<div>
<span class="font-semibold">财务管理</span> <span class="ml-2">对项目预算奖金进行配置</span>
</div>
<Search />
<FinanceManage />
</div>
<!-- 财务审批页面 -->
<div class="bg-white p-4 mt-5 flex text-gray-500 flex-col d_jump">
<div>
<span class="font-semibold">财务审批</span> <span class="ml-2">对员工提交的申请进行审批</span>
</div>
<Search />
<FinanceExamine />
</div>
<!-- 财务统计页面 -->
<div class="bg-white p-4 mt-5 flex text-gray-500 flex-col d_jump">
<div>
<span class="font-semibold">财务统计</span> <span class="ml-2 ">财务明细统计查看</span>
</div>
<img src="public/statistics.png" class="w-full">
</div>
</van-tab>
<van-tab title="角色管理">角色管理</van-tab>
<van-tab title="任务管理">任务管理</van-tab>
<van-tab title="成员管理">成员管理</van-tab>
</van-tabs>
<ul class="menu">
<li @click="jump(0)">财务管理</li>
<li @click="jump(1)">财务审批</li>
<li @click="jump(2)">财务统计</li>
</ul>
</div>
</template>
<script>
export default {
layout: 'default',
};
</script>
<script setup>
import {ref} from 'vue'
const active = ref(0);
function onClickLeft(){
console.log('返回上一页')
}
function jump(index) {
let jump = document.querySelectorAll('.d_jump')
// 获取需要滚动的距离
let total = jump[index].offsetTop
// Chrome
document.body.scrollTop = total
// Firefox
document.documentElement.scrollTop = total
// Safari
window.pageYOffset = total
}
</script>
<style lang="less">
.van-nav-bar__content{
background-color:#eee
}
.van-icon-arrow-left:before{
color: #000;
}
.financial-management{
// background-color:#ffffff;
// padding: 1rem;
// margin-top: 1rem;
// color: #555252;
// .title{
// font-weight: 600;
// }
// .title-describe{
// font-size: 12px;
// margin-left: 0.5rem;
// color: #A0A0A0;
// }
}
.menu{
position: fixed;
right: 0;
bottom: 15px;
z-index: 99
}
.menu li{
width: 72px;
color: #fff;
background: rgba(25, 137, 250, 0.6);
padding: 8px 20px;
border-radius: 30px 0 0 30px;
margin-bottom: 15px;
}
</style>