diff --git a/public/images/index/box-pic1.png b/public/images/index/box-pic1.png
new file mode 100644
index 000000000..4b12f417f
Binary files /dev/null and b/public/images/index/box-pic1.png differ
diff --git a/public/images/index/box-pic2.png b/public/images/index/box-pic2.png
new file mode 100644
index 000000000..97c22a857
Binary files /dev/null and b/public/images/index/box-pic2.png differ
diff --git a/public/images/index/box-pic3.png b/public/images/index/box-pic3.png
new file mode 100644
index 000000000..f0c50f771
Binary files /dev/null and b/public/images/index/box-pic3.png differ
diff --git a/public/images/index/box-pic4.png b/public/images/index/box-pic4.png
new file mode 100644
index 000000000..722c9c8ce
Binary files /dev/null and b/public/images/index/box-pic4.png differ
diff --git a/public/images/index/decoration.png b/public/images/index/decoration.png
new file mode 100644
index 000000000..bb1f6ea5b
Binary files /dev/null and b/public/images/index/decoration.png differ
diff --git a/public/images/index/footer-bg.png b/public/images/index/footer-bg.png
new file mode 100644
index 000000000..c29ccc91d
Binary files /dev/null and b/public/images/index/footer-bg.png differ
diff --git a/public/images/index/indexlogo.png b/public/images/index/indexlogo.png
new file mode 100644
index 000000000..abb290382
Binary files /dev/null and b/public/images/index/indexlogo.png differ
diff --git a/public/images/index/language.png b/public/images/index/language.png
new file mode 100644
index 000000000..6d507086e
Binary files /dev/null and b/public/images/index/language.png differ
diff --git a/public/images/index/pic.png b/public/images/index/pic.png
new file mode 100644
index 000000000..30680ff80
Binary files /dev/null and b/public/images/index/pic.png differ
diff --git a/public/images/index/square.png b/public/images/index/square.png
new file mode 100644
index 000000000..f37f1199f
Binary files /dev/null and b/public/images/index/square.png differ
diff --git a/public/images/indexlogo.png b/public/images/indexlogo.png
new file mode 100644
index 000000000..abb290382
Binary files /dev/null and b/public/images/indexlogo.png differ
diff --git a/public/images/language.png b/public/images/language.png
new file mode 100644
index 000000000..6d507086e
Binary files /dev/null and b/public/images/language.png differ
diff --git a/public/js/language.all.js b/public/js/language.all.js
index b7318e115..f42a52788 100644
--- a/public/js/language.all.js
+++ b/public/js/language.all.js
@@ -204,6 +204,7 @@
         {"CN": "最后修改","EN": "Last Review","TC": "最後修改","KM": "ការពិនិត្យចុងក្រោយ","TH": "รีวิวครั้งสุดท้าย","KO": "마지막 검토","JA": "最後の口コミ"},
         {"CN": "准备发布","EN": "Ready to release","TC": "準備發布","KM": "ត្រៀមខ្លួនរួចរាល់ក្នុងការដោះលែង","TH": "พร้อมที่จะปล่อย","KO": "릴리스 준비","JA": "リリースする準備ができて"},
         {"CN": "注册帐号","EN": "Register Account","TC": "註冊帳號","KM": "ចុះឈ្មោះគណនី","TH": "บัญชีลงทะเบียน","KO": "계정 등록","JA": "アカウント登録"},
+        {"CN": "注册账号","EN": "Register Account","TC": "註冊帳號","KM": "ចុះឈ្មោះគណនី","TH": "บัญชีลงทะเบียน","KO": "계정 등록","JA": "アカウント登録"},
         {"CN": "注册成功","EN": "Registration success","TC": "註冊成功","KM": "ការចុះឈ្មោះជោគជ័យ","TH": "ความสำเร็จการลงทะเบียน","KO": "등록 성공","JA": "登録完了"},
         {"CN": "重置密码","EN": "Reset Password","TC": "重置密碼","KM": "កំណត់ពាក្យសម្ងាត់ឡើងវិញ","TH": "รีเซ็ตรหัสผ่าน","KO": "암호를 재설정","JA": "パスワードを再設定する"},
         {"CN": "正在研发","EN": "R & D","TC": "正在研發","KM": "r & d","TH": "R & D","KO": "R & D.","JA": "R＆D"},
@@ -438,5 +439,19 @@
         {"CN": "月","EN": "Month","TC": "月","KM": "ខេ","TH": "เดือน","KO": "달","JA": "月"},
         {"CN": "日","EN": "Day","TC": "日","KM": "ថៃ","TH": "วัน","KO": "일","JA": "日"},
         {"CN": "天","EN": "Day","TC": "天","KM": "ថៃ","TH": "วัน","KO": "일","JA": "日"},
