upddate ui layout

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

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

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;