s202226701018/wisdom-app/src/app/component/time/time.component.html

<!-- <ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="preMonth()">上个月</ion-button>
    </ion-buttons>
    <ion-title (click)="openPicker()">{{ curYear }}年 {{ curMonth }}月 ></ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="nextMonth()">下个月</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header> -->
<div >
  <div style="display: flex;margin: auto;justify-content: space-between;">
    <ion-buttons slot="start">
      <ion-button (click)="preMonth()">上个月</ion-button>
    </ion-buttons>
    <div (click)="openPicker()" style="display: flex;align-items: center;justify-content: center;font-weight: bolder;">{{ curYear }}年 {{ curMonth }}月 ></div>
    <ion-buttons slot="end">
      <ion-button (click)="nextMonth()">下个月</ion-button>
    </ion-buttons>
  </div>
    <div>
      <div class="week-days">
        <div *ngFor="let day of week" class="week-day">{{ day }}</div>
      </div>
    
      <div class="days">
        <!-- 上个月 -->
        <div *ngFor="let item of firstDays" (click)="topre(item)" class="lastday">
          {{ item }}
        </div>
        
        <!-- 当前月 -->
        <div *ngFor="let day of curDays" class="curday" 
          [ngClass]="{'selected': selectedDate === day }" 
          (click)="selectDate(day)" style="display: flex; flex-direction: column; justify-content: end;">
          
          <div class="img" style="height: 60%;">
            <!-- 根据日期查找天气类型 -->
            <!-- {{ getWeatherType(curYear, curMonth, day) }} -->
            <img *ngIf="checkedDates.includes(formatDate(curYear, curMonth, day))" style="height: 100%;" src="" alt="">
            <img *ngIf="!checkedDates.includes(formatDate(curYear, curMonth, day))" style="height: 100%;" [src]="getWeatherType(curYear, curMonth, day)" alt="">
          </div>
          <div style="height: 40%;">{{ day }}</div>
        </div>
        
        <!-- 下个月 -->
        <div *ngFor="let item of nextDaysArray" (click)="tolast(item)" class="lastday">{{ item }}</div>
      </div>
    
      <!-- <ion-button (click)="daka()">打卡</ion-button> -->
    </div>
</div>