fix: 模型库页面优化
This commit is contained in:
Gsh
@@ -294,24 +294,44 @@ onMounted(() => {
|
||||
<span v-for="i in 8" :key="`particle-${i}`" class="particle" />
|
||||
</div>
|
||||
|
||||
<!-- 点击引导手势 -->
|
||||
<div class="click-hint">
|
||||
<svg class="hand-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 11V6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6V11M9 11V16.5C9 17.8807 10.1193 19 11.5 19H12.5C13.8807 19 15 17.8807 15 16.5V11M9 11H7.5C6.67157 11 6 11.6716 6 12.5C6 13.3284 6.67157 14 7.5 14H9M15 11V8C15 7.44772 15.4477 7 16 7C16.5523 7 17 7.44772 17 8V11M15 11H17.5C18.3284 11 19 11.6716 19 12.5C19 13.3284 18.3284 14 17.5 14H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="hint-text">点击查看</span>
|
||||
</div>
|
||||
|
||||
<div class="monitor-content">
|
||||
<!-- 左侧：3D 旋转立方体 + 脉冲圆环 -->
|
||||
<!-- 左侧：AI神经网络节点 + 脉冲圆环 -->
|
||||
<div class="monitor-visual">
|
||||
<div class="pulse-rings">
|
||||
<div class="pulse-ring" />
|
||||
<div class="pulse-ring" />
|
||||
<div class="pulse-ring" />
|
||||
</div>
|
||||
<div class="cube-container">
|
||||
<div class="cube">
|
||||
<div class="cube-face front" />
|
||||
<div class="cube-face back" />
|
||||
<div class="cube-face left" />
|
||||
<div class="cube-face right" />
|
||||
<div class="cube-face top" />
|
||||
<div class="cube-face bottom" />
|
||||
|
||||
<!-- AI神经网络节点 -->
|
||||
<div class="ai-network">
|
||||
<!-- 中心节点 -->
|
||||
<div class="center-node">
|
||||
<div class="node-core" />
|
||||
</div>
|
||||
|
||||
<!-- 外围节点 -->
|
||||
<div class="outer-nodes">
|
||||
<div v-for="i in 6" :key="`node-${i}`" class="outer-node" :style="{ transform: `rotate(${(i - 1) * 60}deg) translateY(-25px)` }">
|
||||
<div class="node-dot" />
|
||||
<div class="connection-line" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据流动粒子 -->
|
||||
<div class="data-particles">
|
||||
<span v-for="i in 6" :key="`data-${i}`" class="data-particle" :style="{ animationDelay: `${(i - 1) * 0.3}s` }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-dot">
|
||||
<span class="dot-core" />
|
||||
</div>
|
||||
@@ -772,8 +792,9 @@ onMounted(() => {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cube {
|
||||
animation: cubeRotate 3s linear infinite;
|
||||
.click-hint {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0.8);
|
||||
}
|
||||
|
||||
.scan-line {
|
||||
@@ -789,6 +810,43 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
// 点击引导
|
||||
.click-hint {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
opacity: 1;
|
||||
transition: all 0.3s;
|
||||
animation: clickHintFloat 2s ease-in-out infinite;
|
||||
|
||||
.hand-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
|
||||
animation: handClick 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: rgba(103, 194, 58, 0.3);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(103, 194, 58, 0.5);
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// 动态网格背景
|
||||
.grid-background {
|
||||
position: absolute;
|
||||
@@ -921,53 +979,97 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
// 3D立方体容器
|
||||
.cube-container {
|
||||
// AI神经网络
|
||||
.ai-network {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
perspective: 200px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
z-index: 2;
|
||||
}
|
||||
animation: networkRotate 8s linear infinite;
|
||||
|
||||
// 3D立方体
|
||||
.cube {
|
||||
// 中心节点
|
||||
.center-node {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
.node-core {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(-20deg) rotateY(-20deg);
|
||||
background: linear-gradient(135deg, #67c23a, #409eff);
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
0 0 15px rgba(103, 194, 58, 0.8),
|
||||
0 0 30px rgba(64, 158, 255, 0.4),
|
||||
inset 0 0 8px rgba(255, 255, 255, 0.3);
|
||||
animation: centerNodePulse 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.cube-face {
|
||||
// 外围节点
|
||||
.outer-nodes {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(103, 194, 58, 0.2);
|
||||
border: 1px solid rgba(103, 194, 58, 0.6);
|
||||
backdrop-filter: blur(5px);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
&.front {
|
||||
transform: translateZ(20px);
|
||||
.outer-node {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: center;
|
||||
|
||||
.node-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: rgba(103, 194, 58, 0.8);
|
||||
border: 1px solid rgba(103, 194, 58, 1);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 8px rgba(103, 194, 58, 0.6);
|
||||
animation: outerNodeBlink 2s ease-in-out infinite;
|
||||
animation-delay: inherit;
|
||||
}
|
||||
|
||||
&.back {
|
||||
transform: translateZ(-20px) rotateY(180deg);
|
||||
.connection-line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background: linear-gradient(to top,
|
||||
rgba(103, 194, 58, 0.6),
|
||||
transparent);
|
||||
transform: translateX(-50%);
|
||||
animation: connectionPulse 2s ease-in-out infinite;
|
||||
animation-delay: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
transform: translateX(-20px) rotateY(-90deg);
|
||||
}
|
||||
// 数据流动粒子
|
||||
.data-particles {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
&.right {
|
||||
transform: translateX(20px) rotateY(90deg);
|
||||
}
|
||||
|
||||
&.top {
|
||||
transform: translateY(-20px) rotateX(90deg);
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
transform: translateY(20px) rotateX(-90deg);
|
||||
.data-particle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: #409eff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 6px rgba(64, 158, 255, 0.8);
|
||||
animation: dataParticleMove 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1846,6 +1948,26 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
// 点击引导浮动
|
||||
@keyframes clickHintFloat {
|
||||
0%, 100% {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -55%);
|
||||
}
|
||||
}
|
||||
|
||||
// 手势点击动画
|
||||
@keyframes handClick {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
// 脉冲圆环
|
||||
@keyframes pulseRing {
|
||||
0% {
|
||||
@@ -1868,6 +1990,34 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
// AI神经网络旋转
|
||||
@keyframes networkRotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 中心节点脉冲
|
||||
@keyframes centerNodePulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
box-shadow:
|
||||
0 0 15px rgba(103, 194, 58, 0.8),
|
||||
0 0 30px rgba(64, 158, 255, 0.4),
|
||||
inset 0 0 8px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
box-shadow:
|
||||
0 0 25px rgba(103, 194, 58, 1),
|
||||
0 0 50px rgba(64, 158, 255, 0.6),
|
||||
inset 0 0 12px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// 状态点脉冲
|
||||
@keyframes statusDotPulse {
|
||||
0%, 100% {
|
||||
@@ -1901,4 +2051,46 @@ onMounted(() => {
|
||||
transform: scaleY(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
// 外围节点闪烁
|
||||
@keyframes outerNodeBlink {
|
||||
0%, 100% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
// 连接线脉冲
|
||||
@keyframes connectionPulse {
|
||||
0%, 100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 数据粒子移动
|
||||
@keyframes dataParticleMove {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) translateY(0) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) translateY(-5px) scale(1);
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) translateY(-20px) scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) translateY(-25px) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user