DIGITAL_MANAGEMENT
/
finance
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更改为tailwind css 样式

apply
Min5203 4 years ago
parent
0434a23750
commit
7f5c5ba8d7
8 changed files with 79 additions and 193 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      components/FinanceExamine.vue
  2. 42
      components/FinanceManage.vue
  3. 6
      components/Search.vue
  4. 1
      layouts/default.vue
  5. 113
      pages/Initiate-application.vue
  6. 38
      pages/applicant.vue
  7. 5
      pages/financial-approval-details.vue
  8. 25
      pages/index.vue

32
components/FinanceExamine.vue
View File

@ -1,10 +1,10 @@
<template>
<div>
<div class="w-full overflow-x-scroll">
<table>
<tr class="table-header">
<table class="text-gray-500 mt-4 text-ms">
<tr class="bg-gray-100">
<td width="15%">申请人</td>
<td width="15%">金额(元)</td>
<td width="16%">金额(元)</td>
<td width="30%">时间</td>
<td width="20%">操作</td>
</tr>
@ -22,7 +22,7 @@
</tr>
</table>
</div>
<div class="pagination">
<div class="w-1/2 mt-4 ml-48">
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />
</div>
</div>
@ -99,31 +99,17 @@ const data = reactive({
</script>
<style scoped lang="less">
table {
table{
width: 120%;
margin-top: 1rem;
font-size: 14px;
overflow-x: scroll;
color:#797878 ;
td {
td{
border: 0.5px solid #ccc;
padding: 0.85rem;
// width: 5.9375rem;
}
.table-header{
background-color: #F2F2F2;
color: #A0A0A0;
}
}
.pagination{
width:50%;
margin-left: 50%;
margin-top:1rem
}
}
.input-box{
.input-box{
padding: 0!important;
border-bottom: 1px solid #ccc
}
}
</style>

42
components/FinanceManage.vue
View File

@ -1,10 +1,10 @@
<template>
<div>
<table>
<tr class="table-header">
<td class="name">任务名称</td>
<td>预算(元)</td>
<td>奖金(元)</td>
<table class="w-full text-gray-500 mt-4 text-ms">
<tr class="bg-gray-100">
<td class="">任务名称</td>
<td class="">预算(元)</td>
<td class="">奖金(元)</td>
</tr>
<tr v-for="item in arrayData">
<td>{{item.name}}</td>
@ -23,7 +23,7 @@
<td>{{sumBonus}}</td>
</tr>
</table>
<div class="pagination">
<div class="w-1/2 mt-4 ml-48">
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />
</div>
</div>
@ -98,34 +98,12 @@ const data = reactive({
</script>
<style scoped lang="less">
table {
width: 100%;
margin-top: 1rem;
font-size: 14px;
overflow-x: scroll;
color:#797878 ;
td {
td{
border: 0.5px solid #ccc;
padding: 0.85rem;
width: 5.9375rem;
}
.table-header{
background-color: #F2F2F2;
color: #A0A0A0;
}
.name{
width:50%
}
}
.pagination{
width:50%;
margin-left: 50%;
margin-top:1rem
}
.input-box{
}
.input-box{
padding: 0!important;
border-bottom: 1px solid #ccc
}
}
</style>

6
components/Search.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="search">
<div class="pt-4">
<van-search v-model="searchRef" placeholder="搜索" />
</div>
</template>
@ -12,9 +12,7 @@ const searchRef = ref('')
</script>
<style lang="less">
.search{
padding-top:1rem
}
.van-search{
padding: 0;
}

1
layouts/default.vue
View File

@ -8,5 +8,6 @@
.container{
background:#eee;
height:100%;
width:100%;
}
</style>

113
pages/Initiate-application.vue
View File

@ -8,24 +8,22 @@
/>
</NuxtLink>
<!-- 申请发票需要输入的数据 -->
<div class="apply-message">
<van-cell-group>
<van-cell title="发票信息" class="bill-name"/>
</van-cell-group>
<div class="bg-white pb-3">
<div class="text-gray-500 px-4 py-3 font-semibold">发票信息</div>
<!-- 是否上传票据 -->
<div v-show="isInvoice">
<div class="bill">
<div class="flex px-3 pt-3 pb-2" v-show="titleHidden">
<div class="mx-4 pb-3 border-b">
<div class="flex pt-3 pb-2 justify-between" v-show="titleHidden">
<div>
<span class="red">*</span>
<span class="grey">上传票据凭证 </span>
<span class="shallow-grey">(仅支持ipg格式)</span>
<span class="text-red-500">*</span>
<span class="text-gray-500">上传票据凭证 </span>
<span class="text-gray-400 text-xs">(仅支持ipg格式)</span>
</div>
<van-button plain type="primary" size="mini" @click="isInvoice = false">手动输入</van-button>
</div>
<div class="upload-window" @click="uploadBill" v-show="!isSuccess">
<p class="add-icon">+</p>
<p class="shallow-grey">上传并识别凭证</p>
<div class="text-center border-b w-52 h-24 bg-gray-100 border-dashed border-2" @click="uploadBill" v-show="!isSuccess">
<p class="text-gray-400 text-xl pt-3">+</p>
<p class="text-gray-400 text-xs">上传并识别凭证</p>
</div>
<!-- 上传票据成功后显示发票信息 -->
<div v-show="isSuccess">
@ -47,11 +45,10 @@
label="申请金额"
placeholder="输入申请金额"
input-align="right"
class="name-field"
/>
</div>
<!-- 备注信息 -->
<div class="remarks-name">备注</div>
<div class="text-gray-500 py-4 pl-5">备注</div>
<van-cell-group>
<van-field
v-model="message"
@ -61,14 +58,17 @@
maxlength="40"
placeholder="请输入备注"
show-word-limit
class="textarea"
class="border rounded"
/>
</van-cell-group>
</div>
<!-- 选择审核人 -->
<div class="reviewer">
<van-field label="审核人" required/>
<div class="px-3">
<div class="mt-3">
<div class="flex bg-white p-4">
<div class="text-red-500">*</div>
<div class="text-gray-500 pl-1 font-semibold">审核人</div>
</div>
<div class="px-3 bg-white">
<div>
<van-button
class="button"
@ -83,8 +83,8 @@
</div>
</div>
<!-- 其他信息 -->
<div class="reviewer">
<div class="remarks-name">其他信息</div>
<div class="bg-white mt-3">
<div class="text-gray-500 p-4 font-semibold">其他信息</div>
<!-- 申请类型 -->
<!-- 普通票据申请 -->
<div v-show="isInvoice">
@ -190,13 +190,16 @@
</div>
<!-- 个人手动申请 -->
<div v-show="!isInvoice">
<div class="pl-2">
<van-cell title="单元格" is-link :value="personalType" required/>
<van-cell title="单元格" is-link :value="personalCategory" required/>
</div>
</div>
</div>
<!-- 提交人信息 -->
<div class="reviewer">
<div class="remarks-name">提交人信息</div>
<div class="bg-white mt-3">
<div class="text-gray-500 p-4 font-semibold">提交人信息</div>
<van-field
required
v-model="name"
@ -226,9 +229,8 @@
</van-popup>
</div>
<!-- 历史申请 -->
<div class="reviewer">
<div class="financial-management">
<span class="title">历史申请</span>
<div class="bg-white mt-3 p-4">
<div class="text-gray-500 font-semibold">历史申请</div>
<div v-if="showHistory">
<Search />
<FinanceManage />
@ -237,10 +239,9 @@
暂无历史记录
</div>
</div>
</div>
<!-- 底部立即提交按钮 -->
<NuxtLink to="/application-details">
<div class="foot">
<div class="mx-6 mt-10">
<van-button type="primary" block>立即提交</van-button>
</div>
</NuxtLink>
@ -467,10 +468,6 @@ function uploadBill(){
</script>
<style lang="less" scoped>
.apply-message{
background-color:#fff;
padding-bottom: 0.7rem;
}
.van-cell-group{
padding:0 1rem;
}
@ -483,66 +480,12 @@ function uploadBill(){
border-bottom: 1px solid #eee;
padding: 0.75rem 0px;
}
.flex{
display: flex;
justify-content: space-between;
}
.red{
color: red;
// margin: 0.2rem;
}
.green{
color: green;
}
.grey{
color: #737373;
}
.shallow-grey{
color: rgb(168, 168, 168);
font-size: 14px;
}
.upload-window{
text-align: center;
width:15rem;
height:6rem;
border: 1px dashed #ccc;
background-color:#eee;
margin-left: 1rem;
}
.add-icon{
color: rgb(168, 168, 168);
font-size: 25px;
margin-top: 1rem;
}
.van-button{
border-radius: 0.2rem;
}
.remarks-name{
color: #6F6F6F;
padding: 1rem;
}
.textarea{
border: 1px solid #ccc;
border-radius: 0.2rem;
}
input{
color: #6F6F6F;
text-align: right;
}
.button{
border-radius: 1rem;
padding: 0 0.75rem;
margin: 0.5rem ;
}
.reviewer{
background-color: #fff;
margin-top: 1.5rem;
}
.foot{
margin-top: 3rem;
padding:1rem 2rem;
}
.name-field{
padding-left: 0.75rem !important;
}
</style>

38
pages/applicant.vue
View File

@ -9,8 +9,13 @@
<!-- 搜索框与表格部分 -->
<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>
<div class="mt-8 bg-white">
<div class="p-4 pb-0 text-gray-500 font-semibold">历史申请</div>
<Search class="px-4 pt-0"/>
<FinanceManage class="px-4 mt-0"/>
</div>
<!-- <div class="mt-8 bg-white">
<span class="p-4 pb-0 text-gray-500 font-semibold">历史申请</span>
<div v-if="isShow">
<Search />
<FinanceManage />
@ -19,14 +24,16 @@
暂无历史记录
</div>
</div>
</div> -->
<!-- 底部提交按钮部分 -->
<div class="foot">
<div class="mt-20">
<NuxtLink to="/Initiate-application">
<van-button type="primary" block>发起申请</van-button>
</NuxtLink>
</div>
</van-tab>
<van-tab title="我的奖金">
<div class="mt-8 bg-white">
<div class="p-4 pb-0 text-gray-500 font-semibold">奖金领取记录</div>
@ -69,26 +76,5 @@ function onClickLeft(){
<style lang="less" scoped>
.no-data{
color: #A0A0A0;
font-size: 18px;
font-weight:600;
text-align: center;
padding: 2rem 0;
}
.apply-time{
width:40%;
}
.foot{
width:100%;
padding:1rem 2rem;
position:fixed;
bottom: 0px;
}
.green{
color: rgb(11, 194, 11);
}
.red{
color: rgb(248, 56, 56);
}
</style>

5
pages/financial-approval-details.vue
View File

@ -0,0 +1,5 @@
<template>
<div>
财务审批详情
</div>
</template>

25
pages/index.vue
View File

@ -8,17 +8,19 @@
<van-tabs v-model:active="active" shrink line-width="60px" color="#59B4FF" title-active-color="#59B4FF">
<van-tab title="财务管理">
<!-- 财务管理页面 -->
<div class="financial-management flex flex-col">
<div class="mt-5 bg-white p-4">
<div>
<span class="title">财务管理</span> <span class="title-describe">对项目预算、奖金进行配置</span>
<span class="text-base font-semibold text-gray-500 font-semibold">财务管理</span>
<span class="text-sm text-gray-400 ml-2">对项目预算、奖金进行配置</span>
</div>
<Search />
<FinanceManage />
</div>
<!-- 财务管理页面 -->
<div class="financial-management flex flex-col">
<div class="mt-5 bg-white p-4">
<div>
<span class="title">财务审批</span> <span class="title-describe">对员工提交的申请进行审批</span>
<span class="text-base font-semibold text-gray-500 font-semibold">财务审批</span>
<span class="text-sm text-gray-400 ml-2">对员工提交的申请进行审批</span>
</div>
<Search />
<FinanceExamine />
@ -57,18 +59,5 @@ function onClickLeft(){
.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;
}
}
</style>

Write Preview
Loading…
Cancel
Save