style(carousel): 优化首屏轮播图切换按钮交互与贴边排版,杜绝文字遮挡
这个提交包含在:
@@ -412,13 +412,13 @@ img {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 轮播图左右悬浮控制按钮 (高定毛玻璃气泡) */
|
/* 轮播图左右悬浮控制按钮 (优雅悬停显现,不遮挡正文) */
|
||||||
.nhc-carousel-nav {
|
.nhc-carousel-nav {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
width: 52px;
|
width: 48px;
|
||||||
height: 52px;
|
height: 48px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: rgba(255, 255, 255, 0.92);
|
background: rgba(255, 255, 255, 0.92);
|
||||||
backdrop-filter: blur(12px);
|
backdrop-filter: blur(12px);
|
||||||
@@ -432,21 +432,29 @@ img {
|
|||||||
z-index: 10;
|
z-index: 10;
|
||||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
|
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nhc-carousel:hover .nhc-carousel-nav {
|
||||||
|
opacity: 0.85;
|
||||||
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nhc-carousel-prev {
|
.nhc-carousel-prev {
|
||||||
left: 36px;
|
left: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nhc-carousel-next {
|
.nhc-carousel-next {
|
||||||
right: 36px;
|
right: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nhc-carousel-nav:hover {
|
.nhc-carousel-nav:hover {
|
||||||
|
opacity: 1 !important;
|
||||||
background: var(--primary);
|
background: var(--primary);
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
border-color: var(--primary);
|
border-color: var(--primary);
|
||||||
transform: translateY(-50%) scale(1.1);
|
transform: translateY(-50%) scale(1.08);
|
||||||
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
|
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
在新工单中引用
屏蔽一个用户