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

This commit is contained in:
Hooray Hu
2024-03-28 09:22:35 +08:00
parent e9d7970f9f
commit 5b85bdd953
5 changed files with 18 additions and 18 deletions
+4 -4
View File
@@ -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(() => {
@@ -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">
全局
+6 -6
View File
@@ -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" />
+6 -6
View File
@@ -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 }}
+1 -1
View File
@@ -79,7 +79,7 @@ const useSettingsStore = defineStore(
}
else {
// 如果是桌面设备,则根据页面宽度判断是否需要切换为移动端展示
mode.value = width < 992 ? 'mobile' : 'pc'
mode.value = width < 1024 ? 'mobile' : 'pc'
}
}
else {