diff --git a/public/images/index/indexlogo.png b/public/images/index/indexlogo.png
index abb290382..e09caa940 100644
Binary files a/public/images/index/indexlogo.png and b/public/images/index/indexlogo.png differ
diff --git a/resources/assets/js/pages/index.vue b/resources/assets/js/pages/index.vue
index 54f833bcc..f51074f31 100644
--- a/resources/assets/js/pages/index.vue
+++ b/resources/assets/js/pages/index.vue
@@ -8,11 +8,15 @@
                     </div>
                     <div class="header-nav-box">
                         <div class="header-right-one">
-                            <Icon class="header-right-one-language" type="md-globe" />
                             <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>
@@ -29,20 +33,26 @@
                             </Dropdown>
                         </div>
                         <div class="header-right-two" @click="register">
-                           {{$L('注册账号')}} 
+                            {{ $L("注册账号") }}
                         </div>
                         <div class="header-right-three" @click="login">
-                            {{$L('立即登录')}}
+                            {{ $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 class="header-title">
+                        {{ $L("轻量级任务管理工具") }}
+                    </div>
+                    <div class="header-tips">
+                        {{
+                            $L("DooTask是一款轻量级的开源在线项目任务管理工具，提供各类文档协作工具、在线思维导图、在线流程图、项目管理、任务分发、即时IM，文件管理等工具。")
+                        }}
+                    </div>
+                    <div class="login-buttom" @click="login">
+                        {{ $L("登录") }}
                     </div>
-                    <div class="login-buttom" @click="login">{{$L('登录')}}</div>
                 </div>
 
                 <div class="header-bg"></div>
@@ -54,58 +64,113 @@
                     <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-title">
+                            {{ $L("高效便捷的团队沟通工具") }}
+                        </div>
                         <div class="box-tips">
-                            {{$L('针对项目和任务建立群组，工作问题可及时沟通，促进团队快速协作，提高团队工作效率。')}}  
+                            {{
+                                $L("针对项目和任务建立群组，工作问题可及时沟通，促进团队快速协作，提高团队工作效率。")
+                            }}
                         </div>
                     </div>
                 </div>
-                <div class="main-box-two">
+                <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-title">
+                            {{ $L("强大易用的协同创作云文档") }}
+                        </div>
                         <div class="box-tips">
-                            {{$L('汇集文档、电子表格、思维笔记等多种在线工具，汇聚企业知识资源于一处，支持多人实时协同编辑，让团队协作更便捷。')}}
+                            {{
+                                $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-two-pic2"></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-one-pic3"></div>
                     <div class="box-one-tips">
                         <div class="box-square"></div>
-                        <div class="box-title">{{$L('便捷易用的项目管理模板')}}</div>
+                        <div class="box-title">
+                            {{ $L("便捷易用的项目管理模板") }}
+                        </div>
                         <div class="box-tips">
-                            {{$L('模版满足多种团队协作场景，同时支持自定义模版，满足团队个性化场景管理需求，可直观的查看项目的进展情况，团队协作更方便。')}}
+                            {{
+                                $L("模版满足多种团队协作场景，同时支持自定义模版，满足团队个性化场景管理需求，可直观的查看项目的进展情况，团队协作更方便。")
+                            }}
                         </div>
                     </div>
                 </div>
-                <div class="main-box-two">
+                <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-title">
+                            {{ $L("清晰直观的任务日历") }}
+                        </div>
                         <div class="box-tips">
-                            {{$L('通过灵活的任务日历，轻松安排每一天的日程，把任务拆解到每天，让工作目标更清晰，时间分配更合理。')}}
+                            {{
+                                $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-two-pic4"></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="box-title">
+                            {{ $L("开启您的 Dootask 团队协作") }}
+                        </div>
                         <div class="buttom-box">
-                            <div class="login-btn" @click="login">{{$L('立即登录')}}</div>
-                            <div class="contact-btn">{{$L('联系我们')}}</div>
+                            <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')}}
+                    {{ $L("桂公网安备 31011002000058号 桂ICP备12020087号-3") }}
                 </div>
             </div>
         </div>
@@ -115,7 +180,14 @@
 <script>
 export default {
     data() {
-        return {};
+        return {
+            screenWidth: document.body.clientWidth,
+        };
+    },
+    watch: {
+        screenWidth(nVal) {
+            console.log(nVal);
+        },
     },
     computed: {
         currentLanguage() {
@@ -128,7 +200,14 @@ export default {
         // } else {
         //     this.goForward({path: '/login'}, true);
         // }
+        const that = this;
+        window.onresize=()=>{
+            window.screenWidth=document.body.clientWidth
+            that.screenWidth=window.screenWidth
+        }
+        console.log(this.screenWidth)
     },
+
     methods: {
         login() {
             this.goForward(
@@ -138,6 +217,7 @@ export default {
                 false
             );
         },
+      
         register() {
             this.goForward(
                 {
diff --git a/resources/assets/sass/pages/page-index.scss b/resources/assets/sass/pages/page-index.scss
index f3090166a..894a3808b 100644
--- a/resources/assets/sass/pages/page-index.scss
+++ b/resources/assets/sass/pages/page-index.scss
@@ -8,7 +8,6 @@
             background: #8bcf70;
             border-radius: 0px 0px 300px 300px;
             position: relative;
-
             .header-nav {
                 width: 100%;
                 height: 72px;
@@ -22,50 +21,143 @@
                     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;
+                    @media(max-width:414px){
+                        .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;
+                        }
+                        .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){
+                        .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;
+                        }
+                        .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-right-one {
-                        display: flex;
-                        align-items: center;
-                        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 5px 0 5px;
-                        cursor: pointer;
-                        overflow: hidden;
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
-                    }
-                    .header-right-three {
-                        max-width: 85px;
-                        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;
-                    }
+                    
                 }
             }
             .header-content {
@@ -134,7 +226,7 @@
             margin-top: 200px;
             .main-box-one {
                 position: relative;
-                margin-bottom: 130px;
+                margin-bottom: 70px;
                 .box-one-pic1 {
                     width: 100%;
                     height: 188px;
@@ -188,13 +280,10 @@
             .main-box-two {
                 width: 100%;
                 position: relative;
-                margin-bottom: 130px;
-                height: 500px;
+                margin-bottom: 70px;
                 .box-two-square {
                 }
                 .box-two-pic2 {
-                    position: absolute;
-                    top: 0;
                     width: 100%;
                     height: 188px;
                     background: url("../images/index/box-pic2.png") no-repeat
@@ -206,8 +295,6 @@
                     border-radius: 10px;
                 }
                 .box-two-pic4 {
-                    position: absolute;
-                    top: 0;
                     width: 100%;
                     height: 188px;
                     background: url("../images/index/box-pic4.png") no-repeat
@@ -219,9 +306,6 @@
                     border-radius: 10px;
                 }
                 .box-two-tips {
-                    position: absolute;
-                    bottom: 10px;
-                    height: 300px;
                     width: 100%;
                 }
                 .box-square {
diff --git a/resources/assets/statics/public/images/index/indexlogo.png b/resources/assets/statics/public/images/index/indexlogo.png
index abb290382..e09caa940 100644
Binary files a/resources/assets/statics/public/images/index/indexlogo.png and b/resources/assets/statics/public/images/index/indexlogo.png differ