diff --git a/public/images/index/box-pic1.png b/public/images/index/box-pic1.png
new file mode 100644
index 000000000..75005fafc
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..3d6fe7a02
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..0f6467664
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..b80864dd6
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..e09caa940
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..4a7671b2a
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/resources/assets/js/language/index.js b/resources/assets/js/language/index.js
index 06f8d314c..d625c884e 100644
--- a/resources/assets/js/language/index.js
+++ b/resources/assets/js/language/index.js
@@ -79,6 +79,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..264d8f63b 100644
--- a/resources/assets/js/pages/index.vue
+++ b/resources/assets/js/pages/index.vue
@@ -1,21 +1,265 @@
 <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">
+                            <Dropdown trigger="click" @on-click="setLanguage">
+                                <Icon
+                                    class="header-right-one-language"
+                                    type="md-globe"
+                                />
+                                <a
+                                    href="javascript:void(0)"
+                                    class="header-right-one-dropdown"
+                                    v-if="screenWidth>441"
+                                >
+                                    {{ 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-pic" v-if="screenWidth<1920">
+                           <img  class="box-img"  :src="$store.state.method.apiUrl('../images/index/box-pic1.png')" />
+                    </div>
+                    <div class="box-one-pic1" v-else>
+
+                    </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" v-if="screenWidth>=1920">
+                    <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-two" v-else>
+                    <div class="box-two-tips">
+                        <div class="box-pic">
+                           <img  class="box-img"  :src="$store.state.method.apiUrl('../images/index/box-pic2.png')" />
+                        </div>
+                        <div class="box-square"></div>
+                        <div class="box-title">
+                            {{ $L("强大易用的协同创作云文档") }}
+                        </div>
+                        <div class="box-tips">
+                            {{
+                                $L("汇集文档、电子表格、思维笔记等多种在线工具，汇聚企业知识资源于一处，支持多人实时协同编辑，让团队协作更便捷。")
+                            }}
+                        </div>
+
+
+                    </div>
+
+                </div>
+                <div class="main-box-one">
+                    <div class="box-one-square"></div>
+                    <div class="box-pic" v-if="screenWidth<1920" >
+                           <img  class="box-img"  :src="$store.state.method.apiUrl('../images/index/box-pic3.png')" />
+                    </div>
+                    <div class="box-one-pic3" v-else >
+
+                    </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" v-if="screenWidth>=1920">
+                    <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 class="main-box-two" v-else>
+                    <div class="box-two-tips">
+                        <div class="box-pic">
+                           <img  class="box-img"  :src="$store.state.method.apiUrl('../images/index/box-pic4.png')" />
+                        </div>
+                        <div class="box-square"></div>
+                        <div class="box-title">
+                            {{ $L("清晰直观的任务日历") }}
+                        </div>
+                        <div class="box-tips">
+                            {{
+                                $L("通过灵活的任务日历，轻松安排每一天的日程，把任务拆解到每天，让工作目标更清晰，时间分配更合理。")
+                            }}
+                        </div>
+
+
+                    </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" v-html="this.homeFooter"></div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
 export default {
     data() {
-        return {}
+        return {
+            screenWidth: document.body.clientWidth,
+            needStartHome: false,
+            homeFooter: '',
+        };
+    },
+    watch: {
+        screenWidth(nVal) {
+            // console.log(nVal)
+        },
+    },
+    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);
+        this.getNeedStartHome();
+        const that = this;
+        window.onresize=()=>{
+            window.screenWidth=document.body.clientWidth
+            that.screenWidth=window.screenWidth
         }
+
+    },
+
+    methods: {
+        login() {
+            this.goForward(
+                {
+                    path: `/login`,
+                },
+                false
+            );
+        },
+
+        register() {
+            this.goForward(
+                {
+                    path: `/login`,
+                    query: {
+                        type: "reg",
+                    },
+                },
+                false
+            );
+        },
+        getNeedStartHome() {
+            this.$store
+                .dispatch("call", {
+                    url: "system/get/starthome",
+                })
+                .then(({data}) => {
+                    this.needStartHome = !!data.need_start;
+                    this.homeFooter = data.home_footer;
+                    if (this.$store.state.userId > 0) {
+                        this.goForward({path: '/manage/dashboard'}, true);
+                    } else if (this.needStartHome === false) {
+                        this.goForward({path: '/login'}, true);
+                    }
+                })
+                .catch(() => {
+                    this.needStartHome = false;
+                });
+        },
     },
     deactivated() {
-        this.$destroy()
-    }
-}
+        // this.$destroy()
+    },
+};
 </script>
diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue
index 01c190afe..3621fe093 100644
--- a/resources/assets/js/pages/manage.vue
+++ b/resources/assets/js/pages/manage.vue
@@ -472,6 +472,55 @@ export default {
             }
         },
 
+        msgAllUnread() {
+            if (this.$Electron) {
+                this.$Electron.ipcRenderer.send('setDockBadge', this.msgAllUnread + this.dashboardTotal);
+            }
+        },
+
+        dashboardTotal() {
+            if (this.$Electron) {
+                this.$Electron.ipcRenderer.send('setDockBadge', this.msgAllUnread + this.dashboardTotal);
+            }
+        },
+
+        dialogMsgPush(data) {
+            if (this.natificationHidden && this.natificationReady) {
+                const {id, dialog_id, type, msg} = data;
+                let body = '';
+                switch (type) {
+                    case 'text':
+                        body = msg.text;
+                        break;
+                    case 'file':
+                        body = '[' + this.$L(msg.type == 'img' ? '图片信息' : '文件信息') + ']'
+                        break;
+                    default:
+                        return;
+                }
+                this._notificationId = id;
+                this.notificationClass.replaceOptions({
+                    icon: $A.originUrl('images/logo.png'),
+                    body: body,
+                    data: data,
+                    tag: "dialog",
+                    requireInteraction: true
+                });
+                let dialog = this.dialogs.find((item) => item.id == dialog_id);
+                if (dialog) {
+                    this.notificationClass.replaceTitle(dialog.name);
+                    this.notificationClass.userAgreed();
+                } else {
+                    this.$store.dispatch("getDialogOne", dialog_id).then(({data}) => {
+                        if (this._notificationId === id) {
+                            this.notificationClass.replaceTitle(data.name);
+                            this.notificationClass.userAgreed();
+                        }
+                    })
+                }
+            }
+        },
+
         projectKeyValue(val) {
             if (val == '') {
                 return;
diff --git a/resources/assets/js/pages/manage/components/Calendar.vue b/resources/assets/js/pages/manage/components/Calendar.vue
index 76e1f9746..274ff3f68 100644
--- a/resources/assets/js/pages/manage/components/Calendar.vue
+++ b/resources/assets/js/pages/manage/components/Calendar.vue
@@ -1,9 +1,8 @@
 <template>
-    <div ref="tuiCalendar" class="calendar-wrapper"></div>
+    <div id="calendar" ref="tuiCalendar" class="calendar-wrapper"></div>
 </template>
 <script>
 import Calendar from 'tui-calendar-hi';
-
 export default {
     name: 'Calendar',
     props: {
@@ -119,21 +118,21 @@ export default {
         },
         theme: {
             handler(newValue) {
-                this.calendarInstance.setTheme($A.cloneJSON(newValue));
+                this.calendarInstance.setTheme(this.cloneData(newValue));
             },
             deep: true
         },
         week: {
             handler(newValue) {
                 const silent = this.view !== 'week' && this.view !== 'day';
-                this.calendarInstance.setOptions({week: $A.cloneJSON(newValue)}, silent);
+                this.calendarInstance.setOptions({week: this.cloneData(newValue)}, silent);
             },
             deep: true
         },
         month: {
             handler(newValue) {
                 const silent = this.view !== 'month';
-                this.calendarInstance.setOptions({month: $A.cloneJSON(newValue)}, silent);
+                this.calendarInstance.setOptions({month: this.cloneData(newValue)}, silent);
             },
             deep: true
         },
@@ -151,31 +150,37 @@ export default {
         }
     },
     mounted() {
-        this.calendarInstance = new Calendar(this.$refs.tuiCalendar, {
-            defaultView: this.view,
-            taskView: this.taskView,
-            scheduleView: this.scheduleView,
-            theme: this.theme,
-            template: this.template,
-            week: this.week,
-            month: this.month,
-            calendars: this.calendars,
-            useCreationPopup: this.useCreationPopup,
-            useDetailPopup: this.useDetailPopup,
-            timezones: this.timezones,
-            disableDblClick: this.disableDblClick,
-            disableClick: this.disableClick,
-            isReadOnly: this.isReadOnly,
-            usageStatistics: this.usageStatistics
-        });
-        this.addEventListeners();
-        this.reflectSchedules();
+        this.init();
     },
     beforeDestroy() {
         this.calendarInstance.off();
         this.calendarInstance.destroy();
     },
     methods: {
+        init(){
+        this.calendarInstance = new Calendar(this.$refs.tuiCalendar, {
+                    defaultView: this.view,
+                    taskView: this.taskView,
+                    scheduleView: this.scheduleView,
+                    theme: this.theme,
+                    template: this.template,
+                    week: this.week,
+                    month: this.month,
+                    calendars: this.calendars,
+                    useCreationPopup: this.useCreationPopup,
+                    useDetailPopup: this.useDetailPopup,
+                    timezones: this.timezones,
+                    disableDblClick: this.disableDblClick,
+                    disableClick: this.disableClick,
+                    isReadOnly: this.isReadOnly,
+                    usageStatistics: this.usageStatistics,
+                });
+        this.addEventListeners();
+        this.reflectSchedules();
+        },
+        cloneData(data) {
+            return JSON.parse(JSON.stringify(data));
+        },
         addEventListeners() {
             for (const eventName of Object.keys(this.$listeners)) {
                 this.calendarInstance.on(eventName, (...args) => this.$emit(eventName, ...args));
diff --git a/resources/assets/js/skin/index.js b/resources/assets/js/skin/index.js
new file mode 100644
index 000000000..443af52f1
--- /dev/null
+++ b/resources/assets/js/skin/index.js
@@ -0,0 +1,37 @@
+const skinOptionsList = [
+    {
+        lable: "默认",
+        key: "white",
+    },
+    {
+        lable: "暗黑主题",
+        key: "black",
+    },
+];
+
+const calendarColorList={
+    white:
+        {
+            'common.border': '1px solid #f4f5f5',
+            'common.holiday.color': '#333',
+            'common.saturday.color': '#333',
+            'common.dayname.color': '#333',
+            'common.backgroundColor':'#ffffff',
+         
+        },
+    
+    black: 
+        {
+            'common.border': '1px solid #ffffff',
+            'common.holiday.color': '#ffffff',
+            'common.saturday.color': '#ffffff',
+            'common.dayname.color': '#ffffff',
+            'common.backgroundColor':'#171717',
+            'common.creationGuide.color': '#ffffff',
+            'common.creationGuide.color': '#ffffff',
+            'common.today.color': '#ffffff',
+        },
+}
+
+
+export { skinOptionsList,calendarColorList };
diff --git a/resources/assets/js/store/mutations.js b/resources/assets/js/store/mutations.js
index 03048022a..32cbdddd1 100644
--- a/resources/assets/js/store/mutations.js
+++ b/resources/assets/js/store/mutations.js
@@ -1,3 +1,9 @@
 export default {
-
+    /**
+     * 修改当前皮肤类型
+     
+     */
+    setSkinType(state,val){
+        state.skinType=val
+    }
 }
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index ffc42f0df..48b299599 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -5,9 +5,9 @@
 @import "taskfont";
 @import "loading";
 @import "scrollbar";
-
 @import "components/_";
 @import "pages/_";
+@import "skin";
 
 @import "dark";
 
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 26322debd..0e4e92163 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;
         line-height: 22px;
diff --git a/resources/assets/sass/pages/page-index.scss b/resources/assets/sass/pages/page-index.scss
new file mode 100644
index 000000000..349e9f1c0
--- /dev/null
+++ b/resources/assets/sass/pages/page-index.scss
@@ -0,0 +1,667 @@
+@media (max-width: 1919px) {
+    .page-warp {
+        width: 100%;
+        margin: 0 auto;
+        .page-header {
+            width: 100%;
+            height: 720px;
+            background: #8bcf70;
+            border-radius: 0px 0px 300px 300px;
+            position: relative;
+            .header-nav {
+                width: 100%;
+                height: 72px;
+                display: flex;
+                justify-content: space-between;
+                .header-nav-box {
+                    display: flex;
+                    justify-items: center;
+                    align-items: center;
+                    color: #ffffff;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    position: relative;
+                    .logo {
+                        width: 65px;
+                        height: 36px;
+                        background: url("../images/index/indexlogo.png")
+                            no-repeat center center;
+                        background-size: contain;
+                        margin: 0 20px 0 20px;
+                    }
+                    .header-right-one {
+                        display: flex;
+                        align-items: center;
+                        justify-content: end;
+                        font-size: 12px;
+                        min-width: 75px;
+                        .header-right-one-language {
+                            margin-right: 4px;
+                        }
+                        .header-right-one-dropdown {
+                            color: #ffffff;
+                        }
+                    }
+                    .header-right-two {
+                        font-size: 12px;
+                        margin: 0 20px 0 20px;
+                        cursor: pointer;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                    }
+                    @media(max-width:414px){
+                       
+                        .header-right-three {
+                            max-width: 50px;
+                            font-size: 12px;
+                            height: 36px;
+                            background: #ffa25a;
+                            border-radius: 4px;
+                            text-align: center;
+                            line-height: 36px;
+                            cursor: pointer;
+                            margin-right: 10px;
+                            padding: 0 5px 0 5px;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                        }
+                    }
+                    @media(min-width:414px){
+                       
+                        .header-right-three {
+                            font-size: 12px;
+                            height: 36px;
+                            background: #ffa25a;
+                            border-radius: 4px;
+                            text-align: center;
+                            line-height: 36px;
+                            cursor: pointer;
+                            margin-right: 10px;
+                            padding: 0 5px 0 5px;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                        }
+                    }
+                    @media(min-width:660px){
+                        .logo {
+                            width: 143px;
+                            height: 36px;
+                            background: url("../images/index/indexlogo.png")
+                                no-repeat center center;
+                            background-size: contain;
+                            margin: 0 20px 0 20px;
+                        }
+                        .header-right-one {
+                            display: flex;
+                            align-items: center;
+                            font-size: 16px;
+                            min-width: 75px;
+                            .header-right-one-language {
+                                margin-right: 4px;
+                            }
+                            .header-right-one-dropdown {
+                                color: #ffffff;
+                            }
+                        }
+                        .header-right-two {
+                            font-size: 16px;
+                            margin: 0 40px 0 40px;
+                            cursor: pointer;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                        }
+                        .header-right-three {
+                            font-size: 16px;
+                            height: 36px;
+                            background: #ffa25a;
+                            border-radius: 4px;
+                            text-align: center;
+                            line-height: 36px;
+                            cursor: pointer;
+                            margin-right: 10px;
+                            padding: 0 10px 0 10px;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                        }
+                    }
+
+                    
+                }
+            }
+            .header-content {
+                width: 100%;
+                height: 396px;
+                margin: 0 auto;
+                .header-title {
+                    font-size: 24px;
+                    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: 80%;
+                    font-size: 12px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #ffffff;
+                    line-height: 36px;
+                    text-align: center;
+                    margin-top: 22px;
+                    margin: 0 auto;
+                }
+                .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: 400px;
+            //     background: url("../images/index/decoration.png") no-repeat center
+            //         center;
+            //     background-size: contain;
+            //     position: absolute;
+            //     bottom: 0;
+            // }
+            .header-pic {
+                width: 100%;
+                height: 340px;
+                background: url("../images/index/pic.png") no-repeat center center;
+                background-size: contain;
+                margin-top: 10px;
+            }
+        }
+        .page-main {
+            width: 62.5%;
+            margin: 0 auto;
+            margin-top: 200px;
+            .box-img{
+                height: auto;
+                max-width: 100%;
+                max-height: 100%;
+                vertical-align: bottom;
+                bottom: 0;
+                -o-object-fit: fill;
+                object-fit: fill;
+            }
+            .box-pic {
+                -webkit-box-shadow: 0px 0px 10px #a9a4a4;
+                -moz-box-shadow: 0px 0px 10px #a9a4a4;
+                box-shadow: 0px 0px 10px #a9a4a4;
+                border-radius: 10px;
+                padding: 10px;
+            }
+            .box-square {
+                width: 24px;
+                height: 24px;
+                background: url("../images/index/square.png") no-repeat
+                    center center;
+                background-size: contain;
+                margin-top: 20px;
+            }
+            .box-title {
+                font-size: 16px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #333333;
+                line-height: 45px;
+                margin: 6px 0 18px 0;
+            }
+            .box-tips {
+                font-size: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #828282;
+                line-height: 28px;
+            }
+            .main-box-one {
+                position: relative;
+                margin-bottom: 70px;
+                
+                .box-one-tips {
+                    width: 100%;
+                }
+            
+            }
+            .main-box-two {
+                width: 100%;
+                position: relative;
+                margin-bottom: 70px;
+                .box-two-square {
+                }
+              
+                .box-two-tips {
+                    width: 100%;
+                }
+               
+            }
+        }
+        .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: 100% 100%;
+                    // background-size: contain;
+                    .box-title {
+                        height: 45px;
+                        font-size: 16px;
+                        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: 14px;
+                            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: 14px;
+                            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: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #828282;
+                line-height: 60px;
+            }
+        }
+    }
+}
+
+@media (min-width: 1920px) {
+    .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-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 {
+                            margin-right: 8px;
+                            font-size: 26px;
+                        }
+                        .header-right-one-dropdown {
+                            color: #ffffff;
+                            font-size: 16px;
+                        }
+                    }
+                    .header-right-two {
+                        font-size: 16px;
+                        margin: 0 30px 0 30px;
+                        cursor: pointer;
+                    }
+                    .header-right-three {
+                        font-size: 16px;
+                        min-width: 100px;
+                        height: 36px;
+                        background: #ffa25a;
+                        border-radius: 4px;
+                        text-align: center;
+                        line-height: 36px;
+                        cursor: pointer;
+                        padding: 0 10px 0 10px;
+                    }
+                }
+            }
+            .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: -40px;
+            }
+            .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: -471px;
+                bottom: -236px;
+            }
+        }
+        .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/sass/pages/page-manage.scss b/resources/assets/sass/pages/page-manage.scss
index 3e1371f3c..ab4eb2b46 100644
--- a/resources/assets/sass/pages/page-manage.scss
+++ b/resources/assets/sass/pages/page-manage.scss
@@ -95,6 +95,14 @@
                     color: #666666;
                 }
             }
