diff --git a/src/assets/images/official/TDUCK@2x.png b/src/assets/images/official/TDUCK@2x.png
new file mode 100644
index 0000000..d655d19
Binary files /dev/null and b/src/assets/images/official/TDUCK@2x.png differ
diff --git a/src/assets/images/official/heade-background.png b/src/assets/images/official/heade-background.png
new file mode 100644
index 0000000..869b472
Binary files /dev/null and b/src/assets/images/official/heade-background.png differ
diff --git a/src/views/official/index.vue b/src/views/official/index.vue
index a00d198..f85eba5 100644
--- a/src/views/official/index.vue
+++ b/src/views/official/index.vue
@@ -1,133 +1,44 @@
 <template>
     <div class="official-container">
         <div class="header-container">
-            <el-row type="flex" align="middle">
-                <el-col class="header-col" :span="3" :offset="6">
-                    <img src="@/assets/images/indexLogo.png" class="header-logo" @click="$router.push({path:'/home'})">
-                </el-col>
-                <el-col class="header-col" :span="6" :offset="1">
-                    <el-menu :default-active="menuIndex" mode="horizontal"
-                             text-color="#205BB5"
-                             active-text-color="#205BB5"
-                             @select="activeMenuHandle"
-                    >
-                        <el-menu-item v-for="(item, index) in menuRouters" :key="index" :index="item.routerPath"
-                                      :route="item.routerPath" class="menu-item"
-                        >
-                            {{ item.title }}
-                        </el-menu-item>
-                    </el-menu>
-                </el-col>
-                <el-col class="header-col" :span="3">
-                    <el-button v-if="isLogin" class="header-btn" @click="$router.push({path:'/home'})">控 制 台</el-button>
-                    <el-button v-if="!isLogin&&this.$route.path!='/login' " class="header-btn"
-                               @click="$router.push({path:'/login'})"
-                    >
-                        登 录
-                    </el-button>
-                </el-col>
-            </el-row>
-        </div>
-        <div class="main-container">
-            <router-view />
+            <div class="background" />
+            <img src="@/assets/images/official/TDUCK@2x.png">
+            <div>
+                <span>首页</span>
+                <span>开源项目</span>
+                <span>开发文档</span>
+                <span>付费服务</span>
+                <span>加入社群</span>
+            </div>
+            <div>
+                <span>登录</span>
+            </div>
         </div>
     </div>
 </template>
-<script>
-import store from '@/store/index.js'
-import {checkIsUrl, openUrl} from '@/utils'
 
+<script>
 export default {
-    name: 'Official',
-    data() {
-        return {
-            menuIndex: null,
-            menuRouters: [
-                {
-                    routerPath: '/',
-                    title: '首页'
-                },
-                {
-                    routerPath: 'https://gitee.com/TDuckApp/tduck-platform/issues',
-                    title: '提出建议'
-                },
-                {
-                    routerPath: 'https://gitee.com/TDuckApp/tduck-platform?time=2',
-                    title: '开源版本'
-                }
-            ]
-        }
-    },
-    computed: {
-        getStore() {
-            return store
-        },
-        isLogin() {
-            return this.getStore.getters['user/isLogin']
-        }
-    },
-    watch: {
-        $route(to) {
-            this.menuIndex = to.path
-        }
-    },
-    mounted() {
-        this.menuIndex = this.$route.path
-    }, methods: {
-        activeMenuHandle(routerPath) {
-            if (checkIsUrl(routerPath)) {
-                openUrl(routerPath)
-            } else {
-                this.menuIndex = routerPath
-            }
-        }
-    }
+    name: 'Official'
 }
 </script>
-<style scoped>
+
+<style lang="scss" scoped>
 .official-container {
+    min-width: 960px;
     height: 100%;
-    width: 100%;
-    margin: 0;
+    background-size: contain;
 }
 .header-container {
-    background-color: white;
-    width: 100%;
-    min-width: 960px;
-    top: 0;
-    height: 102px;
-    z-index: 100;
-}
-.main-container {
-    height: calc(100vh - 102px);
-}
-.header-container .header-col .el-menu--horizontal {
-    border: none;
-}
-.header-logo {
-    cursor: pointer;
-    width: 175px;
-}
-.menu-item {
-    line-height: 90px;
-    height: 90px;
-    font-size: 16px;
-    font-weight: 900;
     position: relative;
-    left: 200px;
-}
-.header-btn {
-    margin: 35px 0 35px 20px;
-    float: right;
-    color: #205bb5;
-    border-color: #205bb5;
-}
-.header-btn:focus,
-.header-btn:hover {
-    border-color: #205bb5;
-    color: #205bb5;
 }
