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-toggle" bindtap="toggleView">
      <text class="nav-toggle-text">{{viewMode === 'day' ? '月历' : '日历'}}</text>
    </view>
    <text class="nav-title font-chinese">老黄历</text>
    <view class="nav-right"></view>
  </view>
</view>

<!-- 日视图：老黄历 -->
<scroll-view class="page-body" scroll-y wx:if="{{viewMode === 'day'}}" style="padding-top: {{statusBarHeight + navBarHeight}}px;">
  <view class="container">
    <!-- 大日历卡片 -->
    <view class="almanac-card">
      <!-- 顶部：公历 -->
      <view class="almanac-head">
        <view class="almanac-head-left">
          <text class="almanac-year">{{dayInfo.solarYear}}年{{dayInfo.solarMonth}}月</text>
          <text class="almanac-week">{{dayInfo.weekDay}} · {{dayInfo.constellation}}</text>
        </view>
        <view class="almanac-head-right" wx:if="{{dayInfo.isToday}}">
          <text class="today-tag">今日</text>
        </view>
      </view>

      <!-- 大日期 -->
      <view class="almanac-day-row">
        <view class="day-arrow" bindtap="prevDay">‹</view>
        <view class="almanac-day-num font-chinese">{{dayInfo.solarDay}}</view>
        <view class="day-arrow" bindtap="nextDay">›</view>
      </view>

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

      <!-- 节日/节气 -->
      <view class="almanac-fest" wx:if="{{dayInfo.lunarFestival || dayInfo.solarFestival || dayInfo.solarTerm}}">
        <text class="badge badge-festival" wx:if="{{dayInfo.lunarFestival}}">{{dayInfo.lunarFestival}}</text>
        <text class="badge badge-festival" wx:if="{{dayInfo.solarFestival}}">{{dayInfo.solarFestival}}</text>
        <text class="badge badge-outline" wx:if="{{dayInfo.solarTerm}}">{{dayInfo.solarTerm}}</text>
      </view>

      <!-- 宜忌 -->
      <view class="yiji-row">
        <view class="yiji-col">
          <view class="yiji-title yi">宜</view>
          <view class="yiji-items">
            <text class="yiji-item yi" wx:for="{{almanac.recommends}}" wx:key="*this">{{item}}</text>
          </view>
        </view>
        <view class="yiji-divider"></view>
        <view class="yiji-col">
          <view class="yiji-title ji">忌</view>
          <view class="yiji-items">
            <text class="yiji-item ji" wx:for="{{almanac.avoids}}" wx:key="*this">{{item}}</text>
          </view>
        </view>
      </view>

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

    <!-- 黄历详情 -->
    <view class="card">
      <view class="grid grid-cols-2 gap-2">
        <view class="p-2 bg-page rounded">
          <text class="text-xs text-muted">值神</text>
          <text class="text-base font-medium block">{{almanac.duty}}</text>
        </view>
        <view class="p-2 bg-page rounded">
          <text class="text-xs text-muted">黄道</text>
          <text class="text-base font-medium block">{{almanac.twelveStar.name}}（{{almanac.twelveStar.ecliptic}}）</text>
        </view>
        <view class="p-2 bg-page rounded">
          <text class="text-xs text-muted">二十八宿</text>
          <text class="text-base font-medium block">{{almanac.twentyEightStar.name}}</text>
        </view>
        <view class="p-2 bg-page rounded">
          <text class="text-xs text-muted">六曜</text>
          <text class="text-base font-medium block">{{almanac.sixStar}}</text>
        </view>
        <view class="p-2 bg-page rounded">
          <text class="text-xs text-muted">冲煞</text>
          <text class="text-base font-medium block">冲{{almanac.clash}} 煞{{almanac.evilDirection}}</text>
        </view>
        <view class="p-2 bg-page rounded">
          <text class="text-xs text-muted">彭祖百忌</text>
          <text class="text-base font-medium block">{{almanac.pengZu}}</text>
        </view>
      </view>
      <view class="btn-primary mt-2 detail-btn" bindtap="goDetail">查看详情</view>
    </view>
  </view>
</scroll-view>

<!-- 月历视图 -->
<scroll-view class="page-body" scroll-y wx:if="{{viewMode === 'month'}}" style="padding-top: {{statusBarHeight + navBarHeight}}px;">
  <view class="container">
    <!-- 年月切换 -->
    <view class="card flex justify-between items-center">
      <view class="btn-ghost" bindtap="prevMonth">‹</view>
      <view class="text-xl font-bold">{{year}}年{{month}}月</view>
      <view class="btn-ghost" bindtap="nextMonth">›</view>
    </view>

    <!-- 星期头 -->
    <view class="grid grid-cols-7 gap-1 mb-1">
      <view class="text-center text-sm text-muted" wx:for="{{weekHeaders}}" wx:key="*this">{{item}}</view>
    </view>

    <!-- 日历网格 -->
    <view class="grid grid-cols-7 gap-1">
      <view
        class="day-cell {{item.isToday ? 'today' : ''}} {{item.solarMonth !== month ? 'other-month' : ''}}"
        wx:for="{{calendarDays}}"
        wx:key="solarDate"
        bindtap="selectDay"
        data-date="{{item.solarDate}}"
      >
        <text class="day-number">{{item.solarDay}}</text>
        <text class="day-lunar {{item.lunarFestival || item.solarFestival ? 'festival' : ''}}">
          {{item.lunarFestival || item.solarFestival || item.lunarDayName}}
        </text>
        <view class="day-dot" wx:if="{{item.isTermDay}}"></view>
      </view>
    </view>
  </view>
</scroll-view>