diff --git a/assets/.gitkeep b/assets/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/components/Common/Hello.vue b/components/Common/Hello.vue
deleted file mode 100644
index 4844f2b..0000000
--- a/components/Common/Hello.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <h1>
-    Common Hello.vue <br /><small>{{ modalDisplay }}</small>
-    <van-button type="primary" @click="modalDisplay = !modalDisplay">
-      主要按钮
-    </van-button>
-  </h1>
-</template>
-
-<script setup>
-const modalDisplay = useModal();
-console.log(modalDisplay.value);
-</script>
diff --git a/components/Hello.vue b/components/Hello.vue
deleted file mode 100644
index 07b56cc..0000000
--- a/components/Hello.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <div>
-    Hello
-    <h2>{{ modalDisplay }}</h2>
-  </div>
-</template>
-
-<script setup>
-const modalDisplay = useModal();
-</script>
diff --git a/components/Search.vue b/components/Search.vue
new file mode 100644
index 0000000..445b5a2
--- /dev/null
+++ b/components/Search.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="search">
+        <van-search v-model="searchRef" placeholder="搜索" />
+    </div>
+</template>
+
+<script setup>
+
+import {ref} from 'vue'
+const searchRef = ref('')
+
+</script>
+
+<style lang="less">
+.search{
+  padding-top:1rem
+}
+.van-search{
+  padding: 0;
+}
+.van-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);
+    width: 45%;
+    padding-left: 40%;
+}
+
+
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 56a8b72..b563354 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,12 @@
 <template>
-  <div>
+  <div  class="container">
     <slot />
   </div>
 </template>
+
+<style lang="less">
+.container{
+  background:#eee;
+  height:100vh;
+}
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 1b8d7ec..349e0c2 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -20,6 +20,10 @@ export default defineNuxtConfig({
         rel: 'stylesheet',
         href: 'https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css',
       },
+      {
+        rel:"stylesheet",
+        href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css",
+      }
     ],
     script: [{ src: '' }],
   },
diff --git a/package-lock.json b/package-lock.json
index a8656fa..356cf84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "plugin-finance",
+  "name": "finance",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
@@ -13,13 +13,16 @@
       "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^5.10.0",
         "@typescript-eslint/parser": "^5.10.0",
+        "autoprefixer": "^10.4.2",
         "eslint": "^8.7.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-vue": "^8.3.0",
         "less": "^4.1.2",
         "nuxt3": "latest",
