lunar-mini/mini/pages/home/home.wxml

<!-- 自定义导航栏 -->
<view class="custom-nav" style="padding-top: {{statusBarHeight}}px;">
  <view class="nav-inner" style="height: {{navBarHeight}}px;">
    <view class="nav-left">
      <view class="nav-toggle" bindtap="toggleView">
        <text class="nav-toggle-text">{{viewMode === 'day' ? '月历' : '日历'}}</text>
      </view>
      <text class="nav-zodiac">{{dayInfo.zodiac}}年</text>
    </view>
    <text class="nav-title font-chinese">老黄历</text>
    <view class="nav-placeholder"></view>
  </view>
</view>

<!-- 日视图：老黄历（swiper 轮播） -->
<view class="page-body" wx:if="{{viewMode === 'day'}}" style="padding-top: {{statusBarHeight + navBarHeight}}px;">
  <swiper
    class="day-swiper"
    current="{{dayIndex}}"
    bindchange="onDaySwiperChange"
    bindanimationfinish="onDaySwiperFinish"
    duration="300"
    circular="{{false}}"
  >
    <swiper-item wx:for="{{dayList}}" wx:key="key" wx:for-item="dayItem">
      <scroll-view class="day-scroll" scroll-y>
        <view class="container">

          <!-- 大日历卡片（竖长型，包含日期/农历/干支/宜忌） -->
          <view class="almanac-card {{dayItem.legalHoliday ? 'is-holiday' : (dayItem.workday ? 'is-workday' : 'is-weekend')}}">
            <!-- 顶部：公历年月 + 标签 -->
            <view class="almanac-head">
              <text class="almanac-year">{{dayItem.dayInfo.solarYear}}年{{dayItem.dayInfo.solarMonth}}月</text>
              <view class="head-tags">
                <text class="today-tag" wx:if="{{dayItem.dayInfo.isToday}}">今日</text>
                <text class="lunar-tag" wx:if="{{dayItem.isFirstOrFifteen}}">{{dayItem.dayInfo.lunarDay === 1 ? '初一' : '十五'}}</text>
              </view>
            </view>

            <!-- 大日期方框（竖长型，包含所有信息） -->
            <view class="day-frame {{dayItem.legalHoliday ? 'frame-holiday' : (dayItem.workday ? 'frame-workday' : 'frame-weekend')}}">
              <!-- 左箭头（在大框里面） -->
              <view class="day-arrow-inner left" catchtap="prevDay">‹</view>

              <!-- 中间内容 -->
              <view class="day-frame-content">
                <!-- 大日期 -->
                <view class="almanac-day-num font-chinese {{dayItem.legalHoliday ? 'num-holiday' : (dayItem.workday ? 'num-workday' : 'num-weekend')}}">{{dayItem.dayInfo.solarDay}}</view>

                <!-- 农历 -->
                <view class="day-frame-lunar">
                  <text class="day-frame-lunar-main font-chinese">{{dayItem.dayInfo.lunarMonthName}}{{dayItem.dayInfo.lunarDayName}}</text>
                  <text class="day-frame-lunar-sub">{{dayItem.dayInfo.lunarYearGanzhi}}年 {{dayItem.dayInfo.lunarMonthGanzhi}}月 {{dayItem.dayInfo.lunarDayGanzhi}}日</text>
                </view>

                <!-- 节日/节气 -->
                <view class="day-frame-fest" wx:if="{{dayItem.legalHoliday || dayItem.dayInfo.lunarFestival || dayItem.dayInfo.solarFestival || dayItem.dayInfo.solarTerm}}">
                  <text class="frame-badge frame-badge-holiday" wx:if="{{dayItem.legalHoliday}}">{{dayItem.legalHoliday}}</text>
                  <text class="frame-badge frame-badge-festival" wx:if="{{dayItem.dayInfo.lunarFestival && !dayItem.legalHoliday}}">{{dayItem.dayInfo.lunarFestival}}</text>
                  <text class="frame-badge frame-badge-festival" wx:if="{{dayItem.dayInfo.solarFestival && !dayItem.legalHoliday}}">{{dayItem.dayInfo.solarFestival}}</text>
                  <text class="frame-badge frame-badge-term" wx:if="{{dayItem.dayInfo.solarTerm}}">{{dayItem.dayInfo.solarTerm}}{{dayItem.termTime ? ' ' + dayItem.termTime : ''}}</text>
                </view>

                <!-- 星期 + 工作日 -->
                <view class="day-frame-week">
                  星期{{dayItem.dayInfo.weekDay}} · {{dayItem.legalHoliday ? dayItem.legalHoliday + ' · 放假' : (dayItem.workday ? '工作日 · 上班' : '周末 · 休息')}}
                </view>

                <!-- 宜忌（在大框里面，点击放大） -->
                <view class="day-frame-yiji" bindtap="openZoom" data-type="yiji" data-date="{{dayItem.key}}">
                  <view class="frame-yiji-row">
                    <view class="frame-yiji-title yi">宜</view>
                    <view class="frame-yiji-items">
                      <text class="frame-yiji-item yi" wx:for="{{dayItem.almanac.recommends}}" wx:key="*this">{{item}}</text>
                    </view>
                  </view>
                  <view class="frame-yiji-row">
                    <view class="frame-yiji-title ji">忌</view>
                    <view class="frame-yiji-items">
                      <text class="frame-yiji-item ji" wx:for="{{dayItem.almanac.avoids}}" wx:key="*this">{{item}}</text>
                    </view>
                  </view>
                </view>
              </view>

              <!-- 右箭头（在大框里面） -->
              <view class="day-arrow-inner right" catchtap="nextDay">›</view>
            </view>

            <!-- 佛历提醒 -->
            <view class="buddhist-tip" wx:if="{{dayItem.showBuddhist && dayItem.nextBuddhist}}">
              <text class="buddhist-text">🪷 距 {{dayItem.nextBuddhist.name}} 还有 {{dayItem.nextBuddhist.daysLeft}} 天（{{dayItem.nextBuddhist.solarDate}}）</text>
            </view>
          </view>

          <!-- 黄历详情（紧凑布局，每行2个） -->
          <view class="card" bindtap="openZoom" data-type="detail" data-date="{{dayItem.key}}">
            <view class="detail-grid-compact">
              <view class="detail-item-compact">
                <text class="detail-label">值神</text>
                <text class="detail-value">{{dayItem.almanac.duty}}</text>
              </view>
              <view class="detail-item-compact">
                <text class="detail-label">黄道</text>
                <text class="detail-value">{{dayItem.almanac.twelveStar.name}}（{{dayItem.almanac.twelveStar.ecliptic}}）</text>
              </view>
              <view class="detail-item-compact">
                <text class="detail-label">二十八宿</text>
                <text class="detail-value">{{dayItem.almanac.twentyEightStar.name}}</text>
              </view>
              <view class="detail-item-compact">
                <text class="detail-label">六曜</text>
                <text class="detail-value">{{dayItem.almanac.sixStar}}</text>
              </view>
              <view class="detail-item-compact">
                <text class="detail-label">冲煞</text>
                <text class="detail-value">冲{{dayItem.almanac.clash}} 煞{{dayItem.almanac.evilDirection}}</text>
              </view>
              <view class="detail-item-compact">
                <text class="detail-label">彭祖百忌</text>
                <text class="detail-value">{{dayItem.almanac.pengZu}}</text>
              </view>
            </view>
          </view>

          <!-- 节日速查（显示最近10条，点击查看更多） -->
          <view class="card">
            <view class="fest-head">
              <text class="section-title">节日速查</text>
              <text class="fest-more" bindtap="openZoom" data-type="fest-year" data-date="{{dayItem.key}}">更多 >></text>
            </view>
            <view class="fest-quick" wx:if="{{dayItem.upcoming && dayItem.upcoming.length > 0}}">
              <view class="fest-quick-item" wx:for="{{dayItem.upcoming}}" wx:key="name" catchtap="goFestival" data-date="{{item.solarDate}}">
                <text class="fest-name">{{item.name}}</text>
                <text class="fest-date">{{item.solarMonth}}月{{item.solarDay}}日</text>
                <text class="fest-left {{item.daysLeft === 0 ? 'is-today' : ''}}">{{item.daysLeft === 0 ? '今天' : item.daysLeft + '天后'}}</text>
              </view>
            </view>
            <view class="fest-empty" wx:else>暂无近期节日</view>
          </view>

          <!-- 历史上的今天（数据来源：中文维基百科） -->
          <view class="card otd-card" wx:if="{{dayItem.otd}}">
            <view class="otd-head">
              <text class="section-title">历史上的今天</text>
              <view class="otd-tabs">
                <text class="otd-tab {{dayItem.otdTab === 'event' ? 'active' : ''}}" catchtap="switchOtdTab" data-date="{{dayItem.key}}" data-tab="event">大事记</text>
                <text class="otd-tab {{dayItem.otdTab === 'birth' ? 'active' : ''}}" catchtap="switchOtdTab" data-date="{{dayItem.key}}" data-tab="birth">出生</text>
              </view>
            </view>
            <view class="otd-list">
              <view class="otd-item" wx:for="{{dayItem.otdTab === 'event' ? dayItem.otd.eventsPreview : dayItem.otd.birthsPreview}}" wx:key="id" wx:for-item="ev">
                <text class="otd-year" wx:if="{{ev.yearText}}">{{ev.yearText}}</text>
                <text class="otd-text {{ev.yearText ? '' : 'no-year'}}">{{ev.content}}</text>
              </view>
            </view>
            <view class="otd-foot">
              <text class="otd-source">来源：中文维基百科</text>
              <text class="otd-more" bindtap="openZoom" data-type="otd" data-date="{{dayItem.key}}">查看完整 >></text>
            </view>
          </view>
          <view class="card placeholder-card" wx:elif="{{dayItem.otdLoading}}">
            <view class="section-title">历史上的今天</view>
            <view class="placeholder-content">加载中…</view>
          </view>

          <!-- 回今天 -->
          <view class="back-today" wx:if="{{!dayItem.dayInfo.isToday}}" bindtap="backToday">回到今天</view>
        </view>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

