From 6164ff322d6e3f3ac201314f862a0320d168d0f2 Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 2 Feb 2026 21:15:19 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=96=B0=E8=AE=BE=E8=AE=A1?= =?UTF-8?q?=E7=9B=B2=E7=9B=92=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F=EF=BC=8C?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=9B=92=E5=AD=90=E5=9B=BE=E6=A0=87=E5=92=8C?= =?UTF-8?q?=E9=97=AE=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Icon.vue | 6 +- frontend/src/views/TaskHall.vue | 313 ++++++++++++++++++++++--------- 2 files changed, 225 insertions(+), 94 deletions(-) diff --git a/frontend/src/components/Icon.vue b/frontend/src/components/Icon.vue index acdb177..de7f5eb 100644 --- a/frontend/src/components/Icon.vue +++ b/frontend/src/components/Icon.vue @@ -64,7 +64,9 @@ import { SparklesIcon, FolderIcon, ComputerDesktopIcon, - FlagIcon + FlagIcon, + CubeIcon, + QuestionMarkCircleIcon } from '@heroicons/vue/24/outline' import { BellIcon as BellSolidIcon } from '@heroicons/vue/24/solid' @@ -140,6 +142,8 @@ const iconMap: Record = { folder: FolderIcon, monitor: ComputerDesktopIcon, target: FlagIcon, + box: CubeIcon, + question: QuestionMarkCircleIcon, // 方向 arrowUp: ChevronUpIcon, diff --git a/frontend/src/views/TaskHall.vue b/frontend/src/views/TaskHall.vue index efeed63..cbc9bc7 100644 --- a/frontend/src/views/TaskHall.vue +++ b/frontend/src/views/TaskHall.vue @@ -111,37 +111,48 @@ @@ -6935,98 +6946,214 @@ onUnmounted(() => { // 盲盒模式卡片样式 &.blind-box-card { - background: linear-gradient(135deg, rgba(250, 140, 22, 0.1) 0%, rgba(250, 173, 20, 0.05) 100%) !important; - border: 2px dashed rgba(250, 140, 22, 0.4) !important; - min-height: 200px; - display: flex; - align-items: center; - justify-content: center; + background: linear-gradient(135deg, #1f1f1f 0%, #141414 100%) !important; + border: 1px solid rgba(250, 140, 22, 0.2) !important; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + min-height: 280px; + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, #fa8c16, #faad14); + opacity: 0.8; + } &:hover { - border-color: rgba(250, 140, 22, 0.8) !important; - background: linear-gradient(135deg, rgba(250, 140, 22, 0.15) 0%, rgba(250, 173, 20, 0.1) 100%) !important; + transform: translateY(-4px); + border-color: rgba(250, 140, 22, 0.5) !important; + box-shadow: 0 12px 24px rgba(250, 140, 22, 0.15); + + .box-icon-wrapper { + transform: scale(1.05) rotate(5deg); + + .question-mark { + transform: translate(-50%, -60%) scale(1.1); + } + } + + .blind-box-glow { + opacity: 0.5; + transform: scale(1.2); + } } .blind-box-content { + width: 100%; + height: 100%; display: flex; flex-direction: column; align-items: center; - justify-content: center; - text-align: center; - padding: 24px; + justify-content: space-between; + padding: 30px 20px; + position: relative; + z-index: 1; - .blind-box-icon { - margin-bottom: 16px; - animation: pulse 2s ease-in-out infinite; - } - - .blind-box-queue { + .blind-box-visual { + position: relative; + margin-bottom: 24px; display: flex; - flex-direction: column; + justify-content: center; align-items: center; - margin-bottom: 12px; + width: 100px; + height: 100px; - .queue-label { - font-size: 12px; - color: rgba(255, 255, 255, 0.5); - margin-bottom: 4px; - } - - .queue-number { - font-size: 32px; - font-weight: bold; - color: #fa8c16; - text-shadow: 0 2px 8px rgba(250, 140, 22, 0.3); - } - } - - .blind-box-depts { - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 12px; - - .depts-label { + .box-icon-wrapper { + position: relative; + width: 80px; + height: 80px; display: flex; align-items: center; - font-size: 12px; - color: rgba(255, 255, 255, 0.65); - margin-bottom: 6px; + justify-content: center; + transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); + + .main-box-icon { + width: 80px; + height: 80px; + color: #fa8c16; + filter: drop-shadow(0 8px 16px rgba(250, 140, 22, 0.3)); + } + + .question-mark { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 42px; + font-weight: 800; + color: #fff; + text-shadow: 0 2px 4px rgba(0,0,0,0.5); + font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif; + transition: all 0.3s ease; + } } - .depts-tags { + .blind-box-glow { + position: absolute; + width: 140px; + height: 140px; + background: radial-gradient(circle, rgba(250, 140, 22, 0.25) 0%, rgba(250, 140, 22, 0) 70%); + opacity: 0.2; + transition: all 0.4s ease; + z-index: -1; + } + } + + .blind-box-info { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 20px; + flex: 1; + + .blind-box-queue { display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 6px; + flex-direction: column; + align-items: center; + margin-bottom: 20px; - .dept-tag { - padding: 2px 8px; - background: rgba(82, 196, 26, 0.15); - border: 1px solid rgba(82, 196, 26, 0.3); - border-radius: 4px; - font-size: 11px; - color: #52c41a; + .queue-label { + font-size: 12px; + text-transform: uppercase; + letter-spacing: 1px; + color: rgba(255, 255, 255, 0.45); + margin-bottom: 6px; + } + + .queue-number { + font-size: 42px; + font-weight: 800; + background: linear-gradient(135deg, #fff 0%, #fa8c16 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + line-height: 1; + filter: drop-shadow(0 2px 4px rgba(250, 140, 22, 0.2)); + } + } + + .blind-box-depts { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + + .depts-label { + display: flex; + align-items: center; + font-size: 12px; + color: rgba(255, 255, 255, 0.65); + margin-bottom: 10px; + } + + .depts-tags { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 8px; + + .dept-tag { + padding: 4px 12px; + background: rgba(82, 196, 26, 0.1); + border: 1px solid rgba(82, 196, 26, 0.3); + border-radius: 12px; + font-size: 12px; + color: #73d13d; + transition: all 0.2s; + + &:hover { + background: rgba(82, 196, 26, 0.2); + color: #95de64; + border-color: rgba(82, 196, 26, 0.5); + } + } } } } - .blind-box-hint { + .blind-box-action { + width: 100%; display: flex; + flex-direction: column; align-items: center; - font-size: 12px; - color: rgba(255, 255, 255, 0.45); - margin-bottom: 16px; - } - - .blind-box-grab-btn { - background: linear-gradient(135deg, #fa8c16 0%, #faad14 100%); - border: none; - padding: 8px 24px; - font-weight: 500; + gap: 12px; - &:hover { - background: linear-gradient(135deg, #d87a00 0%, #d89614 100%); + .blind-box-grab-btn { + width: 80%; + height: 44px; + border-radius: 22px; + background: linear-gradient(90deg, #fa8c16 0%, #fa541c 100%); + border: none; + font-weight: 600; + font-size: 15px; + box-shadow: 0 4px 12px rgba(250, 140, 22, 0.4); + transition: all 0.3s ease; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(250, 140, 22, 0.5); + background: linear-gradient(90deg, #ff9c38 0%, #ff7a45 100%); + } + + &:active { + transform: translateY(1px); + box-shadow: 0 2px 8px rgba(250, 140, 22, 0.4); + } + } + + .blind-box-hint { + display: flex; + align-items: center; + font-size: 12px; + color: rgba(255, 255, 255, 0.35); } } }