+        {"CN": "立即登录","EN": "Log in immediately","TC": "立即登錄","KM": "ចូលភ្លាមៗ","TH": "เข้าสู่ระบบทันที","KO": "즉시 로그인하십시오","JA": "すぐにログインします"},
+        {"CN": "轻量级任务管理工具","EN": "Lightweight task management tool","TC": "輕量級任務管理工具","KM": "ឧបករណ៍គ្រប់គ្រងភារកិច្ចស្រាល","TH": "เครื่องมือการจัดการงานที่มีน้ำหนักเบา","KO": "경량 작업 관리 도구","JA": "軽量タスク管理ツール"},
+        {"CN": "DooTask是一款轻量级的开源在线项目任务管理工具，提供各类文档协作工具、在线思维导图、在线流程图、项目管理、任务分发、即时IM，文件管理等工具。","EN": "DOOTASK is a lightweight open source online project task management tool, providing various document collaboration tools, online-related map, online flow chart, project management, task distribution, instant IM, file management and other tools.","TC": "DooTask是一款輕量級的開源在線項目任務管理工具，提供各類文檔協作工具、在線思維導圖、在線流程圖、項目管理、任務分發、即時IM，文件管理等工具。","KM": "Takestask គឺជាឧបករណ៍នៃការគ្រប់គ្រងភារកិច្ចរបស់គំរោងតាមអ៊ិនធរណេតស្រាល ៗ ដែលផ្តល់នូវឧបករណ៍សហប្រតិបត្តិការឯកសារផ្សេងៗតារាងផែនទីតាមអ៊ីនធឺណិត, គំនូសតាងនៃការគ្រប់គ្រងលើអ៊ីនធឺណិត, ការគ្រប់គ្រងគម្រោង, ការ, ការងារ, ការគ្រប់គ្រងឯកសារ, ការគ្រប់គ្រងឯកសារនិងឧបករណ៍ផ្សេងទៀត។","TH": "DOOTASK เป็นเครื่องมือการจัดการงานโครงการออนไลน์โอเพ่นซอร์สที่มีน้ำหนักเบาให้เครื่องมือการทำงานร่วมกันเอกสารต่างๆแผนที่ที่เกี่ยวข้องกับออนไลน์แผนภูมิการไหลออนไลน์การจัดการโครงการการกระจายงาน IM ทันทีการจัดการไฟล์และเครื่องมืออื่น ๆ","KO": "DootAck는 다양한 문서 공동 작업 도구, 온라인 관련지도, 온라인 흐름도, 프로젝트 관리, 작업 배포, 인스턴트 IM, 파일 관리 및 기타 도구를 제공하는 가벼운 오픈 오픈 온라인 프로젝트 작업 관리 도구입니다.","JA": "DoTaskは、軽量なオープンソースのオンラインプロジェクトタスク管理ツールで、さまざまなドキュメントコラボレーションツール、オンライン関連マップ、オンラインフローチャート、プロジェクト管理、タスク配信、インスタントIM、ファイル管理などのツールを提供します。"},  
+        {"CN": "高效便捷的团队沟通工具","EN": "Efficient and convenient team communication tool","TC": "高效便捷的團隊溝通工具","KM": "ឧបករណ៍ទំនាក់ទំនងក្រុមប្រកបដោយប្រសិទ្ធភាពនិងងាយស្រួល","TH": "เครื่องมือสื่อสารทีมที่มีประสิทธิภาพและสะดวกสบาย","KO": "효율적이고 편리한 팀 커뮤니케이션 도구","JA": "効率的で便利なチームコミュニケーションツール"},      
+        {"CN": "针对项目和任务建立群组，工作问题可及时沟通，促进团队快速协作，提高团队工作效率。","EN": "To establish groups in projects and tasks, work issues can communicate in time, promoting team rapid collaboration, and improve teamwork efficiency.","TC": "針對項目和任務建立群組，工作問題可及時溝通，促進團隊快速協作，提高團隊工作效率。","KM": "ដើម្បីបង្កើតក្រុមក្នុងគម្រោងនិងភារកិច្ចបញ្ហាការងារអាចប្រាស្រ័យទាក់ទងបានទាន់ពេលវេលាលើកកម្ពស់ការសហការគ្នារបស់ក្រុមនិងធ្វើឱ្យប្រសើរឡើងនូវប្រសិទ្ធភាពក្នុងក្រុមជម្រើសជាតិ។","TH": "ในการสร้างกลุ่มในโครงการและภารกิจปัญหาการทำงานสามารถสื่อสารได้ในเวลาการส่งเสริมการทำงานร่วมกันอย่างรวดเร็วของทีมและปรับปรุงประสิทธิภาพการทำงานเป็นทีม","KO": "프로젝트 및 작업의 그룹을 수립하기 위해 작업 문제는 시간에 통신하고 팀의 신속한 협력을 촉진하고 팀워크 효율성을 향상시킬 수 있습니다.","JA": "プロジェクトやタスクでグループを確立するために、仕事の問題は時間内に通信し、チームの急速なコラボレーションを促進し、チームワークの効率を向上させることができます。"},
+        {"CN": "强大易用的协同创作云文档","EN": "Powerful easy-to-use collaborative creation cloud documentation","TC": "強大易用的協同創作雲文檔","KM": "ឯកសារ Cloud ការបង្កើតរួមគ្នាដែលមានអនុភាពដែលមានអនុភាព","TH": "เอกสารคลาวด์สร้างความร่วมมือที่ใช้งานง่ายที่ใช้งานง่าย","KO": "강력한 사용하기 쉬운 공동 작성 클라우드 문서","JA": "強力な使いやすい共同作成クラウド文書"},
+        {"CN": "汇集文档、电子表格、思维笔记等多种在线工具，汇聚企业知识资源于一处，支持多人实时协同编辑，让团队协作更便捷。","EN": "Collect a variety of online tools such as documentation, spreadsheets, thinking notes, gather in corporate knowledge resources, support multi-person real-time collaborative editing, making teamwork more convenient.","TC": "匯集文檔、電子表格、思維筆記等多種在線工具，匯聚企業知識資源於一處，支持多人實時協同編輯，讓團隊協作更便捷。","KM": "ប្រមូលប្រភេទឧបករណ៍តាមអ៊ិនធរណេតជាច្រើនប្រភេទបទប្បទានលក្ខណៈការគិតកំណត់ត្រាការគិតដែលប្រមូលផ្តុំនៅក្នុងធនធានចំណេះដឹងរបស់ក្រុមហ៊ុនគាំទ្រការកែប្រែសហការច្រើនរបស់អ្នកធ្វើការធ្វើឱ្យការងារជាក្រុមកាន់តែងាយស្រួល។","TH": "รวบรวมเครื่องมือออนไลน์ที่หลากหลายเช่นเอกสารสเปรดชีตบันทึกการคิดรวบรวมในทรัพยากรความรู้ขององค์กรสนับสนุนการแก้ไขการทำงานร่วมกันแบบเรียลไทม์หลายคนทำให้การทำงานเป็นทีมสะดวกยิ่งขึ้น","KO": "문서, 스프레드 시트, 사고 메모와 같은 다양한 온라인 도구를 수집하고 기업 지식 리소스를 모으고 다중 사람 실시간 협업 편집을 지원하여 팀워크를보다 편리하게 만듭니다.","JA": "ドキュメンテーション、スプレッドシート、思考ノートなどのさまざまなオンラインツールを収集し、企業のナレッジリソースに集まり、マルチパーソンリアルタイムの共同編集をサポートして、チームワークをより便利です。"},
+        {"CN": "便捷易用的项目管理模板","EN": "Conveniently used project management template","TC": "便捷易用的項目管理模板","KM": "គំរូនៃការគ្រប់គ្រងគម្រោងដែលប្រើយ៉ាងងាយស្រួល","TH": "ใช้แม่แบบการจัดการโครงการที่ใช้งานได้สะดวก","KO": "편리하게 사용되는 프로젝트 관리 템플릿","JA": "便利なプロジェクト管理テンプレートを使用しました"},
+        {"CN": "模版满足多种团队协作场景，同时支持自定义模版，满足团队个性化场景管理需求，可直观的查看项目的进展情况，团队协作更方便。","EN": "The template meets a variety of teamwork scenes, and supports custom template, meets the management needs of team personalized scenes, and visually view the progress of the project, and teamwork is more convenient.","TC": "模版滿足多種團隊協作場景，同時支持自定義模版，滿足團隊個性化場景管理需求，可直觀的查看項目的進展情況，團隊協作更方便。","KM": "ទំព័រគំរូនេះត្រូវនឹងឈុតឆាកការងារជាក្រុមជាច្រើននិងគាំទ្រគំរូផ្ទាល់ខ្លួនត្រូវឆ្លើយតបទៅនឹងតម្រូវការរបស់ការគ្រប់គ្រងនៃឈុតឆាកផ្ទាល់ខ្លួនរបស់ក្រុមនិងមើលវឌ្ឍនភាពនៃគម្រោងនេះនិងការងារជាក្រុមកាន់តែងាយស្រួល។","TH": "เทมเพลตตรงกับฉากการทำงานเป็นทีมที่หลากหลายและรองรับเทมเพลตที่กำหนดเองตรงตามความต้องการด้านการจัดการของฉากส่วนบุคคลของทีมและมองเห็นความคืบหน้าของโครงการและการทำงานเป็นทีมสะดวกกว่า","KO": "템플릿은 다양한 팀웍 장면을 충족하며 사용자 정의 템플릿을 지원하고 팀 개인화 된 장면의 관리 요구 사항을 충족시키고 시각적으로 프로젝트의 진행 상황을 볼 수 있으며 팀웍이 더 편리합니다.","JA": "テンプレートはさまざまなチームワークシーンを満たし、カスタムテンプレートをサポートし、チームパーソナライズされたシーンの管理ニーズを満たし、プロジェクトの進行状況を視覚的に表示し、チームワークはより便利です。"},
+        {"CN": "清晰直观的任务日历","EN": "Clear and intuitive task calendar","TC": "清晰直觀的任務日曆","KM": "ប្រតិទិនភារកិច្ចច្បាស់លាស់និងវិចារណញាណ","TH": "ปฏิทินงานที่ชัดเจนและใช้งานง่าย","KO": "명확하고 직관적 인 작업 일정","JA": "クリアで直感的なタスクカレンダー"},
+        {"CN": "通过灵活的任务日历，轻松安排每一天的日程，把任务拆解到每天，让工作目标更清晰，时间分配更合理。","EN": "Through the flexible task calendar, easily arrange the daily schedule, disassemble the task to every day, let the work goals clearer, time allocation is more reasonable.","TC": "通過靈活的任務日曆，輕鬆安排每一天的日程，把任務拆解到每天，讓工作目標更清晰，時間分配更合理。","KM": "តាមរយៈប្រតិទិនភារកិច្ចដែលអាចបត់បែនបានរៀបចំឱ្យមានកាលវិភាគប្រចាំថ្ងៃដោយងាយផ្តាច់ភារកិច្ចឡើងវិញជារៀងរាល់ថ្ងៃឱ្យគោលដៅការងារកាន់តែច្បាស់ការបែងចែកពេលវេលាគឺសមហេតុផលជាង។","TH": "ผ่านปฏิทินงานที่ยืดหยุ่นจัดเรียงตารางประจำวันได้อย่างง่ายดายถอดชิ้นส่วนงานทุกวันปล่อยให้เป้าหมายการทำงานชัดเจนขึ้นการจัดสรรเวลานั้นสมเหตุสมผลมากขึ้น","KO": "유연한 작업 일정을 통해 일일 일정을 쉽게 준비하고, 매일 작업을 분해하고, 작업 목표를 더 명확하게, 시간 할당이 더 많습니다.","JA": "柔軟なタスクカレンダーを通して、毎日のスケジュールを簡単に調整し、タスクを毎日分解し、作業目標をより明確にして、時間割り当てがより合理的なものです。"},
+        {"CN": "开启您的 Dootask 团队协作","EN": "Open your DOOTASK team collaboration","TC": "開啟您的 Dootask 團隊協作","KM": "បើកកិច្ចសហប្រតិបត្តិការក្រុមរបស់អ្នក","TH": "เปิดการทำงานร่วมกันของทีม DOOTASK ของคุณ","KO": "Dootask 팀 공동 작업을 엽니 다","JA": "あなたのdootaskチームコラボレーションを開く"},
+        {"CN": "联系我们","EN": "Contact us","TC": "聯繫我們","KM": "ទាក់ទង​មក​ពួក​យើង","TH": "ติดต่อเรา","KO": "문의하기","JA": "お問い合わせ"},
+        {"CN": "桂公网安备 31011002000058号 桂ICP备12020087号-3","EN": "Gui Gong Net Anni 31011002000058 Gui ICP No. 12020087 -3","TC": "桂公網安備 31011002000058號 桂ICP備12020087號-3","KM": "Gui Gong Net Net Ann 31011002000058 GUI ICP លេខ 12020087 -3","TH": "Gui Gong Net Anni 31011002000058 GUI ICP No. 12020087 -3","KO": "Gui Gong Net Anni 31011002000058 GUI ICP No. 12020087 -3","JA": "GUI GONG NET ANNI 31011002000058 GUI ICP No. 12020087 -3"},
     ]
 })(window)
