资源管理界面tab栏固定和发起申请按钮样式

components/RingEcharts.vue

@@ -12,7 +12,6 @@ onMounted(()=>{
   if(props.id){
       var myChart = echarts.init(document.getElementById(props.id));
   }
-
   const data = [
         {
             name: '办公费',

pages/applicant.vue

@@ -9,24 +9,27 @@
       title-active-color="#59B4FF"
     >
       <van-tab title="我的申请">
-        <div class="mt-8 bg-white flex flex-col">
-          <div class="p-4 pb-0 text-gray-500 font-semibold">历史申请</div>
+        <div class="h-full bg-white px-4">
+          <div class="mt-4 flex flex-col h-96 overflow-hidden">
+            <div class="py-4 pb-0 text-gray-500 font-semibold">历史申请</div>
             <Search class="px-4 pt-0" />
             <HistoricalApplication class="px-4 mt-0" />
           </div>
           <!-- 底部提交按钮部分 -->
-        <div class="mt-20" @click="toApplication">
-          <van-button type="primary" block>发起申请</van-button>
+          <div class="fixed w-11/12 box-border bottom-10 " @click="toApplication">
+            <van-button type="primary" block size="small">发起申请</van-button>
           </div>
+        </div>
+
       </van-tab>
 
       <van-tab title="我的奖金">
-        <div class="mt-8 bg-white">
+        <div class="mt-4 bg-white">
           <div class="p-4 pb-0 text-gray-500 font-semibold">奖金领取记录</div>
           <Search class="px-4 pt-0" />
           <BonusCollection class="px-4 mt-0" />
         </div>
-        <div class="my-4 bg-white">
+        <div class="mt-4 bg-white">
           <div class="text-gray-500 font-semibold m-4 py-3 border-b">
             待领取奖金
           </div>
@@ -61,13 +64,8 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 
 const active = ref(0);
-const isShow = ref(true);
 const isBonus = ref(true);
 
-function onClickLeft() {
-  console.log('返回上一页');
-}
-
 function toApplication() {
   const routeValue = router.currentRoute.value;
   const query = routeValue.query;

pages/application-details.vue

@@ -1,14 +1,5 @@
 <template>
 <div>
-  <!-- 导航栏 -->
-  <NuxtLink to="Initiate-application">
-      <van-nav-bar
-      title="申请详情"
-      left-arrow
-      @click-left="onClickLeft"
-    />
-  </NuxtLink>
-
   <!-- 审核结果 -->
   <div class="bg-white px-3">
     <div class="text-gray-500 font-semibold px-1 py-3">审核结果</div>
@@ -164,9 +155,6 @@ const submitter = ref([
   },
 ])
 
-function onClickLeft(){
-  console.log("上一页")
-}
 
 /**
  * 查询申请详情

pages/financial-approval-details.vue

@@ -1,11 +1,5 @@
 <template>
 <div>
-  <van-nav-bar
-      title="财务审批详情"
-      left-arrow
-      @click-left="onClickLeft"
-    />
-
      <!-- 发票信息 -->
   <div class="bg-white px-3">
     <div class="text-gray-500 font-semibold px-1 py-3 mt-5">发票信息</div>
@@ -173,9 +167,6 @@ const checkerList = ref([
   }
 ]);
 
-function onClickLeft(){
-  console.log('返回')
-}
 
 </script>
 <style lang="less" scoped>

pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-60">
+  <div class="fixed bg-gray-100">
     <van-tabs
       v-model:active="active"
       shrink
@@ -8,8 +8,9 @@
       title-active-color="#59B4FF"
     >
       <van-tab title="财务管理">
+        <div class="h-screen overflow-y-scroll w-screen mt-4">
             <!-- 财务管理页面 -->
-        <div class="bg-white p-4 mt-5 text-gray-500 flex-col">
+            <div class="bg-white p-4 text-gray-500 flex-col">
               <div>
                 <span class="font-semibold" id="finance-manage">财务管理</span>
                 <span class="ml-2">对项目预算、奖金进行配置</span>
@@ -27,7 +28,7 @@
               <FinanceExamine />
             </div>
             <!-- 财务统计页面 -->
-        <div class="bg-white p-4 mt-5 text-gray-500 flex-col">
+            <div class="bg-white p-4 mt-5 mb-60 text-gray-500 flex-col">
               <div>
                 <span class="font-semibold" id="finance-statistical">财务统计</span>
                 <span class="ml-2">财务明细统计查看</span>
@@ -96,10 +97,11 @@
                   <!-- <van-empty description="暂无图表数据信息" /> -->
               </div>
             </div>
+        </div>
       </van-tab>
-      <van-tab title="角色管理">角色管理</van-tab>
-      <van-tab title="任务管理">任务管理</van-tab>
-      <van-tab title="成员管理">成员管理</van-tab>
+      <van-tab title="角色管理"> <div class="h-screen overflow-y-scroll w-screen mt-4">角色管理</div></van-tab>
+      <van-tab title="任务管理"><div class="h-screen overflow-y-scroll w-screen mt-4">任务管理</div></van-tab>
+      <van-tab title="成员管理"><div class="h-screen overflow-y-scroll w-screen mt-4">成员管理</div></van-tab>
     </van-tabs>
 
     <div class="menu">