From db889ca3f9ca24682f8457591435316963777a65 Mon Sep 17 00:00:00 2001
From: song <srf428110@163.com>
Date: Thu, 27 Jan 2022 14:28:26 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=98element-plus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/axios.js                        |  10 +-
 components/BonusCollection.vue       |   4 +-
 components/Expenditure.vue           |  14 +-
 components/FinanceExamine.vue        |  18 +-
 components/FinanceManage.vue         |   8 +-
 components/HistoricalApplication.vue |   8 +-
 components/Search.vue                |  14 +-
 package-lock.json                    | 262 ++++++++++++++++++++-------
 package.json                         |   2 +-
 pages/Initiate-application.vue       | 110 +++++------
 pages/applicant.vue                  |  18 +-
 pages/application-details.vue        |  11 +-
 pages/financial-approval-details.vue |  22 +--
 pages/financial-approval.vue         |  18 +-
 pages/index.vue                      |  42 ++---
 plugins/vant.js                      |  57 +-----
 16 files changed, 351 insertions(+), 267 deletions(-)

diff --git a/apis/axios.js b/apis/axios.js
index c5488db..ada80b2 100644
--- a/apis/axios.js
+++ b/apis/axios.js
@@ -1,11 +1,7 @@
 import Axios from 'axios';
-import { Toast } from 'vant';
-import { createApp } from 'vue';
+import { ElMessage } from 'element-plus'
 import { useToken } from '../composables/state'
 
