save

src/pages/pc/components/Ring.vue

@@ -2,19 +2,19 @@
   <div class="ring">
     <svg height="100%" width="100%">
       <circle class="circle-full"
-              cx="40rem"
-              cy="40rem"
-              r="35rem"
+              cx="2.5rem"
+              cy="2.5rem"
+              r="2.2rem"
               fill="none"
-              stroke-width="6rem"
+              stroke-width=".3rem"
               stroke-linecap="round"></circle>
       <circle v-if="props.percentage" ref="circleEl"
               class="circle-detail"
-              cx="40rem"
-              cy="40rem"
-              r="35rem"
+              cx="2.5rem"
+              cy="2.5rem"
+              r="2.2rem"
               fill="none"
-              stroke-width="6rem"
+              stroke-width=".3rem"
               stroke-linecap="round"
               stroke-dasharray="0,10000"></circle>
     </svg>
@@ -39,18 +39,18 @@ onMounted(() => {
   if (props.percentage) {
     let circleLength = Math.floor(2 * Math.PI * 40);
     let val = Number(props.percentage.toFixed(0));
-    circleEl.setAttribute("stroke-dasharray", "" + circleLength * val / 100 + "rem,10000");
+    circleEl.setAttribute("stroke-dasharray", "" + circleLength * val / 100 + "px,10000");
   }
 })
 </script>
 <style scoped lang="scss">
 @import "@/assets/css/variable";
 
-$w: 80rem;
+$w: 5rem;
 $w2: calc($w / 2);
 
 .ring {
-  font-size: 16rem;
+  font-size: 1rem;
   width: $w;
   height: $w;
   display: flex;
@@ -58,7 +58,7 @@ $w2: calc($w / 2);
   justify-content: center;
   flex-direction: column;
   position: relative;
-  margin-bottom: 6rem;
+  margin-bottom: .38rem;
 
   svg {
     position: absolute;
@@ -80,7 +80,7 @@ $w2: calc($w / 2);
   }
 
   .desc {
-    font-size: 12rem;
+    font-size: .8rem;
     opacity: .6;
   }
 }

src/pages/pc/components/toolbar/index.vue

@@ -176,7 +176,7 @@ header {
   margin-top: 1rem;
   background: var(--color-second-bg);
   border-radius: .8rem;
-  margin-bottom: 3rem;
+  margin-bottom: 2.5rem;
   position: relative;
   z-index: 2;
   padding: .4rem var(--space);

src/pages/pc/practice/Statistics.vue

@@ -126,37 +126,37 @@ const isEnd = $computed(() => {
 <style scoped lang="scss">
 @import "@/assets/css/style";
 
-$card-radius: 8rem;
+$card-radius: .5rem;
 $dark-second-bg: rgb(60, 63, 65);
 $item-hover: rgb(75, 75, 75);
 
 .statistics {
-  width: 800rem;
+  width: 60rem;
   padding: var(--space);
   background: $dark-second-bg;
   border-radius: $card-radius;
 
-  $header-height: 40rem;
-  $footer-height: 60rem;
+  $header-height: 2.5rem;
+  $footer-height: 4rem;
 
   header {
     display: flex;
     align-items: center;
     justify-content: center;
     height: $header-height;
-    font-size: 24rem;
-    margin-bottom: 15rem;
+    font-size: 1.4rem;
+    margin-bottom: 1rem;
   }
 
   .content {
     display: flex;
     gap: var(--space);
-    margin-bottom: 15rem;
+    margin-bottom: 1rem;
 
     .result {
       box-sizing: border-box;
       overflow: hidden;
-      height: 340rem;
+      height: 30rem;
       display: flex;
       flex-direction: column;
       border-radius: $card-radius;
@@ -172,15 +172,15 @@ $item-hover: rgb(75, 75, 75);
       .wrong-words {
         box-sizing: border-box;
         display: flex;
-        margin-right: 5rem;
+        margin-right: .3rem;
         flex-wrap: wrap;
-        gap: 10rem;
+        gap: .6rem;
         align-items: flex-start;
 
         .word {
           display: inline-block;
-          border-radius: 6rem;
-          padding: 5rem 15rem;
+          border-radius: .4rem;
+          padding: .3rem 1rem;
           background: $dark-second-bg;
         }
       }
@@ -188,9 +188,9 @@ $item-hover: rgb(75, 75, 75);
       .notice {
         $main: rgb(64,158,255);
         background: $main;
-        height: 40rem;
+        height: 2.5rem;
         display: flex;
-        gap: 10rem;
+        gap: .6rem;
         align-items: center;
         padding-left: var(--space);
       }
@@ -208,7 +208,7 @@ $item-hover: rgb(75, 75, 75);
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 20rem;
+    gap: 1.2rem;
   }
 }
 

src/pages/pc/word/EditWordDict.vue

@@ -14,7 +14,6 @@ import {useNav} from "@/utils";
 import {FormInstance, FormRules} from "element-plus";
 import MiniDialog from "@/pages/pc/components/dialog/MiniDialog.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import {$computed, $ref} from "vue/macros";
 
 const runtimeStore = useRuntimeStore()
 const store = useBaseStore()