style(ArcticNewOneCursor): 重构光标组件样式并添加混合模式容器
将光标元素包裹在混合模式容器中,调整层级和定位方式 优化z-index值,移除重复的混合模式属性
This commit is contained in:
@@ -257,9 +257,11 @@ onBeforeUnmount(() => {
|
|||||||
<template>
|
<template>
|
||||||
<Teleport to="body">
|
<Teleport to="body">
|
||||||
<div aria-hidden="true">
|
<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="horizontalLineRef" class="custom-cursor-line custom-cursor-line-x" />
|
||||||
<div ref="verticalLineRef" class="custom-cursor-line custom-cursor-line-y" />
|
<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="pillRef" class="custom-cursor-pill">
|
||||||
<div ref="pillTextRef" class="custom-cursor-pill-text">Read more</div>
|
<div ref="pillTextRef" class="custom-cursor-pill-text">Read more</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -268,6 +270,17 @@ onBeforeUnmount(() => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<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-dot,
|
||||||
.custom-cursor-line,
|
.custom-cursor-line,
|
||||||
.custom-cursor-pill,
|
.custom-cursor-pill,
|
||||||
@@ -278,15 +291,14 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
.custom-cursor-dot,
|
.custom-cursor-dot,
|
||||||
.custom-cursor-line {
|
.custom-cursor-line {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
mix-blend-mode: difference;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-cursor-dot {
|
.custom-cursor-dot {
|
||||||
z-index: 2147483647;
|
z-index: 2;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
@@ -294,7 +306,7 @@ onBeforeUnmount(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.custom-cursor-line {
|
.custom-cursor-line {
|
||||||
z-index: 2147483646;
|
z-index: 1;
|
||||||
background: #888;
|
background: #888;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user