-const app = createApp();
-app.use(Toast);
-
 const baseUrl = '/gateway';
 
 const instance = Axios.create({
@@ -47,8 +43,8 @@ instance.interceptors.response.use(
     if (error.response && error.response.data) {
       const code = error.response.status;
       const msg = error.response.data.message;
-      // ElMessage.error(`Code: ${code}, Message: ${msg}`);
-      Toast.fail(`Code: ${code}, Message: ${msg}`);
+      ElMessage.error(`Code: ${code}, Message: ${msg}`);
+
       console.error(`[Axios Error]`, error.response);
     } else {
       // ElMessage.error(`${error}`);
diff --git a/components/BonusCollection.vue b/components/BonusCollection.vue
index 696c326..256fa67 100644
--- a/components/BonusCollection.vue
+++ b/components/BonusCollection.vue
@@ -25,7 +25,7 @@
         </tr>
       </table>
       <div class="w-1/2 mt-4 ml-48">
-        <van-pagination
+        <el-pagination
           v-model="data.pageNum"
           :items-per-page="data.pageSize"
           :page-count="data.pages"
@@ -33,7 +33,7 @@
         />
       </div>
     </div>
-    <van-empty v-else description="暂无数据" />
+    <el-empty v-else description="暂无数据" />
   </div>
 </template>
 
diff --git a/components/Expenditure.vue b/components/Expenditure.vue
index 2251aa7..c5ca8dc 100644
--- a/components/Expenditure.vue
+++ b/components/Expenditure.vue
@@ -17,7 +17,7 @@
             <div v-if="!item.showField" @click="item.showField = true">
               {{ item.budget - 0 }}
             </div>
-            <van-field
+            <el-field
               v-else-if="financeId - 0 !== 0 && item.showField"
               v-model="item.budget"
               type="number"
@@ -27,7 +27,7 @@
             />
           </td>
           <td>
-            <van-icon name="plus" @click="toApplication(item)" />
+            <el-icon name="plus" @click="toApplication(item)" />
           </td>
         </tr>
       </table>
@@ -45,7 +45,7 @@
       </table>
     </div>
     <div class="w-1/2 mt-4 ml-48">
-      <van-pagination
+      <el-pagination
         v-model="data.pageNum"
         :items-per-page="data.pageSize"
         :page-count="data.pages"
@@ -53,21 +53,21 @@
       />
     </div>
   </div>
-  <van-empty v-else description="暂无数据" />
-  <van-dialog
+  <el-empty v-else description="暂无数据" />
+  <el-dialog
     v-model:show="data.show"
     title="追加预算"
     show-cancel-button
     @confirm="handleAdd"
   >
-    <van-field
+    <el-field
       :border="data.border"
       v-model="data.appendBudget"
       type="textarea"
       class="appendBudget"
       placeholder="追加预算"
     />
-  </van-dialog>
+  </el-dialog>
 </template>
 
 <script setup>
diff --git a/components/FinanceExamine.vue b/components/FinanceExamine.vue
index 8106927..f3d3f5f 100644
--- a/components/FinanceExamine.vue
+++ b/components/FinanceExamine.vue
@@ -15,8 +15,8 @@
             <td>
               <div v-if="!item.applyType" class="flex flex-row justify-around">
 
-                <van-button type="success" size="mini" class="rounded" @click="showRemark(item.financeCheckId, 1)">通过</van-button>
-                <van-button type="danger" size="mini" class="rounded" @click="showRemark(item.financeCheckId, 2)">驳回</van-button>
+                <el-button type="success" size="mini" class="rounded" @click="showRemark(item.financeCheckId, 1)">通过</el-button>
+                <el-button type="danger" size="mini" class="rounded" @click="showRemark(item.financeCheckId, 2)">驳回</el-button>
               </div>
               <div class="text-center" v-else :class="item.applyType === 1 ? 'text-blue-500' : 'text-red-500'">{{ item.applyType === 1 ? '已完成' : '已驳回' }}</div>
             </td>
@@ -24,14 +24,14 @@
       </table>
     </div>
     <div class="w-1/2 mt-4 ml-48">
-        <van-pagination v-model="data.pageNum" :items-per-page="data.pageSize" :page-count="data.pages" mode="simple" />
+        <el-pagination v-model="data.pageNum" :items-per-page="data.pageSize" :page-count="data.pages" mode="simple" />
     </div>
   </div>
-  <van-empty v-else description="暂无数据" />
+  <el-empty v-else description="暂无数据" />
 
-  <van-dialog v-model:show="data.show" title="备注" show-cancel-button @confirm="handleAudit">
-    <van-field :border="data.border" v-model="data.remark" type="textarea" class="remark" placeholder="请输入备注" />
-  </van-dialog>
+  <el-dialog v-model:show="data.show" title="备注" show-cancel-button @confirm="handleAudit">
+    <!-- <el-field :border="data.border" v-model="data.remark" type="textarea" class="remark" placeholder="请输入备注" /> -->
+  </el-dialog>
 </template>
 
 <script setup>
@@ -39,7 +39,7 @@ import dayjs from "dayjs";
 import {ref, reactive, onMounted, nextTick} from'vue';
 import { audit } from 'apis/finance';
 import { queryNeedCheckByMe } from 'apis/projectFinance';
-import { Toast } from 'vant';
+import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router';
 
 const router = useRouter()
@@ -112,7 +112,7 @@ async function handleAudit(financeCheckId, checkStatus){
       }
     }
     await audit(params)
-    Toast('审批成功');
+    ElMessage.success('审批成功')
     handleFinanceOfProject()
     data.remark = ''
   } catch (error) {
diff --git a/components/FinanceManage.vue b/components/FinanceManage.vue
index 2dc6a34..4c8590e 100644
--- a/components/FinanceManage.vue
+++ b/components/FinanceManage.vue
@@ -11,11 +11,11 @@
             <td>{{item.name}}</td>
             <td>
               <div v-if="!item.showBudgetEdit" @click="editBudge(item)">{{ item.budget }}</div>
-              <van-field v-else v-model="item.budget" type="number" class="input-box" @change="handleUpdateFinance(item, 'budget')" @blur="item.showBudgetEdit = false" />
+              <el-field v-else v-model="item.budget" type="number" class="input-box" @change="handleUpdateFinance(item, 'budget')" @blur="item.showBudgetEdit = false" />
             </td>
             <td>
               <div v-if="!item.showBonusEdit" @click="editBonus(item)">{{ item.bonus }}</div>
-              <van-field v-else v-model="item.bonus" type="number" class="input-box" @change="handleUpdateFinance(item, 'bonus')" @blur="item.showBonusEdit = false" />
+              <el-field v-else v-model="item.bonus" type="number" class="input-box" @change="handleUpdateFinance(item, 'bonus')" @blur="item.showBonusEdit = false" />
             </td>
           </tr>
           <tr>
@@ -25,10 +25,10 @@
           </tr>
       </table>
       <div class="w-1/2 mt-4 ml-48">
-          <van-pagination v-model="data.pageNum" :items-per-page="data.pageSize" :page-count="data.pages" mode="simple" />
+          <el-pagination v-model="data.pageNum" :items-per-page="data.pageSize" :page-count="data.pages" mode="simple" />
       </div>
     </div>
-    <van-empty v-else description="暂无数据" />
+    <el-empty v-else description="暂无数据" />
   </div>
 </template>
 
diff --git a/components/HistoricalApplication.vue b/components/HistoricalApplication.vue
index 1d8dbfc..906eeec 100644
--- a/components/HistoricalApplication.vue
+++ b/components/HistoricalApplication.vue
@@ -33,7 +33,7 @@
             <span v-else-if="item.applyType - 0 === 3" class="text-gray-500">
               待放款
             </span>
-            <van-button
+            <el-button
               v-else-if="item.applyType - 0 === 4"
               type="success"
               size="mini"
@@ -41,7 +41,7 @@
               @click="confirm"
             >
               确认
-            </van-button>
+            </el-button>
             <span v-else-if="item.applyType - 0 === 5" class="text-green-500">
               已确认
             </span>
@@ -49,7 +49,7 @@
         </tr>
       </table>
       <div class="w-1/2 mt-4 ml-48">
-        <van-pagination
+        <el-pagination
           v-model="data.pageNum"
           :items-per-page="data.pageSize"
           :page-count="data.pages"
@@ -57,7 +57,7 @@
         />
       </div>
     </div>
-    <van-empty v-else description="暂无数据" />
+    <el-empty v-else description="暂无数据" />
   </div>
 </template>
 
diff --git a/components/Search.vue b/components/Search.vue
index b1934c6..e694f33 100644
--- a/components/Search.vue
+++ b/components/Search.vue
@@ -1,6 +1,10 @@
 <template>
     <div class="pt-4">
-        <van-search v-model="searchRef" placeholder="搜索" />
+        <el-input
+          v-model="searchRef"
+          placeholder="搜索"
+          :prefix-icon="Search"
+        ></el-input>
     </div>
 </template>
 
@@ -13,17 +17,17 @@ const searchRef = ref('')
 
 <style lang="less">
 
-.van-search{
+.el-search{
   padding: 0;
 }
-.van-search__content{
+.el-search__content{
   border: 1px solid #ccc;
   background-color: #fff;
   height:1.85rem;
   border-radius:0.2rem
 }
-.van-field__left-icon{
-    margin-right: var(--van-padding-base);
+.el-field__left-icon{
+    margin-right: var(--el-padding-base);
     width: 45%;
     padding-left: 40%;
 }
diff --git a/package-lock.json b/package-lock.json
index 071e638..a0529b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "plugin-finance",
+  "name": "finance",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
@@ -7,8 +7,8 @@
       "dependencies": {
         "axios": "^0.25.0",
         "dayjs": "^1.10.7",
+        "element-plus": "^1.3.0-beta.9",
         "lodash": "^4.17.21",
-        "vant": "^3.4.2",
         "vuex": "^4.0.2"
       },
       "devDependencies": {
@@ -544,6 +544,22 @@
         "mime": "^3.0.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
+      "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.6.tgz",
+      "integrity": "sha512-2gg7VCq4d2firgl7/aVym4Cx/wqKFwKybEQGJiiWJN4urW36+QdAEG1knqSD9qidbjhVp0Jnc9XdSTR1/4Whzw==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/@eslint/eslintrc/download/@eslint/eslintrc-1.0.5.tgz",
@@ -1023,8 +1039,12 @@
     },
     "node_modules/@popperjs/core": {
       "version": "2.11.2",
-      "resolved": "https://registry.npmmirror.com/@popperjs/core/download/@popperjs/core-2.11.2.tgz",
-      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
     },
     "node_modules/@rollup/plugin-alias": {
       "version": "3.1.9",
@@ -1570,24 +1590,6 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/@vant/icons": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmmirror.com/@vant/icons/download/@vant/icons-1.7.3.tgz",
-      "integrity": "sha512-tW4EqzxN4kXw1rnlnQJQHofEifPbt/gECOWiibomht8QLyvoGuE4iUmDFS288dJ07ZjuTy0bhdABj0SENo2fmQ=="
-    },
-    "node_modules/@vant/popperjs": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npm.taobao.org/@vant/popperjs/download/@vant/popperjs-1.1.0.tgz",
-      "integrity": "sha1-tO3uW7+m+xhwWYbjE9T9XxeUKg8=",
-      "dependencies": {
-        "@popperjs/core": "^2.9.2"
-      }
-    },
-    "node_modules/@vant/use": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmmirror.com/@vant/use/download/@vant/use-1.3.4.tgz?cache=0&sync_timestamp=1637544063803&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40vant%2Fuse%2Fdownload%2F%40vant%2Fuse-1.3.4.tgz",
-      "integrity": "sha512-XvZkPCjcmEBhD+T3vB68thOG6P9jazld6aBTMenhbAQd4FT/x9AiKIWPJx4MvhYoSIWt7fju6K01XTJldWs1hw=="
-    },
     "node_modules/@vercel/nft": {
       "version": "0.17.3",
       "resolved": "https://registry.npmmirror.com/@vercel/nft/download/@vercel/nft-0.17.3.tgz",
@@ -1944,6 +1946,78 @@
       "resolved": "https://registry.npmmirror.com/@vue/shared/download/@vue/shared-3.2.27.tgz",
       "integrity": "sha512-rpAn9k6O08Lvo7ekBIAnkOukX/4EsEQLPrRJBKhIEasMsOI5eX0f6mq1sDUSY7cgAqWw2d7QtP74CWxdXoyKxA=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-7.5.5.tgz",
+      "integrity": "sha512-RBDqmIoGfak4h3xdXa/Av+ibkb8NY044wEy6+PG2FAWNaID8/FkqmSFjbxogrbmpSX1yZ1PBHrM8DUp/FrIpbg==",
+      "dependencies": {
+        "@vueuse/shared": "7.5.5",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-7.5.5.tgz",
+      "integrity": "sha512-mzzTsotHQRPnPAChy8iCv6ek/90CKYhAFyMRgNsMxpT0afZJkbMO/X0OaOu/1NuGbgb8UVjlsWKmCUgKTOF5hA==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
+      "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vueuse/head": {
       "version": "0.7.5",
       "resolved": "https://registry.npmmirror.com/@vueuse/head/download/@vueuse/head-0.7.5.tgz",
@@ -2439,6 +2513,11 @@
       "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==",
       "dev": true
     },
+    "node_modules/async-validator": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz",
+      "integrity": "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.2",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
@@ -3592,6 +3671,25 @@
       "integrity": "sha512-k/0t1TRfonHIp8TJKfjBu2cKj8MqYTiEpOhci+q7CVEE5xnCQnx1pTa+V8b/sdhe4S3PR4p4iceEQWhGrKQORQ==",
       "dev": true
     },
+    "node_modules/element-plus": {
+      "version": "1.3.0-beta.9",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-1.3.0-beta.9.tgz",
+      "integrity": "sha512-h+I6VVtJNwjVkNhfhXp2oCYjgBN7kWQ2Y6nWzwc0wiphAlQDhGuBXAGj9eYpf1uOrMgIpFFwbRhvK7C6sOJsWg==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.0",
+        "@element-plus/icons-vue": "^0.2.6",
+        "@popperjs/core": "^2.11.2",
+        "@vueuse/core": "^7.5.4",
+        "async-validator": "^4.0.7",
+        "dayjs": "^1.10.7",
+        "lodash": "^4.17.21",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.1.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/download/emoji-regex-8.0.0.tgz?cache=0&sync_timestamp=1632751408145&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Femoji-regex%2Fdownload%2Femoji-regex-8.0.0.tgz",
@@ -6322,6 +6420,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/memory-fs": {
       "version": "0.5.0",
       "resolved": "https://registry.nlark.com/memory-fs/download/memory-fs-0.5.0.tgz",
@@ -6963,6 +7066,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.1.1.tgz",
+      "integrity": "sha512-157VNH4CngrcsvF8xOVOe22cwniIR3nxSltdctvQeHZj8JttEeOXffK28jucWfWBXs0QNetAumjc1GiInnwX4w=="
+    },
     "node_modules/npm-bundled": {
       "version": "1.1.2",
       "resolved": "https://registry.nlark.com/npm-bundled/download/npm-bundled-1.1.2.tgz",
@@ -9699,19 +9807,6 @@
       "integrity": "sha1-LeGWGMZtwkfc+2+ZM4A12CRaLO4=",
       "dev": true
     },
-    "node_modules/vant": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmmirror.com/vant/download/vant-3.4.2.tgz",
-      "integrity": "sha512-Mupj1FDW19QJpKUhu+gZgcUt3FhKly2AuPASTLmiuby0JtxV5P/XaTvMxwNCEz0oH2Q8QShppTaxoSPaz2z0yg==",
-      "dependencies": {
-        "@vant/icons": "^1.7.1",
-        "@vant/popperjs": "^1.1.0",
-        "@vant/use": "^1.3.4"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
     "node_modules/vite": {
       "version": "2.7.13",
       "resolved": "https://registry.npmmirror.com/vite/download/vite-2.7.13.tgz",
@@ -11179,6 +11274,17 @@
         "mime": "^3.0.0"
       }
     },
+    "@ctrl/tinycolor": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
+      "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ=="
+    },
+    "@element-plus/icons-vue": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.6.tgz",
+      "integrity": "sha512-2gg7VCq4d2firgl7/aVym4Cx/wqKFwKybEQGJiiWJN4urW36+QdAEG1knqSD9qidbjhVp0Jnc9XdSTR1/4Whzw==",
+      "requires": {}
+    },
     "@eslint/eslintrc": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/@eslint/eslintrc/download/@eslint/eslintrc-1.0.5.tgz",
@@ -11567,7 +11673,7 @@
     },
     "@popperjs/core": {
       "version": "2.11.2",
-      "resolved": "https://registry.npmmirror.com/@popperjs/core/download/@popperjs/core-2.11.2.tgz",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
       "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
     },
     "@rollup/plugin-alias": {
@@ -11996,24 +12102,6 @@
         "eslint-visitor-keys": "^3.0.0"
       }
     },
-    "@vant/icons": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmmirror.com/@vant/icons/download/@vant/icons-1.7.3.tgz",
-      "integrity": "sha512-tW4EqzxN4kXw1rnlnQJQHofEifPbt/gECOWiibomht8QLyvoGuE4iUmDFS288dJ07ZjuTy0bhdABj0SENo2fmQ=="
-    },
-    "@vant/popperjs": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npm.taobao.org/@vant/popperjs/download/@vant/popperjs-1.1.0.tgz",
-      "integrity": "sha1-tO3uW7+m+xhwWYbjE9T9XxeUKg8=",
-      "requires": {
-        "@popperjs/core": "^2.9.2"
-      }
-    },
-    "@vant/use": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmmirror.com/@vant/use/download/@vant/use-1.3.4.tgz?cache=0&sync_timestamp=1637544063803&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40vant%2Fuse%2Fdownload%2F%40vant%2Fuse-1.3.4.tgz",
-      "integrity": "sha512-XvZkPCjcmEBhD+T3vB68thOG6P9jazld6aBTMenhbAQd4FT/x9AiKIWPJx4MvhYoSIWt7fju6K01XTJldWs1hw=="
-    },
     "@vercel/nft": {
       "version": "0.17.3",
       "resolved": "https://registry.npmmirror.com/@vercel/nft/download/@vercel/nft-0.17.3.tgz",
@@ -12322,6 +12410,31 @@
       "resolved": "https://registry.npmmirror.com/@vue/shared/download/@vue/shared-3.2.27.tgz",
       "integrity": "sha512-rpAn9k6O08Lvo7ekBIAnkOukX/4EsEQLPrRJBKhIEasMsOI5eX0f6mq1sDUSY7cgAqWw2d7QtP74CWxdXoyKxA=="
     },
