diff --git a/clientarea/hgcloud/components/topMenu/topMenu.js b/clientarea/hgcloud/components/topMenu/topMenu.js index ca6547f..6c6fdf9 100644 --- a/clientarea/hgcloud/components/topMenu/topMenu.js +++ b/clientarea/hgcloud/components/topMenu/topMenu.js @@ -88,6 +88,28 @@ const topMenu = { + +
+
+ + +
+
@@ -237,6 +259,14 @@ const topMenu = { host: lang.finance_info, finance: lang.finance_text123, }, + announcements: [ + { text: '欢迎使用黑果云服务器管理面板', tag: '欢迎', tagColor: 'blue' }, + { text: '新用户注册即赠Ⅵ100体验金', tag: '活动', tagColor: 'green', url: '/finance.htm' }, + { text: '香港 CN2 GIA 高速节点放量中', tag: '上新', tagColor: 'orange', url: '/productList.htm' }, + ], + announceIndex: 0, + announceTimer: null, + announceTransition: 'announce-flip', predefineColors: [ "#ff4500", "#ff8c00", @@ -302,6 +332,7 @@ const topMenu = { this.doGetMenu(); this.getCartList(); this.getCommonSetting(); + this.startAnnounceTicker(); }, mounted () { // 不生效 @@ -438,6 +469,23 @@ const topMenu = { } } }, + // 公告翻转定时器 + startAnnounceTicker () { + if (this.announcements.length > 1) { + this.announceTimer = setInterval(() => { + this.nextAnnounce(); + }, 4000); + } + }, + nextAnnounce () { + this.announceIndex = (this.announceIndex + 1) % this.announcements.length; + }, + pauseAnnounce () { + clearInterval(this.announceTimer); + }, + resumeAnnounce () { + this.startAnnounceTicker(); + }, async changeLangHandle (e) { try { const res = await changeLanguage({ diff --git a/clientarea/hgcloud/css/common/common.css b/clientarea/hgcloud/css/common/common.css index 41037c5..9f1f4df 100644 --- a/clientarea/hgcloud/css/common/common.css +++ b/clientarea/hgcloud/css/common/common.css @@ -107,6 +107,107 @@ input::-webkit-inner-spin-button { justify-content: space-between; z-index: 1000; } + +/* ====== Header Center — 翻转滚动广告 ====== */ +.header-center { + display: flex; + align-items: center; + justify-content: center; + flex: 1; + min-width: 0; + padding: 0 24px; + overflow: hidden; +} +.announce-ticker { + display: inline-flex; + align-items: center; + gap: 8px; + height: 28px; + padding: 0 14px 0 10px; + background: linear-gradient(135deg, rgba(79,70,229,0.06) 0%, rgba(59,130,246,0.06) 100%); + border: 1px solid rgba(79,70,229,0.1); + border-radius: 999px; + max-width: 420px; + overflow: hidden; + cursor: default; + transition: all 200ms ease-out; +} +.announce-ticker:hover { + background: linear-gradient(135deg, rgba(79,70,229,0.1) 0%, rgba(59,130,246,0.1) 100%); + border-color: rgba(79,70,229,0.18); +} +.announce-icon { + font-size: 14px; + color: var(--color-primary, #4F46E5); + flex-shrink: 0; + animation: announce-pulse 2s ease-in-out infinite; +} +@keyframes announce-pulse { + 0%, 100% { opacity: 0.7; transform: scale(1); } + 50% { opacity: 1; transform: scale(1.1); } +} +.announce-flipper { + flex: 1; + min-width: 0; + height: 28px; + display: flex; + align-items: center; + overflow: hidden; + perspective: 200px; +} +.announce-item { + display: inline-flex; + align-items: center; + gap: 6px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-decoration: none; + color: inherit; + line-height: 28px; +} +.announce-item:hover { color: var(--color-primary, #4F46E5); } +.announce-tag { + display: inline-block; + font-size: 10px; + font-weight: 600; + letter-spacing: 0.02em; + padding: 1px 6px; + border-radius: 4px; + line-height: 1.5; + flex-shrink: 0; +} +.tag-blue { background: rgba(59,130,246,0.12); color: #2563EB; } +.tag-green { background: rgba(5,150,105,0.12); color: #059669; } +.tag-orange { background: rgba(217,119,6,0.12); color: #D97706; } +.tag-red { background: rgba(220,38,38,0.12); color: #DC2626; } +.tag-purple { background: rgba(124,58,237,0.12); color: #7C3AED; } +.announce-text { + font-size: 12px; + color: #374151; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* 翻转动画 — 3D 上翻效果 */ +.announce-flip-enter-active, +.announce-flip-leave-active { + transition: all 0.4s cubic-bezier(0.23,1,0.32,1); +} +.announce-flip-enter { + opacity: 0; + transform: translateY(100%) rotateX(-90deg); +} +.announce-flip-leave-to { + opacity: 0; + transform: translateY(-100%) rotateX(90deg); +} +.announce-flip-enter-to, +.announce-flip-leave { + opacity: 1; + transform: translateY(0) rotateX(0); +} .search-value { font-size: 0.14rem; color: #040e34;