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:
37
src/pages-aigc/home/components/GiftPointsToast/index.vue
Normal file
37
src/pages-aigc/home/components/GiftPointsToast/index.vue
Normal 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>
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user