diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 4ba1c2e0..dbda6693 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -19,7 +19,7 @@
   --color-header-bg: white;
   --color-tooltip-bg: white;
   --color-tooltip-shadow: #bbbbbb;
-  --color-font-1: black;
+  --color-font-1: rgb(91, 91, 91);
   --color-font-2: rgb(46, 46, 46);
   --color-font-3: rgb(75, 85, 99);
   --color-font-active-1: white;
@@ -27,13 +27,16 @@
   --color-main-active: rgb(12, 140, 233);
   --color-scrollbar: rgb(147, 173, 227);
   --color-gray: gray;
+  --color-sub-gray: #c0bfbf;
 
-  --practice-wrapper-padding-right: 1px;
+  --practice-wrapper-translateX: 1px;
+  --article-width: 50vw;
   --toolbar-width: 700rem;
   --toolbar-height: 54rem;
   --panel-width: 400rem;
   --space: 20rem;
-  --panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 24rem);
+  --panel-margin-left: calc(50% - var(--practice-wrapper-translateX) / 2 + var(--toolbar-width) / 2 + 24rem);
+  --article-panel-margin-left: calc(50% - var(--practice-wrapper-translateX) / 2 + var(--article-width) / 2 + 24rem);
   --anim-time: 0.5s;
 
   --color-input-bg: white;
@@ -41,10 +44,9 @@
 
   --color-textarea-bg: white;
 
