skytek_xinliang
70 lines
1.2 KiB
Vue
70 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { useRouter } from "vue-router";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
title: string;
|
|
backTo?: string;
|
|
}>(),
|
|
{
|
|
backTo: "/",
|
|
},
|
|
);
|
|
|
|
const router = useRouter();
|
|
|
|
function handleBack() {
|
|
if (window.history.state?.back === props.backTo) {
|
|
router.back();
|
|
return;
|
|
}
|
|
|
|
router.push(props.backTo);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<header class="page-heading d-flex align-center mb-2">
|
|
<v-btn
|
|
aria-label="返回首頁"
|
|
class="flex-shrink-0"
|
|
color="primary"
|
|
prepend-icon="mdi-arrow-left"
|
|
rounded="pill"
|
|
variant="outlined"
|
|
@click="handleBack"
|
|
>
|
|
返回
|
|
</v-btn>
|
|
<h1 class="page-title text-primary">{{ title }}</h1>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.page-heading {
|
|
position: relative;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.page-title {
|
|
position: absolute;
|
|
left: 50%;
|
|
width: min(60%, 320px);
|
|
margin: 0;
|
|
font-size: clamp(1.25rem, 5vw, 1.75rem);
|
|
font-weight: 900;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
@media (max-width: 420px) {
|
|
.page-title {
|
|
position: static;
|
|
width: auto;
|
|
margin-left: 12px;
|
|
transform: none;
|
|
}
|
|
}
|
|
</style>
|