+    "@vueuse/core": {
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-7.5.5.tgz",
+      "integrity": "sha512-RBDqmIoGfak4h3xdXa/Av+ibkb8NY044wEy6+PG2FAWNaID8/FkqmSFjbxogrbmpSX1yZ1PBHrM8DUp/FrIpbg==",
+      "requires": {
+        "@vueuse/shared": "7.5.5",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "@vueuse/shared": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-7.5.5.tgz",
+          "integrity": "sha512-mzzTsotHQRPnPAChy8iCv6ek/90CKYhAFyMRgNsMxpT0afZJkbMO/X0OaOu/1NuGbgb8UVjlsWKmCUgKTOF5hA==",
+          "requires": {
+            "vue-demi": "*"
+          }
+        },
+        "vue-demi": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
+          "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==",
+          "requires": {}
+        }
+      }
+    },
     "@vueuse/head": {
       "version": "0.7.5",
       "resolved": "https://registry.npmmirror.com/@vueuse/head/download/@vueuse/head-0.7.5.tgz",
@@ -12748,6 +12861,11 @@
       "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==",
       "dev": true
     },
+    "async-validator": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz",
+      "integrity": "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ=="
+    },
     "autoprefixer": {
       "version": "10.4.2",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
@@ -13630,6 +13748,22 @@
       "integrity": "sha512-k/0t1TRfonHIp8TJKfjBu2cKj8MqYTiEpOhci+q7CVEE5xnCQnx1pTa+V8b/sdhe4S3PR4p4iceEQWhGrKQORQ==",
       "dev": true
     },
