style(ArcticNewOneCursor): 重构光标组件样式并添加混合模式容器
将光标元素包裹在混合模式容器中,调整层级和定位方式 优化z-index值,移除重复的混合模式属性
This commit is contained in:
@@ -257,9 +257,11 @@ onBeforeUnmount(() => {
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div aria-hidden="true">
|
||||
<div ref="dotRef" class="custom-cursor-dot" />
|
||||
<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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user