feat(ui): 第四批高级感升级（友圈/动态详情/门票/下单页）
- 友圈：玻璃头部、发动态按钮、动态卡渐变与错峰入场、话题胶囊 - 动态详情：导航与内容卡玻璃化、评论区与输入框统一 - 我的门票：票据卡分层、核销码数字字体、暖色主题适配 - 下单页：模式卡/大神卡/底部支付栏统一走主题变量，修复主题一致性测试 - HBuilderX 编译成功；119 套件/777 用例全绿
这个提交包含在：
xcbyy
@@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
在新工单中引用
屏蔽一个用户