From 7f5c5ba8d7f3870b30cd108ad050e2735c3610b7 Mon Sep 17 00:00:00 2001
From: Min5203 <2318556978@qq.com>
Date: Tue, 25 Jan 2022 09:25:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E4=B8=BAtailwind=20css=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/FinanceExamine.vue        |  38 +++------
 components/FinanceManage.vue         |  46 +++--------
 components/Search.vue                |   6 +-
 layouts/default.vue                  |   1 +
 pages/Initiate-application.vue       | 113 +++++++--------------------
 pages/applicant.vue                  |  38 +++------
 pages/financial-approval-details.vue |   5 ++
 pages/index.vue                      |  25 ++----
 8 files changed, 79 insertions(+), 193 deletions(-)
 create mode 100644 pages/financial-approval-details.vue

diff --git a/components/FinanceExamine.vue b/components/FinanceExamine.vue
index e91fe62..cb3fd0d 100644
--- a/components/FinanceExamine.vue
+++ b/components/FinanceExamine.vue
@@ -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 {
-    width: 120%;
-    margin-top: 1rem;
-    font-size: 14px;
-    overflow-x: scroll;
-    color:#797878 ;
-    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
+table{
+  width: 120%;
+  td{
+    border: 0.5px solid #ccc;
+    padding: 0.85rem;
   }
+}
 
-  .input-box{
+.input-box{
     padding: 0!important;
     border-bottom: 1px solid #ccc
-  }
+}
 
 </style>
diff --git a/components/FinanceManage.vue b/components/FinanceManage.vue
index 8fb12f7..daa33d3 100644
--- a/components/FinanceManage.vue
+++ b/components/FinanceManage.vue
@@ -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 {
-      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{
+td{
+    border: 0.5px solid #ccc;
+    padding: 0.85rem;
+}
+.input-box{
     padding: 0!important;
     border-bottom: 1px solid #ccc
-  }
-
+}
 </style>
diff --git a/components/Search.vue b/components/Search.vue
index 445b5a2..b1934c6 100644
--- a/components/Search.vue
+++ b/components/Search.vue
@@ -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;
 }
diff --git a/layouts/default.vue b/layouts/default.vue
index 09419c3..1ee8b60 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -8,5 +8,6 @@
 .container{
   background:#eee;
   height:100%;
+  width:100%;
 }
 </style>
diff --git a/pages/Initiate-application.vue b/pages/Initiate-application.vue
index 23a6672..f031f8d 100644
--- a/pages/Initiate-application.vue
+++ b/pages/Initiate-application.vue
@@ -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 />
@@ -236,11 +238,10 @@
             <div v-if="!showHistory" class="no-data">
                 暂无历史记录
             </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>
diff --git a/pages/applicant.vue b/pages/applicant.vue
index 284af91..9a239f9 100644
--- a/pages/applicant.vue
+++ b/pages/applicant.vue
@@ -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>
diff --git a/pages/financial-approval-details.vue b/pages/financial-approval-details.vue
new file mode 100644
index 0000000..828e178
--- /dev/null
+++ b/pages/financial-approval-details.vue
@@ -0,0 +1,5 @@
+<template>
+<div>
+  财务审批详情
+</div>
+</template>
diff --git a/pages/index.vue b/pages/index.vue
index 0df7e96..c4539f2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -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>