refact: 资源管理界面根据hash滚动到目标位置

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "finance",
+  "name": "plugin-finance",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

pages/index.vue

@@ -1,48 +1,52 @@
 <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 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" id="finance-manage">财务管理</span>
+            <span class="ml-2">对项目预算、奖金进行配置</span>
+          </div>
+          <Search />
+          <FinanceManage />
         </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 class="bg-white p-4 mt-5 flex text-gray-500 flex-col d_jump">
+          <div>
+            <span class="font-semibold" id="finance-audit">财务审批</span>
+            <span class="ml-2">对员工提交的申请进行审批</span>
+          </div>
+          <Search />
+          <FinanceExamine />
         </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 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">财务明细统计查看</span>
+          </div>
+          <img src="public/statistics.png" class="w-full" />
         </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>
+      </van-tab>
+      <van-tab title="角色管理">角色管理</van-tab>
+      <van-tab title="任务管理">任务管理</van-tab>
+      <van-tab title="成员管理">成员管理</van-tab>
+    </van-tabs>
 
+    <div class="menu">
+      <a href="#finance-manage">财务管理</a>
+      <a href="#finance-audit">财务审批</a>
+      <a href="#finance-statistical">财务统计</a>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -52,61 +56,51 @@ export default {
 </script>
 
 <script setup>
-import {ref} from 'vue'
+import { ref, onMounted, nextTick } from 'vue';
 const active = ref(0);
 
+onMounted(async () => {
+  scrollToHashElement();
+});
 
-function onClickLeft(){
-  console.log('返回上一页')
+// 根据hash值跳转到指定位置
+async function scrollToHashElement() {
+  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
+.van-nav-bar__content {
+  background-color: #eee;
 }
-.van-icon-arrow-left:before{
+.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{
+</style>
+<style scoped lang="less">
+.menu {
   position: fixed;
   right: 0;
   bottom: 15px;
-  z-index: 99
+  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;
+.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>