+
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   --word-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
-
-
 }
 
 html.dark {
@@ -69,9 +71,9 @@ html.dark {
   --color-font-3: rgba(255, 255, 255, 0.3);
 
   --color-gray: #bebebe;
+  --color-sub-gray: #383737;
 
-  --color-scrollbar: rgb(59, 87, 138);
-  --color-scrollbar: rgb(77, 78, 81);
+  --color-main-active: rgb(147, 173, 227);
   --color-scrollbar: rgb(92, 93, 94);
 
   --color-input-bg: rgba(14, 18, 23, 1);
@@ -83,11 +85,13 @@ html.dark {
 
 @media (max-width: 1680px) {
   :root {
-    --practice-wrapper-padding-right: 25vw;
+    --practice-wrapper-translateX: -12vw;
     --toolbar-width: 40vw;
+    --article-width: 60vw;
     --panel-width: 380rem;
     --toolbar-height: 48rem;
-    --panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 9vw);
+    --panel-margin-left: calc(50vw + var(--practice-wrapper-translateX) + var(--toolbar-width) / 2 + 5vw);
+    --article-panel-margin-left: calc(50% + var(--practice-wrapper-translateX) + var(--article-width) / 2 + 48rem);
   }
   .footer {
     .bottom {
@@ -107,11 +111,13 @@ html.dark {
 @media (max-width: 1366px) {
   :root {
     --space: 10rem;
-    --practice-wrapper-padding-right: 30vw;
+    --practice-wrapper-translateX: -22vw;
+    --article-width: 53vw;
     --panel-width: 30vw;
     --toolbar-width: 50vw;
     --toolbar-height: 40rem;
-    --panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 9vw);
+    --panel-margin-left: calc(50vw + var(--practice-wrapper-translateX) + var(--toolbar-width) / 2 + 14vw);
+    --article-panel-margin-left: calc(50% + var(--practice-wrapper-translateX) + var(--article-width) / 2 + 12vw);
   }
 
   .footer {
diff --git a/src/components/IconWrapper.vue b/src/components/IconWrapper.vue
index 2c2c548f..0411f351 100644
--- a/src/components/IconWrapper.vue
+++ b/src/components/IconWrapper.vue
@@ -5,7 +5,6 @@
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/variable.scss";
 
 $w: 22rem;
 .icon-wrapper {
@@ -18,10 +17,10 @@ $w: 22rem;
   border-radius: 3rem;
   background: transparent;
   transition: all .3s;
-  color: $main;
+  color: var(--color-main-active);
 
   &:hover {
-    background: $main;
+    background: var(--color-main-active);
     color: white;
   }
 
diff --git a/src/components/Ring.vue b/src/components/Ring.vue
index a02570a0..ea978bce 100644
--- a/src/components/Ring.vue
+++ b/src/components/Ring.vue
@@ -70,7 +70,7 @@ $w2: calc($w / 2);
     .circle-detail {
       transform-origin: $w2 $w2;
       transform: rotate(-90deg);
-      stroke: $main;
+      stroke: var(--color-main-active);
     }
   }
 
diff --git a/src/components/list/DictItem.vue b/src/components/list/DictItem.vue
index 84ced1a6..da226f50 100644
--- a/src/components/list/DictItem.vue
+++ b/src/components/list/DictItem.vue
@@ -111,7 +111,9 @@ const emit = defineEmits<{
     left: 0;
     height: 55rem;
     width: 55rem;
-    color: white;  background-color: skyblue;
+    color: white;
+    //background-color: skyblue;
+    background-color: var(--color-main-active);
     clip-path: polygon(0 10%, 0% 100%, 100% 100%);
     font-size: 12rem;
     display: flex;
diff --git a/src/pages/practice/Footer.vue b/src/pages/practice/Footer.vue
index f0e3ed6c..e1f8e555 100644
--- a/src/pages/practice/Footer.vue
+++ b/src/pages/practice/Footer.vue
@@ -116,12 +116,12 @@ onUnmounted(() => {
         align-items: center;
         gap: 5rem;
         width: 80rem;
+        color: gray;
 
         .line {
           height: 1px;
           width: 100%;
-          //background: gainsboro;
-          background: var(--color-font-1);
+          background: var(--color-sub-gray);
         }
       }
     }
diff --git a/src/pages/practice/index.vue b/src/pages/practice/index.vue
index d56dc3bd..0b0c849e 100644
--- a/src/pages/practice/index.vue
+++ b/src/pages/practice/index.vue
@@ -160,7 +160,8 @@ useStartKeyboardEventListener()
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  padding-right: var(--practice-wrapper-padding-right);
+  //padding-right: var(--practice-wrapper-padding-right);
+  transform: translateX(var(--practice-wrapper-translateX));
 }
 
 </style>
\ No newline at end of file
diff --git a/src/pages/practice/practice-article/index.vue b/src/pages/practice/practice-article/index.vue
index 3dc2e572..65c4b982 100644
--- a/src/pages/practice/practice-article/index.vue
+++ b/src/pages/practice/practice-article/index.vue
@@ -172,7 +172,7 @@ function saveArticle(val: Article) {
 }
 
 function edit(val: Article = articleData.article) {
-  if (!articleIsActive)return
+  if (!articleIsActive) return
   // tabIndex = 1
   // wordData.words = [
   //   {
@@ -285,7 +285,7 @@ function collect(e: KeyboardEvent) {
 }
 
 //包装一遍，因为快捷建的默认参数是Event
-function shortcutKeyEdit(){
+function shortcutKeyEdit() {
   edit()
 }
 
@@ -345,57 +345,59 @@ defineExpose({getCurrentPractice})
       </div>
     </div>
 
-    <div class="panel-wrapper">
-      <Panel v-if="tabIndex === 0">
-        <template v-slot="{active}">
-          <div class="panel-page-item">
-            <div class="list-header">
-              <div class="left">
-                <BaseIcon title="切换词典"
-                          @click="emitter.emit(EventKey.openDictModal,'list')"
-                          icon="carbon:change-catalog"/>
-                <div class="title">
-                  {{ store.currentDict.name }}
+    <Teleport to="body">
+      <div class="panel-wrapper">
+        <Panel v-if="tabIndex === 0">
+          <template v-slot="{active}">
+            <div class="panel-page-item">
+              <div class="list-header">
+                <div class="left">
+                  <BaseIcon title="切换词典"
+                            @click="emitter.emit(EventKey.openDictModal,'list')"
+                            icon="carbon:change-catalog"/>
+                  <div class="title">
+                    {{ store.currentDict.name }}
+                  </div>
+                  <Tooltip
+                      :title="`下一章(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.NextChapter]})`"
+                      v-if="store.currentDict.chapterIndex < articleData.articles .length - 1">
+                    <IconWrapper>
+                      <Icon @click="emitter.emit(EventKey.next)" icon="octicon:arrow-right-24"/>
+                    </IconWrapper>
+                  </Tooltip>
+                </div>
+                <div class="right">
+                  {{ articleData.articles.length }}篇文章
                 </div>
-                <Tooltip
-                    :title="`下一章(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.NextChapter]})`"
-                    v-if="store.currentDict.chapterIndex < articleData.articles .length - 1">
-                  <IconWrapper>
-                    <Icon @click="emitter.emit(EventKey.next)" icon="octicon:arrow-right-24"/>
-                  </IconWrapper>
-                </Tooltip>
               </div>
-              <div class="right">
-                {{ articleData.articles.length }}篇文章
-              </div>
-            </div>
 
-            <ArticleList
-                :isActive="active"
-                :static="false"
-                :show-border="true"
-                :show-translate="settingStore.translate"
-                @title="e => emitter.emit(EventKey.openArticleContentModal,e.item)"
-                @click="handleChangeChapterIndex"
-                :active-id="articleData.article.id"
-                :list="articleData.articles ">
-              <template v-slot:suffix="{item,index}">
-                <BaseIcon
-                    v-if="!isArticleCollect(item)"
-                    class="collect"
-                    @click="toggleArticleCollect(item)"
-                    title="收藏" icon="ph:star"/>
-                <BaseIcon
-                    v-else
-                    class="fill"
-                    @click="toggleArticleCollect(item)"
-                    title="取消收藏" icon="ph:star-fill"/>
-              </template>
-            </ArticleList>
-          </div>
-        </template>
-      </Panel>
-    </div>
+              <ArticleList
+                  :isActive="active"
+                  :static="false"
+                  :show-border="true"
+                  :show-translate="settingStore.translate"
+                  @title="e => emitter.emit(EventKey.openArticleContentModal,e.item)"
+                  @click="handleChangeChapterIndex"
+                  :active-id="articleData.article.id"
+                  :list="articleData.articles ">
+                <template v-slot:suffix="{item,index}">
+                  <BaseIcon
+                      v-if="!isArticleCollect(item)"
+                      class="collect"
+                      @click="toggleArticleCollect(item)"
+                      title="收藏" icon="ph:star"/>
+                  <BaseIcon
+                      v-else
+                      class="fill"
+                      @click="toggleArticleCollect(item)"
+                      title="取消收藏" icon="ph:star-fill"/>
+                </template>
+              </ArticleList>
+            </div>
+          </template>
+        </Panel>
+      </div>
+    </Teleport>
 
     <EditSingleArticleModal
         v-model="showEditArticle"
@@ -408,8 +410,6 @@ defineExpose({getCurrentPractice})
 <style scoped lang="scss">
 @import "@/assets/css/style";
 
-$article-width: 50vw;
-
 .swiper-wrapper {
   height: 100%;
   overflow: hidden;
@@ -434,7 +434,7 @@ $article-width: 50vw;
 .practice-article {
   flex: 1;
   overflow: hidden;
-  width: $article-width;
+  width: var(--article-width);
 }
 
 .typing-word-wrapper {
@@ -446,7 +446,7 @@ $article-width: 50vw;
   left: 0;
   top: 10rem;
   z-index: 1;
-  margin-left: calc(50% + ($article-width / 2) + var(--space));
+  margin-left: var(--article-panel-margin-left);
   height: calc(100% - 20rem);
 }
 
diff --git a/src/pages/practice/practice-word/TypingWord.vue b/src/pages/practice/practice-word/TypingWord.vue
index 371c3bea..c11aacdf 100644
--- a/src/pages/practice/practice-word/TypingWord.vue
+++ b/src/pages/practice/practice-word/TypingWord.vue
@@ -433,14 +433,11 @@ onUnmounted(() => {
   }
 }
 
-$article-width: 50vw;
-
 .word-panel-wrapper {
   position: fixed;
   left: 0;
   top: 10rem;
   z-index: 1;
-  //margin-left: calc(50% + (var(--toolbar-width) / 2) + var(--space));
   margin-left: var(--panel-margin-left);
   height: calc(100% - 20rem);
 }