From 1264792a46e8d7497226c6bd81c97da1ff9d2d7a Mon Sep 17 00:00:00 2001 From: xcbyy <2578898740@qq.com> Date: Fri, 23 Oct 2026 14:15:38 +0800 Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E7=AC=AC=E5=9B=9B=E6=89=B9?= =?UTF-8?q?=E9=AB=98=E7=BA=A7=E6=84=9F=E5=8D=87=E7=BA=A7=EF=BC=88=E5=8F=8B?= =?UTF-8?q?=E5=9C=88/=E5=8A=A8=E6=80=81=E8=AF=A6=E6=83=85/=E9=97=A8?= =?UTF-8?q?=E7=A5=A8/=E4=B8=8B=E5=8D=95=E9=A1=B5=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 友圈：玻璃头部、发动态按钮、动态卡渐变与错峰入场、话题胶囊 - 动态详情：导航与内容卡玻璃化、评论区与输入框统一 - 我的门票：票据卡分层、核销码数字字体、暖色主题适配 - 下单页：模式卡/大神卡/底部支付栏统一走主题变量，修复主题一致性测试 - HBuilderX 编译成功；119 套件/777 用例全绿 --- pwuniapp/pages/activity/my-ticket.vue | 99 +++++++++++++++++++++ pwuniapp/pages/community/detail.vue | 81 +++++++++++++++++ pwuniapp/pages/community/index.vue | 121 ++++++++++++++++++++++++++ pwuniapp/pages/order/create.vue | 89 +++++++++++++++++++ 4 files changed, 390 insertions(+) diff --git a/pwuniapp/pages/activity/my-ticket.vue b/pwuniapp/pages/activity/my-ticket.vue index 0ae3f17..ba8aae4 100644 --- a/pwuniapp/pages/activity/my-ticket.vue +++ b/pwuniapp/pages/activity/my-ticket.vue @@ -694,4 +694,103 @@ const goBack = () => { box-shadow: 0 0 28rpx rgba(16, 185, 129, 0.6), inset 0 0 18rpx rgba(16, 185, 129, 0.25); } } +/* ===== Premium visual layer: 我的门票 ===== */ +.ticket-container { + background: + radial-gradient(100% 40% at 50% -6%, rgba(16, 185, 129, 0.12), transparent 62%), + var(--surface-0); +} + +.ticket-card { + background: + radial-gradient(circle at 86% 6%, rgba(217, 164, 65, 0.08), transparent 40%), + linear-gradient(180deg, rgba(22, 31, 51, 0.96) 0%, rgba(13, 20, 36, 0.98) 100%); + border-color: var(--hairline); + box-shadow: + inset 0 1rpx 0 rgba(255, 255, 255, 0.05), + 0 22rpx 56rpx rgba(0, 0, 0, 0.32); + + .ticket-title { + font-size: 34rpx; + letter-spacing: 0.3rpx; + } + + .code-section .code-slots .digit-box { + width: 112rpx; + height: 132rpx; + background: rgba(5, 9, 18, 0.78); + border-width: 2rpx; + box-shadow: + 0 0 0 1rpx rgba(16, 185, 129, 0.12), + 0 12rpx 28rpx rgba(0, 0, 0, 0.22); + + .digit-text { + font-family: var(--font-num, monospace); + font-size: 66rpx; + text-shadow: 0 0 14rpx rgba(16, 185, 129, 0.45); + } + } + + .ticket-codes-panel .code-tab-switch { + background: rgba(5, 9, 18, 0.55); + border-color: var(--hairline); + } + + .security-footer { + background: rgba(5, 9, 18, 0.42); + border-top-color: rgba(255, 255, 255, 0.05); + } +} + +.ticket-container.theme-warm { + background: + radial-gradient(100% 38% at 50% -6%, rgba(16, 185, 129, 0.06), transparent 62%), + #FDFBF7; + + .ticket-card { + background: + radial-gradient(circle at 86% 6%, rgba(234, 88, 12, 0.05), transparent 40%), + #FFFFFF; + border-color: #F0ECE4; + box-shadow: 0 20rpx 48rpx rgba(28, 25, 23, 0.07); + + .ticket-title { + color: #1C1917; + } + + .ticket-meta .meta-v { + color: #57534E; + } + + .ticket-punch-wrap .punch { + background-color: #FDFBF7; + } + + .code-section .code-slots .digit-box { + background: #FAF8F4; + border-color: #34D399; + box-shadow: 0 0 0 1rpx rgba(16, 185, 129, 0.08); + + .digit-text { + color: #047857; + text-shadow: none; + } + } + + .ticket-codes-panel .code-tab-switch { + background: #F8F5F0; + border-color: #F0ECE4; + } + + .security-footer { + background: #FAF8F4; + border-top-color: #F0ECE4; + } + } + + .ticket-empty { + background: #FFFFFF; + border-color: #E7E5E4; + } +} diff --git a/pwuniapp/pages/community/detail.vue b/pwuniapp/pages/community/detail.vue index 81bbf5e..0d04d05 100644 --- a/pwuniapp/pages/community/detail.vue +++ b/pwuniapp/pages/community/detail.vue @@ -1257,4 +1257,85 @@ onShow(() => { } } } +/* ===== Premium visual layer: 动态详情 ===== */ +.post-detail-page { + background: + radial-gradient(110% 36% at 50% -6%, rgba(99, 102, 241, 0.12), transparent 62%), + var(--surface-0); + + .custom-nav-bar { + background: rgba(7, 11, 20, 0.86); + backdrop-filter: blur(18px); + border-bottom: 1rpx solid rgba(255, 255, 255, 0.04); + } + + .detail-post-card, + .detail-comments-card { + background: linear-gradient(180deg, rgba(22, 31, 51, 0.9) 0%, rgba(13, 20, 36, 0.94) 100%); + border: 1rpx solid var(--hairline); + border-radius: 26rpx; + box-shadow: 0 12rpx 30rpx rgba(0, 0, 0, 0.18); + } + + .detail-post-card .author-avatar { + border: 2rpx solid rgba(255, 255, 255, 0.12); + } + + .detail-content-text { + font-size: 28rpx; + line-height: 1.7; + color: #D5DDEC; + } + + .comments-section-header .section-title { + font-size: 30rpx; + letter-spacing: 0.2rpx; + } + + .comment-item { + border-bottom-color: rgba(255, 255, 255, 0.045); + } + + .detail-comment-input { + background: rgba(7, 11, 20, 0.55); + border: 1rpx solid var(--hairline); + border-radius: 999rpx; + } + + .comments-empty, + .comments-loading { + color: #7C89A6; + } +} + +.post-detail-page.theme-warm { + background: + radial-gradient(100% 34% at 50% -6%, rgba(234, 88, 12, 0.06), transparent 62%), + #FDFBF7; + + .custom-nav-bar { + background: rgba(253, 251, 247, 0.92); + border-bottom-color: #F0ECE4; + } + + .detail-post-card, + .detail-comments-card { + background: #FFFFFF; + border-color: #F0ECE4; + box-shadow: 0 12rpx 28rpx rgba(28, 25, 23, 0.05); + } + + .detail-content-text { + color: #44403C; + } + + .comment-item { + border-bottom-color: #F5F2EC; + } + + .detail-comment-input { + background: #F8F5F0; + border-color: #F0ECE4; + } +} diff --git a/pwuniapp/pages/community/index.vue b/pwuniapp/pages/community/index.vue index f324b4c..00c8472 100644 --- a/pwuniapp/pages/community/index.vue +++ b/pwuniapp/pages/community/index.vue @@ -67,6 +67,7 @@ v-for="(post, index) in filteredPosts" :key="post.id" class="post-card" + :style="{ animationDelay: `${Math.min(index, 8) * 45}ms` }" @click="openPostDetail(post)" > @@ -3364,4 +3365,124 @@ const submitPublishPost = async () => { } } } +/* ===== Premium visual layer: 友圈广场 ===== */ +.community-container { + background: + radial-gradient(110% 40% at 50% -6%, rgba(99, 102, 241, 0.14), transparent 62%), + var(--surface-0); + + .community-header { + background: rgba(7, 11, 20, 0.86); + backdrop-filter: blur(18px); + border-bottom: 1rpx solid rgba(255, 255, 255, 0.04); + } + + .page-title { + font-size: 42rpx; + font-weight: 800; + letter-spacing: 0.5rpx; + } + + .page-sub { + color: #7C89A6; + letter-spacing: 0.3rpx; + } + + .publish-btn { + background: linear-gradient(135deg, #818CF8 0%, #6366F1 60%, #7C3AED 100%); + border-radius: 999rpx; + box-shadow: 0 10rpx 24rpx rgba(99, 102, 241, 0.28); + } + + .post-card { + background: linear-gradient(180deg, rgba(22, 31, 51, 0.96) 0%, rgba(13, 20, 36, 0.98) 100%); + border: 1rpx solid var(--hairline); + border-radius: 26rpx; + box-shadow: 0 12rpx 30rpx rgba(0, 0, 0, 0.2); + animation: communityCardEnter 0.5s var(--ease-out) both; + + .author-avatar { + border: 2rpx solid rgba(255, 255, 255, 0.12); + } + + .author-name { + font-size: 27rpx; + font-weight: 700; + } + + .post-content { + font-size: 27rpx; + line-height: 1.65; + color: #D5DDEC; + } + + .topic-item { + color: #A5B4FC; + background: rgba(99, 102, 241, 0.1); + border: 1rpx solid rgba(99, 102, 241, 0.18); + border-radius: 999rpx; + padding: 4rpx 12rpx; + } + + .post-footer { + border-top-color: rgba(255, 255, 255, 0.045); + } + } + + .posts-empty { + background: rgba(255, 255, 255, 0.02); + border: 1rpx dashed rgba(255, 255, 255, 0.09); + border-radius: 24rpx; + } +} + +.community-container.theme-warm { + background: + radial-gradient(100% 38% at 50% -6%, rgba(234, 88, 12, 0.06), transparent 62%), + #FDFBF7; + + .community-header { + background: rgba(253, 251, 247, 0.92); + border-bottom-color: #F0ECE4; + } + + .page-title { + color: #1C1917; + } + + .page-sub { + color: #A8A29E; + } + + .post-card { + background: #FFFFFF; + border-color: #F0ECE4; + box-shadow: 0 12rpx 28rpx rgba(28, 25, 23, 0.05); + + .post-content { + color: #44403C; + } + + .topic-item { + color: #C2410C; + background: #FFF7ED; + border-color: #FED7AA; + } + + .post-footer { + border-top-color: #F5F2EC; + } + } +} + +@keyframes communityCardEnter { + from { + opacity: 0; + transform: translateY(14rpx) scale(0.99); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} diff --git a/pwuniapp/pages/order/create.vue b/pwuniapp/pages/order/create.vue index a9a8944..13d8271 100644 --- a/pwuniapp/pages/order/create.vue +++ b/pwuniapp/pages/order/create.vue @@ -1496,4 +1496,93 @@ const handlePay = async () => { box-shadow: 0 4rpx 20rpx rgba(234, 88, 12, 0.35); } } +/* ===== Premium visual layer: 下单页 ===== */ +.create-order-container { + background: + radial-gradient(110% 40% at 50% -6%, rgba(99, 102, 241, 0.14), transparent 62%), + var(--surface-0); + + .order-card { + background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%); + border-color: var(--hairline); + border-radius: 26rpx; + box-shadow: var(--shadow-card); + } + + .mode-tab { + border-radius: 20rpx; + transition: transform var(--motion-fast, 120ms) var(--ease-out, ease-out); + + &.active { + background: linear-gradient(145deg, rgba(99, 102, 241, 0.18), rgba(16, 185, 129, 0.08)); + border-color: rgba(129, 140, 248, 0.38); + box-shadow: inset 0 1rpx 0 var(--hairline); + } + } + + .expert-profile { + background: var(--surface-2); + border: 1rpx solid var(--hairline); + border-radius: 20rpx; + + .expert-avatar { + border: 2rpx solid var(--hairline-strong); + } + + .expert-name { + font-size: 30rpx; + letter-spacing: 0.2rpx; + } + } + + .section-title { + letter-spacing: 0.2rpx; + } + + .coupon-card, + .pay-method-item { + border-radius: 18rpx; + } + + .bottom-bar { + background: var(--bg-surface-glass); + backdrop-filter: blur(20px); + border-top: 1rpx solid var(--hairline); + box-shadow: var(--shadow-float); + } + + .pay-val { + font-family: var(--font-num, monospace); + font-size: 44rpx; + letter-spacing: 0.2rpx; + } +} + +.create-order-container.theme-warm { + background: + radial-gradient(100% 38% at 50% -6%, rgba(234, 88, 12, 0.07), transparent 62%), + #FDFBF7; + + .order-card { + background: #FFFFFF; + border-color: #F0ECE4; + box-shadow: 0 12rpx 28rpx rgba(28, 25, 23, 0.05); + } + + .mode-tab.active { + background: linear-gradient(145deg, #FFF7ED, #FFFFFF); + border-color: #FED7AA; + } + + .expert-profile { + background: #FAF8F4; + border-color: #F0ECE4; + } + + .bottom-bar { + background: rgba(255, 255, 255, 0.92); + border-top-color: #F0ECE4; + box-shadow: 0 -12rpx 30rpx rgba(28, 25, 23, 0.07); + } +}