feat: 依赖升级后的样式修改

src/layout/Footer/index.vue

@@ -7,7 +7,7 @@ function skip(url: string) {
 </script>
 
 <template>
-  <div class="footer-container">
+  <div class="footer-container h-[280px]">
     <ul class="flex justify-center">
       <li
         v-for="item in footerList.data"

src/views/Config/Global/FaceConfig.vue

@@ -187,14 +187,14 @@ onMounted(() => {
       </div>
     </div>
   </dialog>
-  <div>
+  <div class="flex flex-col gap-4">
     <h2>{{ t('viewTitle.globalSetting') }}</h2>
     <div class="mb-8">
       <button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">
         {{ t('button.resetAllData') }}
       </button>
     </div>
-    <label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
+    <label class="flex flex-row items-center w-full gap-24 form-control">
       <div class="">
         <div class="label">
           <span class="label-text">{{ t('table.title') }}</span>
@@ -205,7 +205,7 @@ onMounted(() => {
         >
       </div>
     </label>
-    <label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
+    <label class="flex flex-row items-center w-full gap-24 form-control">
       <div class="">
         <div class="label">
           <span class="label-text">{{ t('table.columnNumber') }}</span>
@@ -262,26 +262,26 @@ onMounted(() => {
         >{{ item.name }}</option>
       </select>
     </label>
-    <label class="w-full max-w-xs form-control">
+    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
       <div class="label">
         <span class="label-text">{{ t('table.cardColor') }}</span>
       </div>
       <ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue" />
     </label>
-    <label class="w-full max-w-xs form-control">
+    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
       <div class="label">
         <span class="label-text">{{ t('table.winnerColor') }}</span>
       </div>
       <ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
     </label>
 
-    <label class="w-full max-w-xs form-control">
+    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
       <div class="label">
         <span class="label-text">{{ t('table.textColor') }}</span>
       </div>
       <ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue" />
     </label>
-    <label class="flex flex-row w-full max-w-xs gap-10 mb-10 form-control">
+    <label class="flex flex-row w-full max-w-xs gap-10 form-control">
       <div>
         <div class="label">
           <span class="label-text">{{ t('table.cardWidth') }}</span>
@@ -301,7 +301,7 @@ onMounted(() => {
         >
       </div>
     </label>
-    <label class="w-full max-w-xs mb-10 form-control">
+    <label class="w-full max-w-xs form-control">
       <div class="label">
         <span class="label-text">{{ t('table.textSize') }}</span>
       </div>
@@ -310,7 +310,7 @@ onMounted(() => {
         class="w-full max-w-xs input input-bordered"
       >
     </label>
-    <label class="w-full max-w-xs form-control">
+    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
       <div class="label">
         <span class="label-text">{{ t('table.highlightColor') }}</span>
       </div>
@@ -329,7 +329,7 @@ onMounted(() => {
         </div>
       </div>
     </label>
-    <div class="flex w-full h-24 gap-3 m-0">
+    <div class="flex w-full gap-3 m-0">
       <button class="mt-5 btn btn-info btn-sm" @click.stop="clearPattern">
         <span>{{ t('button.clearPattern') }}</span>
       </button>
@@ -340,22 +340,22 @@ onMounted(() => {
       </div>
     </div>
 
-    <label class="w-full max-w-xs mb-10 form-control">
+    <label class="w-full max-w-xs flex items-center gap-2 form-control">
       <div class="label">
         <span class="label-text">{{ t('table.alwaysDisplay') }}</span>
       </div>
       <input
-        type="checkbox" :checked="isShowPrizeListValue" class="mt-2 border-solid checkbox checkbox-secondary border-1"
+        type="checkbox" :checked="isShowPrizeListValue" class="border-solid checkbox checkbox-secondary border-1"
         @change="isShowPrizeListValue = !isShowPrizeListValue"
       >
     </label>
 
-    <label class="w-full max-w-xs mb-10 form-control">
+    <label class="w-full max-w-xs flex items-center gap-2 mb-10 form-control">
       <div class="label">
         <span class="label-text">{{ t('table.avatarDisplay') }}</span>
       </div>
       <input
-        type="checkbox" :checked="isShowAvatarValue" class="mt-2 border-solid checkbox checkbox-secondary border-1"
+        type="checkbox" :checked="isShowAvatarValue" class="border-solid checkbox checkbox-secondary border-1"
         @change="isShowAvatarValue = !isShowAvatarValue"
       >
     </label>

src/views/Config/index.vue

@@ -67,7 +67,7 @@ function skip(path: string) {
     </ul>
     <router-view class="flex-1 mt-5" />
   </div>
-  <footer class="p-10 rounded footer footer-center bg-base-200 text-base-content">
+  <footer class="p-10 rounded footer footer-center bg-base-200 h-[280px] flex flex-col gap-4 text-base-content">
     <nav class="grid grid-flow-col gap-4">
       <a class="cursor-pointer link link-hover text-inherit" target="_blank" href="https://1kw20.fun">{{ t('footer.self-reflection') }}</a>
     </nav>

src/views/Home/PrizeList.vue

@@ -248,7 +248,7 @@ onMounted(() => {
             >
               <div
                 v-if="item.isShow"
-                class="relative flex flex-row items-center justify-between w-64 h-20 shadow-xl card bg-base-100"
+                class="relative flex flex-row items-center justify-between w-64 h-20 px-3 gap-6 shadow-xl card bg-base-100"
               >
                 <div
                   v-if="item.isUsed"
@@ -261,10 +261,10 @@ onMounted(() => {
                     class="object-cover h-full rounded-xl"
                   >
                 </figure>
-                <div class="items-center p-0 text-center card-body">
-                  <div class="tooltip tooltip-left" :data-tip="item.name">
+                <div class="items-center p-0 card-body">
+                  <div class="tooltip tooltip-left w-full pl-1" :data-tip="item.name">
                     <h2
-                      class="w-24 p-0 m-0 overflow-hidden text-center card-title whitespace-nowrap text-ellipsis"
+                      class="w-24 p-0 m-0 overflow-hidden card-title whitespace-nowrap text-ellipsis"
                     >
                       {{ item.name }}
                     </h2>
@@ -274,7 +274,7 @@ onMounted(() => {
                       item.count }}
                   </p>
                   <progress
-                    class="w-3/4 h-6 progress progress-primary" :value="item.isUsedCount"
+                    class="w-full h-6 progress bg-[#52545b] progress-primary" :value="item.isUsedCount"
                     :max="item.count"
                   />
                   <!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->