| | |
| | | <template> |
| | | <div class="panel-header"> |
| | | <span class="panel-title">{{ title }}</span> |
| | | <span v-if="$slots.extra" class="panel-extra"> |
| | | <slot name="extra"></slot> |
| | | </span> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | background-size: 100% 100%; |
| | | background-position: center; |
| | | background-repeat: no-repeat; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | position: relative; |
| | | } |
| | | |
| | | /* 标题装饰动画 */ |
| | | .panel-header::before { |
| | | content: ''; |
| | | position: absolute; |
| | | left: 20px; |
| | | top: 50%; |
| | | transform: translateY(-50%); |
| | | width: 8px; |
| | | height: 8px; |
| | | background: #00d4ff; |
| | | border-radius: 50%; |
| | | animation: dotPulse 2s ease-in-out infinite; |
| | | box-shadow: 0 0 10px rgba(0, 212, 255, 0.6); |
| | | } |
| | | |
| | | @keyframes dotPulse { |
| | | 0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(1); } |
| | | 50% { opacity: 1; transform: translateY(-50%) scale(1.2); } |
| | | } |
| | | |
| | | .panel-title { |
| | | width: 100%; |
| | | font-weight: 500; |
| | | font-size: 16px; |
| | | color: #D9ECFF; |
| | | padding-left: 46px; |
| | | line-height: 36px; |
| | | position: relative; |
| | | text-shadow: 0 0 10px rgba(0, 212, 255, 0.3); |
| | | } |
| | | |
| | | .panel-extra { |
| | | padding-right: 10px; |
| | | line-height: 36px; |
| | | } |
| | | </style> |