-        "prettier": "^2.5.1"
+        "postcss": "^8.4.5",
+        "prettier": "^2.5.1",
+        "tailwindcss": "^3.0.15"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -2146,6 +2149,38 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      }
+    },
+    "node_modules/acorn-node/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-node/node_modules/acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/acorn-walk": {
       "version": "8.2.0",
       "resolved": "https://registry.nlark.com/acorn-walk/download/acorn-walk-8.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn-walk%2Fdownload%2Facorn-walk-8.2.0.tgz",
@@ -2369,6 +2404,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/arg": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
+      "integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==",
+      "dev": true
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.nlark.com/argparse/download/argparse-2.0.1.tgz",
@@ -2439,7 +2480,7 @@
     },
     "node_modules/autoprefixer": {
       "version": "10.4.2",
-      "resolved": "https://registry.npmmirror.com/autoprefixer/download/autoprefixer-10.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
       "integrity": "sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==",
       "dev": true,
       "dependencies": {
@@ -2456,6 +2497,10 @@
       "engines": {
         "node": "^10 || ^12 || >=14"
       },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
       "peerDependencies": {
         "postcss": "^8.1.0"
       }
@@ -2687,6 +2732,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/caniuse-api/download/caniuse-api-3.0.0.tgz",
@@ -3426,6 +3480,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
+      "dev": true
+    },
     "node_modules/defu": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/defu/download/defu-5.0.1.tgz",
@@ -3480,6 +3540,29 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/detective": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
+      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
+      "dev": true,
+      "dependencies": {
+        "acorn-node": "^1.6.1",
+        "defined": "^1.0.0",
+        "minimist": "^1.1.1"
+      },
+      "bin": {
+        "detective": "bin/detective.js"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npm.taobao.org/dir-glob/download/dir-glob-3.0.1.tgz",
@@ -3492,6 +3575,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/doctrine/download/doctrine-3.0.0.tgz",
@@ -7094,6 +7183,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.12.0",
       "resolved": "https://registry.npmmirror.com/object-inspect/download/object-inspect-1.12.0.tgz",
@@ -7537,7 +7635,7 @@
     },
     "node_modules/postcss": {
       "version": "8.4.5",
-      "resolved": "https://registry.npmmirror.com/postcss/download/postcss-8.4.5.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
       "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
       "dependencies": {
         "nanoid": "^3.1.30",
@@ -7546,6 +7644,10 @@
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-calc": {
@@ -7692,6 +7794,50 @@
         "node": ">=6"
       }
     },
+    "node_modules/postcss-js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.1.tgz",
+      "integrity": "sha512-c/9XYboIbSEUZpiD1UQD0IKiUe8n9WHYV7YFe7X7J+ZwCsEKkUJSFWjS9hBU1RR9THR7jMXst8sxiqP0jjo2mg==",
+      "dev": true,
+      "dependencies": {
+        "lilconfig": "^2.0.4",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss-loader": {
       "version": "6.2.1",
       "resolved": "https://registry.npmmirror.com/postcss-loader/download/postcss-loader-6.2.1.tgz",
@@ -7873,6 +8019,25 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/postcss-nested": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.6"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/postcss-normalize-charset": {
       "version": "5.0.1",
       "resolved": "https://registry.nlark.com/postcss-normalize-charset/download/postcss-normalize-charset-5.0.1.tgz",
@@ -8233,6 +8398,18 @@
       "integrity": "sha1-SSkii7xyTfrEPg77BYyve2z7YkM=",
       "dev": true
     },
+    "node_modules/quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/randombytes/download/randombytes-2.1.0.tgz",
@@ -9115,6 +9292,85 @@
       "integrity": "sha1-rnvLNlard6c7pcSb9lTzjmtoYOI=",
       "dev": true
     },
+    "node_modules/tailwindcss": {
+      "version": "3.0.15",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.15.tgz",
+      "integrity": "sha512-bT2iy7FtjwgsXik4ZoJnHXR+SRCiGR1W95fVqpLZebr64m4ahwUwRbIAc5w5+2fzr1YF4Ct2eI7dojMRRl8sVQ==",
+      "dev": true,
+      "dependencies": {
+        "arg": "^5.0.1",
+        "chalk": "^4.1.2",
+        "chokidar": "^3.5.2",
+        "color-name": "^1.1.4",
+        "cosmiconfig": "^7.0.1",
+        "detective": "^5.2.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.7",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^2.2.0",
+        "postcss-js": "^4.0.0",
+        "postcss-load-config": "^3.1.0",
+        "postcss-nested": "5.0.6",
+        "postcss-selector-parser": "^6.0.8",
+        "postcss-value-parser": "^4.2.0",
+        "quick-lru": "^5.1.1",
+        "resolve": "^1.21.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "autoprefixer": "^10.0.2",
+        "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/tapable/download/tapable-2.2.1.tgz",
@@ -10686,6 +10942,15 @@
         }
       }
     },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
     "node_modules/xxhashjs": {
       "version": "0.2.2",
       "resolved": "https://registry.nlark.com/xxhashjs/download/xxhashjs-0.2.2.tgz?cache=0&sync_timestamp=1624607954808&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fxxhashjs%2Fdownload%2Fxxhashjs-0.2.2.tgz",
@@ -12493,6 +12758,31 @@
       "dev": true,
       "requires": {}
     },
