diff --git a/src/assets/css/wiki/index.less b/src/assets/css/wiki/index.less
index e3e84981..d1ada1d9 100644
--- a/src/assets/css/wiki/index.less
+++ b/src/assets/css/wiki/index.less
@@ -4,9 +4,11 @@
     align-items: center;
     position: relative;
     width: 100%;
-    min-height: calc(100vh - 64px);
-    margin-top: 64px;
+    .h(100vh);
+    // min-height: calc(100vh - 64px);
+    // margin-top: 64px;
     padding-bottom: 64px;
+    box-sizing: border-box;
     background: url(~@/assets/img/wiki/overview/bg.png),
         linear-gradient(152.57deg, rgba(150, 128, 87, 1) 0%, rgba(87, 75, 65, 1) 27.78%, rgba(0, 0, 0, 1) 100%);
     background-size: cover;
@@ -21,8 +23,18 @@
         background: url(~@/assets/img/wiki/overview/bamboo.svg) no-repeat;
         background-size: cover;
     }
+    &.is_mobile {
+        .pb(0);
+        align-items: flex-start;
+        &::after {
+            display: none;
+        }
+    }
 }
 
 .m-achievement-content {
     margin-left: 64px;
+    &.is_mobile {
+        margin-left: 0;
+    }
 }
diff --git a/src/components/wiki/sidebar.vue b/src/components/wiki/sidebar.vue
index 8edfe2ee..6b50f7ab 100644
--- a/src/components/wiki/sidebar.vue
+++ b/src/components/wiki/sidebar.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="m-achievement-sidebar">
-        <img class="" src="@/assets/img/wiki/overview/title.svg" alt="" />
+    <div class="m-achievement-sidebar" :class="{ is_mobile: mobile }">
+        <img class="u-title_img" src="@/assets/img/wiki/overview/title.svg" alt="" />
         <ul class="m-sidebar-nav">
             <li class="active">
                 <router-link
@@ -11,13 +11,9 @@
                 >
                 <ul>
                     <li>
-                        <router-link
-                            class="is-child"
-                            :to="{
-                                name: 'overview',
-                            }"
-                            >总览</router-link
-                        >
+                        <router-link class="is-child" :to="{ name: 'overview' }">{{
+                            viewAchievementsName ? viewAchievementsName + "资历" : "总览"
+                        }}</router-link>
                     </li>
                 </ul>
             </li>
@@ -44,7 +40,7 @@
                 >
             </li>
         </ul>
-        <a class="u-wiki-btn" href="/cj">
+        <a class="u-wiki-btn" href="/cj" v-show="!mobile">
             <p class="u-text">
                 已收录资历点：<span>{{ count }}</span>
             </p>
@@ -62,6 +58,16 @@ export default {
             count: 0,
         };
     },
+    computed: {
+        mobile() {
+            const userAgent = navigator.userAgent.toLowerCase();
+            const mobileKeywords = ["android", "iphone", "ipad", "ipod", "windows phone"];
+            return mobileKeywords.some((keyword) => userAgent.includes(keyword));
+        },
+        viewAchievementsName() {
+            return this.$store.state.viewAchievementsName;
+        },
+    },
     created() {
         // 获取成就统计信息
         getAchievementsTotal().then((data) => {
@@ -134,5 +140,15 @@ export default {
             }
         }
     }
+    &.is_mobile {
+        .w(137px);
+        .h(calc(100vh - 120px));
+        .pl(20px);
+        .pt(52px);
+        box-sizing: border-box;
+        .u-title_img {
+            .w(50px);
+        }
+    }
 }
 </style>
