mirror of
https://github.com/fantastic-admin/basic.git
synced 2026-10-07 13:17:52 +08:00
页面宽度判断移动端设备从992调整为1024
This commit is contained in:
@@ -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">
|
||||
全局
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -79,7 +79,7 @@ const useSettingsStore = defineStore(
|
||||
}
|
||||
else {
|
||||
// 如果是桌面设备,则根据页面宽度判断是否需要切换为移动端展示
|
||||
mode.value = width < 992 ? 'mobile' : 'pc'
|
||||
mode.value = width < 1024 ? 'mobile' : 'pc'
|
||||
}
|
||||
}
|
||||
else {
|
||||
|
||||
Reference in New Issue
Block a user