+    "element-plus": {
+      "version": "1.3.0-beta.9",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-1.3.0-beta.9.tgz",
+      "integrity": "sha512-h+I6VVtJNwjVkNhfhXp2oCYjgBN7kWQ2Y6nWzwc0wiphAlQDhGuBXAGj9eYpf1uOrMgIpFFwbRhvK7C6sOJsWg==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.4.0",
+        "@element-plus/icons-vue": "^0.2.6",
+        "@popperjs/core": "^2.11.2",
+        "@vueuse/core": "^7.5.4",
+        "async-validator": "^4.0.7",
+        "dayjs": "^1.10.7",
+        "lodash": "^4.17.21",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.1.1"
+      }
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/download/emoji-regex-8.0.0.tgz?cache=0&sync_timestamp=1632751408145&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Femoji-regex%2Fdownload%2Femoji-regex-8.0.0.tgz",
@@ -15750,6 +15884,11 @@
         "fs-monkey": "1.0.3"
       }
     },
+    "memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "memory-fs": {
       "version": "0.5.0",
       "resolved": "https://registry.nlark.com/memory-fs/download/memory-fs-0.5.0.tgz",
@@ -16270,6 +16409,11 @@
       "integrity": "sha1-QNCIW1Nd7/4/MUe+yHfQX+TFZoo=",
       "dev": true
     },
+    "normalize-wheel-es": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.1.1.tgz",
+      "integrity": "sha512-157VNH4CngrcsvF8xOVOe22cwniIR3nxSltdctvQeHZj8JttEeOXffK28jucWfWBXs0QNetAumjc1GiInnwX4w=="
+    },
     "npm-bundled": {
       "version": "1.1.2",
       "resolved": "https://registry.nlark.com/npm-bundled/download/npm-bundled-1.1.2.tgz",
@@ -18324,16 +18468,6 @@
       "integrity": "sha1-LeGWGMZtwkfc+2+ZM4A12CRaLO4=",
       "dev": true
     },
-    "vant": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmmirror.com/vant/download/vant-3.4.2.tgz",
-      "integrity": "sha512-Mupj1FDW19QJpKUhu+gZgcUt3FhKly2AuPASTLmiuby0JtxV5P/XaTvMxwNCEz0oH2Q8QShppTaxoSPaz2z0yg==",
-      "requires": {
-        "@vant/icons": "^1.7.1",
-        "@vant/popperjs": "^1.1.0",
-        "@vant/use": "^1.3.4"
-      }
-    },
     "vite": {
       "version": "2.7.13",
       "resolved": "https://registry.npmmirror.com/vite/download/vite-2.7.13.tgz",
diff --git a/package.json b/package.json
index c434aa3..4b9d733 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,8 @@
   "dependencies": {
     "axios": "^0.25.0",
     "dayjs": "^1.10.7",
+    "element-plus": "^1.3.0-beta.9",
     "lodash": "^4.17.21",
-    "vant": "^3.4.2",
     "vuex": "^4.0.2"
   }
 }
