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