<template>
<div class="mb-60">
  <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 :routeUrl="'financial-approval-details'" />
      </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;
}
.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>
