842 lines
30 KiB
HTML
842 lines
30 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>皇极经世卦象计算系统</title>
|
||
<style>
|
||
body {
|
||
font-family: 'Microsoft YaHei', sans-serif;
|
||
margin: 0;
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
color: #333;
|
||
}
|
||
.container {
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
background-color: white;
|
||
padding: 30px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
h1 {
|
||
text-align: center;
|
||
color: #8B4513;
|
||
margin-bottom: 30px;
|
||
font-size: 24px;
|
||
}
|
||
.input-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
.input-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
label {
|
||
font-weight: bold;
|
||
min-width: 100px;
|
||
margin-right: 10px;
|
||
}
|
||
input {
|
||
padding: 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
margin-right: 15px;
|
||
}
|
||
button {
|
||
padding: 8px 20px;
|
||
background-color: #8B4513;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
font-size: 16px;
|
||
margin-top: 10px;
|
||
}
|
||
button:hover {
|
||
background-color: #A0522D;
|
||
}
|
||
.divider {
|
||
border-top: 1px solid #ddd;
|
||
margin: 20px 0;
|
||
}
|
||
.result-date {
|
||
text-align: center;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
font-size: 18px;
|
||
}
|
||
.gua-types {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-bottom: 5px;
|
||
text-align: center;
|
||
}
|
||
.gua-type {
|
||
font-weight: bold;
|
||
flex: 1;
|
||
}
|
||
.gua-names {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
.gua-name {
|
||
flex: 1;
|
||
padding: 8px;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
transition: all 0.3s;
|
||
font-size: 18px;
|
||
}
|
||
.gua-name:hover {
|
||
background-color: #f0f0f0;
|
||
}
|
||
.gua-name.active {
|
||
background-color: #8B4513;
|
||
color: white;
|
||
}
|
||
.gua-content {
|
||
padding: 20px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
background-color: #f9f9f9;
|
||
min-height: 80px;
|
||
margin-top: 10px;
|
||
}
|
||
.gua-content-title {
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
font-size: 18px;
|
||
}
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
.error {
|
||
color: red;
|
||
margin-top: 10px;
|
||
padding: 10px;
|
||
background-color: #ffeeee;
|
||
border-radius: 4px;
|
||
}
|
||
.loading {
|
||
text-align: center;
|
||
margin: 20px 0;
|
||
}
|
||
.spinner {
|
||
border: 4px solid rgba(0, 0, 0, 0.1);
|
||
border-radius: 50%;
|
||
border-top: 4px solid #8B4513;
|
||
width: 30px;
|
||
height: 30px;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 10px;
|
||
}
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* 修改卦象图片和内容布局样式 */
|
||
.gua-image-container {
|
||
text-align: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.gua-image {
|
||
max-width: 200px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.gua-detail-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.gua-text-info {
|
||
margin-top: 15px;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.gua-text-info p {
|
||
margin: 8px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 修改后的运势选项卡样式 */
|
||
.luck-tabs {
|
||
display: flex;
|
||
margin-top: 20px;
|
||
border-bottom: 1px solid #ddd;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.luck-tab {
|
||
padding: 8px 15px;
|
||
cursor: pointer;
|
||
border: 1px solid transparent;
|
||
border-bottom: none;
|
||
border-radius: 4px 4px 0 0;
|
||
margin-right: 5px;
|
||
margin-bottom: 5px;
|
||
background-color: #f0f0f0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.luck-tab.active {
|
||
background-color: #8B4513;
|
||
color: white;
|
||
border-color: #ddd;
|
||
}
|
||
|
||
/* 运势对比视图样式 */
|
||
.luck-comparison {
|
||
display: flex;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.luck-column {
|
||
flex: 1;
|
||
padding: 15px;
|
||
border: 1px solid #ddd;
|
||
margin: 0 5px;
|
||
background-color: white;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.luck-column-title {
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-bottom: 15px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.luck-year-item {
|
||
text-align: center; /* 内容居中 */
|
||
margin-bottom: 15px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px dashed #eee;
|
||
}
|
||
|
||
.luck-year-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.luck-year-title {
|
||
font-weight: bold;
|
||
margin-bottom: 8px;
|
||
color: #8B4513;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.luck-comparison {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.luck-column {
|
||
margin: 5px 0;
|
||
}
|
||
|
||
.luck-tab {
|
||
flex: 0 0 calc(50% - 10px);
|
||
margin-bottom: 5px;
|
||
border-radius: 4px;
|
||
border: 1px solid #ddd;
|
||
}
|
||
}
|
||
/* 新增日历样式 */
|
||
.calendar {
|
||
width: 100%;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
padding: 15px;
|
||
}
|
||
|
||
.calendar-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.calendar-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #8B4513;
|
||
}
|
||
|
||
.calendar-nav {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.calendar-nav button {
|
||
background: #8B4513;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 5px 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.calendar-weekdays {
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.calendar-days {
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
gap: 5px;
|
||
}
|
||
|
||
.calendar-day {
|
||
aspect-ratio: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
position: relative;
|
||
padding: 5px;
|
||
}
|
||
|
||
.calendar-day:hover {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.calendar-day.active {
|
||
background: #8B4513;
|
||
color: white;
|
||
}
|
||
|
||
.calendar-day.today {
|
||
font-weight: bold;
|
||
color: #8B4513;
|
||
}
|
||
|
||
.calendar-day.today.active {
|
||
color: white;
|
||
}
|
||
|
||
.day-number {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.day-trigram {
|
||
font-size: 12px;
|
||
margin-top: 3px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 日运势详情样式 */
|
||
.day-luck-detail {
|
||
margin-top: 20px;
|
||
padding: 15px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
background: white;
|
||
}
|
||
|
||
.day-luck-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
color: #8B4513;
|
||
text-align: center;
|
||
}
|
||
|
||
.day-luck-content {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
}
|
||
|
||
.day-luck-item {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
padding: 10px;
|
||
border: 1px solid #eee;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.day-luck-item-title {
|
||
font-weight: bold;
|
||
margin-bottom: 8px;
|
||
color: #8B4513;
|
||
}
|
||
|
||
.luck-year-content {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 15px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.luck-year-image {
|
||
flex-shrink: 0;
|
||
width: 80px;
|
||
height: 80px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.luck-year-text {
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.luck-year-title {
|
||
font-weight: bold;
|
||
margin-bottom: 8px;
|
||
color: #8B4513;
|
||
}
|
||
|
||
.luck-year-piwen {
|
||
color: #666;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>皇极经世卦象计算</h1>
|
||
|
||
<div class="input-group">
|
||
<label for="date-input">阳历出生日期：</label>
|
||
<input type="date" id="date-input" required>
|
||
<label for="time-input">时间：</label>
|
||
<input type="time" id="time-input" step="1" value="00:00:00">
|
||
<button id="calculate-btn">计算卦象</button>
|
||
</div>
|
||
|
||
<div id="result-container" class="hidden">
|
||
<div class="divider"></div>
|
||
<div class="result-date" id="result-date"></div>
|
||
|
||
<div class="gua-types">
|
||
<div class="gua-type">年卦</div>
|
||
<div class="gua-type">月卦</div>
|
||
<div class="gua-type">日卦</div>
|
||
<div class="gua-type">时卦</div>
|
||
<div class="gua-type">吉凶卦</div>
|
||
</div>
|
||
|
||
<div class="gua-names">
|
||
<div class="gua-name" data-gua="year"></div>
|
||
<div class="gua-name" data-gua="month"></div>
|
||
<div class="gua-name" data-gua="day"></div>
|
||
<div class="gua-name" data-gua="hour"></div>
|
||
<div class="gua-name" data-gua="luck"></div>
|
||
</div>
|
||
|
||
<div class="gua-content">
|
||
<div class="gua-content-title" id="gua-title"></div>
|
||
<div id="gua-detail"></div>
|
||
</div>
|
||
|
||
<!-- 修改后的运势选项卡 -->
|
||
<div class="luck-tabs">
|
||
<div class="luck-tab active" data-tab="year">年运势对比</div>
|
||
<div class="luck-tab" data-tab="month">月运势对比</div>
|
||
|
||
</div>
|
||
|
||
<div class="luck-content">
|
||
<div id="year-content">
|
||
<!-- 年运势对比内容将在这里动态生成 -->
|
||
<div class="luck-comparison">
|
||
<div class="luck-column">
|
||
<div class="luck-column-title">年天时运势</div>
|
||
<div id="year-tianshi-content"></div>
|
||
</div>
|
||
<div class="luck-column">
|
||
<div class="luck-column-title">年人运走势</div>
|
||
<div id="year-renyun-content"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div id="month-content" class="hidden">
|
||
<!-- 月运势对比内容将在这里动态生成 -->
|
||
<div class="luck-comparison">
|
||
<div class="luck-column">
|
||
<div class="luck-column-title">月天时运势</div>
|
||
<div id="month-tianshi-content"></div>
|
||
</div>
|
||
<div class="luck-column">
|
||
<div class="luck-column-title">月人运走势</div>
|
||
<div id="month-renyun-content"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增日运势内容 -->
|
||
<div id="day-content" class="hidden">
|
||
<div class="calendar" id="calendar-container"></div>
|
||
<div class="day-luck-detail" id="day-luck-detail">
|
||
<div class="day-luck-title">选择日期查看详细运势</div>
|
||
<div class="day-luck-content">
|
||
<div class="day-luck-item">
|
||
<div class="day-luck-item-title">天时卦象</div>
|
||
<div id="day-tianshi-content"></div>
|
||
</div>
|
||
<div class="day-luck-item">
|
||
<div class="day-luck-item-title">人运卦象</div>
|
||
<div id="day-renyun-content"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div id="error-message" class="error hidden"></div>
|
||
|
||
<div id="loading" class="loading hidden">
|
||
<div class="spinner"></div>
|
||
<p>计算中，请稍候...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 存储当前卦象数据
|
||
let currentGuaData = {};
|
||
const baseImagePath = '/static/gua_images/'; // 卦象图片基础路径
|
||
|
||
document.getElementById('calculate-btn').addEventListener('click', async () => {
|
||
const dateInput = document.getElementById('date-input');
|
||
const resultContainer = document.getElementById('result-container');
|
||
const errorMessage = document.getElementById('error-message');
|
||
const loading = document.getElementById('loading');
|
||
const timeInput = document.getElementById('time-input');
|
||
|
||
if (!dateInput.value) {
|
||
showError('请选择日期');
|
||
return;
|
||
}
|
||
|
||
loading.classList.remove('hidden');
|
||
resultContainer.classList.add('hidden');
|
||
errorMessage.classList.add('hidden');
|
||
|
||
const dateStr = dateInput.value;
|
||
const timeStr = timeInput.value + (timeInput.value.length === 5 ? ':00' : '');
|
||
|
||
try {
|
||
const response = await fetch('/calculate', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
},
|
||
body: `date=${dateStr}&time=${timeStr}`
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
currentGuaData = data.result;
|
||
|
||
// 显示计算日期
|
||
document.getElementById('result-date').textContent = `基础卦象`;
|
||
|
||
// 更新卦名显示
|
||
document.querySelector('[data-gua="year"]').textContent = currentGuaData.year_gua.trigram;
|
||
document.querySelector('[data-gua="month"]').textContent = currentGuaData.month_gua.trigram;
|
||
document.querySelector('[data-gua="day"]').textContent = currentGuaData.day_gua.trigram;
|
||
document.querySelector('[data-gua="hour"]').textContent = currentGuaData.hour_gua.trigram;
|
||
document.querySelector('[data-gua="luck"]').textContent = currentGuaData.luck_gua.trigram;
|
||
|
||
// 默认显示年卦内容
|
||
showGuaContent('year');
|
||
document.querySelector('[data-gua="year"]').classList.add('active');
|
||
|
||
// 显示运势内容
|
||
showLuckContent('year');
|
||
|
||
// 生成所有运势内容
|
||
generateLuckContent();
|
||
|
||
resultContainer.classList.remove('hidden');
|
||
} else {
|
||
showError(data.error || '计算失败');
|
||
}
|
||
} catch (error) {
|
||
showError('网络请求失败: ' + error.message);
|
||
} finally {
|
||
loading.classList.add('hidden');
|
||
}
|
||
});
|
||
|
||
// 点击卦名显示对应内容
|
||
document.querySelectorAll('.gua-name').forEach(name => {
|
||
name.addEventListener('click', function() {
|
||
// 移除所有active类
|
||
document.querySelectorAll('.gua-name').forEach(n => n.classList.remove('active'));
|
||
// 给当前点击的添加active类
|
||
this.classList.add('active');
|
||
|
||
const guaType = this.getAttribute('data-gua');
|
||
showGuaContent(guaType);
|
||
});
|
||
});
|
||
|
||
// 点击运势选项卡
|
||
document.querySelectorAll('.luck-tab').forEach(tab => {
|
||
tab.addEventListener('click', function() {
|
||
// 移除所有active类
|
||
document.querySelectorAll('.luck-tab').forEach(t => t.classList.remove('active'));
|
||
// 给当前点击的添加active类
|
||
this.classList.add('active');
|
||
|
||
const tabType = this.getAttribute('data-tab');
|
||
showLuckContent(tabType);
|
||
});
|
||
});
|
||
|
||
function showGuaContent(guaType) {
|
||
const guaData = currentGuaData[`${guaType}_gua`];
|
||
const guaName = guaData.trigram;
|
||
|
||
// 构建图片路径
|
||
const imagePath = `${baseImagePath}${guaName}卦.png`;
|
||
|
||
// 清空标题（因为现在标题也放在内容区）
|
||
document.getElementById('gua-title').textContent = '';
|
||
|
||
document.getElementById('gua-detail').innerHTML = `
|
||
<div class="gua-detail-container">
|
||
<div class="gua-image-container">
|
||
<img src="${imagePath}" alt="${guaName}卦象图" class="gua-image"
|
||
onerror="this.style.display='none'">
|
||
</div>
|
||
<div class="gua-content-title">卦名：${guaName}</div>
|
||
<div class="gua-text-info">
|
||
<p><strong>命卦批文：</strong>${guaData.piwen || '无批文信息'}</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function showLuckContent(tabType) {
|
||
// 隐藏所有内容区域
|
||
document.getElementById('year-content').classList.add('hidden');
|
||
document.getElementById('month-content').classList.add('hidden');
|
||
|
||
// 显示选中的内容区域
|
||
document.getElementById(`${tabType}-content`).classList.remove('hidden');
|
||
}
|
||
|
||
function generateLuckContent() {
|
||
// 生成年运势对比内容
|
||
generateYearLuckContent();
|
||
|
||
// 生成月运势对比内容
|
||
generateMonthLuckContent();
|
||
}
|
||
|
||
// 修改 generateYearLuckContent 函数
|
||
function generateYearLuckContent() {
|
||
// 年天时运势
|
||
let tianshiHtml = '';
|
||
if (currentGuaData.luck_tianshi_years && currentGuaData.luck_tianshi_years.length > 0) {
|
||
currentGuaData.luck_tianshi_years.forEach(item => {
|
||
const imagePath = `${baseImagePath}${item.trigram}卦.png`;
|
||
tianshiHtml += `
|
||
<div class="luck-year-item">
|
||
<div class="luck-year-content" style="display: flex; align-items: center; gap: 15px;">
|
||
<div style="flex-shrink: 0;">
|
||
<img src="${imagePath}" alt="${item.trigram}卦象图"
|
||
style="width: 80px; height: 80px; object-fit: contain; border: 1px solid #ddd; border-radius: 4px;"
|
||
onerror="this.style.display='none'">
|
||
</div>
|
||
<div>
|
||
<div class="luck-year-title">${item.year}年：${item.trigram}</div>
|
||
<p><strong>批文：</strong>${item.piwen || '无批文信息'}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
} else {
|
||
tianshiHtml = '<p>暂无年天时运势数据</p>';
|
||
}
|
||
document.getElementById('year-tianshi-content').innerHTML = tianshiHtml;
|
||
|
||
// 年人运走势
|
||
let renyunHtml = '';
|
||
if (currentGuaData.luck_years && currentGuaData.luck_years.length > 0) {
|
||
currentGuaData.luck_years.forEach(item => {
|
||
const imagePath = `${baseImagePath}${item.trigram}卦.png`;
|
||
renyunHtml += `
|
||
<div class="luck-year-item">
|
||
<div class="luck-year-content" style="display: flex; align-items: center; gap: 15px;">
|
||
<div style="flex-shrink: 0;">
|
||
<img src="${imagePath}" alt="${item.trigram}卦象图"
|
||
style="width: 80px; height: 80px; object-fit: contain; border: 1px solid #ddd; border-radius: 4px;"
|
||
onerror="this.style.display='none'">
|
||
</div>
|
||
<div>
|
||
<div class="luck-year-title">${item.year}年：${item.trigram}</div>
|
||
<p><strong>批文：</strong>${item.piwen || '无批文信息'}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
} else {
|
||
renyunHtml = '<p>暂无年人运走势数据</p>';
|
||
}
|
||
document.getElementById('year-renyun-content').innerHTML = renyunHtml;
|
||
}
|
||
|
||
// 修改 generateMonthLuckContent 函数
|
||
function generateMonthLuckContent() {
|
||
// 月天时运势
|
||
let monthTianshiHtml = '';
|
||
if (currentGuaData.luck_tianshi_month && currentGuaData.luck_tianshi_month.length > 0) {
|
||
currentGuaData.luck_tianshi_month.forEach(item => {
|
||
const imagePath = `${baseImagePath}${item.trigram}卦.png`;
|
||
monthTianshiHtml += `
|
||
<div class="luck-year-item">
|
||
<div class="luck-year-content" style="display: flex; align-items: center; gap: 15px;">
|
||
<div style="flex-shrink: 0;">
|
||
<img src="${imagePath}" alt="${item.trigram}卦象图"
|
||
style="width: 80px; height: 80px; object-fit: contain; border: 1px solid #ddd; border-radius: 4px;"
|
||
onerror="this.style.display='none'">
|
||
</div>
|
||
<div>
|
||
<div class="luck-year-title">${item.month}月：${item.trigram}</div>
|
||
<p><strong>批文：</strong>${item.piwen || '无批文信息'}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
} else {
|
||
monthTianshiHtml = '<p>暂无月天时运势数据</p>';
|
||
}
|
||
document.getElementById('month-tianshi-content').innerHTML = monthTianshiHtml;
|
||
|
||
// 月人运走势
|
||
let monthRenyunHtml = '';
|
||
if (currentGuaData.luck_years_month && currentGuaData.luck_years_month.length > 0) {
|
||
currentGuaData.luck_years_month.forEach(item => {
|
||
const imagePath = `${baseImagePath}${item.trigram}卦.png`;
|
||
monthRenyunHtml += `
|
||
<div class="luck-year-item">
|
||
<div class="luck-year-content" style="display: flex; align-items: center; gap: 15px;">
|
||
<div style="flex-shrink: 0;">
|
||
<img src="${imagePath}" alt="${item.trigram}卦象图"
|
||
style="width: 80px; height: 80px; object-fit: contain; border: 1px solid #ddd; border-radius: 4px;"
|
||
onerror="this.style.display='none'">
|
||
</div>
|
||
<div>
|
||
<div class="luck-year-title">${item.month}月：${item.trigram}</div>
|
||
<p><strong>批文：</strong>${item.piwen || '无批文信息'}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
} else {
|
||
monthRenyunHtml = '<p>暂无月人运走势数据</p>';
|
||
}
|
||
document.getElementById('month-renyun-content').innerHTML = monthRenyunHtml;
|
||
}
|
||
|
||
function showDayLuckDetail(date) {
|
||
|
||
// 查找天时卦象
|
||
const tianshiData = currentGuaData.luck_tianshi_days.find(d => d.date === date);
|
||
let tianshiHtml = '<p>无数据</p>';
|
||
if (tianshiData) {
|
||
tianshiHtml = `
|
||
<p><strong>卦名：</strong>${tianshiData.trigram}</p>
|
||
<p><strong>批文：</strong>${tianshiData.piwen || '无批文信息'}</p>
|
||
`;
|
||
}
|
||
document.getElementById('day-tianshi-content').innerHTML = tianshiHtml;
|
||
|
||
// 查找人运卦象
|
||
const renyunData = currentGuaData.luck_days.find(d => d.date === date);
|
||
let renyunHtml = '<p>无数据</p>';
|
||
if (renyunData) {
|
||
renyunHtml = `
|
||
<p><strong>卦名：</strong>${renyunData.trigram}</p>
|
||
<p><strong>批文：</strong>${renyunData.piwen || '无批文信息'}</p>
|
||
`;
|
||
}
|
||
document.getElementById('day-renyun-content').innerHTML = renyunHtml;
|
||
|
||
// 更新标题
|
||
document.querySelector('#day-luck-detail .day-luck-title').textContent =
|
||
`${date} 日运势详情`;
|
||
}
|
||
|
||
// 修改showLuckContent函数，添加日历生成
|
||
function showLuckContent(tabType) {
|
||
// 隐藏所有内容区域
|
||
document.getElementById('year-content').classList.add('hidden');
|
||
document.getElementById('month-content').classList.add('hidden');
|
||
document.getElementById('day-content').classList.add('hidden');
|
||
|
||
// 显示选中的内容区域
|
||
const contentElement = document.getElementById(`${tabType}-content`);
|
||
contentElement.classList.remove('hidden');
|
||
|
||
// 如果是日运势，初始化日历
|
||
if (tabType === 'day') {
|
||
const today = new Date();
|
||
generateCalendar(today.getFullYear(), today.getMonth());
|
||
|
||
// 默认显示今天的运势
|
||
const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
|
||
const todayElement = document.querySelector(`.calendar-day[data-date="${todayStr}"]`);
|
||
if (todayElement) {
|
||
todayElement.classList.add('active');
|
||
showDayLuckDetail(todayStr);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 修改generateLuckContent函数，添加日运势生成
|
||
function generateLuckContent() {
|
||
// 年运势对比内容
|
||
generateYearLuckContent();
|
||
|
||
// 月运势对比内容
|
||
generateMonthLuckContent();
|
||
|
||
// 日运势日历会在点击选项卡时生成
|
||
}
|
||
|
||
|
||
|
||
</script>
|
||
</body>
|
||
</html> |