1041 lines
23 KiB
Vue
1041 lines
23 KiB
Vue
<template>
|
||
<view
|
||
class="live-root"
|
||
:class="{ 'live-root--desktop': isDesktop, 'live-root--mobile': !isDesktop }"
|
||
>
|
||
<!-- 与登录页同一套玄幻背景（八卦、太极、祥云、阵环等） -->
|
||
<MysticFantasyBg :round-phase="roundPhase" />
|
||
|
||
<block v-if="!showDetail">
|
||
<!-- 电脑端：内容区居中加宽；手机端：全宽（与 Tab 内测名一致） -->
|
||
<view class="live-content">
|
||
<TestNameScreen ref="testNameFormRef" @test="handleTest" />
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 结果详解弹层：个人 / 公司测名详解（电脑端：居中面板，内容组件不变） -->
|
||
<view
|
||
v-else
|
||
class="live-detail-modal"
|
||
:class="{ 'live-detail-modal--desktop': isDesktop }"
|
||
@click="closeDetail"
|
||
>
|
||
<view
|
||
class="live-detail-modal-body"
|
||
:class="{ 'live-detail-modal-body--desktop': isDesktop }"
|
||
@click.stop=""
|
||
>
|
||
<TestNameDetail
|
||
v-if="detailKind === 'personal'"
|
||
:data="reportData"
|
||
:desktop-layout="isDesktop"
|
||
@back="closeDetail"
|
||
/>
|
||
<CompanyNamingDetailDesktop
|
||
v-else-if="isDesktop"
|
||
:data="reportData"
|
||
:show-business-fortune="companyShowBusinessFortune"
|
||
@back="closeDetail"
|
||
@business-fortune="() => {}"
|
||
/>
|
||
<CompanyNamingDetail
|
||
v-else
|
||
:data="reportData"
|
||
:show-business-fortune="companyShowBusinessFortune"
|
||
:desktop-layout="isDesktop"
|
||
@back="closeDetail"
|
||
@business-fortune="() => {}"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onUnmounted } from 'vue';
|
||
import TestNameScreen from '../../components/screens/TestName.vue';
|
||
import TestNameDetail from '../../components/screens/TestNameDetail.vue';
|
||
import CompanyNamingDetail from '../../components/screens/CompanyNamingDetail.vue';
|
||
import CompanyNamingDetailDesktop from '../../components/screens/CompanyNamingDetailDesktop.vue';
|
||
import MysticFantasyBg from '../../components/MysticFantasyBg.vue';
|
||
import { namingApi } from '../../api/naming';
|
||
import { showToast } from '../../utils/uni-compat';
|
||
import { getIsDesktopLayout } from '../../utils/device-layout';
|
||
import {
|
||
classifyLiveTestDetail,
|
||
pollTestSolutionDetail,
|
||
pollUntilSolutionIdFromScoring,
|
||
} from '../../utils/poll-test-solution-detail';
|
||
|
||
type LiveRoundPhase = 'ready' | 'loading' | 'result';
|
||
|
||
type PersonalTestParams = {
|
||
lastName: string;
|
||
firstName: string;
|
||
gender: 'male' | 'female';
|
||
birthDate: string;
|
||
};
|
||
|
||
type CompanyTestParams = {
|
||
companyName?: string;
|
||
industry: string;
|
||
address: string;
|
||
target_audience: string;
|
||
members: Array<{ name: string; birth_date: string }>;
|
||
};
|
||
|
||
type TestMode = 'personal' | 'company';
|
||
|
||
const testNameFormRef = ref<{ closeLoading: () => void } | null>(null);
|
||
|
||
/** 电脑端网页布局 vs 手机端布局（随窗口尺寸变化更新） */
|
||
const isDesktop = ref(
|
||
typeof window !== 'undefined' ? getIsDesktopLayout() : false,
|
||
);
|
||
|
||
const roundPhase = ref<LiveRoundPhase>('ready');
|
||
const reportData = ref<any | null>(null);
|
||
const showDetail = ref(false);
|
||
/** 详解弹层：个人测名 vs 公司测名（与 index 我的方案分流一致） */
|
||
const detailKind = ref<'personal' | 'company'>('personal');
|
||
const companyShowBusinessFortune = ref(false);
|
||
|
||
let pollAbort: AbortController | null = null;
|
||
|
||
const syncDeviceLayout = () => {
|
||
if (typeof window === 'undefined') return;
|
||
isDesktop.value = getIsDesktopLayout();
|
||
};
|
||
|
||
onMounted(() => {
|
||
syncDeviceLayout();
|
||
window.addEventListener('resize', syncDeviceLayout, { passive: true });
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
pollAbort?.abort();
|
||
if (typeof window !== 'undefined') {
|
||
window.removeEventListener('resize', syncDeviceLayout);
|
||
}
|
||
});
|
||
|
||
const closeDetail = () => {
|
||
showDetail.value = false;
|
||
reportData.value = null;
|
||
detailKind.value = 'personal';
|
||
companyShowBusinessFortune.value = false;
|
||
roundPhase.value = 'ready';
|
||
};
|
||
|
||
const handleTest = async (mode: TestMode, params: PersonalTestParams | CompanyTestParams) => {
|
||
roundPhase.value = 'loading';
|
||
pollAbort?.abort();
|
||
pollAbort = new AbortController();
|
||
const signal = pollAbort.signal;
|
||
|
||
try {
|
||
let res: any;
|
||
if (mode === 'personal') {
|
||
const p = params as PersonalTestParams;
|
||
res = await namingApi.personalScoring({
|
||
surname: String(p.lastName || '').trim(),
|
||
given_name: String(p.firstName || '').trim(),
|
||
gender: p.gender,
|
||
birthday: p.birthDate,
|
||
});
|
||
} else {
|
||
const p = params as CompanyTestParams;
|
||
res = await namingApi.companyScoring({
|
||
company_name: String(p.companyName || '').trim(),
|
||
industry: String(p.industry || '').trim(),
|
||
address: String(p.address || '').trim(),
|
||
target_audience: String(p.target_audience || '').trim(),
|
||
members: Array.isArray(p.members)
|
||
? p.members
|
||
.filter((m) => m?.name && m?.birth_date)
|
||
.map((m) => ({
|
||
name: String(m.name || '').trim(),
|
||
birthday: m.birth_date,
|
||
}))
|
||
: [],
|
||
});
|
||
}
|
||
|
||
const solutionId = await pollUntilSolutionIdFromScoring(res, {
|
||
intervalMs: 5000,
|
||
signal,
|
||
});
|
||
|
||
const detail = await pollTestSolutionDetail(solutionId, mode, {
|
||
intervalMs: 5000,
|
||
signal,
|
||
});
|
||
const classified = classifyLiveTestDetail(detail, mode);
|
||
detailKind.value = classified.kind;
|
||
companyShowBusinessFortune.value = classified.showBusinessFortune;
|
||
reportData.value = detail;
|
||
roundPhase.value = 'result';
|
||
showDetail.value = true;
|
||
} catch (error: any) {
|
||
if (String(error?.message || '') === 'aborted') {
|
||
roundPhase.value = 'ready';
|
||
return;
|
||
}
|
||
showToast({
|
||
title: error?.msg || error?.message || '测算失败，请稍后重试',
|
||
icon: 'none',
|
||
});
|
||
roundPhase.value = 'ready';
|
||
} finally {
|
||
testNameFormRef.value?.closeLoading();
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.live-root {
|
||
min-height: 100vh;
|
||
background: transparent;
|
||
color: #fff;
|
||
position: relative;
|
||
overflow: hidden;
|
||
display: block;
|
||
}
|
||
|
||
/* 电脑端：内容区居中，阅读宽度更接近网页 */
|
||
.live-root--desktop .live-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 100%;
|
||
max-width: 520px;
|
||
margin: 0 auto;
|
||
padding: 40px 32px 48px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 电脑端：测名表单与登录页同系 — 深色玻璃 + 金边 */
|
||
.live-root--desktop :deep(.testname-top-bar) {
|
||
opacity: 0.35;
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-title) {
|
||
color: #f2e6d8;
|
||
text-shadow: 0 0 24px rgba(212, 175, 55, 0.25);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-mode-toggle-bg) {
|
||
background: rgba(15, 23, 42, 0.55);
|
||
border: 1px solid rgba(212, 175, 55, 0.22);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-mode-toggle-slider) {
|
||
background: rgba(2, 6, 23, 0.75);
|
||
border-color: rgba(212, 175, 55, 0.28);
|
||
box-shadow: 0 0 12px rgba(212, 175, 55, 0.12);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-mode-toggle-btn) {
|
||
color: rgba(233, 233, 239, 0.55);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-mode-toggle-btn-active) {
|
||
color: #d4af37;
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-form-card) {
|
||
background: rgba(15, 23, 42, 0.55);
|
||
border: 1px solid rgba(212, 175, 55, 0.22);
|
||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-corner) {
|
||
border-color: rgba(212, 175, 55, 0.35);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-label),
|
||
.live-root--desktop :deep(.testname-label-center),
|
||
.live-root--desktop :deep(.testname-label-with-icon) {
|
||
color: rgba(242, 230, 216, 0.78);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-input-wrapper) {
|
||
border-bottom-color: rgba(148, 163, 184, 0.35);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-input-wrapper-focus) {
|
||
border-bottom-color: rgba(212, 175, 55, 0.55);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-input-name) {
|
||
color: #f2e6d8;
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-input-name::placeholder) {
|
||
color: rgba(148, 163, 184, 0.55);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-gender-btn) {
|
||
border-color: rgba(148, 163, 184, 0.4);
|
||
color: rgba(233, 233, 239, 0.75);
|
||
background: rgba(2, 6, 23, 0.35);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-gender-btn-active) {
|
||
border-color: rgba(212, 175, 55, 0.55);
|
||
background: linear-gradient(145deg, rgba(139, 35, 35, 0.85), rgba(212, 175, 55, 0.2));
|
||
color: #fdfbf7;
|
||
box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-date-picker-trigger) {
|
||
background: rgba(2, 6, 23, 0.45);
|
||
border-color: rgba(212, 175, 55, 0.18);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-date-picker-text) {
|
||
color: rgba(148, 163, 184, 0.65);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-date-picker-text-filled) {
|
||
color: #f2e6d8;
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-input-company) {
|
||
background: rgba(2, 6, 23, 0.45);
|
||
border-color: rgba(148, 163, 184, 0.35);
|
||
color: #f2e6d8;
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-input-company::placeholder) {
|
||
color: rgba(148, 163, 184, 0.45);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-members-tip) {
|
||
color: rgba(212, 175, 55, 0.55);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-member-item) {
|
||
background: rgba(2, 6, 23, 0.45);
|
||
border-color: rgba(148, 163, 184, 0.35);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-member-number) {
|
||
background: rgba(212, 175, 55, 0.12);
|
||
color: rgba(233, 233, 239, 0.75);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-member-name) {
|
||
color: #f2e6d8;
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-member-name::placeholder) {
|
||
color: rgba(148, 163, 184, 0.45);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-member-divider) {
|
||
background: rgba(148, 163, 184, 0.35);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-member-date) {
|
||
color: rgba(148, 163, 184, 0.65);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-member-date-filled) {
|
||
color: #f2e6d8;
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-divider) {
|
||
background: rgba(212, 175, 55, 0.15);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-submit-btn) {
|
||
background: linear-gradient(135deg, rgba(139, 35, 35, 0.95), rgba(90, 20, 20, 0.98));
|
||
border: 1px solid rgba(212, 175, 55, 0.25);
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(212, 175, 55, 0.12);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-submit-btn-border) {
|
||
border-color: rgba(212, 175, 55, 0.35);
|
||
}
|
||
|
||
.live-root--desktop :deep(.testname-submit-text) {
|
||
color: #fdfbf7;
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
||
}
|
||
|
||
/* 电脑端：详解以居中「网页页」形式展示，内容仍为原详解组件 */
|
||
.live-root--desktop .live-detail-modal--desktop {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 16px 20px;
|
||
box-sizing: border-box;
|
||
background: rgba(2, 6, 23, 0.78);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.live-root--desktop .live-detail-modal-body--desktop {
|
||
position: relative;
|
||
inset: auto;
|
||
width: 100%;
|
||
max-width: 1320px;
|
||
/* 电脑端：适当拉高弹层，避免底部模块在可视区内被裁切 */
|
||
height: min(98vh, calc(100vh - 12px));
|
||
max-height: calc(100vh - 12px);
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(212, 175, 55, 0.22);
|
||
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
|
||
background: rgba(6, 8, 16, 0.92);
|
||
}
|
||
|
||
/* 详解根组件：占满面板，内部由各页 desktop 样式负责双列与滚动 */
|
||
.live-root--desktop .live-detail-modal-body--desktop :deep(.test-name-detail),
|
||
.live-root--desktop .live-detail-modal-body--desktop :deep(.company-detail) {
|
||
min-height: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.live-root--desktop .live-detail-modal-body--desktop :deep(.company-detail) {
|
||
position: relative !important;
|
||
top: auto !important;
|
||
left: auto !important;
|
||
right: auto !important;
|
||
bottom: auto !important;
|
||
width: 100%;
|
||
max-height: 100%;
|
||
min-height: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 手机端：与 Tab 内八字测名一致，不额外收窄 */
|
||
.live-root--mobile .live-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 100%;
|
||
}
|
||
|
||
.live-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 100%;
|
||
}
|
||
|
||
.live-top {
|
||
padding: 18rpx 20rpx 10rpx;
|
||
}
|
||
|
||
.live-video {
|
||
height: 220rpx;
|
||
border-radius: 20rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: radial-gradient(circle at top, #2a2040, #0b0b12 55%);
|
||
border: 1px solid rgba(212, 175, 55, 0.15);
|
||
}
|
||
|
||
.live-video-shimmer {
|
||
position: absolute;
|
||
inset: -40%;
|
||
background: linear-gradient(120deg, rgba(212, 175, 55, 0) 35%, rgba(212, 175, 55, 0.22) 50%, rgba(212, 175, 55, 0) 65%);
|
||
transform: translateX(-30%);
|
||
animation: live-shimmer 2.6s linear infinite;
|
||
}
|
||
|
||
@keyframes live-shimmer {
|
||
0% {
|
||
transform: translateX(-40%);
|
||
}
|
||
100% {
|
||
transform: translateX(40%);
|
||
}
|
||
}
|
||
|
||
.live-video-overlay {
|
||
position: relative;
|
||
z-index: 2;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 26rpx;
|
||
}
|
||
|
||
.live-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.live-title {
|
||
font-size: 34rpx;
|
||
font-weight: 900;
|
||
letter-spacing: 0.2em;
|
||
color: #d4af37;
|
||
}
|
||
|
||
.live-pill {
|
||
padding: 8rpx 18rpx;
|
||
border-radius: 999rpx;
|
||
background: rgba(212, 175, 55, 0.12);
|
||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||
}
|
||
|
||
.live-sub-row {
|
||
margin-top: 10rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.live-subtext {
|
||
font-size: 22rpx;
|
||
color: rgba(233, 233, 239, 0.78);
|
||
}
|
||
|
||
.live-live-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.live-live-dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
background: #ff2d2d;
|
||
box-shadow: 0 0 20rpx rgba(255, 45, 45, 0.4);
|
||
animation: live-pulse 1.2s ease-in-out infinite;
|
||
}
|
||
|
||
.live-live-text {
|
||
font-size: 22rpx;
|
||
font-weight: 900;
|
||
letter-spacing: 0.12em;
|
||
color: #ff2d2d;
|
||
}
|
||
|
||
.live-inline-count {
|
||
font-size: 18rpx;
|
||
color: rgba(233, 233, 239, 0.75);
|
||
letter-spacing: 0.06em;
|
||
}
|
||
|
||
@keyframes live-pulse {
|
||
0%,
|
||
100% {
|
||
transform: scale(0.9);
|
||
opacity: 0.75;
|
||
}
|
||
50% {
|
||
transform: scale(1.15);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.live-main {
|
||
flex: 1;
|
||
display: flex;
|
||
gap: 18rpx;
|
||
padding: 0 20rpx 24rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.live-left {
|
||
flex: 1.15;
|
||
min-width: 0;
|
||
}
|
||
|
||
.live-right {
|
||
flex: 0.85;
|
||
min-width: 0;
|
||
}
|
||
|
||
.live-info {
|
||
height: calc(100vh - 280rpx);
|
||
border-radius: 20rpx;
|
||
border: 1px solid rgba(212, 175, 55, 0.08);
|
||
background: rgba(15, 23, 42, 0.35);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
padding: 16rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.live-info-card {
|
||
border-radius: 16rpx;
|
||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||
background: rgba(2, 6, 23, 0.45);
|
||
padding: 16rpx 14rpx;
|
||
}
|
||
|
||
.live-info-card.ghost {
|
||
background: rgba(2, 6, 23, 0.22);
|
||
}
|
||
|
||
.live-info-title {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
font-weight: 900;
|
||
color: #d4af37;
|
||
letter-spacing: 0.06em;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.live-info-line {
|
||
display: block;
|
||
font-size: 20rpx;
|
||
color: rgba(233, 233, 239, 0.78);
|
||
margin-bottom: 8rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.live-info-tip {
|
||
display: block;
|
||
font-size: 18rpx;
|
||
color: rgba(233, 233, 239, 0.62);
|
||
margin-top: 10rpx;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.live-form-scroll {
|
||
height: calc(100vh - 280rpx);
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(212, 175, 55, 0.08);
|
||
background: rgba(253, 251, 247, 0.02);
|
||
}
|
||
|
||
/* 将现有测名组件“全屏最小高度”调整为嵌入式 */
|
||
:deep(.testname-screen) {
|
||
min-height: 100vh !important;
|
||
background: transparent !important;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
:deep(.testname-bg-texture) {
|
||
opacity: 0 !important;
|
||
background-image: none !important;
|
||
}
|
||
|
||
.live-result-scroll {
|
||
height: calc(100vh - 280rpx);
|
||
}
|
||
|
||
.live-result-card {
|
||
height: 100%;
|
||
border-radius: 20rpx;
|
||
background: rgba(15, 23, 42, 0.65);
|
||
border: 1px solid rgba(148, 163, 184, 0.28);
|
||
overflow: hidden;
|
||
box-shadow: 0 20rpx 50rpx rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
.live-result-head {
|
||
padding: 24rpx 26rpx;
|
||
border-bottom: 1px solid rgba(148, 163, 184, 0.22);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.live-result-label {
|
||
font-size: 26rpx;
|
||
font-weight: 800;
|
||
letter-spacing: 0.08em;
|
||
color: #d4af37;
|
||
}
|
||
|
||
.live-result-actions {
|
||
display: flex;
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.live-action-btn {
|
||
flex: 1;
|
||
padding: 14rpx 0;
|
||
border-radius: 12rpx;
|
||
background: rgba(212, 175, 55, 0.18);
|
||
border: 1px solid rgba(212, 175, 55, 0.32);
|
||
color: #fff;
|
||
font-weight: 700;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.live-action-btn.ghost {
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border: 1px solid rgba(148, 163, 184, 0.3);
|
||
}
|
||
|
||
.live-score-row {
|
||
padding: 28rpx 26rpx;
|
||
display: flex;
|
||
gap: 22rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.live-score-big {
|
||
min-width: 180rpx;
|
||
}
|
||
|
||
.live-score {
|
||
font-size: 82rpx;
|
||
font-weight: 900;
|
||
letter-spacing: 0.06em;
|
||
background: linear-gradient(to bottom, #d4af37, #8a6e1e);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
line-height: 1;
|
||
}
|
||
|
||
.live-stars {
|
||
margin-top: 10rpx;
|
||
display: flex;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.live-star {
|
||
font-size: 26rpx;
|
||
color: rgba(212, 175, 55, 0.35);
|
||
}
|
||
|
||
.live-star.active {
|
||
color: #d4af37;
|
||
text-shadow: 0 0 10rpx rgba(212, 175, 55, 0.35);
|
||
}
|
||
|
||
.live-name-col {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.live-name {
|
||
font-size: 30rpx;
|
||
font-weight: 900;
|
||
letter-spacing: 0.08em;
|
||
color: #f2e6d8;
|
||
display: block;
|
||
}
|
||
|
||
.live-quote {
|
||
margin-top: 12rpx;
|
||
font-size: 22rpx;
|
||
color: rgba(233, 233, 239, 0.72);
|
||
line-height: 1.8;
|
||
line-clamp: 3;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.live-result-foot {
|
||
padding: 0 26rpx 26rpx;
|
||
}
|
||
|
||
.live-tip {
|
||
font-size: 20rpx;
|
||
color: rgba(233, 233, 239, 0.7);
|
||
}
|
||
|
||
.live-mystic {
|
||
height: 100%;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(212, 175, 55, 0.08);
|
||
background: radial-gradient(circle at top, rgba(212, 175, 55, 0.12), rgba(15, 23, 42, 0.35) 55%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 18rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.mystic-card {
|
||
flex: 1;
|
||
border-radius: 18rpx;
|
||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||
background: rgba(2, 6, 23, 0.35);
|
||
box-shadow: 0 20rpx 50rpx rgba(0, 0, 0, 0.35);
|
||
padding: 18rpx 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.mystic-topline {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6rpx;
|
||
}
|
||
|
||
.mystic-title {
|
||
font-size: 26rpx;
|
||
font-weight: 900;
|
||
letter-spacing: 0.08em;
|
||
color: #d4af37;
|
||
}
|
||
|
||
.mystic-status {
|
||
font-size: 18rpx;
|
||
color: rgba(233, 233, 239, 0.78);
|
||
letter-spacing: 0.06em;
|
||
}
|
||
|
||
.mystic-arc {
|
||
flex: 1;
|
||
min-height: 220rpx;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.mystic-arc-ring {
|
||
width: 220rpx;
|
||
height: 220rpx;
|
||
border-radius: 50%;
|
||
border: 1px dashed rgba(212, 175, 55, 0.55);
|
||
opacity: 0.35;
|
||
animation: mystic-rotate 6s linear infinite;
|
||
}
|
||
|
||
.mystic-arc-ring.active {
|
||
opacity: 0.75;
|
||
border-color: rgba(212, 175, 55, 0.9);
|
||
animation-duration: 2.2s;
|
||
}
|
||
|
||
.mystic-arc-core {
|
||
position: absolute;
|
||
width: 78rpx;
|
||
height: 78rpx;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle at top, rgba(212, 175, 55, 0.9), rgba(139, 35, 35, 0.25));
|
||
box-shadow: 0 0 60rpx rgba(212, 175, 55, 0.25);
|
||
}
|
||
|
||
.mystic-charm {
|
||
font-size: 18rpx;
|
||
color: rgba(233, 233, 239, 0.78);
|
||
letter-spacing: 0.08em;
|
||
}
|
||
|
||
.mystic-energy {
|
||
padding-top: 8rpx;
|
||
}
|
||
|
||
.mystic-energy-bar {
|
||
height: 10rpx;
|
||
border-radius: 999px;
|
||
background: rgba(212, 175, 55, 0.18);
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.mystic-energy-bar::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 40%;
|
||
border-radius: 999px;
|
||
background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.9));
|
||
transform: translateX(-120%);
|
||
animation: mystic-energy 2.4s ease-in-out infinite;
|
||
}
|
||
|
||
.mystic-energy-bar.phase-ready::after {
|
||
animation-duration: 3.4s;
|
||
opacity: 0.75;
|
||
}
|
||
|
||
.mystic-energy-bar.phase-loading::after {
|
||
animation-duration: 1.6s;
|
||
opacity: 1;
|
||
}
|
||
|
||
.mystic-energy-bar.phase-result::after {
|
||
animation-duration: 2.8s;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.mystic-tip {
|
||
font-size: 16rpx;
|
||
color: rgba(233, 233, 239, 0.6);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
@keyframes mystic-rotate {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes mystic-energy {
|
||
0% {
|
||
transform: translateX(-120%);
|
||
}
|
||
50% {
|
||
transform: translateX(180%);
|
||
}
|
||
100% {
|
||
transform: translateX(180%);
|
||
}
|
||
}
|
||
|
||
.live-chat {
|
||
height: 100%;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(212, 175, 55, 0.08);
|
||
background: rgba(15, 23, 42, 0.35);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.live-chat-header {
|
||
padding: 22rpx 20rpx;
|
||
border-bottom: 1px solid rgba(148, 163, 184, 0.22);
|
||
}
|
||
|
||
.live-chat-title {
|
||
font-size: 26rpx;
|
||
font-weight: 900;
|
||
letter-spacing: 0.08em;
|
||
color: #d4af37;
|
||
}
|
||
|
||
.live-chat-header-tip {
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.live-chat-header-tip-text {
|
||
font-size: 18rpx;
|
||
color: rgba(233, 233, 239, 0.7);
|
||
}
|
||
|
||
.live-chat-list {
|
||
flex: 1;
|
||
padding: 18rpx 18rpx 0;
|
||
}
|
||
|
||
.chat-item {
|
||
display: flex;
|
||
gap: 10rpx;
|
||
margin-bottom: 16rpx;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.chat-role {
|
||
font-size: 18rpx;
|
||
color: rgba(212, 175, 55, 0.9);
|
||
font-weight: 800;
|
||
width: 60rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chat-text {
|
||
font-size: 20rpx;
|
||
color: rgba(233, 233, 239, 0.86);
|
||
line-height: 1.6;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.live-chat-input {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
padding: 14rpx 14rpx 16rpx;
|
||
border-top: 1px solid rgba(148, 163, 184, 0.22);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.chat-input {
|
||
flex: 1;
|
||
border-radius: 12rpx;
|
||
padding: 14rpx 14rpx;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(148, 163, 184, 0.32);
|
||
color: #fff;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.chat-send-btn {
|
||
width: 160rpx;
|
||
border-radius: 12rpx;
|
||
background: rgba(212, 175, 55, 0.18);
|
||
border: 1px solid rgba(212, 175, 55, 0.32);
|
||
color: #fff;
|
||
font-weight: 800;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.chat-send-btn[disabled] {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border: 1px solid rgba(148, 163, 184, 0.25);
|
||
color: rgba(255, 255, 255, 0.55);
|
||
}
|
||
|
||
.live-detail-modal {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 2000;
|
||
background: rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
.live-detail-modal-body {
|
||
position: absolute;
|
||
inset: 0;
|
||
}
|
||
|
||
.live-stream-pill {
|
||
position: fixed;
|
||
right: 22rpx;
|
||
top: calc(22rpx + env(safe-area-inset-top, 0px));
|
||
z-index: 10;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
padding: 12rpx 16rpx;
|
||
border-radius: 999rpx;
|
||
background: rgba(10, 10, 15, 0.55);
|
||
border: 1px solid rgba(212, 175, 55, 0.28);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.live-stream-pill-title {
|
||
font-size: 20rpx;
|
||
font-weight: 900;
|
||
letter-spacing: 0.08em;
|
||
color: #d4af37;
|
||
}
|
||
|
||
.live-stream-pill-sep {
|
||
font-size: 18rpx;
|
||
color: rgba(233, 233, 239, 0.6);
|
||
}
|
||
|
||
.live-stream-pill-state {
|
||
font-size: 18rpx;
|
||
letter-spacing: 0.06em;
|
||
color: rgba(233, 233, 239, 0.72);
|
||
}
|
||
</style>
|
||
|