<!-- 月历视图：swiper 左右滑动换月 -->
<view class="page-body month-body" wx:if="{{viewMode === 'month'}}" style="padding-top: {{statusBarHeight + navBarHeight}}px;">
  <view class="month-header">
    <text class="month-title font-chinese">{{currentYear}}年{{currentMonth}}月</text>
    <text class="month-hint">左右滑动换月</text>
  </view>
  <view class="grid grid-cols-7 week-head">
    <view class="text-center week-cell" wx:for="{{weekHeaders}}" wx:key="*this">{{item}}</view>
  </view>
  <swiper
    class="month-swiper"
    vertical="{{false}}"
    circular="{{false}}"
    current="{{monthIndex}}"
    bindchange="onMonthSwiperChange"
    duration="300"
  >
    <swiper-item wx:for="{{monthList}}" wx:key="key">
      <scroll-view scroll-y class="month-scroll">
        <view class="grid grid-cols-7 month-grid">
          <block wx:for="{{item.weeks}}" wx:for-item="week" wx:key="index">
            <view
              class="day-cell-inner {{d.isToday ? 'today' : ''}} {{d.solarMonth !== item.month ? 'other-month' : ''}}"
              wx:for="{{week}}"
              wx:for-item="d"
              wx:key="solarDate"
              bindtap="selectDay"
              data-date="{{d.solarDate}}"
            >
              <text class="day-number">{{d.solarDay}}</text>
              <text class="day-lunar {{d.lunarFestival || d.solarFestival ? 'festival' : ''}}">
                {{d.lunarFestival || d.solarFestival || d.lunarDayName}}
              </text>
              <view class="day-dot" wx:if="{{d.isTermDay}}"></view>
            </view>
          </block>
        </view>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

