Files
geo/apps/admin-web/src/components/PageHero.vue
T
root 6066f43a7d Add monitoring service and database schema
- Implement monitoring service with heartbeat, lease tasks, resume tasks, and task result handling.
- Create monitoring time utilities for business date calculations.
- Add unit tests for date window resolution and business day handling.
- Define database schema for monitoring-related tables including quotas, daily reports, and task management.
- Establish migration scripts for creating and dropping monitoring tables.
2026-04-12 09:56:18 +08:00

83 lines
1.3 KiB
Vue

<script setup lang="ts">
withDefaults(
defineProps<{
eyebrow?: string;
title: string;
description: string;
}>(),
{
eyebrow: "模块页面",
},
);
</script>
<template>
<section class="page-hero">
<div class="page-hero__copy">
<p class="page-hero__eyebrow">{{ eyebrow }}</p>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
<div class="page-hero__actions">
<slot name="actions" />
</div>
</section>
</template>
<style scoped>
.page-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 24px;
background: #ffffff;
border: 1px solid #f0f3fa;
border-radius: 12px;
}
.page-hero__copy {
max-width: 760px;
}
.page-hero__eyebrow {
margin: 0 0 10px;
color: #5f6fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.page-hero h1 {
margin: 0;
font-size: 24px;
font-weight: 700;
line-height: 1.2;
}
.page-hero p:last-child {
margin: 10px 0 0;
color: var(--muted);
line-height: 1.6;
}
.page-hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 12px;
}
@media (max-width: 820px) {
.page-hero {
flex-direction: column;
}
.page-hero__actions {
justify-content: flex-start;
}
}
</style>