fix: 模型库页面优化
This commit is contained in:
Gsh
@@ -294,24 +294,44 @@ onMounted(() => {
|
|||||||
<span v-for="i in 8" :key="`particle-${i}`" class="particle" />
|
<span v-for="i in 8" :key="`particle-${i}`" class="particle" />
|
||||||
</div>
|
</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">
|
<div class="monitor-content">
|
||||||
<!-- 左侧：3D 旋转立方体 + 脉冲圆环 -->
|
<!-- 左侧：AI神经网络节点 + 脉冲圆环 -->
|
||||||
<div class="monitor-visual">
|
<div class="monitor-visual">
|
||||||
<div class="pulse-rings">
|
<div class="pulse-rings">
|
||||||
<div class="pulse-ring" />
|
<div class="pulse-ring" />
|
||||||
<div class="pulse-ring" />
|
<div class="pulse-ring" />
|
||||||
<div class="pulse-ring" />
|
<div class="pulse-ring" />
|
||||||
</div>
|
</div>
|
||||||
<div class="cube-container">
|
|
||||||
<div class="cube">
|
<!-- AI神经网络节点 -->
|
||||||
<div class="cube-face front" />
|
<div class="ai-network">
|
||||||
<div class="cube-face back" />
|
<!-- 中心节点 -->
|
||||||
<div class="cube-face left" />
|
<div class="center-node">
|
||||||
<div class="cube-face right" />
|
<div class="node-core" />
|
||||||
<div class="cube-face top" />
|
</div>
|
||||||
<div class="cube-face bottom" />
|
|
||||||
|
<!-- 外围节点 -->
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="status-dot">
|
<div class="status-dot">
|
||||||
<span class="dot-core" />
|
<span class="dot-core" />
|
||||||
</div>
|
</div>
|
||||||
@@ -772,8 +792,9 @@ onMounted(() => {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cube {
|
.click-hint {
|
||||||
animation: cubeRotate 3s linear infinite;
|
opacity: 0;
|
||||||
|
transform: translate(-50%, -50%) scale(0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.scan-line {
|
.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 {
|
.grid-background {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -921,53 +979,97 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3D立方体容器
|
// AI神经网络
|
||||||
.cube-container {
|
.ai-network {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 40px;
|
width: 60px;
|
||||||
height: 40px;
|
height: 60px;
|
||||||
perspective: 200px;
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
animation: networkRotate 8s linear infinite;
|
||||||
|
|
||||||
// 3D立方体
|
// 中心节点
|
||||||
.cube {
|
.center-node {
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
transform: rotateX(-20deg) rotateY(-20deg);
|
|
||||||
|
|
||||||
.cube-face {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 40px;
|
top: 50%;
|
||||||
height: 40px;
|
left: 50%;
|
||||||
background: rgba(103, 194, 58, 0.2);
|
transform: translate(-50%, -50%);
|
||||||
border: 1px solid rgba(103, 194, 58, 0.6);
|
width: 16px;
|
||||||
backdrop-filter: blur(5px);
|
height: 16px;
|
||||||
|
|
||||||
&.front {
|
.node-core {
|
||||||
transform: translateZ(20px);
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.back {
|
// 外围节点
|
||||||
transform: translateZ(-20px) rotateY(180deg);
|
.outer-nodes {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
.data-particle {
|
||||||
transform: translateX(20px) rotateY(90deg);
|
position: absolute;
|
||||||
}
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
&.top {
|
width: 3px;
|
||||||
transform: translateY(-20px) rotateX(90deg);
|
height: 3px;
|
||||||
}
|
background: #409eff;
|
||||||
|
border-radius: 50%;
|
||||||
&.bottom {
|
box-shadow: 0 0 6px rgba(64, 158, 255, 0.8);
|
||||||
transform: translateY(20px) rotateX(-90deg);
|
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 {
|
@keyframes pulseRing {
|
||||||
0% {
|
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 {
|
@keyframes statusDotPulse {
|
||||||
0%, 100% {
|
0%, 100% {
|
||||||
@@ -1901,4 +2051,46 @@ onMounted(() => {
|
|||||||
transform: scaleY(1.3);
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user