feat: add gift points toast and refactor useTemplate layout

Add a new gift points notification toast to the AIGC home page for new user signup rewards.
Restructure the useTemplate page's layout and SCSS, split the content container and add dedicated popup host for modal steps.
Remove the unused UploadTemplatePreview component and all related references from the codebase.
This commit is contained in:
duanshuwen
2026-07-05 20:06:18 +08:00
parent b381c712df
commit d95e90127e
7 changed files with 148 additions and 161 deletions

View File

@@ -0,0 +1,37 @@
<template>
<view v-if="visible" class="gift-points-toast" role="status">
<text class="gift-points-badge">{{ title }}</text>
<text class="gift-points-message">{{ message }}</text>
<view class="gift-points-close" @tap="handleClose">
<uni-icons type="closeempty" size="20" color="#ffffff" />
</view>
</view>
</template>
<script setup>
defineProps({
visible: {
type: Boolean,
default: true,
},
title: {
type: String,
default: "300积分已到账",
},
message: {
type: String,
default: "新用户权益已发放,可用于图片版或动效视频版内容升级。",
},
});
const emit = defineEmits(["close", "update:visible"]);
const handleClose = () => {
emit("update:visible", false);
emit("close");
};
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>

View File

@@ -0,0 +1,63 @@
.gift-points-toast {
position: absolute;
z-index: 6;
top: 4px;
right: 16px;
left: 16px;
height: 50px;
display: flex;
align-items: center;
gap: 8px;
overflow: hidden;
padding: 7px 7px 7px 10px;
border: 1px solid rgba(94, 171, 255, 0.56);
border-radius: 18px;
background: #172951f0;
box-shadow: 0 10px 22px rgba(15, 68, 120, 0.18);
box-sizing: border-box;
}
.gift-points-badge {
flex: 0 0 111px;
width: 111px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 999px;
background: #20cf75;
color: #ffffff;
font-size: 12px;
line-height: 30px;
font-weight: 900;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
box-sizing: border-box;
}
.gift-points-message {
flex: 1 1 auto;
min-width: 0;
max-height: 32px;
overflow: hidden;
color: rgba(239, 250, 255, 0.94);
font-size: 11px;
line-height: 16px;
font-weight: 800;
text-overflow: ellipsis;
}
.gift-points-close {
flex: 0 0 28px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
box-sizing: border-box;
}