adopt-mini-h5/src/views/my-guard/components/GuardImageOverlay.vue

<template>
  <div class="guard-overlay">
    <div class="guard-top-mask" aria-hidden="true" />
    <div class="guard-content">
      <div class="guard-badge">
        <img class="avatar" :src="avatarUrl" alt="" />
        <span class="level">{{ levelText }}</span>
        <span class="link" @click.stop="goGuardList">守护列表</span>
      </div>

      <div class="guard-bottom">
        <div class="date-block">
          <div class="month">{{ monthLabel }}</div>
          <div class="day-row">
            <span class="day">{{ dayLabel }}</span>
            <span class="total">/{{ daysInMonth }}</span>
          </div>
        </div>

        <div class="greeting-block">
          <div class="title">{{ greetingTitle }}</div>
          <div class="quote">不必在意他人目光与期待</div>
          <div class="quote">想着自己的方向前进即可</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { GUARD_DEMO_IMAGES } from '@/mock/homeData'

const props = defineProps({
  level: { type: String, default: '18级-经管' },
})

const router = useRouter()
const levelText = computed(() => props.level)

const MONTH_NAMES = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
]

const avatarUrl = GUARD_DEMO_IMAGES[0]

const now = new Date()
const monthLabel = computed(() => MONTH_NAMES[now.getMonth()])
const dayLabel = computed(() => now.getDate())
const daysInMonth = computed(() =>
  new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate(),
)

const greetingTitle = computed(() => {
  const hour = now.getHours()
  if (hour < 12) return '早安，你好'
  if (hour < 18) return '午安，你好'
  return '晚安，你好'
})

function goGuardList() {
  router.push('/guard-list')
}
</script>

<style scoped lang="less">
.guard-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  .guard-top-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--home-header-height) + 150rem);
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.67) 0%,
      rgba(0, 0, 0, 0.4) 45%,
      rgba(0, 0, 0, 0) 100%
    );
    z-index: 1;
  }

  .guard-content {
    position: relative;
    z-index: 2;
    height: 100%;
    box-sizing: border-box;
    padding:
      calc(var(--home-header-height) + 18rem)
      12rem
      calc(var(--footer-safe-bottom) + 8rem);
    pointer-events: none;

    .guard-badge {
      display: inline-flex;
      align-items: center;
      gap: 5rem;
      padding: 2rem 10rem 2rem 4rem;
      border-radius: 25rem;
      background: rgba(0, 0, 0, 0.45);
      pointer-events: auto;
      color: #fff;

      .avatar {
        width: 32rem;
        height: 32rem;
        border-radius: 50%;
        object-fit: cover;
      }

      .link {
        color: #ff8400;
      }
    }

    .guard-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20rem;
      margin-top: 16rem;

      .date-block {
        color: #fff;
        font-family: 'Times New Roman', 'Songti SC', 'STSong', serif;

        .month {
          font-size: 16rem;
          margin-bottom: -5rem;
        }

        .day-row {
          display: flex;
          align-items: flex-end;
        }

        .day {
          font-size: 85rem;
          font-weight: 700;
        }

        .total {
          font-size: 23rem;
          margin-bottom: 15rem;
        }
      }

      .greeting-block {
        text-align: right;
        color: #fff;

        .title {
          font-size: 19rem;
          font-weight: 700;
          margin-bottom: 6rem;
          font-family: 'Times New Roman', 'Songti SC', 'STSong', serif;
        }

        .quote {
          font-size: 12rem;
          line-height: 1.6;
          font-weight: 700;
          font-family: 'Times New Roman', 'Songti SC', 'STSong', serif;
        }
      }
    }
  }
}
</style>