|
|
| 第1行： |
第1行： |
| <html>
| |
| <div id="bazi-app-root" style="all: initial; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;">
| |
| <style>
| |
| .bz-container {
| |
| max-width: 600px;
| |
| margin: 20px auto;
| |
| background: #fff;
| |
| border: 1px solid #d1d1d1;
| |
| border-radius: 12px;
| |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1);
| |
| overflow: hidden;
| |
| border-top: 5px solid #b32424;
| |
| }
| |
| .bz-header {
| |
| background: #fdf2f2;
| |
| padding: 20px;
| |
| text-align: center;
| |
| }
| |
| .bz-header h2 {
| |
| margin: 0;
| |
| color: #b32424;
| |
| font-size: 1.5em;
| |
| }
| |
| .bz-body { padding: 25px; }
| |
| .bz-input-group {
| |
| display: flex;
| |
| justify-content: center;
| |
| gap: 10px;
| |
| margin-bottom: 20px;
| |
| flex-wrap: wrap;
| |
| }
| |
| .bz-input-group div { text-align: left; }
| |
| .bz-input-group label { display: block; font-size: 12px; color: #666; margin-bottom: 4px; }
| |
| .bz-input-group input {
| |
| padding: 8px;
| |
| border: 1px solid #ccc;
| |
| border-radius: 4px;
| |
| width: 70px;
| |
| font-size: 14px;
| |
| }
| |
| .bz-btn {
| |
| display: block;
| |
| width: 100%;
| |
| background: #b32424;
| |
| color: #fff;
| |
| border: none;
| |
| padding: 12px;
| |
| border-radius: 6px;
| |
| font-size: 16px;
| |
| font-weight: bold;
| |
| cursor: pointer;
| |
| transition: background 0.2s;
| |
| }
| |
| .bz-btn:hover { background: #d32f2f; }
| |
| .bz-result {
| |
| margin-top: 30px;
| |
| display: none;
| |
| animation: fadeIn 0.5s;
| |
| }
| |
| @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
| |
| .bz-table {
| |
| width: 100%;
| |
| border-collapse: collapse;
| |
| table-layout: fixed;
| |
| }
| |
| .bz-table th { background: #f9f9f9; padding: 10px; border: 1px solid #eee; font-weight: normal; color: #888; }
| |
| .bz-table td {
| |
| border: 1px solid #eee;
| |
| padding: 20px 5px;
| |
| text-align: center;
| |
| }
| |
| .gz-text { font-size: 2em; font-weight: bold; color: #333; display: block; }
| |
| .wuxing-tag {
| |
| display: inline-block;
| |
| margin-top: 8px;
| |
| padding: 2px 8px;
| |
| border-radius: 10px;
| |
| font-size: 12px;
| |
| color: #fff;
| |
| }
| |
| /* 五行颜色 */
| |
| .wx-木 { background: #4caf50; } .wx-火 { background: #f44336; }
| |
| .wx-土 { background: #8d6e63; } .wx-金 { background: #ffb300; }
| |
| .wx-水 { background: #2196f3; }
| |
| </style>
| |
|
| |
|
| <div class="bz-container">
| |
| <div class="bz-header">
| |
| <h2>☯ 生辰八字专业排盘</h2>
| |
| </div>
| |
| <div class="bz-body">
| |
| <div class="bz-input-group">
| |
| <div><label>公历年</label><input type="number" id="y" value="2026"></div>
| |
| <div><label>月</label><input type="number" id="m" value="2"></div>
| |
| <div><label>日</label><input type="number" id="d" value="5"></div>
| |
| <div><label>时(0-23)</label><input type="number" id="h" value="12"></div>
| |
| </div>
| |
| <button class="bz-btn" onclick="calculateBazi()">开始排盘测算</button>
| |
|
| |
| <div id="bz-result-box" class="bz-result">
| |
| <table class="bz-table">
| |
| <thead>
| |
| <tr><th>年柱</th><th>月柱</th><th>日柱</th><th>时柱</th></tr>
| |
| </thead>
| |
| <tbody>
| |
| <tr>
| |
| <td id="res-year"></td>
| |
| <td id="res-month"></td>
| |
| <td id="res-day"></td>
| |
| <td id="res-hour"></td>
| |
| </tr>
| |
| </tbody>
| |
| </table>
| |
| <div id="wuxing-analysis" style="margin-top:15px; text-align:center; color:#666; font-size:14px;"></div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <script>
| |