|
|
@@ -183,8 +183,9 @@
|
|
|
<div
|
|
|
class="item-icon"
|
|
|
:style="{
|
|
|
- backgroundColor: getIconTheme(item).softColor,
|
|
|
- border: '1px solid ' + getIconTheme(item).softColor,
|
|
|
+ // 将主题色作为渐变的主色调传入，或者直接在这里写死渐变逻辑
|
|
|
+ '--theme-color': getIconTheme(item).color,
|
|
|
+ '--theme-soft': getIconTheme(item).softColor,
|
|
|
}"
|
|
|
>
|
|
|
<Icon
|
|
|
@@ -192,13 +193,6 @@
|
|
|
:color="getIconTheme(item).color"
|
|
|
/>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- <div class="absolute w-5 right-0">
|
|
|
- <span
|
|
|
- class="text-[10px] font-bold text-[#869ac2] uppercase tracking-widest group-hover:text-blue-200"
|
|
|
- >{{ item.type }}</span
|
|
|
- >
|
|
|
- </div> -->
|
|
|
</div>
|
|
|
<div class="item-body">
|
|
|
<h3 class="item-name font-bold text-white/90">
|
|
|
@@ -1217,22 +1211,41 @@ onBeforeUnmount(() => {
|
|
|
display: grid;
|
|
|
place-items: center;
|
|
|
font-size: 20px;
|
|
|
+
|
|
|
+ /* --- 新增：毛玻璃渐变效果 --- */
|
|
|
+ background: linear-gradient(
|
|
|
+ 135deg,
|
|
|
+ rgba(255, 255, 255, 0.1) 0%,
|
|
|
+ rgba(255, 255, 255, 0.02) 100%
|
|
|
+ );
|
|
|
+
|
|
|
+ /* 2. 边框：增加一个极细的半透明白色边框，增强玻璃边缘感 */
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
+
|
|
|
+ /* 3. 毛玻璃核心属性：模糊背景元素 */
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ -webkit-backdrop-filter: blur(10px);
|
|
|
+
|
|
|
+ /* 4. 阴影：增加一点内阴影和外阴影，提升立体感 */
|
|
|
+ box-shadow:
|
|
|
+ inset 0 0 0 1px rgba(255, 255, 255, 0.1),
|
|
|
+ 0 0 12px var(--theme-soft); /* 这里用主题色做外发光 */
|
|
|
+
|
|
|
+ /* 原有过渡效果 */
|
|
|
transition:
|
|
|
transform 0.2s ease,
|
|
|
background-color 0.2s ease,
|
|
|
- box-shadow 0.2s ease;
|
|
|
-}
|
|
|
-
|
|
|
-.item-icon :deep(svg) {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- transition: color 0.2s ease;
|
|
|
+ box-shadow 0.2s ease,
|
|
|
+ border-color 0.2s ease;
|
|
|
}
|
|
|
|
|
|
+/* 保持原有的 Hover 效果，但需要适配新的玻璃风格 */
|
|
|
.item-card:hover .item-icon {
|
|
|
- background: var(--item-accent) !important;
|
|
|
+ /* Hover 时：背景变为实心主题色，或者更亮的玻璃效果 */
|
|
|
+ background: var(--theme-color);
|
|
|
+ border-color: transparent;
|
|
|
transform: translateY(-2px);
|
|
|
- box-shadow: 0 10px 20px -12px var(--item-accent);
|
|
|
+ box-shadow: 0 10px 20px -12px var(--theme-color);
|
|
|
}
|
|
|
|
|
|
.item-card:hover .item-icon :deep(svg) {
|
