fix: 修复海报面板提示与加载样式

- 更新海报面板提示,仅在有海报列表时显示相关信息。
- 调整加载样式,优化布局与对齐,提升用户体验。
- 修改按钮样式,确保一致性与可读性。
This commit is contained in:
pikachu1995@126.com
2026-09-30 16:50:43 +08:00
parent a3193c3b68
commit 74d186ff36
3 changed files with 481 additions and 466 deletions

View File

@@ -1,6 +1,6 @@
<template> <template>
<view class="poster-panel"> <view class="poster-panel">
<view class="poster-hint">点击海报预览后可保存到相册</view> <view v-if="posterList.length" class="poster-hint">点击海报预览后可保存到相册</view>
<view v-if="loading" class="loading-wrap"> <view v-if="loading" class="loading-wrap">
<text class="loading-text">海报生成中...</text> <text class="loading-text">海报生成中...</text>
@@ -465,23 +465,38 @@ function saveCurrentPoster() {
} }
.loading-wrap { .loading-wrap {
padding: 120rpx 0; display: flex;
text-align: center; flex-direction: column;
align-items: center;
padding: 80rpx 48rpx;
box-sizing: border-box;
} }
.loading-text { .loading-text {
display: block;
width: 100%;
color: #999; color: #999;
font-size: 28rpx; font-size: 28rpx;
line-height: 1.6;
text-align: center;
}
.retry-btn {
margin-top: 32rpx;
} }
.retry-btn, .retry-btn,
.save-btn { .save-btn {
display: inline-block; display: inline-flex;
padding: 12rpx 40rpx; align-items: center;
border-radius: 30rpx; justify-content: center;
height: 64rpx;
padding: 0 40rpx;
border-radius: 32rpx;
background: linear-gradient(90deg, #ff9f3f, #ff6b35); background: linear-gradient(90deg, #ff9f3f, #ff6b35);
color: #fff; color: #fff;
font-size: 26rpx; font-size: 26rpx;
white-space: nowrap;
} }
.poster-swiper { .poster-swiper {