diff --git a/src/router/wiki.js b/src/router/wiki.js
index 1eacf77c..d334d2dd 100644
--- a/src/router/wiki.js
+++ b/src/router/wiki.js
@@ -5,6 +5,12 @@ import VueRouter from "vue-router";
 Vue.use(VueRouter);
 
 const routes = [
+    {
+        name: "wiki",
+
+        path: "/",
+        redirect: "/achievement/overview",
+    },
     {
         name: "overview",
         path: "/achievement/overview",
diff --git a/src/views/wiki/index.vue b/src/views/wiki/index.vue
index 8534281c..34e68a4e 100644
--- a/src/views/wiki/index.vue
+++ b/src/views/wiki/index.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
-        <Header></Header>
-        <div class="m-achievement-main">
+        <!-- <Header></Header> -->
+        <div class="m-achievement-main" :class="{ is_mobile: mobile }">
             <SideBar />
-            <div class="m-achievement-content">
+            <div class="m-achievement-content" :class="{ is_mobile: mobile }">
                 <router-view></router-view>
             </div>
         </div>
@@ -18,7 +18,13 @@ export default {
     data() {
         return {};
     },
-    computed: {},
+    computed: {
+        mobile() {
+            const userAgent = navigator.userAgent.toLowerCase();
+            const mobileKeywords = ["android", "iphone", "ipad", "ipod", "windows phone"];
+            return mobileKeywords.some((keyword) => userAgent.includes(keyword));
+        },
+    },
     watch: {},
     methods: {},
     mounted() {},
diff --git a/src/views/wiki/overview.vue b/src/views/wiki/overview.vue
index 7e75d54d..dfd7751f 100644
--- a/src/views/wiki/overview.vue
+++ b/src/views/wiki/overview.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="p-achievement-overview">
-        <div class="m-overview-header">
+    <div class="p-achievement-overview" :class="{ is_mobile: mobile }">
+        <div class="m-overview-header" v-if="!mobile">
             <!-- 资历、选中用户信息 -->
             <div class="m-header-info">
                 <!-- 用户信息展示 -->
@@ -47,6 +47,7 @@
 
                     <div v-if="viewAchievementsName" class="u-overview" @click="onSeeOverview">查看总览</div>
                 </div>
+
                 <!-- 资历展示 -->
                 <div class="m-info-zl">
                     <div class="m-info-zl__info">
@@ -84,7 +85,71 @@
                 <RoleAvatar class="u-avatar-img" :mount="currentRole.mount" :body_type="currentRole.body_type" />
             </div>
         </div>
-        <div class="m-overview-main">
+        <!-- 移动端角色信息 -->
+        <div class="m-overview-header_mobile" v-if="mobile">
+            <div class="u-name">
+                {{ currentRole.name }}
+                {{ currentRole.server && "·" }}
+                {{ currentRole.server }}
+                <img width="30" height="30" :src="showSchoolIcon(currentRole.mount)" alt="jx3logo" />
+            </div>
+
+            <el-dropdown trigger="click">
+                <div class="u-toggle-btn">
+                    <span>切换</span>
+                    <img src="@/assets/img/wiki/overview/toggle-user-icon.svg" alt="" width="16px" height="16px" />
+                </div>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item v-if="isLogin">
+                        <div class="m-role-item" @click="onChangeRole(virtualRole)">
+                            <span>{{ virtualRole.name }}</span>
+                            <span>&lt;虚拟角色&gt;</span>
+                        </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item v-for="role in roleList" :key="role.ID">
+                        <div
+                            @click="onChangeRole(role)"
+                            class="m-role-item"
+                            :class="{
+                                active: role.jx3id === currentRole.jx3id,
+                            }"
+                        >
+                            <span>{{ role.name }}</span>
+                            <span>{{ role.server }}</span>
+                        </div>
+                    </el-dropdown-item>
+                </el-dropdown-menu>
+            </el-dropdown>
+        </div>
+        <!-- 移动端查看总览位置 -->
+        <div class="u-overview_mobile" :class="{ isScroll }" v-show="mobile" @click="onSeeOverview">查看总览</div>
+        <div
+            ref="overviewList"
+            class="m-overview-main"
+            :class="{ is_mobile: mobile, isScroll }"
+            @scroll="overviewListScroll"
+        >
+            <!-- 移动端资历总览 -->
+            <div class="m-info-zl" v-if="mobile">
+                <div class="m-info-zl__info" v-if="!isScroll">
+                    <span class="u-title"
+                        >{{ viewAchievementsName || "总" }}资历：<span class="u-number">{{
+                            ownPointsCount
+                        }}</span></span
+                    >
+
+                    <span class="u-rate">{{ totalProgress }}%</span>
+                </div>
+                <div class="m-info-zl__progress">
+                    <div
+                        class="u-active-progress"
+                        :style="{
+                            width: `${totalProgress}%`,
+                            background: getCurrentProgressBg(totalProgress),
+                        }"
+                    ></div>
+                </div>
+            </div>
             <!-- item -->
             <div class="m-cj-item" @click="onEnterCategory(item)" v-for="(item, i) in list" :key="i">
                 <!-- 做边框 -->
@@ -133,6 +198,24 @@
                 </div>
             </div>
         </div>
+        <div class="m-zl-info_bottom" v-if="isScroll">
+            <div class="m-box_bottom">
+                <span class="u-title"
+                    >{{ viewAchievementsName || "总" }}资历： <span class="u-number">{{ ownPointsCount }}</span></span
+                >
+
+                <span class="u-rate">{{ totalProgress }}%</span>
+            </div>
+            <div class="m-info-zl__progress">
+                <div
+                    class="u-active-progress"
+                    :style="{
+                        width: `${totalProgress}%`,
+                        background: getCurrentProgressBg(totalProgress),
+                    }"
+                ></div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -168,9 +251,15 @@ export default {
                 jx3id: 0,
                 ID: ~~User.getInfo().uid,
             },
