样式

src/views/study/chinese/index.vue

@@ -444,52 +444,40 @@
             </div>
           </div>
           <div class="flex flex-col p-4">
-            <div class="flex gap-4">
-              <div
-                class="flex flex-1 items-center justify-between rounded-lg bg-gray-50 p-3"
-              >
-                <div class="flex items-center">
-                  <div
-                    class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-blue-100"
-                  >
-                    <i class="fas fa-clipboard-list text-blue-600"></i>
-                  </div>
-                  <div>
-                    <div class="text-sm text-gray-500">本学科总做题数</div>
-                    <div class="text-lg font-bold">246题</div>
-                  </div>
+            <div class="grid grid-cols-3 gap-4">
+              <div class="flex flex-1 items-center rounded-lg bg-gray-50 p-3">
+                <div
+                  class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-blue-100"
+                >
+                  <i class="fas fa-clipboard-list text-blue-600"></i>
+                </div>
+                <div>
+                  <div class="text-sm text-gray-500">本学科总做题数</div>
+                  <div class="text-lg font-bold">246题</div>
                 </div>
               </div>
 
-              <div
-                class="flex flex-1 items-center justify-between rounded-lg bg-gray-50 p-3"
-              >
-                <div class="flex items-center">
-                  <div
-                    class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-red-100"
-                  >
-                    <i class="fas fa-times-circle text-red-600"></i>
-                  </div>
-                  <div>
-                    <div class="text-sm text-gray-500">错题数</div>
-                    <div class="text-lg font-bold">59题</div>
-                  </div>
+              <div class="flex flex-1 items-center rounded-lg bg-gray-50 p-3">
+                <div
+                  class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-red-100"
+                >
+                  <i class="fas fa-times-circle text-red-600"></i>
+                </div>
+                <div>
+                  <div class="text-sm text-gray-500">错题数</div>
+                  <div class="text-lg font-bold">59题</div>
                 </div>
               </div>
 
-              <div
-                class="flex flex-1 items-center justify-between rounded-lg bg-gray-50 p-3"
-              >
-                <div class="flex items-center">
-                  <div
-                    class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-green-100"
-                  >
-                    <i class="fas fa-check-circle text-green-600"></i>
-                  </div>
-                  <div>
-                    <div class="text-sm text-gray-500">正确率</div>
-                    <div class="text-lg font-bold">76%</div>
-                  </div>
+              <div class="flex flex-1 items-center rounded-lg bg-gray-50 p-3">
+                <div
+                  class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-green-100"
+                >
+                  <i class="fas fa-check-circle text-green-600"></i>
+                </div>
+                <div>
+                  <div class="text-sm text-gray-500">正确率</div>
+                  <div class="text-lg font-bold">76%</div>
                 </div>
               </div>
             </div>