1527 lines
39 KiB
Vue
1527 lines
39 KiB
Vue
<template>
|
||
<view class="company-analysis">
|
||
<view class="starry-bg">
|
||
<view v-for="star in stars" :key="star.id" class="star" :style="{
|
||
top: star.top,
|
||
left: star.left,
|
||
width: star.size + 'px',
|
||
height: star.size + 'px',
|
||
animationDuration: star.duration + 's',
|
||
animationDelay: star.delay + 's'
|
||
}" />
|
||
<view class="glow-1" />
|
||
<view class="glow-2" />
|
||
</view>
|
||
|
||
<view v-if="stage !== 'result'" class="loading-wrap">
|
||
<view class="loading-ring">
|
||
<view class="loading-ring-inner" />
|
||
<view class="loading-ring-top" />
|
||
<image class="loading-icon" :src="icons.building" mode="aspectFit" />
|
||
</view>
|
||
<text class="loading-title">商道推演</text>
|
||
<text class="loading-subtitle">解析行业五行与团队命理...</text>
|
||
</view>
|
||
|
||
<view v-else class="result-wrap">
|
||
<view class="top-nav">
|
||
<view class="nav-btn" @click="emit('back')">
|
||
<image class="nav-icon" :src="icons.chevronLeft" mode="aspectFit" />
|
||
<text class="nav-text">重测</text>
|
||
</view>
|
||
<text class="nav-title">企业运程</text>
|
||
<!-- <view class="nav-btn" @click="handleShare">
|
||
<image class="nav-icon nav-icon-share" :src="icons.share" mode="aspectFit" />
|
||
</view> -->
|
||
</view>
|
||
|
||
<scroll-view scroll-y class="content-scroll">
|
||
<view class="content-inner">
|
||
<view class="score-card" @click="openModal('header')">
|
||
<view class="score-card-deco" />
|
||
<view class="score-top">
|
||
<view class="score-left">
|
||
<text class="score-name">{{ result?.header?.name || '' }}</text>
|
||
<view class="score-tags">
|
||
<text v-if="result?.header?.tagLeft" class="score-tag">{{ result.header.tagLeft }}</text>
|
||
<text v-if="result?.header?.tagRight" class="score-tag score-tag-gold">{{ result.header.tagRight }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="score-right">
|
||
<text class="score-label">Score</text>
|
||
<text class="score-value">{{ result?.header?.score ?? '' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="divider" />
|
||
|
||
<view class="quote-row">
|
||
<image class="quote-icon" :src="icons.quote" mode="aspectFit" />
|
||
<text class="quote-text">{{ result?.header?.quote || '' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section" @click="openModal('characterAnalysis')">
|
||
<view class="section-header">
|
||
<image class="section-icon" :src="icons.scroll" mode="aspectFit" />
|
||
<text class="section-title">字义数理</text>
|
||
</view>
|
||
|
||
<view class="char-row">
|
||
<view v-for="(c, i) in result?.characterAnalysis?.characters || []" :key="i" class="char-card">
|
||
<view class="char-element-wrap">
|
||
<text class="char-element" :class="getElementClass(c.element)">{{ c.element }}</text>
|
||
</view>
|
||
<text class="char-char">{{ c.char }}</text>
|
||
<text class="char-stroke">{{ c.stroke }}画</text>
|
||
<text class="char-meaning">{{ c.meaning }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<text class="section-paragraph">
|
||
<text class="section-paragraph-highlight">解析：</text>{{ result?.characterAnalysis?.analysis || '' }}
|
||
</text>
|
||
</view>
|
||
|
||
<view class="section" @click="openModal('businessPattern')">
|
||
<view class="section-header">
|
||
<image class="section-icon" :src="icons.target" mode="aspectFit" />
|
||
<text class="section-title">商业格局</text>
|
||
</view>
|
||
|
||
<view class="radar-card">
|
||
<view class="biz-sixdim-radar">
|
||
<svg class="biz-sixdim-svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
|
||
<polygon
|
||
points="50,6 90,28 90,72 50,94 10,72 10,28"
|
||
fill="none"
|
||
stroke="rgba(212, 175, 55, 0.22)"
|
||
stroke-width="0.8"
|
||
/>
|
||
<polygon
|
||
points="50,22 78,36 78,64 50,78 22,64 22,36"
|
||
fill="none"
|
||
stroke="rgba(212, 175, 55, 0.14)"
|
||
stroke-width="0.6"
|
||
/>
|
||
</svg>
|
||
|
||
<view
|
||
v-for="(label, idx) in radarLabels"
|
||
:key="idx"
|
||
class="biz-sixdim-label"
|
||
:class="'biz-sixdim-label-' + idx"
|
||
>
|
||
<text>{{ label }}</text>
|
||
</view>
|
||
|
||
<view class="biz-sixdim-fill" :style="bizSixdimFillStyle" />
|
||
</view>
|
||
|
||
<view class="radar-summary-grid">
|
||
<view v-for="(item, i) in result?.businessPattern?.summary || []" :key="i" class="radar-summary-item">
|
||
<text class="radar-summary-label">{{ item.label }}</text>
|
||
<text class="radar-summary-value">{{ item.value }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section" @click="openModal('gua')">
|
||
<view class="section-header">
|
||
<image class="section-icon" :src="icons.award" mode="aspectFit" />
|
||
<text class="section-title">商号卦象</text>
|
||
</view>
|
||
|
||
<view class="gua-card">
|
||
<text class="gua-bg">{{ result?.gua?.bg || '' }}</text>
|
||
<view class="gua-top">
|
||
<text class="gua-name">{{ result?.gua?.name || '' }}</text>
|
||
<text class="gua-badge">{{ result?.gua?.badge || '' }}</text>
|
||
</view>
|
||
<text class="gua-desc">{{ result?.gua?.desc || '' }}</text>
|
||
|
||
<view class="gua-tags">
|
||
<text v-for="(t, i) in result?.gua?.tags || []" :key="i" class="gua-tag">{{ t }}</text>
|
||
</view>
|
||
|
||
<view class="divider" />
|
||
|
||
<text class="gua-insight-title">商业启示：</text>
|
||
<text class="gua-insight-text">{{ result?.gua?.insight || '' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section" @click="openModal('team')">
|
||
<view class="section-header">
|
||
<image class="section-icon" :src="icons.users" mode="aspectFit" />
|
||
<text class="section-title">核心团队契合度</text>
|
||
</view>
|
||
|
||
<view class="team-card">
|
||
<view v-for="(m, i) in result?.team?.members || []" :key="i" class="team-row">
|
||
<view class="team-left">
|
||
<view class="team-avatar"><text class="team-avatar-text">{{ (m.role || '').slice(0, 1) }}</text></view>
|
||
<view class="team-info">
|
||
<text class="team-role">{{ m.role }}</text>
|
||
<text class="team-desc">{{ m.desc }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="team-right">
|
||
<text class="team-match" :class="{ 'team-match-gold': m.score >= 90 }">{{ m.match }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<text class="team-note">{{ result?.team?.note || '' }}</text>
|
||
</view>
|
||
|
||
<view class="section" @click="openModal('years')">
|
||
<view class="section-header">
|
||
<image class="section-icon" :src="icons.sparkles" mode="aspectFit" />
|
||
<text class="section-title">流年运势推演</text>
|
||
</view>
|
||
|
||
<scroll-view scroll-x class="year-scroll">
|
||
<view class="year-row">
|
||
<view v-for="(y, i) in result?.years?.items || []" :key="i" class="year-card">
|
||
<text class="year-year">{{ y.year }}</text>
|
||
<text class="year-luck" :class="{ 'year-luck-gold': String(y.luck || '').includes('吉') }">{{ y.luck }}</text>
|
||
<view class="year-divider" />
|
||
<text class="year-text">{{ y.text }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view class="grid-2">
|
||
<view class="small-card" @click="openModal('wealthTrend')">
|
||
<view class="small-card-header">
|
||
<image class="small-card-icon" :src="icons.trending" mode="aspectFit" />
|
||
<text class="small-card-title">财运走势</text>
|
||
</view>
|
||
<view class="bars">
|
||
<view v-for="(h, i) in result?.wealthTrend?.bars || []" :key="i" class="bar-bg">
|
||
<view class="bar-fill" :style="{ height: String(h) + '%' }" />
|
||
</view>
|
||
</view>
|
||
<text class="small-card-note">{{ result?.wealthTrend?.note || '' }}</text>
|
||
</view>
|
||
|
||
<view class="small-card" @click="openModal('direction')">
|
||
<view class="small-card-header">
|
||
<image class="small-card-icon" :src="icons.mapPin" mode="aspectFit" />
|
||
<text class="small-card-title">吉凶方位</text>
|
||
</view>
|
||
|
||
<view class="compass">
|
||
<text class="compass-n compass-gold">北</text>
|
||
<text class="compass-s">南</text>
|
||
<text class="compass-w">西</text>
|
||
<text class="compass-e compass-gold">东</text>
|
||
<view class="compass-dot" :style="goodDotStyle" />
|
||
</view>
|
||
<text class="small-card-note">{{ result?.direction?.note || '' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section" @click="openModal('layout')">
|
||
<view class="section-header">
|
||
<image class="section-icon" :src="icons.layout" mode="aspectFit" />
|
||
<text class="section-title">办公布局指引</text>
|
||
</view>
|
||
|
||
<view class="layout-card">
|
||
<view v-for="(it, i) in result?.layout?.items || []" :key="i" class="layout-row">
|
||
<view class="layout-dot" />
|
||
<text class="layout-text">
|
||
<text class="layout-strong">{{ it.strong }}</text>{{ it.textBefore }}
|
||
<text v-for="(h, hi) in it.highlights || []" :key="hi" class="layout-highlight">{{ h }}</text>{{ it.textAfter }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="exec-card" @click="openModal('execution')">
|
||
<view class="exec-row">
|
||
<image class="exec-icon" :src="icons.zap" mode="aspectFit" />
|
||
<view class="exec-body">
|
||
<text class="exec-title">执行建议</text>
|
||
<text class="exec-text">
|
||
{{ result?.execution?.text || '' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view v-if="showModal" class="modal-overlay" @click="closeModal">
|
||
<view class="modal-container" @click.stop>
|
||
<view class="modal-header">
|
||
<text class="modal-title">{{ modalTitle }}</text>
|
||
<text class="modal-close" @click="closeModal">×</text>
|
||
</view>
|
||
|
||
<scroll-view scroll-y class="modal-body">
|
||
<template v-for="(node, i) in modalNodes" :key="i">
|
||
<text v-if="node.type === 'text'" class="modal-text">{{ node.text }}</text>
|
||
|
||
<view v-else-if="node.type === 'list'" class="modal-list">
|
||
<view v-for="(it, li) in node.items" :key="li" class="modal-list-item">
|
||
<view class="modal-list-dot" />
|
||
<text class="modal-list-text">{{ it }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else-if="node.type === 'kv'" class="modal-kv">
|
||
<view v-for="(kv, ki) in node.items" :key="ki" class="modal-kv-row">
|
||
<text class="modal-kv-label">{{ kv.label }}</text>
|
||
<text class="modal-kv-value">{{ kv.value }}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, watch } from 'vue';
|
||
import { namingApi } from '@/api';
|
||
import type { CompanyAnalysisRequest, CompanyAnalysisResponse, CompanyAnalysisDetailNode, CompanyAnalysisDetails } from '@/api';
|
||
|
||
declare const uni: any;
|
||
|
||
type ElementType = '金' | '木' | '水' | '火' | '土' | string;
|
||
|
||
const props = defineProps<{
|
||
params?: CompanyAnalysisRequest | CompanyAnalysisResponse | null;
|
||
data?: CompanyAnalysisResponse | null;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
back: [];
|
||
}>();
|
||
|
||
const stage = ref<'loading' | 'result'>('loading');
|
||
const fetched = ref<CompanyAnalysisResponse | null>(null);
|
||
const result = computed(() => props.data || fetched.value || null);
|
||
|
||
const showModal = ref(false);
|
||
const currentModal = ref<
|
||
'header' | 'characterAnalysis' | 'businessPattern' | 'gua' | 'team' | 'years' | 'wealthTrend' | 'direction' | 'layout' | 'execution' | ''
|
||
>('');
|
||
|
||
const modalPayload = computed<CompanyAnalysisDetails | null>(() => {
|
||
const r = result.value;
|
||
if (!r) return null;
|
||
|
||
if (currentModal.value === 'header') return r.header?.details || null;
|
||
if (currentModal.value === 'characterAnalysis') return r.characterAnalysis?.details || null;
|
||
if (currentModal.value === 'businessPattern') return r.businessPattern?.details || null;
|
||
if (currentModal.value === 'gua') return r.gua?.details || null;
|
||
if (currentModal.value === 'team') return r.team?.details || null;
|
||
if (currentModal.value === 'years') return r.years?.details || null;
|
||
if (currentModal.value === 'wealthTrend') return r.wealthTrend?.details || null;
|
||
if (currentModal.value === 'direction') return r.direction?.details || null;
|
||
if (currentModal.value === 'layout') return r.layout?.details || null;
|
||
if (currentModal.value === 'execution') return r.execution?.details || null;
|
||
|
||
return null;
|
||
});
|
||
|
||
const modalTitle = computed(() => modalPayload.value?.title || '详情');
|
||
const modalNodes = computed<CompanyAnalysisDetailNode[]>(() => modalPayload.value?.nodes || []);
|
||
|
||
const openModal = (modalType: typeof currentModal.value) => {
|
||
currentModal.value = modalType;
|
||
if (!modalPayload.value) {
|
||
uni.showToast({ title: '暂无详情', icon: 'none' });
|
||
return;
|
||
}
|
||
showModal.value = true;
|
||
};
|
||
|
||
const closeModal = () => {
|
||
showModal.value = false;
|
||
};
|
||
|
||
const isCompanyAnalysisResponse = (p: unknown): p is CompanyAnalysisResponse => {
|
||
if (!p || typeof p !== 'object') return false;
|
||
const obj = p as any;
|
||
return !!(obj.header && obj.characterAnalysis && obj.businessPattern && obj.gua);
|
||
};
|
||
|
||
const fetchFromApi = async (params: CompanyAnalysisRequest) => {
|
||
const start = Date.now();
|
||
stage.value = 'loading';
|
||
|
||
try {
|
||
const res = await namingApi.companyAnalysis(params);
|
||
fetched.value = res;
|
||
} catch (e: any) {
|
||
fetched.value = null;
|
||
uni.showToast({ title: e?.msg || '加载失败', icon: 'none' });
|
||
} finally {
|
||
const elapsed = Date.now() - start;
|
||
const remain = Math.max(0, 2500 - elapsed);
|
||
setTimeout(() => {
|
||
stage.value = 'result';
|
||
}, remain);
|
||
}
|
||
};
|
||
|
||
const stars = ref(
|
||
Array.from({ length: 50 }).map((_, i) => ({
|
||
id: i,
|
||
top: `${Math.random() * 100}%`,
|
||
left: `${Math.random() * 100}%`,
|
||
size: Math.random() * 2 + 1,
|
||
duration: Math.random() * 3 + 2,
|
||
delay: Math.random() * 2
|
||
}))
|
||
);
|
||
|
||
const icons = {
|
||
chevronLeft:
|
||
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTUgMTggOSA xMiAxNSA2IiBzdHJva2U9IiNhMGEwYTAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+'.replace(/\s/g, ''),
|
||
share:
|
||
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTggMTZBMyAzIDAgMSAwIDE4IDEwQTMgMyAwIDAgMCAxOCAxNlpNMTggMTZMMTggMTZMMTggMTZaTTE4IDEwTDggMTMuNU04IDEzLjVMNiAxMk04IDEzLjVMNiAxNU02IDEyQTMgMyAwIDEgMCA2IDE4QTMgMyAwIDAgMCA2IDEyWk02IDE1QTMgMyAwIDEgMCA2IDlBMyAzIDAgMCAwIDYgMTVaIiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=',
|
||
building:
|
||
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMyAyMVY5bDkgLTUgOSA1djEySDEyVjE1SDl2NmgtNnoiIHN0cm9rZT0iI2Q0YWYzNyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xMiA5aC4wMSIgc3Ryb2tlPSIjZDRhZjM3IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+',
|
||
quote:
|
||
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2Q0YWYzNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQgMjF2LTNhMiAyIDAgMCAxIDItMmgzYTIgMiAwIDAgMCAyLTJWOWEyIDIgMCAwIDAtMi0yaC00YTIgMiAwIDAgMC0yIDJ2MmEyIDIgMCAwIDEtMiAyaC0xVjVoMTJ2MTBhNiA2IDAgMCAxLTYgNnptLTkgMHYtM2EyIDIgMCAwIDEgMi0yaDNhMiAyIDAgMCAwIDItMlY5YTIgMiAwIDAgMC0yLTJINmEyIDIgMCAwIDAtMiAyvB/vPjwvc3ZnPg=='.replace(/\s/g, ''),
|
||
scroll:
|
||
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTkgM0g4YTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxMW0wLTIwYTIgMiAwIDAgMSAyIDJ2MTRhMiAyIDAgMCAxLTIgMkg4bTExLTQgaC05IiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=',
|
||
target:
|
||
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI5IiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMS41Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNSIgc3Ryb2tlPSIjZDRhZjM3IiBzdHJva2Utd2lkdGg9IjEuNSIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEiIGZpbGw9IiNkNGFmMzciLz48L3N2Zz4=',
|
||
award:
|
||
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMTdhNSA1IDAgMSAwIDAtMTAgNSA1IDAgMCAwIDAgMTB6IiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMS41Ii8+PHBhdGggZD0iTTEyIDE3djQgMi0xIDItMyAyIDEtMSAyLTMgMiAxVjE3IiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=',
|
||
users:
|
||
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTcgMjF2LTJhNCA0IDAgMCAwLTQtNEg5YTQgNCAwIDAgMC00IDR2MiIgc3Ryb2tlPSIjZDRhZjM3IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTExIDEzYTQgNCAwIDEgMCAwLTggNCA0IDAgMCAwIDAgOHoiIHN0cm9rZT0iI2Q0YWYzNyIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48L3N2Zz4=',
|
||
sparkles:
|
||
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMmwyIDEwIDEwIDItMTAgMi0yIDEwLTItMTAtMTAtMiAxMC0yLTIgMTAtMi0xMC0yLTEwIDItMi0xMCAyLTEwIiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=',
|
||
trending:
|
||
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cG9seWxpbmUgcG9pbnRzPSIyMyA2IDEzLjUgMTUuNSA4LjUgMTAuNSA xIDE4IiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cG9seWxpbmUgcG9pbnRzPSIxNyA2IDIzIDYgMjMgMTIiIHN0cm9rZT0iI2Q0YWYzNyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg=='.replace(/\s/g, ''),
|
||
mapPin:
|
||
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMjFzNi00LjM1IDYtMTBhNiA2IDAgMSAwLTEyIDBjMCA1LjY1IDYgMTAgNiAxMHoiIHN0cm9rZT0iI2Q0YWYzNyIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjExIiByPSIyIiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMS41Ii8+PC9zdmc+',
|
||
layout:
|
||
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iNyIgaGVpZ2h0PSI3IiBzdHJva2U9IiNkNGFmMzciIHN0cm9rZS13aWR0aD0iMS41Ii8+PHJlY3QgeD0iMTQiIHk9IjMiIHdpZHRoPSI3IiBoZWlnaHQ9IjciIHN0cm9rZT0iI2Q0YWYzNyIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cmVjdCB4PSIzIiB5PSIxNCIgd2lkdGg9IjciIGhlaWdodD0iNyIgc3Ryb2tlPSIjZDRhZjM3IiBzdHJva2Utd2lkdGg9IjEuNSIvPjxyZWN0IHg9IjE0IiB5PSIxNCIgd2lkdGg9IjciIGhlaWdodD0iNyIgc3Ryb2tlPSIjZDRhZjM3IiBzdHJva2Utd2lkdGg9IjEuNSIvPjwvc3ZnPg==',
|
||
zap:
|
||
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cG9seWxpbmUgcG9pbnRzPSIxMyAyIDMgMTQgMTIgMTQgMTEgMjIgMjEgMTAiIHN0cm9rZT0iI2Q0YWYzNyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg=='
|
||
};
|
||
|
||
const getElementClass = (element: ElementType) => {
|
||
if (element === '火') return 'el-fire';
|
||
if (element === '金') return 'el-gold';
|
||
return 'el-default';
|
||
};
|
||
|
||
const radarLabels = computed(() => result.value?.businessPattern?.radar?.labels || ['财运', '名望', '团队', '机遇', '竞力', '基业']);
|
||
const radarValues = computed(() => result.value?.businessPattern?.radar?.values || [0, 0, 0, 0, 0, 0]);
|
||
|
||
const bizSixdimFillStyle = computed(() => {
|
||
const maxValue = 100;
|
||
const centerX = 50;
|
||
const centerY = 50;
|
||
const baseRadius = 44;
|
||
|
||
const values = radarValues.value;
|
||
const points = Array.from({ length: 6 }).map((_, idx) => {
|
||
const raw = Number(values[idx] ?? 0);
|
||
const value = Math.max(0, Math.min(100, raw));
|
||
const angle = (idx * 60 - 90) * (Math.PI / 180);
|
||
const radius = (value / maxValue) * baseRadius;
|
||
const x = centerX + radius * Math.cos(angle);
|
||
const y = centerY + radius * Math.sin(angle);
|
||
return { x, y };
|
||
});
|
||
|
||
const path = points.map((p) => `${p.x}% ${p.y}%`).join(', ');
|
||
return {
|
||
clipPath: `polygon(${path})`
|
||
};
|
||
});
|
||
|
||
const goodDotStyle = computed(() => {
|
||
const dot = result.value?.direction?.goodDot;
|
||
if (!dot) return {};
|
||
return {
|
||
left: `${dot.x}%`,
|
||
top: `${dot.y}%`
|
||
};
|
||
});
|
||
|
||
const handleShare = () => {
|
||
uni.showToast({ title: '敬请期待', icon: 'none' });
|
||
};
|
||
|
||
watch(
|
||
() => props.params,
|
||
(p: CompanyAnalysisRequest | CompanyAnalysisResponse | null | undefined) => {
|
||
if (p && isCompanyAnalysisResponse(p)) {
|
||
fetched.value = p;
|
||
stage.value = 'loading';
|
||
setTimeout(() => {
|
||
stage.value = 'result';
|
||
}, 2500);
|
||
return;
|
||
}
|
||
|
||
if (p) {
|
||
fetchFromApi(p as CompanyAnalysisRequest);
|
||
return;
|
||
}
|
||
|
||
stage.value = 'loading';
|
||
setTimeout(() => {
|
||
stage.value = 'result';
|
||
}, 2500);
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
|
||
watch(
|
||
() => props.data,
|
||
(d: CompanyAnalysisResponse | null | undefined) => {
|
||
if (!d) return;
|
||
fetched.value = null;
|
||
stage.value = 'loading';
|
||
setTimeout(() => {
|
||
stage.value = 'result';
|
||
}, 2500);
|
||
}
|
||
);
|
||
|
||
onMounted(() => {
|
||
stage.value = 'loading';
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.company-analysis {
|
||
height: 100vh;
|
||
position: relative;
|
||
overflow: hidden;
|
||
font-family: SimSun, "Songti SC", "Songti TC", "Noto Serif SC", STSong, serif;
|
||
color: #e2e2e2;
|
||
background: #0a0a0f;
|
||
}
|
||
|
||
.starry-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
background: linear-gradient(to bottom, #050508, #0f1020, #1a1a2e);
|
||
}
|
||
|
||
.star {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
opacity: 0.2;
|
||
animation: twinkle 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes twinkle {
|
||
0%,
|
||
100% {
|
||
opacity: 0.1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
50% {
|
||
opacity: 0.5;
|
||
transform: scale(1.2);
|
||
}
|
||
}
|
||
|
||
.glow-1 {
|
||
position: absolute;
|
||
top: -10%;
|
||
right: -10%;
|
||
width: 60%;
|
||
height: 60%;
|
||
background: #d4af37;
|
||
opacity: 0.05;
|
||
filter: blur(120px);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.glow-2 {
|
||
position: absolute;
|
||
bottom: -10%;
|
||
left: -10%;
|
||
width: 50%;
|
||
height: 50%;
|
||
background: #2a3d5d;
|
||
opacity: 0.1;
|
||
filter: blur(100px);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.loading-wrap {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 48rpx;
|
||
text-align: center;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.loading-ring {
|
||
width: 256rpx;
|
||
height: 256rpx;
|
||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||
border-radius: 999rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
margin-bottom: 64rpx;
|
||
animation: spin 10s linear infinite;
|
||
}
|
||
|
||
.loading-ring-inner {
|
||
position: absolute;
|
||
inset: 16rpx;
|
||
border: 1px solid rgba(212, 175, 55, 0.1);
|
||
border-radius: 999rpx;
|
||
}
|
||
|
||
.loading-ring-top {
|
||
position: absolute;
|
||
inset: 0;
|
||
border-top: 4rpx solid #d4af37;
|
||
border-radius: 999rpx;
|
||
}
|
||
|
||
@keyframes spin {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.loading-icon {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.loading-title {
|
||
color: #d4af37;
|
||
letter-spacing: 0.4em;
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.loading-subtitle {
|
||
margin-top: 24rpx;
|
||
color: #a0a0a0;
|
||
letter-spacing: 0.2em;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.result-wrap {
|
||
position: relative;
|
||
z-index: 10;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.top-nav {
|
||
padding: 32rpx;
|
||
padding-top: calc(32rpx + env(safe-area-inset-top, 0px));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||
background: rgba(10, 10, 15, 0.5);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.nav-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
min-width: 120rpx;
|
||
}
|
||
|
||
.nav-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
|
||
.nav-icon-share {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
|
||
.nav-text {
|
||
font-size: 22rpx;
|
||
letter-spacing: 0.2em;
|
||
color: #a0a0a0;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 0.3em;
|
||
color: #d4af37;
|
||
}
|
||
|
||
.content-scroll {
|
||
flex: 1;
|
||
height: 0;
|
||
}
|
||
|
||
.content-inner {
|
||
padding: 40rpx;
|
||
padding-bottom: 160rpx;
|
||
}
|
||
|
||
.score-card {
|
||
background: linear-gradient(135deg, #1a1a2e, #10101a);
|
||
border: 1px solid rgba(212, 175, 55, 0.2);
|
||
padding: 48rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
margin-bottom: 48rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.score-card-deco {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
background: #d4af37;
|
||
opacity: 0.03;
|
||
border-bottom-left-radius: 999rpx;
|
||
}
|
||
|
||
.score-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.score-name {
|
||
font-size: 44rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 0.2em;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.score-tags {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.score-tag {
|
||
font-size: 18rpx;
|
||
color: #a0a0a0;
|
||
border: 1px solid rgba(160, 160, 160, 0.3);
|
||
padding: 6rpx 12rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.score-tag-gold {
|
||
color: #d4af37;
|
||
border-color: rgba(212, 175, 55, 0.3);
|
||
background: rgba(212, 175, 55, 0.05);
|
||
}
|
||
|
||
.score-right {
|
||
text-align: right;
|
||
}
|
||
|
||
.score-label {
|
||
display: block;
|
||
font-size: 18rpx;
|
||
color: #d4af37;
|
||
letter-spacing: 0.2em;
|
||
opacity: 0.8;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.score-value {
|
||
display: block;
|
||
font-size: 96rpx;
|
||
font-weight: 700;
|
||
color: #d4af37;
|
||
font-family: serif;
|
||
}
|
||
|
||
.divider {
|
||
height: 2rpx;
|
||
width: 100%;
|
||
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||
margin: 32rpx 0;
|
||
}
|
||
|
||
.quote-row {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.quote-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-top: 6rpx;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.quote-text {
|
||
font-size: 22rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.8;
|
||
font-style: italic;
|
||
}
|
||
|
||
.section {
|
||
margin-bottom: 64rpx;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 32rpx;
|
||
padding-left: 8rpx;
|
||
}
|
||
|
||
.section-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 0.24em;
|
||
}
|
||
|
||
.char-row {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.char-card {
|
||
flex: 1;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.char-element-wrap {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.char-element {
|
||
font-size: 16rpx;
|
||
padding: 4rpx 10rpx;
|
||
border-radius: 999rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.el-fire {
|
||
border-color: rgba(239, 68, 68, 0.5);
|
||
color: rgba(248, 113, 113, 1);
|
||
}
|
||
|
||
.el-gold {
|
||
border-color: rgba(234, 179, 8, 0.5);
|
||
color: rgba(250, 204, 21, 1);
|
||
}
|
||
|
||
.char-char {
|
||
font-size: 64rpx;
|
||
font-weight: 700;
|
||
margin-top: 8rpx;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.char-stroke {
|
||
font-size: 18rpx;
|
||
color: #a0a0a0;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.char-meaning {
|
||
font-size: 18rpx;
|
||
color: #a0a0a0;
|
||
text-align: center;
|
||
line-height: 1.4;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.section-paragraph {
|
||
margin-top: 20rpx;
|
||
font-size: 18rpx;
|
||
color: #a0a0a0;
|
||
line-height: 2;
|
||
text-align: justify;
|
||
padding: 0 8rpx;
|
||
}
|
||
|
||
.section-paragraph-highlight {
|
||
color: #d4af37;
|
||
}
|
||
|
||
.radar-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
border-radius: 16rpx;
|
||
padding: 28rpx;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.biz-sixdim-radar {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 380rpx;
|
||
margin: 0 auto;
|
||
padding-top: 65%;
|
||
background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.06), transparent 70%);
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.biz-sixdim-svg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 3;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.biz-sixdim-fill {
|
||
position: absolute;
|
||
inset: 24%;
|
||
margin: auto;
|
||
background: linear-gradient(to bottom, rgba(212, 175, 55, 0.75), rgba(42, 61, 93, 0.55));
|
||
opacity: 0.88;
|
||
transition: clip-path 0.5s ease-out;
|
||
z-index: 2;
|
||
}
|
||
|
||
.biz-sixdim-label {
|
||
position: absolute;
|
||
font-size: 20rpx;
|
||
color: #cfd2dc;
|
||
z-index: 4;
|
||
}
|
||
|
||
.biz-sixdim-label-0 {
|
||
top: 6%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.biz-sixdim-label-1 {
|
||
top: 26%;
|
||
right: 6%;
|
||
}
|
||
|
||
.biz-sixdim-label-2 {
|
||
bottom: 28%;
|
||
right: 4%;
|
||
}
|
||
|
||
.biz-sixdim-label-3 {
|
||
bottom: 4%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.biz-sixdim-label-4 {
|
||
bottom: 28%;
|
||
left: 4%;
|
||
}
|
||
|
||
.biz-sixdim-label-5 {
|
||
top: 26%;
|
||
left: 6%;
|
||
}
|
||
|
||
.radar-wrap {
|
||
width: 100%;
|
||
height: 380rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.radar-svg {
|
||
width: 380rpx;
|
||
height: 380rpx;
|
||
overflow: visible;
|
||
}
|
||
|
||
.radar-summary-grid {
|
||
margin-top: 16rpx;
|
||
display: flex;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.radar-summary-item {
|
||
flex: 1;
|
||
background: rgba(212, 175, 55, 0.1);
|
||
border: 1px solid rgba(212, 175, 55, 0.2);
|
||
border-radius: 12rpx;
|
||
padding: 16rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.radar-summary-label {
|
||
font-size: 18rpx;
|
||
color: #a0a0a0;
|
||
}
|
||
|
||
.radar-summary-value {
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
color: #d4af37;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.gua-card {
|
||
background: #1a1a2e;
|
||
border-left: 8rpx solid #d4af37;
|
||
padding: 40rpx;
|
||
border-top-right-radius: 16rpx;
|
||
border-bottom-right-radius: 16rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.gua-bg {
|
||
position: absolute;
|
||
right: -20rpx;
|
||
bottom: -20rpx;
|
||
font-size: 160rpx;
|
||
color: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.gua-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.gua-name {
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 0.2em;
|
||
}
|
||
|
||
.gua-badge {
|
||
font-size: 18rpx;
|
||
color: #d4af37;
|
||
background: rgba(212, 175, 55, 0.2);
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 999rpx;
|
||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||
}
|
||
|
||
.gua-desc {
|
||
font-size: 22rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.8;
|
||
text-align: justify;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.gua-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.gua-tag {
|
||
font-size: 18rpx;
|
||
color: #d4af37;
|
||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||
background: rgba(212, 175, 55, 0.05);
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.gua-insight-title {
|
||
font-size: 18rpx;
|
||
color: #d4af37;
|
||
font-weight: 700;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.gua-insight-text {
|
||
font-size: 18rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.team-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.team-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.team-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.team-avatar {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 999rpx;
|
||
background: #2a3d5d;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.team-avatar-text {
|
||
font-size: 18rpx;
|
||
}
|
||
|
||
.team-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.team-role {
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.team-desc {
|
||
font-size: 18rpx;
|
||
color: #a0a0a0;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.team-match {
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
.team-match-gold {
|
||
color: #d4af37;
|
||
}
|
||
|
||
.team-note {
|
||
margin-top: 16rpx;
|
||
font-size: 16rpx;
|
||
color: rgba(160, 160, 160, 0.6);
|
||
text-align: center;
|
||
}
|
||
|
||
.year-scroll {
|
||
width: 100%;
|
||
}
|
||
|
||
.year-row {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
padding-bottom: 16rpx;
|
||
}
|
||
|
||
.year-card {
|
||
min-width: 200rpx;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.year-year {
|
||
font-size: 22rpx;
|
||
color: #a0a0a0;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.year-luck {
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.year-luck-gold {
|
||
color: #d4af37;
|
||
}
|
||
|
||
.year-divider {
|
||
height: 2rpx;
|
||
width: 32rpx;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.year-text {
|
||
font-size: 16rpx;
|
||
color: #a0a0a0;
|
||
text-align: center;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.grid-2 {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
margin-bottom: 64rpx;
|
||
}
|
||
|
||
.small-card {
|
||
flex: 1;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.small-card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.small-card-icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.small-card-title {
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.bars {
|
||
height: 160rpx;
|
||
display: flex;
|
||
gap: 6rpx;
|
||
align-items: flex-end;
|
||
padding-top: 16rpx;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
padding-bottom: 8rpx;
|
||
}
|
||
|
||
.bar-bg {
|
||
flex: 1;
|
||
height: 100%;
|
||
align-self: stretch;
|
||
background: rgba(212, 175, 55, 0.2);
|
||
border-top-left-radius: 6rpx;
|
||
border-top-right-radius: 6rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bar-fill {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
background: #d4af37;
|
||
opacity: 0.6;
|
||
border-top-left-radius: 6rpx;
|
||
border-top-right-radius: 6rpx;
|
||
}
|
||
|
||
.small-card-note {
|
||
font-size: 18rpx;
|
||
color: #a0a0a0;
|
||
margin-top: 16rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.compass {
|
||
position: relative;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin: 0 auto;
|
||
border: 4rpx solid #5a5a5a;
|
||
border-radius: 999rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.compass-n,
|
||
.compass-s,
|
||
.compass-e,
|
||
.compass-w {
|
||
position: absolute;
|
||
font-size: 18rpx;
|
||
padding: 2rpx 6rpx;
|
||
background: #1a1a2e;
|
||
}
|
||
|
||
.compass-gold {
|
||
color: #d4af37;
|
||
}
|
||
|
||
.compass-n {
|
||
top: -10rpx;
|
||
}
|
||
|
||
.compass-s {
|
||
bottom: -10rpx;
|
||
color: #a0a0a0;
|
||
}
|
||
|
||
.compass-w {
|
||
left: -12rpx;
|
||
color: #a0a0a0;
|
||
}
|
||
|
||
.compass-e {
|
||
right: -12rpx;
|
||
}
|
||
|
||
.compass-dot {
|
||
position: absolute;
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background: #d4af37;
|
||
border-radius: 999rpx;
|
||
transform: translate(-50%, -50%);
|
||
box-shadow: 0 0 10rpx #d4af37;
|
||
}
|
||
|
||
.layout-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.layout-row {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.layout-dot {
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
border-radius: 999rpx;
|
||
background: #d4af37;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.layout-text {
|
||
font-size: 20rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.layout-strong {
|
||
color: #e2e2e2;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.layout-highlight {
|
||
color: #d4af37;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.exec-card {
|
||
background: rgba(212, 175, 55, 0.1);
|
||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 64rpx;
|
||
}
|
||
|
||
.exec-row {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.exec-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.exec-body {
|
||
flex: 1;
|
||
}
|
||
|
||
.exec-title {
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
color: #d4af37;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.exec-text {
|
||
font-size: 20rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.modal-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.55);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
}
|
||
|
||
.modal-container {
|
||
width: 100%;
|
||
max-height: 78vh;
|
||
background: rgba(10, 10, 15, 0.96);
|
||
border-top-left-radius: 24rpx;
|
||
border-top-right-radius: 24rpx;
|
||
border: 1px solid rgba(212, 175, 55, 0.2);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.modal-header {
|
||
padding: 28rpx 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||
}
|
||
|
||
.modal-title {
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
color: #d4af37;
|
||
letter-spacing: 0.2em;
|
||
}
|
||
|
||
.modal-close {
|
||
width: 64rpx;
|
||
text-align: right;
|
||
font-size: 44rpx;
|
||
line-height: 44rpx;
|
||
color: rgba(160, 160, 160, 0.9);
|
||
}
|
||
|
||
.modal-body {
|
||
max-height: calc(78vh - 96rpx);
|
||
padding: 28rpx 32rpx;
|
||
}
|
||
|
||
.modal-text {
|
||
display: block;
|
||
font-size: 20rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.9;
|
||
margin-bottom: 18rpx;
|
||
text-align: justify;
|
||
}
|
||
|
||
.modal-list {
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.modal-list-item {
|
||
display: flex;
|
||
gap: 14rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.modal-list-dot {
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
border-radius: 999rpx;
|
||
background: #d4af37;
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.modal-list-text {
|
||
flex: 1;
|
||
font-size: 20rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.modal-kv {
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.modal-kv-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 24rpx;
|
||
padding: 14rpx 0;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||
}
|
||
|
||
.modal-kv-row:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.modal-kv-label {
|
||
font-size: 18rpx;
|
||
color: rgba(160, 160, 160, 0.9);
|
||
}
|
||
|
||
.modal-kv-value {
|
||
font-size: 18rpx;
|
||
color: rgba(226, 226, 226, 0.95);
|
||
text-align: right;
|
||
}
|
||
</style>
|