+    "acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        },
+        "acorn-walk": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+          "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+          "dev": true
+        }
+      }
+    },
     "acorn-walk": {
       "version": "8.2.0",
       "resolved": "https://registry.nlark.com/acorn-walk/download/acorn-walk-8.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Facorn-walk%2Fdownload%2Facorn-walk-8.2.0.tgz",
@@ -12680,6 +12970,12 @@
         "readable-stream": "^3.6.0"
       }
     },
+    "arg": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
+      "integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==",
+      "dev": true
+    },
     "argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.nlark.com/argparse/download/argparse-2.0.1.tgz",
@@ -12730,7 +13026,7 @@
     },
     "autoprefixer": {
       "version": "10.4.2",
-      "resolved": "https://registry.npmmirror.com/autoprefixer/download/autoprefixer-10.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
       "integrity": "sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==",
       "dev": true,
       "requires": {
@@ -12917,6 +13213,12 @@
       "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
       "dev": true
     },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/caniuse-api/download/caniuse-api-3.0.0.tgz",
@@ -13480,6 +13782,12 @@
         "object-keys": "^1.0.12"
       }
     },
+    "defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
+      "dev": true
+    },
     "defu": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/defu/download/defu-5.0.1.tgz",
@@ -13522,6 +13830,23 @@
       "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
       "dev": true
     },
+    "detective": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
+      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
+      "dev": true,
+      "requires": {
+        "acorn-node": "^1.6.1",
+        "defined": "^1.0.0",
+        "minimist": "^1.1.1"
+      }
+    },
+    "didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npm.taobao.org/dir-glob/download/dir-glob-3.0.1.tgz",
@@ -13531,6 +13856,12 @@
         "path-type": "^4.0.0"
       }
     },
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/doctrine/download/doctrine-3.0.0.tgz",
@@ -16364,6 +16695,12 @@
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
       "dev": true
     },
+    "object-hash": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+      "dev": true
+    },
     "object-inspect": {
       "version": "1.12.0",
       "resolved": "https://registry.npmmirror.com/object-inspect/download/object-inspect-1.12.0.tgz",
@@ -16699,7 +17036,7 @@
     },
     "postcss": {
       "version": "8.4.5",
-      "resolved": "https://registry.npmmirror.com/postcss/download/postcss-8.4.5.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
       "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
       "requires": {
         "nanoid": "^3.1.30",
@@ -16805,6 +17142,25 @@
         }
       }
     },
+    "postcss-js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "dev": true,
+      "requires": {
+        "camelcase-css": "^2.0.1"
+      }
+    },
+    "postcss-load-config": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.1.tgz",
+      "integrity": "sha512-c/9XYboIbSEUZpiD1UQD0IKiUe8n9WHYV7YFe7X7J+ZwCsEKkUJSFWjS9hBU1RR9THR7jMXst8sxiqP0jjo2mg==",
+      "dev": true,
+      "requires": {
+        "lilconfig": "^2.0.4",
+        "yaml": "^1.10.2"
+      }
+    },
     "postcss-loader": {
       "version": "6.2.1",
       "resolved": "https://registry.npmmirror.com/postcss-loader/download/postcss-loader-6.2.1.tgz",
@@ -16916,6 +17272,15 @@
         "icss-utils": "^5.0.0"
       }
     },
+    "postcss-nested": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.6"
+      }
+    },
     "postcss-normalize-charset": {
       "version": "5.0.1",
       "resolved": "https://registry.nlark.com/postcss-normalize-charset/download/postcss-normalize-charset-5.0.1.tgz",
@@ -17148,6 +17513,12 @@
       "integrity": "sha1-SSkii7xyTfrEPg77BYyve2z7YkM=",
       "dev": true
     },
+    "quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/randombytes/download/randombytes-2.1.0.tgz",
@@ -17881,6 +18252,64 @@
         }
       }
     },
