<template>
<div class="mb-60">
      <!-- 财务审批页面 -->
      <div class="bg-white p-4 flex text-gray-500 flex-col d_jump">
        <div>
          <span class="font-semibold" id="finance-audit">财务审批</span> <span class="ml-2 text-xs">对员工提交的申请进行审批</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" id="finance-statistical">财务统计</span> <span class="ml-2 text-xs">财务明细统计查看</span>
        </div>
        <img src="public/statistics.png" class="w-full">
      </div>
  <ul class="menu">
    <a href="#finance-audit">财务审批</a>
    <a href="#finance-statistical">财务统计</a>
  </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 a {
  display: block;
  width: 72px;
  color: #fff;
  background: rgba(25, 137, 250, 0.6);
  padding: 8px 20px;
  border-radius: 30px 0 0 30px;
  margin-bottom: 15px;
}
</style>