diff --git a/resources/assets/js/language/index.js b/resources/assets/js/language/index.js
index e335e960f..e914783ca 100644
--- a/resources/assets/js/language/index.js
+++ b/resources/assets/js/language/index.js
@@ -73,6 +73,7 @@ export default {
                         this.addLanguageData(require("./language.js").default);
                         this.addLanguageData(window.languageData);
                         //
+               
                         languageListenerObjects.push((lang) => {
                             this.languageType = lang;
                         });
diff --git a/resources/assets/js/pages/index.vue b/resources/assets/js/pages/index.vue
index 2550f4127..56bc6711e 100644
--- a/resources/assets/js/pages/index.vue
+++ b/resources/assets/js/pages/index.vue
@@ -1,21 +1,157 @@
 <template>
-    <div></div>
+    <div>
+        <div class="page-warp">
+            <div class="page-header">
+                <div class="header-nav">
+                    <div class="header-nav-box">
+                        <div class="logo"></div>
+                    </div>
+                    <div class="header-nav-box">
+                        <div class="header-right-one">
+                            <div class="header-right-one-language"></div>
+                            <Dropdown trigger="click" @on-click="setLanguage">
+                                <a
+                                    href="javascript:void(0)"
+                                    class="header-right-one-dropdown"
+                                >
+                                    {{ currentLanguage }}
+                                    <Icon type="ios-arrow-down"></Icon>
+                                </a>
+                                <DropdownMenu slot="list">
+                                    <Dropdown-item
+                                        v-for="(item, key) in languageList"
+                                        :key="key"
+                                        :name="key"
+                                        :selected="getLanguage() === key"
+                                        >{{ item }}</Dropdown-item
+                                    >
+                                </DropdownMenu>
+                            </Dropdown>
+                        </div>
+                        <div class="header-right-two" @click="register">
+                           {{$L('注册账号')}} 
+                        </div>
+                        <div class="header-right-three" @click="login">
+                            {{$L('立即登录')}}
+                        </div>
+                    </div>
+                </div>
+                <div class="header-content">
+                    <div class="header-title header-title-one">Dootask</div>
+                    <div class="header-title">{{$L('轻量级任务管理工具')}}</div>
+                    <div class="header-tips">
+                        {{$L('DooTask是一款轻量级的开源在线项目任务管理工具，提供各类文档协作工具、在线思维导图、在线流程图、项目管理、任务分发、即时IM，文件管理等工具。')}}
+                    </div>
+                    <div class="login-buttom" @click="login">{{$L('登录')}}</div>
+                </div>
+
+                <div class="header-bg"></div>
+                <div class="header-pic"></div>
+            </div>
+            <div class="page-main">
+                <div class="main-box-one">
+                    <div class="box-one-square"></div>
+                    <div class="box-one-pic1"></div>
+                    <div class="box-one-tips">
+                        <div class="box-square"></div>
+                        <div class="box-title">{{$L('高效便捷的团队沟通工具')}} </div>
+                        <div class="box-tips">
+                            {{$L('针对项目和任务建立群组，工作问题可及时沟通，促进团队快速协作，提高团队工作效率。')}}  
+                        </div>
+                    </div>
+                </div>
+                <div class="main-box-two">
+                    <div class="box-two-tips">
+                        <div class="box-square"></div>
+                        <div class="box-title">{{$L('强大易用的协同创作云文档')}}</div>
+                        <div class="box-tips">
+                            {{$L('汇集文档、电子表格、思维笔记等多种在线工具，汇聚企业知识资源于一处，支持多人实时协同编辑，让团队协作更便捷。')}}
+                        </div>
+                    </div>
+                    <div class="box-two-square"></div>
+                    <div class="box-two-pic2"></div>
+                </div>
+                <div class="main-box-one">
+                    <div class="box-one-square"></div>
+                    <div class="box-one-pic3"></div>
+                    <div class="box-one-tips">
+                        <div class="box-square"></div>
+                        <div class="box-title">{{$L('便捷易用的项目管理模板')}}</div>
+                        <div class="box-tips">
+                            {{$L('模版满足多种团队协作场景，同时支持自定义模版，满足团队个性化场景管理需求，可直观的查看项目的进展情况，团队协作更方便。')}}
+                        </div>
+                    </div>
+                </div>
+                <div class="main-box-two">
+                    <div class="box-two-tips">
+                        <div class="box-square"></div>
+                        <div class="box-title">{{$L('清晰直观的任务日历')}}</div>
+                        <div class="box-tips">
+                            {{$L('通过灵活的任务日历，轻松安排每一天的日程，把任务拆解到每天，让工作目标更清晰，时间分配更合理。')}}
+                        </div>
+                    </div>
+                    <div class="box-two-square"></div>
+                    <div class="box-two-pic4"></div>
+                </div>
+            </div>
+            <div class="page-footer">
+                <div class="footer-service">
+                    <div class="footer-bg-box">
+                        <div class="box-title">{{$L('开启您的 Dootask 团队协作')}}</div>
+                        <div class="buttom-box">
+                            <div class="login-btn" @click="login">{{$L('立即登录')}}</div>
+                            <div class="contact-btn">{{$L('联系我们')}}</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="footer-opyright">
+                    {{$L('桂公网安备 31011002000058号 桂ICP备12020087号-3')}}
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
 export default {
     data() {
-        return {}
+        return {};
+    },
+    computed: {
+        currentLanguage() {
+            return this.languageList[this.languageType] || "Language";
+        },
     },
     mounted() {
-        if (this.$store.state.userId > 0) {
-            this.goForward({path: '/manage/dashboard'}, true);
-        } else {
-            this.goForward({path: '/login'}, true);
-        }
+        // if (this.$store.state.userId > 0) {
+        //     this.goForward({path: '/manage/dashboard'}, true);
+        // } else {
+        //     this.goForward({path: '/login'}, true);
+        // }
+    },
+    methods: {
+        login() {
+            this.goForward(
+                {
+                    path: `/login`,
+                },
+                false
+            );
+        },
+        register() {
+            this.goForward(
+                {
+                    path: `/login`,
+                    query: {
+                        type: "reg",
+                    },
+                },
+                false
+            );
+        },
     },
     deactivated() {
-        this.$destroy()
-    }
-}
+        // this.$destroy()
+    },
+};
 </script>
diff --git a/resources/assets/js/pages/login.vue b/resources/assets/js/pages/login.vue
index 5ee55241a..6f3de51a4 100644
--- a/resources/assets/js/pages/login.vue
+++ b/resources/assets/js/pages/login.vue
@@ -1,134 +1,251 @@
 <template>
     <div class="page-login">
-        <PageTitle :title="$L('登录')"/>
+        <PageTitle :title="$L('登录')" />
         <div class="login-body">
             <div class="login-logo"></div>
             <div class="login-box">
                 <div class="login-title">Welcome Dootask</div>
 
-                <div v-if="loginType=='reg'" class="login-subtitle">{{$L('输入您的信息以创建帐户。')}}</div>
-                <div v-else class="login-subtitle">{{$L('输入您的凭证以访问您的帐户。')}}</div>
+                <div v-if="loginType == 'reg'" class="login-subtitle">
+                    {{ $L("输入您的信息以创建帐户。") }}
+                </div>
+                <div v-else class="login-subtitle">
+                    {{ $L("输入您的凭证以访问您的帐户。") }}
+                </div>
 
                 <div class="login-input">
-                    <Input v-if="isElectron && cacheServerUrl" :value="cacheServerUrl" prefix="ios-globe-outline" size="large" readonly clearable @on-clear="onServerUrlClear"/>
+                    <Input
+                        v-if="isElectron && cacheServerUrl"
+                        :value="cacheServerUrl"
+                        prefix="ios-globe-outline"
+                        size="large"
+                        readonly
+                        clearable
+                        @on-clear="onServerUrlClear"
+                    />
 
