| | |
|---|
| | | <template> |
|---|
| | | <div class="panel-header"> |
|---|
| | | <span class="header-dot"></span> |
|---|
| | | <span class="panel-title">{{ title }}</span> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | |
|---|
| | | background-size: 100% 100%; |
|---|
| | | background-position: center; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .header-dot { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | background: linear-gradient(135deg, #4ee4ff 0%, #217aff 100%); |
|---|
| | | clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); |
|---|
| | | animation: dotPulse 2s ease-in-out infinite; |
|---|
| | | margin-left: 32px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes dotPulse { |
|---|
| | | 0%, 100% { opacity: 0.8; transform: scale(1); } |
|---|
| | | 50% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 10px rgba(78, 228, 255, 0.5); } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .panel-title { |
|---|
| | |
|---|
| | | font-weight: 500; |
|---|
| | | font-size: 16px; |
|---|
| | | color: #D9ECFF; |
|---|
| | | padding-left: 46px; |
|---|
| | | padding-left: 10px; |
|---|
| | | line-height: 36px; |
|---|
| | | animation: titleShimmer 3s ease-in-out infinite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes titleShimmer { |
|---|
| | | 0%, 100% { opacity: 1; } |
|---|
| | | 50% { opacity: 0.85; } |
|---|
| | | } |
|---|
| | | </style> |
|---|
