diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..7cfb193
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,18 @@
+### build ###
+node_modules/
+dist/
+pnpm-lock.yaml
+yarn.lock
+
+
+### umi ###
+.umi
+.umi-production
+
+### IDEA ###
+.idea/
+*.iml
+
+### Mac OS ###
+.DS_Store
+package-lock.json
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..bedc730
--- /dev/null
+++ b/README.md
@@ -0,0 +1,33 @@
+# leasepal-portal
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
diff --git a/env.d.ts b/env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/googled46455e27d5d2432.html b/googled46455e27d5d2432.html
new file mode 100644
index 0000000..ebabc8c
--- /dev/null
+++ b/googled46455e27d5d2432.html
@@ -0,0 +1 @@
+google-site-verification: googled46455e27d5d2432.html
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6297cc9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Octop Rental
+
+
+
+
+
+
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8204693
--- /dev/null
+++ b/package.json
@@ -0,0 +1,36 @@
+{
+ "name": "leasepal-portal",
+ "version": "0.0.0",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "run-p type-check \"build-only {@}\" --",
+ "preview": "vite preview",
+ "build-only": "vite build",
+ "type-check": "vue-tsc --build"
+ },
+ "dependencies": {
+ "@element-plus/icons-vue": "^2.3.1",
+ "element-plus": "^2.9.5",
+ "vue": "^3.5.13",
+ "vue-router": "^4.5.0"
+ },
+ "devDependencies": {
+ "@tsconfig/node22": "^22.0.0",
+ "@types/node": "^22.13.4",
+ "@vitejs/plugin-vue": "^5.2.1",
+ "@vue/tsconfig": "^0.7.0",
+ "less": "^4.2.2",
+ "npm-run-all2": "^7.0.2",
+ "sass": "^1.85.0",
+ "sass-embedded": "^1.85.0",
+ "sass-loader": "^16.0.5",
+ "typescript": "~5.7.3",
+ "vite": "^6.1.0",
+ "vite-plugin-vue-devtools": "^7.7.2",
+ "vite-plugin-vue-setup-extend": "^0.4.0",
+ "vue-i18n": "^11.1.1",
+ "vue-tsc": "^2.2.2"
+ }
+}
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..9d1aa34
Binary files /dev/null and b/public/logo.png differ
diff --git a/src/locales/en.json b/src/locales/en.json
new file mode 100644
index 0000000..177a4fc
--- /dev/null
+++ b/src/locales/en.json
@@ -0,0 +1,56 @@
+{
+ "Language": "English",
+ "logoTitle": "Octop Rental",
+ "home.page":"Home page",
+ "home.service":"Merchant service",
+ "home.contact":"Contact us",
+ "home.problem":"Common problem",
+ "home.title.txt":"Leading credit pressure free platform",
+ "home.navigation":"navigation",
+ "home.language.switching":"Language switching",
+ "contact.us":"Contact us",
+ "android.client":"Android client",
+ "octopContact":"@octop",
+ "octopContact.subtitle":"Line OA @octop",
+ "app.download":"App download",
+ "follow.us":"Follow us",
+ "customer.service":"Customer service",
+ "labour":"Labour",
+ "carousel.name0":"Open Platform",
+ "carousel.title0":"The intelligent risk control model is connected to Deepseek to quickly assess risks, improve the risk control ability of merchants, and intelligent customer service to effectively improve service quality and reduce operating costs",
+ "carousel.name1":"Legal service",
+ "carousel.title1":"Octop Rental cooperated with well-known law firms in Thailand to launch legal protection, which fits the pain points of merchants and targeted to solve the problem of overdue bad debts in the leasing industry.",
+ "carousel.name2":"Southeast Asia's leading credit free leasing platform",
+ "carousel.title2":"",
+ "carousel.text0":"Consult now",
+ "carousel.text1":"Consult now",
+ "carousel.text2":"Merchant settlement",
+ "business.title":"Personal rental service",
+ "business.text":"To provide consumers with deposit-free rental services to make life simpler",
+ "business.footer.title":"Industry-wide scenarios to help you upgrade your business",
+ "business.footer.txt":"As long as you can rent the industry/product, we will provide you with solutions",
+ "business.arr.name0":"Home game video game",
+ "business.arr.name1":"Selected office computers",
+ "business.arr.name2":"Earphone Watch Accessories",
+ "business.arr.name3":"Tablet collection",
+ "business.arr2.name0":"Branded mobile phones to buy first",
+ "business.arr2.name1":"Photo travel assistant",
+ "business.arr.btn":"View details",
+ "coreProduct.title":"Join easy ，one year free",
+ "coreProduct.li1":"1 minute free fast shop",
+ "coreProduct.li2":"App, line small program multi-channel traffic",
+ "coreProduct.li3":"Full-time manager 1 to 1 coaching",
+ "coreProduct.li4":"New store traffic support",
+ "coreProduct.but":"Free trial",
+ "guarantee.title":"Octop Rental quadruple guarantee",
+ "guarantee.txt":"Protect all aspects of your assets",
+ "guarantee.arr.title0":"Risk-free control",
+ "guarantee.arr.title1":"After renting a one-stop service",
+ "guarantee.arr.title2":"Blockchain",
+ "guarantee.arr.title3":"Legal service",
+ "guarantee.arr.content0":"Access to the octopus credit payment system, for users to reduce the deposit while solving the merchant's delivery trust problem. Combined with Octopus's self-developed Red Shield risk control, it provides more than 1,000 pieces of risk control information and AI manual advice, quickly identifies user qualifications, controls risks, and operates stably.",
+ "guarantee.arr.content1":"Judicial support perfect pre-rent post-rent process management, one click to generate prosecution information. Cooperate with well-known law firms to provide convenient lawyer letter, court prosecution, judgment enforcement services.",
+ "guarantee.arr.content2":"Permanent deposit, cannot be tampered with; Can buy people's insurance, property damage after insurance compensation.",
+ "guarantee.arr.content3":"Recommend excellent collection companies to ensure the collection effect, and target to solve the problem of overdue bad debts in the leasing industry.",
+ "footer.title":"Copyright © 2024 - 2025 Octopus Tech All rights reserved"
+}
diff --git a/src/locales/index.ts b/src/locales/index.ts
new file mode 100644
index 0000000..c4ba624
--- /dev/null
+++ b/src/locales/index.ts
@@ -0,0 +1,14 @@
+import en from './en.json';
+import zh from './zh.json';
+import th from './th.json';
+export interface Messages {
+ [key: string]: any;
+}
+
+const messages: Messages = {
+ en,
+ zh,
+ th
+};
+
+export default messages;
diff --git a/src/locales/th.json b/src/locales/th.json
new file mode 100644
index 0000000..dd07222
--- /dev/null
+++ b/src/locales/th.json
@@ -0,0 +1,56 @@
+{
+ "Language": "ภาษาไทย",
+ "logoTitle": "ปลาหมึก",
+ "home.page":"หน้าแรก",
+ "home.service":"บริการธุรกิจ",
+ "home.contact":"ติดต่อเรา",
+ "home.problem":"คำถามทั่วไป",
+ "home.title.txt":"แพลตฟอร์มยกเครดิตชั้นนำ",
+ "home.navigation":"นำทาง",
+ "home.language.switching":"สลับภาษา",
+ "contact.us":"ติดต่อเรา",
+ "octopContact":"@octop",
+ "octopContact.subtitle":"Line OA @octop",
+ "android.client":"ไคลเอนต์ Android",
+ "app.download":"ดาวน์โหลดแอพ",
+ "follow.us":"โฟกัส ที่เรา",
+ "customer.service":"ฝ่ายบริการลูกค้า",
+ "labour":"เทียม",
+ "carousel.name0":"เปิดแพลตฟอร์ม",
+ "carousel.title0":"เข้าถึง Deepseek แบบควบคุมความเสี่ยงอัจฉริยะประเมินความเสี่ยงอย่างรวดเร็วเพิ่มขีดความสามารถในการควบคุมความเสี่ยงของผู้ประกอบการบริการลูกค้าอัจฉริยะ ที่มีประสิทธิภาพสูงขึ้นคุณภาพบริการลดต้นทุนการดำเนินงาน",
+ "carousel.name1":"บริการทางกฎหมาย",
+ "carousel.title1":"ปลาหมึกยักษ์ได้ทำงานร่วมกับ บริษัท ที่มีชื่อเสียงของประเทศไทยในการป้องกันทางกฎหมาย และเป็นผู้ขาย ที่เป็น ที่ต้องการเพื่อแก้ไขปัญหาหนี้ สิน ที่เกินกำหนดของอุตสาหกรรมการเช่า",
+ "carousel.name2":"ผู้ให้บริการรถเช่าชั้นนำของเอเชียตะวันออกเฉียงใต้",
+ "carousel.title2":"",
+ "carousel.text0":"ให้คำปรึกษาทันที",
+ "carousel.text1":"ให้คำปรึกษาทันที",
+ "carousel.text2":"การให้บริการธุรกิจ",
+ "business.title":"บริการเช่าส่วนบุคคล",
+ "business.text":"ให้ผู้บริโภคเช่า และทำให้ชีวิตง่ายขึ้น",
+ "business.footer.title":"ทุกอย่างในวงการจะช่วยให้ธุรกิจของคุณดีขึ้น",
+ "business.footer.txt":"ตราบใด ที่ยังมีอุตสาหกรรม/ผลิตภัณฑ์ให้เช่าเราทุกคนเสนอทางออกให้คุณ",
+ "business.arr.name0":"บ้านเล่นเกมไฟฟ้า",
+ "business.arr.name1":"เลือกคอมพิวเตอร์สำนักงาน",
+ "business.arr.name2":"นาฬิกาหูฟังอุปกรณ์เสริม",
+ "business.arr.name3":"รวบรวมแท็บเล็ต",
+ "business.arr2.name0":"ซื้อโทรศัพท์มือถือยี่ห้อใหม่ก่อน",
+ "business.arr2.name1":"การถ่ายภาพการท่องเ ที่ยวการถ่ายภาพผู้ช่วย",
+ "business.arr.btn":"แสดงรายละเอียด",
+ "coreProduct.title":"การให้บริการอย่างรวดเร็วการให้บริการครั้งแรกสำหรับปีฟรี",
+ "coreProduct.li1":"เปิดร้านได้อย่างรวดเร็วใน 1 นาที",
+ "coreProduct.li2":"แอพ, ไลน์, ช่องข้อมูลหลายช่องของแอพ",
+ "coreProduct.li3":"ผู้จัดการ ที่ดี 1 การติว 1",
+ "coreProduct.li4":"การจราจรรอบใหม่",
+ "coreProduct.but":"ทดลองใช้ฟรี",
+ "guarantee.title":"ปลาหมึกยักษ์รับประกันความปลอดภัย 4",
+ "guarantee.txt":"เดินทางรอบทิศทางเพื่อคุ้มครองทรัพย์สินของคุณ",
+ "guarantee.arr.title0":"ควบคุมความเสี่ยง",
+ "guarantee.arr.title1":"บริการมังกรหลังเช่า",
+ "guarantee.arr.title2":"บล็อค",
+ "guarantee.arr.title3":"บริการทางกฎหมาย",
+ "guarantee.arr.content0":"เข้าถึงระบบการชำระเงินเครดิตปลาหมึก และแก้ปัญหาความไว้วางใจของพ่อค้าในการขนส่งในเวลาเดียวกันกับ ที่ผู้ใช้ลดค่ามัดจำให้ข้อมูลการควบคุมความเสี่ยง 1000 ข้อมูล และข้อเสนอแนะเกี่ยวกับการควบคุมความเสี่ยงของปลาหมึก ที่ได้รับการแนะนำอย่างรวดเร็วในการติดต่อผู้ใช้ควบคุมความเสี่ยง และการดำเนินงาน ที่แข็งแกร่ง",
+ "guarantee.arr.content1":"ฝ่ายตุลาการสนับสนุนการจัดการกระบวนการหลังการเช่า ที่สมบูรณ์แบบโดยการสร้างข้อมูลการฟ้องร้องคีย์เดียวร่วมมือกับ บริษัท ที่มีชื่อเสียงในการให้จดหมายทนายความ ที่สะดวกสบายศาลดำเนินคดี และบริการดำเนินการตามคำพิพากษา",
+ "guarantee.arr.content2":"ใบรับรองถาวรไม่สามารถแก้ไขได้สามารถซื้อผู้รับประกันได้การประกันภัยหลังจากการสูญเสียทรัพย์สิน",
+ "guarantee.arr.content3":"แนะนำออก ที่ยอดเยี่ยม และให้แน่ใจว่า จะได้รับผลตอบแทน ที่ตรงเป้าหมายในการแก้ปัญหา ที่ชำระเงินเกินกำหนดในอุตสาหกรรมการเช่า",
+ "footer.title":"Copyright © 2024 - 2025 บริษัท ออคโตพุส เทคโนโลยี จำกัด"
+}
diff --git a/src/locales/zh.json b/src/locales/zh.json
new file mode 100644
index 0000000..3573f91
--- /dev/null
+++ b/src/locales/zh.json
@@ -0,0 +1,56 @@
+{
+ "Language": "中文",
+ "logoTitle": "章鱼",
+ "home.page":"首页",
+ "home.service":"商户服务",
+ "home.contact":"联系我们",
+ "home.problem":"常见问题",
+ "home.title.txt":"领先的信用免押租赁平台",
+ "home.navigation":"导航",
+ "home.language.switching":"语言切换",
+ "contact.us":"联系我们",
+ "octopContact":"@octop",
+ "octopContact.subtitle":"Line OA @octop",
+ "android.client":"安卓客户端",
+ "app.download":"App下载",
+ "follow.us":"关注我们",
+ "customer.service":"客服电话",
+ "labour":"人工服务",
+ "carousel.name0":"开放平台",
+ "carousel.title0":"智能风控模型接入Deepseek，快速评估风险，提高商家风控能力，智能客服，有效提升服务质量，减少经营成本",
+ "carousel.name1":"知名律所合作提供法务保障",
+ "carousel.title1":"章鱼与泰国知名律所合作推出法务保障，贴合商家痛点，针对性地解决租赁行业逾期坏账问题。",
+ "carousel.name2":"东南亚领先的信用免押租赁平台",
+ "carousel.title2":"",
+ "carousel.text0":"立即咨询",
+ "carousel.text1":"立即咨询",
+ "carousel.text2":"商家入驻",
+ "business.title":"个人租赁服务",
+ "business.text":"为消费者提供免押金租物服务，让生活更简单",
+ "business.footer.title":"全行业全场景助你业务升级",
+ "business.footer.txt":"只要能租的行业/产品，我们都为你提供解决",
+ "business.arr.name0":"宅家游戏电玩",
+ "business.arr.name1":"精选办公电脑",
+ "business.arr.name2":"耳机手表配饰",
+ "business.arr.name3":"平板电脑合集",
+ "business.arr2.name0":"大牌手机抢先买",
+ "business.arr2.name1":"摄影旅拍助手",
+ "business.arr.btn":"查看详情",
+ "coreProduct.title":"快速入驻，首年免费",
+ "coreProduct.li1":"1分钟免费快速开店",
+ "coreProduct.li2":"App、line小程序多渠道流量",
+ "coreProduct.li3":"专职经理1对1辅导",
+ "coreProduct.li4":"新店流量扶持",
+ "coreProduct.but":"免费试用",
+ "guarantee.title":"章鱼四重保障",
+ "guarantee.txt":"全方位为你的资产保驾护航",
+ "guarantee.arr.title0":"免押风控",
+ "guarantee.arr.title1":"租后一条龙服务",
+ "guarantee.arr.title2":"区块链",
+ "guarantee.arr.title3":"法务服务",
+ "guarantee.arr.content0":"接入章鱼信用支付体系，为用户减免押金的同时解决商户的发货信任问题。结合章鱼自研红盾风控，提供超1000条风控信息及AI人工建议，快速甄别用户资质，把控风险，稳健经营。",
+ "guarantee.arr.content1":"司法支持完善的租前租后流程管理，一键生成起诉资料。与知名律所合作，提供便捷的律师函、法院起诉、判决执行服务。",
+ "guarantee.arr.content2":"永久存证，不可篡改；可购买人保，财产损失后保险赔偿。",
+ "guarantee.arr.content3":"推荐优秀的催收公司，确保催收效果，针对性地解决租赁行业逾期坏账问题。",
+ "footer.title":"Copyright © 2024 - 2025 章鱼科技 版权所有"
+}
diff --git a/src/pages/H5/Join/JobDetail.vue b/src/pages/H5/Join/JobDetail.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/H5/Join/JobList.vue b/src/pages/H5/Join/JobList.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..bb9230b
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,44 @@
+//创建路由器，并暴露出去
+
+// 第一步 引入createRouter
+import {createRouter,createWebHistory} from "vue-router"
+//引入可能呈现的组件
+import NavContainer from '@/components/NavContainer.vue'
+import Preson from '@/components/Preson.vue'
+import Home from '@/components/Home.vue'
+import Service from '@/components/Service.vue'
+import Contact from '@/components/Contact.vue'
+import Problem from '@/components/Problem.vue'
+
+// 第二步 创建路由器
+const router = createRouter({
+ history:createWebHistory(),
+ routes:[
+ {
+ path:'/',
+ component:Home
+ },
+ {
+ path:'/NavContainer',
+ component:NavContainer
+ },
+ {
+ path:'/Preson',
+ component:Preson
+ },
+ {
+ path:'/Service',
+ component:Service
+ },
+ {
+ path:'/Contact',
+ component:Contact
+ },
+ {
+ path:'/Problem',
+ component:Problem
+ },
+
+ ]
+})
+export default router
\ No newline at end of file
diff --git a/src/static/font/NotoSansThai-Medium.woff b/src/static/font/NotoSansThai-Medium.woff
new file mode 100644
index 0000000..3f75dc9
Binary files /dev/null and b/src/static/font/NotoSansThai-Medium.woff differ
diff --git a/src/static/font/NotoSansThai-SemiBold.woff b/src/static/font/NotoSansThai-SemiBold.woff
new file mode 100644
index 0000000..ae62cc6
Binary files /dev/null and b/src/static/font/NotoSansThai-SemiBold.woff differ
diff --git a/src/static/googled46455e27d5d2432.html b/src/static/googled46455e27d5d2432.html
new file mode 100644
index 0000000..ebabc8c
--- /dev/null
+++ b/src/static/googled46455e27d5d2432.html
@@ -0,0 +1 @@
+google-site-verification: googled46455e27d5d2432.html
\ No newline at end of file
diff --git a/src/static/logotitle.png b/src/static/logotitle.png
new file mode 100644
index 0000000..4a2a9dd
Binary files /dev/null and b/src/static/logotitle.png differ
diff --git a/src/static/title.png b/src/static/title.png
new file mode 100644
index 0000000..30bf906
Binary files /dev/null and b/src/static/title.png differ
diff --git a/src/styles/flex.scss b/src/styles/flex.scss
new file mode 100644
index 0000000..a336117
--- /dev/null
+++ b/src/styles/flex.scss
@@ -0,0 +1,22 @@
+.flex-display{
+ display: flex;
+ align-items: center;
+}
+.flex-center{
+ justify-content: center;
+}
+.flex-space-around{
+ justify-content: space-around;
+}
+.flex-space-between{
+ justify-content: space-between;
+}
+.flex-column{
+ flex-direction: column;
+}
+.relative{
+ position: relative;
+}
+.absolute{
+ position: absolute;
+}
\ No newline at end of file
diff --git a/src/styles/fontClass.scss b/src/styles/fontClass.scss
new file mode 100644
index 0000000..897c281
--- /dev/null
+++ b/src/styles/fontClass.scss
@@ -0,0 +1,27 @@
+.bold{
+ font-weight: bold;
+}
+.f-12{
+ font-size: 0.75rem;
+}
+.f-14{
+ font-size: 0.875rem;
+}
+.f-16{
+ font-size: 1rem;
+}
+.f-18{
+ font-size: 1.125rem;
+}
+.f-20{
+ font-size: 1.25rem;
+}
+.f-24{
+ font-size: 1.5rem;
+}
+.f-30{
+ font-size: 1.875rem;
+}
+.f-35{
+ font-size: 2.1875rem;
+}
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 0000000..9ad5087
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,3 @@
+@use './reset.scss';
+@use './flex.scss';
+@use './fontClass.scss';
\ No newline at end of file
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
new file mode 100644
index 0000000..0244f37
--- /dev/null
+++ b/src/styles/reset.scss
@@ -0,0 +1,581 @@
+/**
+ * 现代CSS重置调整
+ * ================================================== */
+html {
+ -webkit-text-size-adjust: 100%;
+
+ &:focus-within {
+ scroll-behavior: smooth;
+ }
+}
+
+body {
+ text-size-adjust: 100%;
+ position: relative;
+ background-color: #f8f7f7;
+ width: 100%;
+ min-height: 100vh;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeSpeed;
+}
+
+
+/* 箱子大小规范化*/
+*,
+::after,
+::before {
+ box-sizing: border-box;
+}
+
+
+/* 没有类的元素将获得默认样式 */
+a:not([class]) {
+ text-decoration-skip-ink: auto;
+}
+
+
+/**
+ * CSS重置调整
+ *
+ * http://meyerweb.com/eric/tools/css/reset/
+ * v2.0-modified | 20110126
+ * License: none (public domain)
+ */
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ font-size: 100%;
+ font: inherit;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ vertical-align: baseline;
+}
+
+/* 确保设置一些焦点样式以实现辅助功能*/
+:focus {
+ outline: 0;
+}
+
+/* 旧版浏览器的 HTML5 显示角色重置 */
+main,
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
+}
+
+ol,
+ul {
+ list-style: none;
+}
+
+blockquote,
+q {
+ quotes: none;
+
+ &:before,
+ &:after {
+ content: '';
+ content: none;
+ }
+}
+
+/**
+ * Input Reset
+ */
+input:required,
+input {
+ box-shadow: none;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+ -webkit-box-shadow: 0 0 0 30px white inset;
+}
+
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+}
+
+input[type=search] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+}
+
+textarea {
+ overflow: auto;
+ vertical-align: top;
+ resize: vertical;
+}
+
+input {
+ &:focus {
+ outline: none;
+ }
+}
+
+/**
+ * IE 6/7/8/9 和 Firefox 3 中未定义的正确“内联块”显示.
+ */
+audio,
+canvas,
+video {
+ display: inline-block;
+ max-width: 100%;
+}
+
+/**
+ * 防止现代浏览器在没有控件的情况下显示“音频”。
+ * 删除 iOS 5 设备中的多余高度。
+ */
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/**
+ * IE 7/8/9、Firefox 3 和 Safari 4 中不存在的地址样式.
+ */
+[hidden] {
+ display: none;
+}
+
+/**
+ * 提高了聚焦时的可读性，鼠标悬停在所有浏览器中。
+ */
+a:active,
+a:hover {
+ outline: none;
+}
+
+/* 使图像更易于处理*/
+img {
+ max-width: 100%;
+ display: inline-block;
+ vertical-align: middle;
+ height: auto;
+}
+
+/* 使图片更易于处理 */
+picture {
+ display: inline-block;
+}
+
+/**
+ *解决 Firefox 3+ 在 'input' 上使用 '！important' 设置 'line-height' 的问题
+ * UA 样式表.
+ */
+button,
+input {
+ line-height: normal;
+}
+
+/**
+ *解决“button”和“select”的“文本转换”继承不一致的问题.
+ * 所有其他窗体控件元素不继承“text-transform”值.
+ * 更正 Chrome、Safari 5+ 和 IE 6+ 中的“按钮”样式继承.
+ *更正 Firefox 4+ 和 Opera 中的“选择”样式继承.
+ */
+
+button,
+select {
+ text-transform: none;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button;
+ cursor: pointer;
+ border: 0;
+ background: transparent;
+}
+
+/**
+ *重新设置禁用元素的默认光标。
+ */
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+
+[disabled] {
+ pointer-events: none;
+}
+
+/**
+ * 1. 在 IE 8/9 中将地址框大小设置为 content-box。
+ */
+input[type="checkbox"],
+input[type="radio"] {
+ padding: 0;
+}
+
+/**
+ * 1. 地址 Safari 5 和 Chrome 中的“appearance”设置为“searchfield”。
+ * 2.在 Safari 5 和 Chrome 中将“box-sizing”设置为“border-box”的地址
+ * (include `-moz` to future-proof).
+ */
+input[type="search"] {
+ -webkit-appearance: textfield;
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
+}
+
+/**
+ * 删除 Safari 5 和 Chrome 中的内部填充和搜索取消按钮
+ * 在 OS X 上.
+ */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 删除 Firefox 3+ 中的内部填充和边框.
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+button {
+ border: 0;
+ background: transparent;
+}
+
+textarea {
+ overflow: auto;
+ vertical-align: top;
+ resize: vertical;
+}
+
+/**
+ * 删除表格单元格之间的大部分间距.
+ */
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ text-indent: 0;
+}
+
+
+/**
+ *基于 normalize.css v8.0.1
+ * github.com/necolas/normalize.css
+ */
+hr {
+ box-sizing: content-box;
+ overflow: visible;
+ background: #000;
+ border: 0;
+ height: 1px;
+ line-height: 0;
+ margin: 0;
+ padding: 0;
+ page-break-after: always;
+ width: 100%;
+}
+
+/**
+ * 1. 更正所有浏览器中字体大小的继承和缩放。
+ */
+pre {
+ font-family: monospace, monospace;
+ font-size: 100%;
+}
+
+/**
+ * 删除 IE 10 中活动链接上的灰色背景。
+ */
+a {
+ background-color: transparent;
+ text-decoration: none;
+}
+
+/**
+ * 1. 删除 Chrome 57- 中的下边框
+ * 2. 在 Chrome、Edge、IE、Opera 和 Safari 中添加正确的文本修饰.
+ */
+abbr[title] {
+ border-bottom: none;
+ text-decoration: none;
+}
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+}
+
+/**
+ * 在所有浏览器中添加正确的字体大小.
+ */
+small {
+ font-size: 75%;
+}
+
+/**
+ * 防止 'sub' 和 'sup' 元素影响
+ * 所有浏览器.
+ */
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -5px;
+}
+
+sup {
+ top: -5px;
+}
+
+/**
+ * 1. 更改所有浏览器中的字体样式.
+ * 2. 删除 Firefox 和 Safari 中的边距.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ font-size: 100%;
+ line-height: 1;
+ margin: 0;
+ padding: 0;
+}
+
+/**
+ * 在 IE 中显示溢出.
+ * 1. 在 Edge 中显示溢出.
+ */
+button,
+input {
+ /* 1 */
+ overflow: visible;
+}
+
+/**
+ * 删除 Edge、Firefox 和 IE 中文本转换的继承.
+ * 1. 删除 Firefox 中文本转换的继承.
+ */
+button,
+select {
+ /* 1 */
+ text-transform: none;
+}
+
+/**
+ * 更正了无法在 iOS 和 Safari 中设置可点击类型样式的问题.
+ */
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+ * 删除Firefox中的内边框和内边距.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+ outline: 0;
+}
+
+
+legend {
+ color: inherit;
+ white-space: normal;
+
+ display: block;
+ border: 0;
+ max-width: 100%;
+ width: 100%;
+}
+
+fieldset {
+ min-width: 0;
+}
+
+body:not(:-moz-handler-blocked) fieldset {
+ display: block;
+}
+
+
+/**
+ * 在 Chrome、Firefox 和 Opera 中添加正确的垂直对齐方式。
+ */
+progress {
+ vertical-align: baseline;
+}
+
+
+/**
+ * 更正 Chrome 中递增和递减按钮的光标样式.
+ */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+
+/**
+ * 1. 更正 Chrome 和 Safari 中的奇怪外观。
+ * 2. 更正 Safari 浏览器中的轮廓样式.
+ */
+[type="search"] {
+ -webkit-appearance: textfield;
+ /* 1 */
+ outline-offset: -2px;
+ /* 2 */
+}
+
+/**
+ * 在 macOS 上移除 Chrome 和 Safari 中的内部填充。
+ */
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. 更正了无法在 iOS 和 Safari 中设置可点击类型样式的问题.
+ * 2. 在 Safari 中将字体属性更改为“继承”.
+ */
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ /* 1 */
+ font: inherit;
+ /* 2 */
+}
+
+/* 互动
+ ========================================================================== */
+
+/*
+ *在所有浏览器中添加正确的显示。
+ */
+summary {
+ display: list-item;
+}
+
+/*
+ * Misc
+ * ========================================================================== */
+
+template {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..c38033e
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,4 @@
+/* src/assets/styles/_variables.scss */
+$title-background-color:#ffffff;
+$title-text-color: #282828;
+$active-hover:#eb3a32;
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..913b8f2
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+ "extends": "@vue/tsconfig/tsconfig.dom.json",
+ "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+ "exclude": ["src/**/__tests__/*"],
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..66b5e57
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,11 @@
+{
+ "files": [],
+ "references": [
+ {
+ "path": "./tsconfig.node.json"
+ },
+ {
+ "path": "./tsconfig.app.json"
+ }
+ ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..a83dfc9
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,19 @@
+{
+ "extends": "@tsconfig/node22/tsconfig.json",
+ "include": [
+ "vite.config.*",
+ "vitest.config.*",
+ "cypress.config.*",
+ "nightwatch.conf.*",
+ "playwright.config.*",
+ "eslint.config.*"
+ ],
+ "compilerOptions": {
+ "noEmit": true,
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+ "module": "ESNext",
+ "moduleResolution": "Bundler",
+ "types": ["node"]
+ }
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..9e1344c
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,28 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+import VueSetupExtend from 'vite-plugin-vue-setup-extend'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [
+ vue(),
+ vueDevTools(),
+ VueSetupExtend()
+ ],
+ resolve: {
+ alias: {
+ '@': fileURLToPath(new URL('./src', import.meta.url))
+ },
+ },
+ // 公共scss变量样式
+ css: {
+ preprocessorOptions: {
+ scss: {
+ additionalData: '@use "@/styles/variables.scss" as *;'
+ }
+ }
+ }
+})
\ No newline at end of file