-                    <Input v-model="email" prefix="ios-mail-outline" :placeholder="$L('输入您的电子邮件')" size="large" @on-enter="onLogin" @on-blur="onBlur" />
-                    <Input v-model="password" prefix="ios-lock-outline" :placeholder="$L('输入您的密码')" type="password" size="large" @on-enter="onLogin" />
+                    <Input
+                        v-model="email"
+                        prefix="ios-mail-outline"
+                        :placeholder="$L('输入您的电子邮件')"
+                        size="large"
+                        @on-enter="onLogin"
+                        @on-blur="onBlur"
+                    />
+                    <Input
+                        v-model="password"
+                        prefix="ios-lock-outline"
+                        :placeholder="$L('输入您的密码')"
+                        type="password"
+                        size="large"
+                        @on-enter="onLogin"
+                    />
 
-                    <Input v-if="loginType=='reg'" v-model="password2" prefix="ios-lock-outline" :placeholder="$L('输入确认密码')" type="password" size="large" @on-enter="onLogin" />
-                    <Input v-if="loginType=='reg' && needInvite" v-model="invite" class="login-code" :placeholder="$L('请输入注册邀请码')" type="text" size="large" @on-enter="onLogin"><span slot="prepend">&nbsp;{{$L('邀请码')}}&nbsp;</span></Input>
+                    <Input
+                        v-if="loginType == 'reg'"
+                        v-model="password2"
+                        prefix="ios-lock-outline"
+                        :placeholder="$L('输入确认密码')"
+                        type="password"
+                        size="large"
+                        @on-enter="onLogin"
+                    />
+                    <Input
+                        v-if="loginType == 'reg' && needInvite"
+                        v-model="invite"
+                        class="login-code"
+                        :placeholder="$L('请输入注册邀请码')"
+                        type="text"
+                        size="large"
+                        @on-enter="onLogin"
+                        ><span slot="prepend"
+                            >&nbsp;{{ $L("邀请码") }}&nbsp;</span
+                        ></Input
+                    >
 
-                    <Input v-if="loginType=='login' && codeNeed" v-model="code" class="login-code" :placeholder="$L('输入图形验证码')" size="large" @on-enter="onLogin">
-                        <Icon type="ios-checkmark-circle-outline" class="login-icon" slot="prepend"></Icon>
-                        <div slot="append" class="login-code-end" @click="reCode"><img :src="codeUrl"/></div>
+                    <Input
+                        v-if="loginType == 'login' && codeNeed"
+                        v-model="code"
+                        class="login-code"
+                        :placeholder="$L('输入图形验证码')"
+                        size="large"
+                        @on-enter="onLogin"
+                    >
+                        <Icon
+                            type="ios-checkmark-circle-outline"
+                            class="login-icon"
+                            slot="prepend"
+                        ></Icon>
+                        <div
+                            slot="append"
+                            class="login-code-end"
+                            @click="reCode"
+                        >
+                            <img :src="codeUrl" />
+                        </div>
                     </Input>
 
-                    <Button type="primary" :loading="loadIng > 0 || loginJump" size="large" long @click="onLogin">{{$L(loginText)}}</Button>
+                    <Button
+                        type="primary"
+                        :loading="loadIng > 0 || loginJump"
+                        size="large"
+                        long
+                        @click="onLogin"
+                        >{{ $L(loginText) }}</Button
+                    >
 
-                    <div v-if="loginType=='reg'" class="login-switch">{{$L('已经有帐号？')}}<a href="javascript:void(0)" @click="loginType='login'">{{$L('登录帐号')}}</a></div>
-                    <div v-else class="login-switch">{{$L('还没有帐号？')}}<a href="javascript:void(0)" @click="loginType='reg'">{{$L('注册帐号')}}</a></div>
+                    <div v-if="loginType == 'reg'" class="login-switch">
+                        {{ $L("已经有帐号？")
+                        }}<a
+                            href="javascript:void(0)"
+                            @click="loginType = 'login'"
+                            >{{ $L("登录帐号") }}</a
+                        >
+                    </div>
+                    <div v-else class="login-switch">
+                        {{ $L("还没有帐号？")
+                        }}<a
+                            href="javascript:void(0)"
+                            @click="loginType = 'reg'"
+                            >{{ $L("注册帐号") }}</a
+                        >
+                    </div>
                 </div>
             </div>
             <div class="login-bottom">
                 <Dropdown trigger="click" @on-click="setLanguage" transfer>
                     <div class="login-language">
-                        {{currentLanguage}}
+                        {{ currentLanguage }}
                         <i class="taskfont">&#xe689;</i>
                     </div>
                     <Dropdown-menu slot="list">
-                        <Dropdown-item v-for="(item, key) in languageList" :key="key" :name="key" :selected="getLanguage() === key">{{item}}</Dropdown-item>
+                        <Dropdown-item
+                            v-for="(item, key) in languageList"
+                            :key="key"
+                            :name="key"
+                            :selected="getLanguage() === key"
+                            >{{ item }}</Dropdown-item
+                        >
                     </Dropdown-menu>
                 </Dropdown>
-                <div class="login-forgot">{{$L('忘记密码了？')}}<a href="javascript:void(0)" @click="forgotPassword">{{$L('重置密码')}}</a></div>
+                <div class="login-forgot">
+                    {{ $L("忘记密码了？")
+                    }}<a href="javascript:void(0)" @click="forgotPassword">{{
+                        $L("重置密码")
+                    }}</a>
+                </div>
             </div>
         </div>
         <div class="login-right-bottom">
-            <Button v-if="isElectron" icon="ios-globe-outline" type="primary" @click="onServerUrlInput">{{$L('自定义服务器')}}</Button>
-            <AppDown/>
+            <Button
+                v-if="isElectron"
+                icon="ios-globe-outline"
+                type="primary"
+                @click="onServerUrlInput"
+                >{{ $L("自定义服务器") }}</Button
+            >
+            <AppDown />
         </div>
     </div>
 </template>
 
 <script>
 import AppDown from "../components/AppDown";
