2329 lines
78 KiB
Vue
2329 lines
78 KiB
Vue
<template>
|
||
<view class="company-detail" :class="{ 'company-detail--desktop': desktopLayout }">
|
||
<!-- Starry Background -->
|
||
<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>
|
||
<view class="glow-top"></view>
|
||
<view class="glow-bottom"></view>
|
||
</view>
|
||
|
||
<!-- Header -->
|
||
<view class="detail-header">
|
||
<view class="detail-header-back" @click="handleBack">
|
||
<text class="back-icon">‹</text>
|
||
<text class="back-text">返回</text>
|
||
</view>
|
||
<text class="detail-header-title">商号详解</text>
|
||
<view class="detail-header-favorite" @click="toggleFavorite">
|
||
<text class="favorite-icon" :class="{ 'favorite-icon-active': isFavorited }">{{ isFavorited ? '❤' : '♡'
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Content -->
|
||
<scroll-view scroll-y class="detail-content" :class="{ 'detail-content--desktop': desktopLayout }">
|
||
<view class="detail-content-inner" :class="{ 'detail-content-inner--desktop': desktopLayout }">
|
||
<!-- 1. 总分卡片 -->
|
||
<view class="score-card" @click="openModal('zonghe')">
|
||
<view class="score-corner score-corner-tl"></view>
|
||
<view class="score-corner score-corner-tr"></view>
|
||
<view class="score-corner score-corner-bl"></view>
|
||
<view class="score-corner score-corner-br"></view>
|
||
|
||
<view class="score-label">TOTAL SCORE</view>
|
||
<view class="score-value-wrap">
|
||
<text class="score-value">{{ detailData.total_score }}</text>
|
||
<view class="score-ring"></view>
|
||
</view>
|
||
|
||
<view class="score-stars">
|
||
<text v-for="i in 5" :key="i" class="score-star"
|
||
:class="{ active: i <= detailData.star_rating }">★</text>
|
||
</view>
|
||
|
||
<view class="score-divider"></view>
|
||
|
||
<text class="score-name">{{ detailData.name }}</text>
|
||
<text class="score-pinyin">{{ detailData.pinyin }}</text>
|
||
|
||
<view v-if="zongheContent" class="master-comment">
|
||
<text class="master-rating">{{ zongheContent.rating }}</text>
|
||
<text class="master-summary-preview">{{ truncateText(zongheContent.summary, 50) }}</text>
|
||
<text class="click-hint">点击查看详解 ›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 2. 品牌意象解析 -->
|
||
<view v-if="pinpaiSection" class="section" @click="openModal('pinpai')">
|
||
<view class="section-title">
|
||
<text class="section-icon">🏢</text>
|
||
<text class="section-text">{{ pinpaiSection.title }}</text>
|
||
<text class="section-hint">点击详解 ›</text>
|
||
</view>
|
||
<view class="meaning-card">
|
||
<view class="meaning-quote">❝</view>
|
||
<text class="meaning-label">商业寓意</text>
|
||
<text class="meaning-text">{{ detailData.name_meaning }}</text>
|
||
<view class="meaning-judge">
|
||
<text class="meaning-judge-label">判断：</text>
|
||
<text class="meaning-judge-text">{{ pinpaiSection.summary_data.judgment }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 3. 商业数理吉凶 -->
|
||
<view v-if="shuliSection" class="section" @click="openModal('shuli')">
|
||
<view class="section-title">
|
||
<text class="section-icon">#</text>
|
||
<text class="section-text">{{ shuliSection.title }}</text>
|
||
<text class="section-hint">点击详解 ›</text>
|
||
</view>
|
||
<view class="math-card">
|
||
<view class="math-header">
|
||
<view class="math-info">
|
||
<text class="math-label">总格 (81数理)</text>
|
||
<text class="math-value">{{ shuliSection.summary_data.number }} ({{
|
||
shuliSection.summary_data.luck }})</text>
|
||
</view>
|
||
<text class="math-badge">{{ shuliSection.summary_data.luck_name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 4. 市场潜力评估 -->
|
||
<view v-if="shichangSection" class="section section--desktop-wide" @click="openModal('shichang')">
|
||
<view class="section-title">
|
||
<text class="section-icon">📊</text>
|
||
<text class="section-text">{{ shichangSection.title }}</text>
|
||
<text class="section-hint">点击详解 ›</text>
|
||
</view>
|
||
<view class="radar-card">
|
||
<view class="radar-labels">
|
||
<view class="radar-label-item">
|
||
<text class="radar-label-name">传播力</text>
|
||
<text class="radar-label-value">{{ formatScore(shichangSection.summary_data.scores.comm)
|
||
}}</text>
|
||
</view>
|
||
<view class="radar-label-item">
|
||
<text class="radar-label-name">契合度</text>
|
||
<text class="radar-label-value">{{
|
||
formatScore(shichangSection.summary_data.scores.compat)
|
||
}}</text>
|
||
</view>
|
||
<view class="radar-label-item">
|
||
<text class="radar-label-name">财运</text>
|
||
<text class="radar-label-value">{{
|
||
formatScore(shichangSection.summary_data.scores.wealth)
|
||
}}</text>
|
||
</view>
|
||
<view class="radar-label-item">
|
||
<text class="radar-label-name">领导力</text>
|
||
<text class="radar-label-value">{{ formatScore(shichangSection.summary_data.scores.lead)
|
||
}}</text>
|
||
</view>
|
||
<view class="radar-label-item">
|
||
<text class="radar-label-name">凝聚力</text>
|
||
<text class="radar-label-value">{{
|
||
formatScore(shichangSection.summary_data.scores.cohes)
|
||
}}</text>
|
||
</view>
|
||
<view class="radar-label-item">
|
||
<text class="radar-label-name">创新力</text>
|
||
<text class="radar-label-value">{{
|
||
formatScore(shichangSection.summary_data.scores.innov)
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 5. 商业卦象 -->
|
||
<view v-if="guaxiangSection" class="section" @click="openModal('guaxiang')">
|
||
<view class="section-title">
|
||
<text class="section-icon">☯</text>
|
||
<text class="section-text">{{ guaxiangSection.title }}</text>
|
||
<text class="section-hint">点击详解 ›</text>
|
||
</view>
|
||
<view class="gua-card">
|
||
<view class="gua-bg-text">{{ getGuaChar(guaxiangSection.summary_data.gua) }}</view>
|
||
<view class="gua-content">
|
||
<view class="gua-header">
|
||
<text class="gua-name">{{ guaxiangSection.summary_data.gua }}</text>
|
||
<text class="gua-badge">{{ guaxiangSection.summary_data.gua_type }}</text>
|
||
</view>
|
||
<text class="gua-desc">{{ guaxiangSection.summary_data.text }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 5b–5g. 与公司测名 JSON 扩展模块（与个人测名同字段名：liuyao 等） -->
|
||
<view v-if="hasCompanyLiuyao" class="section" @click="openModal('liuyao')">
|
||
<view class="section-title">
|
||
<text class="section-icon">🔮</text>
|
||
<text class="section-text">六爻</text>
|
||
<text class="section-hint">点击详解 ›</text>
|
||
</view>
|
||
<view class="meaning-card company-extra-card">
|
||
<view class="meaning-quote">❝</view>
|
||
<text v-if="toText(companyLiuyao?.hexagram_title)" class="modal-text company-extra-strong">{{
|
||
companyLiuyao?.hexagram_title }}</text>
|
||
<text v-if="toText(companyLiuyao?.changing_summary)" class="modal-text">动爻：{{
|
||
companyLiuyao?.changing_summary }}</text>
|
||
<text v-if="toText(companyLiuyao?.interpretation)" class="modal-text">{{
|
||
companyLiuyao?.interpretation }}</text>
|
||
<text v-for="(yl, yi) in arr(companyLiuyao?.yao_lines).slice(0, 6)" :key="yi" class="modal-text">{{
|
||
toText(yl) }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="hasCompanyWuxingBagua" class="section" @click="openModal('wuxing_bagua')">
|
||
<view class="section-title">
|
||
<text class="section-icon">☰</text>
|
||
<text class="section-text">五行八卦</text>
|
||
<text class="section-hint">点击详解 ›</text>
|
||
</view>
|
||
<view class="math-card company-extra-flat">
|
||
<text v-if="toText(companyWuxingBagua?.wuxing_sketch)" class="modal-text company-extra-strong">五行：{{
|
||
companyWuxingBagua?.wuxing_sketch }}</text>
|
||
<text v-if="toText(companyWuxingBagua?.bagua_profile)" class="modal-text">八卦：{{
|
||
companyWuxingBagua?.bagua_profile }}</text>
|
||
<text v-if="toText(companyWuxingBagua?.mutual_sketch)" class="modal-text">{{
|
||
companyWuxingBagua?.mutual_sketch }}</text>
|
||
<text v-if="toText(companyWuxingBagua?.summary)" class="modal-text">{{ companyWuxingBagua?.summary
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="hasCompanyZodiacSign" class="section" @click="openModal('zodiac_sign')">
|
||
<view class="section-title">
|
||
<text class="section-icon">🐲</text>
|
||
<text class="section-text">属相</text>
|
||
<text class="section-hint">点击详解 ›</text>
|
||
</view>
|
||
<view class="founder-card company-extra-card">
|
||
<view class="founder-header">
|
||
<view class="founder-avatar">
|
||
<text class="founder-avatar-text">{{ toText(companyZodiacSign?.animal_icon) ||
|
||
toText(companyZodiacSign?.animal).slice(0, 1) || '属' }}</text>
|
||
</view>
|
||
<view class="founder-info">
|
||
<text class="founder-title">属相</text>
|
||
<text class="founder-desc">{{ toText(companyZodiacSign?.animal) }} {{
|
||
toText(companyZodiacSign?.earthly_branch) }}</text>
|
||
<text v-if="toText(companyZodiacSign?.trait_summary)" class="modal-text company-extra-sub">{{
|
||
companyZodiacSign?.trait_summary }}</text>
|
||
<text v-if="toText(companyZodiacSign?.name_harmony)" class="modal-text company-extra-sub">与商号：{{
|
||
companyZodiacSign?.name_harmony }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="hasCompanyCareerPlan" class="section" @click="openModal('career_plan')">
|
||
<view class="section-title">
|
||
<text class="section-icon">💼</text>
|
||
<text class="section-text">事业规划</text>
|
||
<text class="section-hint">点击详解 ›</text>
|
||
</view>
|
||
<view class="math-card company-extra-flat">
|
||
<text v-if="toText(companyCareerPlan?.summary)" class="modal-text">{{ companyCareerPlan?.summary
|
||
}}</text>
|
||
<view v-for="(m, mi) in arr(companyCareerPlan?.milestones)" :key="mi"
|
||
class="company-career-milestone">
|
||
<text class="modal-text company-extra-strong">{{ toText(m?.phase) }}{{ toText(m?.period) ? ' · '
|
||
+ toText(m.period) : '' }}</text>
|
||
<text v-if="toText(m?.focus)" class="modal-text">{{ m?.focus }}</text>
|
||
<text v-if="toText(m?.advice)" class="modal-text">{{ m?.advice }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="hasCompanyLuckyNumbers" class="section" @click="openModal('lucky_numbers')">
|
||
<view class="section-title">
|
||
<text class="section-icon">🔢</text>
|
||
<text class="section-text">幸运数字</text>
|
||
<text class="section-hint">点击详解 ›</text>
|
||
</view>
|
||
<view class="math-card company-extra-flat">
|
||
<text v-if="toText(companyLuckyNumbers?.primary)" class="modal-text company-extra-strong">主推：{{
|
||
companyLuckyNumbers?.primary }}</text>
|
||
<text v-if="companyLuckyNumbersDisplay" class="modal-text">{{ companyLuckyNumbersDisplay }}</text>
|
||
<text v-if="toText(companyLuckyNumbers?.meaning)" class="modal-text">{{ companyLuckyNumbers?.meaning
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="hasCompanyLuckyColors" class="section" @click="openModal('lucky_colors')">
|
||
<view class="section-title">
|
||
<text class="section-icon">🎨</text>
|
||
<text class="section-text">幸运颜色</text>
|
||
<text class="section-hint">点击详解 ›</text>
|
||
</view>
|
||
<view class="math-card company-extra-flat">
|
||
<text v-if="toText(companyLuckyColors?.primary)" class="modal-text company-extra-strong">主推：{{
|
||
companyLuckyColors?.primary }}</text>
|
||
<view v-for="(c, ci) in arr(companyLuckyColors?.colors)" :key="ci" class="company-lucky-color-row">
|
||
<view v-if="toText(c?.hex)" class="company-lucky-swatch"
|
||
:style="{ backgroundColor: toText(c?.hex) }" />
|
||
<text class="modal-text company-lucky-color-text">{{ toText(c?.name) }}{{ toText(c?.note) ? ' — '
|
||
+ toText(c?.note) : '' }}</text>
|
||
</view>
|
||
<text v-if="toText(companyLuckyColors?.meaning)" class="modal-text">{{ companyLuckyColors?.meaning
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 6. 创始人契合度 -->
|
||
<view v-if="founderSection" class="section" @click="openModal('founder')">
|
||
<view class="section-title">
|
||
<text class="section-icon">👤</text>
|
||
<text class="section-text">{{ founderSection.title }}</text>
|
||
<text class="section-hint">点击详解 ›</text>
|
||
</view>
|
||
<view class="founder-card">
|
||
<view class="founder-header">
|
||
<view class="founder-avatar">
|
||
<text class="founder-avatar-text">创</text>
|
||
</view>
|
||
<view class="founder-info">
|
||
<text class="founder-title">创始人命理</text>
|
||
<text class="founder-desc">{{ founderSection.summary_data.trait }}</text>
|
||
</view>
|
||
<view class="founder-score">
|
||
<text class="founder-score-value">{{ founderSection.summary_data.score }}分</text>
|
||
<text class="founder-score-label">契合指数</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 7. 财运风水布局 -->
|
||
<view v-if="fengshuiSection" class="section" @click="openModal('fengshui')">
|
||
<view class="section-title">
|
||
<text class="section-icon">💎</text>
|
||
<text class="section-text">{{ fengshuiSection.title }}</text>
|
||
<text class="section-hint">点击详解 ›</text>
|
||
</view>
|
||
<view class="fengshui-grid">
|
||
<view class="fengshui-card">
|
||
<text class="fengshui-icon">📍</text>
|
||
<text class="fengshui-label">办公财位</text>
|
||
<text class="fengshui-value">{{ fengshuiSection.summary_data.position }}</text>
|
||
</view>
|
||
<view class="fengshui-card">
|
||
<text class="fengshui-icon">🎨</text>
|
||
<text class="fengshui-label">品牌主色</text>
|
||
<text class="fengshui-value">{{ fengshuiSection.summary_data.colors }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 8. 未来五年运势预测 -->
|
||
<view v-if="wunianSection" class="section" @click="openModal('wunian')">
|
||
<view class="section-title">
|
||
<text class="section-icon">📈</text>
|
||
<text class="section-text">{{ wunianSection.title }}</text>
|
||
<text class="section-hint">点击详解 ›</text>
|
||
</view>
|
||
<view class="trend-card">
|
||
<view class="trend-chart">
|
||
<view v-for="(item, idx) in wunianYears" :key="idx" class="trend-bar-wrap">
|
||
<view class="trend-bar" :style="{ height: item.s + '%' }"
|
||
:class="{ 'trend-bar-highlight': item.s > 90 }"></view>
|
||
<text class="trend-year">{{ item.y }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 9. 企业命理 SWOT 分析 -->
|
||
<view v-if="swotSection" class="section" @click="openModal('swot')">
|
||
<view class="section-title">
|
||
<text class="section-icon">📋</text>
|
||
<text class="section-text">{{ swotSection.title }}</text>
|
||
<text class="section-hint">点击详解 ›</text>
|
||
</view>
|
||
<view class="swot-grid">
|
||
<view class="swot-card swot-card-s">
|
||
<text class="swot-title swot-title-gold">S / 优势</text>
|
||
</view>
|
||
<view class="swot-card swot-card-w">
|
||
<text class="swot-title swot-title-red">W / 劣势</text>
|
||
</view>
|
||
<view class="swot-card swot-card-o">
|
||
<text class="swot-title swot-title-gold">O / 机会</text>
|
||
</view>
|
||
<view class="swot-card swot-card-t">
|
||
<text class="swot-title swot-title-red">T / 威胁</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Action Buttons -->
|
||
<view v-if="props.showBusinessFortune !== false" class="action-buttons">
|
||
<!-- <view class="action-btn action-btn-share">
|
||
<text class="action-btn-icon">📤</text>
|
||
<text class="action-btn-text">生成海报</text>
|
||
</view> -->
|
||
<view class="action-btn action-btn-primary" @click="handleBusinessFortune">
|
||
<text class="action-btn-text">商业运势</text>
|
||
</view>
|
||
<!-- <view class="action-btn action-btn-download">
|
||
<text class="action-btn-icon">📥</text>
|
||
<text class="action-btn-text">下载报告</text>
|
||
</view> -->
|
||
</view>
|
||
|
||
<!-- Footer -->
|
||
<view class="detail-footer">
|
||
<text class="footer-text">壹梵 · 致力于东方美学与易经智慧的传承</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 详情弹窗 -->
|
||
<view v-if="showModal" class="modal-overlay" @click.stop="closeModal">
|
||
<view class="modal-container" @click.stop="">
|
||
<view class="modal-header">
|
||
<text class="modal-title">{{ modalTitle }}</text>
|
||
<view class="modal-close" @click.stop="closeModal">
|
||
<text class="modal-close-icon">×</text>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y class="modal-body">
|
||
<view class="modal-body-contain">
|
||
<!-- 综合评分详情 -->
|
||
<view v-if="currentModal === 'zonghe'" class="modal-content">
|
||
<view v-if="zongheContent && zongheContent.rating" class="modal-rating-badge">{{
|
||
zongheContent.rating }}</view>
|
||
<text class="modal-section-title">大师总评</text>
|
||
<text class="modal-text">{{ zongheContent && zongheContent.summary ? zongheContent.summary :
|
||
'暂无数据' }}</text>
|
||
</view>
|
||
|
||
<!-- 品牌意象详情 -->
|
||
<view v-if="currentModal === 'pinpai'" class="modal-content">
|
||
<text class="modal-section-title">品牌解析</text>
|
||
<view class="modal-item">
|
||
<text class="modal-item-label">核心释义</text>
|
||
<text class="modal-text">{{ pinpaiContent && pinpaiContent.intro ? pinpaiContent.intro :
|
||
'暂无数据' }}</text>
|
||
</view>
|
||
<view class="modal-item">
|
||
<text class="modal-item-label">深度分析</text>
|
||
<text class="modal-text">{{ pinpaiContent && pinpaiContent.analysis ?
|
||
pinpaiContent.analysis
|
||
: '暂无数据' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商业数理详情 -->
|
||
<view v-if="currentModal === 'shuli'" class="modal-content">
|
||
<view v-if="shuliContent && shuliContent.number" class="modal-number-badge">{{
|
||
shuliContent.number }}</view>
|
||
<text v-if="shuliContent && shuliContent.luck_name" class="modal-luck-name">{{
|
||
shuliContent.luck_name }}</text>
|
||
<view class="modal-item">
|
||
<text class="modal-item-label">基本含义</text>
|
||
<text class="modal-text">{{ shuliContent && shuliContent.basic ? shuliContent.basic :
|
||
'暂无数据'
|
||
}}</text>
|
||
</view>
|
||
<view class="modal-item">
|
||
<text class="modal-item-label">商业解读</text>
|
||
<text class="modal-text">{{ shuliContent && shuliContent.biz ? shuliContent.biz : '暂无数据'
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 市场潜力详情 -->
|
||
<view v-if="currentModal === 'shichang'" class="modal-content">
|
||
<text class="modal-section-title">六维评估详解</text>
|
||
<view v-if="shichangContent && shichangContent.comm" class="modal-score-item">
|
||
<view class="modal-score-header">
|
||
<text class="modal-score-name">传播力</text>
|
||
<text class="modal-score-value">{{ shichangContent.comm.score ?
|
||
(shichangContent.comm.score * 10).toFixed(0) : '-' }}分</text>
|
||
</view>
|
||
<text class="modal-text">{{ shichangContent.comm.desc || '暂无数据' }}</text>
|
||
</view>
|
||
<view v-if="shichangContent && shichangContent.lead" class="modal-score-item">
|
||
<view class="modal-score-header">
|
||
<text class="modal-score-name">领导力</text>
|
||
<text class="modal-score-value">{{ shichangContent.lead.score ?
|
||
(shichangContent.lead.score * 10).toFixed(0) : '-' }}分</text>
|
||
</view>
|
||
<text class="modal-text">{{ shichangContent.lead.desc || '暂无数据' }}</text>
|
||
</view>
|
||
<view v-if="shichangContent && shichangContent.cohes" class="modal-score-item">
|
||
<view class="modal-score-header">
|
||
<text class="modal-score-name">凝聚力</text>
|
||
<text class="modal-score-value">{{ shichangContent.cohes.score ?
|
||
(shichangContent.cohes.score * 10).toFixed(0) : '-' }}分</text>
|
||
</view>
|
||
<text class="modal-text">{{ shichangContent.cohes.desc || '暂无数据' }}</text>
|
||
</view>
|
||
<view v-if="shichangContent && shichangContent.innov" class="modal-score-item">
|
||
<view class="modal-score-header">
|
||
<text class="modal-score-name">创新力</text>
|
||
<text class="modal-score-value">{{ shichangContent.innov.score ?
|
||
(shichangContent.innov.score * 10).toFixed(0) : '-' }}分</text>
|
||
</view>
|
||
<text class="modal-text">{{ shichangContent.innov.desc || '暂无数据' }}</text>
|
||
</view>
|
||
<view v-if="shichangContent && shichangContent.compat" class="modal-score-item">
|
||
<view class="modal-score-header">
|
||
<text class="modal-score-name">契合度</text>
|
||
<text class="modal-score-value">{{ shichangContent.compat.score ?
|
||
(shichangContent.compat.score * 10).toFixed(0) : '-' }}分</text>
|
||
</view>
|
||
<text class="modal-text">{{ shichangContent.compat.desc || '暂无数据' }}</text>
|
||
</view>
|
||
<view v-if="shichangContent && shichangContent.wealth" class="modal-score-item">
|
||
<view class="modal-score-header">
|
||
<text class="modal-score-name">财运</text>
|
||
<text class="modal-score-value">{{ shichangContent.wealth.score ?
|
||
(shichangContent.wealth.score * 10).toFixed(0) : '-' }}分</text>
|
||
</view>
|
||
<text class="modal-text">{{ shichangContent.wealth.desc || '暂无数据' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商业卦象详情 -->
|
||
<view v-if="currentModal === 'guaxiang'" class="modal-content">
|
||
<view class="modal-gua-header">
|
||
<text class="modal-gua-name">{{ guaxiangContent && guaxiangContent.gua ?
|
||
guaxiangContent.gua
|
||
: '暂无卦象' }}</text>
|
||
</view>
|
||
<view class="modal-item">
|
||
<text class="modal-item-label">卦象释义</text>
|
||
<text class="modal-text">{{ guaxiangContent && guaxiangContent.interp ?
|
||
guaxiangContent.interp : '暂无数据' }}</text>
|
||
</view>
|
||
<view class="modal-item">
|
||
<text class="modal-item-label">商业解读</text>
|
||
<text class="modal-text">{{ guaxiangContent && guaxiangContent.biz ? guaxiangContent.biz
|
||
:
|
||
'暂无数据' }}</text>
|
||
</view>
|
||
<view class="modal-item">
|
||
<text class="modal-item-label">决策指引</text>
|
||
<text class="modal-text modal-text-highlight">{{ guaxiangContent &&
|
||
guaxiangContent.guide ?
|
||
guaxiangContent.guide : '暂无数据' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 创始人契合详情 -->
|
||
<view v-if="currentModal === 'founder'" class="modal-content">
|
||
<view class="modal-founder-score">
|
||
<text class="modal-founder-score-value">{{ founderContent && founderContent.score ?
|
||
founderContent.score : '-' }}</text>
|
||
<text class="modal-founder-score-label">契合指数</text>
|
||
</view>
|
||
<view class="modal-item">
|
||
<text class="modal-item-label">命理特征</text>
|
||
<text class="modal-text">{{ founderContent && founderContent.trait ?
|
||
founderContent.trait :
|
||
'暂无数据' }}</text>
|
||
</view>
|
||
<view class="modal-item">
|
||
<text class="modal-item-label">详细分析</text>
|
||
<text class="modal-text">{{ founderContent && founderContent.analysis ?
|
||
founderContent.analysis : '暂无数据' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 风水布局详情 -->
|
||
<view v-if="currentModal === 'fengshui'" class="modal-content">
|
||
<text class="modal-section-title">品牌视觉识别建议</text>
|
||
<view class="modal-item">
|
||
<text class="modal-item-label">主色调</text>
|
||
<text class="modal-text">{{ fengshuiContent && fengshuiContent.color ?
|
||
fengshuiContent.color
|
||
: '暂无数据' }}</text>
|
||
</view>
|
||
<view class="modal-item">
|
||
<text class="modal-item-label">Logo形态</text>
|
||
<text class="modal-text">{{ fengshuiContent && fengshuiContent.logo ?
|
||
fengshuiContent.logo :
|
||
'暂无数据' }}</text>
|
||
</view>
|
||
<view class="modal-item">
|
||
<text class="modal-item-label">办公选址</text>
|
||
<text class="modal-text">{{ fengshuiContent && fengshuiContent.office ?
|
||
fengshuiContent.office : '暂无数据' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 五年运势详情 -->
|
||
<view v-if="currentModal === 'wunian'" class="modal-content">
|
||
<text class="modal-section-title">未来五年运势详解</text>
|
||
<view v-for="(year, idx) in wunianYearsDetail" :key="idx" class="modal-year-item">
|
||
<view class="modal-year-header">
|
||
<text class="modal-year-name">{{ year.y }}年</text>
|
||
<text class="modal-year-zhi">({{ year.z }})</text>
|
||
<text class="modal-year-label" :class="{ 'modal-year-label-hot': year.s > 90 }">{{
|
||
year.l }}</text>
|
||
<text class="modal-year-score">{{ year.s }}分</text>
|
||
</view>
|
||
<text class="modal-text">{{ year.d }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- SWOT详情 -->
|
||
<view v-if="currentModal === 'swot'" class="modal-content">
|
||
<text class="modal-section-title">企业命理SWOT分析</text>
|
||
<view class="modal-swot-item modal-swot-s">
|
||
<text class="modal-swot-title">Strengths / 优势</text>
|
||
<text class="modal-text">{{ swotContent && swotContent.s ? swotContent.s : '暂无数据'
|
||
}}</text>
|
||
</view>
|
||
<view class="modal-swot-item modal-swot-w">
|
||
<text class="modal-swot-title">Weaknesses / 劣势</text>
|
||
<text class="modal-text">{{ swotContent && swotContent.w ? swotContent.w : '暂无数据'
|
||
}}</text>
|
||
</view>
|
||
<view class="modal-swot-item modal-swot-o">
|
||
<text class="modal-swot-title">Opportunities / 机会</text>
|
||
<text class="modal-text">{{ swotContent && swotContent.o ? swotContent.o : '暂无数据'
|
||
}}</text>
|
||
</view>
|
||
<view class="modal-swot-item modal-swot-t">
|
||
<text class="modal-swot-title">Threats / 威胁</text>
|
||
<text class="modal-text">{{ swotContent && swotContent.t ? swotContent.t : '暂无数据'
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 公司测名扩展（六爻 / 五行八卦 / 属相 / 事业规划 / 幸运数字 / 幸运颜色）详文 -->
|
||
<view v-if="isCompanyExtraModal" class="modal-content">
|
||
<view v-for="(node, idx) in companyExtraModalNodes" :key="idx" class="company-extra-node">
|
||
<text v-if="node?.type === 'text'" class="modal-text">{{ toText(node.text) }}</text>
|
||
<view v-else-if="node?.type === 'list'">
|
||
<text v-for="(item, j) in arr(node.items)" :key="j" class="modal-text">· {{ toText(item)
|
||
}}</text>
|
||
</view>
|
||
<view v-else-if="node?.type === 'kv'">
|
||
<text v-for="(item, j) in arr(node.items)" :key="j" class="modal-text">{{
|
||
toText(item?.label) }}：{{ toText(item?.value) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, withDefaults } from "vue";
|
||
import { userApi, namingApi } from "@/api";
|
||
import { getWealthAnalysisByReportId } from "@/api/cai-yun";
|
||
|
||
declare const uni: any;
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
data: any;
|
||
showBusinessFortune?: boolean;
|
||
/** 电脑端测名：双列玻璃排版 */
|
||
desktopLayout?: boolean;
|
||
}>(),
|
||
{ desktopLayout: false },
|
||
);
|
||
|
||
const emit = defineEmits<{
|
||
back: [];
|
||
businessFortune: [any];
|
||
}>();
|
||
|
||
const toText = (v: any): string => String(v ?? '').trim();
|
||
const toNum = (v: any, fallback = 0): number => {
|
||
const n = Number(v);
|
||
return Number.isFinite(n) ? n : fallback;
|
||
};
|
||
const arr = (v: any): any[] => (Array.isArray(v) ? v : []);
|
||
|
||
const COMPANY_EXTRA_MODAL_KEYS = [
|
||
'liuyao',
|
||
'wuxing_bagua',
|
||
'zodiac_sign',
|
||
'career_plan',
|
||
'lucky_numbers',
|
||
'lucky_colors',
|
||
] as const;
|
||
|
||
const companyLiuyao = computed(() => props.data?.liuyao);
|
||
const companyWuxingBagua = computed(() => props.data?.wuxing_bagua);
|
||
const companyZodiacSign = computed(() => props.data?.zodiac_sign);
|
||
const companyCareerPlan = computed(() => props.data?.career_plan);
|
||
const companyLuckyNumbers = computed(() => props.data?.lucky_numbers);
|
||
const companyLuckyColors = computed(() => props.data?.lucky_colors);
|
||
|
||
const hasCompanyLiuyao = computed(() => {
|
||
const x = companyLiuyao.value;
|
||
if (!x || typeof x !== 'object') return false;
|
||
return !!(
|
||
toText(x.hexagram_title) ||
|
||
toText(x.changing_summary) ||
|
||
toText(x.interpretation) ||
|
||
arr(x.yao_lines).length ||
|
||
arr(x.details?.nodes).length
|
||
);
|
||
});
|
||
|
||
const hasCompanyWuxingBagua = computed(() => {
|
||
const x = companyWuxingBagua.value;
|
||
if (!x || typeof x !== 'object') return false;
|
||
return !!(
|
||
toText(x.wuxing_sketch) ||
|
||
toText(x.bagua_profile) ||
|
||
toText(x.mutual_sketch) ||
|
||
toText(x.summary) ||
|
||
arr(x.details?.nodes).length
|
||
);
|
||
});
|
||
|
||
const hasCompanyZodiacSign = computed(() => {
|
||
const x = companyZodiacSign.value;
|
||
if (!x || typeof x !== 'object') return false;
|
||
return !!(
|
||
toText(x.animal) ||
|
||
toText(x.animal_icon) ||
|
||
toText(x.earthly_branch) ||
|
||
toText(x.trait_summary) ||
|
||
toText(x.name_harmony) ||
|
||
arr(x.details?.nodes).length
|
||
);
|
||
});
|
||
|
||
const hasCompanyCareerPlan = computed(() => {
|
||
const x = companyCareerPlan.value;
|
||
if (!x || typeof x !== 'object') return false;
|
||
return !!(toText(x.summary) || arr(x.milestones).length || arr(x.details?.nodes).length);
|
||
});
|
||
|
||
const hasCompanyLuckyNumbers = computed(() => {
|
||
const x = companyLuckyNumbers.value;
|
||
if (!x || typeof x !== 'object') return false;
|
||
return !!(toText(x.primary) || toText(x.meaning) || arr(x.numbers).length || arr(x.details?.nodes).length);
|
||
});
|
||
|
||
const hasCompanyLuckyColors = computed(() => {
|
||
const x = companyLuckyColors.value;
|
||
if (!x || typeof x !== 'object') return false;
|
||
return !!(toText(x.primary) || toText(x.meaning) || arr(x.colors).length || arr(x.details?.nodes).length);
|
||
});
|
||
|
||
const companyLuckyNumbersDisplay = computed(() => {
|
||
const nums = arr(companyLuckyNumbers.value?.numbers);
|
||
if (!nums.length) return '';
|
||
return nums.map((n: any) => String(n)).join('、');
|
||
});
|
||
const nodesToText = (nodes: any): string => {
|
||
if (!Array.isArray(nodes)) return '';
|
||
const lines: string[] = [];
|
||
nodes.forEach((n: any) => {
|
||
if (!n) return;
|
||
if (n.type === 'text') lines.push(toText(n.text));
|
||
else if (n.type === 'list' && Array.isArray(n.items)) lines.push(...n.items.map((x: any) => toText(x)));
|
||
else if (n.type === 'kv' && Array.isArray(n.items)) {
|
||
n.items.forEach((it: any) => lines.push(`${toText(it?.label)}：${toText(it?.value)}`));
|
||
}
|
||
});
|
||
return lines.filter(Boolean).join('\n');
|
||
};
|
||
const findKvValue = (nodes: any, labelKeyword: string): string => {
|
||
if (!Array.isArray(nodes)) return '';
|
||
for (const n of nodes) {
|
||
if (n?.type !== 'kv' || !Array.isArray(n?.items)) continue;
|
||
for (const it of n.items) {
|
||
const label = toText(it?.label);
|
||
if (label.includes(labelKeyword)) return toText(it?.value);
|
||
}
|
||
}
|
||
return '';
|
||
};
|
||
const luckToScore = (luck: string): number => {
|
||
if (luck.includes('大吉')) return 95;
|
||
if (luck.includes('中吉')) return 82;
|
||
if (luck.includes('小吉')) return 72;
|
||
if (luck.includes('中平') || luck.includes('平')) return 60;
|
||
if (luck.includes('凶')) return 35;
|
||
return 60;
|
||
};
|
||
|
||
const normalizedData = computed(() => {
|
||
const raw = props.data || {};
|
||
// 旧结构兼容：已有 sections 直接沿用
|
||
if (Array.isArray(raw?.sections)) return raw;
|
||
|
||
// 新结构适配（按用户提供的后端 schema）
|
||
const header = raw?.header || {};
|
||
const charA = raw?.characterAnalysis || {};
|
||
const pattern = raw?.businessPattern || {};
|
||
const gua = raw?.gua || {};
|
||
const team = raw?.team || {};
|
||
const years = raw?.years || {};
|
||
const direction = raw?.direction || {};
|
||
const layout = raw?.layout || {};
|
||
const execution = raw?.execution || {};
|
||
|
||
const score = toNum(header?.score, 0);
|
||
const tagLeft = toText(header?.tagLeft);
|
||
const totalNumber = (tagLeft.match(/\d+/)?.[0] || '').trim();
|
||
const luckName = (tagLeft.includes('·') ? tagLeft.split('·')[1] : '').trim();
|
||
|
||
const radarLabels = Array.isArray(pattern?.radar?.labels) ? pattern.radar.labels : [];
|
||
const radarValues = Array.isArray(pattern?.radar?.values) ? pattern.radar.values : [];
|
||
const scoreMap: Record<string, number> = {};
|
||
radarLabels.forEach((label: any, idx: number) => {
|
||
scoreMap[toText(label)] = toNum(radarValues[idx], 0);
|
||
});
|
||
const toScale10 = (n: number) => Number((n / 10).toFixed(1));
|
||
|
||
const yearItems = Array.isArray(years?.items) ? years.items : [];
|
||
|
||
return {
|
||
id: raw?.id,
|
||
report_id: raw?.report_id,
|
||
is_favorited: raw?.is_favorited,
|
||
name: toText(header?.name),
|
||
pinyin: toText(raw?.pinyin),
|
||
total_score: score,
|
||
star_rating: Math.max(1, Math.min(5, Math.round(score / 20))),
|
||
name_meaning: toText(charA?.analysis || header?.quote),
|
||
sections: [
|
||
{
|
||
section_type: 'zonghe',
|
||
title: '综合评分',
|
||
summary_data: { rating: toText(header?.tagRight) || '—' },
|
||
details: [{ content: { rating: toText(header?.tagRight), summary: toText(header?.quote) } }],
|
||
},
|
||
{
|
||
section_type: 'pinpai',
|
||
title: '品牌意象解析',
|
||
summary_data: { judgment: toText(charA?.analysis) || '—' },
|
||
details: [{ content: { intro: toText(charA?.analysis), analysis: nodesToText(charA?.details?.nodes) } }],
|
||
},
|
||
{
|
||
section_type: 'shuli',
|
||
title: '商业数理吉凶',
|
||
summary_data: { number: totalNumber || '—', luck: toText(header?.tagRight) || '—', luck_name: luckName || '—' },
|
||
details: [{
|
||
content: {
|
||
number: totalNumber || '—',
|
||
luck_name: luckName || '—',
|
||
basic: findKvValue(charA?.details?.nodes, '总格23') || findKvValue(charA?.details?.nodes, '总格') || nodesToText(charA?.details?.nodes),
|
||
biz: nodesToText(charA?.details?.nodes),
|
||
}
|
||
}],
|
||
},
|
||
{
|
||
section_type: 'shichang',
|
||
title: '市场潜力评估',
|
||
summary_data: {
|
||
scores: {
|
||
comm: toScale10(scoreMap['名望'] || scoreMap['传播力'] || 0),
|
||
compat: toScale10(scoreMap['基业'] || scoreMap['行业契合'] || 0),
|
||
wealth: toScale10(scoreMap['财运'] || 0),
|
||
lead: toScale10(scoreMap['机遇'] || 0),
|
||
cohes: toScale10(scoreMap['团队'] || 0),
|
||
innov: toScale10(scoreMap['竞力'] || 0),
|
||
}
|
||
},
|
||
details: [{
|
||
content: {
|
||
comm: { score: toScale10(scoreMap['名望'] || 0), desc: nodesToText(pattern?.details?.nodes) },
|
||
compat: { score: toScale10(scoreMap['基业'] || 0), desc: nodesToText(pattern?.details?.nodes) },
|
||
wealth: { score: toScale10(scoreMap['财运'] || 0), desc: nodesToText(pattern?.details?.nodes) },
|
||
lead: { score: toScale10(scoreMap['机遇'] || 0), desc: nodesToText(pattern?.details?.nodes) },
|
||
cohes: { score: toScale10(scoreMap['团队'] || 0), desc: nodesToText(pattern?.details?.nodes) },
|
||
innov: { score: toScale10(scoreMap['竞力'] || 0), desc: nodesToText(pattern?.details?.nodes) },
|
||
}
|
||
}],
|
||
},
|
||
{
|
||
section_type: 'guaxiang',
|
||
title: '商业卦象',
|
||
summary_data: { gua: toText(gua?.name), gua_type: toText(gua?.badge), text: toText(gua?.desc) },
|
||
details: [{ content: { gua: toText(gua?.name), interp: toText(gua?.desc), biz: toText(gua?.insight), guide: Array.isArray(gua?.tags) ? gua.tags.join('；') : '' } }],
|
||
},
|
||
{
|
||
section_type: 'founder',
|
||
title: '创始人契合度',
|
||
summary_data: {
|
||
trait: toText(team?.members?.[0]?.desc),
|
||
score: toText(team?.members?.[0]?.score),
|
||
},
|
||
details: [{ content: { trait: toText(team?.members?.[0]?.desc), score: toText(team?.members?.[0]?.score), analysis: toText(team?.note) } }],
|
||
},
|
||
{
|
||
section_type: 'fengshui',
|
||
title: '财运风水布局',
|
||
summary_data: { position: toText(direction?.note), colors: toText(execution?.text).slice(0, 24) + (toText(execution?.text).length > 24 ? '...' : '') },
|
||
details: [{ content: { color: findKvValue(layout?.details?.nodes, '核心理念') || toText(execution?.text), logo: nodesToText(layout?.details?.nodes), office: toText(direction?.note) } }],
|
||
},
|
||
{
|
||
section_type: 'wunian',
|
||
title: '未来五年运势预测',
|
||
summary_data: {
|
||
years: yearItems.map((y: any) => ({
|
||
y: toText(y?.year).match(/\d{4}/)?.[0] || toText(y?.year),
|
||
s: luckToScore(toText(y?.luck)),
|
||
})),
|
||
},
|
||
details: [{
|
||
content: {
|
||
years: yearItems.map((y: any) => ({
|
||
y: toText(y?.year).match(/\d{4}/)?.[0] || toText(y?.year),
|
||
z: toText(y?.year).replace(/\d{4}\s*\(?/, '').replace(/\)?$/, ''),
|
||
l: toText(y?.luck),
|
||
s: luckToScore(toText(y?.luck)),
|
||
d: toText(y?.text),
|
||
})),
|
||
}
|
||
}],
|
||
},
|
||
{
|
||
section_type: 'swot',
|
||
title: '企业命理 SWOT 分析',
|
||
summary_data: {},
|
||
details: [{
|
||
content: {
|
||
s: toText(findKvValue(execution?.details?.nodes, '第1月') || execution?.text),
|
||
w: toText(findKvValue(execution?.details?.nodes, '第3月')),
|
||
o: toText(findKvValue(execution?.details?.nodes, '第6月')),
|
||
t: toText(direction?.note),
|
||
}
|
||
}],
|
||
},
|
||
],
|
||
};
|
||
});
|
||
|
||
// 收藏状态
|
||
const isFavorited = ref(false);
|
||
|
||
// 初始化收藏状态
|
||
if (props.data?.is_favorited !== undefined) {
|
||
isFavorited.value = props.data.is_favorited;
|
||
}
|
||
|
||
// 切换收藏状态
|
||
const toggleFavorite = async () => {
|
||
if (!props.data?.id) {
|
||
uni.showToast({ title: "方案ID不存在", icon: "none" });
|
||
return;
|
||
}
|
||
|
||
try {
|
||
if (!isFavorited.value) {
|
||
const res = await userApi.favoriteSolution({ solution_id: props.data.id, category: 'company' });
|
||
isFavorited.value = res?.is_favorited ?? true;
|
||
uni.showToast({
|
||
title: res?.msg || "收藏成功",
|
||
icon: "success"
|
||
});
|
||
return;
|
||
}
|
||
|
||
const res = await userApi.unfavoriteSolution({ solution_id: props.data.id });
|
||
isFavorited.value = res?.is_favorited ?? false;
|
||
uni.showToast({
|
||
title: res?.msg || "已取消收藏",
|
||
icon: "success"
|
||
});
|
||
} catch (e: any) {
|
||
uni.showToast({ title: e.msg || "操作失败", icon: "none" });
|
||
}
|
||
};
|
||
|
||
// 弹窗状态
|
||
const showModal = ref(false);
|
||
const currentModal = ref('');
|
||
|
||
// 弹窗标题映射
|
||
const modalTitles: Record<string, string> = {
|
||
zonghe: '综合评分详解',
|
||
pinpai: '品牌意象详解',
|
||
shuli: '商业数理详解',
|
||
shichang: '市场潜力详解',
|
||
guaxiang: '商业卦象详解',
|
||
liuyao: '六爻详解',
|
||
wuxing_bagua: '五行八卦详解',
|
||
zodiac_sign: '属相详解',
|
||
career_plan: '事业规划详解',
|
||
lucky_numbers: '幸运数字详解',
|
||
lucky_colors: '幸运颜色详解',
|
||
founder: '创始人契合详解',
|
||
fengshui: '风水布局详解',
|
||
wunian: '五年运势详解',
|
||
swot: 'SWOT分析详解',
|
||
};
|
||
|
||
const modalTitle = computed(() => modalTitles[currentModal.value] || '详情');
|
||
|
||
const isCompanyExtraModal = computed(() =>
|
||
COMPANY_EXTRA_MODAL_KEYS.includes(currentModal.value as (typeof COMPANY_EXTRA_MODAL_KEYS)[number])
|
||
);
|
||
|
||
const companyExtraModalNodes = computed(() => {
|
||
const m = currentModal.value;
|
||
if (!COMPANY_EXTRA_MODAL_KEYS.includes(m as (typeof COMPANY_EXTRA_MODAL_KEYS)[number])) return [];
|
||
const block = (props.data as Record<string, any>)?.[m];
|
||
return arr(block?.details?.nodes);
|
||
});
|
||
|
||
// 打开弹窗
|
||
const openModal = (modalType: string) => {
|
||
currentModal.value = modalType;
|
||
showModal.value = true;
|
||
};
|
||
|
||
// 关闭弹窗
|
||
const closeModal = () => {
|
||
showModal.value = false;
|
||
currentModal.value = '';
|
||
};
|
||
|
||
// 星星数据
|
||
const stars = ref(
|
||
Array.from({ length: 30 }).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 detailData = computed(() => ({
|
||
name: normalizedData.value?.name || '',
|
||
pinyin: normalizedData.value?.pinyin || '',
|
||
total_score: normalizedData.value?.total_score || 0,
|
||
star_rating: normalizedData.value?.star_rating || 0,
|
||
name_meaning: normalizedData.value?.name_meaning || '',
|
||
}));
|
||
|
||
console.log('detailData===>>>', detailData.value);
|
||
// 获取 section
|
||
const getSection = (sectionType: string) => {
|
||
const sections = normalizedData.value?.sections;
|
||
if (!sections || !Array.isArray(sections)) return null;
|
||
return sections.find((s: any) => s.section_type === sectionType) || null;
|
||
};
|
||
|
||
// 获取 section 的 content
|
||
const getContent = (section: any) => {
|
||
if (!section?.details || !Array.isArray(section.details) || section.details.length === 0) return null;
|
||
return section.details[0]?.content || null;
|
||
};
|
||
|
||
// 各模块 section
|
||
const zongheSection = computed(() => getSection('zonghe'));
|
||
const pinpaiSection = computed(() => getSection('pinpai'));
|
||
const shuliSection = computed(() => getSection('shuli'));
|
||
const shichangSection = computed(() => getSection('shichang'));
|
||
const guaxiangSection = computed(() => getSection('guaxiang'));
|
||
const founderSection = computed(() => getSection('founder'));
|
||
const fengshuiSection = computed(() => getSection('fengshui'));
|
||
const wunianSection = computed(() => getSection('wunian'));
|
||
const swotSection = computed(() => getSection('swot'));
|
||
|
||
// 各模块 content
|
||
const zongheContent = computed(() => getContent(zongheSection.value));
|
||
const pinpaiContent = computed(() => getContent(pinpaiSection.value));
|
||
const shuliContent = computed(() => getContent(shuliSection.value));
|
||
const shichangContent = computed(() => getContent(shichangSection.value));
|
||
const guaxiangContent = computed(() => getContent(guaxiangSection.value));
|
||
const founderContent = computed(() => getContent(founderSection.value));
|
||
const fengshuiContent = computed(() => getContent(fengshuiSection.value));
|
||
const wunianContent = computed(() => getContent(wunianSection.value));
|
||
const swotContent = computed(() => getContent(swotSection.value));
|
||
|
||
// 五年运势数据
|
||
const wunianYears = computed(() => wunianSection.value?.summary_data?.years || []);
|
||
const wunianYearsDetail = computed(() => wunianContent.value?.years || []);
|
||
|
||
// 格式化分数
|
||
const formatScore = (score: number | undefined): string => {
|
||
if (score === undefined || score === null) return '-';
|
||
return (score * 10).toFixed(0);
|
||
};
|
||
|
||
// 获取卦象字符
|
||
const getGuaChar = (gua: string): string => {
|
||
if (!gua) return '卦';
|
||
return gua.substring(0, 2);
|
||
};
|
||
|
||
// 截断文本
|
||
const truncateText = (text: string, maxLen: number): string => {
|
||
if (!text) return '';
|
||
if (text.length <= maxLen) return text;
|
||
return text.substring(0, maxLen) + '...';
|
||
};
|
||
|
||
const handleBack = () => {
|
||
emit("back");
|
||
};
|
||
|
||
const handleBusinessFortune = async () => {
|
||
const solutionId = Number(props.data?.id || 0);
|
||
if (!solutionId) {
|
||
uni.showToast({ title: '方案ID不存在', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
try {
|
||
uni.showLoading({ title: '加载中...' });
|
||
|
||
// 先获取方案详情以获得report_id
|
||
// const solutionDetail = await namingApi.getSolutionDetail(solutionId);
|
||
const reportId = props.data?.report_id;
|
||
|
||
if (!reportId) {
|
||
uni.hideLoading();
|
||
uni.showToast({ title: '报告ID不存在', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
// 使用report_id获取财运解析数据
|
||
const businessFortuneData = await getWealthAnalysisByReportId(reportId);
|
||
uni.hideLoading();
|
||
|
||
uni.setStorageSync('business_fortune_report_id', reportId);
|
||
emit('businessFortune', { id: reportId, businessFortuneData });
|
||
} catch (error: any) {
|
||
uni.hideLoading();
|
||
uni.showToast({ title: error?.msg || error?.message || '加载失败，请重试', icon: 'none' });
|
||
}
|
||
};
|
||
</script>
|
||
|
||
|
||
<style scoped>
|
||
/* 基础布局 */
|
||
.company-detail {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: linear-gradient(180deg, #050508 0%, #10101a 50%, #1a1a2e 100%);
|
||
overflow: hidden;
|
||
z-index: 50;
|
||
}
|
||
|
||
/* 星空背景 */
|
||
.starry-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
.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-top {
|
||
position: absolute;
|
||
top: -10%;
|
||
left: -10%;
|
||
width: 50%;
|
||
height: 50%;
|
||
background: #2a3d5d;
|
||
opacity: 0.2;
|
||
filter: blur(100px);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.glow-bottom {
|
||
position: absolute;
|
||
bottom: -10%;
|
||
right: -10%;
|
||
width: 50%;
|
||
height: 50%;
|
||
background: #9c2a2a;
|
||
opacity: 0.1;
|
||
filter: blur(100px);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* 头部 */
|
||
.detail-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 40rpx 30rpx;
|
||
padding-top: calc(60rpx + env(safe-area-inset-top, 0px));
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||
background: rgba(10, 10, 15, 0.5);
|
||
backdrop-filter: blur(10px);
|
||
position: relative;
|
||
z-index: 20;
|
||
}
|
||
|
||
.detail-header-back {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #a0a0a0;
|
||
}
|
||
|
||
.back-icon {
|
||
font-size: 40rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.back-text {
|
||
font-size: 28rpx;
|
||
letter-spacing: 4rpx;
|
||
}
|
||
|
||
.detail-header-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
letter-spacing: 8rpx;
|
||
color: #d4af37;
|
||
}
|
||
|
||
.detail-header-favorite {
|
||
width: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.favorite-icon {
|
||
font-size: 48rpx;
|
||
color: #a0a0a0;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.favorite-icon-active {
|
||
color: #ff4757;
|
||
animation: heartbeat 0.3s ease-in-out;
|
||
}
|
||
|
||
@keyframes heartbeat {
|
||
|
||
0%,
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.2);
|
||
}
|
||
}
|
||
|
||
.detail-header-placeholder {
|
||
width: 80rpx;
|
||
}
|
||
|
||
/* 内容区域 */
|
||
.detail-content {
|
||
flex: 1;
|
||
height: 0;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.detail-content-inner {
|
||
padding-bottom: calc(120rpx + env(safe-area-inset-bottom, 0px));
|
||
padding: 30rpx;
|
||
}
|
||
|
||
/* 总分卡片 */
|
||
.score-card {
|
||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
padding: 60rpx 40rpx;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
margin-bottom: 50rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.score-corner {
|
||
position: absolute;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
border-color: #d4af37;
|
||
}
|
||
|
||
.score-corner-tl {
|
||
top: 0;
|
||
left: 0;
|
||
border-top: 4rpx solid;
|
||
border-left: 4rpx solid;
|
||
}
|
||
|
||
.score-corner-tr {
|
||
top: 0;
|
||
right: 0;
|
||
border-top: 4rpx solid;
|
||
border-right: 4rpx solid;
|
||
}
|
||
|
||
.score-corner-bl {
|
||
bottom: 0;
|
||
left: 0;
|
||
border-bottom: 4rpx solid;
|
||
border-left: 4rpx solid;
|
||
}
|
||
|
||
.score-corner-br {
|
||
bottom: 0;
|
||
right: 0;
|
||
border-bottom: 4rpx solid;
|
||
border-right: 4rpx solid;
|
||
}
|
||
|
||
.score-label {
|
||
font-size: 22rpx;
|
||
color: #d4af37;
|
||
letter-spacing: 8rpx;
|
||
margin-bottom: 20rpx;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.score-value-wrap {
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 280rpx;
|
||
height: 280rpx;
|
||
}
|
||
|
||
.score-value {
|
||
font-size: 120rpx;
|
||
font-weight: bold;
|
||
background: linear-gradient(180deg, #d4af37 0%, #8a6e1e 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.score-ring {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 2rpx dashed rgba(212, 175, 55, 0.2);
|
||
border-radius: 50%;
|
||
animation: rotate 10s linear infinite;
|
||
}
|
||
|
||
@keyframes rotate {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.score-stars {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 8rpx;
|
||
margin: 20rpx 0 30rpx;
|
||
}
|
||
|
||
.score-star {
|
||
font-size: 28rpx;
|
||
color: #5a5a5a;
|
||
}
|
||
|
||
.score-star.active {
|
||
color: #d4af37;
|
||
}
|
||
|
||
.score-divider {
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.3) 50%, transparent 100%);
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.score-name {
|
||
display: block;
|
||
font-size: 56rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
letter-spacing: 12rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.score-pinyin {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #a0a0a0;
|
||
font-style: italic;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.master-comment {
|
||
margin-top: 30rpx;
|
||
padding-top: 20rpx;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.master-rating {
|
||
display: inline-block;
|
||
font-size: 24rpx;
|
||
color: #d4af37;
|
||
border: 1px solid #d4af37;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.master-summary-preview {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.6;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.click-hint {
|
||
font-size: 22rpx;
|
||
color: #d4af37;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* 通用 Section 样式 */
|
||
.section {
|
||
margin-bottom: 40rpx;
|
||
padding: 10rpx;
|
||
border-radius: 16rpx;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.section:active {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
padding: 0 10rpx;
|
||
}
|
||
|
||
.section-icon {
|
||
font-size: 32rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.section-text {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
letter-spacing: 4rpx;
|
||
}
|
||
|
||
.section-hint {
|
||
font-size: 20rpx;
|
||
color: rgba(212, 175, 55, 0.6);
|
||
margin-left: auto;
|
||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
/* 品牌意象卡片 */
|
||
.meaning-card {
|
||
background: #1a1a2e;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
padding: 40rpx;
|
||
border-radius: 12rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.meaning-quote {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 10rpx;
|
||
font-size: 80rpx;
|
||
color: rgba(212, 175, 55, 0.1);
|
||
}
|
||
|
||
.meaning-label {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #d4af37;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.meaning-text {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.8;
|
||
text-align: justify;
|
||
}
|
||
|
||
.meaning-judge {
|
||
margin-top: 20rpx;
|
||
padding-top: 20rpx;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.meaning-judge-label {
|
||
font-size: 26rpx;
|
||
color: #d4af37;
|
||
}
|
||
|
||
.meaning-judge-text {
|
||
font-size: 26rpx;
|
||
color: #e2e2e2;
|
||
}
|
||
|
||
/* 商业数理卡片 */
|
||
.math-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
padding: 30rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.math-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.math-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.math-label {
|
||
font-size: 24rpx;
|
||
color: #a0a0a0;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.math-value {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
}
|
||
|
||
.math-badge {
|
||
font-size: 22rpx;
|
||
color: #d4af37;
|
||
border: 1px solid #d4af37;
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
/* 市场潜力雷达 */
|
||
.radar-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
padding: 30rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.radar-labels {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.radar-label-item {
|
||
flex: 0 0 calc(33.33% - 14rpx);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 16rpx;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.radar-label-name {
|
||
font-size: 22rpx;
|
||
color: #a0a0a0;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.radar-label-value {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #d4af37;
|
||
}
|
||
|
||
/* 卦象卡片 */
|
||
.gua-card {
|
||
background: linear-gradient(90deg, #1a1a2e 0%, #16213e 100%);
|
||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||
padding: 40rpx;
|
||
border-radius: 12rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.gua-bg-text {
|
||
position: absolute;
|
||
right: -20rpx;
|
||
top: -20rpx;
|
||
font-size: 200rpx;
|
||
color: rgba(255, 255, 255, 0.05);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.gua-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.gua-header {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.gua-name {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
letter-spacing: 4rpx;
|
||
}
|
||
|
||
.gua-badge {
|
||
font-size: 22rpx;
|
||
color: #9c2a2a;
|
||
border: 1px solid #9c2a2a;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.gua-desc {
|
||
font-size: 26rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 创始人契合卡片 */
|
||
.founder-card {
|
||
background: linear-gradient(90deg, #16213e 0%, #1a1a2e 100%);
|
||
padding: 30rpx;
|
||
border-radius: 12rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.founder-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.founder-avatar {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
background: rgba(212, 175, 55, 0.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.founder-avatar-text {
|
||
font-size: 32rpx;
|
||
color: #d4af37;
|
||
}
|
||
|
||
.founder-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.founder-title {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #a0a0a0;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.founder-desc {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
}
|
||
|
||
.founder-score {
|
||
text-align: right;
|
||
}
|
||
|
||
.founder-score-value {
|
||
display: block;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #d4af37;
|
||
}
|
||
|
||
.founder-score-label {
|
||
display: block;
|
||
font-size: 20rpx;
|
||
color: #a0a0a0;
|
||
}
|
||
|
||
/* 风水布局网格 */
|
||
.fengshui-grid {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.fengshui-card {
|
||
flex: 1;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
padding: 30rpx;
|
||
border-radius: 12rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.fengshui-icon {
|
||
font-size: 40rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.fengshui-label {
|
||
font-size: 22rpx;
|
||
color: #a0a0a0;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.fengshui-value {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 五年运势图表 */
|
||
.trend-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
padding: 30rpx;
|
||
border-radius: 12rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.trend-chart {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: flex-end;
|
||
height: 200rpx;
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
.trend-bar-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 60rpx;
|
||
}
|
||
|
||
.trend-bar {
|
||
width: 40rpx;
|
||
background: linear-gradient(180deg, #d4af37 0%, #8a6e1e 100%);
|
||
border-radius: 8rpx 8rpx 0 0;
|
||
min-height: 20rpx;
|
||
transition: height 0.3s;
|
||
}
|
||
|
||
.trend-bar-highlight {
|
||
background: linear-gradient(180deg, #9c2a2a 0%, #d4af37 100%);
|
||
box-shadow: 0 0 16rpx rgba(212, 175, 55, 0.5);
|
||
}
|
||
|
||
.trend-year {
|
||
font-size: 22rpx;
|
||
color: #a0a0a0;
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
/* SWOT 网格 */
|
||
.swot-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.swot-card {
|
||
flex: 0 0 calc(50% - 8rpx);
|
||
padding: 24rpx;
|
||
border-radius: 12rpx;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.swot-card-s {
|
||
border-left: 4rpx solid #d4af37;
|
||
}
|
||
|
||
.swot-card-w {
|
||
border-left: 4rpx solid #9c2a2a;
|
||
}
|
||
|
||
.swot-card-o {
|
||
border-left: 4rpx solid #d4af37;
|
||
}
|
||
|
||
.swot-card-t {
|
||
border-left: 4rpx solid #9c2a2a;
|
||
}
|
||
|
||
.swot-title {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.swot-title-gold {
|
||
color: #d4af37;
|
||
}
|
||
|
||
.swot-title-red {
|
||
color: #9c2a2a;
|
||
}
|
||
|
||
/* 操作按钮 */
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
margin: 40rpx 0;
|
||
}
|
||
|
||
.action-btn {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 24rpx 16rpx;
|
||
border-radius: 12rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.action-btn-share {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.action-btn-primary {
|
||
background: linear-gradient(135deg, #9c2a2a 0%, #d4af37 100%);
|
||
border: none;
|
||
}
|
||
|
||
.action-btn-download {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.action-btn-icon {
|
||
font-size: 36rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.action-btn-text {
|
||
font-size: 24rpx;
|
||
color: #e2e2e2;
|
||
}
|
||
|
||
/* 页脚 */
|
||
.detail-footer {
|
||
text-align: center;
|
||
padding: 40rpx 0 60rpx;
|
||
}
|
||
|
||
.footer-text {
|
||
font-size: 22rpx;
|
||
color: #5a5a5a;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
/* 弹窗样式 */
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
backdrop-filter: blur(4px);
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
}
|
||
|
||
.modal-container {
|
||
width: 100%;
|
||
max-height: 85vh;
|
||
background: #101015;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
border: 1px solid rgba(212, 175, 55, 0.2);
|
||
border-bottom: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 32rpx 40rpx;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
background: #151520;
|
||
}
|
||
|
||
.modal-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
letter-spacing: 4rpx;
|
||
}
|
||
|
||
.modal-close {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.modal-close-icon {
|
||
font-size: 40rpx;
|
||
color: #a0a0a0;
|
||
}
|
||
|
||
.modal-body {
|
||
flex: 1;
|
||
height: 0;
|
||
}
|
||
|
||
.modal-body-contain {
|
||
padding: 40rpx;
|
||
|
||
}
|
||
|
||
.modal-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30rpx;
|
||
}
|
||
|
||
/* 公司测名扩展模块（与个人测名同 JSON 字段） */
|
||
.company-extra-card {
|
||
position: relative;
|
||
}
|
||
|
||
.company-extra-flat {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
padding: 28rpx;
|
||
}
|
||
|
||
.company-extra-strong {
|
||
color: #e2e2e2;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.company-extra-sub {
|
||
margin-top: 8rpx;
|
||
font-size: 26rpx !important;
|
||
}
|
||
|
||
.company-career-milestone {
|
||
margin-top: 20rpx;
|
||
padding-top: 20rpx;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.company-career-milestone:first-of-type {
|
||
margin-top: 0;
|
||
padding-top: 0;
|
||
border-top: none;
|
||
}
|
||
|
||
.company-lucky-color-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.company-lucky-swatch {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
margin-top: 6rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||
}
|
||
|
||
.company-lucky-color-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.company-extra-node {
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
/* 弹窗内容样式 */
|
||
.modal-rating-badge {
|
||
display: inline-block;
|
||
align-self: flex-start;
|
||
font-size: 28rpx;
|
||
color: #d4af37;
|
||
border: 2rpx solid #d4af37;
|
||
padding: 12rpx 24rpx;
|
||
border-radius: 8rpx;
|
||
background: rgba(212, 175, 55, 0.1);
|
||
}
|
||
|
||
.modal-section-title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #d4af37;
|
||
letter-spacing: 2rpx;
|
||
padding-left: 20rpx;
|
||
border-left: 6rpx solid #d4af37;
|
||
}
|
||
|
||
.modal-text {
|
||
font-size: 28rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.8;
|
||
text-align: justify;
|
||
}
|
||
|
||
.modal-text-highlight {
|
||
color: #d4af37;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.modal-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12rpx;
|
||
padding: 24rpx;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.modal-item-label {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
}
|
||
|
||
/* 数理弹窗 */
|
||
.modal-number-badge {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #d4af37 0%, #8a6e1e 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
align-self: center;
|
||
box-shadow: 0 8rpx 32rpx rgba(212, 175, 55, 0.3);
|
||
}
|
||
|
||
.modal-luck-name {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
text-align: center;
|
||
letter-spacing: 4rpx;
|
||
}
|
||
|
||
/* 市场潜力弹窗 */
|
||
.modal-score-item {
|
||
padding: 24rpx;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border-radius: 12rpx;
|
||
border-left: 4rpx solid #d4af37;
|
||
}
|
||
|
||
.modal-score-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.modal-score-name {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
}
|
||
|
||
.modal-score-value {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #d4af37;
|
||
}
|
||
|
||
/* 卦象弹窗 */
|
||
.modal-gua-header {
|
||
text-align: center;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.modal-gua-name {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
letter-spacing: 8rpx;
|
||
}
|
||
|
||
/* 创始人弹窗 */
|
||
.modal-founder-score {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(156, 42, 42, 0.2) 100%);
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.modal-founder-score-value {
|
||
font-size: 72rpx;
|
||
font-weight: bold;
|
||
color: #d4af37;
|
||
}
|
||
|
||
.modal-founder-score-label {
|
||
font-size: 24rpx;
|
||
color: #a0a0a0;
|
||
letter-spacing: 4rpx;
|
||
}
|
||
|
||
/* 五年运势弹窗 */
|
||
.modal-year-item {
|
||
padding: 24rpx;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border-radius: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.modal-year-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.modal-year-name {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
}
|
||
|
||
.modal-year-zhi {
|
||
font-size: 26rpx;
|
||
color: #a0a0a0;
|
||
}
|
||
|
||
.modal-year-label {
|
||
font-size: 22rpx;
|
||
color: #d4af37;
|
||
border: 1px solid #d4af37;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.modal-year-label-hot {
|
||
background: #9c2a2a;
|
||
border-color: #9c2a2a;
|
||
color: #fff;
|
||
}
|
||
|
||
.modal-year-score {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #d4af37;
|
||
margin-left: auto;
|
||
}
|
||
|
||
/* SWOT弹窗 */
|
||
.modal-swot-item {
|
||
padding: 24rpx;
|
||
border-radius: 12rpx;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
}
|
||
|
||
.modal-swot-s {
|
||
border-left: 6rpx solid #4CAF50;
|
||
}
|
||
|
||
.modal-swot-w {
|
||
border-left: 6rpx solid #F44336;
|
||
}
|
||
|
||
.modal-swot-o {
|
||
border-left: 6rpx solid #2196F3;
|
||
}
|
||
|
||
.modal-swot-t {
|
||
border-left: 6rpx solid #FF9800;
|
||
}
|
||
|
||
.modal-swot-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
/* —— 电脑端测名详解：双列 + 登录页同系玻璃金边 —— */
|
||
.company-detail--desktop {
|
||
background: linear-gradient(165deg, #070a12 0%, #12102a 42%, #0a1628 100%) !important;
|
||
}
|
||
|
||
.company-detail--desktop .starry-bg {
|
||
opacity: 0.28;
|
||
}
|
||
|
||
.company-detail--desktop .detail-header {
|
||
background: rgba(15, 23, 42, 0.72) !important;
|
||
border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
|
||
backdrop-filter: blur(12px);
|
||
padding-top: 16px !important;
|
||
padding-bottom: 12px !important;
|
||
}
|
||
|
||
.company-detail--desktop .detail-header-title {
|
||
color: #f2e6d8 !important;
|
||
text-shadow: 0 0 20px rgba(212, 175, 55, 0.22);
|
||
}
|
||
|
||
.company-detail--desktop .detail-header-back {
|
||
color: #d4af37 !important;
|
||
}
|
||
|
||
.company-detail--desktop .detail-content--desktop {
|
||
flex: 1;
|
||
min-height: 0;
|
||
height: auto !important;
|
||
}
|
||
|
||
.company-detail--desktop .detail-content-inner--desktop {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 10px 14px;
|
||
padding: 10px 14px 20px !important;
|
||
align-content: start;
|
||
}
|
||
|
||
.company-detail--desktop .score-card {
|
||
grid-column: 1 / -1;
|
||
border-radius: 12px;
|
||
background: rgba(15, 23, 42, 0.55) !important;
|
||
border: 1px solid rgba(212, 175, 55, 0.22) !important;
|
||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
|
||
backdrop-filter: blur(10px);
|
||
padding: 20px 22px !important;
|
||
}
|
||
|
||
.company-detail--desktop .section {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.company-detail--desktop .section--desktop-wide {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.company-detail--desktop .section-title {
|
||
border-bottom: 1px solid rgba(212, 175, 55, 0.1);
|
||
padding-bottom: 8px !important;
|
||
margin-bottom: 8px !important;
|
||
}
|
||
|
||
.company-detail--desktop .meaning-card,
|
||
.company-detail--desktop .math-card,
|
||
.company-detail--desktop .radar-card,
|
||
.company-detail--desktop .gua-card,
|
||
.company-detail--desktop .company-extra-card {
|
||
border-radius: 10px;
|
||
background: rgba(15, 23, 42, 0.48) !important;
|
||
border: 1px solid rgba(212, 175, 55, 0.16) !important;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.company-detail--desktop .modal-text {
|
||
font-size: 12px !important;
|
||
line-height: 1.45 !important;
|
||
}
|
||
|
||
@media (min-width: 1200px) {
|
||
.company-detail--desktop .detail-content-inner--desktop {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.company-detail--desktop .score-card {
|
||
grid-column: 1 / -1;
|
||
}
|
||
}
|
||
</style>
|