+    "tailwindcss": {
+      "version": "3.0.15",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.15.tgz",
+      "integrity": "sha512-bT2iy7FtjwgsXik4ZoJnHXR+SRCiGR1W95fVqpLZebr64m4ahwUwRbIAc5w5+2fzr1YF4Ct2eI7dojMRRl8sVQ==",
+      "dev": true,
+      "requires": {
+        "arg": "^5.0.1",
+        "chalk": "^4.1.2",
+        "chokidar": "^3.5.2",
+        "color-name": "^1.1.4",
+        "cosmiconfig": "^7.0.1",
+        "detective": "^5.2.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.7",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^2.2.0",
+        "postcss-js": "^4.0.0",
+        "postcss-load-config": "^3.1.0",
+        "postcss-nested": "5.0.6",
+        "postcss-selector-parser": "^6.0.8",
+        "postcss-value-parser": "^4.2.0",
+        "quick-lru": "^5.1.1",
+        "resolve": "^1.21.0"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "glob-parent": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+          "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.3"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/tapable/download/tapable-2.2.1.tgz",
@@ -19020,6 +19449,12 @@
       "dev": true,
       "requires": {}
     },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true
+    },
     "xxhashjs": {
       "version": "0.2.2",
       "resolved": "https://registry.nlark.com/xxhashjs/download/xxhashjs-0.2.2.tgz?cache=0&sync_timestamp=1624607954808&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fxxhashjs%2Fdownload%2Fxxhashjs-0.2.2.tgz",
diff --git a/package.json b/package.json
index a77749f..997e35e 100644
--- a/package.json
+++ b/package.json
@@ -8,12 +8,14 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
+    "autoprefixer": "^10.4.2",
     "eslint": "^8.7.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-vue": "^8.3.0",
     "less": "^4.1.2",
     "nuxt3": "latest",
+    "postcss": "^8.4.5",
     "prettier": "^2.5.1"
   },
   "dependencies": {
diff --git a/pages/applicant.vue b/pages/applicant.vue
new file mode 100644
index 0000000..8dbd009
--- /dev/null
+++ b/pages/applicant.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="container">
+    <!-- 头部选项卡部分 -->
+     <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>
+          <div v-if="isShow">
+            <Search />
+            <table>
+              <tr class="table-header">
+                <td>申请人</td>
+                <td>金额(元)</td>
+                <td class="apply-time">时间</td>
+                <td>状态</td>
+              </tr>
+              <tr v-for="item in applyData">
+                <td>{{item.applicant}}</td>
+                <td>{{item.money}}</td>
+                <td>{{item.time}}</td>
+                <td
+                :class="item.type === 1 ? 'green' : item.type === 2 ? 'red' : ''"
+                >
+                {{item.type === 1 ? '已通过' : item.type === 2 ? '已驳回' : '待审批'}}
+                </td>
+              </tr>
+            </table>
+            <div class="pagination">
+                <van-pagination v-model="currentPage" :page-count="12" mode="simple" />
+            </div>
+          </div>
+          <div v-if="!isShow" class="no-data">
+              暂无历史记录
+          </div>
+
+        </div>
+        <!-- 底部提交按钮部分 -->
+        <div class="foot">
+            <van-button type="primary" block>发起申请</van-button>
+        </div>
+      </van-tab>
+    <van-tab title="我的奖金">我的奖金</van-tab>
+  </van-tabs>
+  </div>
+
+</template>
+
+
+<script setup>
+import {ref,computed} from 'vue'
+
+const active = ref(0);
+const isShow = ref(true);
+const applyData = ref([
+  {
+    applicant:'代用名1',
+    money:100,
+    time:'2021/12/31 12:31',
+    type: 1
+  },
+  {
+    applicant:'代用名2',
+    money:100,
+    time:'2021/12/31 12:31',
+    type: 2
+  },
+  {
+    applicant:'代用名1',
+    money:100,
+    time:'2021/12/31 12:31',
+    type: 3
+  },
+  {
+    applicant:'代用名2',
+    money:100,
+    time:'2021/12/31 12:31',
+    type: 3
+  },
+  {
+    applicant:'代用名1',
+    money:100,
+    time:'2021/12/31 12:31',
+    type: 1
+  },
+  {
+    applicant:'代用名2',
+    money:100,
+    time:'2021/12/31 12:31',
+    type: 2
+  }
+]);
+
+function onClickLeft(){
+  console.log('返回上一页')
+}
+
+</script>
+
+
+<style lang="less" scoped>
+.van-nav-bar__content{
+  background-color:#eee
+}
+.van-icon-arrow-left:before{
+  color: #000;
+}
+.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/index.vue b/pages/index.vue
index c0fc1f5..bcd00de 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,43 +1,45 @@
 <template>
-  <div>
-    <Hello />
-    <CommonHello />
-
-    {{ testString }}
-
-    <van-image
-      class="user-poster"
-      src="https://img.yzcdn.cn/public_files/2017/10/23/8690bb321356070e0b8c4404d087f8fd.png"
-    />
-    <van-row class="user-links">
-      <van-col span="6">
-        <van-icon name="pending-payment" />
-        待付款
-      </van-col>
-      <van-col span="6">
-        <van-icon name="records" />
-        待接单
-      </van-col>
-      <van-col span="6">
-        <van-icon name="tosend" />
-        待发货
-      </van-col>
-      <van-col span="6">
-        <van-icon name="logistics" />
-        已发货
-      </van-col>
-    </van-row>
+<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>
 
-    <van-cell-group class="user-group">
-      <van-cell icon="records" title="全部订单" is-link />
-    </van-cell-group>
+</div>
 
-    <van-cell-group>
-      <van-cell icon="points" title="我的积分" is-link />
-      <van-cell icon="gold-coin-o" title="我的优惠券" is-link />
-      <van-cell icon="gift-o" title="我收到的礼物" is-link />
-    </van-cell-group>
-  </div>
 </template>
 
 <script>
@@ -47,34 +49,103 @@ export default {
 </script>
 
 <script setup>
-const testString = ref('Hello world');
+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">
-body {
-  margin: 0;
-  font-size: 16px;
-  background-color: #f8f8f8;
-  -webkit-font-smoothing: antialiased;
+.van-nav-bar__content{
+  background-color:#eee
 }
-.user {
-  &-poster {
-    width: 100%;
-    height: 53vw;
-    display: block;
-  }
-  &-group {
-    margin-bottom: 15px;
+.van-icon-arrow-left:before{
+  color: #000;
+}
+.financial-management{
+  background-color:#ffffff;
+  padding: 1rem;
+  margin-top: 2rem;
+  color: #555252;
+  .title{
+  font-weight: 600;
   }
-  &-links {
-    padding: 15px 0;
+  .title-describe{
     font-size: 12px;
-    text-align: center;
-    background-color: #fff;
-    .van-icon {
-      display: block;
-      font-size: 24px;
+    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>
diff --git a/plugins/vant.js b/plugins/vant.js
index 90215b5..83ffb4d 100644
--- a/plugins/vant.js
+++ b/plugins/vant.js
@@ -1,7 +1,20 @@
 // 目前在 nuxt 中无法按需引入样式，因此采用手动引入的方式
 import 'vant/lib/index.css';
 
-import { Button, Cell, CellGroup, Col, Icon, Image, Row } from 'vant';
+import {
+  Button,
+  Cell,
+  CellGroup,
+  Col,
+  Icon,
+  Image,
+  Row,
+  NavBar,
+  Tabs,
+  Tab,
+  Search,
+  Pagination,
+} from 'vant';
 
 import { defineNuxtPlugin } from '#app';
 
@@ -13,5 +26,10 @@ export default defineNuxtPlugin(nuxtApp => {
     .use(Icon)
     .use(Cell)
     .use(Button)
-    .use(CellGroup);
+    .use(CellGroup)
+    .use(NavBar)
+    .use(Tab)
+    .use(Search)
+    .use(Pagination)
+    .use(Tabs);
 });