+            isScroll: false, //移动端滚动后总览数据移至底部
         };
     },
     computed: {
+        mobile() {
+            const userAgent = navigator.userAgent.toLowerCase();
+            const mobileKeywords = ["android", "iphone", "ipad", "ipod", "windows phone"];
+            return mobileKeywords.some((keyword) => userAgent.includes(keyword));
+        },
         avatar_frame() {
             if (this.userInfo) {
                 const { user_avatar_frame } = this.userInfo;
@@ -247,6 +336,14 @@ export default {
         this.loadData();
     },
     methods: {
+        overviewListScroll($event) {
+            if (!this.mobile) return;
+            if (this.$refs.overviewList.scrollTop > 70) {
+                this.isScroll = true;
+            } else {
+                this.isScroll = false;
+            }
+        },
         getUserInfo() {
             const uid = User.getInfo().uid;
             uid &&
@@ -258,17 +355,26 @@ export default {
         },
         onChangeRole(role) {
             this.currentRole = role;
+            this.$nextTick(() => {
+                this.$refs.overviewList.scrollTop = 0;
+            });
         },
         showSchoolIcon,
         onEnterCategory(data) {
             if (data.children) {
                 this.$store.commit("SET_STATE", { key: "viewAchievementsName", value: data.name });
                 this.getRenderList(data.children);
+                this.$nextTick(() => {
+                    this.$refs.overviewList.scrollTop = 0;
+                });
             }
         },
         onSeeOverview() {
             this.$store.commit("SET_STATE", { key: "viewAchievementsName", value: null });
             this.getRenderList();
+            this.$nextTick(() => {
+                this.$refs.overviewList.scrollTop = 0;
+            });
         },
         loadData() {
             this.loadUserRoles();
@@ -417,6 +523,10 @@ export default {
 .p-achievement-overview {
     padding-top: 65px;
     width: 960px;
+    &.is_mobile {
+        width: calc(100vw - 137px);
+        .pt(0);
+    }
     .m-overview-header {
         .mb(18px);
         .flex;
@@ -512,6 +622,7 @@ export default {
                 }
             }
         }
+
         .m-info-avatar {
             max-width: 205px;
             width: 205px;
@@ -549,6 +660,50 @@ export default {
             }
         }
     }
+    //手机端用户信息
+    .m-overview-header_mobile {
+        position: fixed;
+        .z(21);
+        width: 100vw;
+        .lt(0);
+        background-color: #fff;
+        .h(40px);
+        padding: 8px 24px;
+        box-sizing: border-box;
+        .flex;
+        align-items: center;
+        justify-content: space-between;
+        .u-name {
+            .fz(16px,24px);
+            .bold(400);
+            color: rgba(181, 148, 87, 1);
+            .flex;
+            .flex(o);
+        }
+        .u-toggle-btn {
+            .size(60px,18px);
+            .r(4px);
+            border: 1px solid #bfb8ac;
+            .flex;
+            .flex(o);
+            .fz(12px);
+            .bold(400);
+            color: rgba(191, 184, 172, 1);
+        }
+    }
+    //移动端查看总览
+    .u-overview_mobile {
+        position: fixed;
+        left: 12px;
+        bottom: 12px;
+        .fz(24px);
+        .bold(900);
+        color: #fff;
+        text-decoration: underline;
+        &.isScroll {
+            bottom: 92px;
+        }
+    }
     .m-overview-main {
         .grid;
         grid-template-columns: repeat(3, 1fr);
@@ -557,6 +712,30 @@ export default {
         overflow-y: scroll;
         row-gap: 24px;
         column-gap: 12px;
+        padding-right: 10px;
+
+        /* 针对Webkit内核的浏览器 */
+        &::-webkit-scrollbar {
+            /* 设置滚动条的宽度 */
+            width: 10px;
+        }
+
+        /* 滚动条轨道 - 背景颜色/白底 */
+        &::-webkit-scrollbar-track {
+            background: #595958;
+            border-radius: 10px;
+        }
+
+        /* 滚动条的滑块部分 */
+        &::-webkit-scrollbar-thumb {
+            background: #e2d3b9;
+            border-radius: 10px;
+        }
+
+        /* 当鼠标悬停在滚动条滑块上时改变颜色 */
+        &::-webkit-scrollbar-thumb:hover {
+            background: #e2d3b9;
+        }
         .m-cj-item {
             .flex;
             .h(70px);
@@ -631,6 +810,63 @@ export default {
                 }
             }
         }
+        //列表手机端
+        &.is_mobile {
+            .mt(40px);
+            height: calc(100vh - 60px);
+            .db;
+            .pr(0);
+            &::-webkit-scrollbar {
+                /* 设置滚动条的宽度 */
+                width: 0;
+            }
+            .m-info-zl {
+                .mt(20px);
+                .mb(20px);
+                .h(80px);
+                padding: 12px 12px 12px 12px;
+                box-sizing: border-box;
+                background: rgba(247, 247, 247, 1);
+                .u-title,
+                .u-number,
+                .u-rate {
+                    .fz(20px,28px);
+                    .bold(700);
+                }
+                .m-info-zl__info {
+                    .flex;
+                    justify-content: space-between;
+                }
+                .u-title {
+                    color: rgba(65, 65, 64, 1);
+                }
+                .u-number {
+                    color: rgba(181, 148, 87, 1);
+                }
+                .u-rate {
+                    color: rgba(148, 126, 93, 1);
+                }
+                .m-info-zl__progress {
+                    .mt(8px);
+                    position: relative;
+                    .size(100%,12px);
+                    background: white;
+                    .u-active-progress {
+                        position: absolute;
+                        transition: 0.5s;
+                        left: 0;
+                        top: 0;
+                        height: 100%;
+                    }
+                }
+            }
+            .m-cj-item {
+                .mb(12px);
+            }
+        }
+        &.isScroll {
+            height: calc(100vh - 140px);
+        }
     }
 }
 .m-role-dropdown {
@@ -658,4 +894,46 @@ export default {
         }
     }
 }
+//底部总览信息
+.m-zl-info_bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    .size(100%, 80px);
+    padding: 12px 12px 12px 12px;
+    box-sizing: border-box;
+    background: rgba(247, 247, 247, 1);
+    .m-box_bottom {
+        .flex;
+        justify-content: space-between;
+    }
+    .u-title,
+    .u-number,
+    .u-rate {
+        .fz(20px,28px);
+        .bold(700);
+    }
+    .u-title {
+        color: rgba(65, 65, 64, 1);
+    }
+    .u-number {
+        color: rgba(181, 148, 87, 1);
+    }
+    .u-rate {
+        color: rgba(148, 126, 93, 1);
+    }
+    .m-info-zl__progress {
+        .mt(8px);
+        position: relative;
+        .size(100%,12px);
+        background: white;
+        .u-active-progress {
+            position: absolute;
+            transition: 0.5s;
+            left: 0;
+            top: 0;
+            height: 100%;
+        }
+    }
+}
 </style>