/* 页面特定样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
min-height: 100vh;
color: #e0e0e0;
line-height: 1.6;
}
/* 导航栏 */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background: rgba(15, 15, 35, 0.98);
border-bottom: 1px solid rgba(200, 160, 80, 0.3);
z-index: 1000;
display: flex;
align-items: center;
padding: 0 20px;
}
.nav-logo {
font-size: 1.3em;
font-weight: 600;
background: linear-gradient(90deg, #ffd700, #ff8c00);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-right: 30px;
text-decoration: none;
}
.nav-links {
display: flex;
gap: 20px;
}
.nav-links a {
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 0.9em;
transition: color 0.3s;
}
.nav-links a:hover { color: #ffd700; }
/* 主容器 */
.main-container {
max-width: 1100px;
margin: 20px auto 40px;
padding: 0 15px;
}
/* 英雄区域 */
.hero {
text-align: center;
padding: 40px 20px 40px;
margin-bottom: 30px;
}
.hero-badge {
display: inline-block;
padding: 6px 18px;
background: rgba(255, 200, 80, 0.15);
border: 1px solid rgba(255, 200, 80, 0.3);
border-radius: 50px;
color: #ffd700;
font-size: 0.85em;
margin-bottom: 20px;
letter-spacing: 2px;
}
.hero h1 {
font-size: 2.8em;
margin-bottom: 15px;
background: linear-gradient(180deg, #fff 0%, #ffd700 50%, #ff8c00 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 6px;
font-weight: 700;
}
.hero .subtitle {
font-size: 1.2em;
color: #ffd700;
margin-bottom: 10px;
letter-spacing: 3px;
}
.hero .desc {
font-size: 1em;
color: rgba(255, 255, 255, 0.7);
max-width: 600px;
margin: 0 auto;
line-height: 1.8;
}
/* 文章模式的hero - 保持高度一致 */
.hero.article-mode {
padding: 62px 20px 55px;
}
.hero.article-mode h1 {
font-size: 1.5em;
letter-spacing: 3px;
margin-bottom: 18px;
}
.hero.article-mode .subtitle {
font-size: 1em;
letter-spacing: 1px;
margin-bottom: 10px;
}
.hero.article-mode .desc {
font-size: 0.95em;
}
/* 标签页导航 */
.tabs-nav {
display: flex;
gap: 3px;
margin-bottom: 0;
flex-wrap: nowrap;
}
.tab-btn {
padding: 12px 20px;
background: rgba(30, 30, 50, 0.8);
border: 1px solid rgba(200, 160, 80, 0.2);
border-bottom: none;
border-radius: 0;
color: rgba(255,255,255,0.7);
cursor: pointer;
font-size: 0.95em;
transition: all 0.3s;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1;
white-space: nowrap;
}
.tab-btn:first-child { border-radius: 8px 0 0 0; }
.tab-btn:last-child { border-radius: 0 8px 0 0; }        .tab-btn:hover {
background: rgba(50, 50, 80, 0.8);
color: #ffd700;
}
.tab-btn.active {
background: rgba(40, 35, 50, 0.95);
color: #ffd700;
border-color: rgba(200, 160, 80, 0.4);
font-weight: 600;
}
a.tab-btn {
text-decoration: none;
}
/* 内容卡片 */
.content-card {
background: rgba(40, 35, 50, 0.95);
border: 1px solid rgba(200, 160, 80, 0.3);
border-radius: 0 0 12px 12px;
padding: 20px !important;
min-height: 600px;
overflow: hidden;
}
.tab-content {
width: 100%;
overflow: hidden;
}
.almanac-detail-section {
max-width: calc(100% - 30px);
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.content-card {
padding: 10px 6px !important;
}
.tab-content > * {
max-width: 100%;
box-sizing: border-box;
}
}
/* 标签页内容 */
.tab-content { display: none; }
.tab-content.active { display: block; }
/* ========== 黄历查询标签 - 深色专业风格 ========== */
.almanac-card {
background: rgba(25, 25, 40, 0.9);
border: 1px solid rgba(200, 160, 80, 0.3);
border-radius: 8px;
overflow: hidden;
color: #e0e0e0;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s ease;
}
.almanac-card.loaded {
opacity: 1;
}
/* 日期头部 - 左右布局 */
.almanac-top {
display: grid;
grid-template-columns: 1fr 380px;
border-bottom: 1px solid rgba(200, 160, 80, 0.2);
}
.almanac-date-header {
display: grid;
grid-template-columns: 45px 1fr 72px;
padding: 0 15px;
background: rgba(30, 30, 50, 0.6);
}
.mobile-top-row {
display: none;
}
.date-left {
text-align: center;
border-right: 1px solid rgba(200, 160, 80, 0.2);
padding-right: 12px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.date-left .weekday {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
writing-mode: vertical-rl;
letter-spacing: 3px;
margin-bottom: 8px;
}
.date-left .constellation {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
writing-mode: vertical-rl;
letter-spacing: 3px;
}
.date-center {
text-align: center;
padding: 18px 15px;
}
.date-center .solar-date {
color: #c8a050;
font-size: 16px;
margin-bottom: 3px;
}
.date-center .day-number {
font-size: 52px;
font-weight: 700;
color: #c41e3a;
line-height: 1;
margin: 5px 0;
}
.date-center .lunar-date {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
margin-top: 10px;
}
.yiji-extra {
display: flex;
justify-content: center;
gap: 20px;
padding: 15px 15px 5px;
font-size: 14px;
border-top: 1px solid rgba(200, 160, 80, 0.15);
}
.extra-jieqi {
color: #6bdc96;
}
.extra-moon {
color: #b8b8ff;
}
.extra-huangdao {
color: #ffd700;
}
.extra-heidao {
color: rgba(180, 180, 200, 0.8);
}
.extra-festival {
color: #ff8888;
}
.extra-sanfu {
color: #ff8c00;
}
.date-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 120px;
margin-top: 8px;
}
.date-nav-btn {
width: 32px;
height: 32px;
border: 2px solid #c8a050;
border-radius: 50%;
background: rgba(200, 160, 80, 0.15);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #c8a050;
transition: all 0.2s;
}
.date-nav-btn:hover {
background: rgba(255, 200, 80, 0.3);
border-color: #ffd700;
color: #ffd700;
}
.date-right {
text-align: center;
border-left: 1px solid rgba(200, 160, 80, 0.2);
padding-left: 12px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.date-right .ganzhi-item {
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
.date-right .ganzhi-item span:first-child {
font-size: 14px;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 2px;
}
.date-right .ganzhi-item span:last-child {
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
/* 宜忌区域 - 右侧 */
.yiji-area {
padding: 15px;
background: rgba(20, 20, 35, 0.8);
border-left: 1px solid rgba(200, 160, 80, 0.2);
display: flex;
flex-direction: column;
justify-content: center;
}
.yiji-row {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
}
.yiji-row:last-child { margin-bottom: 0; }
.yiji-label {
width: 24px;
height: 24px;
border: 1.5px solid;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
flex-shrink: 0;
margin-right: 10px;
}
.yiji-label.yi {
border-color: #c41e3a;
color: #c41e3a;
}
.yiji-label.ji {
border-color: rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.7);
}
.yiji-text {
flex: 1;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
padding-top: 2px;
}
/* 时辰宜忌表 */
.shichen-area {
border-top: 1px solid rgba(200, 160, 80, 0.2);
}
.shichen-header {
background: linear-gradient(90deg, rgba(140, 100, 60, 0.6), rgba(100, 80, 50, 0.6));
color: #ffd700;
text-align: center;
padding: 10px;
font-size: 14px;
letter-spacing: 3px;
}
.shichen-list {
background: rgba(20, 20, 35, 0.5);
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.shichen-row {
display: grid;
grid-template-columns: 45px 1fr;
border-bottom: 1px solid rgba(200, 160, 80, 0.1);
border-right: 1px solid rgba(200, 160, 80, 0.1);
font-size: 15px;
}
.shichen-row:nth-child(2n) {
border-right: none;
}
.shichen-row:nth-last-child(-n+2) { border-bottom: none; }
.shichen-name-col {
background: rgba(30, 30, 50, 0.5);
border-right: 1px solid rgba(200, 160, 80, 0.1);
padding: 12px 8px;
display: flex;
align-items: center;
justify-content: center;
}
.shichen-name-text {
writing-mode: vertical-rl;
font-size: 17px;
color: #ffd700;
letter-spacing: 5px;
font-weight: 600;
}
.shichen-content-col {
padding: 10px 12px;
}
.shichen-info-line {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 6px;
font-size: 14px;
}
.shichen-xingshen-line {
color: #c8a050;
margin-bottom: 8px;
font-size: 14px;
}
.shichen-yiji-line {
display: flex;
align-items: flex-start;
margin-bottom: 5px;
}
.shichen-yiji-line:last-child { margin-bottom: 0; }
.shichen-yiji-tag {
width: 24px;
height: 24px;
border: 1.5px solid;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
flex-shrink: 0;
margin-right: 8px;
}
.shichen-yiji-tag.yi {
border-color: #c41e3a;
color: #c41e3a;
}
.shichen-yiji-tag.ji {
border-color: rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.7);
}
.shichen-yiji-text {
flex: 1;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
padding-top: 2px;
font-size: 14px;
}
/* 手机版时辰列表保持单列 */
@media (max-width: 768px) {
.shichen-list {
grid-template-columns: 1fr;
}
.shichen-row {
border-right: none;
}
.shichen-row:nth-last-child(2) { border-bottom: 1px solid rgba(200, 160, 80, 0.1); }
.shichen-row:last-child { border-bottom: none; }
}
/* 黄历详情区域 */
.almanac-detail-section {
margin-top: 20px;
background: linear-gradient(135deg, rgba(25, 25, 45, 0.95), rgba(35, 30, 50, 0.95));
border: 1px solid rgba(200, 160, 80, 0.25);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.detail-section-header {
background: linear-gradient(90deg, rgba(180, 140, 60, 0.4), rgba(120, 90, 40, 0.2), rgba(180, 140, 60, 0.4));
color: #ffd700;
text-align: center;
padding: 12px 15px;
font-size: 15px;
font-weight: 500;
letter-spacing: 6px;
border-bottom: 1px solid rgba(200, 160, 80, 0.2);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.detail-cards {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 12px;
padding: 20px;
background: rgba(20, 20, 35, 0.3);
}
.detail-card {
background: linear-gradient(145deg, rgba(40, 35, 60, 0.8), rgba(30, 28, 45, 0.9));
border-radius: 10px;
padding: 15px;
text-align: center;
border: 1px solid rgba(200, 160, 80, 0.15);
transition: all 0.3s;
position: relative;
cursor: pointer;
}
.detail-card:hover {
transform: translateY(-3px);
border-color: rgba(200, 160, 80, 0.4);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.detail-card-tip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: rgba(50, 45, 70, 0.98);
color: rgba(255, 255, 255, 0.9);
padding: 10px 14px;
border-radius: 8px;
font-size: 12px;
line-height: 1.6;
width: 180px;
text-align: left;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
border: 1px solid rgba(200, 160, 80, 0.3);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
z-index: 100;
margin-bottom: 8px;
}
.detail-card-tip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(50, 45, 70, 0.98);
}
.detail-card:hover .detail-card-tip {
opacity: 1;
visibility: visible;
}
.detail-card-icon {
width: 40px;
height: 40px;
margin: 0 auto 10px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.detail-card-icon.gold { background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 180, 0, 0.1)); color: #ffd700; }
.detail-card-icon.red { background: linear-gradient(135deg, rgba(255, 100, 100, 0.2), rgba(200, 50, 50, 0.1)); color: #ff6b6b; }
.detail-card-icon.blue { background: linear-gradient(135deg, rgba(100, 180, 255, 0.2), rgba(50, 120, 200, 0.1)); color: #6bb8ff; }
.detail-card-icon.green { background: linear-gradient(135deg, rgba(100, 220, 150, 0.2), rgba(50, 180, 100, 0.1)); color: #6bdc96; }
.detail-card-icon.purple { background: linear-gradient(135deg, rgba(180, 130, 255, 0.2), rgba(130, 80, 200, 0.1)); color: #b482ff; }
.detail-card-label {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 5px;
}
.detail-card-value {
font-size: 15px;
color: rgba(255, 255, 255, 0.95);
font-weight: 500;
}
.shensha-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.shensha-box {
padding: 20px 25px;
}
.shensha-box:first-child {
border-right: 1px solid rgba(200, 160, 80, 0.15);
background: linear-gradient(135deg, rgba(255, 215, 0, 0.03), transparent);
}
.shensha-box:last-child {
background: linear-gradient(135deg, rgba(255, 100, 100, 0.03), transparent);
}
.shensha-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(200, 160, 80, 0.15);
display: flex;
align-items: center;
gap: 8px;
}
.shensha-title::before {
content: '◆';
font-size: 10px;
}
.shensha-title.ji { color: #ffd700; }
.shensha-title.ji::before { color: #ffd700; }
.shensha-title.xiong { color: #ff6b6b; }
.shensha-title.xiong::before { color: #ff6b6b; }
.shensha-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.shensha-tag {
padding: 6px 14px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
cursor: pointer;
}
.shensha-tag-tip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: rgba(50, 45, 70, 0.98);
color: rgba(255, 255, 255, 0.9);
padding: 8px 12px;
border-radius: 6px;
font-size: 11px;
line-height: 1.5;
width: 140px;
text-align: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
border: 1px solid rgba(200, 160, 80, 0.3);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
z-index: 100;
margin-bottom: 6px;
white-space: normal;
}
.shensha-tag-tip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: rgba(50, 45, 70, 0.98);
}
.shensha-tag:hover .shensha-tag-tip {
opacity: 1;
visibility: visible;
}
.shensha-box:first-child .shensha-tag {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 180, 0, 0.08));
color: #ffd700;
border: 1px solid rgba(255, 215, 0, 0.3);
}
.shensha-box:first-child .shensha-tag:hover {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 180, 0, 0.15));
}
.shensha-box:last-child .shensha-tag {
background: linear-gradient(135deg, rgba(255, 100, 100, 0.15), rgba(255, 80, 80, 0.08));
color: #ff8888;
border: 1px solid rgba(255, 100, 100, 0.3);
}
.shensha-box:last-child .shensha-tag:hover {
background: linear-gradient(135deg, rgba(255, 100, 100, 0.25), rgba(255, 80, 80, 0.15));
}
@media (max-width: 768px) {
.detail-cards {
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 12px;
}
.detail-card {
padding: 10px 5px;
}
.detail-card-icon {
width: 28px;
height: 28px;
font-size: 15px;
}
.detail-card-label {
font-size: 9px;
}
.detail-card-value {
font-size: 11px;
}
.shensha-grid {
grid-template-columns: 1fr;
}
.shensha-box:first-child {
border-right: none;
border-bottom: 1px solid rgba(200, 160, 80, 0.15);
}
.shensha-tags {
flex-wrap: wrap;
gap: 6px;
justify-content: center;
}
.shensha-tag {
font-size: 12px;
padding: 5px 10px;
}
/* 手机版布局调整 */
.almanac-top {
display: flex;
flex-direction: column;
}
.almanac-date-header {
display: block;
padding: 15px;
}
.mobile-top-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 15px;
}
.mobile-weekday {
color: rgba(255, 255, 255, 0.7);
}
.mobile-solar {
color: rgba(255, 255, 255, 0.85);
}
.mobile-constellation {
color: rgba(255, 255, 255, 0.6);
}
.date-left {
display: none;
}
.date-center {
width: 100%;
text-align: center;
padding: 0 15px;
}
.date-center .solar-date {
display: none;
}
.date-nav {
gap: 80px;
}
.date-right {
border-left: none;
padding-left: 0;
margin-top: 15px;
justify-content: center;
flex-wrap: nowrap;
gap: 18px;
}
.date-right .ganzhi-item {
flex-direction: row;
align-items: baseline;
gap: 3px;
}
.date-right .ganzhi-item span:first-child {
margin-bottom: 0;
}
.yiji-area {
border-left: none;
border-top: 1px solid rgba(200, 160, 80, 0.2);
}
}
/* ========== 生肖标签 ========== */
.zodiac-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin-bottom: 30px;
}
.zodiac-card {
background: rgba(30, 30, 50, 0.8);
border: 1px solid rgba(200, 160, 80, 0.2);
border-radius: 12px;
padding: 20px 15px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
}
.zodiac-card:hover, .zodiac-card.active {
border-color: #ffd700;
background: rgba(255, 200, 80, 0.1);
transform: translateY(-3px);
}
.zodiac-icon {
font-size: 2.5em;
margin-bottom: 10px;
}
.zodiac-name {
font-size: 1.1em;
color: #ffd700;
font-weight: 600;
}
.zodiac-years {
font-size: 0.8em;
color: rgba(255, 255, 255, 0.5);
margin-top: 5px;
}
/* 生肖详情 */
.zodiac-detail {
display: none;
background: rgba(20, 20, 40, 0.6);
border-radius: 12px;
padding: 25px;
border: 1px solid rgba(200, 160, 80, 0.3);
}
.zodiac-detail.active { display: block; }
.zodiac-detail-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(200, 160, 80, 0.2);
}
.zodiac-detail-icon {
font-size: 3.5em;
}
.zodiac-detail-title h3 {
font-size: 1.5em;
color: #ffd700;
margin-bottom: 5px;
}
.zodiac-detail-title p {
color: rgba(255, 255, 255, 0.6);
}
.zodiac-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.zodiac-info-item {
background: rgba(30, 30, 50, 0.6);
padding: 15px;
border-radius: 8px;
}
.zodiac-info-label {
color: #c8a050;
font-size: 0.85em;
margin-bottom: 5px;
}
.zodiac-info-value {
color: #fff;
font-weight: 500;
}
.zodiac-compat {
margin-top: 20px;
}
.zodiac-compat h4 {
color: #ffd700;
margin-bottom: 15px;
}
.compat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.compat-item {
padding: 12px 15px;
border-radius: 8px;
}
.compat-item.good {
background: rgba(80, 200, 120, 0.15);
border: 1px solid rgba(80, 200, 120, 0.3);
}
.compat-item.bad {
background: rgba(255, 100, 100, 0.15);
border: 1px solid rgba(255, 100, 100, 0.3);
}
.compat-label {
font-size: 0.85em;
margin-bottom: 5px;
}
.compat-item.good .compat-label { color: #50c878; }
.compat-item.bad .compat-label { color: #ff6b6b; }
.compat-value {
color: #fff;
font-weight: 500;
}
/* ========== 节气标签 ========== */
.jieqi-current {
background: linear-gradient(135deg, rgba(255, 200, 80, 0.15), rgba(200, 150, 50, 0.1));
border: 1px solid rgba(255, 200, 80, 0.4);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
text-align: center;
}
.jieqi-current h3 {
color: #ffd700;
font-size: 1.3em;
margin-bottom: 10px;
}
.jieqi-current-name {
font-size: 2.5em;
color: #fff;
font-weight: 700;
margin-bottom: 10px;
}
.jieqi-current-date {
color: rgba(255, 255, 255, 0.7);
}
.jieqi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.jieqi-card {
background: rgba(30, 30, 50, 0.8);
border: 1px solid rgba(200, 160, 80, 0.2);
border-radius: 10px;
padding: 15px 10px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
}
.jieqi-card:hover {
border-color: #ffd700;
background: rgba(255, 200, 80, 0.1);
}
.jieqi-card.spring { border-left: 3px solid #50c878; }
.jieqi-card.summer { border-left: 3px solid #ff6b6b; }
.jieqi-card.autumn { border-left: 3px solid #ffd700; }
.jieqi-card.winter { border-left: 3px solid #6bb5ff; }
.jieqi-name {
font-size: 1.1em;
color: #fff;
font-weight: 600;
margin-bottom: 5px;
}
.jieqi-date {
font-size: 0.8em;
color: rgba(255, 255, 255, 0.5);
}
/* ========== 择日标签 ========== */
.zeri-form {
background: rgba(255, 200, 80, 0.1);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
}
.zeri-form h3 {
color: #ffd700;
margin-bottom: 20px;
text-align: center;
}
.zeri-options {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.zeri-option {
padding: 12px;
background: rgba(30, 30, 50, 0.8);
border: 1px solid rgba(200, 160, 80, 0.2);
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
color: rgba(255, 255, 255, 0.8);
}
.zeri-option:hover, .zeri-option.active {
border-color: #ffd700;
background: rgba(255, 200, 80, 0.15);
color: #ffd700;
}
.zeri-results {
margin-top: 25px;
}
.zeri-result-item {
background: rgba(30, 30, 50, 0.6);
border-radius: 10px;
padding: 20px;
margin-bottom: 15px;
border-left: 4px solid #50c878;
}
.zeri-result-date {
font-size: 1.2em;
color: #ffd700;
font-weight: 600;
margin-bottom: 8px;
}
.zeri-result-info {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9em;
}
/* ========== 农历知识标签 ========== */
.knowledge-section {
margin-bottom: 30px;
}
.knowledge-section h3 {
color: #ffd700;
font-size: 1.2em;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(200, 160, 80, 0.3);
}
.knowledge-content {
color: rgba(255, 255, 255, 0.85);
line-height: 1.9;
}
.knowledge-content p {
margin-bottom: 15px;
}
.tiangan-dizhi-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin: 20px 0;
}
.td-item {
background: rgba(30, 30, 50, 0.8);
border: 1px solid rgba(200, 160, 80, 0.2);
border-radius: 8px;
padding: 12px;
text-align: center;
}
.td-char {
font-size: 1.5em;
color: #ffd700;
font-weight: 600;
}
.td-info {
font-size: 0.75em;
color: rgba(255, 255, 255, 0.5);
margin-top: 5px;
}
.wuxing-legend {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin: 15px 0;
}
.wuxing-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 15px;
border-radius: 6px;
}
.wuxing-item.wood { background: rgba(80, 200, 80, 0.2); color: #50c850; }
.wuxing-item.fire { background: rgba(255, 100, 100, 0.2); color: #ff6b6b; }
.wuxing-item.earth { background: rgba(200, 180, 80, 0.2); color: #c8b450; }
.wuxing-item.metal { background: rgba(200, 200, 200, 0.2); color: #c8c8c8; }
.wuxing-item.water { background: rgba(100, 150, 255, 0.2); color: #6496ff; }
/* 农历转换 */
.convert-section {
background: rgba(30, 30, 50, 0.6);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
}
.convert-title {
color: #ffd700;
text-align: center;
margin-bottom: 20px;
}
.convert-result {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.convert-box {
background: rgba(20, 20, 40, 0.6);
border-radius: 10px;
padding: 20px;
text-align: center;
}
.convert-box h4 {
color: #c8a050;
margin-bottom: 15px;
}
.convert-date {
font-size: 1.3em;
color: #fff;
font-weight: 600;
}
.convert-extra {
margin-top: 10px;
color: rgba(255, 255, 255, 0.6);
font-size: 0.9em;
}
/* 底部 */
.footer {
text-align: center;
padding: 40px 20px;
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: 30px;
}
.footer-text { color: rgba(255,255,255,0.6); margin-bottom: 15px; font-size: 0.9em; line-height: 1.8; }
.footer-links { display: flex; justify-content: center; gap: 25px; margin-bottom: 15px; line-height: 1.8; }
.footer-links a { color: #c8a050; text-decoration: none; font-size: 0.85em; }
.footer-links a:hover { color: #ffd700; }
.footer-copy { color: rgba(255,255,255,0.4); font-size: 0.8em; margin: 0.5em 0; line-height: 1.8; }
.footer a {
color: #c8a050;
text-decoration: none;
}
/* 响应式 */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.2em;
letter-spacing: 2px;
white-space: nowrap;
}
.main-container { padding: 0 !important; margin: 10px auto 20px; }
.tabs-nav { display: flex; flex-wrap: wrap; gap: 2px; }
.tab-btn { padding: 8px 5px; font-size: 0.8em; font-family: inherit; justify-content: center; flex: none !important; width: calc(20% - 1.6px) !important; }
.content-card { padding: 15px; border-radius: 0 0 12px 12px; }
.date-picker { flex-direction: column; align-items: stretch; }
.shensha-section, .yiji-section { grid-template-columns: 1fr; }
.zodiac-grid { grid-template-columns: repeat(3, 1fr); }
.jieqi-grid { grid-template-columns: repeat(2, 1fr); }
.zeri-options { grid-template-columns: repeat(2, 1fr); }
.tiangan-dizhi-grid { grid-template-columns: repeat(5, 1fr); }
.zodiac-info-grid, .compat-grid, .convert-result { grid-template-columns: 1fr; }
.shichen-header { flex-direction: column; }
.shichen-name { margin-bottom: 8px; }
.shichen-yiji { grid-template-columns: 40px 1fr; }
}
@media (max-width: 768px) {
html, body {
overflow-x: hidden;
}
.intro-card {
padding: 15px;
margin-top: 30px;
}
.intro-block {
padding: 12px;
}
}
/* 黄历介绍样式 */
.intro-card {
margin-top: 50px;
background: rgba(40, 35, 50, 0.95);
border: 1px solid rgba(200, 160, 80, 0.3);
border-radius: 12px;
padding: 25px;
}
.intro-card-title {
color: #ffd700;
font-size: 18px;
margin: 0 0 20px 0;
padding-bottom: 10px;
border-bottom: 1px solid rgba(200, 160, 80, 0.2);
}
.huangli-intro {
color: rgba(255,255,255,0.85);
line-height: 1.8;
}
.intro-block {
margin-bottom: 20px;
padding: 15px;
background: rgba(200,160,80,0.08);
border-radius: 8px;
}
.intro-block:last-child {
margin-bottom: 0;
}
.intro-block h4 {
color: #c8a050;
font-size: 15px;
margin: 0 0 10px 0;
font-weight: 600;
}
.intro-block p {
margin: 0;
font-size: 15px;
color: rgba(255,255,255,0.75);
}
/* ========== 月历样式 ========== */
.month-calendar {
padding: 20px;
}
.month-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.month-nav-btn {
background: rgba(200, 160, 80, 0.2);
border: 1px solid rgba(200, 160, 80, 0.3);
color: #c8a050;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
}
.month-nav-btn:hover {
background: rgba(200, 160, 80, 0.4);
color: #ffd700;
}
.month-title {
font-size: 18px;
color: #ffd700;
font-weight: 600;
}
.weekday-header {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
padding: 10px 0;
border-bottom: 1px solid rgba(200, 160, 80, 0.2);
font-weight: 600;
}
.weekday-cell {
color: rgba(255, 255, 255, 0.8);
font-size: 15px;
}
.weekday-cell.sun { color: #ff6b6b; }
.weekday-cell.sat { color: #6bb5ff; }
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.calendar-day {
padding: 8px 4px;
text-align: center;
border-bottom: 1px solid rgba(200, 160, 80, 0.1);
cursor: pointer;
transition: all 0.2s;
min-height: 60px;
}
.calendar-day:hover {
background: rgba(200, 160, 80, 0.15);
}
.calendar-day.today {
background: rgba(80, 200, 120, 0.15);
border: 2px solid #50c878;
border-radius: 8px;
}
.calendar-day.selected {
background: rgba(255, 215, 0, 0.2);
border: 2px solid #ffd700;
border-radius: 8px;
}
.calendar-day.other-month {
opacity: 0.3;
}
.day-solar {
font-size: 20px;
font-weight: 500;
margin-bottom: 4px;
}
.calendar-day.sun .day-solar { color: #ff6b6b; }
.calendar-day.sat .day-solar { color: #6bb5ff; }
.day-lunar {
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
}
.day-lunar .festival { color: #ff6b6b; }
.day-lunar .jieqi { color: #ff6b6b; }
.month-quick-nav {
text-align: center;
padding: 15px 0;
border-bottom: 1px solid rgba(200, 160, 80, 0.2);
}
.quick-btn {
background: linear-gradient(135deg, #c8a050, #a08040);
border: none;
color: #fff;
padding: 8px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
}
.quick-btn:hover {
background: linear-gradient(135deg, #dab060, #b89050);
transform: translateY(-2px);
}
.date-converter {
padding: 20px 0 0;
}
.converter-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.converter-label {
color: #c8a050;
font-size: 14px;
min-width: 85px;
}
.converter-select {
padding: 6px 10px;
border: 1px solid rgba(200, 160, 80, 0.3);
border-radius: 4px;
background: rgba(30, 30, 50, 0.8);
color: #fff;
font-size: 14px;
}
.converter-btn {
background: rgba(200, 160, 80, 0.3);
border: 1px solid rgba(200, 160, 80, 0.4);
color: #ffd700;
padding: 6px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
}
.converter-btn:hover {
background: rgba(200, 160, 80, 0.5);
}
.converter-result {
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
padding: 8px 0 8px 85px;
min-height: 20px;
}
@media (max-width: 768px) {
.calendar-day {
padding: 6px 2px;
min-height: 50px;
}
.day-solar { font-size: 16px; }
.day-lunar { font-size: 10px; }
.month-nav-btn { padding: 6px 10px; font-size: 12px; }
.month-title { font-size: 15px; }
.converter-row {
flex-wrap: wrap;
gap: 6px;
}
.converter-label {
width: 100%;
margin-bottom: 2px;
}
.converter-row select,
.converter-row span:not(.converter-label) {
font-size: 12px;
}
.converter-select {
padding: 5px 6px;
min-width: auto;
}
.converter-result { padding-left: 0; }
}
/* ========== 精选文章样式 ========== */
.articles-section { padding: 0; }
.articles-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid rgba(200, 160, 80, 0.2); }
.articles-filter .filter-btn { padding: 8px 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(200, 160, 80, 0.3); border-radius: 20px; color: #ccc; cursor: pointer; transition: all 0.3s; font-size: 0.9em; }
.articles-filter .filter-btn:hover, .articles-filter .filter-btn.active { background: rgba(255, 215, 0, 0.2); border-color: #ffd700; color: #ffd700; }
.articles-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 30px; padding-top: 25px; border-top: 1px solid rgba(200, 160, 80, 0.15); flex-wrap: wrap; }
.page-btn { padding: 8px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(200, 160, 80, 0.3); border-radius: 6px; color: #ccc; cursor: pointer; transition: all 0.3s; font-size: 0.9em; }
.page-btn:hover:not(.disabled) { background: rgba(255, 215, 0, 0.15); border-color: rgba(255, 215, 0, 0.5); color: #ffd700; }
.page-btn.active { background: rgba(255, 215, 0, 0.2); border-color: #ffd700; color: #ffd700; }
.page-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.page-ellipsis { color: #666; padding: 0 5px; }
.page-info { color: #888; font-size: 0.85em; margin-left: 10px; }
.articles-list, #articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.article-card, .art-card { background: rgba(30, 30, 60, 0.6); border: 1px solid rgba(200, 160, 80, 0.2); border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.3s; }
.article-card:hover, .art-card:hover { transform: translateY(-5px); border-color: rgba(200, 160, 80, 0.5); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.article-card .category, .art-cat { display: inline-block; padding: 4px 12px; background: rgba(255, 215, 0, 0.15); color: #ffd700; border-radius: 4px; font-size: 0.8em; margin-bottom: 10px; }
.article-card .title, .art-title { font-size: 1.1em; color: #fff; margin-bottom: 8px; line-height: 1.4; }
.article-card .desc, .art-desc { color: #999; font-size: 0.9em; line-height: 1.6; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card .meta, .art-meta { display: flex; justify-content: space-between; color: #666; font-size: 0.85em; }
.article-card .meta span:last-child, .art-meta span:last-child { color: #ffd700; }
.article-detail, #article-detail-view { padding: 20px 0; }
.article-detail .back-btn, #article-detail-view .back-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 8px; color: #ffd700; cursor: pointer; margin-bottom: 25px; transition: all 0.3s; }
.article-detail .back-btn:hover, #article-detail-view .back-btn:hover { background: rgba(255, 215, 0, 0.2); }
.article-detail .article-header, #article-content h1 { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid rgba(200, 160, 80, 0.2); }
#article-content h1 { font-size: 1.6em; color: #ffd700; margin-bottom: 15px; }
.art-detail-meta { text-align: center; color: #888; font-size: 0.9em; margin-bottom: 30px; }
.article-detail .article-content, #article-content { line-height: 1.8; }
.article-detail .article-content h2, #article-content h2 { color: #ffd700; font-size: 1.2em; margin: 30px 0 15px; }
.article-detail .article-content p, #article-content p { margin: 15px 0; text-indent: 2em; text-align: justify; }
.articles-empty { text-align: center; padding: 60px 20px; color: #888; }
.art-recommend { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(200, 160, 80, 0.2); }
.art-recommend h3 { color: #ffd700; margin-bottom: 20px; }
.art-recommend-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.art-recommend-item { background: rgba(30, 30, 60, 0.6); border: 1px solid rgba(200, 160, 80, 0.2); border-radius: 8px; padding: 15px; cursor: pointer; transition: all 0.3s; }
.art-recommend-item:hover { border-color: rgba(200, 160, 80, 0.5); transform: translateY(-2px); }
.rec-cat { display: inline-block; padding: 2px 8px; background: rgba(255, 215, 0, 0.15); color: #ffd700; border-radius: 4px; font-size: 0.75em; margin-bottom: 8px; }
.rec-title { color: #ddd; font-size: 0.9em; line-height: 1.4; }
@media (max-width: 768px) {
.articles-list, #articles-grid { grid-template-columns: 1fr; }
.articles-filter { justify-content: center; }
.art-recommend-grid { grid-template-columns: 1fr 1fr; }
.articles-pagination { gap: 5px; }
.page-btn { padding: 6px 10px; font-size: 0.85em; }
.page-info { width: 100%; text-align: center; margin-top: 10px; margin-left: 0; }
}
/* 卦象模块样式 */
.gua-box {
background: rgba(20, 20, 40, 0.6);
border-radius: 12px;
padding: 25px;
}
.gua-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(200, 160, 80, 0.2);
}
.gua-symbol {
font-size: 60px;
color: #ffd700;
line-height: 1;
}
.gua-info {
flex: 1;
}
.gua-name {
font-size: 24px;
color: #ffd700;
font-weight: bold;
margin-bottom: 8px;
}
.gua-judgement {
color: #c8a050;
font-size: 15px;
}
.gua-image {
background: rgba(30, 30, 50, 0.5);
padding: 15px 20px;
border-radius: 8px;
color: #aaa;
font-style: italic;
margin-bottom: 20px;
text-align: center;
}
.gua-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.gua-left, .gua-right {
background: rgba(30, 30, 50, 0.4);
border-radius: 10px;
padding: 20px;
}
.gua-xiangri {
background: rgba(255, 215, 0, 0.08);
border-left: 3px solid #ffd700;
padding: 15px;
margin-bottom: 15px;
border-radius: 0 8px 8px 0;
}
.gua-xiangri-title {
color: #ffd700;
font-weight: bold;
margin-bottom: 10px;
}
.gua-xiangri-text {
color: #ddd;
line-height: 1.8;
font-size: 15px;
}
.gua-reading-item {
margin-bottom: 15px;
padding: 12px 15px;
background: rgba(40, 40, 60, 0.5);
border-radius: 8px;
border-left: 3px solid #c8a050;
}
.gua-reading-title {
color: #ffd700;
font-size: 15px;
margin-bottom: 8px;
font-weight: bold;
}
.gua-reading-title::before {
content: '【';
color: #c8a050;
}
.gua-reading-title::after {
content: '】';
color: #c8a050;
}
.gua-reading-text {
color: #ccc;
font-size: 14px;
line-height: 1.7;
}
.gua-extra-info {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 15px;
}
.gua-extra-item {
background: rgba(40, 40, 60, 0.5);
padding: 10px 12px;
border-radius: 6px;
display: flex;
justify-content: space-between;
}
.gua-extra-label {
color: #c8a050;
font-size: 14px;
}
.gua-extra-value {
color: #ddd;
font-size: 14px;
}
/* 地母经模块样式 */
.dimu-box {
background: rgba(20, 20, 40, 0.6);
border-radius: 12px;
padding: 25px;
}
.dimu-poem {
background: linear-gradient(135deg, rgba(180, 140, 60, 0.15), rgba(120, 90, 40, 0.1));
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
text-align: center;
}
.dimu-poem-title {
color: #ffd700;
font-size: 16px;
margin-bottom: 15px;
}
.dimu-poem-content {
color: #e0e0e0;
font-size: 15px;
line-height: 2;
white-space: pre-line;
}
.dimu-buyue, .dimu-fengqian {
background: rgba(30, 30, 50, 0.5);
border-radius: 8px;
padding: 15px 20px;
margin-bottom: 15px;
}
.dimu-section-title {
color: #c8a050;
font-size: 15px;
margin-bottom: 10px;
}
.dimu-section-content {
color: #bbb;
line-height: 1.8;
}
/* 时辰占卜矩阵大表样式 */
.zhanbu-matrix-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background: rgba(20, 20, 40, 0.6);
border-radius: 12px;
padding: 15px;
}
.zhanbu-matrix {
width: max-content;
min-width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.zhanbu-matrix th {
background: transparent;
color: #ffd700;
font-weight: normal;
padding: 10px 8px;
border: 1px solid rgba(200, 160, 80, 0.25);
white-space: nowrap;
text-align: center;
position: sticky;
top: 0;
z-index: 1;
}
.zhanbu-type-th {
width: 80px;
min-width: 80px;
position: sticky;
left: 0;
z-index: 3 !important;
background: transparent !important;
}
.zhanbu-bazi-row td {
font-size: 11.5px;
white-space: nowrap;
}
.zhanbu-kongwang-row td {
text-align: center;
}
.zhanbu-matrix td {
padding: 10px 8px;
border: 1px solid rgba(200, 160, 80, 0.18);
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
min-width: 120px;
font-size: 12.5px;
}
.zhanbu-matrix td:first-child {
color: #c8a050;
font-weight: bold;
white-space: nowrap;
text-align: center;
background: rgba(30, 25, 50, 0.95);
position: sticky;
left: 0;
z-index: 2;
min-width: 80px;
font-size: 14px;
}
.zhanbu-matrix tr:nth-child(even) {
background: rgba(30, 30, 50, 0.3);
}
.zhanbu-matrix tr:nth-child(even) td:first-child {
background: rgba(35, 30, 55, 0.95);
}
.zhanbu-matrix tr:hover {
background: rgba(200, 160, 80, 0.08);
}
.zhanbu-matrix tr:hover td:first-child {
background: rgba(50, 40, 70, 0.95);
}
/* 嫁娶吉凶表样式 */
.jiehun-box {
background: rgba(20, 20, 40, 0.6);
border-radius: 12px;
padding: 25px;
}
.jiehun-taisui {
background: linear-gradient(135deg, rgba(255, 100, 100, 0.1), rgba(200, 80, 80, 0.05));
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
border-left: 3px solid #ff6b6b;
}
.taisui-title {
color: #ff6b6b;
font-size: 15px;
margin-bottom: 10px;
}
.taisui-list {
color: #e0e0e0;
line-height: 1.8;
}
.jiehun-liyue {
background: rgba(30, 30, 50, 0.5);
border-radius: 10px;
padding: 20px;
}
.liyue-title {
color: #ffd700;
font-size: 15px;
margin-bottom: 15px;
text-align: center;
}
.liyue-table {
width: 100%;
border-collapse: collapse;
}
.liyue-table th, .liyue-table td {
padding: 10px 15px;
border: 1px solid rgba(200, 160, 80, 0.2);
text-align: center;
}
.liyue-table th {
background: rgba(200, 160, 80, 0.15);
color: #ffd700;
font-weight: normal;
}
.liyue-table tr:nth-child(even) {
background: rgba(30, 30, 50, 0.3);
}
.liyue-table td:first-child {
color: #c8a050;
}
.liyue-table td.dali { color: #4CAF50; }
.liyue-table td.xiaoli { color: #66BB6A; }
.liyue-table-wrap { overflow-x: auto; }
.liyue-desc {
color: rgba(255,255,255,0.5);
font-size: 12px;
margin-top: 12px;
line-height: 1.6;
text-align: center;
}
/* 三合一切换按钮样式 */
.sanhe-tabs {
display: flex;
flex-wrap: wrap;
gap: 0;
margin-bottom: 0;
}
.sanhe-tab {
flex: 1 1 auto;
min-width: 0;
background: linear-gradient(180deg, #8b7340, #6b5930);
border: none;
color: rgba(255, 255, 255, 0.7);
padding: 10px 6px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
letter-spacing: 1px;
font-weight: bold;
border-right: 1px solid rgba(0,0,0,0.2);
white-space: nowrap;
}
.sanhe-tab:last-child { border-right: none; }
.sanhe-tab:first-child { border-radius: 10px 0 0 0; }
.sanhe-tab:last-child { border-radius: 0 10px 0 0; }
.sanhe-tab:hover {
background: linear-gradient(180deg, #a08848, #7d6a38);
color: #fff;
}
.sanhe-tab.active {
background: linear-gradient(180deg, #c8a050, #a08040);
color: #1a1a2e;
}
.sanhe-panel {
display: none;
}
.sanhe-panel.active {
display: block;
}
/* 丰富面板通用样式 */
.rich-panel-box {
padding: 20px 25px;
}
.rich-panel-title {
color: #ffd700;
font-size: 18px;
font-weight: bold;
text-align: center;
margin-bottom: 12px;
letter-spacing: 2px;
}
.rich-panel-subtitle {
color: #c8a050;
font-size: 14px;
text-align: center;
margin-bottom: 10px;
}
.rich-panel-poem {
background: rgba(200, 160, 80, 0.08);
border-left: 3px solid #c8a050;
padding: 12px 16px;
color: #e8d5a0;
font-size: 15px;
line-height: 2;
margin-bottom: 15px;
border-radius: 0 6px 6px 0;
}
.rich-panel-highlight {
color: #c8a050;
font-size: 15px;
text-align: center;
line-height: 2;
margin-bottom: 15px;
padding: 10px;
background: rgba(200, 160, 80, 0.06);
border-radius: 8px;
}
.rich-panel-desc {
color: rgba(255,255,255,0.7);
font-size: 14px;
line-height: 1.9;
padding: 12px 16px;
background: rgba(40,40,60,0.4);
border-radius: 8px;
margin-bottom: 12px;
}
.rich-panel-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 12px;
}
.rich-panel-card {
background: rgba(40, 35, 60, 0.6);
border: 1px solid rgba(200, 160, 80, 0.15);
border-radius: 8px;
padding: 12px 14px;
}
.rich-panel-card-label {
color: #c8a050;
font-size: 12px;
margin-bottom: 6px;
font-weight: bold;
}
.rich-panel-card-value {
color: rgba(255,255,255,0.8);
font-size: 14px;
line-height: 1.7;
}
.rich-panel-resolve {
margin-top: 15px;
padding: 14px 16px;
background: rgba(80, 200, 120, 0.08);
border: 1px solid rgba(80, 200, 120, 0.2);
border-radius: 8px;
color: rgba(255,255,255,0.8);
font-size: 14px;
line-height: 1.8;
}
.rich-panel-resolve-title {
color: #69db7c;
font-weight: bold;
margin-bottom: 8px;
font-size: 15px;
}
.dimu-interpret {
margin-top: 15px;
padding: 15px;
background: rgba(40,40,60,0.4);
border-radius: 8px;
}
.dimu-interpret-title {
color: #ffd700;
font-size: 15px;
font-weight: bold;
margin-bottom: 8px;
}
.dimu-interpret-text {
color: rgba(255,255,255,0.7);
font-size: 14px;
line-height: 1.9;
}
.shichen-jx-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
margin-left: 6px;
}
.shichen-jx-badge.ji { background: rgba(80,200,120,0.2); color: #69db7c; }
.shichen-jx-badge.xiong { background: rgba(255,100,100,0.2); color: #ff6b6b; }
@media (max-width: 768px) {
.rich-panel-grid { grid-template-columns: 1fr; }
.sanhe-tabs { flex-wrap: wrap; }
.sanhe-tab { flex: 1 1 33%; font-size: 12px; padding: 8px 4px; }
/* 手机版拉宽内容区域 */
.rich-panel-box { padding: 12px 10px; }
.rich-panel-poem { padding: 10px 12px; }
.rich-panel-desc { padding: 10px 12px; }
.rich-panel-card { padding: 10px; }
.rich-panel-highlight { padding: 8px; }
.jiuxing-box { padding: 10px 6px; }
.jiuxing-poem { padding: 8px 6px; }
.jianchu-detail-box { padding: 10px 6px; }
.jianchu-poem { padding: 8px 6px; }
.xingxiu-detail-box { padding: 10px 6px; }
.xingxiu-poem { padding: 8px 6px; }
.shichen-table-wrap { padding: 8px 4px; }
}
/* 河图洛书九星样式 */
.jiuxing-box {
background: rgba(20, 20, 40, 0.6);
border-radius: 12px;
padding: 25px;
text-align: center;
}
.jiuxing-title {
color: #ffd700;
font-size: 18px;
font-weight: bold;
margin-bottom: 8px;
}
.jiuxing-position {
color: #c8a050;
font-size: 15px;
margin-bottom: 15px;
}
.jiuxing-poem {
color: #e0e0e0;
font-size: 15px;
line-height: 2;
padding: 15px;
background: rgba(30, 30, 50, 0.5);
border-radius: 8px;
margin-bottom: 12px;
}
.jiuxing-desc {
color: rgba(255,255,255,0.6);
font-size: 14px;
line-height: 1.6;
}
/* 建除十二神详解 */
.jianchu-detail-box {
background: rgba(20, 20, 40, 0.6);
border-radius: 12px;
padding: 25px;
text-align: center;
}
.jianchu-name {
color: #ffd700;
font-size: 22px;
font-weight: bold;
margin-bottom: 15px;
}
.jianchu-poem {
color: #e0e0e0;
font-size: 15px;
line-height: 2;
padding: 15px;
background: rgba(30, 30, 50, 0.5);
border-radius: 8px;
}
/* 二十八星宿详解 */
.xingxiu-detail-box {
background: rgba(20, 20, 40, 0.6);
border-radius: 12px;
padding: 25px;
text-align: center;
}
.xingxiu-name {
color: #4fc3f7;
font-size: 22px;
font-weight: bold;
margin-bottom: 15px;
}
.xingxiu-poem {
color: #e0e0e0;
font-size: 15px;
line-height: 2;
padding: 15px;
background: rgba(30, 30, 50, 0.5);
border-radius: 8px;
}
/* 时辰吉凶详细大表 */
.shichen-table-wrap {
overflow-x: auto;
background: rgba(20, 20, 40, 0.6);
border-radius: 12px;
padding: 15px;
}
.shichen-detail-table {
width: 100%;
border-collapse: collapse;
min-width: 700px;
}
.shichen-detail-table th {
background: rgba(200, 160, 80, 0.15);
color: #ffd700;
padding: 10px 8px;
font-weight: normal;
font-size: 14px;
border: 1px solid rgba(200, 160, 80, 0.2);
white-space: nowrap;
}
.shichen-detail-table td {
padding: 8px;
border: 1px solid rgba(200, 160, 80, 0.15);
text-align: center;
font-size: 12px;
color: #e0e0e0;
}
.shichen-detail-table tr:nth-child(even) {
background: rgba(30, 30, 50, 0.3);
}
.shichen-detail-table tr.sc-ji td:first-child { color: #4CAF50; }
.shichen-detail-table tr.sc-xiong td:first-child { color: #ff6b6b; }
.jx-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
}
.jx-badge.sc-ji { background: rgba(76, 175, 80, 0.2); color: #4CAF50; }
.jx-badge.sc-xiong { background: rgba(255, 107, 107, 0.2); color: #ff6b6b; }
/* 二十四节气样式 */
.jieqi-box {
background: rgba(20, 20, 40, 0.6);
border-radius: 12px;
padding: 25px;
text-align: center;
}
.jieqi-current {
color: #ffd700;
font-size: 18px;
font-weight: bold;
margin-bottom: 8px;
}
.jieqi-next {
color: #c8a050;
font-size: 15px;
margin-bottom: 20px;
}
.jieqi-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
}
.jieqi-item {
background: rgba(30, 30, 50, 0.5);
border-radius: 8px;
padding: 10px 5px;
transition: all 0.3s;
}
.jieqi-item.active {
background: rgba(200, 160, 80, 0.3);
border: 1px solid #c8a050;
}
.jieqi-name {
color: #e0e0e0;
font-size: 14px;
margin-bottom: 4px;
}
.jieqi-item.active .jieqi-name { color: #ffd700; }
.jieqi-date {
color: rgba(255,255,255,0.4);
font-size: 11px;
}
@media (max-width: 768px) {
.gua-content { grid-template-columns: 1fr; }
.gua-header { flex-direction: column; text-align: center; }
.gua-extra-info { grid-template-columns: repeat(2, 1fr); }
.zhanbu-matrix td { min-width: 100px; font-size: 11px; padding: 8px 5px; }
.sanhe-tab { font-size: 12px; padding: 10px 6px; letter-spacing: 1px; }
.jieqi-grid { grid-template-columns: repeat(4, 1fr); }
.liyue-table th, .liyue-table td { padding: 6px 4px; font-size: 11px; }
.shichen-detail-table { min-width: 600px; }
/* 手机版内容区域拉宽（减少内边距） */
.gua-box { padding: 12px 10px; }
.gua-left, .gua-right { padding: 12px 10px; }
.gua-xiangri { padding: 10px; }
.dimu-box { padding: 12px 10px; }
.dimu-poem { padding: 12px 10px; }
.dimu-buyue, .dimu-fengqian { padding: 12px 10px; }
.dimu-interpret { padding: 10px; }
.almanac-detail-section { max-width: 100%; margin-left: 5px; margin-right: 5px; }
}
/* 右侧导航栏 - 仅桌面端 */
.side-nav {
position: fixed;
right: calc(50% - 550px - 50px);
top: 340px;
z-index: 100;
display: flex;
flex-direction: column;
gap: 8px;
}
@media (max-width: 1300px) {
.side-nav { right: 10px; }
}
.side-nav-item {
width: 40px;
height: 40px;
background: rgba(40, 35, 50, 0.95);
border: 1px solid rgba(200, 160, 80, 0.3);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
position: relative;
text-decoration: none;
}
.side-nav-item:hover {
background: rgba(200, 160, 80, 0.2);
border-color: rgba(200, 160, 80, 0.5);
}
.side-nav-item.active {
background: rgba(200, 160, 80, 0.3);
border-color: #c8a050;
}
.side-nav-item svg {
width: 18px;
height: 18px;
stroke: rgba(255, 255, 255, 0.7);
fill: none;
stroke-width: 1.5;
}
.side-nav-item:hover svg,
.side-nav-item.active svg {
stroke: #ffd700;
}
.side-nav-tooltip {
position: absolute;
right: 50px;
background: rgba(40, 35, 50, 0.95);
border: 1px solid rgba(200, 160, 80, 0.3);
border-radius: 6px;
padding: 6px 12px;
white-space: nowrap;
color: #ffd700;
font-size: 12px;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.side-nav-item:hover .side-nav-tooltip {
opacity: 1;
visibility: visible;
}
@media (max-width: 768px) {
.side-nav { display: none !important; }
}