mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-03-26 02:24:31 +08:00
refactor(authentication): 使用 SpaceCompact 重构验证码输入组件布局
移除自定义的输入框圆角样式,改用 SpaceCompact 组件实现更一致的布局
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user