61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
const route = useRoute();
|
|
|
|
const isInvalid = computed(() => route.query.reason === 'invalid');
|
|
const title = computed(() => (isInvalid.value ? '链接无效' : '链接已过期'));
|
|
const description = computed(() =>
|
|
isInvalid.value
|
|
? '请确认链接完整无误，或联系分享人重新生成。'
|
|
: '请联系分享人重新生成可用链接。',
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="share-expired">
|
|
<div class="share-expired__card">
|
|
<div class="share-expired__title">{{ title }}</div>
|
|
<div class="share-expired__desc">{{ description }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.share-expired {
|
|
display: grid;
|
|
place-items: center;
|
|
min-height: 100vh;
|
|
padding: 24px;
|
|
background:
|
|
radial-gradient(
|
|
circle at top left,
|
|
rgb(255 240 240 / 88%),
|
|
transparent 28%
|
|
),
|
|
linear-gradient(180deg, #faf7f6 0%, #f3efed 100%);
|
|
}
|
|
|
|
.share-expired__card {
|
|
width: min(460px, 100%);
|
|
padding: 36px 28px;
|
|
text-align: center;
|
|
background: rgb(255 255 255 / 92%);
|
|
border: 1px solid rgb(220 227 235 / 72%);
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.share-expired__title {
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.share-expired__desc {
|
|
margin-top: 12px;
|
|
font-size: 14px;
|
|
color: var(--el-text-color-secondary);
|
|
}
|
|
</style>
|