1764 lines
42 KiB
Vue
1764 lines
42 KiB
Vue
<template>
|
||
<view class="analysis-result">
|
||
<!-- 状态栏占位 -->
|
||
<view class="status-bar-placeholder"></view>
|
||
|
||
<!-- Header -->
|
||
<view class="analysis-header">
|
||
<button class="analysis-header-btn" @click="$emit('back')">
|
||
<text class="analysis-header-arrow">‹</text>
|
||
<text>返回</text>
|
||
</button>
|
||
<text class="analysis-header-title">姓名分析</text>
|
||
<button class="analysis-header-btn">
|
||
<text class="analysis-header-share">⋯</text>
|
||
</button>
|
||
</view>
|
||
|
||
<!-- Content Scroll -->
|
||
<scroll-view scroll-y class="analysis-content">
|
||
<!-- 1. 总分卡片 -->
|
||
<view class="score-card" @click="openModal('score')">
|
||
<view class="score-card-corner score-card-corner-tl"></view>
|
||
<view class="score-card-corner score-card-corner-tr"></view>
|
||
<view class="score-card-corner score-card-corner-bl"></view>
|
||
<view class="score-card-corner score-card-corner-br"></view>
|
||
|
||
<view class="score-card-content">
|
||
<text class="score-card-label">TOTAL SCORE</text>
|
||
<view class="score-card-rotation">
|
||
<view class="score-card-ring"></view>
|
||
<text class="score-card-rotation-text">93</text>
|
||
</view>
|
||
<view class="score-card-stars">
|
||
<text v-for="i in 5" :key="i" class="score-card-star" :class="{ filled: i <= 4 }">★</text>
|
||
</view>
|
||
<view class="score-card-divider"></view>
|
||
<text class="score-card-name">云帆</text>
|
||
<text class="score-card-poem">"长风破浪会有时，直挂云帆济沧海"</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 2. 字义与生肖解析 -->
|
||
<view class="section" @click="openModal('meaning')">
|
||
<view class="section-title">
|
||
<text class="section-title-icon">📖</text>
|
||
<text class="section-title-text">字义与生肖解析</text>
|
||
</view>
|
||
|
||
<!-- 组合意象 -->
|
||
<view class="meaning-card">
|
||
<view class="meaning-card-quote">❝</view>
|
||
<text class="meaning-card-title">组合意象</text>
|
||
<text class="meaning-card-text">
|
||
<text class="highlight">云</text>者，高远洁白，逍遥自在；<text
|
||
class="highlight">帆</text>者，借风远航，志在四方。二字组合，动静结合，既有高远的志向，又有脚踏实地、乘风破浪的行动力。
|
||
|
||
<text class="meaning-card-judge">判断：</text>二字搭配极佳，音律平仄相间（阳平配阴平），朗朗上口，寓意积极向上，无消极晦涩之义。
|
||
</text>
|
||
</view>
|
||
|
||
<!-- 生肖喜忌 -->
|
||
<view class="zodiac-card">
|
||
<view class="zodiac-card-header">
|
||
<view class="zodiac-card-left">
|
||
<view class="zodiac-icon">🐇</view>
|
||
<view class="zodiac-info">
|
||
<text class="zodiac-label">生肖适配度</text>
|
||
<text class="zodiac-value">属兔 · 喜用</text>
|
||
</view>
|
||
</view>
|
||
<text class="zodiac-score">95分</text>
|
||
</view>
|
||
<view class="zodiac-items">
|
||
<view class="zodiac-item">
|
||
<view class="zodiac-dot"></view>
|
||
<text class="zodiac-text"><text
|
||
class="zodiac-char">云：</text>兔喜小，云为天之物，虽大但柔，且"云"字藏"雨"，水生木（兔为木），大利生肖。</text>
|
||
</view>
|
||
<view class="zodiac-item">
|
||
<view class="zodiac-dot"></view>
|
||
<text class="zodiac-text"><text class="zodiac-char">帆：</text>"帆"字含"巾"，意为披彩衣，兔披彩衣更显尊贵，寓意生活富足，受人敬仰。</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 3. 单字详解 -->
|
||
<view class="section" @click="openModal('char')">
|
||
<view class="section-title">
|
||
<text class="section-title-icon">✨</text>
|
||
<text class="section-title-text">单字详解</text>
|
||
</view>
|
||
|
||
<view class="char-list">
|
||
<view v-for="(item, i) in charDetails" :key="i" class="char-item">
|
||
<view class="char-item-left">
|
||
<view class="char-box">{{ item.char }}</view>
|
||
<text class="char-element" :style="setWuxingColor(item.element as WuxingElement)">{{ item.element
|
||
}}</text>
|
||
|
||
</view>
|
||
<view class="char-item-right">
|
||
<view class="char-item-meta">
|
||
<text class="char-meta-label">康熙笔画：<text class="char-meta-value">{{ item.stroke }}</text></text>
|
||
<text class="char-meta-label">{{ item.tone }}</text>
|
||
</view>
|
||
<text class="char-desc">{{ item.desc }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 4. 笔画与三才五格 -->
|
||
<view class="section" @click="openModal('strokes')">
|
||
<view class="section-title">
|
||
<text class="section-title-icon">#</text>
|
||
<text class="section-title-text">笔画数理分析</text>
|
||
</view>
|
||
|
||
<!-- 笔画图示 -->
|
||
<view class="strokes-display">
|
||
<view class="stroke-item">
|
||
<view class="stroke-box">李</view>
|
||
<view class="stroke-label">7画 <span :style="setWuxingColorText('木')">(木)</span></view>
|
||
</view>
|
||
<view class="stroke-line"></view>
|
||
<view class="stroke-item stroke-item-active">
|
||
<view class="stroke-box stroke-box-active">云</view>
|
||
<view class="stroke-label">4画 <span :style="setWuxingColorText('水')">(水)</span></view>
|
||
</view>
|
||
<view class="stroke-line"></view>
|
||
<view class="stroke-item stroke-item-active">
|
||
<view class="stroke-box stroke-box-active">帆</view>
|
||
<view class="stroke-label">6画 <span :style="setWuxingColorText('水')">(水)</span></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 三才五格详解 -->
|
||
<view class="wuge-list">
|
||
<view class="wuge-item">
|
||
<view class="wuge-item-left">
|
||
<text class="wuge-name">天格 (8) · 吉</text>
|
||
<text class="wuge-desc">祖业运 · 坚毅不拔之数</text>
|
||
</view>
|
||
<view class="wuge-bar">
|
||
<view class="wuge-bar-fill" style="width: 80%"></view>
|
||
</view>
|
||
</view>
|
||
<view class="wuge-item wuge-item-highlight">
|
||
<view class="wuge-indicator"></view>
|
||
<view class="wuge-item-left">
|
||
<text class="wuge-name wuge-name-highlight">人格 (11) · 大吉</text>
|
||
<text class="wuge-desc wuge-desc-highlight">主运 · 万物更新，挽回天运</text>
|
||
</view>
|
||
<view class="wuge-bar">
|
||
<view class="wuge-bar-fill wuge-bar-fill-highlight" style="width: 95%"></view>
|
||
</view>
|
||
</view>
|
||
<view class="wuge-item">
|
||
<view class="wuge-item-left">
|
||
<text class="wuge-name">地格 (10) · 半吉</text>
|
||
<text class="wuge-desc">前运 · 终结之数，雪暗飘零</text>
|
||
</view>
|
||
<view class="wuge-bar">
|
||
<view class="wuge-bar-fill wuge-bar-fill-blue" style="width: 60%"></view>
|
||
</view>
|
||
</view>
|
||
<view class="wuge-item">
|
||
<view class="wuge-item-left">
|
||
<text class="wuge-name">外格 (7) · 吉</text>
|
||
<text class="wuge-desc">副运 · 精悍果断，独立权威</text>
|
||
</view>
|
||
<view class="wuge-bar">
|
||
<view class="wuge-bar-fill" style="width: 75%"></view>
|
||
</view>
|
||
</view>
|
||
<view class="wuge-item wuge-item-red">
|
||
<view class="wuge-item-left">
|
||
<text class="wuge-name">总格 (17) · 大吉</text>
|
||
<text class="wuge-desc">后运 · 权威刚强，突破万难</text>
|
||
</view>
|
||
<view class="wuge-bar">
|
||
<view class="wuge-bar-fill wuge-bar-fill-red" style="width: 90%"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 三才配置 & 五行能量 -->
|
||
<view class="grid-2">
|
||
<!-- 三才配置 -->
|
||
<view class="sancai-card">
|
||
<text class="sancai-title">三才配置</text>
|
||
<view class="sancai-circles">
|
||
<view class="sancai-circle sancai-circle-small">
|
||
<text class="sancai-circle-text" :style="setWuxingCircleStyle('金')">金</text>
|
||
<text class="sancai-circle-label">天才</text>
|
||
</view>
|
||
<view class="sancai-line"></view>
|
||
<view class="sancai-circle sancai-circle-large">
|
||
<text class="sancai-circle-text" :style="setWuxingCircleStyle('木')">木</text>
|
||
<text class="sancai-circle-label">人才</text>
|
||
</view>
|
||
<view class="sancai-line"></view>
|
||
<view class="sancai-circle sancai-circle-small">
|
||
<text class="sancai-circle-text" :style="setWuxingCircleStyle('水')">水</text>
|
||
<text class="sancai-circle-label">地才</text>
|
||
</view>
|
||
</view>
|
||
<text class="sancai-result"><text class="sancai-label">吉凶：</text>吉（金木水）</text>
|
||
</view>
|
||
|
||
<!-- 五行能量 -->
|
||
<view class="wuxing-card">
|
||
<text class="wuxing-title">五行能量</text>
|
||
<view class="wuxing-bars">
|
||
<view v-for="item in wuxingData" :key="item.label" class="wuxing-bar-item">
|
||
<text class="wuxing-bar-label" :style="setWuxingColorText(item.label as WuxingElement)">{{ item.label
|
||
}}</text>
|
||
<view class="wuxing-bar-bg">
|
||
<view class="wuxing-bar-fill" :style="{ width: item.value + '%', backgroundColor: item.color }">
|
||
</view>
|
||
</view>
|
||
<text class="wuxing-bar-value">{{ item.value }}%</text>
|
||
</view>
|
||
</view>
|
||
<text class="wuxing-note">* 基础运稳固，境遇安泰，可得部下之力。</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 5. 六维格局 -->
|
||
<view @click="openModal('sixdim')">
|
||
<SixDimensionRadar :labels="sixDimLabels" :values="sixDimValues" :remark="sixDimRemark" />
|
||
</view>
|
||
|
||
<!-- 6. 周易卦象 -->
|
||
<view class="section" @click="openModal('gua')">
|
||
<view class="section-title">
|
||
<text class="section-title-icon">🧭</text>
|
||
<text class="section-title-text">周易卦象</text>
|
||
</view>
|
||
|
||
<view class="gua-card">
|
||
<view class="gua-bg">涣</view>
|
||
<view class="gua-lines">
|
||
<view class="gua-line gua-line-solid"></view>
|
||
<view class="gua-line gua-line-solid"></view>
|
||
<view class="gua-line gua-line-broken">
|
||
<view class="gua-line-part"></view>
|
||
<view class="gua-line-part"></view>
|
||
</view>
|
||
<view class="gua-space"></view>
|
||
<view class="gua-line gua-line-broken gua-line-gray">
|
||
<view class="gua-line-part"></view>
|
||
<view class="gua-line-part"></view>
|
||
</view>
|
||
<view class="gua-line gua-line-solid gua-line-white"></view>
|
||
<view class="gua-line gua-line-broken gua-line-gray">
|
||
<view class="gua-line-part"></view>
|
||
<view class="gua-line-part"></view>
|
||
</view>
|
||
</view>
|
||
<view class="gua-content">
|
||
<view class="gua-header">
|
||
<text class="gua-name">风水涣</text>
|
||
<text class="gua-tag">上巽下坎</text>
|
||
</view>
|
||
<text class="gua-desc">风行水上，涣散之象。离散之中蕴含亨通，寓意破旧立新。利于涉大川，建功立业，乃是乘风破浪之吉兆。</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 6. 开运锦囊 -->
|
||
<view class="section" @click="openModal('lucky')">
|
||
<view class="section-title">
|
||
<ActivityIcon class="section-title-icon-svg" />
|
||
<text class="section-title-text">开运锦囊</text>
|
||
</view>
|
||
|
||
<view class="lucky-grid">
|
||
<view v-for="item in luckyItems" :key="item.label" class="lucky-item">
|
||
<view class="lucky-icon" :class="item.colorClass">{{ item.icon }}</view>
|
||
<view class="lucky-info">
|
||
<text class="lucky-label">{{ item.label }}</text>
|
||
<text class="lucky-value">{{ item.value }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 7. 诗词出处 -->
|
||
<view class="section" @click="openModal('poem')">
|
||
<view class="section-title">
|
||
<text class="section-title-icon">📖</text>
|
||
<text class="section-title-text">诗词出处</text>
|
||
</view>
|
||
|
||
<view class="poem-card">
|
||
<text class="poem-quote">❝</text>
|
||
<text class="poem-text">"长风破浪会有时，直挂<text class="poem-highlight">云帆</text>济沧海"</text>
|
||
<text class="poem-author">—— 李白《行路难·其一》</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 8. 人生运程 -->
|
||
<view class="section" @click="openModal('lifespan')">
|
||
<view class="section-title">
|
||
<text class="section-title-icon">📈</text>
|
||
<text class="section-title-text">人生运程</text>
|
||
</view>
|
||
|
||
<scroll-view scroll-x class="lifespan-scroll">
|
||
<view class="lifespan-row">
|
||
<view v-for="item in lifespanData" :key="item.age" class="lifespan-item" :class="item.colorClass">
|
||
<text class="lifespan-age">{{ item.age }}</text>
|
||
<text class="lifespan-desc">{{ item.desc }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
|
||
<!-- 9. 大师寄语 -->
|
||
<view class="master-message" @click="openModal('master')">
|
||
<text class="master-message-title">大师寄语</text>
|
||
<text class="master-message-text">"云帆"一名，既顺应了生肖兔喜彩衣、喜水木的特性，又在数理上避开了大凶之数。虽地格稍弱，但总格大吉，属先苦后甜、大器晚成之局。</text>
|
||
</view>
|
||
|
||
<view class="footer">
|
||
<text class="footer-text">壹梵 · 致力于东方美学与易经智慧的传承</text>
|
||
</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 === 'score'" class="modal-content">
|
||
<text class="modal-text">总分：93</text>
|
||
<text class="modal-text">姓名：云帆</text>
|
||
<text class="modal-text">"长风破浪会有时，直挂云帆济沧海"</text>
|
||
</view>
|
||
|
||
<view v-else-if="currentModal === 'meaning'" class="modal-content">
|
||
<text class="modal-section-title">组合意象</text>
|
||
<text class="modal-text">云者，高远洁白，逍遥自在；帆者，借风远航，志在四方。二字组合，动静结合，既有高远的志向，又有脚踏实地、乘风破浪的行动力。</text>
|
||
<text class="modal-section-title">生肖喜忌</text>
|
||
<text class="modal-text">属兔 · 喜用（示例：水生木，利生肖）</text>
|
||
</view>
|
||
|
||
<view v-else-if="currentModal === 'char'" class="modal-content">
|
||
<text class="modal-section-title">单字详解</text>
|
||
<view class="modal-char-list">
|
||
<view v-for="(item, i) in charDetails" :key="i" class="modal-char-item">
|
||
<text class="modal-char-title">{{ item.char }}（{{ item.element }}）</text>
|
||
<text class="modal-text">康熙笔画：{{ item.stroke }}</text>
|
||
<text class="modal-text">{{ item.tone }}</text>
|
||
<text class="modal-text">{{ item.desc }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else-if="currentModal === 'strokes'" class="modal-content">
|
||
<text class="modal-section-title">笔画数理分析</text>
|
||
<text class="modal-text">包含三才五格、五行能量等内容（当前为示例静态数据）。</text>
|
||
</view>
|
||
|
||
<view v-else-if="currentModal === 'sixdim'" class="modal-content">
|
||
<text class="modal-section-title">六维格局</text>
|
||
<text class="modal-text">事业、财运、健康、家庭、社交、智慧六维综合评估（当前为示例静态数据）。</text>
|
||
</view>
|
||
|
||
<view v-else-if="currentModal === 'gua'" class="modal-content">
|
||
<text class="modal-section-title">周易卦象</text>
|
||
<text class="modal-text">风行水上，涣散之象。离散之中蕴含亨通，寓意破旧立新。</text>
|
||
</view>
|
||
|
||
<view v-else-if="currentModal === 'lucky'" class="modal-content">
|
||
<text class="modal-section-title">开运锦囊</text>
|
||
<view class="modal-list">
|
||
<text v-for="(item, idx) in luckyItems" :key="idx" class="modal-text">{{ item.label }}：{{ item.value }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else-if="currentModal === 'poem'" class="modal-content">
|
||
<text class="modal-section-title">诗词出处</text>
|
||
<text class="modal-text">"长风破浪会有时，直挂云帆济沧海" —— 李白《行路难·其一》</text>
|
||
</view>
|
||
|
||
<view v-else-if="currentModal === 'lifespan'" class="modal-content">
|
||
<text class="modal-section-title">人生运程</text>
|
||
<view class="modal-list">
|
||
<text v-for="(item, idx) in lifespanData" :key="idx" class="modal-text">{{ item.age }}：{{ item.desc }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else-if="currentModal === 'master'" class="modal-content">
|
||
<text class="modal-section-title">大师寄语</text>
|
||
<text class="modal-text">"云帆"一名，既顺应了生肖兔喜彩衣、喜水木的特性，又在数理上避开了大凶之数。虽地格稍弱，但总格大吉，属先苦后甜、大器晚成之局。</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue';
|
||
import SixDimensionRadar from './SixDimensionRadar.vue';
|
||
import ActivityIcon from './icons/ActivityIcon.vue';
|
||
import { createWuxingData, getWuxingColor, WUXING_COLORS, WuxingElement } from '@/constants/wuxing';
|
||
|
||
const wuxingData = createWuxingData([10, 40, 30, 15, 5]);
|
||
|
||
const emit = defineEmits<{
|
||
back: [];
|
||
}>();
|
||
|
||
const showModal = ref(false);
|
||
const currentModal = ref<string>('');
|
||
|
||
const modalTitles: Record<string, string> = {
|
||
score: '总分详解',
|
||
meaning: '字义与生肖详解',
|
||
char: '单字详解',
|
||
strokes: '笔画数理详解',
|
||
sixdim: '六维格局详解',
|
||
gua: '周易卦象详解',
|
||
lucky: '开运锦囊详解',
|
||
poem: '诗词出处详解',
|
||
lifespan: '人生运程详解',
|
||
master: '大师寄语详解'
|
||
};
|
||
|
||
const modalTitle = computed(() => modalTitles[currentModal.value] || '详情');
|
||
|
||
const openModal = (modalType: string) => {
|
||
currentModal.value = modalType;
|
||
showModal.value = true;
|
||
};
|
||
|
||
const closeModal = () => {
|
||
showModal.value = false;
|
||
currentModal.value = '';
|
||
};
|
||
|
||
// 单字详解
|
||
const charDetails = [
|
||
{
|
||
char: "云",
|
||
element: "水",
|
||
stroke: "4画",
|
||
tone: "yún (阳平)",
|
||
desc: "意境高远，象征自由、纯洁。云卷云舒，去留无意，寓意人生境界开阔。"
|
||
},
|
||
{
|
||
char: "帆",
|
||
element: "木",
|
||
stroke: "6画",
|
||
tone: "fān (阴平)",
|
||
desc: "借风之力，行船致远。寓意事业顺利，有贵人相助，能够乘势而上。"
|
||
}
|
||
];
|
||
|
||
// 五行能量
|
||
// const wuxingData = [
|
||
// { label: "金", value: 10, color: "#E0E0E0" },
|
||
// { label: "木", value: 40, color: "#4CAF50" },
|
||
// { label: "水", value: 30, color: "#2196F3" },
|
||
// { label: "火", value: 15, color: "#F44336" },
|
||
// { label: "土", value: 5, color: "#795548" }
|
||
// ];
|
||
|
||
// 开运锦囊
|
||
const luckyItems = [
|
||
{ icon: "🎨", label: "幸运色", value: "青、蓝、黑", colorClass: "lucky-icon-blue" },
|
||
{ icon: "#", label: "幸运数", value: "1, 3, 6, 8", colorClass: "lucky-icon-pink" },
|
||
{ icon: "📍", label: "吉位", value: "东方、北方", colorClass: "lucky-icon-green" },
|
||
{ icon: "⭐", label: "贵人", value: "双鱼、巨蟹", colorClass: "lucky-icon-yellow" }
|
||
];
|
||
|
||
// 人生运程
|
||
const lifespanData = [
|
||
{ age: "少年", desc: "聪慧过人，学业优异", colorClass: "lifespan-green" },
|
||
{ age: "青年", desc: "初露锋芒，贵人提携", colorClass: "lifespan-yellow" },
|
||
{ age: "中年", desc: "事业有成，名利双收", colorClass: "lifespan-red" },
|
||
{ age: "晚年", desc: "德高望重，福寿绵长", colorClass: "lifespan-blue" }
|
||
];
|
||
|
||
const setWuxingColor = (element: WuxingElement) => {
|
||
const color = getWuxingColor(element, 'lightColor');
|
||
return `background: ${color}; color: #fff;`;
|
||
}
|
||
|
||
const setWuxingColorText = (element: WuxingElement) => {
|
||
const color = getWuxingColor(element, 'lightColor');
|
||
return `color: ${color};`;
|
||
}
|
||
|
||
// 设置三才配置圆圈的样式（背景色、边框色、文字色、阴影）
|
||
const setWuxingCircleStyle = (element: WuxingElement) => {
|
||
const config = WUXING_COLORS[element];
|
||
const color = config.color;
|
||
const rgb = config.rgb || { r: 0, g: 0, b: 0 };
|
||
|
||
return {
|
||
backgroundColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
|
||
borderColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.5)`,
|
||
color: color,
|
||
boxShadow: `0 0 20rpx rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.2)`
|
||
};
|
||
}
|
||
// 六维格局数据
|
||
const sixDimLabels = ['事业', '财运', '健康', '家庭', '社交', '智慧'];
|
||
const sixDimValues = [100, 100, 100, 100, 100, 100];
|
||
const sixDimRemark = '此名天格人格地格配置上佳，主事业运亨通。水木相生，智慧超群，唯需注意社交圆融。';
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* Result Stage */
|
||
.analysis-result {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
z-index: 10;
|
||
font-family: SimSun, "Songti SC", "Songti TC", "Noto Serif SC", STSong, serif;
|
||
color: #e2e2e2;
|
||
overflow: hidden;
|
||
padding: 32rpx;
|
||
|
||
}
|
||
|
||
.status-bar-placeholder {
|
||
height: var(--status-bar-height, 0);
|
||
width: 100%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Header */
|
||
.analysis-header {
|
||
padding: 16rpx 32rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||
background: rgba(10, 10, 15, 0.8);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.analysis-header-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
color: #a0a0a0;
|
||
background: none;
|
||
border: none;
|
||
padding: 16rpx 0;
|
||
font-size: 24rpx;
|
||
letter-spacing: 0.2em;
|
||
}
|
||
|
||
.analysis-header-arrow {
|
||
font-size: 36rpx;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.analysis-header-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
letter-spacing: 0.3em;
|
||
color: #d4af37;
|
||
text-shadow: 0 0 10rpx rgba(212, 175, 55, 0.3);
|
||
}
|
||
|
||
.analysis-header-share {
|
||
color: #d4af37;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
/* Content */
|
||
.analysis-content {
|
||
flex: 1;
|
||
height: 0;
|
||
padding-bottom: 160rpx;
|
||
}
|
||
|
||
/* Score Card */
|
||
.score-card {
|
||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
padding: 48rpx;
|
||
text-align: center;
|
||
border-radius: 4rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
margin-bottom: 64rpx;
|
||
}
|
||
|
||
.score-card-corner {
|
||
position: absolute;
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
border-color: #d4af37;
|
||
border-style: solid;
|
||
}
|
||
|
||
.score-card-corner-tl {
|
||
top: 6px;
|
||
left: 6px;
|
||
border-width: 1px 0 0 1px;
|
||
}
|
||
|
||
.score-card-corner-tr {
|
||
top: 6px;
|
||
right: 6px;
|
||
border-width: 1px 1px 0 0;
|
||
}
|
||
|
||
.score-card-corner-bl {
|
||
bottom: 6px;
|
||
left: 6px;
|
||
border-width: 0 0 1px 1px;
|
||
}
|
||
|
||
.score-card-corner-br {
|
||
bottom: 6px;
|
||
right: 6px;
|
||
border-width: 0 1px 1px 0;
|
||
}
|
||
|
||
.score-card-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.score-card-label {
|
||
font-size: 20rpx;
|
||
color: #d4af37;
|
||
letter-spacing: 0.5em;
|
||
margin-bottom: 16rpx;
|
||
text-transform: uppercase;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.score-card-rotation {
|
||
position: relative;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.score-card-ring {
|
||
position: absolute;
|
||
inset: 0;
|
||
border: 1px dashed #d4af37;
|
||
border-radius: 50%;
|
||
background: transparent;
|
||
animation: rotate 10s linear infinite;
|
||
}
|
||
|
||
.score-card-rotation-text {
|
||
position: relative;
|
||
font-size: 120rpx;
|
||
font-weight: bold;
|
||
color: #d4af37;
|
||
text-shadow: 0 0 18rpx rgba(212, 175, 55, 0.5);
|
||
}
|
||
|
||
@keyframes rotate {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.score-card-stars {
|
||
display: flex;
|
||
gap: 8rpx;
|
||
margin-top: 24rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.score-card-star {
|
||
font-size: 20rpx;
|
||
color: #5a5a5a;
|
||
}
|
||
|
||
.score-card-star.filled {
|
||
color: #d4af37;
|
||
}
|
||
|
||
.score-card-divider {
|
||
width: 100%;
|
||
height: 1px;
|
||
background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.3), transparent);
|
||
margin: 16rpx 0;
|
||
}
|
||
|
||
.score-card-name {
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
letter-spacing: 0.5em;
|
||
margin-top: 16rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.score-card-poem {
|
||
font-size: 24rpx;
|
||
color: #a0a0a0;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* Section */
|
||
.section {
|
||
margin-bottom: 64rpx;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 32rpx;
|
||
padding: 0 8rpx;
|
||
}
|
||
|
||
.section-title-icon {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.section-title-icon-svg {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
display: block;
|
||
color: #e2e2e2;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.section-title-text {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
letter-spacing: 0.3em;
|
||
}
|
||
|
||
.section-subtitle {
|
||
font-size: 20rpx;
|
||
color: #a0a0a0;
|
||
margin-bottom: 24rpx;
|
||
padding: 0 8rpx;
|
||
display: block;
|
||
}
|
||
|
||
/* Meaning Card */
|
||
.meaning-card {
|
||
background: #1a1a2e;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
padding: 32rpx;
|
||
border-radius: 16rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.meaning-card-quote {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
opacity: 0.1;
|
||
color: #d4af37;
|
||
font-size: 80rpx;
|
||
}
|
||
|
||
.meaning-card-title {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #d4af37;
|
||
margin-bottom: 16rpx;
|
||
display: block;
|
||
}
|
||
|
||
.meaning-card-text {
|
||
font-size: 24rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.75;
|
||
text-align: justify;
|
||
display: block;
|
||
}
|
||
|
||
.highlight {
|
||
color: #e2e2e2;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.meaning-card-judge {
|
||
color: #d4af37;
|
||
display: inline;
|
||
}
|
||
|
||
/* Zodiac Card */
|
||
.zodiac-card {
|
||
background: linear-gradient(to right, #16213e, #1a1a2e);
|
||
padding: 32rpx;
|
||
border-radius: 16rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.zodiac-card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.zodiac-card-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.zodiac-icon {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 50%;
|
||
background: rgba(212, 175, 55, 0.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.zodiac-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.zodiac-label {
|
||
font-size: 24rpx;
|
||
color: #a0a0a0;
|
||
}
|
||
|
||
.zodiac-value {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
margin: 10px 0px;
|
||
}
|
||
|
||
.zodiac-score {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #d4af37;
|
||
}
|
||
|
||
.zodiac-items {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.zodiac-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.zodiac-dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
background: #4caf50;
|
||
margin-top: 12rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.zodiac-text {
|
||
font-size: 24rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.67;
|
||
flex: 1;
|
||
}
|
||
|
||
.zodiac-char {
|
||
color: #e2e2e2;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* Char List */
|
||
.char-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.char-item {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
padding: 32rpx;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 32rpx;
|
||
}
|
||
|
||
.char-item-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.char-box {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
background: #0a0a0f;
|
||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||
color: #e2e2e2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 48rpx;
|
||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.char-element {
|
||
font-size: 20rpx;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 4rpx;
|
||
background: rgba(33, 150, 243, 0.2);
|
||
border: 1px solid rgba(33, 150, 243, 0.3);
|
||
color: #90caf9;
|
||
}
|
||
|
||
.char-item-right {
|
||
flex: 1;
|
||
}
|
||
|
||
.char-item-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
padding-bottom: 16rpx;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.char-meta-label {
|
||
font-size: 24rpx;
|
||
color: #a0a0a0;
|
||
}
|
||
|
||
.char-meta-value {
|
||
color: #e2e2e2;
|
||
}
|
||
|
||
.char-desc {
|
||
font-size: 24rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.75;
|
||
text-align: justify;
|
||
}
|
||
|
||
/* Strokes Display */
|
||
.strokes-display {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 48rpx;
|
||
padding: 32rpx;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 16rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
margin-bottom: 48rpx;
|
||
}
|
||
|
||
.stroke-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.stroke-box {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 16rpx;
|
||
background: #0a0a0f;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 48rpx;
|
||
color: #e2e2e2;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.stroke-box-active {
|
||
border-color: rgba(212, 175, 55, 0.3);
|
||
color: #d4af37;
|
||
}
|
||
|
||
.stroke-line {
|
||
width: 32rpx;
|
||
height: 1px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.stroke-label {
|
||
font-size: 20rpx;
|
||
color: #a0a0a0;
|
||
}
|
||
|
||
/* Wu Ge List */
|
||
.wuge-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.wuge-item {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
padding: 24rpx;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.wuge-item-highlight {
|
||
background: rgba(212, 175, 55, 0.1);
|
||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||
}
|
||
|
||
.wuge-item-red {
|
||
background: rgba(156, 42, 42, 0.1);
|
||
border: 1px solid rgba(156, 42, 42, 0.3);
|
||
}
|
||
|
||
.wuge-indicator {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 4rpx;
|
||
background: #d4af37;
|
||
}
|
||
|
||
.wuge-item-left {
|
||
flex: 1;
|
||
}
|
||
|
||
.wuge-name {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
display: block;
|
||
}
|
||
|
||
.wuge-name-highlight {
|
||
color: #d4af37;
|
||
}
|
||
|
||
.wuge-desc {
|
||
font-size: 20rpx;
|
||
color: #a0a0a0;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.wuge-desc-highlight {
|
||
color: #e2e2e2;
|
||
}
|
||
|
||
.wuge-bar {
|
||
width: 128rpx;
|
||
height: 12rpx;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 999rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.wuge-bar-fill {
|
||
height: 100%;
|
||
background: #fbc02d;
|
||
border-radius: 999rpx;
|
||
}
|
||
|
||
.wuge-bar-fill-highlight {
|
||
background: #d4af37;
|
||
}
|
||
|
||
.wuge-bar-fill-blue {
|
||
background: #42a5f5;
|
||
}
|
||
|
||
.wuge-bar-fill-red {
|
||
background: #9c2a2a;
|
||
}
|
||
|
||
/* Grid 2 */
|
||
.grid-2 {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 32rpx;
|
||
}
|
||
|
||
/* San Cai Card */
|
||
.sancai-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
padding: 32rpx;
|
||
border-radius: 16rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.sancai-title {
|
||
font-size: 24rpx;
|
||
color: #d4af37;
|
||
font-weight: bold;
|
||
letter-spacing: 0.2em;
|
||
margin-bottom: 24rpx;
|
||
padding-left: 16rpx;
|
||
border-left: 2px solid #d4af37;
|
||
display: block;
|
||
}
|
||
|
||
.sancai-circles {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 8rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.sancai-circle {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.sancai-circle-small {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
}
|
||
|
||
.sancai-circle-large {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.sancai-circle-text {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(76, 175, 80, 0.5);
|
||
background: rgba(76, 175, 80, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #4caf50;
|
||
box-shadow: 0 0 20rpx rgba(76, 175, 80, 0.2);
|
||
}
|
||
|
||
.sancai-circle-label {
|
||
font-size: 20rpx;
|
||
color: #a0a0a0;
|
||
}
|
||
|
||
.sancai-line {
|
||
width: 48rpx;
|
||
height: 1px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.sancai-result {
|
||
font-size: 20rpx;
|
||
color: #e2e2e2;
|
||
text-align: center;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
padding: 12rpx 0;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.sancai-label {
|
||
color: #d4af37;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* Wu Xing Card */
|
||
.wuxing-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
padding: 32rpx;
|
||
border-radius: 16rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.wuxing-title {
|
||
font-size: 24rpx;
|
||
color: #d4af37;
|
||
font-weight: bold;
|
||
letter-spacing: 0.2em;
|
||
margin-bottom: 24rpx;
|
||
padding-left: 16rpx;
|
||
border-left: 2px solid #d4af37;
|
||
display: block;
|
||
}
|
||
|
||
.wuxing-bars {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.wuxing-bar-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.wuxing-bar-label {
|
||
width: 40rpx;
|
||
color: #a0a0a0;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.wuxing-bar-bg {
|
||
flex: 1;
|
||
height: 12rpx;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 999rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.wuxing-bar-fill {
|
||
height: 100%;
|
||
border-radius: 999rpx;
|
||
box-shadow: 0 0 8rpx currentColor;
|
||
}
|
||
|
||
.wuxing-bar-value {
|
||
width: 64rpx;
|
||
text-align: right;
|
||
color: #e2e2e2;
|
||
font-size: 24rpx;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.wuxing-note {
|
||
font-size: 20rpx;
|
||
color: #a0a0a0;
|
||
opacity: 0.7;
|
||
line-height: 1.67;
|
||
}
|
||
|
||
/* Gua Card */
|
||
.gua-card {
|
||
background: linear-gradient(to right, #16213e, #1a1a2e);
|
||
padding: 40rpx;
|
||
border-radius: 16rpx;
|
||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 48rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.gua-bg {
|
||
position: absolute;
|
||
right: -40rpx;
|
||
top: -40rpx;
|
||
font-size: 200rpx;
|
||
color: rgba(255, 255, 255, 0.05);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.gua-lines {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12rpx;
|
||
width: 112rpx;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.gua-line {
|
||
width: 100%;
|
||
height: 12rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.gua-line-solid {
|
||
background: #d4af37;
|
||
box-shadow: 0 0 8rpx #d4af37;
|
||
}
|
||
|
||
.gua-line-broken {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.gua-line-part {
|
||
width: 45%;
|
||
height: 100%;
|
||
background: rgba(212, 175, 55, 0.5);
|
||
}
|
||
|
||
.gua-line-gray .gua-line-part {
|
||
background: rgba(160, 160, 160, 0.5);
|
||
}
|
||
|
||
.gua-line-white {
|
||
background: #e2e2e2;
|
||
}
|
||
|
||
.gua-space {
|
||
height: 8rpx;
|
||
}
|
||
|
||
.gua-content {
|
||
flex: 1;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.gua-header {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 24rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.gua-name {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
letter-spacing: 0.3em;
|
||
}
|
||
|
||
.gua-tag {
|
||
font-size: 20rpx;
|
||
color: #9c2a2a;
|
||
border: 1px solid #9c2a2a;
|
||
padding: 4rpx 8rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.gua-desc {
|
||
font-size: 24rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.75;
|
||
text-align: justify;
|
||
}
|
||
|
||
/* Lucky Grid */
|
||
.lucky-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 24rpx;
|
||
margin-bottom: 64rpx;
|
||
}
|
||
|
||
.lucky-item {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
padding: 24rpx;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
transition: border-color 0.3s;
|
||
}
|
||
|
||
.lucky-icon {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.lucky-icon-blue {
|
||
color: #42a5f5;
|
||
}
|
||
|
||
.lucky-icon-pink {
|
||
color: #ec407a;
|
||
}
|
||
|
||
.lucky-icon-green {
|
||
color: #66bb6a;
|
||
}
|
||
|
||
.lucky-icon-yellow {
|
||
color: #ffee58;
|
||
}
|
||
|
||
.lucky-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.lucky-label {
|
||
font-size: 20rpx;
|
||
color: #a0a0a0;
|
||
display: block;
|
||
}
|
||
|
||
.lucky-value {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
display: block;
|
||
}
|
||
|
||
/* Poem Card */
|
||
.poem-card {
|
||
background: rgba(226, 226, 226, 0.05);
|
||
padding: 40rpx;
|
||
border-radius: 16rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
position: relative;
|
||
overflow: hidden;
|
||
margin-bottom: 64rpx;
|
||
}
|
||
|
||
.poem-quote {
|
||
position: absolute;
|
||
top: -16rpx;
|
||
left: -16rpx;
|
||
opacity: 0.05;
|
||
color: white;
|
||
font-size: 120rpx;
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.poem-text {
|
||
font-size: 28rpx;
|
||
color: #e2e2e2;
|
||
font-style: italic;
|
||
line-height: 1.75;
|
||
text-align: center;
|
||
display: block;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.poem-highlight {
|
||
color: #d4af37;
|
||
margin: 0 8rpx;
|
||
}
|
||
|
||
.poem-author {
|
||
font-size: 20rpx;
|
||
color: #a0a0a0;
|
||
text-align: right;
|
||
display: block;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
/* Lifespan Scroll */
|
||
.lifespan-scroll {
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.lifespan-row {
|
||
display: inline-flex;
|
||
gap: 24rpx;
|
||
padding-bottom: 32rpx;
|
||
padding-left: 8rpx;
|
||
padding-right: 8rpx;
|
||
}
|
||
|
||
.lifespan-item {
|
||
min-width: 240rpx;
|
||
padding: 32rpx;
|
||
border-radius: 16rpx;
|
||
border: 1px solid;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.lifespan-green {
|
||
background: rgba(56, 142, 60, 0.2);
|
||
border-color: rgba(76, 175, 80, 0.3);
|
||
}
|
||
|
||
.lifespan-yellow {
|
||
background: rgba(245, 127, 23, 0.2);
|
||
border-color: rgba(255, 152, 0, 0.3);
|
||
}
|
||
|
||
.lifespan-red {
|
||
background: rgba(183, 28, 28, 0.2);
|
||
border-color: rgba(244, 67, 54, 0.3);
|
||
}
|
||
|
||
.lifespan-blue {
|
||
background: rgba(13, 71, 161, 0.2);
|
||
border-color: rgba(33, 150, 243, 0.3);
|
||
}
|
||
|
||
.lifespan-age {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.lifespan-desc {
|
||
font-size: 20rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.67;
|
||
}
|
||
|
||
/* Recommend List */
|
||
.recommend-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.recommend-item {
|
||
background: linear-gradient(to right, rgba(255, 255, 255, 0.05), transparent);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
padding: 24rpx;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
transition: border-color 0.3s;
|
||
}
|
||
|
||
.recommend-left {
|
||
flex: 1;
|
||
}
|
||
|
||
.recommend-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.recommend-name {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #e2e2e2;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.recommend-tags {
|
||
display: flex;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.recommend-tag {
|
||
font-size: 18rpx;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 4rpx;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
color: #a0a0a0;
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.recommend-desc {
|
||
font-size: 20rpx;
|
||
color: #a0a0a0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.recommend-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-left: 24rpx;
|
||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.recommend-score {
|
||
font-size: 24rpx;
|
||
color: #d4af37;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.recommend-label {
|
||
font-size: 18rpx;
|
||
color: #a0a0a0;
|
||
}
|
||
|
||
/* Master Message */
|
||
.master-message {
|
||
background: linear-gradient(to right, #1a1a2e, #10101a);
|
||
padding: 32rpx;
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-left: 4px solid #d4af37;
|
||
border-top-right-radius: 16rpx;
|
||
border-bottom-right-radius: 16rpx;
|
||
margin-bottom: 64rpx;
|
||
}
|
||
|
||
.master-message-title {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #d4af37;
|
||
letter-spacing: 0.3em;
|
||
margin-bottom: 16rpx;
|
||
display: block;
|
||
}
|
||
|
||
.master-message-text {
|
||
font-size: 22rpx;
|
||
color: #a0a0a0;
|
||
line-height: 1.75;
|
||
}
|
||
|
||
/* Footer */
|
||
.footer {
|
||
text-align: center;
|
||
padding-bottom: 64rpx;
|
||
}
|
||
|
||
.footer-text {
|
||
font-size: 18rpx;
|
||
color: #5a5a5a;
|
||
}
|
||
|
||
.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: 999;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
}
|
||
|
||
.modal-container {
|
||
width: 100%;
|
||
max-width: 750rpx;
|
||
max-height: 80vh;
|
||
background: #0a0a0f;
|
||
border-top-left-radius: 24rpx;
|
||
border-top-right-radius: 24rpx;
|
||
border: 1px solid rgba(212, 175, 55, 0.2);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.modal-header {
|
||
padding: 24rpx 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||
}
|
||
|
||
.modal-title {
|
||
color: #d4af37;
|
||
font-weight: bold;
|
||
letter-spacing: 0.2em;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.modal-close {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.modal-close-icon {
|
||
font-size: 44rpx;
|
||
color: rgba(212, 175, 55, 0.9);
|
||
line-height: 1;
|
||
}
|
||
|
||
.modal-body {
|
||
max-height: calc(80vh - 96rpx);
|
||
}
|
||
|
||
.modal-body-contain {
|
||
padding: 24rpx 32rpx 40rpx;
|
||
}
|
||
|
||
.modal-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.modal-section-title {
|
||
color: #d4af37;
|
||
font-weight: bold;
|
||
letter-spacing: 0.2em;
|
||
font-size: 24rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.modal-text {
|
||
color: #a0a0a0;
|
||
font-size: 24rpx;
|
||
line-height: 1.75;
|
||
}
|
||
|
||
.modal-char-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.modal-char-item {
|
||
padding: 24rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
border-radius: 16rpx;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
}
|
||
|
||
.modal-char-title {
|
||
color: #e2e2e2;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
letter-spacing: 0.2em;
|
||
}
|
||
|
||
.modal-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10rpx;
|
||
}
|
||
</style>
|