添加主题

src/components/Backgorund.vue

@@ -90,7 +90,6 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-@import "@/assets/css/colors";
 
 #background {
   position: fixed;
@@ -98,7 +97,7 @@ onMounted(() => {
   height: 100vh;
   left: 0;
   top: 0;
-  background: $dark-main-bg;
+  background-color: var(--color-main-bg);
 
   canvas {
     width: 100vw;

src/components/Side.vue

@@ -40,16 +40,12 @@ function changeDict(dict: Dict, i: number) {
         <div class="tab" :class="tabIndex===1&&'active'" @click="slideTo(1)">生词本</div>
         <div class="tab" :class="tabIndex===2&&'active'" @click="slideTo(2)">已忽略</div>
       </div>
-      <arrow-right class="close"
-                   @click="store.sideIsOpen = false"
-                   theme="outline" size="20" fill="#929596" :strokeWidth="2"/>
     </header>
     <div class="side-content">
       <swiper @swiper="e=>swiperIns0 = e" class="mySwiper" :allow-touch-move="false">
         <swiper-slide>
           <div class="page0">
             <header>
-              <arrow-left theme="outline" size="20" fill="#929596" :strokeWidth="2"/>
               <div class="dict-name">{{ store.dict.chapterIndex + 1 }}.</div>
             </header>
             <WordList
@@ -119,9 +115,6 @@ function changeDict(dict: Dict, i: number) {
       </swiper>
     </div>
   </div>
-  <menu-fold v-if="!store.sideIsOpen" class="menu" @click="store.sideIsOpen = true"
-             theme="outline" size="20" fill="#929596"
-             :strokeWidth="2"/>
 </template>
 <style scoped lang="scss">
 @import "@/assets/css/colors";
@@ -134,16 +127,21 @@ function changeDict(dict: Dict, i: number) {
 
 .side {
   $width: 20vw;
+  position: absolute;
+  right: 0;
   width: $width;
-  background: $dark-second-bg;
+  background: var(--color-second-bg);
   height: 100%;
   display: flex;
   flex-direction: column;
   transition: all .3s;
-  margin-right: -$width;
+  transform: rotate(-90deg);
+  transform-origin: 0 0 ;
+  z-index: 1;
 
   &.open {
-    margin-right: 0;
+    //margin-right: 0;
+    transform: rotate(0deg);
   }
 
   $header-height: 40rem;
@@ -156,6 +154,7 @@ function changeDict(dict: Dict, i: number) {
 
     .tabs {
       padding: 10rem 20rem;
+      justify-content: flex-end;
       width: 100%;
       display: flex;
       align-items: flex-end;
@@ -207,6 +206,7 @@ function changeDict(dict: Dict, i: number) {
       position: relative;
       display: flex;
       align-items: center;
+      justify-content: flex-end;
       gap: 10rem;
       font-size: 18rem;
       color: white;

src/components/Tooltip.vue

@@ -23,7 +23,11 @@ export default {
       this.show = true
       nextTick(() => {
         let tip = this.$refs.tip.getBoundingClientRect()
-        this.$refs.tip.style.top = rect.top - tip.height - 10 + 'px'
+        if (rect.top < 50) {
+          this.$refs.tip.style.top = rect.top + tip.height - 10 + 'px'
+        }else {
+          this.$refs.tip.style.top = rect.top - tip.height - 10 + 'px'
+        }
         let tipWidth = tip.width
         let rectWidth = rect.width
         this.$refs.tip.style.left = rect.left - (tipWidth - rectWidth) / 2 + 'px'
@@ -53,7 +57,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-@import "@/assets/css/style";
+@import "@/assets/css/style.scss";
 
 .tip {
   position: fixed;
@@ -61,6 +65,8 @@ export default {
   z-index: 999;
   border-radius: 4rem;
   padding: 10rem;
-  background: $item-hover;
+  color: var(--color-font);
+  background: var(--color-header-bg);
+  box-shadow: 1px 1px 6px #bbbbbb;
 }
 </style>

src/components/WordList.vue

@@ -77,8 +77,7 @@ watch(() => props.list, () => {
   box-sizing: border-box;
 
   .item {
-    background: $dark-main-bg;
-    //background: $item-hover;
+    background: var(--color-header-bg);
     border-radius: 6rem;
     padding: 12rem;
     //border: 1px solid gray;