-import {mapState} from "vuex";
+import { mapState } from "vuex";
 
 export default {
-    components: {AppDown},
+    components: { AppDown },
     data() {
         return {
             loadIng: 0,
 
             codeNeed: false,
-            codeUrl: this.$store.state.method.apiUrl('users/login/codeimg'),
+            codeUrl: this.$store.state.method.apiUrl("users/login/codeimg"),
 
-            loginType: 'login',
+            loginType: "login",
             loginJump: false,
-            email: this.$store.state.method.getStorageString("cacheLoginEmail") || '',
-            password: '',
-            password2: '',
-            code: '',
-            invite: '',
-
+            email:
+                this.$store.state.method.getStorageString("cacheLoginEmail") ||
+                "",
+            password: "",
+            password2: "",
+            code: "",
+            invite: "",
             demoAccount: {},
-
             needInvite: false,
-        }
+        };
     },
     mounted() {
         this.getDemoAccount();
         //
+        console.log(this.$route);
         if (!this.isElectron && this.cacheServerUrl) {
             this.onServerUrlClear();
         }
+        this.$route.query.type == "reg"
+            ? (this.loginType = "reg")
+            : (this.loginType = "login");
+        console.log(this.$route);
     },
     deactivated() {
         this.loginJump = false;
     },
     computed: {
-        ...mapState(['cacheServerUrl']),
+        ...mapState(["cacheServerUrl"]),
 
         currentLanguage() {
-            return this.languageList[this.languageType] || 'Language'
+            return this.languageList[this.languageType] || "Language";
         },
         loginText() {
-            let text = this.loginType == 'login' ? '登录' : '注册';
+            let text = this.loginType == "login" ? "登录" : "注册";
             if (this.loginJump) {
-                text += "成功..."
+                text += "成功...";
             }
-            return text
-        }
+            return text;
+        },
     },
     watch: {
+        $route(to, from) {
+            this.$route.query.type == "reg"
+                ? (this.loginType = "reg")
+                : (this.loginType = "login");
+            console.log(this.$route);
+        },
         loginType(val) {
-            if (val == 'reg') {
+            if (val == "reg") {
                 this.getNeedInvite();
             }
-        }
+        },
     },
     methods: {
         getDemoAccount() {
-            this.$store.dispatch("call", {
-                url: 'system/demo',
-            }).then(({data}) => {
-                this.demoAccount = data;
-                if (data.account) {
-                    this.email = data.account;
-                    this.password = data.password;
-                }
-            }).catch(() => {
-                this.demoAccount = {};
-            });
+            this.$store
+                .dispatch("call", {
+                    url: "system/demo",
+                })
+                .then(({ data }) => {
+                    this.demoAccount = data;
+                    if (data.account) {
+                        this.email = data.account;
+                        this.password = data.password;
+                    }
+                })
+                .catch(() => {
+                    this.demoAccount = {};
+                });
         },
 
         getNeedInvite() {
-            this.$store.dispatch("call", {
-                url: 'users/reg/needinvite',
-            }).then(({data}) => {
-                this.needInvite = !!data.need;
-            }).catch(() => {
-                this.needInvite = false;
-            });
+            this.$store
+                .dispatch("call", {
+                    url: "users/reg/needinvite",
+                })
+                .then(({ data }) => {
+                    this.needInvite = !!data.need;
+                })
+                .catch(() => {
+                    this.needInvite = false;
+                });
         },
 
         forgotPassword() {
@@ -136,7 +253,9 @@ export default {
         },
 
         reCode() {
-            this.codeUrl = this.$store.state.method.apiUrl('users/login/codeimg?_=' + Math.random())
+            this.codeUrl = this.$store.state.method.apiUrl(
+                "users/login/codeimg?_=" + Math.random()
+            );
         },
 
         onServerUrlInput() {
@@ -146,53 +265,67 @@ export default {
                 placeholder: "请输入服务器地址",
                 onOk: (value, cb) => {
                     if (value) {
-                        if (!$A.leftExists(value, "http://") && !$A.leftExists(value, "https://")) {
+                        if (
+                            !$A.leftExists(value, "http://") &&
+                            !$A.leftExists(value, "https://")
+                        ) {
                             value = "http://" + value;
                         }
                         if (!$A.rightExists(value, "/api/")) {
-                            value = value + ($A.rightExists(value, "/") ? "api/" : "/api/");
+                            value =
+                                value +
+                                ($A.rightExists(value, "/") ? "api/" : "/api/");
                         }
-                        this.$store.dispatch("call", {
-                            url: value + 'system/setting',
-                        }).then(() => {
-                            this.$store.state.method.setStorage("cacheServerUrl", value)
-                            window.location.reload();
-                        }).catch(({msg}) => {
-                            $A.modalError(msg || "服务器地址无效", 301);
-                            cb()
-                        });
+                        this.$store
+                            .dispatch("call", {
+                                url: value + "system/setting",
+                            })
+                            .then(() => {
+                                this.$store.state.method.setStorage(
+                                    "cacheServerUrl",
+                                    value
+                                );
+                                window.location.reload();
+                            })
+                            .catch(({ msg }) => {
+                                $A.modalError(msg || "服务器地址无效", 301);
+                                cb();
+                            });
                         return;
                     }
-                    this.$store.state.method.setStorage("cacheServerUrl", "")
+                    this.$store.state.method.setStorage("cacheServerUrl", "");
                     window.location.reload();
-                }
+                },
             });
         },
 
         onServerUrlClear() {
-            this.$store.state.method.setStorage("cacheServerUrl", "")
+            this.$store.state.method.setStorage("cacheServerUrl", "");
             window.location.reload();
         },
 
         onBlur() {
-            if (this.loginType != 'login' || !this.email) {
+            if (this.loginType != "login" || !this.email) {
                 this.codeNeed = false;
                 return;
             }
             this.loadIng++;
-            this.$store.dispatch("call", {
-                url: 'users/login/needcode',
-                data: {
-                    email: this.email,
-                },
-            }).then(() => {
-                this.loadIng--;
-                this.reCode();
-                this.codeNeed = true;
-            }).catch(() => {
-                this.loadIng--;
-                this.codeNeed = false;
-            });
+            this.$store
+                .dispatch("call", {
+                    url: "users/login/needcode",
+                    data: {
+                        email: this.email,
+                    },
+                })
+                .then(() => {
+                    this.loadIng--;
+                    this.reCode();
+                    this.codeNeed = true;
+                })
+                .catch(() => {
+                    this.loadIng--;
+                    this.codeNeed = false;
+                });
         },
 
         onLogin() {
@@ -202,71 +335,87 @@ export default {
             if (!this.password) {
                 return;
             }
-            if (this.loginType == 'reg') {
+            if (this.loginType == "reg") {
                 if (this.password != this.password2) {
                     $A.noticeError("确认密码输入不一致");
                     return;
                 }
             }
             this.loadIng++;
-            this.$store.dispatch("call", {
-                url: 'users/login',
-                data: {
-                    type: this.loginType,
-                    email: this.email,
-                    password: this.password,
-                    code: this.code,
-                    invite: this.invite,
-                },
-            }).then(({data}) => {
-                this.loadIng--;
-                this.password = "";
-                this.code = "";
-                this.invite = "";
-                this.$store.state.method.setStorage("cacheLoginEmail", this.email)
-                this.$store.dispatch("handleClearCache", data).then(() => {
-                    this.goNext1();
-                }).catch(() => {
-                    this.goNext1();
+            this.$store
+                .dispatch("call", {
+                    url: "users/login",
+                    data: {
+                        type: this.loginType,
+                        email: this.email,
+                        password: this.password,
+                        code: this.code,
+                        invite: this.invite,
+                    },
+                })
+                .then(({ data }) => {
+                    this.loadIng--;
+                    this.password = "";
+                    this.code = "";
+                    this.invite = "";
+                    this.$store.state.method.setStorage(
+                        "cacheLoginEmail",
+                        this.email
+                    );
+                    this.$store
+                        .dispatch("handleClearCache", data)
+                        .then(() => {
+                            this.goNext1();
+                        })
+                        .catch(() => {
+                            this.goNext1();
+                        });
+                })
+                .catch(({ data, msg }) => {
+                    this.loadIng--;
+                    $A.noticeError(msg);
+                    if (data.code === "need") {
+                        this.reCode();
+                        this.codeNeed = true;
+                    }
                 });
-            }).catch(({data, msg}) => {
-                this.loadIng--;
-                $A.noticeError(msg);
-                if (data.code === 'need') {
-                    this.reCode();
-                    this.codeNeed = true;
-                }
-            });
         },
 
         goNext1() {
             this.loginJump = true;
-            if (this.loginType == 'login') {
+            if (this.loginType == "login") {
                 this.goNext2();
             } else {
                 // 新注册自动创建项目
-                this.$store.dispatch("call", {
-                    url: 'project/add',
-                    data: {
-                        name: this.$L('个人项目'),
-                        desc: this.$L('注册时系统自动创建项目，你可以自由删除。')
-                    },
-                }).then(() => {
-                    this.goNext2();
-                }).catch(() => {
-                    this.goNext2();
-                });
+                this.$store
+                    .dispatch("call", {
+                        url: "project/add",
+                        data: {
+                            name: this.$L("个人项目"),
+                            desc: this.$L(
+                                "注册时系统自动创建项目，你可以自由删除。"
+                            ),
+                        },
+                    })
+                    .then(() => {
+                        this.goNext2();
+                    })
+                    .catch(() => {
+                        this.goNext2();
+                    });
             }
         },
 
         goNext2() {
-            let fromUrl = decodeURIComponent($A.getObject(this.$route.query, 'from'));
+            let fromUrl = decodeURIComponent(
+                $A.getObject(this.$route.query, "from")
+            );
             if (fromUrl) {
                 window.location.replace(fromUrl);
             } else {
-                this.goForward({path: '/manage/dashboard'}, true);
+                this.goForward({ path: "/manage/dashboard" }, true);
             }
-        }
-    }
-}
+        },
+    },
+};
 </script>
diff --git a/resources/assets/sass/pages/_.scss b/resources/assets/sass/pages/_.scss
index 77226ae09..7cb1e7953 100755
--- a/resources/assets/sass/pages/_.scss
+++ b/resources/assets/sass/pages/_.scss
@@ -7,5 +7,5 @@
 @import "page-messenger";
 @import "page-project";
 @import "page-setting";
-
+@import "page-index";
 @import "components/_";
diff --git a/resources/assets/sass/pages/common.scss b/resources/assets/sass/pages/common.scss
index 3b4b1c7f0..ac35001e9 100755
--- a/resources/assets/sass/pages/common.scss
+++ b/resources/assets/sass/pages/common.scss
@@ -1,5 +1,5 @@
 body {
-    overflow: hidden;
+    // overflow: hidden;
     .form-tip {
         color: #999999;
     }
diff --git a/resources/assets/sass/pages/page-index.scss b/resources/assets/sass/pages/page-index.scss
new file mode 100644
index 000000000..308338751
--- /dev/null
+++ b/resources/assets/sass/pages/page-index.scss
@@ -0,0 +1,332 @@
+.page-warp {
+    width: 1920px;
+    margin: 0 auto;
+    .page-header {
+        width: 100%;
+        height: 852px;
+        background: #8bcf70;
+        border-radius: 0px 0px 300px 300px;
+        position: relative;
+        .header-nav {
+            width: 100%;
+            height: 72px;
+            display: flex;
+            .header-nav-box {
+                width: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #ffffff;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-size: 16px;
+                font-weight: 400;
+                position: relative;
+                .logo {
+                    width: 143px;
+                    height: 36px;
+                    background: url("../images/index/indexlogo.png") no-repeat
+                        center center;
+                    background-size: contain;
+                }
+                .header-right-one {
+                    display: flex;
+                    .header-right-one-language {
+                        width: 27px;
+                        height: 27px;
+                        margin-right: 8px;
+                        background: url("../images/index/language.png")
+                            no-repeat center center;
+                        background-size: contain;
+                    }
+                    .header-right-one-dropdown {
+                        color: #ffffff;
+                    }
+                }
+                .header-right-two {
+                    margin: 0 30px 0 30px;
+                    cursor: pointer;
+                }
+                .header-right-three {
+                    min-width: 100px;
+                    height: 36px;
+                    background: #ffa25a;
+                    border-radius: 4px;
+                    text-align: center;
+                    line-height: 36px;
+                    cursor: pointer;
+                }
+            }
+        }
+        .header-content {
+            width: 950px;
+            margin: 0 auto;
+            .header-title {
+                font-size: 48px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 67px;
+                text-align: center;
+            }
+            .header-title-one {
+                margin-top: 40px;
+            }
+            .header-tips {
+                width: 950px;
+                font-size: 24px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 36px;
+                text-align: center;
+
+                margin-top: 22px;
+            }
+            .login-buttom {
+                width: 150px;
+                height: 48px;
+                background: #ffa25a;
+                border-radius: 8px;
+                font-size: 18px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 48px;
+                text-align: center;
+                margin: 0 auto;
+                margin-top: 34px;
+                cursor: pointer;
+            }
+        }
+
+        .header-bg {
+            width: 100%;
+            height: 405px;
+            background: url("../images/index/decoration.png") no-repeat center
+                center;
+            background-size: contain;
+            position: absolute;
+            bottom: 0;
+            z-index: -999;
+        }
+        .header-pic {
+            width: 920px;
+            height: 528px;
+            background: url("../images/index/pic.png") no-repeat center center;
+            background-size: contain;
+            position: absolute;
+            left: 50%;
+            margin-left: -460px;
+            bottom: -202px;
+        }
+    }
+    .page-main {
+        width: 1200px;
+        margin: 0 auto;
+        margin-top: 388px;
+        .main-box-one {
+            height: 388px;
+            position: relative;
+            margin-bottom: 180px;
+            .box-one-square {
+                width: 200px;
+                height: 200px;
+                background: #8bcf70;
+                border-radius: 30px;
+                opacity: 0.15;
+                float: left;
+            }
+            .box-one-pic1 {
+                width: 600px;
+                height: 338px;
+                background: url("../images/index/box-pic1.png") no-repeat center
+                    center;
+                background-size: contain;
+                position: absolute;
+                margin: 50px 0 0 50px;
+                -webkit-box-shadow: 0px 0px 10px #a9a4a4;
+                -moz-box-shadow: 0px 0px 10px #a9a4a4;
+                box-shadow: 0px 0px 10px #a9a4a4;
+                border-radius: 10px;
+            }
+            .box-one-pic3 {
+                width: 600px;
+                height: 338px;
+                background: url("../images/index/box-pic3.png") no-repeat center
+                    center;
+                background-size: contain;
+                position: absolute;
+                margin: 50px 0 0 50px;
+                -webkit-box-shadow: 0px 0px 10px #a9a4a4;
+                -moz-box-shadow: 0px 0px 10px #a9a4a4;
+                box-shadow: 0px 0px 10px #a9a4a4;
+                border-radius: 10px;
+            }
+            .box-one-tips {
+                width: 460px;
+                position: absolute;
+                right: 0;
+            }
+            .box-square {
+                width: 38px;
+                height: 38px;
+                background: url("../images/index/square.png") no-repeat center
+                    center;
+                background-size: contain;
+                margin-top: 119px;
+            }
+            .box-title {
+                font-size: 32px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #333333;
+                line-height: 45px;
+                margin: 6px 0 18px 0;
+            }
+            .box-tips {
+                font-size: 18px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #828282;
+                line-height: 28px;
+            }
+        }
+        .main-box-two {
+            height: 388px;
+            position: relative;
+            margin-bottom: 180px;
+            .box-two-square {
+                width: 200px;
+                height: 200px;
+                background: #8bcf70;
+                border-radius: 30px;
+                opacity: 0.15;
+                float: right;
+            }
+            .box-two-pic2 {
+                width: 600px;
+                height: 338px;
+                background: url("../images/index/box-pic2.png") no-repeat center
+                    center;
+                background-size: contain;
+                position: absolute;
+                right: 50px;
+                top: 50px;
+                -webkit-box-shadow: 0px 0px 10px #a9a4a4;
+                -moz-box-shadow: 0px 0px 10px #a9a4a4;
+                box-shadow: 0px 0px 10px #a9a4a4;
+                border-radius: 10px;
+            }
+            .box-two-pic4 {
+                width: 600px;
+                height: 338px;
+                background: url("../images/index/box-pic4.png") no-repeat center
+                    center;
+                background-size: contain;
+                position: absolute;
+                right: 50px;
+                top: 50px;
+                -webkit-box-shadow: 0px 0px 10px #a9a4a4;
+                -moz-box-shadow: 0px 0px 10px #a9a4a4;
+                box-shadow: 0px 0px 10px #a9a4a4;
+                border-radius: 10px;
+            }
+            .box-two-tips {
+                width: 460px;
+                position: absolute;
+                left: 0;
+            }
+            .box-square {
+                width: 38px;
+                height: 38px;
+                background: url("../images/index/square.png") no-repeat center
+                    center;
+                background-size: contain;
+                margin-top: 119px;
+            }
+            .box-title {
+                font-size: 32px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #333333;
+                line-height: 45px;
+                margin: 6px 0 18px 0;
+            }
+            .box-tips {
+                font-size: 18px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #828282;
+                line-height: 28px;
+            }
+        }
+    }
+    .page-footer {
+        .footer-service {
+            width: 100%;
+            height: 188px;
+            background-color: #ffa25a;
+            position: relative;
+            .footer-bg-box {
+                overflow: hidden;
+                width: 100%;
+                height: 188px;
+                background: url("../images/index/footer-bg.png") no-repeat
+                    center center;
+                background-size: contain;
+                .box-title {
+                    height: 45px;
+                    font-size: 32px;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #ffffff;
+                    line-height: 45px;
+                    text-align: center;
+                    margin: 33px 0 22px 0;
+                }
+                .buttom-box {
+                    display: flex;
+                    justify-content: center;
+                    .login-btn {
+                        width: 150px;
+                        height: 48px;
+                        background: #ffffff;
+                        border-radius: 8px;
+                        font-size: 18px;
+                        font-family: PingFangSC-Medium, PingFang SC;
+                        font-weight: 500;
+                        color: #ffa25a;
+                        line-height: 48px;
+                        text-align: center;
+                        margin-right: 20px;
+                        cursor: pointer;
+                    }
+                    .contact-btn {
+                        width: 150px;
+                        height: 48px;
+                        border-radius: 8px;
+                        border: 1px solid #ffffff;
+                        font-size: 18px;
+                        font-family: PingFangSC-Medium, PingFang SC;
+                        font-weight: 500;
+                        color: #ffffff;
+                        line-height: 48px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+        .footer-opyright {
+            width: 100%;
+            height: 60px;
+            background: #ffffff;
+            text-align: center;
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #828282;
+            line-height: 60px;
+        }
+    }
+}
diff --git a/resources/assets/statics/public/images/index/box-pic1.png b/resources/assets/statics/public/images/index/box-pic1.png
new file mode 100644
index 000000000..4b12f417f
Binary files /dev/null and b/resources/assets/statics/public/images/index/box-pic1.png differ
diff --git a/resources/assets/statics/public/images/index/box-pic2.png b/resources/assets/statics/public/images/index/box-pic2.png
new file mode 100644
index 000000000..97c22a857
Binary files /dev/null and b/resources/assets/statics/public/images/index/box-pic2.png differ
diff --git a/resources/assets/statics/public/images/index/box-pic3.png b/resources/assets/statics/public/images/index/box-pic3.png
new file mode 100644
index 000000000..f0c50f771
Binary files /dev/null and b/resources/assets/statics/public/images/index/box-pic3.png differ
diff --git a/resources/assets/statics/public/images/index/box-pic4.png b/resources/assets/statics/public/images/index/box-pic4.png
new file mode 100644
index 000000000..722c9c8ce
Binary files /dev/null and b/resources/assets/statics/public/images/index/box-pic4.png differ
diff --git a/resources/assets/statics/public/images/index/decoration.png b/resources/assets/statics/public/images/index/decoration.png
new file mode 100644
index 000000000..bb1f6ea5b
Binary files /dev/null and b/resources/assets/statics/public/images/index/decoration.png differ
diff --git a/resources/assets/statics/public/images/index/footer-bg.png b/resources/assets/statics/public/images/index/footer-bg.png
new file mode 100644
index 000000000..c29ccc91d
Binary files /dev/null and b/resources/assets/statics/public/images/index/footer-bg.png differ
diff --git a/resources/assets/statics/public/images/index/indexlogo.png b/resources/assets/statics/public/images/index/indexlogo.png
new file mode 100644
index 000000000..abb290382
Binary files /dev/null and b/resources/assets/statics/public/images/index/indexlogo.png differ
diff --git a/resources/assets/statics/public/images/index/language.png b/resources/assets/statics/public/images/index/language.png
new file mode 100644
index 000000000..6d507086e
Binary files /dev/null and b/resources/assets/statics/public/images/index/language.png differ
diff --git a/resources/assets/statics/public/images/index/pic.png b/resources/assets/statics/public/images/index/pic.png
new file mode 100644
index 000000000..30680ff80
Binary files /dev/null and b/resources/assets/statics/public/images/index/pic.png differ
diff --git a/resources/assets/statics/public/images/index/square.png b/resources/assets/statics/public/images/index/square.png
new file mode 100644
index 000000000..f37f1199f
Binary files /dev/null and b/resources/assets/statics/public/images/index/square.png differ
diff --git a/resources/assets/statics/public/js/language.all.js b/resources/assets/statics/public/js/language.all.js
index b7318e115..f42a52788 100644
--- a/resources/assets/statics/public/js/language.all.js
+++ b/resources/assets/statics/public/js/language.all.js
@@ -204,6 +204,7 @@
         {"CN": "最后修改","EN": "Last Review","TC": "最後修改","KM": "ការពិនិត្យចុងក្រោយ","TH": "รีวิวครั้งสุดท้าย","KO": "마지막 검토","JA": "最後の口コミ"},
         {"CN": "准备发布","EN": "Ready to release","TC": "準備發布","KM": "ត្រៀមខ្លួនរួចរាល់ក្នុងការដោះលែង","TH": "พร้อมที่จะปล่อย","KO": "릴리스 준비","JA": "リリースする準備ができて"},
         {"CN": "注册帐号","EN": "Register Account","TC": "註冊帳號","KM": "ចុះឈ្មោះគណនី","TH": "บัญชีลงทะเบียน","KO": "계정 등록","JA": "アカウント登録"},
+        {"CN": "注册账号","EN": "Register Account","TC": "註冊帳號","KM": "ចុះឈ្មោះគណនី","TH": "บัญชีลงทะเบียน","KO": "계정 등록","JA": "アカウント登録"},
         {"CN": "注册成功","EN": "Registration success","TC": "註冊成功","KM": "ការចុះឈ្មោះជោគជ័យ","TH": "ความสำเร็จการลงทะเบียน","KO": "등록 성공","JA": "登録完了"},
         {"CN": "重置密码","EN": "Reset Password","TC": "重置密碼","KM": "កំណត់ពាក្យសម្ងាត់ឡើងវិញ","TH": "รีเซ็ตรหัสผ่าน","KO": "암호를 재설정","JA": "パスワードを再設定する"},
         {"CN": "正在研发","EN": "R & D","TC": "正在研發","KM": "r & d","TH": "R & D","KO": "R & D.","JA": "R＆D"},
@@ -438,5 +439,19 @@
         {"CN": "月","EN": "Month","TC": "月","KM": "ខេ","TH": "เดือน","KO": "달","JA": "月"},
         {"CN": "日","EN": "Day","TC": "日","KM": "ថៃ","TH": "วัน","KO": "일","JA": "日"},
         {"CN": "天","EN": "Day","TC": "天","KM": "ថៃ","TH": "วัน","KO": "일","JA": "日"},
+        {"CN": "立即登录","EN": "Log in immediately","TC": "立即登錄","KM": "ចូលភ្លាមៗ","TH": "เข้าสู่ระบบทันที","KO": "즉시 로그인하십시오","JA": "すぐにログインします"},
+        {"CN": "轻量级任务管理工具","EN": "Lightweight task management tool","TC": "輕量級任務管理工具","KM": "ឧបករណ៍គ្រប់គ្រងភារកិច្ចស្រាល","TH": "เครื่องมือการจัดการงานที่มีน้ำหนักเบา","KO": "경량 작업 관리 도구","JA": "軽量タスク管理ツール"},
+        {"CN": "DooTask是一款轻量级的开源在线项目任务管理工具，提供各类文档协作工具、在线思维导图、在线流程图、项目管理、任务分发、即时IM，文件管理等工具。","EN": "DOOTASK is a lightweight open source online project task management tool, providing various document collaboration tools, online-related map, online flow chart, project management, task distribution, instant IM, file management and other tools.","TC": "DooTask是一款輕量級的開源在線項目任務管理工具，提供各類文檔協作工具、在線思維導圖、在線流程圖、項目管理、任務分發、即時IM，文件管理等工具。","KM": "Takestask គឺជាឧបករណ៍នៃការគ្រប់គ្រងភារកិច្ចរបស់គំរោងតាមអ៊ិនធរណេតស្រាល ៗ ដែលផ្តល់នូវឧបករណ៍សហប្រតិបត្តិការឯកសារផ្សេងៗតារាងផែនទីតាមអ៊ីនធឺណិត, គំនូសតាងនៃការគ្រប់គ្រងលើអ៊ីនធឺណិត, ការគ្រប់គ្រងគម្រោង, ការ, ការងារ, ការគ្រប់គ្រងឯកសារ, ការគ្រប់គ្រងឯកសារនិងឧបករណ៍ផ្សេងទៀត។","TH": "DOOTASK เป็นเครื่องมือการจัดการงานโครงการออนไลน์โอเพ่นซอร์สที่มีน้ำหนักเบาให้เครื่องมือการทำงานร่วมกันเอกสารต่างๆแผนที่ที่เกี่ยวข้องกับออนไลน์แผนภูมิการไหลออนไลน์การจัดการโครงการการกระจายงาน IM ทันทีการจัดการไฟล์และเครื่องมืออื่น ๆ","KO": "DootAck는 다양한 문서 공동 작업 도구, 온라인 관련지도, 온라인 흐름도, 프로젝트 관리, 작업 배포, 인스턴트 IM, 파일 관리 및 기타 도구를 제공하는 가벼운 오픈 오픈 온라인 프로젝트 작업 관리 도구입니다.","JA": "DoTaskは、軽量なオープンソースのオンラインプロジェクトタスク管理ツールで、さまざまなドキュメントコラボレーションツール、オンライン関連マップ、オンラインフローチャート、プロジェクト管理、タスク配信、インスタントIM、ファイル管理などのツールを提供します。"},  
+        {"CN": "高效便捷的团队沟通工具","EN": "Efficient and convenient team communication tool","TC": "高效便捷的團隊溝通工具","KM": "ឧបករណ៍ទំនាក់ទំនងក្រុមប្រកបដោយប្រសិទ្ធភាពនិងងាយស្រួល","TH": "เครื่องมือสื่อสารทีมที่มีประสิทธิภาพและสะดวกสบาย","KO": "효율적이고 편리한 팀 커뮤니케이션 도구","JA": "効率的で便利なチームコミュニケーションツール"},      
+        {"CN": "针对项目和任务建立群组，工作问题可及时沟通，促进团队快速协作，提高团队工作效率。","EN": "To establish groups in projects and tasks, work issues can communicate in time, promoting team rapid collaboration, and improve teamwork efficiency.","TC": "針對項目和任務建立群組，工作問題可及時溝通，促進團隊快速協作，提高團隊工作效率。","KM": "ដើម្បីបង្កើតក្រុមក្នុងគម្រោងនិងភារកិច្ចបញ្ហាការងារអាចប្រាស្រ័យទាក់ទងបានទាន់ពេលវេលាលើកកម្ពស់ការសហការគ្នារបស់ក្រុមនិងធ្វើឱ្យប្រសើរឡើងនូវប្រសិទ្ធភាពក្នុងក្រុមជម្រើសជាតិ។","TH": "ในการสร้างกลุ่มในโครงการและภารกิจปัญหาการทำงานสามารถสื่อสารได้ในเวลาการส่งเสริมการทำงานร่วมกันอย่างรวดเร็วของทีมและปรับปรุงประสิทธิภาพการทำงานเป็นทีม","KO": "프로젝트 및 작업의 그룹을 수립하기 위해 작업 문제는 시간에 통신하고 팀의 신속한 협력을 촉진하고 팀워크 효율성을 향상시킬 수 있습니다.","JA": "プロジェクトやタスクでグループを確立するために、仕事の問題は時間内に通信し、チームの急速なコラボレーションを促進し、チームワークの効率を向上させることができます。"},
+        {"CN": "强大易用的协同创作云文档","EN": "Powerful easy-to-use collaborative creation cloud documentation","TC": "強大易用的協同創作雲文檔","KM": "ឯកសារ Cloud ការបង្កើតរួមគ្នាដែលមានអនុភាពដែលមានអនុភាព","TH": "เอกสารคลาวด์สร้างความร่วมมือที่ใช้งานง่ายที่ใช้งานง่าย","KO": "강력한 사용하기 쉬운 공동 작성 클라우드 문서","JA": "強力な使いやすい共同作成クラウド文書"},
+        {"CN": "汇集文档、电子表格、思维笔记等多种在线工具，汇聚企业知识资源于一处，支持多人实时协同编辑，让团队协作更便捷。","EN": "Collect a variety of online tools such as documentation, spreadsheets, thinking notes, gather in corporate knowledge resources, support multi-person real-time collaborative editing, making teamwork more convenient.","TC": "匯集文檔、電子表格、思維筆記等多種在線工具，匯聚企業知識資源於一處，支持多人實時協同編輯，讓團隊協作更便捷。","KM": "ប្រមូលប្រភេទឧបករណ៍តាមអ៊ិនធរណេតជាច្រើនប្រភេទបទប្បទានលក្ខណៈការគិតកំណត់ត្រាការគិតដែលប្រមូលផ្តុំនៅក្នុងធនធានចំណេះដឹងរបស់ក្រុមហ៊ុនគាំទ្រការកែប្រែសហការច្រើនរបស់អ្នកធ្វើការធ្វើឱ្យការងារជាក្រុមកាន់តែងាយស្រួល។","TH": "รวบรวมเครื่องมือออนไลน์ที่หลากหลายเช่นเอกสารสเปรดชีตบันทึกการคิดรวบรวมในทรัพยากรความรู้ขององค์กรสนับสนุนการแก้ไขการทำงานร่วมกันแบบเรียลไทม์หลายคนทำให้การทำงานเป็นทีมสะดวกยิ่งขึ้น","KO": "문서, 스프레드 시트, 사고 메모와 같은 다양한 온라인 도구를 수집하고 기업 지식 리소스를 모으고 다중 사람 실시간 협업 편집을 지원하여 팀워크를보다 편리하게 만듭니다.","JA": "ドキュメンテーション、スプレッドシート、思考ノートなどのさまざまなオンラインツールを収集し、企業のナレッジリソースに集まり、マルチパーソンリアルタイムの共同編集をサポートして、チームワークをより便利です。"},
+        {"CN": "便捷易用的项目管理模板","EN": "Conveniently used project management template","TC": "便捷易用的項目管理模板","KM": "គំរូនៃការគ្រប់គ្រងគម្រោងដែលប្រើយ៉ាងងាយស្រួល","TH": "ใช้แม่แบบการจัดการโครงการที่ใช้งานได้สะดวก","KO": "편리하게 사용되는 프로젝트 관리 템플릿","JA": "便利なプロジェクト管理テンプレートを使用しました"},
+        {"CN": "模版满足多种团队协作场景，同时支持自定义模版，满足团队个性化场景管理需求，可直观的查看项目的进展情况，团队协作更方便。","EN": "The template meets a variety of teamwork scenes, and supports custom template, meets the management needs of team personalized scenes, and visually view the progress of the project, and teamwork is more convenient.","TC": "模版滿足多種團隊協作場景，同時支持自定義模版，滿足團隊個性化場景管理需求，可直觀的查看項目的進展情況，團隊協作更方便。","KM": "ទំព័រគំរូនេះត្រូវនឹងឈុតឆាកការងារជាក្រុមជាច្រើននិងគាំទ្រគំរូផ្ទាល់ខ្លួនត្រូវឆ្លើយតបទៅនឹងតម្រូវការរបស់ការគ្រប់គ្រងនៃឈុតឆាកផ្ទាល់ខ្លួនរបស់ក្រុមនិងមើលវឌ្ឍនភាពនៃគម្រោងនេះនិងការងារជាក្រុមកាន់តែងាយស្រួល។","TH": "เทมเพลตตรงกับฉากการทำงานเป็นทีมที่หลากหลายและรองรับเทมเพลตที่กำหนดเองตรงตามความต้องการด้านการจัดการของฉากส่วนบุคคลของทีมและมองเห็นความคืบหน้าของโครงการและการทำงานเป็นทีมสะดวกกว่า","KO": "템플릿은 다양한 팀웍 장면을 충족하며 사용자 정의 템플릿을 지원하고 팀 개인화 된 장면의 관리 요구 사항을 충족시키고 시각적으로 프로젝트의 진행 상황을 볼 수 있으며 팀웍이 더 편리합니다.","JA": "テンプレートはさまざまなチームワークシーンを満たし、カスタムテンプレートをサポートし、チームパーソナライズされたシーンの管理ニーズを満たし、プロジェクトの進行状況を視覚的に表示し、チームワークはより便利です。"},
+        {"CN": "清晰直观的任务日历","EN": "Clear and intuitive task calendar","TC": "清晰直觀的任務日曆","KM": "ប្រតិទិនភារកិច្ចច្បាស់លាស់និងវិចារណញាណ","TH": "ปฏิทินงานที่ชัดเจนและใช้งานง่าย","KO": "명확하고 직관적 인 작업 일정","JA": "クリアで直感的なタスクカレンダー"},
+        {"CN": "通过灵活的任务日历，轻松安排每一天的日程，把任务拆解到每天，让工作目标更清晰，时间分配更合理。","EN": "Through the flexible task calendar, easily arrange the daily schedule, disassemble the task to every day, let the work goals clearer, time allocation is more reasonable.","TC": "通過靈活的任務日曆，輕鬆安排每一天的日程，把任務拆解到每天，讓工作目標更清晰，時間分配更合理。","KM": "តាមរយៈប្រតិទិនភារកិច្ចដែលអាចបត់បែនបានរៀបចំឱ្យមានកាលវិភាគប្រចាំថ្ងៃដោយងាយផ្តាច់ភារកិច្ចឡើងវិញជារៀងរាល់ថ្ងៃឱ្យគោលដៅការងារកាន់តែច្បាស់ការបែងចែកពេលវេលាគឺសមហេតុផលជាង។","TH": "ผ่านปฏิทินงานที่ยืดหยุ่นจัดเรียงตารางประจำวันได้อย่างง่ายดายถอดชิ้นส่วนงานทุกวันปล่อยให้เป้าหมายการทำงานชัดเจนขึ้นการจัดสรรเวลานั้นสมเหตุสมผลมากขึ้น","KO": "유연한 작업 일정을 통해 일일 일정을 쉽게 준비하고, 매일 작업을 분해하고, 작업 목표를 더 명확하게, 시간 할당이 더 많습니다.","JA": "柔軟なタスクカレンダーを通して、毎日のスケジュールを簡単に調整し、タスクを毎日分解し、作業目標をより明確にして、時間割り当てがより合理的なものです。"},
+        {"CN": "开启您的 Dootask 团队协作","EN": "Open your DOOTASK team collaboration","TC": "開啟您的 Dootask 團隊協作","KM": "បើកកិច្ចសហប្រតិបត្តិការក្រុមរបស់អ្នក","TH": "เปิดการทำงานร่วมกันของทีม DOOTASK ของคุณ","KO": "Dootask 팀 공동 작업을 엽니 다","JA": "あなたのdootaskチームコラボレーションを開く"},
+        {"CN": "联系我们","EN": "Contact us","TC": "聯繫我們","KM": "ទាក់ទង​មក​ពួក​យើង","TH": "ติดต่อเรา","KO": "문의하기","JA": "お問い合わせ"},
+        {"CN": "桂公网安备 31011002000058号 桂ICP备12020087号-3","EN": "Gui Gong Net Anni 31011002000058 Gui ICP No. 12020087 -3","TC": "桂公網安備 31011002000058號 桂ICP備12020087號-3","KM": "Gui Gong Net Net Ann 31011002000058 GUI ICP លេខ 12020087 -3","TH": "Gui Gong Net Anni 31011002000058 GUI ICP No. 12020087 -3","KO": "Gui Gong Net Anni 31011002000058 GUI ICP No. 12020087 -3","JA": "GUI GONG NET ANNI 31011002000058 GUI ICP No. 12020087 -3"},
     ]
 })(window)