<!-- 全屏放大弹窗（老年友好） -->
<view class="zoom-mask {{zoomVisible ? 'show' : ''}}" bindtap="closeZoom">
  <view class="zoom-panel" catchtap="noop">
    <view class="zoom-header">
      <text class="zoom-title font-chinese">{{zoomTitle}}</text>
      <view class="zoom-close" bindtap="closeZoom">✕</view>
    </view>

    <!-- 宜忌放大 -->
    <scroll-view scroll-y class="zoom-body" wx:if="{{zoomType === 'yiji' && zoomData}}">
      <view class="zoom-yiji-block">
        <view class="zoom-yiji-title yi">宜</view>
        <view class="zoom-yiji-items">
          <text class="zoom-yiji-item yi" wx:for="{{zoomData.recommends}}" wx:key="*this">{{item}}</text>
        </view>
      </view>
      <view class="zoom-yiji-block">
        <view class="zoom-yiji-title ji">忌</view>
        <view class="zoom-yiji-items">
          <text class="zoom-yiji-item ji" wx:for="{{zoomData.avoids}}" wx:key="*this">{{item}}</text>
        </view>
      </view>
      <view class="zoom-end-pad" />
    </scroll-view>

    <!-- 详情放大 -->
    <scroll-view scroll-y class="zoom-body" wx:if="{{zoomType === 'detail' && zoomData}}">
      <view class="zoom-detail-row" wx:if="{{zoomData.legalHoliday}}">
        <text class="zoom-detail-label">节假日</text>
        <text class="zoom-detail-value holiday">{{zoomData.legalHoliday}}</text>
      </view>
      <view class="zoom-detail-row" wx:if="{{zoomData.termTime}}">
        <text class="zoom-detail-label">节气</text>
        <text class="zoom-detail-value">{{zoomData.termTime}}</text>
      </view>
      <view class="zoom-detail-row">
        <text class="zoom-detail-label">农历</text>
        <text class="zoom-detail-value">{{zoomData.lunar}}</text>
      </view>
      <view class="zoom-detail-row">
        <text class="zoom-detail-label">干支</text>
        <text class="zoom-detail-value">{{zoomData.ganzhi}}</text>
      </view>
      <view class="zoom-detail-row">
        <text class="zoom-detail-label">值神</text>
        <text class="zoom-detail-value">{{zoomData.duty}}</text>
      </view>
      <view class="zoom-detail-row">
        <text class="zoom-detail-label">黄道</text>
        <text class="zoom-detail-value">{{zoomData.twelveStar}}</text>
      </view>
      <view class="zoom-detail-row">
        <text class="zoom-detail-label">二十八宿</text>
        <text class="zoom-detail-value">{{zoomData.twentyEightStar}}</text>
      </view>
      <view class="zoom-detail-row">
        <text class="zoom-detail-label">六曜</text>
        <text class="zoom-detail-value">{{zoomData.sixStar}}</text>
      </view>
      <view class="zoom-detail-row">
        <text class="zoom-detail-label">冲煞</text>
        <text class="zoom-detail-value">{{zoomData.clash}}</text>
      </view>
      <view class="zoom-detail-row">
        <text class="zoom-detail-label">彭祖百忌</text>
        <text class="zoom-detail-value">{{zoomData.pengZu}}</text>
      </view>
      <view class="zoom-end-pad" />
    </scroll-view>

    <!-- 节日放大 -->
    <scroll-view scroll-y class="zoom-body" wx:if="{{zoomType === 'fest' && zoomData}}">
      <view class="zoom-fest-row" wx:for="{{zoomData.upcoming}}" wx:key="name" bindtap="goFestival" data-date="{{item.solarDate}}">
        <text class="zoom-fest-name">{{item.name}}</text>
        <text class="zoom-fest-date">{{item.solarDate}}</text>
        <text class="zoom-fest-left {{item.daysLeft === 0 ? 'is-today' : ''}}">{{item.daysLeft === 0 ? '今天' : '还有' + item.daysLeft + '天'}}</text>
      </view>
      <view class="zoom-end-pad" />
    </scroll-view>

    <!-- 今年节日（字体稍小，避免溢出） -->
    <scroll-view scroll-y class="zoom-body" scroll-top="{{zoomScrollTop}}" wx:if="{{zoomType === 'fest-year' && zoomData}}">
      <view class="zoom-fest-year-row" wx:for="{{zoomData.yearFestivals}}" wx:key="name" bindtap="goFestival" data-date="{{item.solarDate}}">
        <text class="zoom-fest-year-name">{{item.name}}</text>
        <text class="zoom-fest-year-date">{{item.solarMonth}}月{{item.solarDay}}日</text>
        <text class="zoom-fest-year-type {{item.type === 'lunar' ? 'lunar' : 'solar'}}">{{item.type === 'lunar' ? '农历' : '公历'}}</text>
      </view>
      <view class="zoom-end-pad" />
    </scroll-view>

    <!-- 历史上的今天放大 -->
    <scroll-view scroll-y class="zoom-body" wx:if="{{zoomType === 'otd' && zoomData}}">
      <block wx:if="{{zoomData.events.length}}">
        <view class="zoom-otd-title">大事记</view>
        <view class="zoom-otd-item" wx:for="{{zoomData.events}}" wx:key="id">
          <text class="otd-year" wx:if="{{item.yearText}}">{{item.yearText}}</text>
          <text class="otd-text {{item.yearText ? '' : 'no-year'}}">{{item.content}}</text>
        </view>
      </block>
      <block wx:if="{{zoomData.births.length}}">
        <view class="zoom-otd-title">出生</view>
        <view class="zoom-otd-item" wx:for="{{zoomData.births}}" wx:key="id">
          <text class="otd-year" wx:if="{{item.yearText}}">{{item.yearText}}</text>
          <text class="otd-text {{item.yearText ? '' : 'no-year'}}">{{item.content}}</text>
        </view>
      </block>
      <block wx:if="{{zoomData.deaths.length}}">
        <view class="zoom-otd-title">逝世</view>
        <view class="zoom-otd-item" wx:for="{{zoomData.deaths}}" wx:key="id">
          <text class="otd-year" wx:if="{{item.yearText}}">{{item.yearText}}</text>
          <text class="otd-text {{item.yearText ? '' : 'no-year'}}">{{item.content}}</text>
        </view>
      </block>
      <block wx:if="{{zoomData.festivals.length}}">
        <view class="zoom-otd-title">节假日与习俗</view>
        <view class="zoom-otd-item" wx:for="{{zoomData.festivals}}" wx:key="id">
          <text class="otd-text no-year">{{item.content}}</text>
        </view>
      </block>
      <view class="zoom-otd-source">数据来源：中文维基百科（CC BY-SA 4.0）</view>
      <view class="zoom-end-pad" />
    </scroll-view>
  </view>
</view>