diff --git a/pages/Initiate-application.vue b/pages/Initiate-application.vue
index c2f881d..c235c2b 100644
--- a/pages/Initiate-application.vue
+++ b/pages/Initiate-application.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- 导航返回上一页 -->
-    <van-nav-bar title="发起申请" left-arrow @click="router.go(-1)" />
+    <div title="发起申请" left-arrow @click="router.go(-1)" ></div>
     <!-- 申请发票需要输入的数据 -->
     <div class="bg-white pb-3">
       <div class="text-gray-500 px-4 py-3 font-semibold">发票信息</div>
@@ -14,31 +14,31 @@
               <span class="text-gray-500">上传票据凭证 </span>
               <span class="text-gray-400 text-xs">(仅支持ipg格式)</span>
             </div>
-            <van-button
+            <el-button
               plain
               type="primary"
               size="mini"
               @click="data.isInvoice = false"
-              >手动输入</van-button
+              >手动输入</el-button
             >
           </div>
-          <!-- <van-overlay :show="data.showUploading"> -->
+          <!-- <el-overlay :show="data.showUploading"> -->
             <div
               class="text-center border-b w-52 h-24 border-dashed border-2 upload-box"
               v-show="!data.isSuccess"
             >
-              <van-uploader v-model="data.fileList" multiple :max-count="1" :after-read="afterRead" class="z-50 opacity-0" />
+              <el-uploader v-model="data.fileList" multiple :max-count="1" :after-read="afterRead" class="z-50 opacity-0" />
               <div class="upload-txt">
                 <p class="text-gray-400 text-xl pt-3">+</p>
                 <p class="text-gray-400 text-xs">上传并识别凭证</p>
               </div>
-              <!-- <van-loading type="spinner" v-if="data.showUploading" class="upload-txt z-50" /> -->
+              <!-- <el-loading type="spinner" v-if="data.showUploading" class="upload-txt z-50" /> -->
             </div>
-          <!-- </van-overlay> -->
+          <!-- </el-overlay> -->
 
           <!-- 上传票据成功后显示发票信息 -->
           <div v-show="data.isSuccess">
-            <van-field
+            <el-field
               v-for="item in data.invoiceInfo"
               required
               v-model="item.value"
@@ -51,7 +51,7 @@
       </div>
       <!-- 手动输入信息 -->
       <div v-show="!data.isInvoice">
-        <van-field
+        <el-field
           required
           v-model="data.money"
           label="申请金额"
@@ -61,8 +61,8 @@
       </div>
       <!-- 备注信息 -->
       <div class="text-gray-500 py-4 pl-5">备注</div>
-      <van-cell-group>
-        <van-field
+      <el-cell-group>
+        <el-field
           v-model="data.remark"
           rows="2"
           autosize
@@ -72,7 +72,7 @@
           show-word-limit
           class="border rounded"
         />
-      </van-cell-group>
+      </el-cell-group>
     </div>
     <!-- 选择审核人 -->
     <div class="mt-3">
@@ -82,7 +82,7 @@
       </div>
       <div class="px-3 bg-white">
         <div>
-          <van-button
+          <el-button
             class="button"
             size="mini"
             v-for="item in data.reviewerList"
@@ -95,7 +95,7 @@
             @click="handleSelectChecker(item.memberId)"
           >
             {{ item.name }}
-          </van-button>
+          </el-button>
         </div>
       </div>
     </div>
@@ -105,7 +105,7 @@
       <!-- 申请类型 -->
       <!-- 普通票据申请 -->
       <div>
-        <van-field
+        <el-field
           v-model="data.applyType"
           is-link
           readonly
@@ -115,17 +115,17 @@
           required
           input-align="right"
         />
-        <van-popup v-model:show="data.showType" round position="bottom">
-          <van-picker
+        <!-- <el-popup v-model:show="data.showType" round position="bottom">
+          <el-picker
             title="申请类型"
             v-if="data.applyTypeOptions && data.applyTypeOptions.length"
             :columns="data.applyTypeOptions"
             @confirm="finishApplyType"
           />
-          <van-loading v-else class="my-20 text-center" />
-        </van-popup>
+          <el-loading v-else class="my-20 text-center" />
+        </el-popup> -->
         <!-- 所属项目 -->
-        <van-field
+        <el-field
           v-model="projectName"
           is-link
           readonly
@@ -135,11 +135,11 @@
           input-align="right"
           disabled
         />
-        <!-- <van-popup v-model:show="projectName" round position="bottom">
-          <van-cascader active-color="#1989fa" class="p-0" />
-        </van-popup> -->
+        <!-- <el-popup v-model:show="projectName" round position="bottom">
+          <el-cascader active-color="#1989fa" class="p-0" />
+        </el-popup> -->
         <!-- 所属任务的 -->
-        <van-field
+        <el-field
           v-model="taskName"
           v-show="data.isInvoice"
           is-link
@@ -150,11 +150,11 @@
           input-align="right"
           disabled
         />
-        <!-- <van-popup v-model:show="taskName" round position="bottom">
-          <van-cascader active-color="#1989fa" class="p-0" />
-        </van-popup> -->
+        <!-- <el-popup v-model:show="taskName" round position="bottom">
+          <el-cascader active-color="#1989fa" class="p-0" />
+        </el-popup> -->
         <!-- 类目选择 -->
-        <van-field
+        <el-field
           v-model="data.applyCategory"
           is-link
           readonly
@@ -163,17 +163,17 @@
           @click="data.showCategory = true"
           input-align="right"
         />
-        <van-popup v-model:show="data.showCategory" round position="bottom">
-          <van-picker
+        <!-- <el-popup v-model:show="data.showCategory" round position="bottom">
+          <el-picker
             title="请选择类目"
             v-if="data.applyCategoryOptions && data.applyCategoryOptions.length"
             :columns="data.applyCategoryOptions"
             @confirm="finishApplyCategory"
           />
-          <van-loading v-else class="my-20 text-center" />
-        </van-popup>
+          <el-loading v-else class="my-20 text-center" />
+        </el-popup> -->
         <!-- 名目选择 -->
-        <van-field
+        <el-field
           v-model="data.applyName"
           v-show="data.isInvoice"
           is-link
