|
|
@ -1,16 +1,19 @@ |
|
|
|
<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-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> |
|
|
|
<span class="font-semibold" id="finance-manage">财务管理</span> |
|
|
|
<span class="ml-2">对项目预算、奖金进行配置</span> |
|
|
|
</div> |
|
|
|
<Search /> |
|
|
|
<FinanceManage /> |
|
|
@ -18,7 +21,8 @@ |
|
|
|
<!-- 财务审批页面 --> |
|
|
|
<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> |
|
|
|
<span class="font-semibold" id="finance-audit">财务审批</span> |
|
|
|
<span class="ml-2">对员工提交的申请进行审批</span> |
|
|
|
</div> |
|
|
|
<Search /> |
|
|
|
<FinanceExamine /> |
|
|
@ -26,9 +30,10 @@ |
|
|
|
<!-- 财务统计页面 --> |
|
|
|
<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> |
|
|
|
<span class="font-semibold" id="finance-statistical">财务统计</span> |
|
|
|
<span class="ml-2">财务明细统计查看</span> |
|
|
|
</div> |
|
|
|
<img src="public/statistics.png" class="w-full"> |
|
|
|
<img src="public/statistics.png" class="w-full" /> |
|
|
|
</div> |
|
|
|
</van-tab> |
|
|
|
<van-tab title="角色管理">角色管理</van-tab> |
|
|
@ -36,13 +41,12 @@ |
|
|
|
<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 class="menu"> |
|
|
|
<a href="#finance-manage">财务管理</a> |
|
|
|
<a href="#finance-audit">财务审批</a> |
|
|
|
<a href="#finance-statistical">财务统计</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
@ -52,56 +56,46 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import {ref} from 'vue' |
|
|
|
import { ref, onMounted, nextTick } from 'vue'; |
|
|
|
const active = ref(0); |
|
|
|
|
|
|
|
onMounted(async () => { |
|
|
|
scrollToElementByHash(); |
|
|
|
}); |
|
|
|
|
|
|
|
function onClickLeft(){ |
|
|
|
console.log('返回上一页') |
|
|
|
// 根据hash值跳转到指定位置 |
|
|
|
async function scrollToElementByHash() { |
|
|
|
await nextTick(); |
|
|
|
const hash = window.location.hash; |
|
|
|
if (!hash) return; |
|
|
|
const scrollDom = document.querySelector(hash); |
|
|
|
document.body.scrollTop = scrollDom.offsetTop; |
|
|
|
document.documentElement.scrollTop = scrollDom.offsetTop; |
|
|
|
window.pageYOffset = scrollDom.offsetTop; |
|
|
|
} |
|
|
|
|
|
|
|
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 |
|
|
|
function onClickLeft() { |
|
|
|
console.log('返回上一页'); |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less"> |
|
|
|
.van-nav-bar__content { |
|
|
|
background-color:#eee |
|
|
|
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; |
|
|
|
// } |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
<style scoped lang="less"> |
|
|
|
.menu { |
|
|
|
position: fixed; |
|
|
|
right: 0; |
|
|
|
bottom: 15px; |
|
|
|
z-index: 99 |
|
|
|
z-index: 99; |
|
|
|
} |
|
|
|
.menu li{ |
|
|
|
.menu a { |
|
|
|
display: block; |
|
|
|
width: 72px; |
|
|
|
color: #fff; |
|
|
|
background: rgba(25, 137, 250, 0.6); |
|
|
|