refactor: use UContainer replace UCard

cuixueshe · Aug 14, 2024 · 2e72628 · 2e72628
1 parent f983abc
commit 2e72628
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 19 deletions.
diff --git a/apps/client/app.config.ts b/apps/client/app.config.ts
@@ -21,6 +21,9 @@ export default defineAppConfig({
     card: {
       background: "dark:bg-gray-800",
     },
+    container: {
+      base: "py-5",
+    },
     kbd: {
       default: {
         size: "md",

diff --git a/apps/client/components/main/Summary.vue b/apps/client/components/main/Summary.vue
@@ -3,7 +3,12 @@
     v-model="showModal"
     prevent-close
   >
-    <UCard :ui="{ base: 'sm:w-[640px] md:w-[680px] max-w-full' }">
+    <UContainer
+      :ui="{
+        base: 'w-[90vw]',
+        constrained: 'max-w-[780px]',
+      }"
+    >
       <div class="flex justify-between">
         <h3 className="font-bold text-lg mb-4">🎉 恭喜!</h3>
         <button
@@ -20,22 +25,24 @@
 
       <div class="flex flex-col">
         <div class="flex">
-          <span class="text-4xl font-bold sm:text-6xl">"</span>
-          <div class="flex-1 text-center text-base leading-loose sm:text-xl">
+          <span class="text-3xl font-bold sm:text-4xl lg:text-6xl">"</span>
+          <div class="flex-1 text-center text-sm leading-loose sm:text-base lg:text-xl">
             {{ enSentence }}
           </div>
-          <span class="invisible text-4xl font-bold sm:text-6xl">"</span>
+          <span class="invisible text-3xl font-bold sm:text-4xl lg:text-6xl">"</span>
         </div>
 
         <div class="flex">
-          <span class="invisible text-4xl font-bold sm:text-6xl">"</span>
-          <div class="flex-1 text-center text-base leading-loose sm:text-xl">
+          <span class="invisible text-3xl font-bold sm:text-4xl lg:text-6xl">"</span>
+          <div class="flex-1 text-center text-sm leading-loose sm:text-base lg:text-xl">
             {{ zhSentence }}
           </div>
-          <span class="text-4xl font-bold sm:text-6xl">"</span>
+          <span class="text-3xl font-bold sm:text-4xl lg:text-6xl">"</span>
         </div>
         <p class="text-right text-xs text-gray-200 sm:text-sm">—— 金山词霸「每日一句」</p>
-        <p class="pl-4 text-sm leading-loose text-gray-600 sm:pl-14 sm:text-base">
+        <p
+          class="pl-2 text-xs leading-loose text-gray-600 sm:pl-4 sm:text-sm lg:pl-14 lg:text-base"
+        >
           {{
             `恭喜您一共完成 ${courseTimer.totalRecordNumber()} 道题，用时 ${formatSecondsToTime(
               courseTimer.calculateTotalTime(),
@@ -44,15 +51,13 @@
         </p>
         <p
           v-if="isAuthenticated()"
-          class="pl-4 text-sm leading-loose text-gray-400 sm:pl-14 sm:text-base"
+          class="pl-2 text-xs leading-loose text-gray-400 sm:pl-4 sm:text-sm lg:pl-14 lg:text-base"
         >
           今天一共学习 <span class="text-purple-500">{{ formattedMinutes }}分钟</span> 啦！
           <span v-if="totalMinutes >= 30">太强了，给自己来点掌声 😄</span>
         </p>
       </div>
-      <div
-        className="modal-action flex flex-wrap justify-center gap-2 sm:flex-nowrap sm:justify-end"
-      >
+      <div className="modal-action flex flex-col sm:flex-row gap-2 justify-center sm:justify-end">
         <button
           class="btn btn-primary w-full sm:w-auto"
           @click="toShare"
@@ -79,7 +84,7 @@
           <UKbd> ↵ </UKbd>
         </button>
       </div>
-    </UCard>
+    </UContainer>
   </UModal>
 
   <canvas

diff --git a/apps/client/components/rank/RankingBoard.vue b/apps/client/components/rank/RankingBoard.vue
@@ -1,11 +1,9 @@
 <template>
   <UModal v-model="rankingStore.rankModal">
-    <UCard
+    <UContainer
       :ui="{
-        base: 'h-[90vh] w-[90vw] max-w-[450px] max-h-[570px]',
-        body: {
-          base: 'h-full flex flex-col',
-        },
+        base: 'flex flex-col py-5 w-[90vw] h-[80vh] max-h-[600px]',
+        constrained: 'max-w-[500px]',
       }"
     >
       <div class="absolute right-2 top-2">
@@ -69,7 +67,7 @@
         :isLoading="rankingStore.isLoading"
         :rankingSelf="rankingStore.rankingSelf"
       />
-    </UCard>
+    </UContainer>
   </UModal>
 </template>