审核管理-详情-复制按钮样式
This commit is contained in:
parent
c86db8b08f
commit
1588f688eb
|
|
@ -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;
|
||||
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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue