public/ruoyi-plus-vben5
1
0
Fork 0
mirror of https://gitee.com/dapppp/ruoyi-plus-vben5.git synced 2026-03-26 07:24:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(authentication): 使用 SpaceCompact 重构验证码输入组件布局

Browse Source 
移除自定义的输入框圆角样式，改用 SpaceCompact 组件实现更一致的布局
This commit is contained in:
dap
2026-01-14 21:41:40 +08:00
parent 32d395fbab
commit 64ecf47310
1 changed files with 17 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
apps/web-antd/src/views/_core/authentication/input-captcha.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { Input } from 'antdv-next'; import { Input, SpaceCompact } from 'antdv-next';
interface Props { interface Props {
captcha?: string; captcha?: string;
@@ -22,8 +22,8 @@ const modelValue = defineModel<string>({ default: '' });
<!-- 图片验证码 --> <!-- 图片验证码 -->
<template> <template>
<div class="flex w-full"> <div class="w-full flex-1">
<div class="flex-1"> <SpaceCompact class="w-full">
<Input <Input
size="large" size="large"
id="code" id="code"
@@ -36,21 +36,21 @@ const modelValue = defineModel<string>({ default: '' });
:label="label" :label="label"
:placeholder="placeholder" :placeholder="placeholder"
/> />
</div> <div class="relative rounded-r-lg border">
<div class="captcha-image--container relative"> <img
<img :src="captcha"
:src="captcha" class="h-[40px] w-[115px] cursor-pointer rounded-r-lg"
class="h-[40px] w-[115px] cursor-pointer rounded-r-lg" :class="{ 'pointer-events-none': loading }"
:class="{ 'pointer-events-none': loading }" @click="$emit('captchaClick')"
@click="$emit('captchaClick')" />
/> <div
<div v-if="loading"
v-if="loading" class="absolute inset-0 flex cursor-not-allowed items-center justify-center rounded-r-lg bg-black/30"
class="absolute inset-0 flex cursor-not-allowed items-center justify-center rounded-r-lg bg-black/30" >
> <span class="captcha-loading"></span>
<span class="captcha-loading"></span> </div>
</div> </div>
</div> </SpaceCompact>
</div> </div>
</template> </template>
@@ -75,13 +75,4 @@ const modelValue = defineModel<string>({ default: '' });
border-radius: 50%; border-radius: 50%;
animation: loading-rotation 1s linear infinite; animation: loading-rotation 1s linear infinite;
} }
/**
验证码输入框样式
去除右边的圆角
*/
input[id='code'] {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style> </style>