@@ -183,21 +183,21 @@
           @click="data.showName = true"
           input-align="right"
         />
-        <van-popup v-model:show="data.showName" round position="bottom">
-          <van-picker
+        <!-- <el-popup v-model:show="data.showName" round position="bottom">
+          <el-picker
             title="请选择名目"
             v-if="data.applyNameOptions && data.applyNameOptions.length"
             :columns="data.applyNameOptions"
             @confirm="finishApplyName"
           />
-          <van-loading v-else class="my-20 text-center" />
-        </van-popup>
+          <el-loading v-else class="my-20 text-center" />
+        </el-popup> -->
       </div>
     </div>
     <!-- 提交人信息 -->
     <div class="bg-white mt-3">
       <div class="text-gray-500 p-4 font-semibold">提交人信息</div>
-      <van-field
+      <el-field
         required
         v-model="data.submitName"
         label="姓名"
@@ -205,7 +205,7 @@
         input-align="right"
       />
       <!-- 选择所属部门 -->
-      <van-field
+      <el-field
         required
         v-model="data.department"
         label="所属部门"
@@ -223,7 +223,7 @@
     </div>
     <!-- 底部立即提交按钮 -->
     <div class="mx-6 mt-10">
-      <van-button @click="submit" type="primary" size="small" block>立即提交</van-button>
+      <el-button @click="submit" type="primary" size="small" block>立即提交</el-button>
     </div>
   </div>
 </template>
@@ -233,7 +233,7 @@ import { ref, reactive } from 'vue';
 import { queryChecker } from 'apis/member';
 import { queryType, apply } from 'apis/finance';
 import { bill } from 'apis/ocr';
-import { Toast } from 'vant';
+import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router';
 import num from 'utils/num';
 
@@ -355,7 +355,7 @@ async function afterRead(file){
       data.titleHidden = false;
       data.isSuccess = true;
     } else {
-      Toast.fail(res.data.msg || '上传失败')
+      ElMessage.error(res.data.msg || '上传失败')
     }
   })
 }
@@ -481,10 +481,10 @@ async function submit() {
     const params = {}
     params.param = setParams()
     await apply(params)
-    Toast.success('申请成功');
+    ElMessage.success('审批成功')
   } catch (error) {
     console.log('error: ', error);
-    Toast.fail(error || '申请失败');
+    ElMessage.error(error || '申请失败')
   }
 }
 // 验证必填
