调整保存逻辑
This commit is contained in:
zhonghua
parent
1862204ac5
commit
56c49234bd
@ -26,7 +26,7 @@ export default { name: 'SaveSuccessView' }
|
||||
</div>
|
||||
|
||||
<div class="action-group">
|
||||
<button
|
||||
<!-- <button
|
||||
v-if="showDubbingCta"
|
||||
class="btn-primary action-btn"
|
||||
@click="goDubbing"
|
||||
@ -36,13 +36,9 @@ export default { name: 'SaveSuccessView' }
|
||||
<div class="action-main">给绘本配音</div>
|
||||
<div class="action-desc">为每一页添加AI语音</div>
|
||||
</div>
|
||||
</button>
|
||||
</button> -->
|
||||
|
||||
<button
|
||||
v-if="showWorksCta"
|
||||
class="btn-outline action-btn"
|
||||
@click="goWorks"
|
||||
>
|
||||
<button v-if="showWorksCta" class="btn-outline action-btn" @click="goWorks">
|
||||
<span class="action-icon">📚</span>
|
||||
<div class="action-text">
|
||||
<div class="action-main">{{ worksCtaMain }}</div>
|
||||
@ -78,7 +74,7 @@ const subline = computed(() => {
|
||||
})
|
||||
|
||||
/** 提交审核成功后不展示「去配音」 */
|
||||
const showDubbingCta = computed(() => !afterPublish.value)
|
||||
// const showDubbingCta = computed(() => !afterPublish.value)
|
||||
|
||||
const showWorksCta = computed(() => true)
|
||||
|
||||
@ -143,17 +139,67 @@ onMounted(loadWork)
|
||||
pointer-events: none;
|
||||
animation: confettiFall 3s ease-in-out infinite;
|
||||
}
|
||||
.c1 { left: 10%; top: -5%; animation-delay: 0s; font-size: 28px; }
|
||||
.c2 { left: 30%; top: -8%; animation-delay: 0.5s; font-size: 20px; }
|
||||
.c3 { left: 55%; top: -3%; animation-delay: 1s; font-size: 22px; }
|
||||
.c4 { left: 75%; top: -6%; animation-delay: 1.5s; font-size: 26px; }
|
||||
.c5 { left: 90%; top: -4%; animation-delay: 0.8s; font-size: 18px; }
|
||||
.c6 { left: 45%; top: -7%; animation-delay: 2s; font-size: 24px; }
|
||||
|
||||
.c1 {
|
||||
left: 10%;
|
||||
top: -5%;
|
||||
animation-delay: 0s;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
left: 30%;
|
||||
top: -8%;
|
||||
animation-delay: 0.5s;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
left: 55%;
|
||||
top: -3%;
|
||||
animation-delay: 1s;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
left: 75%;
|
||||
top: -6%;
|
||||
animation-delay: 1.5s;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
left: 90%;
|
||||
top: -4%;
|
||||
animation-delay: 0.8s;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
left: 45%;
|
||||
top: -7%;
|
||||
animation-delay: 2s;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@keyframes confettiFall {
|
||||
0% { transform: translateY(0) rotate(0deg); opacity: 0; }
|
||||
10% { opacity: 0.8; }
|
||||
80% { opacity: 0.6; }
|
||||
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
|
||||
0% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
10% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(100vh) rotate(720deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.success-content {
|
||||
@ -172,11 +218,25 @@ onMounted(loadWork)
|
||||
animation: celebrationBounce 0.8s ease;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@keyframes celebrationBounce {
|
||||
0% { transform: scale(0) rotate(-20deg); opacity: 0; }
|
||||
50% { transform: scale(1.3) rotate(10deg); }
|
||||
70% { transform: scale(0.9) rotate(-5deg); }
|
||||
100% { transform: scale(1) rotate(0deg); opacity: 1; }
|
||||
0% {
|
||||
transform: scale(0) rotate(-20deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.3) rotate(10deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(0.9) rotate(-5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.success-title {
|
||||
@ -185,6 +245,7 @@ onMounted(loadWork)
|
||||
color: #4A3728;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.success-sub {
|
||||
font-size: 15px;
|
||||
color: #8D6E63;
|
||||
@ -196,6 +257,7 @@ onMounted(loadWork)
|
||||
perspective: 600px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.cover-card {
|
||||
width: 260px;
|
||||
border-radius: 18px;
|
||||
@ -205,20 +267,24 @@ onMounted(loadWork)
|
||||
transform: rotateY(-3deg) rotateX(2deg);
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.cover-img {
|
||||
width: 100%;
|
||||
aspect-ratio: 4/3;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cover-info {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.cover-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #4A3728;
|
||||
}
|
||||
|
||||
.cover-author {
|
||||
font-size: 12px;
|
||||
color: #8D6E63;
|
||||
@ -231,6 +297,7 @@ onMounted(loadWork)
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -243,19 +310,40 @@ onMounted(loadWork)
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--ai-gradient, linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%));
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: #fff;
|
||||
color: #4A3728;
|
||||
border: 1px solid rgba(99, 102, 241, 0.35);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.action-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.action-text { flex: 1; }
|
||||
.action-main { font-size: 15px; font-weight: 700; }
|
||||
.action-desc { font-size: 12px; opacity: 0.7; margin-top: 2px; }
|
||||
.btn-outline .action-desc { opacity: 0.8; }
|
||||
|
||||
.action-icon {
|
||||
font-size: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.action-main {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.action-desc {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.btn-outline .action-desc {
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user