-.view_container_content p {
-    color: #205bb5;
+.background {
+    position: absolute;
+    bottom: -375px;
+    width: 1920px;
+    height: 847px;
+    transform: rotate(337deg);
+    background: linear-gradient(90deg, #2054f1, #224ef3, #38eaff);
+    border-radius: 0 5px 5px 267px;
 }
 </style>
diff --git a/src/views/official/oldIndex.vue b/src/views/official/oldIndex.vue
new file mode 100644
index 0000000..00d24d0
--- /dev/null
+++ b/src/views/official/oldIndex.vue
@@ -0,0 +1,133 @@
+<template>
+    <div class="official-container">
+        <div class="header-container">
+            <el-row type="flex" align="middle">
+                <el-col class="header-col" :span="3" :offset="6">
+                    <img src="@/assets/images/indexLogo.png" class="header-logo" @click="$router.push({path:'/home'})">
+                </el-col>
+                <el-col class="header-col" :span="6" :offset="1">
+                    <el-menu :default-active="menuIndex" mode="horizontal"
+                             text-color="#205BB5"
+                             active-text-color="#205BB5"
+                             @select="activeMenuHandle"
+                    >
+                        <el-menu-item v-for="(item, index) in menuRouters" :key="oldIndex" :index="item.routerPath"
+                                      :route="item.routerPath" class="menu-item"
+                        >
+                            {{ item.title }}
+                        </el-menu-item>
+                    </el-menu>
+                </el-col>
+                <el-col class="header-col" :span="3">
+                    <el-button v-if="isLogin" class="header-btn" @click="$router.push({path:'/home'})">控 制 台</el-button>
+                    <el-button v-if="!isLogin&&this.$route.path!='/login' " class="header-btn"
+                               @click="$router.push({path:'/login'})"
+                    >
+                        登 录
+                    </el-button>
+                </el-col>
+            </el-row>
+        </div>
+        <div class="main-container">
+            <router-view />
+        </div>
+    </div>
+</template>
+<script>
+import store from '@/store/index.js'
+import {checkIsUrl, openUrl} from '@/utils'
+
+export default {
+    name: 'Official',
+    data() {
+        return {
+            menuIndex: null,
+            menuRouters: [
+                {
+                    routerPath: '/',
+                    title: '首页'
+                },
+                {
+                    routerPath: 'https://gitee.com/TDuckApp/tduck-platform/issues',
+                    title: '提出建议'
+                },
+                {
+                    routerPath: 'https://gitee.com/TDuckApp/tduck-platform?time=2',
+                    title: '开源版本'
+                }
+            ]
+        }
+    },
+    computed: {
+        getStore() {
+            return store
+        },
+        isLogin() {
+            return this.getStore.getters['user/isLogin']
+        }
+    },
+    watch: {
+        $route(to) {
+            this.menuIndex = to.path
+        }
+    },
+    mounted() {
+        this.menuIndex = this.$route.path
+    }, methods: {
+        activeMenuHandle(routerPath) {
+            if (checkIsUrl(routerPath)) {
+                openUrl(routerPath)
+            } else {
+                this.menuIndex = routerPath
+            }
+        }
+    }
+}
+</script>
+<style scoped>
+.official-container {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+}
+.header-container {
+    background-color: white;
+    width: 100%;
+    min-width: 960px;
+    top: 0;
+    height: 102px;
+    z-index: 100;
+}
+.main-container {
+    height: calc(100vh - 102px);
+}
+.header-container .header-col .el-menu--horizontal {
+    border: none;
+}
+.header-logo {
+    cursor: pointer;
+    width: 175px;
+}
+.menu-item {
+    line-height: 90px;
+    height: 90px;
+    font-size: 16px;
+    font-weight: 900;
+    position: relative;
+    left: 200px;
+}
+.header-btn {
+    margin: 35px 0 35px 20px;
+    float: right;
+    color: #205bb5;
+    border-color: #205bb5;
+}
+.header-btn:focus,
+.header-btn:hover {
+    border-color: #205bb5;
+    color: #205bb5;
+}
+.view_container_content p {
+    color: #205bb5;
+}
+</style>