finance/pages/index.vue

<template>
<div>
    <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="financial-management">
      <span class="title">财务管理</span> <span class="title-describe">对项目预算、奖金进行配置</span>
        <Search />
        <table>
            <tr class="table-header">
              <td class="name">任务名称</td>
              <td>预算(元)</td>
              <td>奖金(元)</td>
            </tr>
            <tr v-for="item in arrayData">
              <td>{{item.name}}</td>
              <td>{{item.budget}}</td>
              <td>{{item.bonus}}</td>
            </tr>
            <tr>
              <td>合计</td>
              <td>{{sumBudget}}</td>
              <td>{{sumBonus}}</td>
            </tr>
        </table>
        <div class="pagination">
            <van-pagination v-model="currentPage" :page-count="12" mode="simple" />
        </div>
  </div>
  </van-tab>
  <van-tab title="角色管理">角色管理</van-tab>
  <van-tab title="任务管理">任务管理</van-tab>
  <van-tab title="成员管理">成员管理</van-tab>
</van-tabs>

</div>

</template>

<script>
export default {
  layout: 'default',
};
</script>

<script setup>
import {ref} from 'vue'
const active = ref(0);
const arrayData = ref([
  {
    name:'财务条插件界面设计',
    budget:1000,
    bonus:0
  },
   {
    name:'财务条插件界面设计',
    budget:0,
    bonus:0
  },
   {
    name:'财务条插件界面设计',
    budget:0,
    bonus:0
  },
   {
    name:'财务条插件界面设计',
    budget:0,
    bonus:200
  },
  {
    name:'财务条插件界面设计',
    budget:1000,
    bonus:0
  },
   {
    name:'财务条插件界面设计',
    budget:0,
    bonus:0
  },
   {
    name:'财务条插件界面设计',
    budget:0,
    bonus:0
  },
   {
    name:'财务条插件界面设计',
    budget:0,
    bonus:200
  }
]);
const sumBudget = arrayData.value.reduce((sum, e) => sum + e.budget, 0);
const sumBonus = arrayData.value.reduce((sum, e) => sum + e.bonus, 0);
const currentPage = ref(1);

function onClickLeft(){
  console.log('返回上一页')
}

</script>

<style lang="less">
.van-nav-bar__content{
  background-color:#eee
}
.van-icon-arrow-left:before{
  color: #000;
}
.financial-management{
  background-color:#ffffff;
  padding: 1rem;
  margin-top: 2rem;
  color: #555252;
  .title{
  font-weight: 600;
  }
  .title-describe{
    font-size: 12px;
    margin-left: 0.5rem;
  }
  table {
    width: 100%;
    margin-top: 2rem;
    font-size: 14px;
    overflow-x: scroll;
    color:#797878 ;
    td {
    border: 0.5px solid #ccc;
    padding: 0.85rem 0  0.85rem  0.85rem;
    }
    .table-header{
      background-color: #F2F2F2;
      color: #A0A0A0;
    }
    .name{
      width:50%
    }
  }
  .pagination{
    width:50%;
    margin-left: 50%;
    margin-top:1rem
  }
}


</style>