页面宽度判断移动端设备从992调整为1024

Author: hooray

src/layouts/components/BackTop/index.vue

@@ -5,11 +5,11 @@ defineOptions({
 
 const transitionClass = {
   enterActiveClass: 'ease-out duration-300',
-  enterFromClass: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-  enterToClass: 'opacity-100 translate-y-0 sm:scale-100',
+  enterFromClass: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
+  enterToClass: 'opacity-100 translate-y-0 lg:scale-100',
   leaveActiveClass: 'ease-in duration-200',
-  leaveFromClass: 'opacity-100 translate-y-0 sm:scale-100',
-  leaveToClass: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+  leaveFromClass: 'opacity-100 translate-y-0 lg:scale-100',
+  leaveToClass: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
 }
 
 onMounted(() => {

src/layouts/components/HotkeysIntro/index.vue

@@ -20,7 +20,7 @@ onMounted(() => {
 <template>
   <HDialog v-model="isShow" title="快捷键介绍">
     <div class="px-4">
-      <div class="grid gap-2 md:grid-cols-2">
+      <div class="grid gap-2 sm:grid-cols-2">
         <div>
           <h2 class="m-0 text-lg font-bold">
             全局

src/layouts/components/Search/index.vue

@@ -30,11 +30,11 @@ const overlayTransitionClass = ref({
 const transitionClass = computed(() => {
   return {
     enter: 'ease-out duration-300',
-    enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-    enterTo: 'opacity-100 translate-y-0 sm:scale-100',
+    enterFrom: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
+    enterTo: 'opacity-100 translate-y-0 lg:scale-100',
     leave: 'ease-in duration-200',
-    leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
-    leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+    leaveFrom: 'opacity-100 translate-y-0 lg:scale-100',
+    leaveTo: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
   }
 })
 
@@ -280,9 +280,9 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
         <div class="fixed inset-0 bg-stone-200/75 backdrop-blur-sm transition-opacity dark:bg-stone-8/75" />
       </TransitionChild>
       <div class="fixed inset-0">
-        <div class="h-full flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
+        <div class="h-full flex items-end justify-center p-4 text-center lg:items-center">
           <TransitionChild as="template" v-bind="transitionClass">
-            <DialogPanel class="relative h-full max-h-4/5 w-full flex flex-col text-left sm:max-w-2xl">
+            <DialogPanel class="relative h-full max-h-4/5 w-full flex flex-col text-left lg:max-w-2xl">
               <div class="flex flex-col overflow-y-auto rounded-xl bg-white shadow-xl dark:bg-stone-8">
                 <div class="flex items-center px-4 py-3" border-b="~ solid stone-2 dark:stone-7">
                   <SvgIcon name="i-ep:search" :size="18" class="text-stone-5" />

src/layouts/ui-kit/HDialog.vue

@@ -37,11 +37,11 @@ const overlayTransitionClass = ref({
 const transitionClass = computed(() => {
   return {
     enter: 'ease-out duration-300',
-    enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-    enterTo: 'opacity-100 translate-y-0 sm:scale-100',
+    enterFrom: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
+    enterTo: 'opacity-100 translate-y-0 lg:scale-100',
     leave: 'ease-in duration-200',
-    leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
-    leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+    leaveFrom: 'opacity-100 translate-y-0 lg:scale-100',
+    leaveTo: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
   }
 })
 
@@ -58,9 +58,9 @@ function close() {
         <div class="fixed inset-0 bg-stone-2/75 transition-opacity dark:bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
       </TransitionChild>
       <div class="fixed inset-0 overflow-y-auto">
-        <div class="min-h-full flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
+        <div class="min-h-full flex items-end justify-center p-4 text-center lg:items-center">
           <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
-            <DialogPanel class="relative w-full flex flex-col overflow-hidden rounded-xl bg-white text-left shadow-xl sm:my-8 sm:max-w-lg dark:bg-stone-8">
+            <DialogPanel class="relative w-full flex flex-col overflow-hidden rounded-xl bg-white text-left shadow-xl lg:my-8 lg:max-w-lg dark:bg-stone-8">
               <div flex="~ items-center justify-between" px-4 py-3 border-b="~ solid stone/15" text-6>
                 <DialogTitle m-0 text-lg text-dark dark:text-white>
                   {{ title }}

src/store/modules/settings.ts

@@ -79,7 +79,7 @@ const useSettingsStore = defineStore(
         }
         else {
           // 如果是桌面设备，则根据页面宽度判断是否需要切换为移动端展示
-          mode.value = width < 992 ? 'mobile' : 'pc'
+          mode.value = width < 1024 ? 'mobile' : 'pc'
         }
       }
       else {