@@ -492,35 +492,35 @@ function verification(){
   const { isSuccess, invoiceInfo, categoryId, checkerList, department, money, rowId, submitName, typeId, isInvoice } = data
   // 判断发票信息
   if(!isSuccess && isInvoice){
-    Toast.fail('请上传票据凭证');
+    ElMessage.error('请上传票据凭证');
     return
   }
   if(!money && !isInvoice){
-    Toast.fail('请输入金额');
+    ElMessage.error('请输入金额');
     return
   }
   if(!checkerList || !checkerList.length){
-    Toast.fail('请选择审核人');
+    ElMessage.error('请选择审核人');
     return
   }
   if(!typeId){
-    Toast.fail('请选择申请类型');
+    ElMessage.error('请选择申请类型');
     return
   }
   if(!categoryId){
-    Toast.fail('请选择类目');
+    ElMessage.error('请选择类目');
     return
   }
   if(!rowId && isInvoice){
-    Toast.fail('请选择名目');
+    ElMessage.error('请选择名目');
     return
   }
   if(!submitName){
-    Toast.fail('请输入提交人姓名');
+    ElMessage.error('请输入提交人姓名');
     return
   }
   if(!department){
-    Toast.fail('请输入所属部门');
+    ElMessage.error('请输入所属部门');
     return
   }
   return true
@@ -551,10 +551,10 @@ function setParams(){
 </script>
 
 <style lang="less" scoped>
-.van-cell-group {
+.el-cell-group {
   padding: 0 1rem;
 }
-.van-cell {
+.el-cell {
   font-size: 15px;
 }
 .bill-name {
@@ -563,7 +563,7 @@ function setParams(){
   border-bottom: 1px solid #eee;
   padding: 0.75rem 0px;
 }
-.van-button {
+.el-button {
   border-radius: 0.2rem;
 }
 .button {
diff --git a/pages/applicant.vue b/pages/applicant.vue
index 5fc4ed2..af0a6c8 100644
--- a/pages/applicant.vue
+++ b/pages/applicant.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <!-- 搜索框与表格部分 -->
-    <van-tabs
+    <el-tabs
       v-model:active="active"
       shrink
       line-width="60px"
       color="#59B4FF"
       title-active-color="#59B4FF"
     >
-      <van-tab title="我的申请">
+      <el-tab-pane title="我的申请">
         <div class=" bg-white px-4">
           <div class="mt-4 flex flex-col overflow-hidden h-full">
             <div class="py-4 pb-0 text-gray-500 font-semibold">历史申请</div>
@@ -17,13 +17,13 @@
           </div>
           <!-- 底部提交按钮部分 -->
           <div class="fixed w-11/12 box-border bottom-10 " @click="toApplication">
-            <van-button type="primary" block size="small">发起申请</van-button>
+            <el-button type="primary" block size="small">发起申请</el-button>
           </div>
         </div>
 
-      </van-tab>
+      </el-tab-pane>
 
-      <van-tab title="我的奖金">
+      <el-tab-pane title="我的奖金">
         <div class="mt-4 bg-white">
           <div class="p-4 pb-0 text-gray-500 font-semibold">奖金领取记录</div>
           <Search class="px-4 pt-0" />
@@ -47,13 +47,13 @@
             500元
           </div>
           <div class="px-8">
-            <van-button type="primary" size="small" block :disabled="!isBonus"
-              >立即领取</van-button
+            <el-button type="primary" size="small" block :disabled="!isBonus"
+              >立即领取</el-button
             >
           </div>
         </div>
-      </van-tab>
-    </van-tabs>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
diff --git a/pages/application-details.vue b/pages/application-details.vue
index d8ff600..1748ae5 100644
--- a/pages/application-details.vue
+++ b/pages/application-details.vue
@@ -2,11 +2,11 @@
 <div>
   <!-- 导航栏 -->
   <NuxtLink to="Initiate-application">
-      <van-nav-bar
+    <div
       title="申请详情"
       left-arrow
       @click="router.go(-1)"
-    />
+    ></div>
   </NuxtLink>
 
   <!-- 审核结果 -->
@@ -23,7 +23,8 @@
             {{item.checkStatus == '1' ? '已通过' : item.checkStatus == '2' ? '已驳回' : '待审批'}}
           </div>
           <div v-if="item.checkStatus == '1' || item.checkStatus == '2'" class="mt-1">
-            <van-circle
+          <el-progress type="circle" :percentage="100" color="#ff6700" :stroke-width="100" />
+            <!-- <van-circle
               v-model:current-rate="currentRate"
               :rate="100"
               :speed="100"
@@ -31,7 +32,7 @@
               class="w-12"
               color="#ff6700"
               :stroke-width="100"
-            />
+            /> -->
           </div>
       </div>
     </div>
@@ -215,7 +216,7 @@ handleApplyDetail()
 </script>
 
 <style lang="less" scoped>
-.van-circle{
+.el-progress{
   width: 2.5rem !important;
   height: 2.5rem !important;
 }
diff --git a/pages/financial-approval-details.vue b/pages/financial-approval-details.vue
index bf84e70..585824d 100644
--- a/pages/financial-approval-details.vue
+++ b/pages/financial-approval-details.vue
@@ -1,10 +1,10 @@
 <template>
 <div>
-  <van-nav-bar
+  <div
       title="财务审批详情"
       left-arrow
       @click="router.go(-1)"
-    />
+  ></div>
 
   <!-- 发票信息 -->
   <div class="bg-white px-3" v-if="isInvoice">
@@ -74,11 +74,11 @@
             {{item.checkStatus == '1' ? '已通过' : item.checkStatus == '2' ? '已驳回' : '待审批'}}
           </div>
           <div class="text-center" v-else>
-            <van-button type="success" round size="mini" class="button ml-5" @click="showRemark(item.financeCheckId, 1)">通过</van-button>
-            <van-button type="danger" round size="mini" class="button" @click="showRemark(item.financeCheckId, 2)">驳回</van-button>
+            <el-button type="success" round size="mini" class="button ml-5" @click="showRemark(item.financeCheckId, 1)">通过</el-button>
+            <el-button type="danger" round size="mini" class="button" @click="showRemark(item.financeCheckId, 2)">驳回</el-button>
           </div>
           <div v-if="item.checkStatus == '1' || item.checkStatus == '2'" class="mt-1">
-            <van-circle
+            <el-circle
               v-model:current-rate="currentRate"
               :rate="100"
               :speed="100"
@@ -92,9 +92,9 @@
     </div>
   </div>
 
-  <van-dialog v-model:show="data.show" title="备注" show-cancel-button @confirm="handleAudit">
-    <van-field :border="data.border" v-model="data.remark" type="textarea" class="remark" placeholder="请输入备注" />
-  </van-dialog>
+  <el-dialog v-model:show="data.show" title="备注" show-cancel-button @confirm="handleAudit">
+    <el-field :border="data.border" v-model="data.remark" type="textarea" class="remark" placeholder="请输入备注" />
+  </el-dialog>
 </div>
 </template>
 
@@ -103,7 +103,7 @@ import dayjs from "dayjs";
 import { ref, computed } from 'vue';
 import { getApplyDetail, audit } from 'apis/finance';
 import { useRouter } from 'vue-router';
-import { Toast } from 'vant';
+import { ElMessage } from 'element-plus'
 
 const router = useRouter();
 
@@ -249,7 +249,7 @@ async function handleAudit(financeCheckId, checkStatus){
       }
     }
     await audit(params)
-    Toast('审批成功');
+    ElMessage.success('审批成功')
     handleFinanceOfProject()
     data.remark = ''
   } catch (error) {
@@ -259,7 +259,7 @@ async function handleAudit(financeCheckId, checkStatus){
 </script>
 
 <style lang="less" scoped>
-.van-circle{
+.el-circle{
   width: 2.5rem !important;
   height: 2.5rem !important;
 }
diff --git a/pages/financial-approval.vue b/pages/financial-approval.vue
index 98d4221..5502e1d 100644
--- a/pages/financial-approval.vue
+++ b/pages/financial-approval.vue
@@ -22,13 +22,13 @@
                 <span>任务支出统计</span>
               </div>
               <div>
-                <van-button :type="taskState ? 'primary' : 'default'" size="mini" @click="taskState = true">图表</van-button>
-                <van-button :type="!taskState ? 'primary' : 'default'" size="mini" @click="taskState = false">表格</van-button>
+                <el-button :type="taskState ? 'primary' : 'default'" size="mini" @click="taskState = true">图表</el-button>
+                <el-button :type="!taskState ? 'primary' : 'default'" size="mini" @click="taskState = false">表格</el-button>
               </div>
             </div>
             <!-- 任务支出统计的图表展示 -->
             <div v-show="taskState">
-              <!-- <van-empty description="暂无图表数据信息" /> -->
+              <!-- <el-empty description="暂无图表数据信息" /> -->
               <RingEcharts class="w-full h-full" id="taskEcharts"/>
             </div>
             <!-- 任务支出统计的表格展示 -->
@@ -44,13 +44,13 @@
                   <span>名目支出统计</span>
                 </div>
                 <div>
-                  <van-button :type="nameState ? 'primary' : 'default'" size="mini" @click="nameState = true">图表</van-button>
-                  <van-button :type="!nameState ? 'primary' : 'default'" size="mini" @click="nameState = false">表格</van-button>
+                  <el-button :type="nameState ? 'primary' : 'default'" size="mini" @click="nameState = true">图表</el-button>
+                  <el-button :type="!nameState ? 'primary' : 'default'" size="mini" @click="nameState = false">表格</el-button>
                 </div>
               </div>
               <!-- 名目支出统计的图表展示 -->
               <div v-show="nameState">
-                <!-- <van-empty description="暂无图表数据信息" /> -->
+                <!-- <el-empty description="暂无图表数据信息" /> -->
                 <RingEcharts class="w-full h-full" id="nameEcharts"/>
               </div>
               <!-- 名目支出统计的表格展示 -->
@@ -74,7 +74,7 @@
               </div>
               <BarEcharts class="w-full h-full mt-5"  />
               <!-- 没有数据展示空组件 -->
-              <!-- <van-empty description="暂无图表数据信息" /> -->
+              <!-- <el-empty description="暂无图表数据信息" /> -->
           </div>
         </div>
     <!-- 悬浮跳转 -->
@@ -115,10 +115,10 @@ const nameState = ref(true);
   border-radius: 30px 0 0 30px;
   margin-bottom: 15px;
 }
-.van-button--mini{
+.el-button--mini{
   padding: 0.5rem 1rem;
 }
-.van-button--mini+.van-button--mini{
+.el-button--mini+.el-button--mini{
   margin-left: 0px;
 }
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index 86cb251..0ebfdeb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="fixed bg-gray-100">
-    <van-tabs
+    <el-tabs
       v-model:active="active"
       shrink
       line-width="60px"
       color="#59B4FF"
       title-active-color="#59B4FF"
     >
-      <van-tab title="财务管理">
+      <el-tab-pane title="财务管理">
         <div class="h-screen w-full pb-60 overflow-y-scroll">
             <!-- 财务管理页面 -->
             <div class="bg-white p-4 mt-5 text-gray-500 flex-col">
@@ -46,23 +46,23 @@
                     <span>任务支出统计</span>
                   </div>
                   <div class="mr-5">
-                    <van-button
+                    <el-button
                       :type="taskState ? 'primary' : 'default'"
                       size="mini"
                       @click="taskState = true"
-                      >图表</van-button
+                      >图表</el-button
                     >
-                    <van-button
+                    <el-button
                       :type="!taskState ? 'primary' : 'default'"
                       size="mini"
                       @click="taskState = false"
-                      >表格</van-button
+                      >表格</el-button
                     >
                   </div>
                 </div>
                 <!-- 任务支出统计的图表展示 -->
                 <div v-show="taskState">
-                  <!-- <van-empty description="暂无图表数据信息" /> -->
+                  <!-- <el-empty description="暂无图表数据信息" /> -->
                   <RingEcharts class="w-full h-full" id="taskEcharts" />
                 </div>
                 <!-- 任务支出统计的表格展示 -->
@@ -80,23 +80,23 @@
                     <span>名目支出统计</span>
                   </div>
                   <div class="mr-5">
-                    <van-button
+                    <el-button
                       :type="nameState ? 'primary' : 'default'"
                       size="mini"
                       @click="nameState = true"
-                      >图表</van-button
+                      >图表</el-button
                     >
-                    <van-button
+                    <el-button
                       :type="!nameState ? 'primary' : 'default'"
                       size="mini"
                       @click="nameState = false"
-                      >表格</van-button
+                      >表格</el-button
                     >
                   </div>
                 </div>
                 <!-- 名目支出统计的图表展示 -->
                 <div v-show="nameState">
-                  <!-- <van-empty description="暂无图表数据信息" /> -->
+                  <!-- <el-empty description="暂无图表数据信息" /> -->
                   <RingEcharts class="w-full h-full" id="nameEcharts" />
                 </div>
                 <!-- 名目支出统计的表格展示 -->
@@ -128,11 +128,11 @@
 
 
       </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-tab title="成员管理"><div class="h-screen overflow-y-scroll w-screen mt-4">成员管理</div></van-tab>
-    </van-tabs>
+      </el-tab-pane>
+      <el-tab-pane title="角色管理"> <div class="h-screen overflow-y-scroll w-screen mt-4">角色管理</div></el-tab-pane>
+      <el-tab-pane title="任务管理"><div class="h-screen overflow-y-scroll w-screen mt-4">任务管理</div></el-tab-pane>
+      <el-tab-pane title="成员管理"><div class="h-screen overflow-y-scroll w-screen mt-4">成员管理</div></el-tab-pane>
+    </el-tabs>
 
     <div class="menu">
       <a href="#finance-manage">财务管理</a>
@@ -172,10 +172,10 @@ async function scrollToElementByHash() {
 </script>
 
 <style lang="less">
-.van-nav-bar__content {
+.el-nav-bar__content {
   background-color: #eee;
 }
-.van-icon-arrow-left:before {
+.el-icon-arrow-left:before {
   color: #000;
 }
 </style>
@@ -199,10 +199,10 @@ async function scrollToElementByHash() {
   padding: 0px;
   margin: 0px;
 }
-.van-button--mini {
+.el-button--mini {
   padding: 0.5rem 1rem;
 }
-.van-button--mini + .van-button--mini {
+.el-button--mini + .el-button--mini {
   margin-left: 0px;
 }
 .table-box{
diff --git a/plugins/vant.js b/plugins/vant.js
index 0ab3865..ceebc98 100644
--- a/plugins/vant.js
+++ b/plugins/vant.js
@@ -1,59 +1,8 @@
-// 目前在 nuxt 中无法按需引入样式，因此采用手动引入的方式
-import 'vant/lib/index.css';
-
-import {
-  Button,
-  Cell,
-  CellGroup,
-  Col,
-  Icon,
-  Image,
-  Row,
-  NavBar,
-  Tabs,
-  Tab,
-  Search,
-  Pagination,
-  Field,
-  Uploader,
-  Form,
-  Popup,
-  Cascader,
-  Circle,
-  Empty,
-  Popover,
-  Dialog,
-  Picker,
-  Loading,
-  Overlay
-} from 'vant';
+import 'element-plus/dist/index.css';
 
+import ElementPlus from 'element-plus/lib';
 import { defineNuxtPlugin } from '#app';
 
 export default defineNuxtPlugin(nuxtApp => {
-  nuxtApp.vueApp
-    .use(Row)
-    .use(Col)
-    .use(Image)
-    .use(Icon)
-    .use(Cell)
-    .use(Button)
-    .use(CellGroup)
-    .use(NavBar)
-    .use(Tab)
-    .use(Search)
-    .use(Pagination)
-    .use(Field)
-    .use(Uploader)
-    .use(Form)
-    .use(Cascader)
-    .use(Popup)
-    .use(Circle)
-    .use(Tabs)
-    .use(Empty)
-    .use(Popover)
-    .use(Dialog)
-    .use(Picker)
-    .use(Loading)
-    .use(Overlay)
+  nuxtApp.vueApp.use(ElementPlus);
 });