Modify the word list component

src/assets/css/style.scss

@@ -271,28 +271,44 @@ footer {
   gap: 20rem;
   border: 1px solid var(--color-item-border);
 
-  .volume {
+  .left {
+    display: flex;
+    gap: 3rem;
+    flex-direction: column;
+    word-break: break-word;
+  }
+
+  .right {
+    display: flex;
+    flex-direction: column;
+    gap: 5rem;
+    transition: all .3s;
+  }
+
+  .volume, .collect, .easy {
     opacity: 0;
   }
 
+
   &:hover {
     background: var(--color-item-hover);
 
-    .volume {
+    .volume, .collect, .easy {
       opacity: 1;
     }
   }
 
   &.active {
     background: var(--color-item-active);
-
-    .volume {
-      color: #E6A23C;
-    }
+    $c: #E6A23C;
 
     .phonetic, .item-sub-title {
       color: var(--color-gray) !important;
     }
+
+    .volume, .collect, .easy, .fill {
+      color: $c;
+    }
   }
 
   .item-title {
@@ -325,7 +341,6 @@ footer {
   user-select: none;
 }
 
-
 .common-title {
   font-size: 20rem;
   color: var(--color-font-1);