meilan-app/src/pages/home-new/components/reportCarousel.vue

<template>
  <view class="report-carousel">
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" circular>
      <!-- 月度报告 -->
      <swiper-item class="swiper-item" @click="navigateToReport('MONTH')">
        <view class="carousel-content">
          <image class="carousel-image" src="/static/images/monthReport.png" mode="aspectFill" />
          <view class="image-tag">{{ monthReportTime }}</view>
        </view>
      </swiper-item>

      <!-- 季度报告 -->
      <swiper-item class="swiper-item" @click="navigateToReport('QUARTER')">
        <view class="carousel-content">
          <image class="carousel-image" src="/static/images/quarterReport.png" mode="aspectFill" />
          <view class="image-tag">{{ quarterReportTime }}</view>
        </view>
      </swiper-item>

      <!-- 年度报告 -->
      <swiper-item class="swiper-item" @click="navigateToReport('YEAR')">
        <view class="carousel-content">
          <image class="carousel-image" src="/static/images/yearReport.png" mode="aspectFill" />
          <view class="image-tag">{{ yearReportTime }}</view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  name: 'ReportCarousel',
  computed: {
    // 月度报告时间 - 上个月（2026年3月）
    monthReportTime() {
      const now = new Date()
      const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1)
      const year = lastMonth.getFullYear()
      const month = lastMonth.getMonth() + 1
      return `${year}年${month}月`
    },
    // 季度报告时间 - 上一季度（2026年第一季度）  
    quarterReportTime() {
      const now = new Date()
      const currentQuarter = Math.floor((now.getMonth()) / 3) + 1
      const lastQuarter = currentQuarter === 1 ? 4 : currentQuarter - 1
      const year = currentQuarter === 1 ? now.getFullYear() - 1 : now.getFullYear()
      return `${year}年第${lastQuarter}季度`
    },
    // 年度报告时间 - 上一年（2025年）
    yearReportTime() {
      const now = new Date()
      const lastYear = now.getFullYear() - 1
      return `${lastYear}年`
    }
  },
  methods: {
    // 跳转到质控分析报告页面
    navigateToReport(dateRangeQueryType) {
      uni.navigateTo({
        url: `/pages/qualityControlAnalysisReport/index?dateRangeQueryType=${dateRangeQueryType}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.report-carousel {
  margin-bottom: 20rpx;
  // margin: 0 32rpx 32rpx 32rpx;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.swiper {
  height: 300rpx;
}

.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.carousel-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// 图片左上角标签样式
.image-tag {
  position: absolute;
  top: 0rpx;
  left: 0rpx;
  background-color: #C5E3FF;
  color: #0A46A7;
  padding: 8rpx 16rpx;
  border-radius: 20rpx 0 20rpx 0;
  font-size: 24rpx;
  font-weight: bold;
  z-index: 10;
}
</style>