mirror of
https://github.com/imdap/ruoyi-plus-vben5.git
synced 2026-05-11 13:22:09 +08:00
refactor: migrate spacing utilities to tailwind v4 syntax
This commit is contained in:
@@ -101,7 +101,7 @@ onMounted(() => {
|
||||
<div>
|
||||
<Modal
|
||||
:fullscreen-button="false"
|
||||
class="w-[600px]"
|
||||
class="w-150"
|
||||
header-class="py-2 border-b"
|
||||
>
|
||||
<template #title>
|
||||
|
||||
@@ -223,7 +223,7 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<VbenScrollbar>
|
||||
<div class="flex! h-full justify-center px-2 sm:max-h-[450px]">
|
||||
<div class="flex! h-full justify-center px-2 sm:max-h-112.5">
|
||||
<!-- 无搜索结果 -->
|
||||
<div
|
||||
v-if="keyword && searchResults.length === 0"
|
||||
|
||||
@@ -103,7 +103,7 @@ useScrollLock();
|
||||
<div class="flex-center size-full">
|
||||
<div class="flex w-full justify-center gap-4 px-4 sm:gap-6 md:gap-8">
|
||||
<div
|
||||
class="relative flex-center h-[140px] w-[140px] rounded-xl bg-accent text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
|
||||
class="relative flex-center h-35 w-35 rounded-xl bg-accent text-[36px] sm:h-40 sm:w-40 sm:text-[42px] md:h-50 md:w-50 md:text-[72px]"
|
||||
>
|
||||
<span
|
||||
class="absolute top-3 left-3 text-xs font-semibold sm:text-sm md:text-xl"
|
||||
@@ -113,7 +113,7 @@ useScrollLock();
|
||||
{{ hour }}
|
||||
</div>
|
||||
<div
|
||||
class="flex-center h-[140px] w-[140px] rounded-xl bg-accent text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
|
||||
class="flex-center h-35 w-35 rounded-xl bg-accent text-[36px] sm:h-40 sm:w-40 sm:text-[42px] md:h-50 md:w-50 md:text-[72px]"
|
||||
>
|
||||
{{ minute }}
|
||||
</div>
|
||||
@@ -128,7 +128,7 @@ useScrollLock();
|
||||
class="flex-center size-full"
|
||||
@keydown.enter.prevent="handleSubmit"
|
||||
>
|
||||
<div class="mb-10 flex-col-center w-[90%] max-w-[300px] px-4">
|
||||
<div class="mb-10 flex-col-center w-[90%] max-w-75 px-4">
|
||||
<VbenAvatar :src="avatar" class="enter-x mb-6 size-20" />
|
||||
<div class="enter-x mb-2 w-full items-center">
|
||||
<Form />
|
||||
|
||||
@@ -89,7 +89,7 @@ function navigateTo(
|
||||
<template>
|
||||
<VbenPopover
|
||||
v-model:open="open"
|
||||
content-class="relative right-2 w-[360px] p-0"
|
||||
content-class="relative right-2 w-90 p-0"
|
||||
>
|
||||
<template #trigger>
|
||||
<div class="mr-2 flex-center h-full" @click.stop="toggle()">
|
||||
@@ -115,7 +115,7 @@ function navigateTo(
|
||||
</VbenIconButton>
|
||||
</div>
|
||||
<VbenScrollbar v-if="notifications.length > 0">
|
||||
<ul class="flex! max-h-[360px] w-full flex-col">
|
||||
<ul class="flex! max-h-90 w-full flex-col">
|
||||
<template v-for="item in notifications" :key="item.id ?? item.title">
|
||||
<li
|
||||
class="relative flex w-full cursor-pointer items-start gap-5 border-t border-border p-3 hover:bg-accent"
|
||||
@@ -173,7 +173,7 @@ function navigateTo(
|
||||
</VbenScrollbar>
|
||||
|
||||
<template v-else>
|
||||
<div class="flex-center min-h-[150px] w-full text-muted-foreground">
|
||||
<div class="flex-center min-h-37.5 w-full text-muted-foreground">
|
||||
{{ $t('common.noData') }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -53,7 +53,7 @@ const slots = useSlots();
|
||||
</span>
|
||||
<VbenCheckButtonGroup
|
||||
v-model="inputValue"
|
||||
class="h-8 w-[165px]"
|
||||
class="h-8 w-41.25"
|
||||
:options="items"
|
||||
:disabled="disabled"
|
||||
:multiple="multiple"
|
||||
|
||||
@@ -50,7 +50,7 @@ const slots = useSlots();
|
||||
<div class="relative">
|
||||
<Input
|
||||
v-model="inputValue"
|
||||
class="h-8 w-[165px]"
|
||||
class="h-8 w-41.25"
|
||||
:placeholder="placeholder"
|
||||
/>
|
||||
<CircleX
|
||||
|
||||
@@ -38,7 +38,7 @@ function activeClass(theme: string): string[] {
|
||||
<div class="flex w-full gap-5">
|
||||
<template v-for="theme in PRESET" :key="theme.name">
|
||||
<div
|
||||
class="flex w-[100px] cursor-pointer flex-col"
|
||||
class="flex w-25 cursor-pointer flex-col"
|
||||
@click="modelValue = theme.type"
|
||||
>
|
||||
<div :class="activeClass(theme.type)" class="outline-box flex-center">
|
||||
|
||||
@@ -89,7 +89,7 @@ function activeClass(theme: string): string[] {
|
||||
<div class="flex w-full flex-wrap gap-5">
|
||||
<template v-for="theme in PRESET" :key="theme.name">
|
||||
<div
|
||||
class="flex w-[100px] cursor-pointer flex-col"
|
||||
class="flex w-25 cursor-pointer flex-col"
|
||||
@click="modelValue = theme.type"
|
||||
>
|
||||
<div :class="activeClass(theme.type)" class="outline-box flex-center">
|
||||
|
||||
@@ -63,7 +63,7 @@ const slots = useSlots();
|
||||
</VbenTooltip>
|
||||
</span>
|
||||
|
||||
<NumberField v-model="inputValue" v-bind="$attrs" class="w-[165px]">
|
||||
<NumberField v-model="inputValue" v-bind="$attrs" class="w-41.25">
|
||||
<NumberFieldContent>
|
||||
<NumberFieldDecrement />
|
||||
<NumberFieldInput />
|
||||
|
||||
@@ -55,7 +55,7 @@ const slots = useSlots();
|
||||
</VbenTooltip>
|
||||
</span>
|
||||
<Select v-model="selectValue">
|
||||
<SelectTrigger class="h-8 w-[165px]">
|
||||
<SelectTrigger class="h-8 w-41.25">
|
||||
<SelectValue :placeholder="placeholder" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
|
||||
@@ -203,7 +203,7 @@ if (enableShortcutKey.value) {
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent class="mr-2 min-w-[240px] p-0 pb-1">
|
||||
<DropdownMenuContent class="mr-2 min-w-60 p-0 pb-1">
|
||||
<div ref="refContent">
|
||||
<DropdownMenuLabel class="flex items-center p-3">
|
||||
<VbenAvatar
|
||||
|
||||
Reference in New Issue
Block a user