+            .mannage-menu-skin {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .ivu-icon {
+                    color: #666666;
+                }
+            }
         }
         > ul {
             flex: 1;
diff --git a/resources/assets/sass/skin.scss b/resources/assets/sass/skin.scss
new file mode 100644
index 000000000..97f5ba864
--- /dev/null
+++ b/resources/assets/sass/skin.scss
@@ -0,0 +1,133 @@
+//暗黑皮肤
+.black {
+    background-color: #171717;
+    > .manage-box-menu {
+        background-color: #202020;
+        > ul {
+            > li {
+                &.menu-project {
+                    >ul{
+                        >li{
+                            &.active {
+                                .project-h1 {
+                                    background-color: #b4b3b3;
+                                }
+                            }
+                        }
+                    }
+                  
+                }
+                color: #ffffff;
+                
+                &.active {
+                        background-color: #b4b3b3 !important;
+                }
+            }
+        }
+
+        .title {
+            color: #ffffff !important;
+        }
+        .manage-box-title {
+            background-color: #b4b3b3 !important;
+            color: #ffffff;
+        }
+    }
+    .manage-box-main {
+        .messenger-select:after {
+            background-color: #ffffff;
+        }
+        .dashboard-wrapper {
+            color: #ffffff;
+        }
+        .dashboard-hello {
+            color: #ffffff;
+        }
+        .dashboard-desc {
+            color: #ffffff;
+        }
+        .dashboard-list {
+            li {
+                background-color: #202020;
+            }
+        }
+        .calendar-title {
+            h1 {
+                color: #ffffff !important;
+            }
+        }
+    }
+    .messenger-wrapper {
+        color: #ffffff;
+        .dialog {
+            .active {
+                background-color: #979595 !important;
+            }
+        }
+        .dialog-box {
+            span {
+                color: #ffffff !important;
+            }
+            .dialog-text {
+                color: #ffffff !important;
+            }
+        }
+        .dialog-wrapper {
+            background-color: #171717;
+        }
+        .messenger-nav > p {
+            color: #ffffff !important;
+        }
+    }
+    .file-wrapper {
+        .file-nav {
+            h1 {
+                color: #ffffff !important;
+            }
+        }
+        .file-navigator {
+            > ul {
+                > li {
+                    color: #ffffff !important;
+                }
+            }
+        }
+        .file-list {
+            > ul {
+                > li {
+                    .file-name {
+                        color: #ffffff;
+                    }
+                }
+            }
+        }
+    }
+    .page-project {
+        .project-list {
+            background-color: #171717;
+            color: #ffffff;
+            .project-title {
+                h1 {
+                    color: #ffffff;
+                }
+            }
+            .project-subtitle {
+                color: #ffffff;
+            }
+            .column-head {
+                background-color: #202020;
+            }
+            .add-column {
+                background-color: #202020;
+                color: #ffffff;
+            }
+            .task-item {
+                background-color: #202020 !important;
+                color: #ffffff !important;
+            }
+            .add-placeholder {
+                color: #ffffff;
+            }
+        }
+    }
+}
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..75005fafc
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..3d6fe7a02
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..0f6467664
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..b80864dd6
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..e09caa940
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..4a7671b2a
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