upddate ui layout

2023-12-05 02:05:49 +08:00
parent 4e674fdd27
commit 7a2f0eb983
8 changed files with 81 additions and 76 deletions
--- 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 {
--- 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;
  }

--- 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);
    }
  }

--- 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;
--- 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);
        }
      }
    }
--- 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>
--- 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);
 }

--- 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);
 }