commit 64c4efcf0fc76b14084f36a959cecee55e75d45f
Author: shdjndbfjjd <1772127579@qq.com>
Date:   Thu May 11 11:33:50 2023 +0800

    first commit

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..c0a6e5a
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..83226a1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,125 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## ⚡系统描述
+
+本系统为字节招聘网站的**Vue3**版本， 技术栈使用Vue3、Element Plus、VueX、Axios 和 Vite 等主流技术.
+
+- Vue-Cli 5.x 版: [v3-admin](https://github.com/un-pany/v3-admin)
+- Electron 桌面版: [v3-electron-vite](https://github.com/un-pany/v3-electron-vite)
+
+## 技术栈特性
+- **Vue3**：采用 Vue3 + script setup 最新的 Vue3 组合式 API
+- **Element Plus**：Element UI 的 Vue3 版本
+- **VueX**: 传统Vue项目的状态管理工具
+- **Vite**：真的很快
+- **Vue Router**：路由路由
+- **TypeScript**：JavaScript 语言的超集
+- **PNPM**：更快速的，节省磁盘空间的包管理工具
+- **Less**：更方便的变量使用和CSS嵌套语法
+- **CSS 变量**：主要控制项目的布局和颜色
+- **ESlint**：代码校验
+- **Prettier**：代码格式化
+- **Axios**：发送网络请求（已封装好---包括开发,生产和测试三种环境的封装）
+- **UnoCSS**：具有高性能且极具灵活性的即时原子化 CSS 引擎
+- **注释**：各个配置项都写有尽可能详细的注释
+
+## 存在问题
+这里多说一下，因为字节招聘官网更多是使用自己设计的样式，所以整体UI框架并没有使用Element更多是自己
+去编写（从字节官网拿 - -），这里使用ElementPlus的原因是使用了他的消息提示组件和加载组件。
+
+不过像这些组件在项目目录中的**components**文件夹中也有自己编写的自定义插件，但是并没有成功，
+所以希望大佬们帮忙看一下，感激不尽！
+
+
+## 🚀 功能描述
+- **用户管理**：登录、登出演示
+- **权限管理**：内置页面权限（动态路由）、指令权限、权限函数、路由守卫
+- **多环境**：开发环境（development）、测试环境（test）、正式环境（production）
+- **产品展示**：展示宣传字节跳动的产品内容，包括抖音，飞书，今日头条，皮皮虾等
+- **工作信息**: 工作信息是字节招聘的重点内容，可根据工作地点和工作内容进行分类
+- **员工故事**：展示字节员工的生活经历和工作经历
+- **个人简历**：用户可以上传个人简历和信息，用于投递工作
+- **面试记录**：记录用户面试过的岗位
+
+
+## 运行
+
+```bash
+# 配置
+1. 一键安装 .vscode 目录中推荐的插件
+2. node 版本 16+
+3. pnpm 版本 8.x
+# 克隆项目
+git clone https://github.com/shdjndbfjjd/byteDance-Vue3.git
+# 进入项目目录
+cd byte
+# 安装依赖
+pnpm i
+# 启动服务
+pnpm run dev
+```
+
+## Git 提交规范参考
+
+- `feat` 增加新的业务功能
+- `fix` 修复业务问题/BUG
+- `perf` 优化性能
+- `style` 更改代码风格, 不影响运行结果
+- `refactor` 重构代码
+- `revert` 撤销更改
+- `test` 测试相关, 不涉及业务代码的更改
+- `docs` 文档和注释相关
+- `chore` 更新依赖/修改脚手架配置等琐事
+- `workflow` 工作流改进
+- `ci` 持续集成相关
+- `types` 类型定义文件更改
+- `wip` 开发中
+
+
+## 项目预览
+
+![preview1.png](./src/assets/docs/img.png)
+
+![preview2.png](./src/assets/docs/preview.png)
+
+![preview3.png](./src/assets/docs/img_1.png)
+
+![preview4.png](./src/assets/docs/img_2.png)
+
+![preview5.png](./src/assets/docs/img_3.png)
+
+![preview6.png](./src/assets/docs/img_4.png)
+
+![preview7.png](./src/assets/docs/img_5.png)
+
+![preview8.png](./src/assets/docs/img_6.png)
+
+![preview9.png](./src/assets/docs/img_7.png)
+
+![preview10.png](./src/assets/docs/img_8.png)
+
+![preview11.png](./src/assets/docs/img_9.png)
+
+
+## 注意事项
+
+因为现在还只是写了前端，后端暂时只写了登录和注册，所以目前系统中的数据都是假数据，像根据地点
+和分类动态展示岗位信息还不能实现。
+
+我现在的想法是后端搞两个版本，一是用Django和DRF来写，第二个版本则是使用Golang，毕竟字节
+后端用Go的话会更好一点？ - 。-
+
+如果大家觉得对你们有用的话麻烦给个star吧，star数量多的话我后续会把两个版本后端代码以及整体
+项目再次开源出来的。
+
+
+
+## 💕 感谢 Star
+
+小项目获取 star 不易，如果你喜欢这个项目的话，欢迎支持一个 star！这是作者持续维护的唯一动力（小声：毕竟是免费的）
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..795e4fb
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..ae84ede
--- /dev/null
+++ b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "byte",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
+    "axios": "^1.4.0",
+    "element-plus": "^2.3.4",
+    "mitt": "^3.0.0",
+    "nprogress": "^0.2.0",
+    "sass": "^1.62.1",
+    "sass-loader": "^13.2.2",
+    "vue": "^3.2.47",
+    "vue-router": "^4.1.6",
+    "vuex": "^4.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.1.0",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "unplugin-auto-import": "^0.15.3",
+    "unplugin-vue-components": "^0.24.1",
+    "vite": "^4.3.2"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..0982837
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,1310 @@
+lockfileVersion: 5.4
+
+specifiers:
+  '@element-plus/icons-vue': ^2.1.0
+  '@vitejs/plugin-vue': ^4.1.0
+  axios: ^1.4.0
+  element-plus: ^2.3.4
+  less: ^4.1.3
+  less-loader: ^11.1.0
+  mitt: ^3.0.0
+  nprogress: ^0.2.0
+  sass: ^1.62.1
+  sass-loader: ^13.2.2
+  unplugin-auto-import: ^0.15.3
+  unplugin-vue-components: ^0.24.1
+  vite: ^4.3.2
+  vue: ^3.2.47
+  vue-router: ^4.1.6
+  vuex: ^4.1.0
+
+dependencies:
+  '@element-plus/icons-vue': 2.1.0_vue@3.2.47
+  axios: 1.4.0
+  element-plus: 2.3.4_vue@3.2.47
+  mitt: 3.0.0
+  nprogress: 0.2.0
+  sass: 1.62.1
+  sass-loader: 13.2.2_sass@1.62.1
+  vue: 3.2.47
+  vue-router: 4.1.6_vue@3.2.47
+  vuex: 4.1.0_vue@3.2.47
+
+devDependencies:
+  '@vitejs/plugin-vue': 4.2.1_vite@4.3.3+vue@3.2.47
+  less: 4.1.3
+  less-loader: 11.1.0_less@4.1.3
+  unplugin-auto-import: 0.15.3
+  unplugin-vue-components: 0.24.1_vue@3.2.47
+  vite: 4.3.3_less@4.1.3+sass@1.62.1
+
+packages:
+
+  /@antfu/utils/0.7.2:
+    resolution: {integrity: sha512-vy9fM3pIxZmX07dL+VX1aZe7ynZ+YyB0jY+jE6r3hOK6GNY2t6W8rzpFC4tgpbXUYABkFQwgJq2XYXlxbXAI0g==}
+    dev: true
+
+  /@babel/helper-string-parser/7.21.5:
+    resolution: {integrity: sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-identifier/7.19.1:
+    resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/parser/7.21.5:
+    resolution: {integrity: sha512-J+IxH2IsxV4HbnTrSWgMAQj0UEo61hDA4Ny8h8PCX0MLXiibqHbqIOVneqdocemSBc22VpBKxt4J6FQzy9HarQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.21.5
+
+  /@babel/types/7.21.5:
+    resolution: {integrity: sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.21.5
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
+
+  /@ctrl/tinycolor/3.6.0:
+    resolution: {integrity: sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /@element-plus/icons-vue/2.1.0_vue@3.2.47:
+    resolution: {integrity: sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.2.47
+    dev: false
+
+  /@esbuild/android-arm/0.17.18:
+    resolution: {integrity: sha512-EmwL+vUBZJ7mhFCs5lA4ZimpUH3WMAoqvOIYhVQwdIgSpHC8ImHdsRyhHAVxpDYUSm0lWvd63z0XH1IlImS2Qw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm64/0.17.18:
+    resolution: {integrity: sha512-/iq0aK0eeHgSC3z55ucMAHO05OIqmQehiGay8eP5l/5l+iEr4EIbh4/MI8xD9qRFjqzgkc0JkX0LculNC9mXBw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-x64/0.17.18:
+    resolution: {integrity: sha512-x+0efYNBF3NPW2Xc5bFOSFW7tTXdAcpfEg2nXmxegm4mJuVeS+i109m/7HMiOQ6M12aVGGFlqJX3RhNdYM2lWg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-arm64/0.17.18:
+    resolution: {integrity: sha512-6tY+djEAdF48M1ONWnQb1C+6LiXrKjmqjzPNPWXhu/GzOHTHX2nh8Mo2ZAmBFg0kIodHhciEgUBtcYCAIjGbjQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-x64/0.17.18:
+    resolution: {integrity: sha512-Qq84ykvLvya3dO49wVC9FFCNUfSrQJLbxhoQk/TE1r6MjHo3sFF2tlJCwMjhkBVq3/ahUisj7+EpRSz0/+8+9A==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-arm64/0.17.18:
+    resolution: {integrity: sha512-fw/ZfxfAzuHfaQeMDhbzxp9mc+mHn1Y94VDHFHjGvt2Uxl10mT4CDavHm+/L9KG441t1QdABqkVYwakMUeyLRA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-x64/0.17.18:
+    resolution: {integrity: sha512-FQFbRtTaEi8ZBi/A6kxOC0V0E9B/97vPdYjY9NdawyLd4Qk5VD5g2pbWN2VR1c0xhzcJm74HWpObPszWC+qTew==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm/0.17.18:
+    resolution: {integrity: sha512-jW+UCM40LzHcouIaqv3e/oRs0JM76JfhHjCavPxMUti7VAPh8CaGSlS7cmyrdpzSk7A+8f0hiedHqr/LMnfijg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm64/0.17.18:
+    resolution: {integrity: sha512-R7pZvQZFOY2sxUG8P6A21eq6q+eBv7JPQYIybHVf1XkQYC+lT7nDBdC7wWKTrbvMXKRaGudp/dzZCwL/863mZQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ia32/0.17.18:
+    resolution: {integrity: sha512-ygIMc3I7wxgXIxk6j3V00VlABIjq260i967Cp9BNAk5pOOpIXmd1RFQJQX9Io7KRsthDrQYrtcx7QCof4o3ZoQ==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-loong64/0.17.18:
+    resolution: {integrity: sha512-bvPG+MyFs5ZlwYclCG1D744oHk1Pv7j8psF5TfYx7otCVmcJsEXgFEhQkbhNW8otDHL1a2KDINW20cfCgnzgMQ==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-mips64el/0.17.18:
+    resolution: {integrity: sha512-oVqckATOAGuiUOa6wr8TXaVPSa+6IwVJrGidmNZS1cZVx0HqkTMkqFGD2HIx9H1RvOwFeWYdaYbdY6B89KUMxA==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ppc64/0.17.18:
+    resolution: {integrity: sha512-3dLlQO+b/LnQNxgH4l9rqa2/IwRJVN9u/bK63FhOPB4xqiRqlQAU0qDU3JJuf0BmaH0yytTBdoSBHrb2jqc5qQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-riscv64/0.17.18:
+    resolution: {integrity: sha512-/x7leOyDPjZV3TcsdfrSI107zItVnsX1q2nho7hbbQoKnmoeUWjs+08rKKt4AUXju7+3aRZSsKrJtaRmsdL1xA==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-s390x/0.17.18:
+    resolution: {integrity: sha512-cX0I8Q9xQkL/6F5zWdYmVf5JSQt+ZfZD2bJudZrWD+4mnUvoZ3TDDXtDX2mUaq6upMFv9FlfIh4Gfun0tbGzuw==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-x64/0.17.18:
+    resolution: {integrity: sha512-66RmRsPlYy4jFl0vG80GcNRdirx4nVWAzJmXkevgphP1qf4dsLQCpSKGM3DUQCojwU1hnepI63gNZdrr02wHUA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/netbsd-x64/0.17.18:
+    resolution: {integrity: sha512-95IRY7mI2yrkLlTLb1gpDxdC5WLC5mZDi+kA9dmM5XAGxCME0F8i4bYH4jZreaJ6lIZ0B8hTrweqG1fUyW7jbg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/openbsd-x64/0.17.18:
+    resolution: {integrity: sha512-WevVOgcng+8hSZ4Q3BKL3n1xTv5H6Nb53cBrtzzEjDbbnOmucEVcZeGCsCOi9bAOcDYEeBZbD2SJNBxlfP3qiA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/sunos-x64/0.17.18:
+    resolution: {integrity: sha512-Rzf4QfQagnwhQXVBS3BYUlxmEbcV7MY+BH5vfDZekU5eYpcffHSyjU8T0xucKVuOcdCsMo+Ur5wmgQJH2GfNrg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-arm64/0.17.18:
+    resolution: {integrity: sha512-Kb3Ko/KKaWhjeAm2YoT/cNZaHaD1Yk/pa3FTsmqo9uFh1D1Rfco7BBLIPdDOozrObj2sahslFuAQGvWbgWldAg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-ia32/0.17.18:
+    resolution: {integrity: sha512-0/xUMIdkVHwkvxfbd5+lfG7mHOf2FRrxNbPiKWg9C4fFrB8H0guClmaM3BFiRUYrznVoyxTIyC/Ou2B7QQSwmw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-x64/0.17.18:
+    resolution: {integrity: sha512-qU25Ma1I3NqTSHJUOKi9sAH1/Mzuvlke0ioMJRthLXKm7JiSKVwFghlGbDLOO2sARECGhja4xYfRAZNPAkooYg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@floating-ui/core/1.2.6:
+    resolution: {integrity: sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==}
+    dev: false
+
+  /@floating-ui/dom/1.2.7:
+    resolution: {integrity: sha512-DyqylONj1ZaBnzj+uBnVfzdjjCkFCL2aA9ESHLyUOGSqb03RpbLMImP1ekIQXYs4KLk9jAjJfZAU8hXfWSahEg==}
+    dependencies:
+      '@floating-ui/core': 1.2.6
+    dev: false
+
+  /@jridgewell/sourcemap-codec/1.4.15:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+    dev: true
+
+  /@nodelib/fs.scandir/2.1.5:
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+    dev: true
+
+  /@nodelib/fs.stat/2.0.5:
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /@nodelib/fs.walk/1.2.8:
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.15.0
+    dev: true
+
+  /@rollup/pluginutils/5.0.2:
+    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.1
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: true
+
+  /@sxzz/popperjs-es/2.11.7:
+    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
+    dev: false
+
+  /@types/estree/1.0.1:
+    resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
+    dev: true
+
+  /@types/lodash-es/4.17.7:
+    resolution: {integrity: sha512-z0ptr6UI10VlU6l5MYhGwS4mC8DZyYer2mCoyysZtSF7p26zOX8UpbrV0YpNYLGS8K4PUFIyEr62IMFFjveSiQ==}
+    dependencies:
+      '@types/lodash': 4.14.194
+    dev: false
+
+  /@types/lodash/4.14.194:
+    resolution: {integrity: sha512-r22s9tAS7imvBt2lyHC9B8AGwWnXaYb1tY09oyLkXDs4vArpYJzw09nj8MLx5VfciBPGIb+ZwG0ssYnEPJxn/g==}
+    dev: false
+
+  /@types/web-bluetooth/0.0.16:
+    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+    dev: false
+
+  /@vitejs/plugin-vue/4.2.1_vite@4.3.3+vue@3.2.47:
+    resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 4.3.3_less@4.1.3+sass@1.62.1
+      vue: 3.2.47
+    dev: true
+
+  /@vue/compiler-core/3.2.47:
+    resolution: {integrity: sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==}
+    dependencies:
+      '@babel/parser': 7.21.5
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      source-map: 0.6.1
+
+  /@vue/compiler-dom/3.2.47:
+    resolution: {integrity: sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==}
+    dependencies:
+      '@vue/compiler-core': 3.2.47
+      '@vue/shared': 3.2.47
+
+  /@vue/compiler-sfc/3.2.47:
+    resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==}
+    dependencies:
+      '@babel/parser': 7.21.5
+      '@vue/compiler-core': 3.2.47
+      '@vue/compiler-dom': 3.2.47
+      '@vue/compiler-ssr': 3.2.47
+      '@vue/reactivity-transform': 3.2.47
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+      postcss: 8.4.23
+      source-map: 0.6.1
+
+  /@vue/compiler-ssr/3.2.47:
+    resolution: {integrity: sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.47
+      '@vue/shared': 3.2.47
+
+  /@vue/devtools-api/6.5.0:
+    resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
+    dev: false
+
+  /@vue/reactivity-transform/3.2.47:
+    resolution: {integrity: sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==}
+    dependencies:
+      '@babel/parser': 7.21.5
+      '@vue/compiler-core': 3.2.47
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+
+  /@vue/reactivity/3.2.47:
+    resolution: {integrity: sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==}
+    dependencies:
+      '@vue/shared': 3.2.47
+
+  /@vue/runtime-core/3.2.47:
+    resolution: {integrity: sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==}
+    dependencies:
+      '@vue/reactivity': 3.2.47
+      '@vue/shared': 3.2.47
+
+  /@vue/runtime-dom/3.2.47:
+    resolution: {integrity: sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==}
+    dependencies:
+      '@vue/runtime-core': 3.2.47
+      '@vue/shared': 3.2.47
+      csstype: 2.6.21
+
+  /@vue/server-renderer/3.2.47_vue@3.2.47:
+    resolution: {integrity: sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==}
+    peerDependencies:
+      vue: 3.2.47
+    dependencies:
+      '@vue/compiler-ssr': 3.2.47
+      '@vue/shared': 3.2.47
+      vue: 3.2.47
+
+  /@vue/shared/3.2.47:
+    resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==}
+
+  /@vueuse/core/9.13.0_vue@3.2.47:
+    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.16
+      '@vueuse/metadata': 9.13.0
+      '@vueuse/shared': 9.13.0_vue@3.2.47
+      vue-demi: 0.14.0_vue@3.2.47
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /@vueuse/metadata/9.13.0:
+    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
+    dev: false
+
+  /@vueuse/shared/9.13.0_vue@3.2.47:
+    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
+    dependencies:
+      vue-demi: 0.14.0_vue@3.2.47
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /acorn/8.8.2:
+    resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
+  /anymatch/3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  /async-validator/4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
+    dev: false
+
+  /asynckit/0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: false
+
+  /axios/1.4.0:
+    resolution: {integrity: sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==}
+    dependencies:
+      follow-redirects: 1.15.2
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+    dev: false
+
+  /balanced-match/1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    dev: true
+
+  /binary-extensions/2.2.0:
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+    engines: {node: '>=8'}
+
+  /brace-expansion/2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: true
+
+  /braces/3.0.2:
+    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
+    engines: {node: '>=8'}
+    dependencies:
+      fill-range: 7.0.1
+
+  /chokidar/3.5.3:
+    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.2
+
+  /combined-stream/1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+    dev: false
+
+  /copy-anything/2.0.6:
+    resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
+    dependencies:
+      is-what: 3.14.1
+    dev: true
+
+  /csstype/2.6.21:
+    resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
+
+  /dayjs/1.11.7:
+    resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==}
+    dev: false
+
+  /debug/3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: true
+    optional: true
+
+  /debug/4.3.4:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: true
+
+  /delayed-stream/1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+    dev: false
+
+  /element-plus/2.3.4_vue@3.2.47:
+    resolution: {integrity: sha512-SQr0J9z7N4z48WYk/l9NE2tizl8Q7j2OhqlpTc42k4pGncry3+rVX6dsmcsglFynn6vt3NzYxWJqmLFyDKQq+g==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@ctrl/tinycolor': 3.6.0
+      '@element-plus/icons-vue': 2.1.0_vue@3.2.47
+      '@floating-ui/dom': 1.2.7
+      '@popperjs/core': /@sxzz/popperjs-es/2.11.7
+      '@types/lodash': 4.14.194
+      '@types/lodash-es': 4.17.7
+      '@vueuse/core': 9.13.0_vue@3.2.47
+      async-validator: 4.2.5
+      dayjs: 1.11.7
+      escape-html: 1.0.3
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      lodash-unified: 1.0.3_tknf7errc3xdqocd3ryzzla7vq
+      memoize-one: 6.0.0
+      normalize-wheel-es: 1.2.0
+      vue: 3.2.47
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
+
+  /errno/0.1.8:
+    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      prr: 1.0.1
+    dev: true
+    optional: true
+
+  /esbuild/0.17.18:
+    resolution: {integrity: sha512-z1lix43jBs6UKjcZVKOw2xx69ffE2aG0PygLL5qJ9OS/gy0Ewd1gW/PUQIOIQGXBHWNywSc0floSKoMFF8aK2w==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.17.18
+      '@esbuild/android-arm64': 0.17.18
+      '@esbuild/android-x64': 0.17.18
+      '@esbuild/darwin-arm64': 0.17.18
+      '@esbuild/darwin-x64': 0.17.18
+      '@esbuild/freebsd-arm64': 0.17.18
+      '@esbuild/freebsd-x64': 0.17.18
+      '@esbuild/linux-arm': 0.17.18
+      '@esbuild/linux-arm64': 0.17.18
+      '@esbuild/linux-ia32': 0.17.18
+      '@esbuild/linux-loong64': 0.17.18
+      '@esbuild/linux-mips64el': 0.17.18
+      '@esbuild/linux-ppc64': 0.17.18
+      '@esbuild/linux-riscv64': 0.17.18
+      '@esbuild/linux-s390x': 0.17.18
+      '@esbuild/linux-x64': 0.17.18
+      '@esbuild/netbsd-x64': 0.17.18
+      '@esbuild/openbsd-x64': 0.17.18
+      '@esbuild/sunos-x64': 0.17.18
+      '@esbuild/win32-arm64': 0.17.18
+      '@esbuild/win32-ia32': 0.17.18
+      '@esbuild/win32-x64': 0.17.18
+    dev: true
+
+  /escape-html/1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+    dev: false
+
+  /escape-string-regexp/5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /estree-walker/2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  /fast-glob/3.2.12:
+    resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.5
+    dev: true
+
+  /fastq/1.15.0:
+    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
+    dependencies:
+      reusify: 1.0.4
+    dev: true
+
+  /fill-range/7.0.1:
+    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      to-regex-range: 5.0.1
+
+  /follow-redirects/1.15.2:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: false
+
+  /form-data/4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: false
+
+  /fsevents/2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /function-bind/1.1.1:
+    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
+    dev: true
+
+  /glob-parent/5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+    dependencies:
+      is-glob: 4.0.3
+
+  /graceful-fs/4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /has/1.0.3:
+    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
+    engines: {node: '>= 0.4.0'}
+    dependencies:
+      function-bind: 1.1.1
+    dev: true
+
+  /iconv-lite/0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: true
+    optional: true
+
+  /image-size/0.5.5:
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /immutable/4.3.0:
+    resolution: {integrity: sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==}
+
+  /is-binary-path/2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.2.0
+
+  /is-core-module/2.12.0:
+    resolution: {integrity: sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==}
+    dependencies:
+      has: 1.0.3
+    dev: true
+
+  /is-extglob/2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  /is-glob/4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
+
+  /is-number/7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  /is-what/3.14.1:
+    resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
+    dev: true
+
+  /jsonc-parser/3.2.0:
+    resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
+    dev: true
+
+  /klona/2.0.6:
+    resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
+    engines: {node: '>= 8'}
+
+  /less-loader/11.1.0_less@4.1.3:
+    resolution: {integrity: sha512-C+uDBV7kS7W5fJlUjq5mPBeBVhYpTIm5gB09APT9o3n/ILeaXVsiSFTbZpTJCJwQ/Crczfn3DmfQFwxYusWFug==}
+    engines: {node: '>= 14.15.0'}
+    peerDependencies:
+      less: ^3.5.0 || ^4.0.0
+      webpack: ^5.0.0
+    dependencies:
+      klona: 2.0.6
+      less: 4.1.3
+    dev: true
+
+  /less/4.1.3:
+    resolution: {integrity: sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      copy-anything: 2.0.6
+      parse-node-version: 1.0.1
+      tslib: 2.5.0
+    optionalDependencies:
+      errno: 0.1.8
+      graceful-fs: 4.2.11
+      image-size: 0.5.5
+      make-dir: 2.1.0
+      mime: 1.6.0
+      needle: 3.2.0
+      source-map: 0.6.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /local-pkg/0.4.3:
+    resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /lodash-es/4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
+  /lodash-unified/1.0.3_tknf7errc3xdqocd3ryzzla7vq:
+    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
+    peerDependencies:
+      '@types/lodash-es': '*'
+      lodash: '*'
+      lodash-es: '*'
+    dependencies:
+      '@types/lodash-es': 4.17.7
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+    dev: false
+
+  /lodash/4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: false
+
+  /magic-string/0.25.9:
+    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+    dependencies:
+      sourcemap-codec: 1.4.8
+
+  /magic-string/0.30.0:
+    resolution: {integrity: sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
+  /make-dir/2.1.0:
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.1
+    dev: true
+    optional: true
+
+  /memoize-one/6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+    dev: false
+
+  /merge2/1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /micromatch/4.0.5:
+    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
+    engines: {node: '>=8.6'}
+    dependencies:
+      braces: 3.0.2
+      picomatch: 2.3.1
+    dev: true
+
+  /mime-db/1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /mime-types/2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: false
+
+  /mime/1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /minimatch/7.4.6:
+    resolution: {integrity: sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
+  /minimatch/9.0.0:
+    resolution: {integrity: sha512-0jJj8AvgKqWN05mrwuqi8QYKx1WmYSUoKSxu5Qhs9prezTz10sxAHGNZe9J9cqIJzta8DWsleh2KaVaLl6Ru2w==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
+  /mitt/3.0.0:
+    resolution: {integrity: sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==}
+    dev: false
+
+  /mlly/1.2.0:
+    resolution: {integrity: sha512-+c7A3CV0KGdKcylsI6khWyts/CYrGTrRVo4R/I7u/cUsy0Conxa6LUhiEzVKIw14lc2L5aiO4+SeVe4TeGRKww==}
+    dependencies:
+      acorn: 8.8.2
+      pathe: 1.1.0
+      pkg-types: 1.0.2
+      ufo: 1.1.1
+    dev: true
+
+  /ms/2.1.2:
+    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+    dev: true
+
+  /nanoid/3.3.6:
+    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  /needle/3.2.0:
+    resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      debug: 3.2.7
+      iconv-lite: 0.6.3
+      sax: 1.2.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+    optional: true
+
+  /neo-async/2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+    dev: false
+
+  /normalize-path/3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  /normalize-wheel-es/1.2.0:
+    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
+    dev: false
+
+  /nprogress/0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+    dev: false
+
+  /parse-node-version/1.0.1:
+    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
+  /path-parse/1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    dev: true
+
+  /pathe/1.1.0:
+    resolution: {integrity: sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==}
+    dev: true
+
+  /picocolors/1.0.0:
+    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+
+  /picomatch/2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  /pify/4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+    dev: true
+    optional: true
+
+  /pkg-types/1.0.2:
+    resolution: {integrity: sha512-hM58GKXOcj8WTqUXnsQyJYXdeAPbythQgEF3nTcEo+nkD49chjQ9IKm/QJy9xf6JakXptz86h7ecP2024rrLaQ==}
+    dependencies:
+      jsonc-parser: 3.2.0
+      mlly: 1.2.0
+      pathe: 1.1.0
+    dev: true
+
+  /postcss/8.4.23:
+    resolution: {integrity: sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.6
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
+  /proxy-from-env/1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    dev: false
+
+  /prr/1.0.1:
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+    dev: true
+    optional: true
+
+  /queue-microtask/1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+    dev: true
+
+  /readdirp/3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+
+  /resolve/1.22.2:
+    resolution: {integrity: sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.12.0
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: true
+
+  /reusify/1.0.4:
+    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+    dev: true
+
+  /rollup/3.21.2:
+    resolution: {integrity: sha512-c4vC+JZ3bbF4Kqq2TtM7zSKtSyMybFOjqmomFax3xpfYaPZDZ4iz8NMIuBRMjnXOcKYozw7bC6vhJjiWD6JpzQ==}
+    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
+  /run-parallel/1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+    dependencies:
+      queue-microtask: 1.2.3
+    dev: true
+
+  /safer-buffer/2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+    dev: true
+    optional: true
+
+  /sass-loader/13.2.2_sass@1.62.1:
+    resolution: {integrity: sha512-nrIdVAAte3B9icfBiGWvmMhT/D+eCDwnk+yA7VE/76dp/WkHX+i44Q/pfo71NYbwj0Ap+PGsn0ekOuU1WFJ2AA==}
+    engines: {node: '>= 14.15.0'}
+    peerDependencies:
+      fibers: '>= 3.1.0'
+      node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+      sass: ^1.3.0
+      sass-embedded: '*'
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      fibers:
+        optional: true
+      node-sass:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+    dependencies:
+      klona: 2.0.6
+      neo-async: 2.6.2
+      sass: 1.62.1
+    dev: false
+
+  /sass/1.62.1:
+    resolution: {integrity: sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.0
+      source-map-js: 1.0.2
+
+  /sax/1.2.4:
+    resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
+    dev: true
+    optional: true
+
+  /scule/1.0.0:
+    resolution: {integrity: sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==}
+    dev: true
+
+  /semver/5.7.1:
+    resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
+    hasBin: true
+    dev: true
+    optional: true
+
+  /source-map-js/1.0.2:
+    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
+    engines: {node: '>=0.10.0'}
+
+  /source-map/0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  /sourcemap-codec/1.4.8:
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+    deprecated: Please use @jridgewell/sourcemap-codec instead
+
+  /strip-literal/1.0.1:
+    resolution: {integrity: sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==}
+    dependencies:
+      acorn: 8.8.2
+    dev: true
+
+  /supports-preserve-symlinks-flag/1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /to-fast-properties/2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+
+  /to-regex-range/5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+    dependencies:
+      is-number: 7.0.0
+
+  /tslib/2.5.0:
+    resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
+    dev: true
+
+  /ufo/1.1.1:
+    resolution: {integrity: sha512-MvlCc4GHrmZdAllBc0iUDowff36Q9Ndw/UzqmEKyrfSzokTd9ZCy1i+IIk5hrYKkjoYVQyNbrw7/F8XJ2rEwTg==}
+    dev: true
+
+  /unimport/3.0.6:
+    resolution: {integrity: sha512-GYxGJ1Bri1oqx8VFDjdgooGzeK7jBk3bvhXmamTIpu3nONOcUMGwZbX7X0L5RA7OWMXpR4vzpSQP7pXUzJg1/Q==}
+    dependencies:
+      '@rollup/pluginutils': 5.0.2
+      escape-string-regexp: 5.0.0
+      fast-glob: 3.2.12
+      local-pkg: 0.4.3
+      magic-string: 0.30.0
+      mlly: 1.2.0
+      pathe: 1.1.0
+      pkg-types: 1.0.2
+      scule: 1.0.0
+      strip-literal: 1.0.1
+      unplugin: 1.3.1
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
+  /unplugin-auto-import/0.15.3:
+    resolution: {integrity: sha512-RLT8SqbPn4bT7yBshZId0uPSofKWnwr66RyDaxWaFb/+f7OTDOWAsVNz+hOQLBWSjvbekr2xZY9ccS8TDHJbCQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@nuxt/kit': ^3.2.2
+      '@vueuse/core': '*'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@vueuse/core':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.7.2
+      '@rollup/pluginutils': 5.0.2
+      local-pkg: 0.4.3
+      magic-string: 0.30.0
+      minimatch: 9.0.0
+      unimport: 3.0.6
+      unplugin: 1.3.1
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
+  /unplugin-vue-components/0.24.1_vue@3.2.47:
+    resolution: {integrity: sha512-T3A8HkZoIE1Cja95xNqolwza0yD5IVlgZZ1PVAGvVCx8xthmjsv38xWRCtHtwl+rvZyL9uif42SRkDGw9aCfMA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.7.2
+      '@rollup/pluginutils': 5.0.2
+      chokidar: 3.5.3
+      debug: 4.3.4
+      fast-glob: 3.2.12
+      local-pkg: 0.4.3
+      magic-string: 0.30.0
+      minimatch: 7.4.6
+      resolve: 1.22.2
+      unplugin: 1.3.1
+      vue: 3.2.47
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
+  /unplugin/1.3.1:
+    resolution: {integrity: sha512-h4uUTIvFBQRxUKS2Wjys6ivoeofGhxzTe2sRWlooyjHXVttcVfV/JiavNd3d4+jty0SVV0dxGw9AkY9MwiaCEw==}
+    dependencies:
+      acorn: 8.8.2
+      chokidar: 3.5.3
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.5.0
+    dev: true
+
+  /vite/4.3.3_less@4.1.3+sass@1.62.1:
+    resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.17.18
+      less: 4.1.3
+      postcss: 8.4.23
+      rollup: 3.21.2
+      sass: 1.62.1
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
+  /vue-demi/0.14.0_vue@3.2.47:
+    resolution: {integrity: sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.2.47
+    dev: false
+
+  /vue-router/4.1.6_vue@3.2.47:
+    resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.5.0
+      vue: 3.2.47
+    dev: false
+
+  /vue/3.2.47:
+    resolution: {integrity: sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.47
+      '@vue/compiler-sfc': 3.2.47
+      '@vue/runtime-dom': 3.2.47
+      '@vue/server-renderer': 3.2.47_vue@3.2.47
+      '@vue/shared': 3.2.47
+
+  /vuex/4.1.0_vue@3.2.47:
+    resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.5.0
+      vue: 3.2.47
+    dev: false
+
+  /webpack-sources/3.2.3:
+    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
+    engines: {node: '>=10.13.0'}
+    dev: true
+
+  /webpack-virtual-modules/0.5.0:
+    resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
+    dev: true
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..58d26f2
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,145 @@
+<template>
+  <div id="container">
+    <header>
+      <Header
+          @enter.enter="onAnimationStart"
+          :class="{ [animationName]: $route.name === 'home' }"
+          :fixedToTop="$route.path === '/'"
+          ref="header"
+          :theme-color="themeColor"
+      ></Header>
+    </header>
+    <main>
+      <router-view v-slot="{ Component }" :key="$route.path">
+        <transition :name="animationName">
+          <component :is="Component"/>
+        </transition>
+      </router-view>
+    </main>
+    <footer v-if="$route.name !== 'products'">
+      <Footer></Footer>
+    </footer>
+  </div>
+
+</template>
+
+<script setup>
+import Header from "./components/header.vue";
+import Footer from "./components/footer.vue";
+import {ref, reactive, getCurrentInstance, computed, watch, onMounted} from "vue";
+import {useRoute} from 'vue-router'
+import EventBus from './helper/EventBus'
+
+const route = useRoute()
+const {proxy} = getCurrentInstance()
+
+const animationName = ref("slideInDown")
+const pageTransitionName = ref("")
+const homeScrollY = ref(0)
+
+onMounted(() => {
+  // window添加事件
+  window.addEventListener('scroll', menu)
+})
+
+// 监听鼠标滚动事件
+const menu = () => {
+  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+  // 滚动条滚动的距离
+  let scrollStep = scrollTop - homeScrollY.value;
+  // 更新——滚动前，滚动条距文档顶部的距离
+  homeScrollY.value = scrollTop;
+  if (scrollStep < 0) {
+    animationName.value = "slideInDown";
+  } else {
+    animationName.value = "slideOutUp";
+  }
+}
+
+EventBus.on("home-scrolling", (pos) => {
+  homeScrollY.value = pos.y
+})
+
+const themeColor = computed(() => {
+  return route.path === "/" ? homeScrollY.value < 400 ? "is-transparent" : "main-color" : "main-color"
+})
+
+watch(route, (newValue, oldValue) => {
+  pageTransitionName.value = ["products", "home"].includes(newValue.name)
+      ? ""
+      : "jumpPage";
+})
+
+const onAnimationStart = (e) => {
+  if (e.animationName === "slideInDown") {
+    e.target.style.top = 0;
+  } else {
+    e.target.style.top = -64;
+  }
+}
+
+</script>
+
+<style scoped lang="scss">
+@keyframes slideInDown {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOutUp {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+.slideInDown {
+  position: fixed;
+  top:0;
+  transition: all 0.4s;
+  //animation: slideInDown 0.4s;
+}
+
+.slideOutUp {
+  position: fixed;
+  top:-64px;
+  transition: all 0.4s;
+  //animation: slideOutUp 0.4s;
+}
+
+.jumpPage-leave-active {
+  display: none;
+}
+
+.jumpPage-enter {
+  transform: translate3d(0, 80px, 0);
+  opacity: 0;
+}
+
+.jumpPage-enter-active {
+  transition: all 0.3s;
+}
+
+#container {
+  min-width: 1200px;
+}
+
+footer {
+  //margin-top: 100px;
+}
+
+header {
+  position: relative;
+  z-index: 1000;
+}
+
+a {
+  text-decoration: none;
+}
+</style>
diff --git a/src/api/api.js b/src/api/api.js
new file mode 100644
index 0000000..70d3c28
--- /dev/null
+++ b/src/api/api.js
@@ -0,0 +1,18 @@
+/**
+ * 项目总api管理
+ */
+import request from "./request.js";
+
+export default {
+    login: (data) => request({
+        url: '/login/',
+        method: 'post',
+        data: data
+    }),
+
+    sign: (data) => request({
+      url: '/sign/',
+      method: 'post',
+      data: data
+    })
+}
\ No newline at end of file
diff --git a/src/api/config/index.js b/src/api/config/index.js
new file mode 100644
index 0000000..531dfd8
--- /dev/null
+++ b/src/api/config/index.js
@@ -0,0 +1,33 @@
+/**
+ * 环境配置文件
+ * 开发环境
+ * 生产环境
+ * 测试环境
+ */
+
+// 拿到当前环境
+const env = import.meta.env.MODE || 'development'
+
+const EnvConfig = {
+    development: {
+        baseApi: 'http://127.0.0.1:8000/api',
+        mockApi: 'https://www.fastmock.site/mock/3945196801b2b17aeb94fb84612b796a/api'
+    },
+
+    test: {
+        baseApi: '//test.future.com/api',
+        mockApi: 'https://www.fastmock.site/mock/3945196801b2b17aeb94fb84612b796a/api'
+    },
+
+    production: {
+        baseApi: '//production.future.com/api',
+        mockApi: 'https://www.fastmock.site/mock/3945196801b2b17aeb94fb84612b796a/api'
+    },
+}
+
+export default {
+    env,
+    // mock总开关
+    mock: false,
+    ...EnvConfig[env]
+}
\ No newline at end of file
diff --git a/src/api/request.js b/src/api/request.js
new file mode 100644
index 0000000..0320d5b
--- /dev/null
+++ b/src/api/request.js
@@ -0,0 +1,76 @@
+import axios from "axios";
+import config from "./config/index.js";
+
+// 引入进度条
+import nprogress from 'nprogress'
+
+// 引入nprogress的css样式
+import 'nprogress/nprogress.css'
+import store from "../store/index.js";
+
+const NETWORK_ERROR = '网络请求异常，后端未开启，请稍后重试......'
+
+// 创建一个axios实例对象
+const service = axios.create({
+    baseURL: config.baseApi,
+
+    // 超时时间
+    timeout: 5000
+})
+
+// 请求拦截器
+service.interceptors.request.use((request) => {
+    // 自定义headers
+    // 如果有userid，在请求头中添加
+    if (store.state.userid) {
+        request.headers.userid = store.state.userid
+    }
+
+    // jwt-token认证
+    // 如果有token，在请求头中添加
+    if (store.state.token) {
+        request.headers.token = store.state.token
+    }
+
+    nprogress.start()
+    return request
+})
+
+// 响应拦截器
+service.interceptors.response.use((response) => {
+    nprogress.done()
+    const {code, data, msg} = response.data
+    if (code === 200) {
+        return response.data
+    } else {
+        // 请求错误，返回错误信息
+        ElMessage.error(msg || NETWORK_ERROR)
+        return Promise.reject(msg || NETWORK_ERROR)
+    }
+})
+
+// 封装的核心函数
+function request(options) {
+    options.method = options.method || 'get'
+    if (options.method.toLowerCase() === 'get') {
+        options.params = options.data
+    }
+
+    // 对mock的处理
+    let isMock = config.mock
+    if (typeof options.mock !== 'undefined') {
+        isMock = options.mock
+    }
+
+    // 对线上环境的处理
+    if (config.env === 'production') {
+        // 拒绝使用mock
+        service.defaults.baseURL = config.baseApi
+    } else {
+        service.defaults.baseURL = isMock? config.mockApi : config.baseApi
+    }
+
+    return service(options)
+}
+
+export default request
diff --git a/src/assets/docs/img.png b/src/assets/docs/img.png
new file mode 100644
index 0000000..ada4119
Binary files /dev/null and b/src/assets/docs/img.png differ
diff --git a/src/assets/docs/img_1.png b/src/assets/docs/img_1.png
new file mode 100644
index 0000000..b23731d
Binary files /dev/null and b/src/assets/docs/img_1.png differ
diff --git a/src/assets/docs/img_2.png b/src/assets/docs/img_2.png
new file mode 100644
index 0000000..c330015
Binary files /dev/null and b/src/assets/docs/img_2.png differ
diff --git a/src/assets/docs/img_3.png b/src/assets/docs/img_3.png
new file mode 100644
index 0000000..1cebda7
Binary files /dev/null and b/src/assets/docs/img_3.png differ
diff --git a/src/assets/docs/img_4.png b/src/assets/docs/img_4.png
new file mode 100644
index 0000000..fa48576
Binary files /dev/null and b/src/assets/docs/img_4.png differ
diff --git a/src/assets/docs/img_5.png b/src/assets/docs/img_5.png
new file mode 100644
index 0000000..b4b06d9
Binary files /dev/null and b/src/assets/docs/img_5.png differ
diff --git a/src/assets/docs/img_6.png b/src/assets/docs/img_6.png
new file mode 100644
index 0000000..1d190d6
Binary files /dev/null and b/src/assets/docs/img_6.png differ
diff --git a/src/assets/docs/img_7.png b/src/assets/docs/img_7.png
new file mode 100644
index 0000000..ea0fb72
Binary files /dev/null and b/src/assets/docs/img_7.png differ
diff --git a/src/assets/docs/img_8.png b/src/assets/docs/img_8.png
new file mode 100644
index 0000000..52e6b9e
Binary files /dev/null and b/src/assets/docs/img_8.png differ
diff --git a/src/assets/docs/img_9.png b/src/assets/docs/img_9.png
new file mode 100644
index 0000000..ec08a47
Binary files /dev/null and b/src/assets/docs/img_9.png differ
diff --git a/src/assets/docs/preview.png b/src/assets/docs/preview.png
new file mode 100644
index 0000000..4d7229b
Binary files /dev/null and b/src/assets/docs/preview.png differ
diff --git a/src/assets/style/global.css b/src/assets/style/global.css
new file mode 100644
index 0000000..bbba31f
--- /dev/null
+++ b/src/assets/style/global.css
@@ -0,0 +1,13 @@
+.clearfix::before,
+.clearfix::after {
+  content: "";
+  display: table;
+  height: 0;
+  clear: both;
+}
+
+
+*{
+  user-select: none;
+  text-decoration: none;
+}
\ No newline at end of file
diff --git a/src/assets/style/mixin.less b/src/assets/style/mixin.less
new file mode 100644
index 0000000..a9967b1
--- /dev/null
+++ b/src/assets/style/mixin.less
@@ -0,0 +1,7 @@
+.text-overflow-visible-line(@num) {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  -webkit-line-clamp: @num;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/src/assets/style/reset.css b/src/assets/style/reset.css
new file mode 100644
index 0000000..723e25d
--- /dev/null
+++ b/src/assets/style/reset.css
@@ -0,0 +1,56 @@
+ul,
+li {
+  list-style: none;
+  /* padding:0; */
+  /* margin:0; */
+}
+div,
+ul,
+li,
+dl,
+dd,
+dt,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+main,
+section,
+aside,
+body {
+  margin: 0;
+  padding: 0;
+}
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+a:-webkit-any-link {
+  color: inherit;
+  text-decoration: none;
+}
+*:focus,
+input:focus,
+textarea:focus {
+  outline: none;
+}
+
+textarea,
+input[type="text"],
+input[type="password"] {
+  border-style: solid;
+  font-weight: 300;
+  outline: none;
+  border-width: 1px;
+  border-color: #dcdfe6;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+
+
+/* custom */
diff --git a/src/assets/style/variable.less b/src/assets/style/variable.less
new file mode 100644
index 0000000..71504bb
--- /dev/null
+++ b/src/assets/style/variable.less
@@ -0,0 +1,33 @@
+@main-color: #3370ff;
+@main-width: 1300px;
+
+@primary-text-color: #1f2329;
+@regular-text-color: #606266;
+@secondary-text-color: #909399;
+
+@border-dark-color: #34373b;
+@border-base-color: #dcdfe6;
+@border-light-color: #e4e7ed;
+@border-lighter-color: #ebeef5;
+@border-extralight-color: #f2f6fc;
+
+@bg-white-color: #fff;
+@bg-black-color: #000;
+@bg-base-color: #f5f7fa;
+
+@font-size-larger: 32px;
+@font-size-large: 22px;
+@font-size-medium: 18px;
+@font-size-base: 14px;
+@font-size-small: 12px;
+
+@font-weight-primary: 700;
+@font-weight-regular: 400;
+@font-weight-secondary: 100;
+
+@font-line-height-large: 32px;
+@font-line-height-primary: 24px;
+@font-line-height-secondary: 18px;
+
+@box-shadow-hover-color: rgba(136, 150, 171, 0.15);
+@box-shadow-dark-color: rgba(136, 150, 171, 0.5);
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
new file mode 100644
index 0000000..770e9d3
--- /dev/null
+++ b/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/Bytedance-Button.vue b/src/components/Bytedance-Button.vue
new file mode 100644
index 0000000..43d2b32
--- /dev/null
+++ b/src/components/Bytedance-Button.vue
@@ -0,0 +1,69 @@
+<template>
+  <div
+    class="bytedance-button"
+    :class="[
+      `bytedance-button-${size}`,
+      { 'bytedance-button-loading': loading }
+    ]"
+  >
+    <span>
+      <i class="el-icon-loading" v-if="loading"></i>
+      <slot>bytedance-button</slot>
+    </span>
+  </div>
+</template>
+<script setup>
+import {defineProps, toRefs} from 'vue'
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: "medium",
+    validator(value) {
+      return ["small", "medium", "large"].includes(value);
+    }
+  },
+  loading:{
+    type: Boolean
+  }
+})
+
+const {size, loading} = toRefs(props)
+</script>
+<style lang="less" scoped>
+.bytedance-button {
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: @main-color;
+  color: #fff;
+  overflow: hidden;
+  border-radius: 23px;
+  position: relative;
+  cursor: pointer;
+  .el-icon-loading {
+    margin-right: 5px;
+  }
+  &-loading {
+    pointer-events: none;
+  }
+  &:hover :after,
+  &-loading:after {
+    content: "";
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0.3);
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+  &-small {
+    height: 26px;
+  }
+  &-large {
+    height: 50px;
+  }
+}
+</style>
diff --git a/src/components/Checkbox-Transfer.vue b/src/components/Checkbox-Transfer.vue
new file mode 100644
index 0000000..51e16f8
--- /dev/null
+++ b/src/components/Checkbox-Transfer.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="checkbox">
+    <h2>{{ title }}</h2>
+
+    <ul class="checkbox-list">
+      <li class="checkbox-item" v-for="(item, index) in targetData" :key="index">
+        <input
+            @change="check(item, $event)"
+            type="checkbox"
+            :id="item[props.key]"
+            :checked="checked[index]"
+        />
+        <label :for="item[props.key]" class="label-text">
+          {{
+            item[props.label]
+          }}
+        </label>
+      </li>
+    </ul>
+    <div class="search" v-if="sourceData.length">
+      <input
+          @blur="onInputBlur"
+          @focus="focusing = true"
+          class="search-input"
+          :class="{ focusing }"
+          :placeholder="placeholder"
+          type="text"
+          v-model="filterKeyword"
+      />
+      <ul class="search-list" v-show="focusing">
+        <li
+            v-for="item in filterableData"
+            :key="item[props.key]"
+            class="search-item"
+            @click="addToTarget(item)"
+        >
+          <span>{{ item[props.label] }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script setup>
+import {defineProps, toRefs, ref, computed, watch, onMounted} from "vue";
+import EventBus from "../helper/EventBus/index.js";
+
+const focusing = ref(false)
+const filterKeyword = ref("")
+const targets = ref([])
+
+const prop = defineProps({
+  title: String,
+  targetCount: {
+    type: Number,
+    default: 5
+  },
+  data: {
+    type: Array,
+    default: () => []
+  },
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  props: {
+    type: Object,
+    default() {
+      return {
+        key: "key",
+        label: "label"
+      };
+    }
+  },
+})
+
+const {title, targetCount, data, modelValue, props} = toRefs(prop)
+
+// 计算属性
+const checked = computed(() => {
+  return targets.value.map(key => modelValue.value.includes(key))
+})
+
+const targetData = computed(() => {
+  return targets.value.map(key => {
+    return data.value.find(item => item[props.value.key] === key)
+  }).filter(item => item && item[props.value.key])
+})
+
+const sourceData = computed(() => {
+  return data.value.filter(
+      item => targets.value.indexOf(item[props.value.key]) === -1
+  );
+})
+
+const filterableData = computed(() => {
+  return sourceData.value.filter(item => {
+    return item[props.value.label].startsWith(filterKeyword.value);
+  });
+})
+
+const placeholder = computed(() => {
+  return !focusing.value ? "更多" : "搜索"
+})
+
+// 监视函数
+watch(data, (newValue, oldValue) => {
+
+})
+
+onMounted(() => {
+  changeTargets()
+})
+
+const changeTargets = () => {
+  targets.value = data.value.slice(0, 6).map(item => item[props.value.key]);
+  checked.value.length = targets.value.length;
+  modelValue.value.forEach(key => {
+    if (!targets.value.includes(key)) {
+      targets.value.push(key);
+      checked.value.push(true);
+    }
+  });
+}
+
+// 事件
+const clearChecked = () => {
+  for (let i = 0, l = modelValue.value.length; i < l; i++) {
+    modelValue.value.pop();
+  }
+}
+
+const onInputBlur = (e) => {
+  setTimeout(() => {
+    focusing.value = false;
+  }, 200);
+}
+
+const addToTarget = (item) => {
+  if (item[props.value.key]) {
+    targets.value.push(item[props.value.key]);
+    modelValue.value.push(item[props.value.key]);
+  }
+
+  filterKeyword.value = "";
+}
+
+const check = (item, e) => {
+  if (!e.target.checked) {
+    const delIndex = modelValue.value.indexOf(item[props.value.key]);
+    if (delIndex > -1) {
+      modelValue.value.splice(delIndex, 1);
+    }
+  } else {
+    if (!modelValue.value.includes(item[props.value.key])) {
+      modelValue.value.push(item[props.value.key]);
+    }
+  }
+
+  EventBus.emit("check", e.target.checked)
+  EventBus.emit("check", item[props.value.key])
+  EventBus.emit("input", modelValue.value)
+}
+</script>
+<style lang="less" scoped>
+.checkbox {
+  max-width: 200px;
+
+  h2 {
+    font-weight: @font-weight-regular;
+    margin-bottom: 12px;
+    color: black;
+    font-size: @font-size-large;
+  }
+
+  &-item {
+    margin-bottom: 8px;
+    // cursor: pointer;
+    input,
+    label {
+      cursor: pointer;
+    }
+
+    input {
+      transform: scale(1.4);
+    }
+
+    .label-text {
+      margin-left: 3px;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      border-color: @main-color;
+    }
+  }
+}
+
+.search {
+  position: relative;
+
+  &-placeholder {
+    cursor: pointer;
+    // border-bottom: 1px solid @border-lighter-color;
+  }
+
+  &-input {
+    border-width: 0 0 1px 0;
+    outline: none;
+    width: 100%;
+    padding: 5px;
+    border-color: @border-lighter-color;
+
+    &.focusing {
+      border-color: @main-color;
+    }
+  }
+
+  &-list {
+    padding-top: 10px;
+    position: absolute;
+
+    z-index: 10000;
+    background-color: #fff;
+    max-height: 300px;
+    width: 100%;
+    overflow: auto;
+    line-height: 34px;
+    box-shadow: 0 10px 30px 0 rgba(136, 150, 171, 0.15);
+  }
+
+  &-item {
+    padding: 0 20px;
+
+    &:hover {
+      cursor: pointer;
+      background: @bg-base-color;
+    }
+  }
+}
+</style>
diff --git a/src/components/File-Icon.vue b/src/components/File-Icon.vue
new file mode 100644
index 0000000..ad27c11
--- /dev/null
+++ b/src/components/File-Icon.vue
@@ -0,0 +1,104 @@
+<template functional>
+  <span class="">
+    <!--    v-if="props.fileType === 'ppt' || props.fileType === 'pptx'" -->
+    <!--  v-else-if="props.fileType === 'jpg' || props.fileType === 'jpeg' || props.fileType === 'png'" -->
+    <svg
+      v-if="props.fileType === 'ppt' || props.fileType === 'pptx'"
+      class="ppt_svg__icon"
+      viewBox="0 0 1024 1024"
+      width="200"
+      height="200"
+    >
+      <defs></defs>
+      <path
+        d="M238.933 85.333H638.72a34.133 34.133 0 0 1 23.79 9.643l180.48 175.309a34.133 34.133 0 0 1 10.343 24.49V870.4a68.267 68.267 0 0 1-68.266 68.267H238.933a68.267 68.267 0 0 1-68.266-68.267V153.6a68.267 68.267 0 0 1 68.266-68.267z"
+        fill="#F80"
+      ></path>
+      <path
+        d="M850.603 281.361H721.51a68.267 68.267 0 0 1-68.266-68.267V88.576a34.133 34.133 0 0 1 9.267 6.4l180.48 175.309a34.133 34.133 0 0 1 7.595 11.093z"
+        fill="#F9BA6C"
+      ></path>
+      <path
+        d="M443.017 643.857v150.204a8.84 8.84 0 0 1-8.841 8.84H404.48a8.84 8.84 0 0 1-8.84-8.84V439.38c0-4.88 3.959-8.84 8.84-8.84h132.147c24.576 0 44.97 2.765 61.235 8.362 16.436 5.632 29.577 13.483 39.356 23.552 9.728 10.07 16.555 21.675 20.429 34.8 3.755 12.714 5.632 26.043 5.632 39.935 0 21.095-4.472 38.742-13.517 52.788a97.877 97.877 0 0 1-34.696 32.802c-13.96 7.85-29.765 13.363-47.36 16.486a296.973 296.973 0 0 1-52.088 4.608h-72.601zm73.625-41.25c16.094 0 30.447-.99 43.076-2.936 12.186-1.877 22.409-5.358 30.72-10.41a50.057 50.057 0 0 0 18.705-20.07c4.455-8.551 6.759-20.054 6.759-34.475 0-20.907-6.81-36.267-20.412-46.712-13.892-10.683-36.744-16.213-68.608-16.213h-83.865v130.816h73.625z"
+        fill="#FFF"
+      ></path>
+    </svg>
+
+    <svg
+      v-else-if="
+        props.fileType === 'jpg' ||
+          props.fileType === 'jpeg' ||
+          props.fileType === 'png'
+      "
+      class="image_svg__icon"
+      viewBox="0 0 1024 1024"
+      width="200"
+      height="200"
+    >
+      <defs></defs>
+      <path
+        d="M238.933 85.333H638.72a34.133 34.133 0 0 1 23.79 9.643l180.48 175.309a34.133 34.133 0 0 1 10.343 24.49V870.4a68.267 68.267 0 0 1-68.266 68.267H238.933a68.267 68.267 0 0 1-68.266-68.267V153.6a68.267 68.267 0 0 1 68.266-68.267z"
+        fill="#FFC60A"
+      ></path>
+      <path
+        d="M850.603 281.361H720.828a68.267 68.267 0 0 1-68.267-68.267V88.27a34.133 34.133 0 0 1 9.95 6.707l180.48 175.309a34.133 34.133 0 0 1 7.595 11.093z"
+        fill="#F8E6AB"
+      ></path>
+      <path
+        d="M536.883 779.64H297.9a13.653 13.653 0 0 1-10.462-22.426L423.492 594.91a34.133 34.133 0 0 1 52.31 0l71.509 85.3 163.328-176.402a20.48 20.48 0 0 1 35.499 13.91v244.855a17.067 17.067 0 0 1-17.067 17.066H536.9zm-198.775-384h24.815a34.133 34.133 0 0 1 34.133 34.133v24.815a34.133 34.133 0 0 1-34.133 34.133h-24.815a34.133 34.133 0 0 1-34.134-34.133v-24.815a34.133 34.133 0 0 1 34.134-34.134z"
+        fill="#FFF"
+      ></path>
+    </svg>
+
+    <svg
+      v-else-if="props.fileType === 'docx' || props.fileType === 'doc'"
+      class="doc_svg__icon"
+      viewBox="0 0 1024 1024"
+      width="200"
+      height="200"
+    >
+      <defs></defs>
+      <path
+        d="M238.933 85.333h411.563a34.133 34.133 0 0 1 23.774 9.643l168.704 163.789a34.133 34.133 0 0 1 10.36 24.49V870.4a68.267 68.267 0 0 1-68.267 68.267H238.933a68.267 68.267 0 0 1-68.266-68.267V153.6a68.267 68.267 0 0 1 68.266-68.267z"
+        fill="#3370FF"
+      ></path>
+      <path
+        d="M850.603 269.824H733.867a68.267 68.267 0 0 1-68.267-68.267V88.867a34.133 34.133 0 0 1 8.67 6.126l168.704 163.789a34.133 34.133 0 0 1 7.612 11.076z"
+        fill="#82A7FC"
+      ></path>
+      <path
+        d="M512.188 518.758L449.894 749.33a9.506 9.506 0 0 1-9.181 7.032h-32.461a9.506 9.506 0 0 1-9.13-6.912l-83.61-295.186a9.506 9.506 0 0 1 9.147-12.083h30.823a9.514 9.514 0 0 1 9.199 7.117l60.125 232.55 62.447-232.618a9.506 9.506 0 0 1 9.165-7.049h31.573c4.301 0 8.073 2.902 9.182 7.049l62.038 232.584 60.108-232.499a9.506 9.506 0 0 1 9.216-7.117h30.806a9.506 9.506 0 0 1 9.148 12.084l-83.61 295.185a9.506 9.506 0 0 1-9.13 6.912h-32.462a9.506 9.506 0 0 1-9.164-7.032l-61.935-230.57z"
+        fill="#FFF"
+      ></path>
+    </svg>
+
+    <svg
+      v-else-if="props.fileType === 'pdf'"
+      class="pdf_svg__icon"
+      viewBox="0 0 1024 1024"
+      width="200"
+      height="200"
+    >
+      <defs></defs>
+      <path
+        d="M238.933 85.333H638.72a34.133 34.133 0 0 1 23.79 9.643l180.48 175.309a34.133 34.133 0 0 1 10.343 24.49V870.4a68.267 68.267 0 0 1-68.266 68.267H238.933a68.267 68.267 0 0 1-68.266-68.267V153.6a68.267 68.267 0 0 1 68.266-68.267z"
+        fill="#F54A45"
+      ></path>
+      <path
+        d="M850.603 281.361H720.828a68.267 68.267 0 0 1-68.267-68.267V88.27a34.133 34.133 0 0 1 9.95 6.707l180.48 175.309a34.133 34.133 0 0 1 7.595 11.093z"
+        fill="#F78E8B"
+      ></path>
+      <path
+        d="M748.834 671.266c-10.581-12.39-32.307-18.432-66.39-18.432-19.797 0-47.103.512-74.512 4.574-74.923-53.999-92.467-112.009-92.467-112.009s12.8-32.119 13.602-84.565c.512-33.16-4.745-57.89-18.142-68.523-5.718-4.522-13.995-8.311-22.358-8.311-6.519 0-12.629 1.877-17.612 5.495-38.946 28.092 3.584 160.547 4.71 164.08A1177.498 1177.498 0 0 1 410.3 686.915c-7.731 13.483-7.731 13.756-12.937 19.866 0 0-68.164 33.809-100.13 71.304-18.056 21.163-18.637 35.72-17.681 46.61 1.536 13.073 18.21 24.746 34.987 24.746.682 0 1.382 0 2.065-.051 17.066-1.024 36.01-5.734 57.105-25.685 15.274-14.456 32.46-53.692 54.545-92.075 63.351-17.784 119.108-30.43 165.837-37.65 34.27 18.177 85.248 38.776 119.944 38.776 11.64 0 21.01-2.338 27.836-6.963 8.175-5.512 11.64-12.39 13.79-25.122 2.167-12.749-.854-22.391-6.827-29.406zM674.355 691.2c31.642 0 48.777 5.58 57.566 10.257 2.73 1.45 4.693 2.85 6.093 4.01-2.475 1.93-7.356 4.353-16.18 4.353-14.608 0-33.791-6.195-57.207-18.45 3.328-.119 6.57-.17 9.728-.17zM492.63 412.058l.052-.137c4.949 3.652 7.236 29.184 6.775 44.015-.614 19.883-.768 27.563-3.26 39.765-6.758-25.463-7.253-71.236-3.584-83.626zm1.553 186.043c15.429 25.43 35.004 51.166 57.054 70.827-43.042 9.216-78.78 17.698-104.482 26.692a795.511 795.511 0 0 0 47.445-97.519zM320.41 813.483c3.89-5.752 14.523-16.913 41.506-38.503-14.473 33.366-30.737 38.503-45.858 46.541 1.143-2.645 2.577-5.41 4.352-8.021z"
+        fill="#FFF"
+      ></path>
+    </svg>
+  </span>
+</template>
+
+<style scoped>
+svg {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
new file mode 100644
index 0000000..f5e4f53
--- /dev/null
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
diff --git a/src/components/Input-Search.vue b/src/components/Input-Search.vue
new file mode 100644
index 0000000..1527f84
--- /dev/null
+++ b/src/components/Input-Search.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="input-search medium">
+    <input
+        ref="input"
+        type="text"
+        placeholder="输入城市或职位进行搜索"
+    />
+    <span class="input-search-button"><el-icon class="icons"><Search/></el-icon></span>
+  </div>
+</template>
+<script setup>
+
+</script>
+
+<style lang="less" scoped>
+.input-search {
+  margin-left: auto;
+  margin-right: auto;
+  height: 56px;
+  width: 420px;
+  min-width: 400px;
+  max-width: @main-width;
+  position: relative;
+  border-radius: 30px;
+  overflow: hidden;
+  border: 1px solid @main-color;
+  font-size: 16px;
+
+  ::-webkit-input-placeholder {
+    color: @secondary-text-color;
+  }
+
+  &.small {
+    height: 40px;
+    font-size: 14px;
+  }
+
+  &.large {
+    height: 60px;
+    font-size: 20px;
+  }
+
+  .prefix-icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 10px;
+    display: flex;
+    align-items: center;
+  }
+
+  input {
+    font-size: inherit;
+    height: 100%;
+    width: 100%;
+    line-height: 100%;
+    color: #1f2329;
+    border-color: transparent;
+    padding: 19px 0 19px 25px;
+  }
+
+  &-button {
+    background: #3370ff;
+    border: none;
+    color: white;
+    border-radius: 24px;
+    font-size: 20px;
+    line-height: 46px;
+    height: 48px;
+    width: 48px;
+    min-width: auto;
+    position: absolute;
+    right: 5px;
+    touch-action: manipulation;
+    user-select: none;
+    cursor: pointer;
+    transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    display: inline-block;
+    font-weight: normal;
+    white-space: nowrap;
+    text-align: center;
+    top: 4px;
+
+    &:hover {
+      // background: rgba(255, 255, 255, 0.5);
+      &::before {
+        position: absolute;
+        top: -1px;
+        right: -1px;
+        bottom: -1px;
+        left: -1px;
+        z-index: 1;
+        display: none;
+        background: #fff;
+        border-radius: inherit;
+        opacity: 0.35;
+        transition: opacity 0.2s;
+        content: '';
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+.el-icon {
+  fill: white;
+  position: absolute;
+  top: 14px;
+  left: 15px;
+}
+</style>
diff --git a/src/components/Loading/Loading.vue b/src/components/Loading/Loading.vue
new file mode 100644
index 0000000..92e1ae4
--- /dev/null
+++ b/src/components/Loading/Loading.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="bytedanceLoading">
+    <div class="bytedanceLoading__wrapper">
+      <!-- <div class="bytedanceLoading__background"></div> -->
+      <div class="bytedanceLoading__inner">
+        <div class="bytedanceLoading__inner-item"></div>
+        <div class="bytedanceLoading__inner-item"></div>
+        <div class="bytedanceLoading__inner-item"></div>
+        <div class="bytedanceLoading__inner-item"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {getCurrentInstance, ref} from "vue";
+
+const {proxy} = getCurrentInstance()
+const fullscreen = ref(false)
+const lock = ref(false)
+const emit = defineEmits(['destroy'])
+
+const close = () => {
+  proxy.$el.remove()
+  emit('destroy')
+}
+</script>
+
+<style lang="less">
+.directiveLoading {
+  &-parent {
+    position: relative;
+    &-visible {
+      // max-height: 100vh !important;
+      // overflow: hidden;
+      // min-height: 500px !important;
+    }
+  }
+}
+</style>
+<style lang="less">
+@height: 10px;
+@duration: 400ms;
+@itemWidth: 9px;
+@doubleHorizontalSpace: 2px;
+@longerHeight: 29px;
+@shorterHeight: 14px;
+
+@keyframes verticalDance {
+  0% {
+    transform: translate3d(0, @height, 0);
+  }
+  50% {
+    transform: translate3d(0, -@height, 0);
+  }
+  100% {
+    transform: translate3d(0, @height, 0);
+  }
+}
+
+.bytedanceLoading {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 1);
+  z-index: 100;
+  &-fullscreen {
+    position: fixed !important;
+  }
+
+  &__inner {
+    display: flex;
+    height: 20px;
+    &-item {
+      width: @itemWidth;
+      margin: 0 @doubleHorizontalSpace;
+      animation-name: verticalDance;
+      animation-duration: @duration;
+      animation-iteration-count: infinite;
+      &:first-child {
+        background-color: #2d5fb2;
+        height: @longerHeight;
+
+        animation-delay: -300ms;
+      }
+      &:nth-child(2) {
+        background-color: #3682c7;
+        height: @shorterHeight;
+        animation-delay: -400ms;
+      }
+      &:nth-child(3) {
+        animation-delay: -600ms;
+        background-color: #00bfc5;
+        height: @shorterHeight;
+      }
+      &:last-child {
+        animation-delay: -900ms;
+        background-color: #5acec6;
+        height: @longerHeight;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/Loading/main.js b/src/components/Loading/main.js
new file mode 100644
index 0000000..0b85a73
--- /dev/null
+++ b/src/components/Loading/main.js
@@ -0,0 +1,112 @@
+import {createApp} from 'vue'
+import Loading from "./Loading.vue";
+import App from '../../App.vue'
+
+const app = createApp(App)
+
+const LoadingCtor = app.component('loading', Loading);
+// const fullscreenLoading = new LoadingCtor();
+
+LoadingCtor.install = app => {
+  app.directive("loading", {
+    mounted: (el, binding, vnode, prevNode) => {
+      el.loading = new LoadingCtor();
+      el.loading.$mount();
+      el.appendChild(el.loading.$el);
+      el.classList.add("directiveLoading-parent");
+
+      if (binding.arg) {
+        el.loading.$el.style.backgroundColor = binding.arg;
+      }
+      if (binding.value) {
+        if (binding.modifiers.scrollFixed) {
+          const position = {
+            top:
+              el.getBoundingClientRect().top > 0
+                ? Math.abs(el.getBoundingClientRect().top)
+                : 0,
+            bottom:
+              el.getBoundingClientRect().bottom - window.innerHeight > 0
+                ? el.getBoundingClientRect().bottom - window.innerHeight
+                : 0
+          };
+          el.loading.$el.style.top = position.top + "px";
+          el.loading.$el.style.bottom = position.bottom + "px";
+        }
+        el.classList.add("directiveLoading-parent-visible");
+      } else {
+        el.loading.$el.style.setProperty("display", "none");
+      }
+    },
+
+    updated(el, { value, oldValue, ...binding }) {
+      if (value === oldValue) return;
+      app.nextTick(() => {
+        if (binding.modifiers.scrollFixed && value) {
+          const position = {
+            top:
+              el.getBoundingClientRect().top < 0
+                ? Math.abs(el.getBoundingClientRect().top)
+                : 0,
+            bottom:
+              el.getBoundingClientRect().bottom - window.innerHeight > 0
+                ? el.getBoundingClientRect().bottom - window.innerHeight
+                : 0
+          };
+          el.loading.$el.style.top = position.top + "px";
+          el.loading.$el.style.bottom = position.bottom + "px";
+        }
+      });
+
+      if (value) {
+        el.classList.add("directiveLoading-parent-visible");
+
+        el.loading.$el.style.removeProperty("display");
+      } else {
+        el.loading.$el.style.setProperty("display", "none");
+        el.classList.remove("directiveLoading-parent-visible");
+      }
+    },
+
+    unmounted(el, binding) {
+      el.loading.close();
+    }
+  });
+  const defaultOpts = { target: null, fullscreen: true, lock: false };
+  app.config.globalProperties.$loading = function(opts) {
+    opts = Object.assign({}, defaultOpts, opts);
+    let targetParent;
+    if (typeof opts.target === "string") {
+      try {
+        targetParent = document.querySelector(opts.target);
+      } catch (error) {
+        targetParent = document.body;
+      }
+    } else if (!opts.target instanceof HTMLElement) {
+      targetParent = document.body;
+    }
+
+    targetParent = opts.target || document.body;
+
+    targetParent.style.position = "relative";
+
+    const loadingIns = new LoadingCtor({ data: opts });
+    loadingIns.$mount();
+    targetParent.appendChild(loadingIns.$el);
+
+    if (Object.prototype.toString.call(opts.position) === "[object Object]") {
+      Object.keys(opts.position).forEach(prop => {
+        loadingIns.$el.style[prop] = opts.position[prop] + "px";
+      });
+    }
+    if (opts.background) {
+      loadingIns.$el.style.background = opts.background;
+    }
+    if (opts.fullscreen) {
+      loadingIns.$el.style.position = "fixed";
+    }
+
+    return loadingIns;
+  };
+};
+export default LoadingCtor;
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
new file mode 100644
index 0000000..ebe0cb3
--- /dev/null
+++ b/src/components/Logo.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="logo">
+    <svg v-if="isTransparent" width="197" height="35">
+      <defs>
+        <path id="logo-white_svg__a" d="M.424.45h5.404v7.767H.424z"/>
+        <path id="logo-white_svg__c" d="M.138.45h6.113v7.767H.138z"/>
+        <path id="logo-white_svg__e" d="M0 0h91.186v22.464H0z"/>
+        <path id="logo-white_svg__g" d="M.009.593h10.68v21.154H.01z"/>
+        <path id="logo-white_svg__i" d="M.313.27h18.54v14.706H.313z"/>
+      </defs>
+      <g fill="none" fill-rule="evenodd">
+        <path d="M-96-14h1440v64H-96z"/>
+        <g transform="translate(42.432 .175)">
+          <mask id="logo-white_svg__b" fill="#fff">
+            <use xlink:href="#logo-white_svg__a"/>
+          </mask>
+          <path
+              d="M1.601 4.777h1.434c.53 0 .934.101 1.199.302.26.197.387.48.387.868 0 .393-.13.681-.398.88-.274.202-.686.304-1.227.304H1.6V4.777zm2.19-1.358c-.227.193-.558.291-.983.291H1.6V1.496H2.74c.468 0 .822.095 1.052.282.226.186.336.457.336.83 0 .353-.11.62-.335.81zm.723.623c.22-.152.396-.337.527-.55a1.68 1.68 0 0 0 .25-.894c0-.387-.09-.74-.268-1.047a2.132 2.132 0 0 0-.777-.77 2.212 2.212 0 0 0-.752-.256A7.419 7.419 0 0 0 2.299.45H.424v7.768h2.848c.72 0 1.333-.214 1.818-.636.49-.426.738-.958.738-1.581 0-.5-.13-.928-.385-1.27-.22-.297-.533-.527-.929-.688z"
+              fill="#FFF"
+              mask="url(#logo-white_svg__b)"
+          />
+        </g>
+        <path
+            d="M56.173 1.727h-1.12v1.268h-2.121l-1.384 3.351a6.475 6.475 0 0 0-.131.371l-.13.392a18.178 18.178 0 0 0-.12-.406 3.24 3.24 0 0 0-.121-.356L49.68 2.995h-1.243l2.213 5.3-.956 2.255h1.145l2.892-6.585h1.321v3.25c0 .462.11.8.326 1.003.215.202.57.305 1.059.305h.615V7.45h-.581c-.109 0-.186-.024-.23-.073-.046-.052-.07-.144-.07-.274V3.965h.881v-.97h-.88V1.727zM59.228 4.268a1.67 1.67 0 0 1 1.115-.395c.425 0 .792.13 1.087.387.27.234.441.537.512.903H58.71c.065-.357.24-.657.518-.895m1.125-1.403c-.82 0-1.496.267-2.006.794-.509.526-.767 1.223-.767 2.071 0 .359.062.707.184 1.034.124.328.303.621.533.871.264.283.583.504.949.658.366.153.764.23 1.184.23.509 0 .972-.096 1.38-.285a3.374 3.374 0 0 0 1.123-.881L63 7.28l-.815-.654-.061.07c-.232.267-.49.47-.768.606a2.02 2.02 0 0 1-.895.203c-.497 0-.913-.142-1.236-.421a1.47 1.47 0 0 1-.516-.99h4.467v-.166c0-.911-.263-1.657-.779-2.216-.518-.563-1.206-.847-2.043-.847"
+            fill="#FFF"
+        />
+        <g transform="translate(64.272 .175)">
+          <mask id="logo-white_svg__d" fill="#fff">
+            <use xlink:href="#logo-white_svg__c"/>
+          </mask>
+          <path
+              d="M1.953 7.131h-.627V1.54h.627c1.029 0 1.812.236 2.328.702.513.464.773 1.169.773 2.094 0 .921-.26 1.625-.773 2.09-.516.468-1.3.705-2.328.705M5.107 1.44C4.352.782 3.24.449 1.803.449H.138v7.768h1.665c1.438 0 2.549-.333 3.304-.99.76-.66 1.144-1.632 1.144-2.891 0-1.263-.385-2.238-1.144-2.897"
+              fill="#FFF"
+              mask="url(#logo-white_svg__d)"
+          />
+        </g>
+        <path
+            d="M75.1 4.402c.32.333.48.765.48 1.284 0 .523-.16.956-.48 1.288-.318.33-.73.497-1.227.497-.496 0-.908-.167-1.226-.495-.32-.33-.48-.763-.48-1.29 0-.523.161-.956.48-1.286.318-.331.73-.498 1.226-.498.497 0 .909.168 1.227.5zm.5-.725a2.444 2.444 0 0 0-.71-.529 2.577 2.577 0 0 0-1.142-.254c-.817 0-1.484.258-1.984.77-.499.51-.751 1.187-.751 2.013 0 .38.064.74.19 1.066.127.327.318.624.568.884a2.735 2.735 0 0 0 1.977.833c.42 0 .797-.08 1.124-.24.248-.12.468-.288.66-.5v.673h1.114V2.995H75.6v.682zM80.074 2.894c-.304 0-.592.06-.856.18-.201.091-.398.22-.586.386v-.465h-1.104v5.397h1.104V5.41c0-.511.109-.898.323-1.148.21-.245.533-.37.96-.37.373 0 .638.112.81.34.174.235.262.619.262 1.14v3.02h1.115V5.28c0-.733-.182-1.32-.541-1.742-.363-.428-.863-.644-1.487-.644M86.566 6.967c-.14.177-.308.312-.504.402-.197.09-.428.136-.687.136-.482 0-.862-.164-1.163-.5-.3-.335-.452-.775-.452-1.309 0-.534.154-.977.456-1.316.305-.342.684-.507 1.159-.507.243 0 .463.04.651.12.188.08.357.206.504.374l.074.084.722-.834-.071-.064a2.583 2.583 0 0 0-.847-.518 2.996 2.996 0 0 0-1.033-.17c-.398 0-.768.066-1.1.197-.335.133-.632.33-.88.586a2.7 2.7 0 0 0-.6.924 3.077 3.077 0 0 0-.203 1.124c0 .4.068.778.203 1.122.134.345.336.655.599.92.247.254.543.45.88.584.336.134.707.201 1.1.201.385 0 .737-.06 1.045-.178.309-.119.606-.309.885-.564l.07-.064-.735-.844-.073.094zM89.474 4.268a1.67 1.67 0 0 1 1.115-.395c.426 0 .792.13 1.088.387.27.234.44.537.51.903h-3.231c.066-.357.24-.657.518-.895zm3.946 1.66c0-.911-.261-1.657-.778-2.216-.518-.563-1.205-.847-2.043-.847-.821 0-1.496.267-2.006.794-.51.526-.767 1.223-.767 2.071 0 .359.062.707.184 1.034.124.328.303.621.534.871.263.284.581.504.948.658.365.153.765.23 1.185.23.508 0 .972-.096 1.379-.285a3.38 3.38 0 0 0 1.123-.881l.066-.077-.814-.654-.062.07c-.232.267-.49.47-.768.606a2.015 2.015 0 0 1-.895.203c-.497 0-.912-.142-1.236-.421-.3-.26-.47-.584-.516-.99h4.466v-.166zM0 7.212v24.726h.002l5.427-1.394V8.606zM31.645 31.992l-5.429 1.394V5.764l5.429 1.394zM8.608 32.689l5.428-1.394V19.521l-5.428-1.394zM17.585 15.971l5.43-1.394V29.14l-5.43-1.394z"
+            fill="#FFF"
+        />
+        <g transform="translate(41.184 12.031)">
+          <mask id="logo-white_svg__f" fill="#fff">
+            <use xlink:href="#logo-white_svg__e"/>
+          </mask>
+          <path
+              fill="#FFF"
+              mask="url(#logo-white_svg__f)"
+              d="M70.24 3.06h8.544v-1.9h-8.545z"
+          />
+          <g mask="url(#logo-white_svg__f)">
+            <g transform="translate(80.496)">
+              <mask id="logo-white_svg__h" fill="#fff">
+                <use xlink:href="#logo-white_svg__g"/>
+              </mask>
+              <path
+                  d="M8.956 2.477H4.59L4.884.592H2.966l-.301 1.885H.278v1.9h2.118L.01 21.52h1.998L4.329 4.377h3.86a.6.6 0 0 1 .6.6v14.87H5.54v1.9h5.15V4.212c0-.957-.778-1.735-1.734-1.735"
+                  fill="#FFF"
+                  mask="url(#logo-white_svg__h)"
+              />
+            </g>
+            <path
+                d="M69.205 8.969h2.512l-1.87 12.552h7.977c.892 0 1.615-.723 1.615-1.615v-4.727h-1.9v3.664c0 .43-.349.778-.78.778h-4.642l1.524-10.652h6.177v-1.9H69.205v1.9zM58.09 7.71l-.605-5.235h-1.902l.605 5.235zM57.913 9.747H56.01l-.678 7.394h1.9zM67.124 2.474h-1.902l-.605 5.236h1.902zM64.621 9.747l.682 7.394h1.9l-.68-7.394z"
+                fill="#FFF"
+            />
+            <path
+                fill="#FFF"
+                d="M64.015.702h-1.9v21.126h4.989v-1.9h-3.089zM58.24 19.278a.65.65 0 0 1-.65.65h-1.644v1.9h2.46c.956 0 1.733-.778 1.733-1.73L60.783.703h-1.9l-.643 18.576zM52.633 3.287v4.46h-4.18V2.804h3.698c.266 0 .482.216.482.482zm-.642 10.743h2.542v-1.9h-2.542V9.646h2.542v-7.03c0-.943-.769-1.711-1.711-1.711h-6.268v8.74h3.538V18.9l-1.33.346v-8.197h-1.899v8.692l-1.061.276v1.963l8.91-2.32v-1.964l-2.72.709V14.03z"
+            />
+            <g transform="translate(23.712 7.488)">
+              <mask id="logo-white_svg__j" fill="#fff">
+                <use xlink:href="#logo-white_svg__i"/>
+              </mask>
+              <path
+                  d="M17.12.27H.312v1.901H4.82v12.805h1.9V2.171h9.662c.316 0 .573.256.573.572v9.08h-3.25v1.9h5.15V2.006c0-.957-.778-1.735-1.735-1.735"
+                  fill="#FFF"
+                  mask="url(#logo-white_svg__j)"
+              />
+            </g>
+            <path
+                fill="#FFF"
+                d="M39.757.702h-1.9v1.356h-9.122V.702h-1.9v1.356h-3.706v1.9h3.706v2.546h1.9V3.958h9.122v2.546h1.9V3.958h4.25v-1.9h-4.25zM19.289 2.058h-7.755V.702h-1.9v1.356H.524v3.926h1.899V3.958H18.62c.277 0 .502.224.502.501v1.525h1.9V3.792c0-.956-.778-1.734-1.734-1.734M17.352 9.269c.442-.419.584-1.09.353-1.671-.247-.618-.839-.972-1.626-.972H3.309v1.9H14.75c.122 0 .18.064.208.118a.363.363 0 0 1-.03.348l-3.893 3.588H.523v1.9H11.22v5.874H6.498v1.9h6.622V14.48h7.525v-1.9h-6.837c.698-.647 2.42-2.248 3.544-3.311"
+            />
+          </g>
+        </g>
+        <g fill="#FFF">
+          <path
+              d="M193 12a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4h-48a4 4 0 0 1-4-4V16a4 4 0 0 1 4-4h48zm-17.896 4.996h-5.348v1.232h.616v8.218l-.798.126.308 1.274a52.682 52.682 0 0 0 3.332-.826v2.422h1.232v-2.8c.182-.056.364-.126.56-.182v-1.288c-.182.07-.364.14-.56.196v-7.14h.658v-1.232zm-7.392 6.412h-6.65v6.006h1.316v-.49h4.018v.49h1.316v-6.006zm14.7-.084h-7.602v1.162h1.834l-.77 2.044h4.508c-.07.728-.168 1.19-.294 1.4-.154.182-.532.28-1.12.28-.504 0-1.078-.042-1.722-.112l.42 1.134c.462.056.98.098 1.568.098.91 0 1.526-.182 1.848-.518.308-.364.518-1.484.616-3.388h-4.186l.42-.938h4.48v-1.162zm-23.716-6.79h-1.316v2.45h-1.68v1.274h1.68v2.926c-.644.238-1.302.434-1.96.588l.364 1.386c.532-.196 1.064-.392 1.596-.602v3.01c0 .336-.182.504-.532.504a9.95 9.95 0 0 1-1.092-.07l.294 1.288h1.26c.924 0 1.386-.462 1.386-1.386v-3.92c.448-.224.91-.448 1.358-.7v-1.344c-.448.252-.896.476-1.358.7v-2.38h1.54v-1.274h-1.54v-2.45zm7.7 8.162v2.954h-4.018v-2.954h4.018zm6.818-.644v1.722c-.532.154-1.064.294-1.624.42v-2.142h1.624zm-5.264-7.056h-7.126v1.26h2.184c-.182.854-.434 1.554-.77 2.1-.42.616-1.036 1.176-1.862 1.68l.812 1.05c.98-.644 1.708-1.358 2.198-2.142.378-.672.686-1.568.924-2.688h2.352c-.028 1.484-.112 2.394-.224 2.744-.14.364-.448.546-.924.574-.28-.028-.644-.056-1.092-.084l.322 1.162c.406.042.756.07 1.064.07.77 0 1.316-.266 1.652-.798.308-.546.476-2.184.49-4.928zm5.264 4.158v1.694h-1.624v-1.694h1.624zm6.076-4.55h-1.218v1.008h-2.618v5.012h6.454v-5.012h-2.618v-1.008zm1.414 4.046v.91h-1.414v-.91h1.414zm-2.632 0v.91h-1.442v-.91h1.442zm-4.858-2.422v1.722h-1.624v-1.722h1.624zm4.858.462v.952h-1.442v-.952h1.442zm2.632 0v.952h-1.414v-.952h1.414z"
+          />
+        </g>
+      </g>
+    </svg>
+    <svg v-else width="197" height="35">
+      <defs>
+        <path id="logo-color_svg__a" d="M.424.45h5.404v7.767H.424z"/>
+        <path id="logo-color_svg__c" d="M.138.45h6.113v7.767H.138z"/>
+        <path id="logo-color_svg__e" d="M0 0h91.186v22.464H0z"/>
+        <path id="logo-color_svg__g" d="M.009.593h10.68v21.154H.01z"/>
+        <path id="logo-color_svg__i" d="M.313.27h18.54v14.706H.313z"/>
+      </defs>
+      <g fill="none" fill-rule="evenodd">
+        <g transform="translate(42.432 .175)">
+          <mask id="logo-color_svg__b" fill="#fff">
+            <use xlink:href="#logo-color_svg__a"/>
+          </mask>
+          <path
+              d="M1.601 4.777h1.434c.53 0 .934.101 1.199.302.26.197.387.48.387.868 0 .393-.13.681-.398.88-.274.202-.686.304-1.227.304H1.6V4.777zm2.19-1.358c-.227.193-.558.291-.983.291H1.6V1.496H2.74c.468 0 .822.095 1.052.282.226.186.336.457.336.83 0 .353-.11.62-.335.81zm.723.623c.22-.152.396-.337.527-.55a1.68 1.68 0 0 0 .25-.894c0-.387-.09-.74-.268-1.047a2.132 2.132 0 0 0-.777-.77 2.212 2.212 0 0 0-.752-.256A7.419 7.419 0 0 0 2.299.45H.424v7.768h2.848c.72 0 1.333-.214 1.818-.636.49-.426.738-.958.738-1.581 0-.5-.13-.928-.385-1.27-.22-.297-.533-.527-.929-.688z"
+              fill="#3960AC"
+              mask="url(#logo-color_svg__b)"
+          />
+        </g>
+        <path
+            d="M56.173 1.727h-1.12v1.268h-2.121l-1.384 3.351a6.475 6.475 0 0 0-.131.371l-.13.392a18.178 18.178 0 0 0-.12-.406 3.24 3.24 0 0 0-.121-.356L49.68 2.995h-1.243l2.213 5.3-.956 2.255h1.145l2.892-6.585h1.321v3.25c0 .462.11.8.326 1.003.215.202.57.305 1.059.305h.615V7.45h-.581c-.109 0-.186-.024-.23-.073-.046-.052-.07-.144-.07-.274V3.965h.881v-.97h-.88V1.727zM59.228 4.268a1.67 1.67 0 0 1 1.115-.395c.425 0 .792.13 1.087.387.27.234.441.537.512.903H58.71c.065-.357.24-.657.518-.895m1.125-1.403c-.82 0-1.496.267-2.006.794-.509.526-.767 1.223-.767 2.071 0 .359.062.707.184 1.034.124.328.303.621.533.871.264.283.583.504.949.658.366.153.764.23 1.184.23.509 0 .972-.096 1.38-.285a3.374 3.374 0 0 0 1.123-.881L63 7.28l-.815-.654-.061.07c-.232.267-.49.47-.768.606a2.02 2.02 0 0 1-.895.203c-.497 0-.913-.142-1.236-.421a1.47 1.47 0 0 1-.516-.99h4.467v-.166c0-.911-.263-1.657-.779-2.216-.518-.563-1.206-.847-2.043-.847"
+            fill="#3960AC"
+        />
+        <g transform="translate(64.272 .175)">
+          <mask id="logo-color_svg__d" fill="#fff">
+            <use xlink:href="#logo-color_svg__c"/>
+          </mask>
+          <path
+              d="M1.953 7.131h-.627V1.54h.627c1.029 0 1.812.236 2.328.702.513.464.773 1.169.773 2.094 0 .921-.26 1.625-.773 2.09-.516.468-1.3.705-2.328.705M5.107 1.44C4.352.782 3.24.449 1.803.449H.138v7.768h1.665c1.438 0 2.549-.333 3.304-.99.76-.66 1.144-1.632 1.144-2.891 0-1.263-.385-2.238-1.144-2.897"
+              fill="#3960AC"
+              mask="url(#logo-color_svg__d)"
+          />
+        </g>
+        <path
+            d="M75.1 4.402c.32.333.48.765.48 1.284 0 .523-.16.956-.48 1.288-.318.33-.73.497-1.227.497-.496 0-.908-.167-1.226-.495-.32-.33-.48-.763-.48-1.29 0-.523.161-.956.48-1.286.318-.331.73-.498 1.226-.498.497 0 .909.168 1.227.5zm.5-.725a2.444 2.444 0 0 0-.71-.529 2.577 2.577 0 0 0-1.142-.254c-.817 0-1.484.258-1.984.77-.499.51-.751 1.187-.751 2.013 0 .38.064.74.19 1.066.127.327.318.624.568.884a2.735 2.735 0 0 0 1.977.833c.42 0 .797-.08 1.124-.24.248-.12.468-.288.66-.5v.673h1.114V2.995H75.6v.682zM80.074 2.894c-.304 0-.592.06-.856.18-.201.091-.398.22-.586.386v-.465h-1.104v5.397h1.104V5.41c0-.511.109-.898.323-1.148.21-.245.533-.37.96-.37.373 0 .638.112.81.34.174.235.262.619.262 1.14v3.02h1.115V5.28c0-.733-.182-1.32-.541-1.742-.363-.428-.863-.644-1.487-.644M86.566 6.967c-.14.177-.308.312-.504.402-.197.09-.428.136-.687.136-.482 0-.862-.164-1.163-.5-.3-.335-.452-.775-.452-1.309 0-.534.154-.977.456-1.316.305-.342.684-.507 1.159-.507.243 0 .463.04.651.12.188.08.357.206.504.374l.074.084.722-.834-.071-.064a2.583 2.583 0 0 0-.847-.518 2.996 2.996 0 0 0-1.033-.17c-.398 0-.768.066-1.1.197-.335.133-.632.33-.88.586a2.7 2.7 0 0 0-.6.924 3.077 3.077 0 0 0-.203 1.124c0 .4.068.778.203 1.122.134.345.336.655.599.92.247.254.543.45.88.584.336.134.707.201 1.1.201.385 0 .737-.06 1.045-.178.309-.119.606-.309.885-.564l.07-.064-.735-.844-.073.094zM89.474 4.268a1.67 1.67 0 0 1 1.115-.395c.426 0 .792.13 1.088.387.27.234.44.537.51.903h-3.231c.066-.357.24-.657.518-.895zm3.946 1.66c0-.911-.261-1.657-.778-2.216-.518-.563-1.205-.847-2.043-.847-.821 0-1.496.267-2.006.794-.51.526-.767 1.223-.767 2.071 0 .359.062.707.184 1.034.124.328.303.621.534.871.263.284.581.504.948.658.365.153.765.23 1.185.23.508 0 .972-.096 1.379-.285a3.38 3.38 0 0 0 1.123-.881l.066-.077-.814-.654-.062.07c-.232.267-.49.47-.768.606a2.015 2.015 0 0 1-.895.203c-.497 0-.912-.142-1.236-.421-.3-.26-.47-.584-.516-.99h4.466v-.166zM0 7.212v24.726h.002l5.427-1.394V8.606z"
+            fill="#3960AC"
+        />
+        <path
+            fill="#79CBC6"
+            d="M31.645 31.992l-5.429 1.394V5.764l5.429 1.394z"
+        />
+        <path
+            fill="#4882C2"
+            d="M8.608 32.689l5.428-1.394V19.521l-5.428-1.394z"
+        />
+        <path fill="#2CBDC3" d="M17.585 15.971l5.43-1.394V29.14l-5.43-1.394z"/>
+        <g transform="translate(41.184 12.031)">
+          <mask id="logo-color_svg__f" fill="#fff">
+            <use xlink:href="#logo-color_svg__e"/>
+          </mask>
+          <path
+              fill="#3960AC"
+              mask="url(#logo-color_svg__f)"
+              d="M70.24 3.06h8.544v-1.9h-8.545z"
+          />
+          <g mask="url(#logo-color_svg__f)">
+            <g transform="translate(80.496)">
+              <mask id="logo-color_svg__h" fill="#fff">
+                <use xlink:href="#logo-color_svg__g"/>
+              </mask>
+              <path
+                  d="M8.956 2.477H4.59L4.884.592H2.966l-.301 1.885H.278v1.9h2.118L.01 21.52h1.998L4.329 4.377h3.86a.6.6 0 0 1 .6.6v14.87H5.54v1.9h5.15V4.212c0-.957-.778-1.735-1.734-1.735"
+                  fill="#3960AC"
+                  mask="url(#logo-color_svg__h)"
+              />
+            </g>
+            <path
+                d="M69.205 8.969h2.512l-1.87 12.552h7.977c.892 0 1.615-.723 1.615-1.615v-4.727h-1.9v3.664c0 .43-.349.778-.78.778h-4.642l1.524-10.652h6.177v-1.9H69.205v1.9zM58.09 7.71l-.605-5.235h-1.902l.605 5.235zM57.913 9.747H56.01l-.678 7.394h1.9zM67.124 2.474h-1.902l-.605 5.236h1.902zM64.621 9.747l.682 7.394h1.9l-.68-7.394z"
+                fill="#3960AC"
+            />
+            <path
+                fill="#3960AC"
+                d="M64.015.702h-1.9v21.126h4.989v-1.9h-3.089zM58.24 19.278a.65.65 0 0 1-.65.65h-1.644v1.9h2.46c.956 0 1.733-.778 1.733-1.73L60.783.703h-1.9l-.643 18.576zM52.633 3.287v4.46h-4.18V2.804h3.698c.266 0 .482.216.482.482zm-.642 10.743h2.542v-1.9h-2.542V9.646h2.542v-7.03c0-.943-.769-1.711-1.711-1.711h-6.268v8.74h3.538V18.9l-1.33.346v-8.197h-1.899v8.692l-1.061.276v1.963l8.91-2.32v-1.964l-2.72.709V14.03z"
+            />
+            <g transform="translate(23.712 7.488)">
+              <mask id="logo-color_svg__j" fill="#fff">
+                <use xlink:href="#logo-color_svg__i"/>
+              </mask>
+              <path
+                  d="M17.12.27H.312v1.901H4.82v12.805h1.9V2.171h9.662c.316 0 .573.256.573.572v9.08h-3.25v1.9h5.15V2.006c0-.957-.778-1.735-1.735-1.735"
+                  fill="#3960AC"
+                  mask="url(#logo-color_svg__j)"
+              />
+            </g>
+            <path
+                fill="#3960AC"
+                d="M39.757.702h-1.9v1.356h-9.122V.702h-1.9v1.356h-3.706v1.9h3.706v2.546h1.9V3.958h9.122v2.546h1.9V3.958h4.25v-1.9h-4.25zM19.289 2.058h-7.755V.702h-1.9v1.356H.524v3.926h1.899V3.958H18.62c.277 0 .502.224.502.501v1.525h1.9V3.792c0-.956-.778-1.734-1.734-1.734M17.352 9.269c.442-.419.584-1.09.353-1.671-.247-.618-.839-.972-1.626-.972H3.309v1.9H14.75c.122 0 .18.064.208.118a.363.363 0 0 1-.03.348l-3.893 3.588H.523v1.9H11.22v5.874H6.498v1.9h6.622V14.48h7.525v-1.9h-6.837c.698-.647 2.42-2.248 3.544-3.311"
+            />
+          </g>
+        </g>
+        <g>
+          <path
+              d="M145 12h48a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4h-48a4 4 0 0 1-4-4V16a4 4 0 0 1 4-4z"
+              fill="#F0F4FF"
+          />
+          <path
+              d="M157.31 29.288c.924 0 1.386-.462 1.386-1.386v-3.92c.448-.224.91-.448 1.358-.7v-1.344c-.448.252-.896.476-1.358.7v-2.38h1.54v-1.274h-1.54v-2.45h-1.316v2.45h-1.68v1.274h1.68v2.926c-.644.238-1.302.434-1.96.588l.364 1.386c.532-.196 1.064-.392 1.596-.602v3.01c0 .336-.182.504-.532.504a9.95 9.95 0 0 1-1.092-.07l.294 1.288h1.26zm3.878-6.202c.98-.644 1.708-1.358 2.198-2.142.378-.672.686-1.568.924-2.688h2.352c-.028 1.484-.112 2.394-.224 2.744-.14.364-.448.546-.924.574-.28-.028-.644-.056-1.092-.084l.322 1.162c.406.042.756.07 1.064.07.77 0 1.316-.266 1.652-.798.308-.546.476-2.184.49-4.928h-7.126v1.26h2.184c-.182.854-.434 1.554-.77 2.1-.42.616-1.036 1.176-1.862 1.68l.812 1.05zm1.19 6.328v-.49h4.018v.49h1.316v-6.006h-6.65v6.006h1.316zm4.018-1.764h-4.018v-2.954h4.018v2.954zm15.512-5.026v-5.012h-2.618v-1.008h-1.218v1.008h-2.618v5.012h6.454zm-7.462 6.818v-2.8c.182-.056.364-.126.56-.182v-1.288c-.182.07-.364.14-.56.196v-7.14h.658v-1.232h-5.348v1.232h.616v8.218l-.798.126.308 1.274a52.682 52.682 0 0 0 3.332-.826v2.422h1.232zm-1.232-9.492h-1.624v-1.722h1.624v1.722zm4.858-.308h-1.442v-.952h1.442v.952zm2.632 0h-1.414v-.952h1.414v.952zm0 1.918h-1.414v-.91h1.414v.91zm-2.632 0h-1.442v-.91h1.442v.91zm-4.858 1.288h-1.624v-1.694h1.624v1.694zm6.02 6.482c.91 0 1.526-.182 1.848-.518.308-.364.518-1.484.616-3.388h-4.186l.42-.938h4.48v-1.162h-7.602v1.162h1.834l-.77 2.044h4.508c-.07.728-.168 1.19-.294 1.4-.154.182-.532.28-1.12.28-.504 0-1.078-.042-1.722-.112l.42 1.134c.462.056.98.098 1.568.098zm-7.644-3.136v-2.142h1.624v1.722c-.532.154-1.064.294-1.624.42z"
+              fill="#325AB4"
+              fill-rule="nonzero"
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+</template>
+<script setup>
+import {defineProps, toRefs} from 'vue'
+
+const props = defineProps({
+  isTransparent: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const {isTransparent} = toRefs(props)
+
+
+</script>
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
new file mode 100644
index 0000000..4278f0f
--- /dev/null
+++ b/src/components/Pagination.vue
@@ -0,0 +1,128 @@
+<template>
+  <div v-if="visiblePagers.length" class="pagination">
+    <ul class="pagination-list">
+      <li
+          title="上一页"
+          @click="$emit('update:currentPage', Math.max(1, currentPage - 1))"
+          class="pagination-item"
+          :class="{ disabled: currentPage === 1 }"
+      >
+        <span><</span>
+      </li>
+      <li
+          class="pagination-item"
+          :class="{ current: currentPage === item }"
+          v-for="(item, index) in visiblePagers"
+          @click="change(item)"
+          :key="index"
+      >
+        <span>{{ item }}</span>
+      </li>
+      <li
+          title="下一页"
+          @click="
+          $emit('update:currentPage', Math.min(totalPage, currentPage + 1))
+        "
+          class="pagination-item"
+          :class="{ disabled: currentPage === totalPage }"
+      >
+        <span>></span>
+      </li>
+    </ul>
+  </div>
+</template>
+<script setup>
+import {ref, defineProps, toRefs, computed} from "vue";
+import EventBus from "../helper/EventBus/index.js";
+
+const props = defineProps({
+  total: Number,
+  perPage: {
+    type: Number,
+    default: 10
+  },
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  pagerCount: {
+    type: Number,
+    default: 9
+  }
+})
+
+const {total, perPage, currentPage, pagerCount} = toRefs(props)
+// 计算属性
+const totalPage = computed(() => {
+  return Math.ceil(parseInt(total.value) / perPage.value);
+})
+
+const visiblePagers = () => {
+  let pages = [];
+  const currentPage = Math.max(
+      1,
+      Math.min(currentPage.value, totalPage.value)
+  );
+
+  if (totalPage.value <= pagerCount.value) {
+    for (let i = 1; i <= totalPage.value; i++) {
+      pages.push(i);
+    }
+    return pages;
+  }
+
+  if (currentPage.value >= totalPage.value - 3) {
+    pages.push(1, "...");
+    const minPage = Math.min(currentPage.value - 2, totalPage.value - 4);
+    for (let i = minPage, len = totalPage.value; i <= len; i++) {
+      pages.push(i);
+    }
+  } else if (currentPage.value <= 4) {
+    const maxPage = Math.min(Math.max(currentPage.value + 2, 5), totalPage.value);
+    for (let i = 1; i <= maxPage; i++) {
+      pages.push(i);
+    }
+    pages.push("...", totalPage.value);
+  } else {
+    pages.push(1, "...");
+    for (let i = currentPage.value - 2; i <= currentPage.value + 2; i++) {
+      pages.push(i);
+    }
+    pages.push("...", totalPage.value);
+  }
+  return pages;
+}
+
+const change = (num) => {
+  if (typeof num !== "number" ) {
+    return
+  }
+  EventBus.emit("current-change", num)
+  EventBus.emit("update:currentPage", num)
+}
+</script>
+<style lang="less" scoped>
+.pagination-list {
+  display: flex;
+}
+
+.pagination-item {
+  margin-right: 12px;
+  cursor: pointer;
+  padding: 8px;
+
+  &.disabled {
+    cursor: not-allowed;
+
+    color: #ccc !important;
+  }
+
+  &:hover {
+    color: @main-color;
+  }
+
+  &.current {
+    color: @main-color;
+  }
+}
+</style>
diff --git a/src/components/footer.vue b/src/components/footer.vue
new file mode 100644
index 0000000..1bf03d7
--- /dev/null
+++ b/src/components/footer.vue
@@ -0,0 +1,268 @@
+<template>
+  <div class="footer">
+    <div class="footer-content-column">
+      <logo :is-transparent="true"></logo>
+      <p class="title">© 2012-2020 北京字节跳动科技有限公司</p>
+      <p class="title">京公网安备 11000002002023号 I 京ICP备12025439号-3</p>
+    </div>
+    <div class="footer-content-column">
+      <div class="title">联系我们</div>
+      <p>关于投递</p>
+      <p>关于投递</p>
+    </div>
+    <div class="footer-content-column">
+      <div class="title">企业官网</div>
+      <p>字节跳动</p>
+    </div>
+    <div class="footer-content-column">
+      <div class="title">实时动态与招聘信息，请关注我们</div>
+      <ul class="footer-content-column__contact">
+        <!-- <li class="contact-item wechat">
+          <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+        </li>-->
+        <li class="contact-item wechat">
+          <svg width="33" height="32">
+            <defs>
+              <path id="icon-wechat_svg__a" d="M0 0h1440v251H0z" />
+            </defs>
+            <g fill="none" fill-rule="evenodd">
+              <path fill="#FFF" d="M-1120-7901H320V126h-1440z" />
+              <use
+                fill="#1F2329"
+                fill-rule="nonzero"
+                transform="translate(-1120 -125)"
+                xlink:href="#icon-wechat_svg__a"
+              />
+              <g transform="translate(.5)">
+                <rect width="32" height="32" fill="#2EA121" rx="16" />
+                <path
+                  fill="#FFF"
+                  d="M21.714 17.68a.798.798 0 0 0 .786-.808.798.798 0 0 0-.786-.809.798.798 0 0 0-.787.809c0 .446.352.809.787.809zm-3.84 0a.798.798 0 0 0 .786-.808.798.798 0 0 0-.786-.809.798.798 0 0 0-.787.809c0 .446.352.809.787.809zm-2.198-4.685a.939.939 0 0 0 .925-.952.939.939 0 0 0-.925-.95.939.939 0 0 0-.925.95c0 .526.414.952.925.952zm-4.65 0a.939.939 0 0 0 .926-.952.939.939 0 0 0-.925-.95.939.939 0 0 0-.926.95c0 .526.414.952.926.952zm11.078 10.184a.4.4 0 0 0-.325-.038 6.65 6.65 0 0 1-1.974.296c-3.2 0-5.794-2.226-5.794-4.972 0-2.745 2.594-4.97 5.794-4.97 3.2 0 5.795 2.225 5.795 4.97 0 1.517-.792 2.875-2.04 3.787a.308.308 0 0 0-.114.324l.273 1.07c.082.32-.08.447-.358.28l-1.257-.747zm-11.088-3.61a8.012 8.012 0 0 0 2.721.339 4.676 4.676 0 0 1-.235-1.466c0-2.995 2.853-5.423 6.373-5.423.123 0 .245.003.366.008C19.72 10.18 16.838 8 13.363 8 9.517 8 6.4 10.668 6.4 13.958c0 1.81.942 3.43 2.43 4.522a.43.43 0 0 1 .159.455l-.327 1.256c-.1.379.09.527.42.329l1.49-.895a.549.549 0 0 1 .444-.056z"
+                />
+              </g>
+            </g>
+          </svg>
+        </li>
+        <li class="contact-item douyin">
+          <svg width="33" height="34">
+            <defs>
+              <path id="icon-douyin_svg__a" d="M0 0h1440v251H0z" />
+              <filter
+                id="icon-douyin_svg__b"
+                width="537.5%"
+                height="520%"
+                x="-218.8%"
+                y="-210%"
+                filterUnits="objectBoundingBox"
+              >
+                <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
+                <feGaussianBlur
+                  in="shadowOffsetOuter1"
+                  result="shadowBlurOuter1"
+                  stdDeviation="12.5"
+                />
+                <feColorMatrix
+                  in="shadowBlurOuter1"
+                  result="shadowMatrixOuter1"
+                  values="0 0 0 0 0.121568627 0 0 0 0 0.137254902 0 0 0 0 0.160784314 0 0 0 0.1 0"
+                />
+                <feMerge>
+                  <feMergeNode in="shadowMatrixOuter1" />
+                  <feMergeNode in="SourceGraphic" />
+                </feMerge>
+              </filter>
+            </defs>
+            <g fill="none" fill-rule="evenodd">
+              <path fill="#FFF" d="M-1175-7900H265V127h-1440z" />
+              <use
+                fill="#1F2329"
+                fill-rule="nonzero"
+                transform="translate(-1175 -124)"
+                xlink:href="#icon-douyin_svg__a"
+              />
+              <g transform="translate(.5 1)">
+                <circle cx="16" cy="16" r="16" fill="#000" stroke="#000" />
+                <g filter="url(#icon-douyin_svg__b)" transform="translate(4 4)">
+                  <path
+                    fill="#00F7EF"
+                    d="M10.385 10.126v-.773a6.04 6.04 0 0 0-.813-.059c-3.326 0-6.031 2.697-6.031 6.01a6 6 0 0 0 2.575 4.922 5.976 5.976 0 0 1-1.62-4.093c0-3.266 2.629-5.93 5.89-6.007"
+                  />
+                  <path
+                    fill="#00F7EF"
+                    d="M10.528 18.878a2.751 2.751 0 0 0 2.749-2.641l.005-13.087h2.4a4.532 4.532 0 0 1-.078-.83h-3.277l-.005 13.088a2.751 2.751 0 0 1-4.028 2.326 2.753 2.753 0 0 0 2.234 1.144m9.635-11.287v-.727a4.542 4.542 0 0 1-2.483-.736 4.565 4.565 0 0 0 2.483 1.463"
+                  />
+                  <path
+                    fill="#FF004F"
+                    d="M17.68 6.128a4.513 4.513 0 0 1-1.12-2.978h-.879a4.551 4.551 0 0 0 2 2.978M9.572 12.56a2.753 2.753 0 0 0-2.754 2.745c0 1.054.6 1.97 1.477 2.43a2.72 2.72 0 0 1-.522-1.602 2.753 2.753 0 0 1 2.755-2.745c.283 0 .555.047.812.127v-3.334a6.04 6.04 0 0 0-.812-.058c-.048 0-.095.002-.143.003v2.56a2.721 2.721 0 0 0-.813-.126"
+                  />
+                  <path
+                    fill="#FF004F"
+                    d="M20.163 7.591v2.538a7.813 7.813 0 0 1-4.559-1.46v6.636c0 3.314-2.706 6.01-6.032 6.01a6.01 6.01 0 0 1-3.456-1.089 6.025 6.025 0 0 0 4.411 1.918c3.326 0 6.032-2.696 6.032-6.01V9.496a7.812 7.812 0 0 0 4.56 1.461V7.693c-.328 0-.647-.036-.956-.102"
+                  />
+                  <path
+                    fill="#FFF"
+                    d="M15.604 15.305V8.669a7.813 7.813 0 0 0 4.56 1.46V7.591a4.565 4.565 0 0 1-2.484-1.463 4.552 4.552 0 0 1-1.999-2.978h-2.399l-.005 13.087a2.752 2.752 0 0 1-4.983 1.497 2.745 2.745 0 0 1-1.476-2.43 2.753 2.753 0 0 1 2.754-2.744c.284 0 .556.046.813.127v-2.56c-3.26.075-5.89 2.74-5.89 6.006 0 1.58.617 3.019 1.62 4.093a6.01 6.01 0 0 0 3.457 1.09c3.326 0 6.032-2.697 6.032-6.011"
+                  />
+                </g>
+              </g>
+            </g>
+          </svg>
+        </li>
+        <li class="contact-item toutiao">
+          <svg width="33" height="32">
+            <defs>
+              <path id="icon-toutiao_svg__a" d="M0 0h1440v251H0z" />
+              <circle id="icon-toutiao_svg__b" cx="16" cy="16" r="16" />
+              <filter
+                id="icon-toutiao_svg__c"
+                width="428.1%"
+                height="428.1%"
+                x="-164.1%"
+                y="-164.1%"
+                filterUnits="objectBoundingBox"
+              >
+                <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
+                <feGaussianBlur
+                  in="shadowOffsetOuter1"
+                  result="shadowBlurOuter1"
+                  stdDeviation="12.5"
+                />
+                <feColorMatrix
+                  in="shadowBlurOuter1"
+                  result="shadowMatrixOuter1"
+                  values="0 0 0 0 0.121568627 0 0 0 0 0.137254902 0 0 0 0 0.160784314 0 0 0 0.1 0"
+                />
+                <feMerge>
+                  <feMergeNode in="shadowMatrixOuter1" />
+                  <feMergeNode in="SourceGraphic" />
+                </feMerge>
+              </filter>
+              <path id="icon-toutiao_svg__e" d="M0 0h32v32H0z" />
+            </defs>
+            <g fill="none" fill-rule="evenodd">
+              <path fill="#FFF" d="M-1229-7901H211V126h-1440z" />
+              <use
+                fill="#1F2329"
+                fill-rule="nonzero"
+                transform="translate(-1229 -125)"
+                xlink:href="#icon-toutiao_svg__a"
+              />
+              <g transform="translate(.5)">
+                <mask id="icon-toutiao_svg__d" fill="#fff">
+                  <use xlink:href="#icon-toutiao_svg__b" />
+                </mask>
+                <use fill="#FFF" xlink:href="#icon-toutiao_svg__b" />
+                <g filter="url(#icon-toutiao_svg__c)" mask="url(#icon-toutiao_svg__d)">
+                  <mask id="icon-toutiao_svg__f" fill="#fff">
+                    <use xlink:href="#icon-toutiao_svg__e" />
+                  </mask>
+                  <path
+                    fill="#FFF"
+                    d="M26.308 32H5.692A5.699 5.699 0 0 1 0 26.307V5.692A5.699 5.699 0 0 1 5.692 0h20.616A5.698 5.698 0 0 1 32 5.692v20.615A5.699 5.699 0 0 1 26.308 32"
+                    mask="url(#icon-toutiao_svg__f)"
+                  />
+                  <path
+                    fill="#DDD"
+                    d="M5.692.241A5.457 5.457 0 0 0 .24 5.691v20.616a5.457 5.457 0 0 0 5.452 5.451h20.616a5.457 5.457 0 0 0 5.452-5.45V5.691A5.457 5.457 0 0 0 26.308.24H5.692zM26.308 32H5.692A5.699 5.699 0 0 1 0 26.307V5.692A5.698 5.698 0 0 1 5.692 0h20.616A5.698 5.698 0 0 1 32 5.692v20.615A5.699 5.699 0 0 1 26.308 32z"
+                    mask="url(#icon-toutiao_svg__f)"
+                  />
+                  <path
+                    fill="#FF373C"
+                    d="M32 25.297L0 27V7.703L32 6z"
+                    mask="url(#icon-toutiao_svg__f)"
+                  />
+                  <path
+                    fill="#FFF"
+                    d="M9 13v-1.66L5 11v1.66zm-4 1v1.66L9 16v-1.66zm10 4.457L3 19v-1.457L15 17zm14-1L17 18v-1.457L29 16zm-1-6.883L19 11V9.426L28 9z"
+                    mask="url(#icon-toutiao_svg__f)"
+                  />
+                  <path
+                    fill="#FFF"
+                    d="M12 9l-1.861.105c-.05 3.999-.1 6.251-.768 7.863-.678 1.635-2.123 2.989-5.001 5.686L4 23l2.932-.165C11.71 18.28 11.896 17.29 12 9m1.218 11L11 20.121 12.782 23 15 22.879zm14-1L25 19.121 26.782 22 29 21.879zM21 19l-2.218.114L17 22l2.218-.114zm3 2.89L22 22v-6.89l2-.11zm2.138-12.798v1.18c-1.179.953-3.558 2.569-10.138 3.934V16c7.992-1.62 10.718-3.9 12-5.044V9l-1.862.092z"
+                    mask="url(#icon-toutiao_svg__f)"
+                  />
+                  <path
+                    fill="#FFF"
+                    d="M18.917 11.162a16.953 16.953 0 0 0-.245-.162L17 12.059s.746.524.827.578C19.194 13.55 21.69 15.214 29 16v-1.793c-6.64-.748-8.859-2.228-10.083-3.045"
+                    mask="url(#icon-toutiao_svg__f)"
+                  />
+                  <path
+                    fill="#FFF"
+                    d="M17 11.954L18.815 13 21 9.79 19.003 9z"
+                    mask="url(#icon-toutiao_svg__f)"
+                  />
+                </g>
+              </g>
+            </g>
+          </svg>
+        </li>
+        <li class="contact-item lingying">
+          <svg width="33" height="32">
+            <defs>
+              <path id="icon-linkedin_svg__a" d="M0 0h1440v251H0z" />
+            </defs>
+            <g fill="none" fill-rule="evenodd">
+              <path fill="#FFF" d="M-1284-7901H156V126h-1440z" />
+              <use
+                fill="#1F2329"
+                fill-rule="nonzero"
+                transform="translate(-1284 -125)"
+                xlink:href="#icon-linkedin_svg__a"
+              />
+              <circle cx="16" cy="16" r="16" fill="#1D87BD" transform="translate(.5)" />
+              <path
+                fill="#FFF"
+                fill-rule="nonzero"
+                d="M8.58 24V12.827h3.413V24H8.58M12.1 9.733c.027.96-.693 1.734-1.84 1.734-1.067 0-1.76-.774-1.76-1.734C8.5 8.747 9.22 8 10.313 8c1.094 0 1.787.747 1.787 1.733M21.06 24v-6.187c0-1.44-.48-2.426-1.733-2.426-.934 0-1.494.666-1.76 1.306-.08.24-.107.56-.107.88V24h-3.413v-7.6c0-1.387-.054-2.56-.08-3.573h2.96l.16 1.573h.053c.453-.747 1.573-1.813 3.413-1.813 2.24 0 3.947 1.52 3.947 4.826V24h-3.44"
+              />
+            </g>
+          </svg>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script setup>
+</script>
+<style lang="less" scoped>
+.footer {
+  height: 220px;
+  min-width: @main-width;
+  background: rgba(0, 0, 0, 1);
+  color: #fff;
+  display: flex;
+  font-size: @font-size-small;
+  padding: 0 150px;
+  justify-content: space-between;
+  align-items: center;
+  white-space: nowrap;
+  &-content-column {
+    padding: 0 40px;
+    height: 100px;
+    .title {
+      color: @secondary-text-color;
+    }
+    &:last-child {
+      width: 340px;
+      padding: 0 80px;
+    }
+    & + & {
+      text-align: center;
+      flex: 1;
+      border-left: 1px solid @border-dark-color;
+    }
+
+    &__contact {
+      margin-top: 20px;
+      display: flex;
+      justify-content: space-between;
+      .contact-item {
+        border-radius: 50%;
+        width: 33px;
+        height: 33px;
+        overflow: hidden;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/header.vue b/src/components/header.vue
new file mode 100644
index 0000000..1568431
--- /dev/null
+++ b/src/components/header.vue
@@ -0,0 +1,307 @@
+<template>
+  <div class="header" :class="[{ fixedToTop }, themeColor]" ref="header">
+    <div class="logo">
+      <a href="/">
+        <logo :is-transparent="themeColor === 'is-transparent'"></logo>
+      </a>
+    </div>
+    <ul class="navbar">
+      <router-link to="/" exact v-slot="{ href, navigate, isActive }">
+        <li class="navbar-item" :class="{ active: isActive }">
+          <a :href="href" @click="navigate">主页</a>
+        </li>
+      </router-link>
+      <router-link exact to="/jobs" v-slot="{ href, navigate, isActive }">
+        <li class="navbar-item" :class="{ active: isActive }">
+          <a :href="href" @click="navigate">职位</a>
+        </li>
+      </router-link>
+      <router-link to="/products" v-slot="{ href, navigate, isActive }">
+        <li class="navbar-item" :class="{ active: isActive }">
+          <a :href="href" @click="navigate">产品与服务</a>
+        </li>
+      </router-link>
+      <li class="navbar-item">
+        <a href="https://job.bytedance.com/campus" target="_blank">校园招聘</a>
+      </li>
+    </ul>
+    |
+    <div class="user">
+      <div class="login">
+        <router-link to="/login" v-slot="{ href, navigate, isActive }">
+          <li class="navbar-item" :class="{ active: isActive }">
+            <a v-if="!username" :href="href" @click="navigate">登录</a>
+            <el-dropdown v-if="username">
+              <span class="el-dropdown-link">
+                {{ username }}
+                <el-icon class="el-icon--right">
+                  <arrow-down/>
+                </el-icon>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item>个人简历</el-dropdown-item>
+                  <el-dropdown-item>应聘记录</el-dropdown-item>
+                  <el-dropdown-item @click="logout">退出</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </li>
+        </router-link>
+      </div>
+
+      <!--      <div class="dropdown-menu" v-else>-->
+      <!--        <span class="dropdown-menu__email">-->
+      <!--          {{ state.userInfo.email }}-->
+      <!--          <i class="arrow"></i>-->
+      <!--        </span>-->
+      <!--        <ul class="dropdown-menu__wrapper">-->
+      <!--          <li class="dropdown-menu__item">-->
+      <!--            <router-link to="/resume">我的简历</router-link>-->
+      <!--          </li>-->
+      <!--          <li class="dropdown-menu__item" @click="handleLogout">退出</li>-->
+      <!--        </ul>-->
+      <!--      </div>-->
+    </div>
+  </div>
+</template>
+<script setup>
+import {useStore} from 'vuex'
+import {toRefs, getCurrentInstance, computed, ref} from "vue";
+import {useRouter} from "vue-router";
+
+const store = useStore()
+const router = useRouter()
+const {proxy} = getCurrentInstance()
+
+
+const props = defineProps({
+  themeColor: {
+    type: String,
+    default: 'main-color'
+  },
+  fixedToTop: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const logout = () => {
+  ElNotification({
+    title: 'Success',
+    message: '退出成功',
+    type: 'success',
+    offset: 100,
+  })
+  store.commit('LOGOUT')
+}
+
+const username = computed(() => {
+  return store.state.username
+})
+
+const {themeColor, fixedToTop} = toRefs(props)
+
+</script>
+<style lang="less" scoped>
+.header {
+  color: #aaa;
+  display: flex;
+  height: 64px;
+  align-items: center;
+  padding: 10px 100px;
+  min-width: 900px;
+
+  &.fixedToTop {
+    position: fixed;
+    width: 100%;
+  }
+
+  &.main-color {
+    background-color: rgba(255, 255, 255, 0.8);
+    border-bottom: 1px solid #eff0f1;
+
+    a {
+      color: #333;
+    }
+
+    .navbar-item {
+
+      &:hover {
+        a {
+          color: @main-color;
+        }
+      }
+
+      &.active {
+        a {
+          color: @main-color;
+        }
+      }
+    }
+
+    .login {
+      .navbar-item {
+
+        .el-dropdown span {
+          color: #333;
+        }
+
+        &:hover {
+          a {
+            color: @main-color;
+          }
+        }
+
+        &.active {
+          a {
+            color: @main-color;
+          }
+        }
+      }
+    }
+  }
+
+    &.is-transparent {
+      a {
+        color: #fff;
+      }
+
+      .navbar-item {
+
+        .el-dropdown span {
+          color: #fff;
+        }
+
+        &:hover {
+          color: #ccc;
+        }
+
+      }
+
+      .active {
+        color: #fff;
+      }
+    }
+
+  }
+
+  .logo {
+    width: 200px;
+    height: 100%;
+
+    a {
+      height: 100%;
+      display: block;
+    }
+  }
+
+  .navbar {
+    margin-left: auto;
+    margin-right: 20px;
+
+    display: flex;
+
+    &-item {
+      padding: 4px 0;
+      margin: 0 20px;
+
+      &.active {
+        border-bottom: 2px solid;
+        color: @main-color;
+      }
+    }
+
+    a {
+      outline: none;
+      cursor: pointer;
+      transition: color 0.3s;
+      line-height: 30px;
+    }
+  }
+
+  .user {
+    margin-left: 40px;
+    position: relative;
+
+    .el-dropdown {
+
+      span {
+        font-size: 16px;
+        transition: color 0.3s;
+        line-height: 30px;
+      }
+
+    }
+
+    .arrow {
+      display: inline-block;
+      border: 1px solid;
+      border-width: 1px 1px 0 0;
+      transform: rotate(135deg);
+      transform-origin: center;
+      vertical-align: 5px;
+      margin-left: 5px;
+      transition: all 0.3s;
+      width: 10px;
+      height: 10px;
+    }
+
+    &:hover {
+      .arrow {
+        transform: rotate(-45deg);
+        vertical-align: -3px;
+      }
+
+      .dropdown-menu__wrapper {
+        display: block;
+      }
+    }
+
+    .dropdown-menu {
+      position: relative;
+      z-index: 1000;
+
+      &__email {
+        line-height: 2;
+        cursor: pointer;
+      }
+
+      &__wrapper {
+        position: absolute;
+        display: none;
+        right: 0;
+        color: @regular-text-color;
+        padding: 9px 0;
+        width: 200px;
+        border-radius: 5px;
+        box-shadow: 0 0px 2px 1px #eee;
+        background: #fff;
+      }
+
+      &__item {
+        padding: 9px 12px;
+        cursor: pointer;
+
+        &:hover {
+          background: #efefef58;
+        }
+      }
+    }
+  }
+
+  .github-project {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .example-showcase .el-dropdown-link {
+    cursor: pointer;
+    color: #333;
+    display: flex;
+    align-items: center;
+  }
+
+
+</style>
diff --git a/src/components/message/index.js b/src/components/message/index.js
new file mode 100644
index 0000000..47c1238
--- /dev/null
+++ b/src/components/message/index.js
@@ -0,0 +1,56 @@
+import Vue from "vue";
+import Message from "./main";
+import { defaults } from "./main";
+import { pick } from "@/helper/utilities.js";
+const MessageCtor = Vue.extend(Message);
+
+const queue = [];
+let index = 0;
+
+MessageCtor.prototype.close = function() {
+  this.$destroy();
+  this.$el.addEventListener("animationend", () => {
+    this.$el.remove();
+  });
+
+  let targetIndex = queue.indexOf(this);
+  let removedHeight = this.$el.offsetHeight;
+
+  if (targetIndex < 0) return;
+  for (let i = targetIndex + 1; i < queue.length; i++) {
+    const dom = queue[i].$el;
+    dom.style.top = parseInt(dom.style.top, 10) - removedHeight + 13 + "px";
+  }
+  queue.splice(targetIndex, 1);
+};
+
+export default function createMessage(opts = {}) {
+  const instance = new MessageCtor({ data: pick(opts, Object.keys(defaults)) });
+  instance.index = ++index;
+  instance.$mount();
+  queue.forEach((item) => {
+    instance.offsetTop += item.$el.offsetHeight + 13;
+  });
+  queue.push(instance);
+
+  document.body.appendChild(instance.$el);
+  setTimeout(() => {
+    instance.close();
+  }, instance.duration);
+  return instance;
+}
+createMessage.install = (Vue) => {
+  Vue.prototype.$message = createMessage;
+
+  ["warning", "error", "success"].forEach((type) => {
+    createMessage[type] = function(opts = {}) {
+      if (typeof opts === "string") {
+        opts = {
+          message: opts,
+        };
+      }
+      opts.type = type;
+      return createMessage(opts);
+    };
+  });
+};
diff --git a/src/components/message/main.vue b/src/components/message/main.vue
new file mode 100644
index 0000000..669d6cb
--- /dev/null
+++ b/src/components/message/main.vue
@@ -0,0 +1,128 @@
+<template>
+  <div
+    
+    class="message"
+    :class="[type]"
+    :style="positionStyle"
+  >
+    <div class="message-outer">
+      <span class="message__icon">
+        <i :class="[`el-icon-${type}`, `message__icon--${type}`]"></i>
+      </span>
+      <div class="message-inner">
+        {{ message }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export const defaults = {
+  message: "",
+  type: "success",
+ 
+  duration: 3000,
+  offsetTop: 30,
+};
+export default {
+  data() {
+    return defaults;
+  },
+  beforeDestroy() {
+    this.$el.classList.add("slideUp");
+  },
+  mounted() {
+    this.$el.classList.add("slideDown");
+  },
+  
+  computed: {
+    positionStyle() {
+      return {
+        top: this.offsetTop + "px",
+      };
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@success-color: #34c724;
+@success-color-bg: #f0fbef;
+@error-color: #f56c6c;
+@error-color-bg: #fef1f1;
+@warning-color: #e6a23c;
+@warning-color-bg: #fdf6ec;
+
+@animatin-duration: 0.4s;
+
+@keyframes slideDown {
+  from {
+    transform: translate(-50%, -100%);
+    opacity: 0;
+  }
+  to {
+    transform: translate(-50%, 0);
+  }
+}
+@keyframes slideUp {
+  from {
+    transform: translate(-50%, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -100%);
+  }
+}
+
+.message {
+  margin-bottom: 20px;
+  padding: 5px 15px;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 300px;
+  min-width: 100px;
+  border-radius: 9px;
+  text-align: center;
+  animation-duration: @animatin-duration;
+  transition: all @animatin-duration;
+  z-index: 99999;
+  &__icon {
+    font-size: 30px;
+    &--success {
+      color: @success-color;
+    }
+    &--error {
+      color: @error-color;
+    }
+    &--warning {
+      color: @warning-color;
+    }
+  }
+  &.slideDown {
+    animation-name: slideDown;
+  }
+  &.slideUp {
+    animation-name: slideUp;
+  }
+  &.success {
+    border: 1px solid @success-color;
+    background-color: @success-color-bg;
+  }
+  &.warning {
+    background-color: @warning-color-bg;
+    border: 1px solid @warning-color;
+  }
+  &.error {
+    background-color: @error-color-bg;
+    border: 1px solid @error-color;
+  }
+  &-outer {
+    display: flex;
+    align-items: center;
+  }
+  &-inner {
+    margin-left: 4px;
+  }
+}
+</style>
diff --git a/src/components/popup-progress/index.js b/src/components/popup-progress/index.js
new file mode 100644
index 0000000..17d98b5
--- /dev/null
+++ b/src/components/popup-progress/index.js
@@ -0,0 +1,42 @@
+import Vue from "vue";
+import Progressbar from "./main.vue";
+
+let singleProgress;
+const ProgressbarCtor = Vue.extend(Progressbar);
+ProgressbarCtor.prototype.close = function() {
+  singleProgress = null;
+  this.visible = false;
+  this.value = 0;
+
+  this.$nextTick(() => {
+    this.$destroy();
+  });
+};
+
+function pick(obj = {}, keys = []) {
+  const result = {};
+  keys.forEach((key) => {
+    result[key] = obj[key];
+  });
+  return result;
+}
+
+function createPopupProgress(opts = {}) {
+  if (singleProgress) return singleProgress;
+
+  singleProgress = new ProgressbarCtor({
+    data: pick(opts, Object.keys(opts)),
+  });
+
+  singleProgress.$mount();
+  document.body.appendChild(singleProgress.$el);
+
+  singleProgress.visible = true;
+  return singleProgress;
+}
+
+export default {
+  install(Vue) {
+    Vue.prototype.$popupProgress = createPopupProgress;
+  },
+};
diff --git a/src/components/popup-progress/main.vue b/src/components/popup-progress/main.vue
new file mode 100644
index 0000000..a955c19
--- /dev/null
+++ b/src/components/popup-progress/main.vue
@@ -0,0 +1,129 @@
+<template>
+  <transition name="fade">
+    <div class="popup" v-if="visible">
+      <!-- 遮罩 -->
+      <div class="popup-mask"></div>
+      <div class="popup-model">
+        <div class="popup-fileicon" v-if="fileicon">
+          <file-icon :file-type="fileicon"></file-icon>
+        </div>
+        <!-- 标题 -->
+        <h3 class="popup-title">{{ title }}</h3>
+        <!-- 进度条 -->
+        <div class="popup-progressbar">
+          <div ref="track" class="popup-progressbar__track">
+            <div :style="sliderStyle" class="popup-progressbar__inner"></div>
+          </div>
+        </div>
+        <!-- 取消按钮 -->
+        <div class="popup-cancelBtn" @click="abort">取消</div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import FileIcon from "@/components/File-Icon";
+export default {
+  components: { FileIcon },
+  data() {
+    return {
+      title: "",
+      value: 0,
+      visible: false,
+      fileicon: "",
+    };
+  },
+
+  computed: {
+    sliderStyle() {
+      let percentage = Math.max(0, Math.min(100, this.value));
+      
+      return {
+        width: percentage + "%",
+      };
+    },
+  },
+  methods: {
+    abort() {
+      this.close();
+      this.$emit("abort");
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.popup {
+  text-align: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &-mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+  &-model {
+    padding: 30px;
+    position: relative;
+    z-index: 100;
+    background: #fff;
+    border-radius: 3px;
+    width: 400px;
+  }
+  &-fileicon {
+    width: 50px;
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 7px;
+  }
+  &-progressbar {
+    margin: 12px 0;
+    &__track {
+      position: relative;
+      width: 70%;
+      display: inline-block;
+      vertical-align: middle;
+      border-radius: 3px;
+      overflow: hidden;
+      background: @bg-base-color;
+    }
+    &__inner {
+      height: 7px;
+      transition: width 0.9s;
+      background: @main-color;
+    }
+  }
+  &-cancelBtn {
+    cursor: pointer;
+    color: @main-color;
+  }
+}
+
+.fade-leave-to {
+  .popup-model {
+    transform: scale(0);
+  }
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.3s;
+  .popup-model {
+    transition: transform 0.3s;
+  }
+}
+</style>
diff --git a/src/helper/EventBus/index.js b/src/helper/EventBus/index.js
new file mode 100644
index 0000000..f6f441c
--- /dev/null
+++ b/src/helper/EventBus/index.js
@@ -0,0 +1,3 @@
+import mitt from "mitt";
+
+export default mitt()
\ No newline at end of file
diff --git a/src/helper/utilities.js b/src/helper/utilities.js
new file mode 100644
index 0000000..da6c3bc
--- /dev/null
+++ b/src/helper/utilities.js
@@ -0,0 +1,87 @@
+export const watchScrollDirection = function(scrollElement, callback) {
+  const scrollPos = { x: 0, y: 0 };
+  const scrollDirection = {
+    directionX: 1,
+    directionY: 1,
+  };
+  let previousTimer;
+  function onScroll(e) {
+    const scrollTop = scrollElement.scrollTop || scrollElement.pageYOffset;
+    const scrollLeft = scrollElement.scrollLeft || scrollElement.pageXOffset;
+
+    if (scrollPos.y > scrollTop) {
+      scrollDirection.directionY = -1;
+    } else {
+      scrollDirection.directionY = 1;
+    }
+    if (scrollPos.x > scrollLeft) {
+      scrollDirection.directionX = -1;
+    } else {
+      scrollDirection.directionX = 1;
+    }
+
+    callback.call(scrollElement, scrollDirection, scrollPos);
+
+    scrollPos.x = scrollLeft;
+    scrollPos.y = scrollTop;
+  }
+  function throttle() {
+    let now = Date.now();
+    if (!previousTimer) previousTimer = now;
+    if (now - previousTimer > 30) {
+      onScroll();
+      previousTimer = now;
+    }
+  }
+  scrollElement.addEventListener("scroll", throttle);
+  return function() {
+    scrollElement.removeEventListener("scroll", throttle);
+  };
+};
+
+export function formatDate(date, format = true) {
+  date = new Date(date);
+  if (Number.isNaN(date.getTime())) {
+    return false;
+  }
+
+  const Y = date.getFullYear();
+  const M = (parseInt(date.getMonth()) + 1).toString().padStart(2, 0);
+  const d = date
+    .getDate()
+    .toString()
+    .padStart(2, 0);
+  const h = date
+    .getHours()
+    .toString()
+    .padStart(2, 0);
+  const m = date
+    .getMinutes()
+    .toString()
+    .padStart(2, 0);
+  const s = date
+    .getSeconds()
+    .toString()
+    .padStart(2, 0);
+
+  return format ? `${Y}-${M}-${d} ${h}:${m}:${s}` : `${Y}-${M}-${d}`;
+}
+
+export function getOffsetTop(relativeNode, node, topSum = 0) {
+  topSum += node.offsetTop;
+
+  if (node.offsetParent !== relativeNode) {
+    return getOffsetTop(relativeNode, node.offsetParent, topSum);
+  }
+  return topSum;
+}
+
+export function pick(obj = {}, keys = []) {
+  const result = {};
+  keys.forEach((key) => {
+    if (obj.hasOwnProperty(key)) {
+      result[key] = obj[key];
+    }
+  });
+  return result;
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..652931e
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,22 @@
+import {createApp} from 'vue'
+import App from './App.vue'
+import "./assets/style/reset.css";
+import "./assets/style/global.css";
+import router from './router'
+import store from "./store";
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import api from './api/api.js'
+
+
+// import Loading from "./components/Loading/main";
+
+const app = createApp(App)
+app.use(router).use(store)
+// app.use(Loading)
+app.config.globalProperties.$api = api
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+}
+
+app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..8d01e1d
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,47 @@
+import {createRouter, createWebHashHistory} from "vue-router";
+
+const routes = [
+    {
+        path: '/',
+        name: 'home',
+        component: () => import('../views/Home/Home.vue')
+    },
+    {
+        path: '/jobs',
+        name: 'jobs',
+        component: () => import('../views/Jobs/Jobs.vue')
+    },
+    {
+      path: '/jobs/:id',
+      name: 'jobDetail',
+      component: () => import('../views/JobDetail/JobDetail.vue')
+    },
+    {
+        path: '/staff-stories/:id',
+        name: 'staff-stories',
+        component: () => import('../views/StaffStories/StaffStories.vue')
+    },
+    {
+        path: '/products',
+        name: 'products',
+        component: () => import('../views/Products/Products.vue')
+    },
+    {
+        path: '/user',
+        name: 'user',
+        component: () => import('../views/User/User.vue')
+    },
+    {
+        path: '/login',
+        name: 'login',
+        component: () => import('../views/Login/Login.vue')
+    }
+]
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes
+})
+
+export default router
+
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..2b2e730
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,39 @@
+import {createStore} from "vuex";
+
+export default createStore({
+    state: {
+        userid: localStorage.getItem('userid') || '',
+        username: localStorage.getItem('username') || '',
+        token: localStorage.getItem('token') || '',
+        role: localStorage.getItem('role') || '',
+    },
+
+     mutations: {
+        LOGIN(state, {userid, username, token, role}) {
+            state.userid = userid
+            state.username = username
+            state.token = token
+            state.role = role
+
+            localStorage.setItem('userid', userid)
+            localStorage.setItem('username', username)
+            localStorage.setItem('token', token)
+            localStorage.setItem('role', role)
+        },
+
+         LOGOUT(state, context) {
+             state.userid = ''
+             state.username = ''
+             state.token = ''
+             state.role = ''
+            localStorage.removeItem('userid')
+            localStorage.removeItem('username')
+            localStorage.removeItem('token')
+            localStorage.removeItem('role')
+         }
+     },
+
+    getters: {
+
+    }
+})
\ No newline at end of file
diff --git a/src/test/test.js b/src/test/test.js
new file mode 100644
index 0000000..8961c4f
--- /dev/null
+++ b/src/test/test.js
@@ -0,0 +1,29 @@
+// function add(n) {
+//
+//     function temp(b=0) {
+//         n = n + b
+//         if (b) {
+//             return temp
+//         } else {
+//             return n
+//         }
+//     }
+//
+//     return temp
+// }
+//
+// console.log(add(1)(2)(3)())
+
+// var sum = 0
+// function add(x) {
+//
+//     if (x) {
+//         sum += x
+//         return add
+//
+//     } else {
+//         return sum
+//     }
+// }
+
+
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
new file mode 100644
index 0000000..1833c66
--- /dev/null
+++ b/src/views/Home/Home.vue
@@ -0,0 +1,913 @@
+<template>
+  <div class="home">
+    <div ref="banner" class="banner content-item-block">
+      <div class="video-wrapper">
+        <video
+            ref="video"
+            class="video"
+            preload="auto"
+            muted
+            loop
+            playsinline
+            autoplay
+            poster="//sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/video-poster_1576231362701.png"
+            src="//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/gongquhunjian_1080.min.mp4"
+            tabindex="-1"
+        ></video>
+      </div>
+      <h1 class="banner-title">
+        激发创造 丰富生活
+        <div class="subTitle">JOIN BYTEDANCE</div>
+      </h1>
+      <div class="search">
+        <input-search placeholder="输入城市或职位进行搜索"></input-search>
+      </div>
+      <div class="bottom-tips">
+        <span class="arrow-down" @click="scrollDown">
+          <i>⤓</i>
+        </span>
+        <span class="vertical-dashed"></span>
+      </div>
+    </div>
+
+    <!-- 产品 -->
+    <div class="main">
+      <div ref="product" class="product content-item-block">
+        <h1 class="title">Inspire creativity, enrich life</h1>
+        <div class="desc">截至目前，字节跳动产品已覆盖超过 150 个国家和地区，75 个语种</div>
+        <ul class="product-list">
+          <li
+              class="product-item"
+              v-for="(item, key) in products"
+              :key="key"
+              @click="jumpToDetail(item)"
+          >
+            <img :src="item.logo" alt/>
+            <div>{{ item.title }}</div>
+          </li>
+        </ul>
+        <router-link to="/products">
+          <div class="more">
+            <!-- <span class="more-button">了解更多</span> -->
+            <bytedance-button size="large">了解更多</bytedance-button>
+          </div>
+        </router-link>
+      </div>
+
+      <!-- 职位 -->
+      <div class="job-category content-item-block">
+        <h2 class="job-category-title title">探索你感兴趣的职位</h2>
+        <ul class="job-category-list clearfix">
+          <li v-for="item in jobCategories" :key="item.id" class="job-category-item">
+            <router-link :to="{ name: 'jobs', query: { job_category_id: item.id } }">
+              <div class="image" :style="`background-image:url(${item.image})`">
+                <span class="overlay" v-if="!item.id">{{ item.zh_name }}</span>
+              </div>
+              <div v-if="item.id" class="name">{{ item.zh_name }}</div>
+            </router-link>
+          </li>
+        </ul>
+      </div>
+
+      <!-- 字节范 -->
+      <div class="byteStandard content-item-block">
+        <h1 class="title">字节范</h1>
+        <div class="desc">字节范是字节跳动企业文化的重要组成部分，是我们共同认可的行为准则</div>
+        <div class="content">
+          <div class="image">
+            <span
+                v-show="productLayerVisible"
+                class="layer"
+                @animationend="onScrollRightAnimationEnd"
+            ></span>
+            <img
+                v-if="byteStandards[byteStandardActiveIndex]"
+                style="width: 100%; height: 100%"
+                :src="byteStandards[byteStandardActiveIndex].image"
+                alt
+            />
+          </div>
+          <div class="indicator">
+            <ul>
+              <li class="indicator-item" v-for="(item, index) in byteStandards" :key="index">
+                <h3
+                    :class="{ active: byteStandardActiveIndex === index }"
+                    @click="
+                  () => {
+                    byteStandardActiveIndex = index;
+                    productLayerVisible = true;
+                  }
+                "
+                >{{ item.title }}</h3>
+                <p v-html="item.content" v-show="byteStandardActiveIndex === index"></p>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <!-- 字节生活 -->
+      <div class="byteLife content-item-block">
+        <h1 class="byteLife-title">字节生活</h1>
+        <div class="block-item block-item-one">
+          <div class="block-item-column block-item-column-text">
+            <h2 class="block-item-column-title">在扁平开放的氛围 里工作</h2>
+            <div class="content">
+              <div class="content-item">
+                <h2 class="content-item-title">务实扁平的工作氛围</h2>
+                <p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识</p>
+              </div>
+              <div class="content-item">
+                <h2 class="content-item-title">务实扁平的工作氛围</h2>
+                <p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识</p>
+              </div>
+              <div class="content-item">
+                <h2 class="content-item-title">务实扁平的工作氛围</h2>
+                <p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识</p>
+              </div>
+            </div>
+          </div>
+          <div class="block-item-column block-item-column-image">
+            <img src="https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/life_1.png" alt/>
+          </div>
+        </div>
+
+        <div class="block-item block-item-one">
+          <div class="block-item-column block-item-column-text">
+            <h2 class="block-item-column-title">在扁平开放的氛围 里工作</h2>
+            <div class="content">
+              <div class="content-item">
+                <h2 class="content-item-title">务实扁平的工作氛围</h2>
+                <p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识</p>
+              </div>
+              <div class="content-item">
+                <h2 class="content-item-title">务实扁平的工作氛围</h2>
+                <p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识</p>
+              </div>
+              <div class="content-item">
+                <h2 class="content-item-title">务实扁平的工作氛围</h2>
+                <p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识</p>
+              </div>
+            </div>
+          </div>
+          <div class="block-item-column block-item-column-image">
+            <img src="https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/life_1.png" alt/>
+          </div>
+        </div>
+      </div>
+
+      <!-- 员工故事 -->
+      <div class="staffStory content-item-block">
+        <h2 class="title">员工故事</h2>
+        <ul class="staffStory-list clearfix">
+          <router-link
+              tag="li"
+              :to="`/staff-stories/${item.id}`"
+              v-for="item in staffStories"
+              :key="item.id"
+              class="staffStory-item"
+          >
+            <div class="avatar">
+              <img style="width: 100%" :src="item.avatar" alt srcset/>
+            </div>
+            <div class="text">
+              <h2 class="title">{{ item.title }}</h2>
+              <div class="desc">{{ item.name }}&nbsp;|&nbsp;{{ item.department }}</div>
+              <p class="remark">{{ item.remark }}</p>
+            </div>
+            <div class="circular-button">→</div>
+          </router-link>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, reactive, getCurrentInstance, onMounted, onUnmounted} from "vue";
+import {watchScrollDirection} from "../../helper/utilities.js";
+import EventBus from '../../helper/EventBus'
+import InputSearch from '../../components/Input-Search.vue'
+import BytedanceButton from '../../components/Bytedance-Button.vue'
+import {useRouter} from 'vue-router'
+
+const {proxy} = getCurrentInstance()
+const router = useRouter()
+const productLayerVisible = ref(false)
+
+// 产品列表
+const products = ref([
+  {
+    "name": "faceu",
+    "title": "激萌",
+    "logo": "//sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/Faceu2x_1574665474719.png",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/jimeng.jpeg",
+    "description": "Faceu激萌，4 亿年轻人都爱用的卖萌自拍神器。",
+    "subDescription": "一款能社交的 AR 相机，海量酷炫贴纸、 激萌表情包 、实时美颜、 趣味特效让聊天姿势更丰富更有趣，满足全方位拍摄需求。累计用户量超过 4 亿， 平均每天为用户提供 1.7 亿次拍摄服务。",
+    "id": 1,
+    "link": "https://www.faceu.com"
+  },
+  {
+    "name": "lightFaceCamera",
+    "title": "轻颜相机",
+    "logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/qingyan_square_logo_1577262252373.png",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/qingyan-bg2.jpg",
+    "description": "轻颜相机是一款主打高级感的质感自拍相机，连续霸榜应用商店。拥有时下最流行的滤镜、美颜效果、和海量拍照“姿势”模板，一键就能 get 潮流自拍。",
+    "subDescription": "",
+    "id": 2,
+    "link": "https://m.ulikecam.com/"
+  },
+  {
+    "name": "headNews",
+    "title": "今日头条",
+    "logo": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/toutiao_square_logo_1577262251819.png",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/toutiao_new_2.png",
+    "description": "今日头条是一款个性化资讯推荐引擎产品，致力于连接人与信息，让优质、丰富的信息得到高效、精准的分发，为用户创造价值。",
+    "subDescription": "今日头条目前拥有科技、体育、健康、美食、教育、三农、国风、NBA 等超过 100 个垂直领域，覆盖了图文、图集、小视频、短视频、短内容、直播、小程序等多种信息体裁。",
+    "id": 3,
+    "link": "https://m.ulikecam.com/"
+  },
+  {
+    "name": "trillShortVideo",
+    "title": "抖音短视频",
+    "logo": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/douyin_square_logo_1577262251779.png",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/douyin-bg2.jpg",
+    "description": "抖音是一个帮助用户表达自我，记录美好生活的短视频平台。截至 2020 年 1 月，日活跃用户数已经突破 4 亿，并继续保持高速增长。",
+    "subDescription": "",
+    "id": 4,
+    "link": "https://douyin.com/"
+  },
+  {
+    "name": "trillShortVideo",
+    "title": "西瓜视频",
+    "logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/xigua_square_logo_1577262253312.png",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/xigua-bg2.jpg",
+    "description": "西瓜视频是字节跳动旗下的一款视频 App，作为聚合多元文化的综合视频平台，它通过个性化推荐，源源不断地为不同人群提供丰富的优质内容，同时鼓励多样化创作，帮助人们轻松地向全世界分享视频作品。",
+    "subDescription": "目前西瓜视频累计用户数超过 3.5 亿，日均播放量超过 40 亿。",
+    "id": 5,
+    "link": "https://ixigua.com/"
+  },
+  {
+    "name": "trillShortVideo",
+    "title": "懂车帝",
+    "logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/dongchedi_square_logo_1577262251826.png",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/dongche-bg2.jpg",
+    "description": "懂车帝是“看车、选车、买车”一站式汽车媒体和服务平台，产品基于个性化推荐引擎帮助用户发现感兴趣的汽车内容，同时配有车型库、360 度全景看车等选车工具，首创短视频社区“车友圈”，为用户打造内容 + 社区 + 工具的多元生态。目前，懂车帝已经成长为增长最快的汽车类手机应用。",
+    "subDescription": "目前西瓜视频累计用户数超过 3.5 亿，日均播放量超过 40 亿。",
+    "id": 6,
+    "link": "https://www.dongchediapp.com/"
+  },
+  {
+    "name": "gogokid",
+    "logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/gogokid_square_logo_1577262251773.png",
+    "title": "GoGoKid",
+    "id": 7,
+    "description": "GoGokid 是一个面向 4 - 12 岁孩子的在线少儿英语 1 对 1学习平台。主打 100% 纯北美外教；教材对标美国小学主流课标（CCSS），融入 SED（社交情商培养）、多元智能理论，为中国孩子带来高效的英语学习体验。",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/gogokid-bg2.jpg",
+    "link": "https://www.gogokid.com.cn"
+  },
+  {
+    "name": "naughtyShrimp",
+    "logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/pipixia_square_logo_1577262251826.png",
+    "title": "皮皮虾",
+    "id": 8,
+    "description": "今日头条官方爆笑社区，一个只要打开就能让你笑到停不下来的 App。",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/pipi_new.png",
+    "subDescription": "皮皮虾一直坚持「传播快乐，分享生活」的目标，以特有的「神评」玩法形成了独特的社区氛围。之后，皮皮虾将不断提供更多有趣的功能，帮助用户创造出更多优质的内容。",
+    "link": "https://mp.pipix.com"
+  },
+  {
+    "name": "urgentLetter",
+    "logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/feishu_squre.png",
+    "title": "飞书",
+    "id": 9,
+    "description": "飞书是新一代企业办公套件，整合即时沟通、日历、音视频会议、在线文档、云盘、工作台等功能于一体，为企业提供全方位协作解决方案，成就组织和个人，更高效、更愉悦。",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/feishu_bg.jpg",
+    "subDescription": "",
+    "link": "https://www.feishu.com"
+  }
+])
+// 岗位列表
+const jobCategories = ref([
+  {
+    "id": "6704215862603155720",
+    "en_name": "developer",
+    "zh_name": "研发",
+    "image": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/jobslight/rd2.png"
+  },
+  {
+    "id": "6704215864629004552",
+    "en_name": "productManager",
+    "zh_name": "产品",
+    "image": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/jobslight/prod2.png"
+  },
+
+  {
+    "id": "6704215882479962371",
+    "en_name": "operator",
+    "zh_name": "运营",
+    "image": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/jobslight/operation2.png"
+  },
+  {
+    "id": "6709824272514156812",
+    "en_name": "designer",
+    "zh_name": "设计",
+    "image": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/jobslight/design2.png"
+  },
+  {
+    "id": "6704215901438216462",
+    "en_name": "marketer",
+    "zh_name": "市场",
+    "image": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/jobslight/market2.png"
+  },
+  {
+    "id": "6709824272505768200",
+    "en_name": "seller",
+    "zh_name": "销售",
+    "image": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/jobslight/sales2.png"
+  },
+  {
+    "id": "6704215913488451847",
+    "en_name": "supporter",
+    "zh_name": "职能支持",
+    "image": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/jobslight/support2.png"
+  },
+  {
+    "id": "",
+    "en_name": "whole",
+    "zh_name": "全部",
+    "image": "//sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/alljobs_2x_crop_min.png"
+  }
+])
+// 字节标准列表
+const byteStandards = ref([
+  {
+    "title": "追求极致",
+    "content": "不断提高要求，延迟满足感<br>在更大范围里找最优解，不放过问题，思考本质<br>持续学习和成长",
+    "image": "https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/bytestyle1clear.png"
+  },
+  {
+    "title": "务实敢为",
+    "content": "直接体验，深入事实<br>不自嗨，注重效果，能突破有担当，打破定式<br>尝试多种可能，快速迭代",
+    "image": "https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/tancheng.png"
+  },
+  {
+    "title": "开放谦逊",
+    "content": "内心阳光，信任伙伴<br>乐于助人和求助，合作成大事<br>格局大，上个台阶想问题<br>对外敏锐谦虚，ego 小，听得进意见",
+    "image": "https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/style03_1576395987141.png"
+  },
+  {
+    "title": "坦诚清晰",
+    "content": "敢当面表达真实想法<br>能承认错误，不装不爱面子<br>实事求是，暴露问题，反对“向上管理”<br>准确、简洁、直接，有条理有重点",
+    "image": "https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/tancheng.png"
+  },
+  {
+    "title": "始终创业",
+    "content": "自驱，不设边界，不怕麻烦<br>有韧性，直面现实并改变它<br>拥抱变化，对不确定性保持乐观<br>始终像公司创业第一天那样思考",
+    "image": "https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/bytestyle5clear.png"
+  },
+  {
+    "title": "多元兼容",
+    "content": "理解并重视差异和多元，建立火星视角<br>打造多元化的团队，欢迎不同背景的人才，激发潜力<br>鼓励人人参与，集思广益，主动用不同的想法来挑战自己<br>创造海纳百川，兼容友好的工作环境",
+    "image": "https://sf3-ttcdn-tos.pstatp.com/obj/atsx-fe/p/assets/duoyuanjianrong_1584512668065.jpg"
+  }
+])
+const byteStandardActiveIndex = ref(0)
+// 员工故事
+const staffStories = ref([
+  {
+    "id": 1,
+    "name": "熊典",
+    "avatar": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/xiongdianavarta.png",
+    "bannerImage": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/xiongdianBanner.jpg",
+    "remark": "“公司没有让我们把所有时间都用来完成目标，仍然给大家很多时间，去做与业务没有直接关联的技术研究，大家都能停下脚步思考更多问题。”",
+    "title": "体验最极致的成就感",
+    "department": "IOS-抖音",
+    "richContent": "<p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>我是熊典，在抖音起步不久就加入了字节跳动，在这里发了第一版 TikTok 。</p><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>我本科毕业于北大法学院，应该算是“非典型工程师”，当时很多北大信科的师兄向我推荐字节跳动，说这里创业氛围和技术氛围都很浓厚，我觉得能有自己施展的空间，就过来了。</p><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>来了后我发现，公司的技术氛围特别纯粹，虽然业务顶着很大的压力，我们每周都会举办技术分享会，讨论技术方面的前沿问题。公司没有让大家把所有时间都用来完成业务目标，依然很支持我们研究与业务没有直接关联的技术架构，这样我们能有时间和精力思考更多问题。另外，公司整体上对用户体验和技术细节的追求很高，比如当我们收到一条推送时，只需要重压推送，就可以在小窗里看到完整的视频内容。这个功能可能不会在数据上产生直接收益，但只要对用户体验有帮助，我们都会抽时间去做。</p><img src='https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/xiongdian_blue.jpeg' alt='' style='-webkit-font-smoothing: antialiased; vertical-align: middle; width: 720px; margin: 12px auto; color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'><span style='color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'></span><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>当然，在一家全球月活用户超过 15 亿的公司里工作，我们也会遇到很多挑战。TikTok 起步阶段时，iOS 这边只有我一个全职同学，另外一个是实习生。这对个人能力提出了考验，但同时也意味着，你可以做很多创新和有意思的事，比如我们支持了阿拉伯语从右往左写的场景，还支持了全世界不同肤色、不同人种的美颜。现在我们支持 150 个国家和地区的国际化项目，看到抖音和TikTok 登上十几个国家 App Store 榜首，自己作为贡献其中的一员，非常有成就感。</p><img src='https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/xiongdianstory1Img1.png' alt='' style='-webkit-font-smoothing: antialiased; vertical-align: middle; width: 720px; margin: 12px auto; color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'><span style='color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'></span><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>总体来说，在字节跳动工作，我还是很有成就感的。之前参加 WWDC 技术大会，在会场发现，开场的 App 墙里有我们的产品，排队入场时听到前面的人在讨论 TikTok。WWDC 的参会者都是从全球各地过来，对 Apple 文化很痴迷的人，我在后面看着他们，心里还是很自豪的。</p>"
+  },
+  {
+    "id": 2,
+    "name": "王司羊",
+    "avatar": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/siyangAvata.png",
+    "bannerImage": "//sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/story2_bg2x_1576834857930.jpg",
+    "remark": "“作为应届生加入公司，我参与了很多国际化项目，这些国际化项目经历了从 0 到 1 的过程，我一上来就可以自己带项目，这在其他公司是很少见的，对我来说也是一个极具成长性的机会。”  ",
+    "title": "每个人的声音都可以被听到",
+    "department": "薪酬福利绩效",
+    "richContent": "<p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>2017 年 7 月，我从 UIUC 毕业后选择加入字节跳动。理由很简单，字节跳动是我遇见的唯一一家采用结构化面试的公司，我是人力资源专业出身，这种面试方式在 HR 领域是很先进的，所以我就来了。</p><img src='https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/story2_img1_1577068552076.jpg' alt='' style='-webkit-font-smoothing: antialiased; vertical-align: middle; width: 720px; margin: 12px auto; color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'><span style='color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'></span><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>也许因为我有留学背景，入职后，公司安排我参与国际化工作。我需要在 mentor 的帮助下，制定很多国家的福利政策，这些业务上的挑战，一是培养了我的全局视角，养成用国际化视角去看问题的习惯，二是我要去学习不同国家的文化和习俗，对不同的文化越来越敏感。刚开始接触国际化，我支持的国家数是个位数，现在国际化业务越来越大，我需要支持的国家已经有了几十个，而且公司的产品也去到了一百多个国家。接触从 0 到 1 的过程，独立完成很多国家福利政策的制定，收到来自外籍员工的肯定和鼓励，还是挺有成就感的。</p><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>公司文化上有两点特质，是我非常喜欢的。首先，公司鼓励大家坦诚表达自己的想法和意见。我们会定期举办 CEO 面对面，有次我在 CEO 面对面上直接向一鸣提出，希望公司能够成立国际化业务的小组，会后我觉得当时表述的不是很清楚，于是又在公司内部的 IM 沟通工具上跟他说了一遍。一鸣很快读了这条消息，并且回复了我。更惊喜的是，大概过了半个月，我发现这个国际化小组真的成立了。在字节跳动，坦诚的意见无关 title，每个人的声音都可以被听到。</p><img src='https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/siyangimg2.jpeg' alt='' style='-webkit-font-smoothing: antialiased; vertical-align: middle; width: 720px; margin: 12px auto; color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'><span style='color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'></span><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>其次是公司对待员工的方式。比如说在员工性别问题上，感觉不到女性是特殊群体。我们 team 曾有一个很重要的前沿岗位在招人，最后我的 leader 录用了一个正在怀孕的准妈妈，在她休产假交接工作的邮件里，leader 也会请大家帮忙处理好工作，让她安心休息，这个事情给了我很大的信心。公司里也有很多女性 leader，像抖音的负责人等等，她们都在重要的一线岗位上发挥着自己的能量。</p><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>我加入字节跳动已经两年多了，说实话我好像真的没有什么不满意的地方，有问题吐槽出来，也会及时得到解决。在工作之前我其实有很多期待，没想到来了之后几乎跟我想的一模一样。所以我觉得，哇，真的来对了！</p>"
+  },
+  {
+    "id": 3,
+    "name": "左儒哲",
+    "avatar": "https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/story3_avatar2x_1576834857749.jpg",
+    "bannerImage": "//sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/story3_bg2x_1576834857917.jpg",
+    "remark": "“比起其他公司，字节跳动可能更浪漫，或者说，有更大的梦想。这里不设边界，只要连接人与信息的事情，我们都会尝试去做。” ",
+    "title": "在这里，看见更大的世界",
+    "department": "飞书-客户端",
+    "richContent": "<p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>我是 Roger 左儒哲，一个土生土长的美国人。在哈佛毕业之后，我和许多美国技术人才一样，漂到西海岸的硅谷，在亚马逊、Facebook 这类大厂和初创公司间跳来跳去，大厂小厂都待过后，我发现硅谷变了，这里的技术水平仍然很好，但大公司却越来越趋于稳定保守，不想冒险做创新的事情。</p><img src='https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/story3_img12x_1577069327983.jpg' alt='' style='-webkit-font-smoothing: antialiased; vertical-align: middle; width: 720px; margin: 12px auto; color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'><span style='color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'></span><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>后来我发现，九千多公里外的北京，倒是更像早期的硅谷。移动支付、二维码、共享经济……中国的互联网世界出现了好多创新，北京很多方面的发展比硅谷还要快，于是我决定，一定要来这里看看。</p><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>其实早在 2016 年的时候我就知道字节跳动，那时候只知道今日头条、抖音，还有海外的一些应用，入职后才知道，我们产品的覆盖范围其实比想象中大很多。 现在我主要在做飞书这个产品的客户端，目前还处于创新、创建、探索的阶段，很多的系统还没那么成熟，但这是一个全新的机会，我可以完整参与到做出一个兼具创新性和实用性的产品的过程中去，同事们的技术能力很强。飞书把日历、文档、聊天都放在一个 App 内，这样的工作模型非常方便，未来也很有潜力，很多硅谷的科技公司，也没有一个这么完整的办公软件。飞书的海外版本 Lark 已经发布，我也会给美国的朋友主动推广我们的产品，他们对 Lark 的反馈也都很不错！</p><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>当然，工作有成就感的同时，我也面临一些挑战，公司的工作节奏很快，每个人需要同时做很多事情。目前我们每两周发布一个新版本，关于产品计划，需要提前思考，这两周要发布什么新功能，功能上线后我需要管理哪些新的功能，修复哪些 bug，如何管理自己的时间等等。</p><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>工作下来我最大的感受是， 字节跳动有一个产品至上的概念，视用户为中心，所有的价值观和工作方法都在围绕这个概念展开。与此同时，这里的文化非常开放包容，没有太多的限制——我中文沟通还比较慢，但也可以来到北京和中国的同事一起工作。比起其他公司，字节跳动可能更浪漫，或者说，有更大的梦想。公司不设边界，只要连接人与信息的事情，我们都会尝试去做。</p>"
+  }
+])
+const onScrollRightAnimationEnd = () => {
+  productLayerVisible.value = false
+}
+
+onMounted(() => {
+  EventBus.emit("home-scrolling",
+      {x: document.body.scrollLeft, y: document.body.scrollTop}
+  )
+})
+
+// 位置跳转
+const scrollDown = () => {
+  proxy.$refs.product.scrollIntoView({
+    behavior: "smooth",
+    block: "start"
+  });
+}
+
+// 产品跳转
+const jumpToDetail = (item) => {
+  router.push({
+    name: "products",
+    query: {
+      id: item.id
+    }
+  });
+}
+
+</script>
+
+<style scoped lang="less">
+@keyframes verticalMotion {
+  0% {
+    transform: translateY(6px);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+  100% {
+    transform: translateY(6px);
+  }
+}
+
+@keyframes scrollToRight {
+  0% {
+    left: -100%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}
+
+.home {
+  .main {
+    width: @main-width;
+    margin: auto;
+  }
+
+  .content-item-block {
+    .title {
+      font-size: @font-size-larger;
+    }
+  }
+}
+
+.banner {
+  height: 100vh;
+  min-height: 400px;
+  min-width: @main-width;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: rgba(51, 112, 255, 0.2);
+  position: relative;
+
+  .video-wrapper {
+    font-size: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    overflow: hidden;
+
+    .video {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-title {
+    color: #fff;
+    font-size: 60px;
+    text-align: center;
+
+    .subTitle {
+      &::after,
+      &::before {
+        content: "";
+        position: absolute;
+        background-image: linear-gradient(270deg,
+        hsla(0, 0%, 100%, 0),
+        #fff 47%,
+        hsla(0, 0%, 100%, 0));
+        height: 2px;
+        width: 89px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      &:before {
+        right: 10px;
+      }
+
+      &:after {
+        left: 10px;
+      }
+
+      position: relative;
+      margin-top: 10px;
+      font-size: @font-size-base;
+      letter-spacing: 20px;
+    }
+  }
+
+  .search {
+    width: 500px;
+    margin-top: 100px;
+    margin-bottom: 40px;
+  }
+
+  .bottom-tips {
+    position: absolute;
+    bottom: 30px;
+    width: 50px;
+    height: 50px;
+    flex-shrink: 0;
+
+    text-align: center;
+
+    .arrow-down {
+      display: block;
+      margin-bottom: 4px;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      border: 1px solid #fff;
+      text-align: center;
+      line-height: 40px;
+      color: #fff;
+      cursor: pointer;
+      font-size: 21px;
+
+      i {
+        animation: verticalMotion 1.3s infinite linear;
+        display: inline-block;
+        font-style: normal;
+      }
+    }
+
+    // 分割竖线
+    .vertical-dashed {
+      border-left: 1px dashed #fff;
+      height: 30px;
+
+      display: inline-block;
+    }
+  }
+}
+
+// 产品
+.product {
+  margin-top: 40px;
+  text-align: center;
+  padding: 40px 40px;
+  background-size: 100%;
+  background: url(//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/global.png);
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: 0 370px;
+
+  .desc {
+    margin: 40px 0;
+  }
+
+  &-list {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &-item {
+    width: 90px;
+    // height: 90px;
+    cursor: pointer;
+
+    &:nth-child(1),
+    &:nth-child(9) {
+      margin-top: 116px;
+    }
+
+    &:nth-child(2),
+    &:nth-child(8) {
+      margin-top: 80px;
+    }
+
+    &:nth-child(3),
+    &:nth-child(7) {
+      margin-top: 55px;
+    }
+
+    &:nth-child(4),
+    &:nth-child(6) {
+      margin-top: 30px;
+    }
+
+    &:hover {
+      color: @main-color;
+
+      img {
+        border-radius: 19px;
+
+        transform: scale(1.2);
+        transform-origin: bottom;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+      }
+    }
+
+    img {
+      width: 90px;
+      height: 90px;
+      border-radius: 19px;
+
+      margin-bottom: 10px;
+      transition: transform 0.3s;
+    }
+  }
+
+  .more {
+    margin: auto;
+    margin-top: 170px;
+
+    width: 149px;
+  }
+}
+
+// 职位
+
+.job-category {
+  text-align: center;
+  margin-top: 90px;
+
+  &-list {
+    margin-top: 70px;
+  }
+
+  &-item {
+    float: left;
+    margin-bottom: 16px;
+
+    .image {
+      width: 250px;
+      height: 250px;
+      line-height: 250px;
+      background-repeat: no-repeat;
+      background-size: 100%;
+      border-radius: 50%;
+      margin: 0 auto;
+
+      transition: all 0.3s;
+      background-position: center;
+      overflow: hidden;
+
+      &:hover {
+        box-shadow: 0 0 8px 1px #ccc;
+        background-size: 110%;
+
+        & + .name {
+          color: @main-color;
+        }
+      }
+
+      .overlay {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        color: #fff;
+
+        font-size: 40px;
+      }
+    }
+
+    .name {
+      margin-top: 23px;
+      font-size: @font-size-large;
+    }
+
+    margin: 0 2.5%;
+    margin-bottom: 30px;
+    width: 20%;
+  }
+}
+
+// 字节范
+
+.byteStandard {
+  padding: 40px 40px;
+  overflow: hidden;
+
+  .title {
+    margin-bottom: 30px;
+  }
+
+  .desc {
+    margin-bottom: 40px;
+  }
+
+  .content {
+    .image {
+      .layer {
+        // left: -100%;
+        width: 100%;
+        top: 0;
+        bottom: 0;
+        background: rgba(255, 255, 255, 0.8);
+        position: absolute;
+        animation: scrollToRight 0.8s ease-in-out;
+      }
+
+      position: relative;
+
+      float: left;
+      width: 700px;
+      height: 450px;
+      margin-right: 100px;
+      overflow: hidden;
+
+      img {
+        border-radius: 6px;
+        object-fit: cover;
+      }
+    }
+  }
+
+  .indicator {
+    color: #aaa;
+
+    &-item {
+      margin: 32px 0;
+
+      h3 {
+        &.active {
+          color: black;
+          font-size: 32px;
+          font-weight: 400;
+        }
+
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+// 字节生活
+.byteLife {
+  // width:1200px;
+  // overflow: hidden;
+  &-title {
+    margin-bottom: 70px;
+  }
+
+  padding-left: 10%;
+
+  .block-item {
+    overflow: hidden;
+    margin-bottom: 100px;
+
+    &:nth-child(odd) {
+      .block-item-column {
+        &-text {
+          margin-right: 9%;
+        }
+
+        float: left;
+      }
+    }
+
+    &:nth-child(even) {
+      .block-item-column {
+        &-image {
+          margin-right: 9%;
+        }
+
+        float: right;
+      }
+    }
+
+    &-column {
+      &-title {
+        margin-bottom: 40px;
+        padding-bottom: 40px;
+        border-bottom: 1px solid #ccc;
+      }
+
+      &-text {
+        width: 30%;
+      }
+
+      &-image {
+        height: 400px;
+        width: 59%;
+        border-radius: 8px;
+        overflow: hidden;
+
+        img {
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+  }
+}
+
+// 员工故事
+.staffStory {
+  padding: 40px 90px;
+
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+
+  &-list {
+    text-align: center;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 50px;
+  }
+
+  &-item {
+    // height: 450px;
+    overflow: hidden;
+    padding: 50px;
+    width: 30%;
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: 0 10px 30px 0 @box-shadow-hover-color;
+
+      .circular-button {
+        color: @main-color;
+      }
+    }
+
+    .avatar {
+      width: 70%;
+      margin: auto;
+    }
+
+    .text {
+      .title {
+        color: @primary-text-color;
+        font-weight: @font-weight-regular;
+        font-size: @font-size-large;
+        margin: 10px 0;
+        white-space: nowrap;
+      }
+
+      .desc {
+        color: @primary-text-color;
+        margin: 12px 0;
+        font-size: @font-size-base;
+      }
+
+      .remark {
+        font-size: @font-size-base;
+
+        color: @regular-text-color;
+        -webkit-box-orient: vertical;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .circular-button {
+      border-radius: 50%;
+      width: 30px;
+      height: 30px;
+      border: 1px solid;
+      line-height: 30px;
+
+      margin: auto;
+      margin-top: 20px;
+      color: #ccc;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/JobDetail/JobDetail.vue b/src/views/JobDetail/JobDetail.vue
new file mode 100644
index 0000000..715525a
--- /dev/null
+++ b/src/views/JobDetail/JobDetail.vue
@@ -0,0 +1,220 @@
+<template>
+  <div class="job-detail">
+    <h1 class="job-detail-title">{{ jobDetail.title }}</h1>
+    <div class="job-detail-subTitle" v-if="jobDetail.id">
+      <span class="city_info">{{ jobDetail.city_info.name }}</span
+      >&nbsp;|
+      <span class="job_category">{{ jobDetail.job_category.name }}</span
+      >&nbsp;|
+      <span class="recruit_type">{{ jobDetail.recruit_type.name }}</span>
+    </div>
+    <div class="job-detail-description job-detail-block">
+      <h2>职位描述</h2>
+      <pre class="textContent">{{ jobDetail.description }}</pre>
+    </div>
+    <div class="job-detail-requirement job-detail-block">
+      <h2>职位要求</h2>
+      <pre class="textContent">{{ jobDetail.requirement }}</pre>
+    </div>
+    <div class="job-detail-button job-detail-block">
+      <bytedance-button @click="delivery" size="large">投递</bytedance-button>
+    </div>
+  </div>
+</template>
+<script setup>
+import BytedanceButton from '../../components/Bytedance-Button.vue'
+import {reactive, getCurrentInstance} from "vue";
+import {useStore} from "vuex";
+import {useRoute} from "vue-router";
+
+const {proxy} = getCurrentInstance()
+
+// 加载动画（有问题）
+// let loading = proxy.$loading({ position: { top: 60 } })
+// setTimeout(() => {
+//   loading.close()
+// })
+const jobDetail = reactive({
+  "id": "7225929779840829752",
+  "title": "国际化广告算法工程师-App Ads与游戏",
+  "sub_title": "",
+  "description": "1、负责广告投放中定向、召回、粗排、精排、出价各个阶段模型和策略的改进，极致优化变现效率和客户体验；\n2、利用业界最先进的手段，持续优化深度转化模型，极致提升LTV、付费率、留存率的预估准确度；\n3、探索并落地联邦学习、多方计算等前沿技术，持续提升隐私保护环境下的广告投放效果；\n4、深入了解行业痛点，利用策略和模型的手段，从广告主诉求视角出发，探索最新的商业变现技术和商业产品设计。",
+  "requirement": "1、良好的数据结构、数理统计和概率论等基础；优秀的编码能力，熟练掌握C++/Go更佳；\n2、扎实的机器学习/深度学习理论基础，熟练掌握至少一种主流深度学习编程框架；\n3、较好的产品意识，愿意将产品效果作为工作最重要的驱动因素；\n4、有deep model在广告和推荐业务经验者优先。",
+  "job_category": {
+    "id": "6704215862603155720",
+    "name": "研发",
+    "en_name": "R&D",
+    "i18n_name": "研发",
+    "depth": 1,
+    "parent": null,
+    "children": null
+  },
+  "city_info": {
+    "code": "CT_11",
+    "name": "北京",
+    "en_name": "Beijing",
+    "location_type": null,
+    "i18n_name": "北京",
+    "py_name": null,
+    "mdm_code": null
+  },
+  "recruit_type": {
+    "id": "101",
+    "name": "正式",
+    "en_name": "Regular",
+    "i18n_name": "正式",
+    "depth": 2,
+    "parent": {
+      "id": "1",
+      "name": "社招",
+      "en_name": "Experienced",
+      "i18n_name": "社招",
+      "depth": 1,
+      "parent": null,
+      "children": null,
+      "active_status": 1,
+      "selectability": 1
+    },
+    "children": null,
+    "active_status": 1,
+    "selectability": 1
+  },
+  "publish_time": 1682418035000,
+  "delivery_info_id": null,
+  "channel_online_status": 1,
+  "job_hot_flag": 2,
+  "job_subject": null,
+  "code": "A73289",
+  "department_id": null,
+  "job_function": null,
+  "job_id": "7216268434823891237",
+  "city_list": [{
+    "code": "CT_11",
+    "name": "北京",
+    "en_name": "Beijing",
+    "location_type": 3,
+    "i18n_name": "北京",
+    "py_name": "beijing",
+    "mdm_code": null
+  }],
+  "job_post_info": {
+    "id": null,
+    "job_id": null,
+    "title": null,
+    "sub_title": null,
+    "address_id": null,
+    "address": null,
+    "city": null,
+    "education": null,
+    "experience": null,
+    "description": null,
+    "requirement": null,
+    "min_salary": null,
+    "max_salary": null,
+    "currency": null,
+    "head_count": null,
+    "crator_id": null,
+    "expiry_time": null,
+    "progress": null,
+    "department_id": null,
+    "job_type": null,
+    "recruitment_type": {
+      "id": "101",
+      "name": "正式",
+      "en_name": "Regular",
+      "i18n_name": "正式",
+      "depth": 2,
+      "parent": {
+        "id": "1",
+        "name": "社招",
+        "en_name": "Experienced",
+        "i18n_name": "社招",
+        "depth": 1,
+        "parent": null,
+        "children": null,
+        "active_status": 1,
+        "selectability": 1
+      },
+      "children": null,
+      "active_status": 1,
+      "selectability": 1
+    },
+    "job_process_time": null,
+    "job_in_charge_user_id": null,
+    "biz_create_time": null,
+    "HighlightList": null,
+    "JobChannelPublishList": null,
+    "required_degree": null,
+    "never_expiry": null,
+    "job_hot_flag": null,
+    "subject": null,
+    "sequence": null,
+    "min_level": null,
+    "max_level": null,
+    "job_post_object_value_map": {"7154429338292128008": "", "7154429338292144392": ""},
+    "code": null,
+    "job_active_status": null,
+    "job_process_type": null,
+    "biz_modify_time": null,
+    "job_function": null,
+    "job_process": null,
+    "job_process_id": null,
+    "job_category": null,
+    "address_list": null,
+    "city_list": null,
+    "correlation_job_list": null,
+    "tag_list": null,
+    "department": null
+  },
+  "city_info_list_for_delivery": null
+})
+const store = useStore()
+const route = useRoute()
+
+const id = route.params.id
+const delivery = () => {
+  ElMessage({
+    showClose: true,
+    message: '该功能还在开发中'
+  })
+}
+
+</script>
+<style lang="less" scoped>
+.job-detail {
+  width: 800px;
+
+  margin: auto;
+  margin-top: 100px;
+  line-height: 2em;
+
+  &-subTitle {
+    font-size: @font-size-base;
+    color: @primary-text-color;
+    margin: 20px 0;
+  }
+
+  &-description {
+    .textContent {
+      white-space: pre-line;
+    }
+  }
+
+  &-block {
+    h2 {
+      margin-bottom: 20px;
+    }
+
+    margin: 40px 0;
+
+    .textContent {
+      font-size: @font-size-base;
+      color: @primary-text-color;
+    }
+  }
+
+  &-button {
+    width: 200px;
+  }
+}
+</style>
diff --git a/src/views/Jobs/Jobs.vue b/src/views/Jobs/Jobs.vue
new file mode 100644
index 0000000..ced3829
--- /dev/null
+++ b/src/views/Jobs/Jobs.vue
@@ -0,0 +1,3117 @@
+<template>
+  <div class="jobs">
+    <div class="banner">和优秀的人，做有挑战的事</div>
+
+    <!-- 搜索 -->
+    <div ref="searchBar" :class="{ fixedTop: searchBarFixedTop }" class="search-wrapper">
+      <input-search
+          :size="searchBarFixedTop ? 'small' : 'medium'"
+          placeholder="搜索职位"
+          v-model="searchKeyword"
+      ></input-search>
+    </div>
+
+    <div class="main clearfix">
+      <!-- 侧边栏过滤选择 -->
+      <div class="clearfix aside-filter">
+        <div class="header">
+          <span>选择</span>
+          <span :class="{ clearable }" class="clear" @click="clearFilter">清空</span>
+        </div>
+        <div class="job-category job-filter-block">
+          <div class="title"></div>
+          <checkbox-transfer
+              title="职位"
+              ref="jobCategory"
+              v-model="job_category_id_list"
+              :props="{ key: 'id', label: 'name' }"
+              :data="jobCategories"
+          ></checkbox-transfer>
+        </div>
+        <div class="job-city job-filter-block">
+          <div class="title"></div>
+          <checkbox-transfer
+              title="城市"
+              ref="location"
+              v-model="location_code_list"
+              :props="{ key: 'code', label: 'name' }"
+              :data="jobCities"
+          ></checkbox-transfer>
+        </div>
+      </div>
+      <!-- 主体内容 -->
+      <div class="content" v-loading:#ffffff7d.scrollFixed="loading">
+        <h2 class="content-title">开启新的职位 ({{ results.count }})</h2>
+        <ul class="content-list">
+          <li class="content-item" v-for="item in results.job_post_list" :key="item.id">
+            <router-link :to="`/jobs/${item.id}`">
+              <h3 class="title">{{ item.title }}</h3>
+
+              <div class="subTitle">
+                <span class="city">{{ item.city_info.name }}</span>&nbsp;|
+                <span class="job_category">{{ item.job_category.name }}</span>&nbsp;|
+                <span class="recruitment_channel">社招</span>
+              </div>
+              <p class="desc">{{ item.description }}</p>
+            </router-link>
+          </li>
+        </ul>
+<!--        &lt;!&ndash; 分页器 &ndash;&gt;-->
+<!--        <div v-show="!loading" class="pagination-wrapper">-->
+<!--          <pagination :current-page.sync="currentPage" :total="results.count"></pagination>-->
+<!--        </div>-->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, computed, watch, getCurrentInstance, onMounted} from "vue";
+import {useRoute} from "vue-router";
+import {getOffsetTop} from "../../helper/utilities.js";
+import EventBus from "../../helper/EventBus/index.js";
+import InputSearch from '../../components/Input-Search.vue'
+import CheckboxTransfer from "../../components/Checkbox-Transfer.vue";
+
+const route = useRoute()
+const {proxy} = getCurrentInstance()
+let positionY = 0;
+let searchBarClientHeight = 0
+const {keyword, job_category_id} = route.query
+const searchBarFixedTop = ref(false)
+// 工作种类数组
+const job_category_id_list = ref(job_category_id ? [job_category_id] : [])
+// 工作地点数组
+const location_code_list = ref([])
+// 搜索内容
+const searchKeyword = ref("")
+// 岗位种类列表
+const jobCategories = ref([
+  {
+    "id": "6704215862603155720",
+    "name": "研发",
+    "en_name": "R\u0026D",
+    "i18n_name": "研发",
+    "depth": 1,
+    "parent": null,
+    "children": null
+  },
+  {
+    "id": "6704215882479962371",
+    "name": "运营",
+    "en_name": "Operations",
+    "i18n_name": "运营",
+    "depth": 1,
+    "parent": null,
+    "children": null
+  },
+  {
+    "id": "6704215864629004552",
+    "name": "产品",
+    "en_name": "Product",
+    "i18n_name": "产品",
+    "depth": 1,
+    "parent": null,
+    "children": null
+  },
+  {
+    "id": "6709824272505768200",
+    "name": "销售",
+    "en_name": "Sales",
+    "i18n_name": "销售",
+    "depth": 1,
+    "parent": null,
+    "children": null
+  },
+  {
+    "id": "6704215913488451847",
+    "name": "职能 / 支持",
+    "en_name": "Corporate Function / Support",
+    "i18n_name": "职能 / 支持",
+    "depth": 1,
+    "parent": null,
+    "children": null
+  },
+  {
+    "id": "6704215901438216462",
+    "name": "市场",
+    "en_name": "Marketing",
+    "i18n_name": "市场",
+    "depth": 1,
+    "parent": null,
+    "children": null
+  },
+  {
+    "id": "6709824272514156812",
+    "name": "设计",
+    "en_name": "Design",
+    "i18n_name": "设计",
+    "depth": 1,
+    "parent": null,
+    "children": null
+  },
+  {
+    "id": "6850051244971526414",
+    "name": "游戏策划",
+    "en_name": "Game Design",
+    "i18n_name": "游戏策划",
+    "depth": 1,
+    "parent": null,
+    "children": null
+  },
+  {
+    "id": "6794746007419619592",
+    "name": "教研教学",
+    "en_name": "Teaching and researching",
+    "i18n_name": "教研教学",
+    "depth": 1,
+    "parent": null,
+    "children": null
+  }
+])
+// 岗位城市列表
+const jobCities = ref([
+  {
+    "code": "CT_11",
+    "name": "北京",
+    "en_name": "Beijing",
+    "location_type": 3,
+    "i18n_name": "北京",
+    "py_name": "beijing",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_125",
+    "name": "上海",
+    "en_name": "Shanghai",
+    "location_type": 3,
+    "i18n_name": "上海",
+    "py_name": "shanghai",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_128",
+    "name": "深圳",
+    "en_name": "Shenzhen",
+    "location_type": 3,
+    "i18n_name": "深圳",
+    "py_name": "shenzhen",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_52",
+    "name": "杭州",
+    "en_name": "Hangzhou",
+    "location_type": 3,
+    "i18n_name": "杭州",
+    "py_name": "hangzhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_163",
+    "name": "新加坡",
+    "en_name": "Singapore",
+    "location_type": 3,
+    "i18n_name": "新加坡",
+    "py_name": "xinjiapo",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_1103355",
+    "name": "圣何塞",
+    "en_name": "San Jose",
+    "location_type": 3,
+    "i18n_name": "圣何塞",
+    "py_name": "shenghesai",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_45",
+    "name": "广州",
+    "en_name": "Guangzhou",
+    "location_type": 3,
+    "i18n_name": "广州",
+    "py_name": "guangzhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_22",
+    "name": "成都",
+    "en_name": "Chengdu",
+    "location_type": 3,
+    "i18n_name": "成都",
+    "py_name": "chengdu",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_157",
+    "name": "西雅图",
+    "en_name": "Seattle",
+    "location_type": 3,
+    "i18n_name": "西雅图",
+    "py_name": "xiyatu",
+    "mdm_code": null
+  },
+
+  {
+    "code": "CT_94",
+    "name": "洛杉矶",
+    "en_name": "Los Angeles",
+    "location_type": 3,
+    "i18n_name": "洛杉矶",
+    "py_name": "luoshanji",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_243",
+    "name": "山景城",
+    "en_name": "Mountain View",
+    "location_type": 3,
+    "i18n_name": "山景城",
+    "py_name": "shanjingcheng",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_114",
+    "name": "纽约",
+    "en_name": "New York",
+    "location_type": 3,
+    "i18n_name": "纽约",
+    "py_name": "niuyue",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_93",
+    "name": "伦敦",
+    "en_name": "London",
+    "location_type": 3,
+    "i18n_name": "伦敦",
+    "py_name": "lundun",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_37",
+    "name": "都柏林",
+    "en_name": "Dublin",
+    "location_type": 3,
+    "i18n_name": "都柏林",
+    "py_name": "dubolin",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_98",
+    "name": "曼谷",
+    "en_name": "Bangkok",
+    "location_type": 3,
+    "i18n_name": "曼谷",
+    "py_name": "mangu",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_190",
+    "name": "重庆",
+    "en_name": "Chongqing",
+    "location_type": 3,
+    "i18n_name": "重庆",
+    "py_name": "chongqing",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_154",
+    "name": "武汉",
+    "en_name": "Wuhan",
+    "location_type": 3,
+    "i18n_name": "武汉",
+    "py_name": "wuhan",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_65",
+    "name": "吉隆坡",
+    "en_name": "Kuala Lumpur",
+    "location_type": 3,
+    "i18n_name": "吉隆坡",
+    "py_name": "jilongpo",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_169",
+    "name": "雅加达",
+    "en_name": "Jakarta",
+    "location_type": 3,
+    "i18n_name": "雅加达",
+    "py_name": "yajiada",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_34",
+    "name": "东京",
+    "en_name": "Tokyo",
+    "location_type": 3,
+    "i18n_name": "东京",
+    "py_name": "dongjing",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_60",
+    "name": "胡志明市",
+    "en_name": "Ho Chi Minh City",
+    "location_type": 3,
+    "i18n_name": "胡志明市",
+    "py_name": "huzhimingshi",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_107",
+    "name": "南京",
+    "en_name": "Nanjing",
+    "location_type": 3,
+    "i18n_name": "南京",
+    "py_name": "nanjing",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_155",
+    "name": "西安",
+    "en_name": "Xi'an",
+    "location_type": 3,
+    "i18n_name": "西安",
+    "py_name": "xian",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_233",
+    "name": "华盛顿哥伦比亚特区",
+    "en_name": "Washington D.C.",
+    "location_type": 3,
+    "i18n_name": "华盛顿哥伦比亚特区",
+    "py_name": "huashengdun",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_6",
+    "name": "柏林",
+    "en_name": "Berlin",
+    "location_type": 3,
+    "i18n_name": "柏林",
+    "py_name": "bolin",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_247",
+    "name": "奥斯汀",
+    "en_name": "Austin",
+    "location_type": 3,
+    "i18n_name": "奥斯汀",
+    "py_name": "aositing",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_75",
+    "name": "旧金山",
+    "en_name": "San Francisco",
+    "location_type": 3,
+    "i18n_name": "旧金山",
+    "py_name": "jiujinshan",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_244",
+    "name": "悉尼",
+    "en_name": "Sydney",
+    "location_type": 3,
+    "i18n_name": "悉尼",
+    "py_name": "xini",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_33",
+    "name": "迪拜",
+    "en_name": "Dubai",
+    "location_type": 3,
+    "i18n_name": "迪拜",
+    "py_name": "dibai",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_97",
+    "name": "马尼拉",
+    "en_name": "Manila",
+    "location_type": 3,
+    "i18n_name": "马尼拉",
+    "py_name": "manila",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_134",
+    "name": "首尔",
+    "en_name": "Seoul",
+    "location_type": 3,
+    "i18n_name": "首尔",
+    "py_name": "shouer",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_130",
+    "name": "圣保罗",
+    "en_name": "Sao Paulo",
+    "location_type": 3,
+    "i18n_name": "圣保罗",
+    "py_name": "shengbaoluo",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_158",
+    "name": "厦门",
+    "en_name": "Xiamen",
+    "location_type": 3,
+    "i18n_name": "厦门",
+    "py_name": "xiamen",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_66",
+    "name": "济南",
+    "en_name": "Jinan",
+    "location_type": 3,
+    "i18n_name": "济南",
+    "py_name": "jinan",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_100065",
+    "name": "三亚",
+    "en_name": "Sanya",
+    "location_type": 3,
+    "i18n_name": "三亚",
+    "py_name": "sanya",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_143",
+    "name": "天津",
+    "en_name": "Tianjin",
+    "location_type": 3,
+    "i18n_name": "天津",
+    "py_name": "tianjin",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_55",
+    "name": "合肥",
+    "en_name": "Hefei",
+    "location_type": 3,
+    "i18n_name": "合肥",
+    "py_name": "hefei",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_80",
+    "name": "昆明",
+    "en_name": "Kunming",
+    "location_type": 3,
+    "i18n_name": "昆明",
+    "py_name": "kunming",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_20",
+    "name": "长沙",
+    "en_name": "Changsha",
+    "location_type": 3,
+    "i18n_name": "长沙",
+    "py_name": "changsha",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_101459",
+    "name": "塔吉格",
+    "en_name": "Taguig",
+    "location_type": 3,
+    "i18n_name": "塔吉格",
+    "py_name": "tagige",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_188",
+    "name": "郑州",
+    "en_name": "Zhengzhou",
+    "location_type": 3,
+    "i18n_name": "郑州",
+    "py_name": "zhengzhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_103",
+    "name": "墨西哥城",
+    "en_name": "Mexico City",
+    "location_type": 3,
+    "i18n_name": "墨西哥城",
+    "py_name": "moxigecheng",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_40",
+    "name": "福州",
+    "en_name": "Fuzhou",
+    "location_type": 3,
+    "i18n_name": "福州",
+    "py_name": "fuzhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_119",
+    "name": "青岛",
+    "en_name": "Qingdao",
+    "location_type": 3,
+    "i18n_name": "青岛",
+    "py_name": "qingdao",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_199",
+    "name": "苏州",
+    "en_name": "Suzhou",
+    "location_type": 3,
+    "i18n_name": "苏州",
+    "py_name": "suzhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_100762",
+    "name": "亚特兰大",
+    "en_name": "Atlanta",
+    "location_type": 3,
+    "i18n_name": "亚特兰大",
+    "py_name": "yatelanda",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_105",
+    "name": "南昌",
+    "en_name": "Nanchang",
+    "location_type": 3,
+    "i18n_name": "南昌",
+    "py_name": "nanchang",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_1000001",
+    "name": "阿什本",
+    "en_name": "Ashburn",
+    "location_type": 3,
+    "i18n_name": "阿什本",
+    "py_name": "ashiben",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_100766",
+    "name": "阿姆斯特丹",
+    "en_name": "Amsterdam",
+    "location_type": 3,
+    "i18n_name": "阿姆斯特丹",
+    "py_name": "amusitedan",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_209",
+    "name": "华沙",
+    "en_name": "Warsaw",
+    "location_type": 3,
+    "i18n_name": "华沙",
+    "py_name": "huasha",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_112",
+    "name": "宁波",
+    "en_name": "Ningbo",
+    "location_type": 3,
+    "i18n_name": "宁波",
+    "py_name": "ningbo",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_101443",
+    "name": "希尔斯伯勒",
+    "en_name": "Hillsboro",
+    "location_type": 3,
+    "i18n_name": "希尔斯伯勒",
+    "py_name": "xiersibole",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_204",
+    "name": "米兰",
+    "en_name": "Milan",
+    "location_type": 3,
+    "i18n_name": "米兰",
+    "py_name": "milan",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_141",
+    "name": "太原",
+    "en_name": "Taiyuan",
+    "location_type": 3,
+    "i18n_name": "太原",
+    "py_name": "taiyuan",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_48",
+    "name": "哈尔滨",
+    "en_name": "Harbin",
+    "location_type": 3,
+    "i18n_name": "哈尔滨",
+    "py_name": "haerbin",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_25",
+    "name": "大连",
+    "en_name": "Dalian",
+    "location_type": 3,
+    "i18n_name": "大连",
+    "py_name": "dalian",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_100772",
+    "name": "波哥大",
+    "en_name": "Bogota",
+    "location_type": 3,
+    "i18n_name": "波哥大",
+    "py_name": "bogeda",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_221",
+    "name": "芝加哥",
+    "en_name": "Chicago",
+    "location_type": 3,
+    "i18n_name": "芝加哥",
+    "py_name": "zhijiage",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_36",
+    "name": "东莞",
+    "en_name": "Dongguan",
+    "location_type": 3,
+    "i18n_name": "东莞",
+    "py_name": "dongguan",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_129",
+    "name": "沈阳",
+    "en_name": "Shenyang",
+    "location_type": 3,
+    "i18n_name": "沈阳",
+    "py_name": "shenyang",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_39",
+    "name": "佛山",
+    "en_name": "Foshan",
+    "location_type": 3,
+    "i18n_name": "佛山",
+    "py_name": "foshan",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_242",
+    "name": "多伦多",
+    "en_name": "Toronto",
+    "location_type": 3,
+    "i18n_name": "多伦多",
+    "py_name": "duolunduo",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_5",
+    "name": "巴黎",
+    "en_name": "Paris",
+    "location_type": 3,
+    "i18n_name": "巴黎",
+    "py_name": "bali",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_249",
+    "name": "特拉维夫",
+    "en_name": "Tel Aviv",
+    "location_type": 3,
+    "i18n_name": "特拉维夫",
+    "py_name": "telaweifu",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_121",
+    "name": "泉州",
+    "en_name": "Quanzhou",
+    "location_type": 3,
+    "i18n_name": "泉州",
+    "py_name": "quanzhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_49",
+    "name": "海口",
+    "en_name": "Haikou",
+    "location_type": 3,
+    "i18n_name": "海口",
+    "py_name": "haikou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_88",
+    "name": "临汾",
+    "en_name": "Linfen",
+    "location_type": 3,
+    "i18n_name": "临汾",
+    "py_name": "linfen",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_151",
+    "name": "无锡",
+    "en_name": "Wuxi",
+    "location_type": 3,
+    "i18n_name": "无锡",
+    "py_name": "wuxi",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_1102285",
+    "name": "斯德哥尔摩",
+    "en_name": "Stockholm",
+    "location_type": 3,
+    "i18n_name": "斯德哥尔摩",
+    "py_name": "sidegeermo",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_100",
+    "name": "孟买",
+    "en_name": "Mumbai",
+    "location_type": 3,
+    "i18n_name": "孟买",
+    "py_name": "mengmai",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_108",
+    "name": "南宁",
+    "en_name": "Nanning",
+    "location_type": 3,
+    "i18n_name": "南宁",
+    "py_name": "nanning",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_173",
+    "name": "宜宾",
+    "en_name": "Yibin",
+    "location_type": 3,
+    "i18n_name": "宜宾",
+    "py_name": "yibin",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_96",
+    "name": "马德里",
+    "en_name": "Madrid",
+    "location_type": 3,
+    "i18n_name": "马德里",
+    "py_name": "madeli",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_101382",
+    "name": "阿斯塔纳",
+    "en_name": "Astana",
+    "location_type": 3,
+    "i18n_name": "阿斯塔纳",
+    "py_name": "asitana",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_77",
+    "name": "卡萨布兰卡",
+    "en_name": "Casablanca",
+    "location_type": 3,
+    "i18n_name": "卡萨布兰卡",
+    "py_name": "kasabulanka",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_79",
+    "name": "开罗",
+    "en_name": "Cairo",
+    "location_type": 3,
+    "i18n_name": "开罗",
+    "py_name": "kailuo",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_206",
+    "name": "伊斯坦布尔",
+    "en_name": "Istanbul",
+    "location_type": 3,
+    "i18n_name": "伊斯坦布尔",
+    "py_name": "yisitanbuer",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_47",
+    "name": "贵阳",
+    "en_name": "Guiyang",
+    "location_type": 3,
+    "i18n_name": "贵阳",
+    "py_name": "guiyang",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_159",
+    "name": "中国香港",
+    "en_name": "Hong Kong (China)",
+    "location_type": 3,
+    "i18n_name": "中国香港",
+    "py_name": "zhongguoxianggang",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_19",
+    "name": "长春",
+    "en_name": "Changchun",
+    "location_type": 3,
+    "i18n_name": "长春",
+    "py_name": "changchun",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_218",
+    "name": "约翰内斯堡",
+    "en_name": "Johannesburg",
+    "location_type": 3,
+    "i18n_name": "约翰内斯堡",
+    "py_name": "yuehanneisibao",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_71",
+    "name": "金华",
+    "en_name": "Jinhua",
+    "location_type": 3,
+    "i18n_name": "金华",
+    "py_name": "jinhua",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_189",
+    "name": "中山",
+    "en_name": "Zhongshan",
+    "location_type": 3,
+    "i18n_name": "中山",
+    "py_name": "zhongshan",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_100764",
+    "name": "波士顿",
+    "en_name": "Boston",
+    "location_type": 3,
+    "i18n_name": "波士顿",
+    "py_name": "boshidun",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_83",
+    "name": "兰州",
+    "en_name": "Lanzhou",
+    "location_type": 3,
+    "i18n_name": "兰州",
+    "py_name": "lanzhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_226",
+    "name": "慕尼黑",
+    "en_name": "Munich",
+    "location_type": 3,
+    "i18n_name": "慕尼黑",
+    "py_name": "munihei",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_203",
+    "name": "圣地亚哥",
+    "en_name": "San Diego",
+    "location_type": 3,
+    "i18n_name": "圣地亚哥",
+    "py_name": "shengdeyage",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_1100743",
+    "name": "汉堡",
+    "en_name": "Hamburg",
+    "location_type": 3,
+    "i18n_name": "汉堡",
+    "py_name": "hanbao",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_100051",
+    "name": "澄迈",
+    "en_name": "chengmai",
+    "location_type": 3,
+    "i18n_name": "澄迈",
+    "py_name": "chengmai",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_133",
+    "name": "石家庄",
+    "en_name": "Shijiazhuang",
+    "location_type": 3,
+    "i18n_name": "石家庄",
+    "py_name": "shijiazhuang",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_127",
+    "name": "绍兴",
+    "en_name": "Shaoxing",
+    "location_type": 3,
+    "i18n_name": "绍兴",
+    "py_name": "shaoxing",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_100747",
+    "name": "底特律",
+    "en_name": "Detroit",
+    "location_type": 3,
+    "i18n_name": "底特律",
+    "py_name": "ditelv",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_149",
+    "name": "温州",
+    "en_name": "Wenzhou",
+    "location_type": 3,
+    "i18n_name": "温州",
+    "py_name": "wenzhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_44",
+    "name": "古尔冈",
+    "en_name": "Gurgaon",
+    "location_type": 3,
+    "i18n_name": "古尔冈",
+    "py_name": "guergang",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_100166",
+    "name": "内江",
+    "en_name": "Neijiang",
+    "location_type": 3,
+    "i18n_name": "内江",
+    "py_name": "neijiang",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_100755",
+    "name": "拉各斯",
+    "en_name": "Lagos",
+    "location_type": 3,
+    "i18n_name": "拉各斯",
+    "py_name": "Lagesi",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_101",
+    "name": "绵阳",
+    "en_name": "Mianyang",
+    "location_type": 3,
+    "i18n_name": "绵阳",
+    "py_name": "mianyang",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_195",
+    "name": "淄博",
+    "en_name": "Zibo",
+    "location_type": 3,
+    "i18n_name": "淄博",
+    "py_name": "zibo",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_104",
+    "name": "纳什维尔",
+    "en_name": "Nashville",
+    "location_type": 3,
+    "i18n_name": "纳什维尔",
+    "py_name": "nashenweier",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_89",
+    "name": "临沂",
+    "en_name": "Linyi",
+    "location_type": 3,
+    "i18n_name": "临沂",
+    "py_name": "linyi",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_90",
+    "name": "柳州",
+    "en_name": "Liuzhou",
+    "location_type": 3,
+    "i18n_name": "柳州",
+    "py_name": "liuzhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_170",
+    "name": "烟台",
+    "en_name": "Yantai",
+    "location_type": 3,
+    "i18n_name": "烟台",
+    "py_name": "yantai",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_142",
+    "name": "唐山",
+    "en_name": "Tangshan",
+    "location_type": 3,
+    "i18n_name": "唐山",
+    "py_name": "tangshan",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_137",
+    "name": "台州",
+    "en_name": "Taizhou",
+    "location_type": 3,
+    "i18n_name": "台州",
+    "py_name": "taizhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_100026",
+    "name": "清远",
+    "en_name": "Qingyuan",
+    "location_type": 3,
+    "i18n_name": "清远",
+    "py_name": "qingyuan",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_177",
+    "name": "银川",
+    "en_name": "Yinchuan",
+    "location_type": 3,
+    "i18n_name": "银川",
+    "py_name": "yinchuan",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_1103347",
+    "name": "凤凰城",
+    "en_name": "Phoenix",
+    "location_type": 3,
+    "i18n_name": "凤凰城",
+    "py_name": "fenghuangcheng",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_123",
+    "name": "汕头",
+    "en_name": "Shantou",
+    "location_type": 3,
+    "i18n_name": "汕头",
+    "py_name": "shantou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_167",
+    "name": "徐州",
+    "en_name": "Xuzhou",
+    "location_type": 3,
+    "i18n_name": "徐州",
+    "py_name": "xuzhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_32",
+    "name": "德州",
+    "en_name": "Dezhou",
+    "location_type": 3,
+    "i18n_name": "德州",
+    "py_name": "dezhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_27",
+    "name": "大同",
+    "en_name": "Datong",
+    "location_type": 3,
+    "i18n_name": "大同",
+    "py_name": "datong",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_120",
+    "name": "曲靖",
+    "en_name": "Qujing",
+    "location_type": 3,
+    "i18n_name": "曲靖",
+    "py_name": "qujing",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_118",
+    "name": "秦皇岛",
+    "en_name": "Qinhuangdao",
+    "location_type": 3,
+    "i18n_name": "秦皇岛",
+    "py_name": "qinhuangdao",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_117",
+    "name": "齐齐哈尔",
+    "en_name": "Qiqihaer",
+    "location_type": 3,
+    "i18n_name": "齐齐哈尔",
+    "py_name": "qiqihaer",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_68",
+    "name": "嘉兴",
+    "en_name": "Jiaxing",
+    "location_type": 3,
+    "i18n_name": "嘉兴",
+    "py_name": "jiaxing",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_111",
+    "name": "南阳",
+    "en_name": "Nanyang",
+    "location_type": 3,
+    "i18n_name": "南阳",
+    "py_name": "nanyang",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_43",
+    "name": "赣州",
+    "en_name": "Ganzhou",
+    "location_type": 3,
+    "i18n_name": "赣州",
+    "py_name": "ganzhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_124",
+    "name": "商丘",
+    "en_name": "Shangqiu",
+    "location_type": 3,
+    "i18n_name": "商丘",
+    "py_name": "shangqiu",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_126",
+    "name": "上饶",
+    "en_name": "Shangrao",
+    "location_type": 3,
+    "i18n_name": "上饶",
+    "py_name": "shangrao",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_241",
+    "name": "红河",
+    "en_name": "Honghe",
+    "location_type": 3,
+    "i18n_name": "红河",
+    "py_name": "honghe",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_24",
+    "name": "赤峰",
+    "en_name": "Chifeng",
+    "location_type": 3,
+    "i18n_name": "赤峰",
+    "py_name": "chifeng",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_110",
+    "name": "南通",
+    "en_name": "Nantong",
+    "location_type": 3,
+    "i18n_name": "南通",
+    "py_name": "nantong",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_235",
+    "name": "布鲁塞尔",
+    "en_name": "Brussels",
+    "location_type": 3,
+    "i18n_name": "布鲁塞尔",
+    "py_name": "bulusaier",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_50",
+    "name": "邯郸",
+    "en_name": "Handan",
+    "location_type": 3,
+    "i18n_name": "邯郸",
+    "py_name": "handan",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_106",
+    "name": "南充",
+    "en_name": "Nanchong",
+    "location_type": 3,
+    "i18n_name": "南充",
+    "py_name": "nanchong",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_147",
+    "name": "潍坊",
+    "en_name": "Weifang",
+    "location_type": 3,
+    "i18n_name": "潍坊",
+    "py_name": "weifang",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_57",
+    "name": "衡水",
+    "en_name": "Hengshui",
+    "location_type": 3,
+    "i18n_name": "衡水",
+    "py_name": "hengshui",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_59",
+    "name": "呼和浩特",
+    "en_name": "Huhehot",
+    "location_type": 3,
+    "i18n_name": "呼和浩特",
+    "py_name": "huhehaote",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_230",
+    "name": "西昌",
+    "en_name": "Xichang",
+    "location_type": 3,
+    "i18n_name": "西昌",
+    "py_name": "xichang",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_23",
+    "name": "承德",
+    "en_name": "Chengde",
+    "location_type": 3,
+    "i18n_name": "承德",
+    "py_name": "chengde",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_62",
+    "name": "淮安",
+    "en_name": "Huaian",
+    "location_type": 3,
+    "i18n_name": "淮安",
+    "py_name": "huaian",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_100913",
+    "name": "尔湾",
+    "en_name": "Irvine",
+    "location_type": 3,
+    "i18n_name": "尔湾",
+    "py_name": "erwan",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_186",
+    "name": "肇庆",
+    "en_name": "Zhaoqing",
+    "location_type": 3,
+    "i18n_name": "肇庆",
+    "py_name": "zhaoqing",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_227",
+    "name": "大理",
+    "en_name": "Dali",
+    "location_type": 3,
+    "i18n_name": "大理",
+    "py_name": "dali",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_224",
+    "name": "自贡",
+    "en_name": "Zigong",
+    "location_type": 3,
+    "i18n_name": "自贡",
+    "py_name": "zigong",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_74",
+    "name": "九江",
+    "en_name": "Jiujiang",
+    "location_type": 3,
+    "i18n_name": "九江",
+    "py_name": "jiujiang",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_15",
+    "name": "沧州",
+    "en_name": "Cangzhou",
+    "location_type": 3,
+    "i18n_name": "沧州",
+    "py_name": "cangzhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_171",
+    "name": "盐城",
+    "en_name": "Yancheng",
+    "location_type": 3,
+    "i18n_name": "盐城",
+    "py_name": "yancheng",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_150",
+    "name": "乌鲁木齐",
+    "en_name": "Urumqi",
+    "location_type": 3,
+    "i18n_name": "乌鲁木齐",
+    "py_name": "wulumuqi",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_162",
+    "name": "新德里",
+    "en_name": "New Delhi",
+    "location_type": 3,
+    "i18n_name": "新德里",
+    "py_name": "xindeli",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_166",
+    "name": "邢台",
+    "en_name": "Xingtai",
+    "location_type": 3,
+    "i18n_name": "邢台",
+    "py_name": "xingtai",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_87",
+    "name": "聊城",
+    "en_name": "Liaocheng",
+    "location_type": 3,
+    "i18n_name": "聊城",
+    "py_name": "liaocheng",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_197",
+    "name": "衢州",
+    "en_name": "Quzhou",
+    "location_type": 3,
+    "i18n_name": "衢州",
+    "py_name": "quzhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_192",
+    "name": "珠海",
+    "en_name": "Zhuhai",
+    "location_type": 3,
+    "i18n_name": "珠海",
+    "py_name": "zhuhai",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_9",
+    "name": "保定",
+    "en_name": "Baoding",
+    "location_type": 3,
+    "i18n_name": "保定",
+    "py_name": "baoding",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_17",
+    "name": "常熟",
+    "en_name": "Changshu",
+    "location_type": 3,
+    "i18n_name": "常熟",
+    "py_name": "changshu",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_92",
+    "name": "龙岩",
+    "en_name": "Longyan",
+    "location_type": 3,
+    "i18n_name": "龙岩",
+    "py_name": "longyan",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_185",
+    "name": "张家口",
+    "en_name": "Zhangjiakou",
+    "location_type": 3,
+    "i18n_name": "张家口",
+    "py_name": "zhangjiakou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_182",
+    "name": "湛江",
+    "en_name": "Zhanjiang",
+    "location_type": 3,
+    "i18n_name": "湛江",
+    "py_name": "zhanjiang",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_95",
+    "name": "洛阳",
+    "en_name": "Luoyang",
+    "location_type": 3,
+    "i18n_name": "洛阳",
+    "py_name": "luoyang",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_174",
+    "name": "宜昌",
+    "en_name": "Yichang",
+    "location_type": 3,
+    "i18n_name": "宜昌",
+    "py_name": "yichang",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_100004",
+    "name": "亳州",
+    "en_name": "Bozhou",
+    "location_type": 3,
+    "i18n_name": "亳州",
+    "py_name": "bozhou",
+    "mdm_code": null
+  },
+  {
+    "code": "CT_100156",
+    "name": "眉山",
+    "en_name": "Meishan",
+    "location_type": 3,
+    "i18n_name": "眉山",
+    "py_name": "meishan",
+    "mdm_code": null
+  }])
+// 加载
+const loading = ref(false)
+const currentPage = ref(1)
+const results = ref({})
+
+// 加载动画
+// const loadingIns = proxy.$loading()
+//
+// setTimeout(() => {
+//   loadingIns.close()
+// }, 500)
+
+// 计算属性
+const clearable = computed(() => {
+  return (
+      job_category_id_list.value.length !== 0 || location_code_list.value.length !== 0
+  )
+})
+const searchBar = ref()
+
+// mounted
+onMounted(() => {
+  proxy.$nextTick(() => {
+    positionY = getOffsetTop(document.body, searchBar.value);
+
+    searchBarClientHeight = searchBar.value.clientHeight;
+  })
+
+  const onPageScroll = () => {
+    const top = searchBar.value.getBoundingClientRect().top;
+
+    searchBarFixedTop.value =
+        window.scrollY > positionY - searchBarClientHeight / 2;
+  }
+
+  window.addEventListener("scroll", onPageScroll);
+
+  EventBus.on("hook:destroyed", () => {
+    window.removeEventListener("scroll", onPageScroll);
+  });
+
+})
+
+const queryFilter = computed(() => {
+  return {
+    job_category_id_list: job_category_id_list.value,
+    location_code_list: location_code_list.value,
+    keyword: searchKeyword.value,
+    offset: Math.max(0, currentPage.value - 1) * 10
+  }
+})
+
+watch(queryFilter.value, (newValue, oldValue) => {
+  searchBarFixedTop.value && window.scrollTo(0, positionY)
+})
+
+const clearFilter = () => {
+  if (job_category_id_list.value.length) {
+    job_category_id_list.value = []
+  }
+  if (location_code_list.value.length) {
+    location_code_list.value = []
+  }
+}
+
+const fetchList = () => {
+  loading.value = true
+  setTimeout(() => {
+    results.value = {
+      "job_post_list": [
+        {
+          "id": "7225444089478367548",
+          "title": "机器人感知工程师-AILab",
+          "sub_title": "",
+          "description": "1、负责开展机器人3D感知相关领域的研究和开发工作，进行对应的方案调研、算法设计和模型优化等工作。\n2、协助团队完成相关前沿的技术应用和创新，力求实现科技和业务的完美结合。",
+          "requirement": "1、熟悉各种计算机视觉、计算机图形学、深度学习等相关理论，具备良好的算法分析和设计能力；\n2、熟悉NERF、深度估计、BEV等相关3D感知的工作，并具有相关算法的实践经验；\n3、熟练使用Python等编程语言，熟练使用pytorch等相关工具；\n4、具有良好的英语阅读、写作能力，能够阅读和理解相关领域的英文文献；\n5、具备独立承担科研项目的能力，有相关领域顶会论文者优先。",
+          "job_category": {
+            "id": "6704215862603155720",
+            "name": "研发",
+            "en_name": "R&D",
+            "i18n_name": "研发",
+            "depth": 1,
+            "parent": null,
+            "children": null
+          },
+          "city_info": {
+            "code": "CT_11",
+            "name": "北京",
+            "en_name": "Beijing",
+            "location_type": null,
+            "i18n_name": "北京",
+            "py_name": null,
+            "mdm_code": null
+          },
+          "recruit_type": {
+            "id": "101",
+            "name": "正式",
+            "en_name": "Regular",
+            "i18n_name": "正式",
+            "depth": 2,
+            "parent": {
+              "id": "1",
+              "name": "社招",
+              "en_name": "Experienced",
+              "i18n_name": "社招",
+              "depth": 1,
+              "parent": null,
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "children": null,
+            "active_status": 1,
+            "selectability": 1
+          },
+          "publish_time": 1682304868000,
+          "job_hot_flag": 2,
+          "job_subject": null,
+          "code": "A151429",
+          "department_id": null,
+          "job_function": null,
+          "job_process_id": "6694104661676411150",
+          "recommend_id": null,
+          "city_list": [
+            {
+              "code": "CT_11",
+              "name": "北京",
+              "en_name": "Beijing",
+              "location_type": null,
+              "i18n_name": "北京",
+              "py_name": null,
+              "mdm_code": null
+            }
+          ],
+          "job_post_info": {
+            "id": null,
+            "job_id": null,
+            "title": null,
+            "sub_title": null,
+            "address_id": null,
+            "address": null,
+            "city": null,
+            "education": null,
+            "experience": null,
+            "description": null,
+            "requirement": null,
+            "min_salary": null,
+            "max_salary": null,
+            "currency": null,
+            "head_count": null,
+            "crator_id": null,
+            "expiry_time": null,
+            "progress": null,
+            "department_id": null,
+            "job_type": null,
+            "recruitment_type": {
+              "id": "101",
+              "name": "正式",
+              "en_name": "Regular",
+              "i18n_name": "正式",
+              "depth": 2,
+              "parent": {
+                "id": "1",
+                "name": "社招",
+                "en_name": "Experienced",
+                "i18n_name": "社招",
+                "depth": 1,
+                "parent": null,
+                "children": null,
+                "active_status": 1,
+                "selectability": 1
+              },
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "job_process_time": null,
+            "job_in_charge_user_id": null,
+            "biz_create_time": null,
+            "HighlightList": null,
+            "JobChannelPublishList": null,
+            "required_degree": null,
+            "never_expiry": null,
+            "job_hot_flag": null,
+            "subject": null,
+            "sequence": null,
+            "min_level": null,
+            "max_level": null,
+            "job_post_object_value_map": {},
+            "code": null,
+            "job_active_status": null,
+            "job_process_type": null,
+            "biz_modify_time": null,
+            "job_function": null,
+            "job_process": null,
+            "job_process_id": null,
+            "job_category": null,
+            "address_list": null,
+            "city_list": null,
+            "correlation_job_list": null,
+            "tag_list": null,
+            "department": null
+          }
+        },
+
+        {
+          "id": "7225148933311318333",
+          "title": "销售运营管理负责人",
+          "sub_title": "",
+          "description": "1、根据公司年度经营战略，搭建销售管理体系，制定标准化的工作流程；\n2、梳理并规划销售管理相关流程，赋能销售体系运转顺畅，支持业务快速增长同时保障业务环节合规，风险可控；\n3、带领团队完成经营数预测，月度季度经营数据分析；\n4、结合业务模式制定业务管理的制度体系、业务流程、以及激励考核机制，并确保落地实施，通过对目标的层层细化，调整策略，提升业务目标达成率。",
+          "requirement": "1、本科及以上学历，8年以上销售运营或销售管理相关经验相关工作经验，有消费电子硬件行业背景优先；\n2、具备优秀的数据分析能力；能够独立完成数据获取、数据处理、数据分析并产出分析报告；\n3、有较强的推动力强、能落地，具备跨部门、跨组织沟通协调经验，能够应对复杂的项目环境；\n4、具备持续学习的能力，责任心强，有良好的团队合作精神；\n5、英语口语优秀者优先。",
+          "job_category": {
+            "id": "6709824273038444807",
+            "name": "销售管理",
+            "en_name": "Sales Manager",
+            "i18n_name": "销售管理",
+            "depth": 2,
+            "parent": {
+              "id": "6709824272505768200",
+              "name": "销售",
+              "en_name": "Sales",
+              "i18n_name": "销售",
+              "depth": 1,
+              "parent": null,
+              "children": null
+            },
+            "children": null
+          },
+          "city_info": {
+            "code": "CT_11",
+            "name": "北京",
+            "en_name": "Beijing",
+            "location_type": null,
+            "i18n_name": "北京",
+            "py_name": null,
+            "mdm_code": null
+          },
+          "recruit_type": {
+            "id": "101",
+            "name": "正式",
+            "en_name": "Regular",
+            "i18n_name": "正式",
+            "depth": 2,
+            "parent": {
+              "id": "1",
+              "name": "社招",
+              "en_name": "Experienced",
+              "i18n_name": "社招",
+              "depth": 1,
+              "parent": null,
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "children": null,
+            "active_status": 1,
+            "selectability": 1
+          },
+          "publish_time": 1682236538000,
+          "job_hot_flag": 2,
+          "job_subject": null,
+          "code": "A112715",
+          "department_id": null,
+          "job_function": null,
+          "job_process_id": "6694104661676411150",
+          "recommend_id": null,
+          "city_list": [{
+            "code": "CT_11",
+            "name": "北京",
+            "en_name": "Beijing",
+            "location_type": null,
+            "i18n_name": "北京",
+            "py_name": null,
+            "mdm_code": null
+          }],
+          "job_post_info": {
+            "id": null,
+            "job_id": null,
+            "title": null,
+            "sub_title": null,
+            "address_id": null,
+            "address": null,
+            "city": null,
+            "education": null,
+            "experience": null,
+            "description": null,
+            "requirement": null,
+            "min_salary": null,
+            "max_salary": null,
+            "currency": null,
+            "head_count": null,
+            "crator_id": null,
+            "expiry_time": null,
+            "progress": null,
+            "department_id": null,
+            "job_type": null,
+            "recruitment_type": {
+              "id": "101",
+              "name": "正式",
+              "en_name": "Regular",
+              "i18n_name": "正式",
+              "depth": 2,
+              "parent": {
+                "id": "1",
+                "name": "社招",
+                "en_name": "Experienced",
+                "i18n_name": "社招",
+                "depth": 1,
+                "parent": null,
+                "children": null,
+                "active_status": 1,
+                "selectability": 1
+              },
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "job_process_time": null,
+            "job_in_charge_user_id": null,
+            "biz_create_time": null,
+            "HighlightList": null,
+            "JobChannelPublishList": null,
+            "required_degree": null,
+            "never_expiry": null,
+            "job_hot_flag": null,
+            "subject": null,
+            "sequence": null,
+            "min_level": null,
+            "max_level": null,
+            "job_post_object_value_map": {},
+            "code": null,
+            "job_active_status": null,
+            "job_process_type": null,
+            "biz_modify_time": null,
+            "job_function": null,
+            "job_process": null,
+            "job_process_id": null,
+            "job_category": null,
+            "address_list": null,
+            "city_list": null,
+            "correlation_job_list": null,
+            "tag_list": null,
+            "department": null
+          }
+        },
+        {
+          "id": "7226993338502482213",
+          "title": "泛垂类内容质量运营",
+          "sub_title": "",
+          "description": "1、对「今日头条」APP泛垂类（主要包含生活、美食、家居、时尚、教育、汽车、体育、情感、旅游）等领域内容质量和画风进行把控；\n2、熟悉相关垂类领域的优质内容，有独立证伪能力，可以快速辨别相关领域文章中的虚假内容和低质内容；\n3、协助维护今日头条站内泛垂类内容质量与画风，改善用户体验；\n4、优化相关运营向策略规则，提升运营效率。",
+          "requirement": "1、本科及以上学历，3年及以上相关内容从业经验，熟悉相关领域的内容生态；\n2、善于洞察目前内容行业动态，对内容风险、新闻价值、PGC/UGC内容优劣有准确判断力；\n3、有原创内容编辑、行业分析研究等工作经验者优先；\n4、对互联网行业有一定了解，乐于接受新事物，自我驱力强，能适应快节奏工作，可接受排班。\n",
+          "job_category": {
+            "id": "6704215961064442123",
+            "name": "内容运营",
+            "en_name": "Content ops",
+            "i18n_name": "内容运营",
+            "depth": 2,
+            "parent": {
+              "id": "6704215882479962371",
+              "name": "运营",
+              "en_name": "Operations",
+              "i18n_name": "运营",
+              "depth": 1,
+              "parent": null,
+              "children": null
+            },
+            "children": null
+          },
+          "city_info": {
+            "code": "CT_11",
+            "name": "北京",
+            "en_name": "Beijing",
+            "location_type": null,
+            "i18n_name": "北京",
+            "py_name": null,
+            "mdm_code": null
+          },
+          "recruit_type": {
+            "id": "101",
+            "name": "正式",
+            "en_name": "Regular",
+            "i18n_name": "正式",
+            "depth": 2,
+            "parent": {
+              "id": "1",
+              "name": "社招",
+              "en_name": "Experienced",
+              "i18n_name": "社招",
+              "depth": 1,
+              "parent": null,
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "children": null,
+            "active_status": 1,
+            "selectability": 1
+          },
+          "publish_time": 1682665614000,
+          "job_hot_flag": 2,
+          "job_subject": null,
+          "code": "A153582",
+          "department_id": null,
+          "job_function": null,
+          "job_process_id": "6694104661676411150",
+          "recommend_id": null,
+          "city_list": [{
+            "code": "CT_11",
+            "name": "北京",
+            "en_name": "Beijing",
+            "location_type": null,
+            "i18n_name": "北京",
+            "py_name": null,
+            "mdm_code": null
+          }],
+          "job_post_info": {
+            "id": null,
+            "job_id": null,
+            "title": null,
+            "sub_title": null,
+            "address_id": null,
+            "address": null,
+            "city": null,
+            "education": null,
+            "experience": null,
+            "description": null,
+            "requirement": null,
+            "min_salary": null,
+            "max_salary": null,
+            "currency": null,
+            "head_count": null,
+            "crator_id": null,
+            "expiry_time": null,
+            "progress": null,
+            "department_id": null,
+            "job_type": null,
+            "recruitment_type": {
+              "id": "101",
+              "name": "正式",
+              "en_name": "Regular",
+              "i18n_name": "正式",
+              "depth": 2,
+              "parent": {
+                "id": "1",
+                "name": "社招",
+                "en_name": "Experienced",
+                "i18n_name": "社招",
+                "depth": 1,
+                "parent": null,
+                "children": null,
+                "active_status": 1,
+                "selectability": 1
+              },
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "job_process_time": null,
+            "job_in_charge_user_id": null,
+            "biz_create_time": null,
+            "HighlightList": null,
+            "JobChannelPublishList": null,
+            "required_degree": null,
+            "never_expiry": null,
+            "job_hot_flag": null,
+            "subject": null,
+            "sequence": null,
+            "min_level": null,
+            "max_level": null,
+            "job_post_object_value_map": {},
+            "code": null,
+            "job_active_status": null,
+            "job_process_type": null,
+            "biz_modify_time": null,
+            "job_function": null,
+            "job_process": null,
+            "job_process_id": null,
+            "job_category": null,
+            "address_list": null,
+            "city_list": null,
+            "correlation_job_list": null,
+            "tag_list": null,
+            "department": null
+          }
+        },
+        {
+          "id": "7224394926765721913",
+          "title": "EMU/FPGA工程师",
+          "sub_title": "",
+          "description": "1、Emulation/FPGA平台搭建和维护；\n2、支持芯片项目的Emulation/FPGA联合调试工作。",
+          "requirement": "1、微电子、计算机专业硕士研究生及以上学历，3年以上Emulation/FPGA相关经验；\n2、精通Palladium/Protium/Zebu/Veloce/Haps/S2C等至少一种平台；\n3、掌握至少一种高速接口在EMU/FPGA上的调试经验：DDR/PCLe;\n4、熟悉主流处理器体系架构和芯片互联技术；\n5、熟悉掌握C、汇编语言和底层软件代码开发调试；\n6、熟练使用python/shell/tcl/perl等脚本语言；\n7、有完整芯片TO经历及有验证相关工作经历为加分项。",
+          "job_category": {
+            "id": "6704215862603155720",
+            "name": "研发",
+            "en_name": "R&D",
+            "i18n_name": "研发",
+            "depth": 1,
+            "parent": null,
+            "children": null
+          },
+          "city_info": {
+            "code": "CT_125",
+            "name": "上海",
+            "en_name": "Shanghai",
+            "location_type": null,
+            "i18n_name": "上海",
+            "py_name": null,
+            "mdm_code": null
+          },
+          "recruit_type": {
+            "id": "101",
+            "name": "正式",
+            "en_name": "Regular",
+            "i18n_name": "正式",
+            "depth": 2,
+            "parent": {
+              "id": "1",
+              "name": "社招",
+              "en_name": "Experienced",
+              "i18n_name": "社招",
+              "depth": 1,
+              "parent": null,
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "children": null,
+            "active_status": 1,
+            "selectability": 1
+          },
+          "publish_time": 1682060594000,
+          "job_hot_flag": 2,
+          "job_subject": null,
+          "code": "A200445",
+          "department_id": null,
+          "job_function": null,
+          "job_process_id": "6694104661676411150",
+          "recommend_id": null,
+          "city_list": [{
+            "code": "CT_125",
+            "name": "上海",
+            "en_name": "Shanghai",
+            "location_type": null,
+            "i18n_name": "上海",
+            "py_name": null,
+            "mdm_code": null
+          }],
+          "job_post_info": {
+            "id": null,
+            "job_id": null,
+            "title": null,
+            "sub_title": null,
+            "address_id": null,
+            "address": null,
+            "city": null,
+            "education": null,
+            "experience": null,
+            "description": null,
+            "requirement": null,
+            "min_salary": null,
+            "max_salary": null,
+            "currency": null,
+            "head_count": null,
+            "crator_id": null,
+            "expiry_time": null,
+            "progress": null,
+            "department_id": null,
+            "job_type": null,
+            "recruitment_type": {
+              "id": "101",
+              "name": "正式",
+              "en_name": "Regular",
+              "i18n_name": "正式",
+              "depth": 2,
+              "parent": {
+                "id": "1",
+                "name": "社招",
+                "en_name": "Experienced",
+                "i18n_name": "社招",
+                "depth": 1,
+                "parent": null,
+                "children": null,
+                "active_status": 1,
+                "selectability": 1
+              },
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "job_process_time": null,
+            "job_in_charge_user_id": null,
+            "biz_create_time": null,
+            "HighlightList": null,
+            "JobChannelPublishList": null,
+            "required_degree": null,
+            "never_expiry": null,
+            "job_hot_flag": null,
+            "subject": null,
+            "sequence": null,
+            "min_level": null,
+            "max_level": null,
+            "job_post_object_value_map": {},
+            "code": null,
+            "job_active_status": null,
+            "job_process_type": null,
+            "biz_modify_time": null,
+            "job_function": null,
+            "job_process": null,
+            "job_process_id": null,
+            "job_category": null,
+            "address_list": null,
+            "city_list": null,
+            "correlation_job_list": null,
+            "tag_list": null,
+            "department": null
+          }
+        },
+        {
+          "id": "7225121652648167738",
+          "title": "抖音电商-战略发展专家",
+          "sub_title": "",
+          "description": "1、通过竞品跟踪和内外部对标，为内部业务痛点提供外部经验参考，并主动探索发掘业务机会点，并输出短中长期可落地的解决方案、推进各方落地；\n2、深度参与业务不同阶段的核心项目，通过定性调研或定量分析，帮忙厘清业务方向；并横向联动电商各团队，推动部门间重点项目的沟通协作，保障关键动作落地；\n3、协助业务制定年度/季度业务目标和规划，并对业务核心指标进行定期复盘和分析，为业务及管理层提供决策支持。",
+          "requirement": "1、本科及以上学历，5年以上相关工作经验，计算机、统计学、经济学、金融、营销学专业优先；\n2、有咨询行业或大型互联网公司产品/分析/运营经验优先，具备良好的hardskills(包括但不限于问题拆解，数据分析， PPT/doc呈现等)；\n3、有较强的好奇心、自驱力及结构化思维；对电商或内容行业有兴趣，对参与业务、快速成长有激情，愿意承担工作的压力与使命；\n4、有较强的执行力、项目管理、跨团队协调能力，能独立推动项目落地并达成预期结果。",
+          "job_category": {
+            "id": "6704215955154667787",
+            "name": "用户运营",
+            "en_name": "User ops",
+            "i18n_name": "用户运营",
+            "depth": 2,
+            "parent": {
+              "id": "6704215882479962371",
+              "name": "运营",
+              "en_name": "Operations",
+              "i18n_name": "运营",
+              "depth": 1,
+              "parent": null,
+              "children": null
+            },
+            "children": null
+          },
+          "city_info": {
+            "code": "CT_125",
+            "name": "上海",
+            "en_name": "Shanghai",
+            "location_type": null,
+            "i18n_name": "上海",
+            "py_name": null,
+            "mdm_code": null
+          },
+          "recruit_type": {
+            "id": "101",
+            "name": "正式",
+            "en_name": "Regular",
+            "i18n_name": "正式",
+            "depth": 2,
+            "parent": {
+              "id": "1",
+              "name": "社招",
+              "en_name": "Experienced",
+              "i18n_name": "社招",
+              "depth": 1,
+              "parent": null,
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "children": null,
+            "active_status": 1,
+            "selectability": 1
+          },
+          "publish_time": 1682230070000,
+          "job_hot_flag": 2,
+          "job_subject": null,
+          "code": "A101124",
+          "department_id": null,
+          "job_function": null,
+          "job_process_id": "6694104661676411150",
+          "recommend_id": null,
+          "city_list": [{
+            "code": "CT_125",
+            "name": "上海",
+            "en_name": "Shanghai",
+            "location_type": null,
+            "i18n_name": "上海",
+            "py_name": null,
+            "mdm_code": null
+          }],
+          "job_post_info": {
+            "id": null,
+            "job_id": null,
+            "title": null,
+            "sub_title": null,
+            "address_id": null,
+            "address": null,
+            "city": null,
+            "education": null,
+            "experience": null,
+            "description": null,
+            "requirement": null,
+            "min_salary": null,
+            "max_salary": null,
+            "currency": null,
+            "head_count": null,
+            "crator_id": null,
+            "expiry_time": null,
+            "progress": null,
+            "department_id": null,
+            "job_type": null,
+            "recruitment_type": {
+              "id": "101",
+              "name": "正式",
+              "en_name": "Regular",
+              "i18n_name": "正式",
+              "depth": 2,
+              "parent": {
+                "id": "1",
+                "name": "社招",
+                "en_name": "Experienced",
+                "i18n_name": "社招",
+                "depth": 1,
+                "parent": null,
+                "children": null,
+                "active_status": 1,
+                "selectability": 1
+              },
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "job_process_time": null,
+            "job_in_charge_user_id": null,
+            "biz_create_time": null,
+            "HighlightList": null,
+            "JobChannelPublishList": null,
+            "required_degree": null,
+            "never_expiry": null,
+            "job_hot_flag": null,
+            "subject": null,
+            "sequence": null,
+            "min_level": null,
+            "max_level": null,
+            "job_post_object_value_map": {},
+            "code": null,
+            "job_active_status": null,
+            "job_process_type": null,
+            "biz_modify_time": null,
+            "job_function": null,
+            "job_process": null,
+            "job_process_id": null,
+            "job_category": null,
+            "address_list": null,
+            "city_list": null,
+            "correlation_job_list": null,
+            "tag_list": null,
+            "department": null
+          }
+        },
+        {
+          "id": "7225150434724677945",
+          "title": "抖音增长策略产品-裂变方向",
+          "sub_title": "",
+          "description": "用户增长（User Growth）团队负责字节跳动旗下产品的增长工作。我们帮助产品量身定做增长方案，并利用各种营销、产品、数据分析手段达成业务增长目标。UG 团队维护和优化一系列类似付费广告、自然新增等成熟的产品增长方案，并熟练将其应用到各种不同的业务中，推动业务增长；同时当发现新的增长机会时，我们也及时构建新的解决方案，帮助业务实现突破。加入 UG 团队，可以负责亿级用户产品的增长工作，掌握业界先进、第一手的增长实践。\n\n1、负责抖音/抖音极速版的增长裂变/营销活动，统筹裂变的策划、开发、上线迭代和复盘；\n2、结合用户完整生命周期建立长效拉新系统，通过产品化赋能用户自传播，实现规模化增长；\n3、对数据敏感，搭建为获取新用户or 老用户召回等业务指标的线上玩法，例如拼团，助力等激励活动；\n4、跨部门推动上下游业务各个部门，例如策略，数据，开发，风控等各个职能的同事一起协作，作为owner，保证整体项目效果。",
+          "requirement": "1、本科及以上学历，有用户增长、游戏化、自传播活动产品经验的优先；\n2、对增长裂变有自己的思考，具备将创意和目标效果结合的能力，持续寻找新的增长点；\n3、强目标导向，主观能动性强，逻辑/数据sense好，能够高质量完成目标拆解、优先级判断以及项目推进；\n4、有较强的综合决策能力，能在外部环境快速变化时找到正确的角度&方向，做出正确的决策。",
+          "job_category": {
+            "id": "6704215864629004552",
+            "name": "产品",
+            "en_name": "Product",
+            "i18n_name": "产品",
+            "depth": 1,
+            "parent": null,
+            "children": null
+          },
+          "city_info": {
+            "code": "CT_11",
+            "name": "北京",
+            "en_name": "Beijing",
+            "location_type": null,
+            "i18n_name": "北京",
+            "py_name": null,
+            "mdm_code": null
+          },
+          "recruit_type": {
+            "id": "101",
+            "name": "正式",
+            "en_name": "Regular",
+            "i18n_name": "正式",
+            "depth": 2,
+            "parent": {
+              "id": "1",
+              "name": "社招",
+              "en_name": "Experienced",
+              "i18n_name": "社招",
+              "depth": 1,
+              "parent": null,
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "children": null,
+            "active_status": 1,
+            "selectability": 1
+          },
+          "publish_time": 1682236447000,
+          "job_hot_flag": 2,
+          "job_subject": null,
+          "code": "A167127",
+          "department_id": null,
+          "job_function": null,
+          "job_process_id": "6694104661676411150",
+          "recommend_id": null,
+          "city_list": [{
+            "code": "CT_11",
+            "name": "北京",
+            "en_name": "Beijing",
+            "location_type": null,
+            "i18n_name": "北京",
+            "py_name": null,
+            "mdm_code": null
+          }],
+          "job_post_info": {
+            "id": null,
+            "job_id": null,
+            "title": null,
+            "sub_title": null,
+            "address_id": null,
+            "address": null,
+            "city": null,
+            "education": null,
+            "experience": null,
+            "description": null,
+            "requirement": null,
+            "min_salary": null,
+            "max_salary": null,
+            "currency": null,
+            "head_count": null,
+            "crator_id": null,
+            "expiry_time": null,
+            "progress": null,
+            "department_id": null,
+            "job_type": null,
+            "recruitment_type": {
+              "id": "101",
+              "name": "正式",
+              "en_name": "Regular",
+              "i18n_name": "正式",
+              "depth": 2,
+              "parent": {
+                "id": "1",
+                "name": "社招",
+                "en_name": "Experienced",
+                "i18n_name": "社招",
+                "depth": 1,
+                "parent": null,
+                "children": null,
+                "active_status": 1,
+                "selectability": 1
+              },
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "job_process_time": null,
+            "job_in_charge_user_id": null,
+            "biz_create_time": null,
+            "HighlightList": null,
+            "JobChannelPublishList": null,
+            "required_degree": null,
+            "never_expiry": null,
+            "job_hot_flag": null,
+            "subject": null,
+            "sequence": null,
+            "min_level": null,
+            "max_level": null,
+            "job_post_object_value_map": {},
+            "code": null,
+            "job_active_status": null,
+            "job_process_type": null,
+            "biz_modify_time": null,
+            "job_function": null,
+            "job_process": null,
+            "job_process_id": null,
+            "job_category": null,
+            "address_list": null,
+            "city_list": null,
+            "correlation_job_list": null,
+            "tag_list": null,
+            "department": null
+          }
+        },
+        {
+          "id": "7225905859737602362",
+          "title": "数据科学家",
+          "sub_title": "",
+          "description": "1、业务数据监控及分析：通过数据监控，主导专项分析，发现审核业务问题并提出解决建议或方案，进行团队协调沟通及推动业务执行落地；\n2、支持业务决策及改进：深入理解审核业务，从多维度拆解现有平台产品业务，围绕数据分析，发现审核业务中的问题及痛点，发现业务价值洼地，通过搭建完善的数据服务，驱动业务快速迭代发展；\n3、平台用户行为分析：通过规范化的用户埋点事件，收集并处理用户行为数据，对用户行为挖掘及活跃用户分析，洞察平台产品的问题并提出改进意见；\n4、负责对抖音业务安全产品模块建立AB测试试验体系，完成方案设计并推动落地，开展上线前后的效果评估，支持数据驱动的平台建设，提升业务数据化能力。",
+          "requirement": "1、3年以上分析相关工作经验，硕士或以上优先，熟练掌握Hive，SQL，Excel，PPT，Python或R，Tableau等工具，熟悉常用的统计分析模型；\n2、对数字敏感，具备良好的逻辑分析、系统性思维、结构化拆解能力；有清晰的分析方法论沉淀，具备准确定位分析解决问题能力；\n3、熟练掌握数据挖掘技能，如数据预处理、特征工程、监督学习和无监督学习算法的应用和调优，熟练使用聚类、回归、决策树、神经网络等机器学习模型，能够自主处理并挖掘数据，发现规律及价值；\n4、有产品设计经验优先，熟悉常用的产品策略，能够将数据分析解决方案转化为实际应用，并确保应用的可持续性和可扩展性；\n5、掌握AB试验的技巧，有较丰富的AB实验经验，清楚指标管理，假设检验方法，能够独立设计AB实验评估体系和方案等；\n6、沟通协调能力强，工作严谨负责，能够独立思考；具备团队合作精神，能够与团队成员合作完成项目。",
+          "job_category": {
+            "id": "6704216224387041544",
+            "name": "数据分析",
+            "en_name": "Data analysis",
+            "i18n_name": "数据分析",
+            "depth": 2,
+            "parent": {
+              "id": "6704215864629004552",
+              "name": "产品",
+              "en_name": "Product",
+              "i18n_name": "产品",
+              "depth": 1,
+              "parent": null,
+              "children": null
+            },
+            "children": null
+          },
+          "city_info": {
+            "code": "CT_11",
+            "name": "北京",
+            "en_name": "Beijing",
+            "location_type": null,
+            "i18n_name": "北京",
+            "py_name": null,
+            "mdm_code": null
+          },
+          "recruit_type": {
+            "id": "101",
+            "name": "正式",
+            "en_name": "Regular",
+            "i18n_name": "正式",
+            "depth": 2,
+            "parent": {
+              "id": "1",
+              "name": "社招",
+              "en_name": "Experienced",
+              "i18n_name": "社招",
+              "depth": 1,
+              "parent": null,
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "children": null,
+            "active_status": 1,
+            "selectability": 1
+          },
+          "publish_time": 1682412742000,
+          "job_hot_flag": 2,
+          "job_subject": null,
+          "code": "A49086",
+          "department_id": null,
+          "job_function": null,
+          "job_process_id": "6694104661676411150",
+          "recommend_id": null,
+          "city_list": [{
+            "code": "CT_11",
+            "name": "北京",
+            "en_name": "Beijing",
+            "location_type": null,
+            "i18n_name": "北京",
+            "py_name": null,
+            "mdm_code": null
+          }],
+          "job_post_info": {
+            "id": null,
+            "job_id": null,
+            "title": null,
+            "sub_title": null,
+            "address_id": null,
+            "address": null,
+            "city": null,
+            "education": null,
+            "experience": null,
+            "description": null,
+            "requirement": null,
+            "min_salary": null,
+            "max_salary": null,
+            "currency": null,
+            "head_count": null,
+            "crator_id": null,
+            "expiry_time": null,
+            "progress": null,
+            "department_id": null,
+            "job_type": null,
+            "recruitment_type": {
+              "id": "101",
+              "name": "正式",
+              "en_name": "Regular",
+              "i18n_name": "正式",
+              "depth": 2,
+              "parent": {
+                "id": "1",
+                "name": "社招",
+                "en_name": "Experienced",
+                "i18n_name": "社招",
+                "depth": 1,
+                "parent": null,
+                "children": null,
+                "active_status": 1,
+                "selectability": 1
+              },
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "job_process_time": null,
+            "job_in_charge_user_id": null,
+            "biz_create_time": null,
+            "HighlightList": null,
+            "JobChannelPublishList": null,
+            "required_degree": null,
+            "never_expiry": null,
+            "job_hot_flag": null,
+            "subject": null,
+            "sequence": null,
+            "min_level": null,
+            "max_level": null,
+            "job_post_object_value_map": {},
+            "code": null,
+            "job_active_status": null,
+            "job_process_type": null,
+            "biz_modify_time": null,
+            "job_function": null,
+            "job_process": null,
+            "job_process_id": null,
+            "job_category": null,
+            "address_list": null,
+            "city_list": null,
+            "correlation_job_list": null,
+            "tag_list": null,
+            "department": null
+          }
+        },
+        {
+          "id": "7223639035725596985",
+          "title": "商业化内容运营-飞书",
+          "sub_title": "",
+          "description": "1、洞察行业客户痛点，结合产品提出解决方案，并用视频、图文等形式进行包装，助力客户转化；\n2、提炼面向行业的产品价值，制作相关内容物料，包括产品手册、演示、销售工具等；\n3、与产品相关团队紧密合作，用工具推动内容分发，追踪各类内容素材的效果，迭代优化。",
+          "requirement": "1、本科及以上学历，拥有To B内容运营（尤其是视频）相关经验，有销售经验优先，熟练使用飞书优先；\n2、有业务视角，能敏锐洞察客户共性需求，具备出色的内容生产能力和沟通转化意识，有独立的项目管理及执行完成的成功案例经验；\n3、对企业服务、消费零售、文娱传媒、制造等任一行业有比较深的认知和经验积累；\n4、有产品化思维，学习能力强，适应挑战变化的环境，有主人翁意识，能有效推动跨部门项目的进展。",
+          "job_category": {
+            "id": "6704215882438019342",
+            "name": "商业运营",
+            "en_name": "Commerce ops",
+            "i18n_name": "商业运营",
+            "depth": 2,
+            "parent": {
+              "id": "6704215882479962371",
+              "name": "运营",
+              "en_name": "Operations",
+              "i18n_name": "运营",
+              "depth": 1,
+              "parent": null,
+              "children": null
+            },
+            "children": null
+          },
+          "city_info": {
+            "code": "CT_125",
+            "name": "上海",
+            "en_name": "Shanghai",
+            "location_type": null,
+            "i18n_name": "上海",
+            "py_name": null,
+            "mdm_code": null
+          },
+          "recruit_type": {
+            "id": "101",
+            "name": "正式",
+            "en_name": "Regular",
+            "i18n_name": "正式",
+            "depth": 2,
+            "parent": {
+              "id": "1",
+              "name": "社招",
+              "en_name": "Experienced",
+              "i18n_name": "社招",
+              "depth": 1,
+              "parent": null,
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "children": null,
+            "active_status": 1,
+            "selectability": 1
+          },
+          "publish_time": 1681884656000,
+          "job_hot_flag": 2,
+          "job_subject": null,
+          "code": "A70989",
+          "department_id": null,
+          "job_function": null,
+          "job_process_id": "6694104661676411150",
+          "recommend_id": null,
+          "city_list": [{
+            "code": "CT_125",
+            "name": "上海",
+            "en_name": "Shanghai",
+            "location_type": null,
+            "i18n_name": "上海",
+            "py_name": null,
+            "mdm_code": null
+          }],
+          "job_post_info": {
+            "id": null,
+            "job_id": null,
+            "title": null,
+            "sub_title": null,
+            "address_id": null,
+            "address": null,
+            "city": null,
+            "education": null,
+            "experience": null,
+            "description": null,
+            "requirement": null,
+            "min_salary": null,
+            "max_salary": null,
+            "currency": null,
+            "head_count": null,
+            "crator_id": null,
+            "expiry_time": null,
+            "progress": null,
+            "department_id": null,
+            "job_type": null,
+            "recruitment_type": {
+              "id": "101",
+              "name": "正式",
+              "en_name": "Regular",
+              "i18n_name": "正式",
+              "depth": 2,
+              "parent": {
+                "id": "1",
+                "name": "社招",
+                "en_name": "Experienced",
+                "i18n_name": "社招",
+                "depth": 1,
+                "parent": null,
+                "children": null,
+                "active_status": 1,
+                "selectability": 1
+              },
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "job_process_time": null,
+            "job_in_charge_user_id": null,
+            "biz_create_time": null,
+            "HighlightList": null,
+            "JobChannelPublishList": null,
+            "required_degree": null,
+            "never_expiry": null,
+            "job_hot_flag": null,
+            "subject": null,
+            "sequence": null,
+            "min_level": null,
+            "max_level": null,
+            "job_post_object_value_map": {},
+            "code": null,
+            "job_active_status": null,
+            "job_process_type": null,
+            "biz_modify_time": null,
+            "job_function": null,
+            "job_process": null,
+            "job_process_id": null,
+            "job_category": null,
+            "address_list": null,
+            "city_list": null,
+            "correlation_job_list": null,
+            "tag_list": null,
+            "department": null
+          }
+        },
+        {
+          "id": "7224465349646797117",
+          "title": "AI-Lab高性能计算研发工程师—语音方向",
+          "sub_title": "",
+          "description": "1、负责语音场景下高性能训推计算平台开发，支撑各业务场景下的训练、推理性能优化需求并推动业务落地；\n2、负责训推高性能方案建设，跟进前沿技术，补足关键能力，构建领先的高性能训推平台。",
+          "requirement": "1、精通C++，有良好的数据结构和算法基础，有3年以上高性能优化相关工作经验；\n2、熟悉主流的并行编程以及性能优化技术，熟悉CUDA和tensorcore编程，有相关高性能优化经验优先；\n3、熟悉TVM/MLIR/XLA等自动化编译技术的优先；\n4、熟悉深度学习常用算法和模型结构，有CV/NLP/语言场景模型优化经验优先；\n5、了解FasterTransformer模型推理优化框架优化；\n6、有量化/稀疏化高性能优化经验优先；\n7、了解Pytorch/Tensorflow/Paddle深度学习框架优先；\n8、有团队管理经验优先；\n9、有跨团队合作经验优先。",
+          "job_category": {
+            "id": "6704215862603155720",
+            "name": "研发",
+            "en_name": "R&D",
+            "i18n_name": "研发",
+            "depth": 1,
+            "parent": null,
+            "children": null
+          },
+          "city_info": {
+            "code": "CT_125",
+            "name": "上海",
+            "en_name": "Shanghai",
+            "location_type": null,
+            "i18n_name": "上海",
+            "py_name": null,
+            "mdm_code": null
+          },
+          "recruit_type": {
+            "id": "101",
+            "name": "正式",
+            "en_name": "Regular",
+            "i18n_name": "正式",
+            "depth": 2,
+            "parent": {
+              "id": "1",
+              "name": "社招",
+              "en_name": "Experienced",
+              "i18n_name": "社招",
+              "depth": 1,
+              "parent": null,
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "children": null,
+            "active_status": 1,
+            "selectability": 1
+          },
+          "publish_time": 1682077641000,
+          "job_hot_flag": 2,
+          "job_subject": null,
+          "code": "A14035",
+          "department_id": null,
+          "job_function": null,
+          "job_process_id": "6694104661676411150",
+          "recommend_id": null,
+          "city_list": [{
+            "code": "CT_125",
+            "name": "上海",
+            "en_name": "Shanghai",
+            "location_type": null,
+            "i18n_name": "上海",
+            "py_name": null,
+            "mdm_code": null
+          }],
+          "job_post_info": {
+            "id": null,
+            "job_id": null,
+            "title": null,
+            "sub_title": null,
+            "address_id": null,
+            "address": null,
+            "city": null,
+            "education": null,
+            "experience": null,
+            "description": null,
+            "requirement": null,
+            "min_salary": null,
+            "max_salary": null,
+            "currency": null,
+            "head_count": null,
+            "crator_id": null,
+            "expiry_time": null,
+            "progress": null,
+            "department_id": null,
+            "job_type": null,
+            "recruitment_type": {
+              "id": "101",
+              "name": "正式",
+              "en_name": "Regular",
+              "i18n_name": "正式",
+              "depth": 2,
+              "parent": {
+                "id": "1",
+                "name": "社招",
+                "en_name": "Experienced",
+                "i18n_name": "社招",
+                "depth": 1,
+                "parent": null,
+                "children": null,
+                "active_status": 1,
+                "selectability": 1
+              },
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "job_process_time": null,
+            "job_in_charge_user_id": null,
+            "biz_create_time": null,
+            "HighlightList": null,
+            "JobChannelPublishList": null,
+            "required_degree": null,
+            "never_expiry": null,
+            "job_hot_flag": null,
+            "subject": null,
+            "sequence": null,
+            "min_level": null,
+            "max_level": null,
+            "job_post_object_value_map": {},
+            "code": null,
+            "job_active_status": null,
+            "job_process_type": null,
+            "biz_modify_time": null,
+            "job_function": null,
+            "job_process": null,
+            "job_process_id": null,
+            "job_category": null,
+            "address_list": null,
+            "city_list": null,
+            "correlation_job_list": null,
+            "tag_list": null,
+            "department": null
+          }
+        },
+        {
+          "id": "7226992796943026487",
+          "title": "泛资讯内容质量运营",
+          "sub_title": "",
+          "description": "1、按照相关标准，对「今日头条」APP军事、文史等内容做出有效评估和处理，维护好前端画风，保证内容安全和质量；\n2、针对热点事件、历史周年纪念等高热话题，结合平台实际需求，拟定和灵活调整相关运营策略与方案；\n3、定期对业务案例、数据做出分析与总结，推动运营策略、业务流程优化迭代。",
+          "requirement": "1、本科及以上学历，有门户网站、热点运营策划、军事/文史相关专业领域工作经验；\n2、具有较高新闻敏感度与深厚军事/文史领域专业知识储备，对热点事件有很强的发掘与跟踪意识；\n3、结果导向，较强的自我驱动和责任心，有独立负责项目经验者优先，可接受排班。",
+          "job_category": {
+            "id": "6704215961064442123",
+            "name": "内容运营",
+            "en_name": "Content ops",
+            "i18n_name": "内容运营",
+            "depth": 2,
+            "parent": {
+              "id": "6704215882479962371",
+              "name": "运营",
+              "en_name": "Operations",
+              "i18n_name": "运营",
+              "depth": 1,
+              "parent": null,
+              "children": null
+            },
+            "children": null
+          },
+          "city_info": {
+            "code": "CT_11",
+            "name": "北京",
+            "en_name": "Beijing",
+            "location_type": null,
+            "i18n_name": "北京",
+            "py_name": null,
+            "mdm_code": null
+          },
+          "recruit_type": {
+            "id": "101",
+            "name": "正式",
+            "en_name": "Regular",
+            "i18n_name": "正式",
+            "depth": 2,
+            "parent": {
+              "id": "1",
+              "name": "社招",
+              "en_name": "Experienced",
+              "i18n_name": "社招",
+              "depth": 1,
+              "parent": null,
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "children": null,
+            "active_status": 1,
+            "selectability": 1
+          },
+          "publish_time": 1682665650000,
+          "job_hot_flag": 2,
+          "job_subject": null,
+          "code": "A64679",
+          "department_id": null,
+          "job_function": null,
+          "job_process_id": "6694104661676411150",
+          "recommend_id": null,
+          "city_list": [{
+            "code": "CT_11",
+            "name": "北京",
+            "en_name": "Beijing",
+            "location_type": null,
+            "i18n_name": "北京",
+            "py_name": null,
+            "mdm_code": null
+          }],
+          "job_post_info": {
+            "id": null,
+            "job_id": null,
+            "title": null,
+            "sub_title": null,
+            "address_id": null,
+            "address": null,
+            "city": null,
+            "education": null,
+            "experience": null,
+            "description": null,
+            "requirement": null,
+            "min_salary": null,
+            "max_salary": null,
+            "currency": null,
+            "head_count": null,
+            "crator_id": null,
+            "expiry_time": null,
+            "progress": null,
+            "department_id": null,
+            "job_type": null,
+            "recruitment_type": {
+              "id": "101",
+              "name": "正式",
+              "en_name": "Regular",
+              "i18n_name": "正式",
+              "depth": 2,
+              "parent": {
+                "id": "1",
+                "name": "社招",
+                "en_name": "Experienced",
+                "i18n_name": "社招",
+                "depth": 1,
+                "parent": null,
+                "children": null,
+                "active_status": 1,
+                "selectability": 1
+              },
+              "children": null,
+              "active_status": 1,
+              "selectability": 1
+            },
+            "job_process_time": null,
+            "job_in_charge_user_id": null,
+            "biz_create_time": null,
+            "HighlightList": null,
+            "JobChannelPublishList": null,
+            "required_degree": null,
+            "never_expiry": null,
+            "job_hot_flag": null,
+            "subject": null,
+            "sequence": null,
+            "min_level": null,
+            "max_level": null,
+            "job_post_object_value_map": {},
+            "code": null,
+            "job_active_status": null,
+            "job_process_type": null,
+            "biz_modify_time": null,
+            "job_function": null,
+            "job_process": null,
+            "job_process_id": null,
+            "job_category": null,
+            "address_list": null,
+            "city_list": null,
+            "correlation_job_list": null,
+            "tag_list": null,
+            "department": null
+          }
+        }
+      ],
+      "count": 10000,
+    }
+    loading.value = false
+  }, 1000)
+}
+
+// setup生命周期钩子
+fetchList()
+</script>
+
+<style scoped lang="less">
+.banner {
+  height: 400px;
+  line-height: 400px;
+  color: #fff;
+  width: 100%;
+  min-width: @main-width;
+  background-image: url("//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/joblistbanner2x.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  text-align: center;
+  font-size: @font-size-larger;
+}
+
+.search-wrapper {
+  position: absolute;
+  width: 100%;
+  padding: 0 200px;
+  transform: translateY(-50%);
+  z-index: 100;
+
+  &.fixedTop {
+    position: fixed;
+
+    box-shadow: 0 5px 4px rgba(0, 0, 0, 0.1);
+    top: 0;
+    padding: 20px 130px;
+    z-index: 1000;
+    background-color: #fff;
+    transform: translateY(0);
+  }
+}
+
+.main {
+  width: @main-width;
+  margin: 0 auto;
+  margin-top: 100px;
+  padding: 0 100px 0 200px;
+
+  .aside-filter {
+    float: left;
+    width: 300px;
+    padding-right: 20px;
+
+    .header {
+      font-size: 14px;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      border-bottom: 1px solid @border-lighter-color;
+      padding-bottom: 10px;
+      width: 100%;
+
+      .clear {
+        &.clearable {
+          color: @main-color;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .job-filter-block {
+      margin-bottom: 40px;
+    }
+  }
+
+  .content {
+    min-height: 500px;
+    padding-left: 20px;
+    border-left: 1px solid @border-lighter-color;
+    margin-left: 300px;
+
+    &-title {
+      margin-bottom: 30px;
+      margin-left: 20px;
+    }
+
+    &-item {
+      margin-bottom: 10px;
+      padding: 10px 20px;
+      cursor: pointer;
+
+      .title {
+        margin: 12px 0;
+      }
+
+      .subTitle {
+        color: @regular-text-color;
+      }
+
+      .desc {
+        white-space: pre-line;
+        font-size: 14px;
+        color: @secondary-text-color;
+
+        //.text-overflow-visible-line(2);
+        text-overflow: clip;
+      }
+
+      &:hover {
+        border-radius: 3px;
+        background: #fff;
+        box-shadow: 0 10px 30px 0 rgba(136, 150, 171, 0.15);
+      }
+    }
+
+    .pagination-wrapper {
+      margin-top: 50px;
+      text-align: right;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
new file mode 100644
index 0000000..8d46845
--- /dev/null
+++ b/src/views/Login/Login.vue
@@ -0,0 +1,325 @@
+<template>
+  <div class="container">
+    <div class="login-box" v-if="isLogin">
+      <div class="title">用户名登录</div>
+      <div class="input">
+        <input type="text" id="login-user" placeholder="用户名" v-model="loginForm.username">
+      </div>
+      <div class="input">
+        <input type="password" id="login-password" placeholder="密码" v-model="loginForm.password">
+      </div>
+      <div class="btn login-btn" @click="loginButton">
+        <span>登录</span>
+      </div>
+      <div class="change-box">
+        <div class="change-btn">
+          <span>没有帐号?&nbsp;<a href="#" @click.prevent="changeLogin">创建帐号</a></span>
+        </div>
+      </div>
+    </div>
+    <div class="login-box" v-if="!isLogin">
+      <div class="title">用户名注册</div>
+      <div class="input">
+        <input type="text" id="login-user" placeholder="用户名" v-model="signForm.username">
+      </div>
+      <div class="input">
+        <input type="password" id="login-password" placeholder="密码" v-model="signForm.password">
+      </div>
+      <div class="input">
+        <input type="password" id="login-repassword" placeholder="确认密码" v-model="signForm.rePassword">
+      </div>
+      <div class="btn login-btn" @click="signButton">
+        <span>注册</span>
+      </div>
+      <div class="change-box">
+        <div class="change-btn">
+          <span>已有帐号?&nbsp;<a href="#" @click.prevent="changeLogin">去登录</a></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {reactive, ref, getCurrentInstance} from 'vue'
+import {useStore} from "vuex";
+import {useRouter} from "vue-router";
+
+const isLogin = ref(true)
+// 拿到proxy对象，相当于Vue2中的this
+const {proxy} = getCurrentInstance()
+const store = useStore()
+const router = useRouter()
+
+// 登录数据
+const loginForm = reactive({
+  username: '',
+  password: ''
+})
+
+const signForm = reactive({
+  username: '',
+  password: '',
+  rePassword: '',
+})
+
+// 登录事件
+const loginButton = async () => {
+  let res = await proxy.$api.login(loginForm)
+  ElNotification({
+    title: 'Success',
+    message: res.msg,
+    type: 'success',
+    offset: 100,
+  })
+
+  setTimeout(() => {
+    store.commit('LOGIN', res)
+    router.push({
+      name: 'home'
+    })
+  }, 500)
+
+}
+
+// 注册事件
+const signButton = async () => {
+  let res = await proxy.$api.sign(signForm)
+  ElNotification({
+    title: 'Success',
+    message: res.msg,
+    type: 'success',
+    offset: 100,
+  })
+
+  setTimeout(() => {
+    store.commit('LOGIN', res)
+    router.push({
+      name: 'home'
+    })
+  }, 500)
+}
+
+// 字节Logo
+// const svg = `
+// <path d="M75.1 4.402c.32.333.48.765.48 1.284 0 .523-.16.956-.48 1.288-.318.33-.73.497-1.227.497-.496 0-.908-.167-1.226-.495-.32-.33-.48-.763-.48-1.29 0-.523.161-.956.48-1.286.318-.331.73-.498 1.226-.498.497 0 .909.168 1.227.5zm.5-.725a2.444 2.444 0 0 0-.71-.529 2.577 2.577 0 0 0-1.142-.254c-.817 0-1.484.258-1.984.77-.499.51-.751 1.187-.751 2.013 0 .38.064.74.19 1.066.127.327.318.624.568.884a2.735 2.735 0 0 0 1.977.833c.42 0 .797-.08 1.124-.24.248-.12.468-.288.66-.5v.673h1.114V2.995H75.6v.682zM80.074 2.894c-.304 0-.592.06-.856.18-.201.091-.398.22-.586.386v-.465h-1.104v5.397h1.104V5.41c0-.511.109-.898.323-1.148.21-.245.533-.37.96-.37.373 0 .638.112.81.34.174.235.262.619.262 1.14v3.02h1.115V5.28c0-.733-.182-1.32-.541-1.742-.363-.428-.863-.644-1.487-.644M86.566 6.967c-.14.177-.308.312-.504.402-.197.09-.428.136-.687.136-.482 0-.862-.164-1.163-.5-.3-.335-.452-.775-.452-1.309 0-.534.154-.977.456-1.316.305-.342.684-.507 1.159-.507.243 0 .463.04.651.12.188.08.357.206.504.374l.074.084.722-.834-.071-.064a2.583 2.583 0 0 0-.847-.518 2.996 2.996 0 0 0-1.033-.17c-.398 0-.768.066-1.1.197-.335.133-.632.33-.88.586a2.7 2.7 0 0 0-.6.924 3.077 3.077 0 0 0-.203 1.124c0 .4.068.778.203 1.122.134.345.336.655.599.92.247.254.543.45.88.584.336.134.707.201 1.1.201.385 0 .737-.06 1.045-.178.309-.119.606-.309.885-.564l.07-.064-.735-.844-.073.094zM89.474 4.268a1.67 1.67 0 0 1 1.115-.395c.426 0 .792.13 1.088.387.27.234.44.537.51.903h-3.231c.066-.357.24-.657.518-.895zm3.946 1.66c0-.911-.261-1.657-.778-2.216-.518-.563-1.205-.847-2.043-.847-.821 0-1.496.267-2.006.794-.51.526-.767 1.223-.767 2.071 0 .359.062.707.184 1.034.124.328.303.621.534.871.263.284.581.504.948.658.365.153.765.23 1.185.23.508 0 .972-.096 1.379-.285a3.38 3.38 0 0 0 1.123-.881l.066-.077-.814-.654-.062.07c-.232.267-.49.47-.768.606a2.015 2.015 0 0 1-.895.203c-.497 0-.912-.142-1.236-.421-.3-.26-.47-.584-.516-.99h4.466v-.166zM0 7.212v24.726h.002l5.427-1.394V8.606z" fill="#3960AC"></path>
+// <path fill="#79CBC6" d="M31.645 31.992l-5.429 1.394V5.764l5.429 1.394z"></path>
+// <path fill="#4882C2" d="M8.608 32.689l5.428-1.394V19.521l-5.428-1.394z"></path>
+// <path fill="#2CBDC3" d="M17.585 15.971l5.43-1.394V29.14l-5.43-1.394z"></path>
+// `
+
+// eleLogo
+const svg = `
+        <path class="path" d="
+          M 30 15
+          L 28 17
+          M 25.61 25.61
+          A 15 15, 0, 0, 1, 15 30
+          A 15 15, 0, 1, 1, 27.99 7.5
+          L 15 15
+        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+      `
+
+const changeLogin = () => {
+  const loadingInstance1 = ElLoading.service({spinner: svg, fullscreen: true})
+  setTimeout(() => {
+    isLogin.value = !isLogin.value
+    loadingInstance1.close()
+  }, 1000)
+}
+</script>
+
+<style scoped lang="less">
+
+@keyframes verticalDance {
+  0% {
+    transform: translate3d(0, 10px, 0);
+  }
+  50% {
+    transform: translate3d(0, -10px, 0);
+  }
+  100% {
+    transform: translate3d(0, 10px, 0);
+  }
+}
+
+
+.el-loading-spinner .circular {
+  width: 9px;
+  margin: 0 2px;
+  animation-name: verticalDance;
+  animation-duration: 400ms;
+  animation-iteration-count: infinite;
+
+  &:first-child {
+    background-color: #2d5fb2;
+    height: 29px;
+
+    animation-delay: -300ms;
+  }
+
+  &:nth-child(2) {
+    background-color: #3682c7;
+    height: 14px;
+    animation-delay: -400ms;
+  }
+
+  &:nth-child(3) {
+    animation-delay: -600ms;
+    background-color: #00bfc5;
+    height: 14px;
+  }
+
+  &:last-child {
+    animation-delay: -900ms;
+    background-color: #5acec6;
+    height: 29px;
+  }
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, .9);
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 1s;
+}
+
+
+.title {
+  margin-top: 10px;
+  position: relative;
+  margin-right: 46px;
+  line-height: 33px;
+  font-size: 24px;
+  font-weight: 600;
+  cursor: pointer;
+  height: 40px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: .4s;
+}
+
+.login-box .title {
+  color: #3370ff;
+  text-shadow: 0 0 7px rgba(255, 255, 255, .9);
+
+  &:after {
+    content: ' ';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    border-radius: 3px;
+    background-color: #3370ff;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+  }
+}
+
+.input {
+  width: 480px;
+  height: 40px;
+  position: relative;
+  margin: 40px auto;
+  /* border-radius: 45px;
+  overflow: hidden; */
+}
+
+input {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #bbbfc4;
+  outline: none;
+  /* box-sizing: border-box; */
+  font-size: 16px;
+  background-color: white;
+  border-radius: 20px;
+  padding-left: 16px;
+  transition: .4s;
+}
+
+.login-box input:focus {
+  border-color: #3370ff;
+  border-right-width: 1px !important;
+}
+
+.login-box input:hover {
+  border-color: #3370ff;
+  border-right-width: 1px !important;
+}
+
+.btn {
+  height: 40px;
+  width: 480px;
+  position: relative;
+  margin: 20px auto;
+  background-color: #3370ff;
+  border-radius: 20px;
+  font-size: 16px;
+  line-height: 1.5;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: .4s;
+  border: 1px solid transparent;
+}
+
+.change-box {
+  width: 480px;
+  margin: 20px auto;
+  height: 32px;
+  transition: .4s;
+  line-height: 22px;
+}
+
+.change-btn {
+  width: 100%;
+  height: 100%;
+}
+
+.change-btn span {
+  text-align: left;
+  font-size: 14px;
+  color: #8f959e;
+  font-weight: 500;
+}
+
+.change-btn span a {
+  color: #3370ff;
+}
+
+.change-btn:hover {
+  text-shadow: 0 0 3px rgba(200, 200, 200, .8);
+  cursor: pointer;
+}
+
+
+.login-btn:hover {
+  background: #82a7fc;
+  border-color: #82a7fc;
+}
+
+.login-change {
+  background-color: rgba(255, 255, 255, .8);
+}
+
+.login-box {
+  height: 686px;
+  width: 520px;
+  margin-top: 120px;
+  transition: .4s;
+  z-index: 1;
+  transform-origin: 0 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Products/Products.vue b/src/views/Products/Products.vue
new file mode 100644
index 0000000..f028f1f
--- /dev/null
+++ b/src/views/Products/Products.vue
@@ -0,0 +1,304 @@
+<template>
+  <div class="product">
+    <ul class="product-fullpage-indicator">
+      <li
+          v-for="(item, index) in products"
+          :key="item.id"
+          class="product-fullpage-indicator-item"
+          :class="{ active: activeIndex === index }"
+          @click="activeIndex = index"
+      >
+        <img :src="item.logo" alt/>
+      </li>
+    </ul>
+    <transition :duration="duration" :name="transitionName">
+      <!-- ... the buttons ... -->
+      <div
+          :key="activeIndex"
+          class="view-wrapper"
+          v-if="!loading"
+          :style="`background-image:url(${item.cover})`"
+      >
+        <div class="content">
+          <div class="logo">
+            <img :src="item.logo" width="100%" height="100%" alt/>
+          </div>
+          <h2>{{ item.title }}</h2>
+          <div class="description">{{ item.description }}</div>
+          <div class="subDescription">{{ item.subDescription }}</div>
+          <div class="link">
+            更多信息，请访问：
+            <br/>
+            <span>{{ item.link }}</span>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import {ref, watch, getCurrentInstance, onMounted, onUnmounted, computed} from "vue";
+import {useRoute} from "vue-router";
+
+const route = useRoute()
+const {proxy} = getCurrentInstance()
+// 产品列表
+const products = ref([
+  {
+    "name": "faceu",
+    "title": "激萌",
+    "logo": "//sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/Faceu2x_1574665474719.png",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/jimeng.jpeg",
+    "description": "Faceu激萌，4 亿年轻人都爱用的卖萌自拍神器。",
+    "subDescription": "一款能社交的 AR 相机，海量酷炫贴纸、 激萌表情包 、实时美颜、 趣味特效让聊天姿势更丰富更有趣，满足全方位拍摄需求。累计用户量超过 4 亿， 平均每天为用户提供 1.7 亿次拍摄服务。",
+    "id": 1,
+    "link": "https://www.faceu.com"
+  },
+  {
+    "name": "lightFaceCamera",
+    "title": "轻颜相机",
+    "logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/qingyan_square_logo_1577262252373.png",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/qingyan-bg2.jpg",
+    "description": "轻颜相机是一款主打高级感的质感自拍相机，连续霸榜应用商店。拥有时下最流行的滤镜、美颜效果、和海量拍照“姿势”模板，一键就能 get 潮流自拍。",
+    "subDescription": "",
+    "id": 2,
+    "link": "https://m.ulikecam.com/"
+  },
+  {
+    "name": "headNews",
+    "title": "今日头条",
+    "logo": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/toutiao_square_logo_1577262251819.png",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/toutiao_new_2.png",
+    "description": "今日头条是一款个性化资讯推荐引擎产品，致力于连接人与信息，让优质、丰富的信息得到高效、精准的分发，为用户创造价值。",
+    "subDescription": "今日头条目前拥有科技、体育、健康、美食、教育、三农、国风、NBA 等超过 100 个垂直领域，覆盖了图文、图集、小视频、短视频、短内容、直播、小程序等多种信息体裁。",
+    "id": 3,
+    "link": "https://m.ulikecam.com/"
+  },
+  {
+    "name": "trillShortVideo",
+    "title": "抖音短视频",
+    "logo": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/douyin_square_logo_1577262251779.png",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/douyin-bg2.jpg",
+    "description": "抖音是一个帮助用户表达自我，记录美好生活的短视频平台。截至 2020 年 1 月，日活跃用户数已经突破 4 亿，并继续保持高速增长。",
+    "subDescription": "",
+    "id": 4,
+    "link": "https://douyin.com/"
+  },
+  {
+    "name": "trillShortVideo",
+    "title": "西瓜视频",
+    "logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/xigua_square_logo_1577262253312.png",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/xigua-bg2.jpg",
+    "description": "西瓜视频是字节跳动旗下的一款视频 App，作为聚合多元文化的综合视频平台，它通过个性化推荐，源源不断地为不同人群提供丰富的优质内容，同时鼓励多样化创作，帮助人们轻松地向全世界分享视频作品。",
+    "subDescription": "目前西瓜视频累计用户数超过 3.5 亿，日均播放量超过 40 亿。",
+    "id": 5,
+    "link": "https://ixigua.com/"
+  },
+  {
+    "name": "trillShortVideo",
+    "title": "懂车帝",
+    "logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/dongchedi_square_logo_1577262251826.png",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/dongche-bg2.jpg",
+    "description": "懂车帝是“看车、选车、买车”一站式汽车媒体和服务平台，产品基于个性化推荐引擎帮助用户发现感兴趣的汽车内容，同时配有车型库、360 度全景看车等选车工具，首创短视频社区“车友圈”，为用户打造内容 + 社区 + 工具的多元生态。目前，懂车帝已经成长为增长最快的汽车类手机应用。",
+    "subDescription": "目前西瓜视频累计用户数超过 3.5 亿，日均播放量超过 40 亿。",
+    "id": 6,
+    "link": "https://www.dongchediapp.com/"
+  },
+  {
+    "name": "gogokid",
+    "logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/gogokid_square_logo_1577262251773.png",
+    "title": "GoGoKid",
+    "id": 7,
+    "description": "GoGokid 是一个面向 4 - 12 岁孩子的在线少儿英语 1 对 1学习平台。主打 100% 纯北美外教；教材对标美国小学主流课标（CCSS），融入 SED（社交情商培养）、多元智能理论，为中国孩子带来高效的英语学习体验。",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/gogokid-bg2.jpg",
+    "link": "https://www.gogokid.com.cn"
+  },
+  {
+    "name": "naughtyShrimp",
+    "logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/pipixia_square_logo_1577262251826.png",
+    "title": "皮皮虾",
+    "id": 8,
+    "description": "今日头条官方爆笑社区，一个只要打开就能让你笑到停不下来的 App。",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/pipi_new.png",
+    "subDescription": "皮皮虾一直坚持「传播快乐，分享生活」的目标，以特有的「神评」玩法形成了独特的社区氛围。之后，皮皮虾将不断提供更多有趣的功能，帮助用户创造出更多优质的内容。",
+    "link": "https://mp.pipix.com"
+  },
+  {
+    "name": "urgentLetter",
+    "logo": "https://sf6-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/feishu_squre.png",
+    "title": "飞书",
+    "id": 9,
+    "description": "飞书是新一代企业办公套件，整合即时沟通、日历、音视频会议、在线文档、云盘、工作台等功能于一体，为企业提供全方位协作解决方案，成就组织和个人，更高效、更愉悦。",
+    "cover": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/feishu_bg.jpg",
+    "subDescription": "",
+    "link": "https://www.feishu.com"
+  }
+])
+const activeIndex = ref(0)
+const loading = ref(false)
+const scrolling = ref(false)
+const duration = ref(1000)
+const transitionName = ref("")
+
+// created生命周期钩子 --- vue3setup
+// loading.value = true
+
+if (route.query.id) {
+  activeIndex.value = products.value.findIndex(item => item.id == route.query.id)
+}
+
+// 方法
+const mousewheelHandler = (e) => {
+  if (this.scrolling) {
+    return;
+  }
+  this.scrolling = true;
+  if (e.wheelDelta > 0) {
+    transitionName.value = "move-down";
+    console.log(transitionName.value)
+    activeIndex.value =
+        activeIndex.value === 0
+            ? products.value.length - 1
+            : activeIndex.value - 1;
+  } else {
+    transitionName.value = "move-up";
+    console.log(transitionName.value)
+    activeIndex.value = (activeIndex.value + 1) % products.value.length;
+  }
+  setTimeout(() => {
+    scrolling.value = false;
+  }, duration.value);
+}
+
+onMounted(() => {
+  window.addEventListener("mousewheel", mousewheelHandler);
+})
+
+onUnmounted(() => {
+  window.removeEventListener("mousewheel", mousewheelHandler);
+})
+
+watch(activeIndex, (newValue, oldValue) => {
+
+  if (scrolling.value) {
+    return;
+  }
+  if (route.params.id) {
+    delete route.params.id;
+    return;
+  }
+
+  transitionName.value = newValue < oldValue ? "move-down" : "move-up";
+})
+
+// 计算属性
+const item = computed(() => {
+  return products.value[activeIndex.value] || {};
+})
+
+
+</script>
+
+<style scoped lang="less">
+.move-up-leave-active,
+.move-up-enter-active,
+.move-down-leave-active,
+.move-down-enter-active {
+  transition: all 0.7s;
+  transition-timing-function: cubic-bezier(0.66, 0, 0.34, 1);
+}
+.move-up-leave-to,
+.move-up-enter-from,
+.move-down-leave-to,
+.move-down-enter-from {
+  opacity: 0;
+}
+
+.move-up-leave-to,
+.move-down-enter-from {
+  transform: translateY(-100%);
+}
+.move-down-leave-to,
+.move-up-enter-from {
+  transform: translateY(100%);
+}
+
+.product {
+  position: fixed;
+  z-index: -1;
+  top: 60px;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  min-height: 500px;
+  min-width: 700px;
+  &-fullpage-indicator {
+    position: absolute;
+    z-index: 333;
+    right: 50px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    &-item {
+      margin: 22px 0;
+      width: 5vh;
+      height: 5vh;
+      min-height: 30px;
+      min-width: 30px;
+      cursor: pointer;
+      transition: all 0.3s;
+      border-radius: 50%;
+      overflow: hidden;
+
+      &:hover,
+      &.active {
+        transform: scale(1.3);
+
+        box-shadow: 0 0 14px 0 @box-shadow-dark-color;
+      }
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .view-wrapper {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    position: absolute;
+    height: 100vh;
+    width: 100%;
+    // padding-top: 100px;
+    padding-left: 100px;
+
+    .content {
+      width: 300px;
+      transform: translateY(-50%);
+      position: absolute;
+      top: 50%;
+      // text-align: center;
+      .logo {
+        width: 80px;
+        height: 80px;
+      }
+      h2 {
+        margin: 30px 0;
+      }
+      .description,
+      .subDescription {
+        color: #aaa;
+        line-height: 1.4;
+      }
+      .link {
+        margin-top: 40px;
+        span {
+          color: @main-color;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/StaffStories/StaffStories.vue b/src/views/StaffStories/StaffStories.vue
new file mode 100644
index 0000000..6007046
--- /dev/null
+++ b/src/views/StaffStories/StaffStories.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="staff-story">
+    <div class="banner" :style="`background-image:url(${dataInfo.bannerImage})`">
+      <div class="textContent">
+        <div class="remark">{{ dataInfo.remark }}</div>
+        <div class>{{ dataInfo.name }}-{{ dataInfo.department }}</div>
+      </div>
+    </div>
+    <div class="content">
+      <h1 class="title">{{ dataInfo.title }}</h1>
+      <div class="department">{{ dataInfo.department }}</div>
+      <div class="richContent" v-html="dataInfo.richContent"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {reactive, ref} from "vue";
+import {useRoute} from 'vue-router'
+
+const route = useRoute()
+
+const {id} = route.params;
+
+const dataInfo = reactive({
+  "id": 1,
+  "name": "熊典",
+  "avatar": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/xiongdianavarta.png",
+  "bannerImage": "//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/xiongdianBanner.jpg",
+  "remark": "“公司没有让我们把所有时间都用来完成目标，仍然给大家很多时间，去做与业务没有直接关联的技术研究，大家都能停下脚步思考更多问题。”",
+  "title": "体验最极致的成就感",
+  "department": "IOS-抖音",
+  "richContent": "<p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>我是熊典，在抖音起步不久就加入了字节跳动，在这里发了第一版 TikTok 。</p><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>我本科毕业于北大法学院，应该算是“非典型工程师”，当时很多北大信科的师兄向我推荐字节跳动，说这里创业氛围和技术氛围都很浓厚，我觉得能有自己施展的空间，就过来了。</p><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>来了后我发现，公司的技术氛围特别纯粹，虽然业务顶着很大的压力，我们每周都会举办技术分享会，讨论技术方面的前沿问题。公司没有让大家把所有时间都用来完成业务目标，依然很支持我们研究与业务没有直接关联的技术架构，这样我们能有时间和精力思考更多问题。另外，公司整体上对用户体验和技术细节的追求很高，比如当我们收到一条推送时，只需要重压推送，就可以在小窗里看到完整的视频内容。这个功能可能不会在数据上产生直接收益，但只要对用户体验有帮助，我们都会抽时间去做。</p><img src='https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/xiongdian_blue.jpeg' alt='' style='-webkit-font-smoothing: antialiased; vertical-align: middle; width: 720px; margin: 12px auto; color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'><span style='color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'></span><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>当然，在一家全球月活用户超过 15 亿的公司里工作，我们也会遇到很多挑战。TikTok 起步阶段时，iOS 这边只有我一个全职同学，另外一个是实习生。这对个人能力提出了考验，但同时也意味着，你可以做很多创新和有意思的事，比如我们支持了阿拉伯语从右往左写的场景，还支持了全世界不同肤色、不同人种的美颜。现在我们支持 150 个国家和地区的国际化项目，看到抖音和TikTok 登上十几个国家 App Store 榜首，自己作为贡献其中的一员，非常有成就感。</p><img src='https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/xiongdianstory1Img1.png' alt='' style='-webkit-font-smoothing: antialiased; vertical-align: middle; width: 720px; margin: 12px auto; color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'><span style='color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'></span><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>总体来说，在字节跳动工作，我还是很有成就感的。之前参加 WWDC 技术大会，在会场发现，开场的 App 墙里有我们的产品，排队入场时听到前面的人在讨论 TikTok。WWDC 的参会者都是从全球各地过来，对 Apple 文化很痴迷的人，我在后面看着他们，心里还是很自豪的。</p>"
+},)
+
+const otherStaffStories = ref([
+  {
+    "id": 2,
+    "name": "王司羊",
+    "avatar": "https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/siyangAvata.png",
+    "bannerImage": "//sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/story2_bg2x_1576834857930.jpg",
+    "remark": "“作为应届生加入公司，我参与了很多国际化项目，这些国际化项目经历了从 0 到 1 的过程，我一上来就可以自己带项目，这在其他公司是很少见的，对我来说也是一个极具成长性的机会。”  ",
+    "title": "每个人的声音都可以被听到",
+    "department": "薪酬福利绩效",
+    "richContent": "<p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>2017 年 7 月，我从 UIUC 毕业后选择加入字节跳动。理由很简单，字节跳动是我遇见的唯一一家采用结构化面试的公司，我是人力资源专业出身，这种面试方式在 HR 领域是很先进的，所以我就来了。</p><img src='https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/story2_img1_1577068552076.jpg' alt='' style='-webkit-font-smoothing: antialiased; vertical-align: middle; width: 720px; margin: 12px auto; color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'><span style='color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'></span><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>也许因为我有留学背景，入职后，公司安排我参与国际化工作。我需要在 mentor 的帮助下，制定很多国家的福利政策，这些业务上的挑战，一是培养了我的全局视角，养成用国际化视角去看问题的习惯，二是我要去学习不同国家的文化和习俗，对不同的文化越来越敏感。刚开始接触国际化，我支持的国家数是个位数，现在国际化业务越来越大，我需要支持的国家已经有了几十个，而且公司的产品也去到了一百多个国家。接触从 0 到 1 的过程，独立完成很多国家福利政策的制定，收到来自外籍员工的肯定和鼓励，还是挺有成就感的。</p><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>公司文化上有两点特质，是我非常喜欢的。首先，公司鼓励大家坦诚表达自己的想法和意见。我们会定期举办 CEO 面对面，有次我在 CEO 面对面上直接向一鸣提出，希望公司能够成立国际化业务的小组，会后我觉得当时表述的不是很清楚，于是又在公司内部的 IM 沟通工具上跟他说了一遍。一鸣很快读了这条消息，并且回复了我。更惊喜的是，大概过了半个月，我发现这个国际化小组真的成立了。在字节跳动，坦诚的意见无关 title，每个人的声音都可以被听到。</p><img src='https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/siyangimg2.jpeg' alt='' style='-webkit-font-smoothing: antialiased; vertical-align: middle; width: 720px; margin: 12px auto; color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'><span style='color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'></span><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>其次是公司对待员工的方式。比如说在员工性别问题上，感觉不到女性是特殊群体。我们 team 曾有一个很重要的前沿岗位在招人，最后我的 leader 录用了一个正在怀孕的准妈妈，在她休产假交接工作的邮件里，leader 也会请大家帮忙处理好工作，让她安心休息，这个事情给了我很大的信心。公司里也有很多女性 leader，像抖音的负责人等等，她们都在重要的一线岗位上发挥着自己的能量。</p><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>我加入字节跳动已经两年多了，说实话我好像真的没有什么不满意的地方，有问题吐槽出来，也会及时得到解决。在工作之前我其实有很多期待，没想到来了之后几乎跟我想的一模一样。所以我觉得，哇，真的来对了！</p>"
+  },
+  {
+    "id": 3,
+    "name": "左儒哲",
+    "avatar": "https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/story3_avatar2x_1576834857749.jpg",
+    "bannerImage": "//sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/story3_bg2x_1576834857917.jpg",
+    "remark": "“比起其他公司，字节跳动可能更浪漫，或者说，有更大的梦想。这里不设边界，只要连接人与信息的事情，我们都会尝试去做。” ",
+    "title": "在这里，看见更大的世界",
+    "department": "飞书-客户端",
+    "richContent": "<p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>我是 Roger 左儒哲，一个土生土长的美国人。在哈佛毕业之后，我和许多美国技术人才一样，漂到西海岸的硅谷，在亚马逊、Facebook 这类大厂和初创公司间跳来跳去，大厂小厂都待过后，我发现硅谷变了，这里的技术水平仍然很好，但大公司却越来越趋于稳定保守，不想冒险做创新的事情。</p><img src='https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/story/story3_img12x_1577069327983.jpg' alt='' style='-webkit-font-smoothing: antialiased; vertical-align: middle; width: 720px; margin: 12px auto; color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'><span style='color: rgb(31, 35, 41); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'></span><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>后来我发现，九千多公里外的北京，倒是更像早期的硅谷。移动支付、二维码、共享经济……中国的互联网世界出现了好多创新，北京很多方面的发展比硅谷还要快，于是我决定，一定要来这里看看。</p><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>其实早在 2016 年的时候我就知道字节跳动，那时候只知道今日头条、抖音，还有海外的一些应用，入职后才知道，我们产品的覆盖范围其实比想象中大很多。 现在我主要在做飞书这个产品的客户端，目前还处于创新、创建、探索的阶段，很多的系统还没那么成熟，但这是一个全新的机会，我可以完整参与到做出一个兼具创新性和实用性的产品的过程中去，同事们的技术能力很强。飞书把日历、文档、聊天都放在一个 App 内，这样的工作模型非常方便，未来也很有潜力，很多硅谷的科技公司，也没有一个这么完整的办公软件。飞书的海外版本 Lark 已经发布，我也会给美国的朋友主动推广我们的产品，他们对 Lark 的反馈也都很不错！</p><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>当然，工作有成就感的同时，我也面临一些挑战，公司的工作节奏很快，每个人需要同时做很多事情。目前我们每两周发布一个新版本，关于产品计划，需要提前思考，这两周要发布什么新功能，功能上线后我需要管理哪些新的功能，修复哪些 bug，如何管理自己的时间等等。</p><p style='-webkit-font-smoothing: antialiased; margin: 20px auto; padding: 0px; line-height: 2.14; color: rgb(81, 86, 93); font-family: Gilroy-regular, -apple-system, system-ui, &quot;Segoe UI&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;'>工作下来我最大的感受是， 字节跳动有一个产品至上的概念，视用户为中心，所有的价值观和工作方法都在围绕这个概念展开。与此同时，这里的文化非常开放包容，没有太多的限制——我中文沟通还比较慢，但也可以来到北京和中国的同事一起工作。比起其他公司，字节跳动可能更浪漫，或者说，有更大的梦想。公司不设边界，只要连接人与信息的事情，我们都会尝试去做。</p>"
+  }
+])
+</script>
+
+<style scoped lang="less">
+.staff-story {
+  .banner {
+    height: 550px;
+    min-width: @main-width;
+    background-repeat: no-repeat;
+    background-size: 160%;
+    padding: 120px;
+    color: #fff;
+    font-size: @font-size-medium;
+    font-weight: @font-weight-primary;
+    line-height: @font-line-height-large;
+    background-position: center top;
+
+    .textContent {
+      width: 500px;
+
+      .remark {
+        margin-bottom: 30px;
+      }
+    }
+  }
+
+  .content {
+    width: 720px;
+    margin: auto;
+
+    .title {
+      margin-top: 20px;
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/User/User.vue b/src/views/User/User.vue
new file mode 100644
index 0000000..fdd140a
--- /dev/null
+++ b/src/views/User/User.vue
@@ -0,0 +1,11 @@
+<template>
+<div>User</div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..586a0fd
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,29 @@
+import {defineConfig} from 'vite'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
+import path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [
+        vue(),
+        AutoImport({
+            resolvers: [ElementPlusResolver()],
+        }),
+        Components({
+            resolvers: [ElementPlusResolver()],
+        }),
+    ],
+
+    css: {
+        preprocessorOptions: {
+            less: {
+                additionalData: `@import "${path.resolve(__dirname, 'src/assets/style/variable.less')}";`,
+                javascriptEnabled: true,
+            }
+        },
+    },
+
+})