style(ArcticNewOneCursor): 重构光标组件样式并添加混合模式容器

将光标元素包裹在混合模式容器中,调整层级和定位方式
优化z-index值,移除重复的混合模式属性
This commit is contained in:
2026-04-26 22:46:12 +08:00
parent c1da2963d2
commit 4d4f5caaa5
+19 -7
View File
@@ -257,9 +257,11 @@ onBeforeUnmount(() => {
<template>
<Teleport to="body">
<div aria-hidden="true">
<div ref="dotRef" class="custom-cursor-dot" />
<div ref="horizontalLineRef" class="custom-cursor-line custom-cursor-line-x" />
<div ref="verticalLineRef" class="custom-cursor-line custom-cursor-line-y" />
<div class="custom-cursor-blend-group">
<div ref="horizontalLineRef" class="custom-cursor-line custom-cursor-line-x" />
<div ref="verticalLineRef" class="custom-cursor-line custom-cursor-line-y" />
<div ref="dotRef" class="custom-cursor-dot" />
</div>
<div ref="pillRef" class="custom-cursor-pill">
<div ref="pillTextRef" class="custom-cursor-pill-text">Read more</div>
</div>
@@ -268,6 +270,17 @@ onBeforeUnmount(() => {
</template>
<style scoped>
.custom-cursor-blend-group {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2147483646;
mix-blend-mode: difference;
}
.custom-cursor-dot,
.custom-cursor-line,
.custom-cursor-pill,
@@ -278,15 +291,14 @@ onBeforeUnmount(() => {
.custom-cursor-dot,
.custom-cursor-line {
position: fixed;
position: absolute;
left: 0;
top: 0;
pointer-events: none;
mix-blend-mode: difference;
}
.custom-cursor-dot {
z-index: 2147483647;
z-index: 2;
width: 24px;
height: 24px;
border-radius: 999px;
@@ -294,7 +306,7 @@ onBeforeUnmount(() => {
}
.custom-cursor-line {
z-index: 2147483646;
z-index: 1;
background: #888;
}