From 1588f688ebf9adb25b9404791887e5bf41deba9f Mon Sep 17 00:00:00 2001 From: "1378012178@qq.com" <1378012178@qq.com> Date: Fri, 27 Feb 2026 11:06:53 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=A1=E6=A0=B8=E7=AE=A1=E7=90=86-=E8=AF=A6?= =?UTF-8?q?=E6=83=85-=E5=A4=8D=E5=88=B6=E6=8C=89=E9=92=AE=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/OrgApplyInfoForm.vue | 77 ++++++++++++++++++- 1 file changed, 74 insertions(+), 3 deletions(-) diff --git a/src/views/admin/orgapplyinfo/components/OrgApplyInfoForm.vue b/src/views/admin/orgapplyinfo/components/OrgApplyInfoForm.vue index 0892da0..7de5028 100644 --- a/src/views/admin/orgapplyinfo/components/OrgApplyInfoForm.vue +++ b/src/views/admin/orgapplyinfo/components/OrgApplyInfoForm.vue @@ -605,11 +605,82 @@ defineExpose({ margin-bottom: 14px; } + +/* 1. 基础样式:包含定位和裁剪,防止布局错乱 */ .aclk { - background: #1ea0fa; - padding: 5px 10px; + background: linear-gradient(to right, #1ea0fa, #017de9); + padding: 4px 15px; border-radius: 8px; - color:#fff !important; + font-size: 14px; + height: 32px; + color: #fff !important; + + /* 【关键修复】建立定位上下文,防止伪元素错位导致上方空白 */ + position: relative; + + /* 【关键修复】隐藏溢出部分,防止动画撑大组件宽度 */ + overflow: hidden; + + /* 确保显示模式正确,避免行高问题 */ + display: inline-block; + line-height: 24px; /* 根据高度微调,让文字垂直居中 */ + text-decoration: none; + border: none; + cursor: pointer; + + /* 可选:防止点击时的默认高亮背景干扰 */ + -webkit-tap-highlight-color: transparent; +} + +/* 2. 伪元素:定义那道白光 */ +.aclk::before { + content: ''; + position: absolute; + top: 0; + left: -100%; /* 初始状态:藏在按钮左侧外面 */ + + /* 光带宽度:设为 50%~100% 均可,这里用 100% 配合动画终点 */ + width: 100%; + height: 100%; + + /* 渐变效果:中间亮,两头透明 */ + background: linear-gradient( + 90deg, + transparent 0%, + rgba(255, 255, 255, 0.4) 50%, + transparent 100% + ); + + /* 倾斜角度:-25deg 会让光看起来更有速度感,如果不想要倾斜改为 0deg */ + transform: skewX(0deg); + + /* 确保光在文字下面,虽然背景是透明的,但这是个好习惯 */ + z-index: 1; + + /* 初始不执行动画,等待 hover */ +} + +/* 3. 悬停触发:执行动画 */ +.aclk:hover::before { + animation: light-sweep 1.3s ease-in-out forwards; +} + +/* 4. 关键帧定义 */ +@keyframes light-sweep { + 0% { + left: -100%; /* 从左边外开始 */ + } + 100% { + /* + 逻辑: + 按钮宽度是 100%。 + 光带宽度也是 100%。 + 要让光带完全移出右侧边界,left 需要移动到 200% 的位置。 + 这样光带的左边缘(200%) + 光带宽(100%) = 300%,完全在右边外面了。 + 即使只设 150% 也能大部分移出,200% 最稳妥。 + */ + left: 200%; + } } .noDisabled {