add entrance transition
This commit is contained in:
@@ -1,10 +1,14 @@
|
||||
<template>
|
||||
<div class="poster-page">
|
||||
<section class="poster-wrap">
|
||||
<section class="poster-wrap" v-entrance-transition>
|
||||
<img v-if="posterImage" class="poster" :src="posterImage" alt="邀请注册海报" />
|
||||
<div v-else class="empty" v-text="message" />
|
||||
</section>
|
||||
<div v-if="posterImage" class="actions">
|
||||
<div
|
||||
class="tips gray"
|
||||
v-entrance-transition="70"
|
||||
>微信内可能无法发起下载海报,可长按保存为图片、转发连接或使用默认浏览器打开</div>
|
||||
<div v-if="posterImage" class="actions" v-entrance-transition="140">
|
||||
<t-button
|
||||
class="button bg-white"
|
||||
variant="outline"
|
||||
@@ -18,7 +22,7 @@
|
||||
block
|
||||
:loading="isDownloading"
|
||||
@click="savePoster"
|
||||
>保存海报</t-button>
|
||||
>下载海报</t-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -110,6 +114,11 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: .875rem;
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 5rem 1rem;
|
||||
color: var(--td-text-color-secondary);
|
||||
|
||||
Reference in New Issue
Block a user