fix: 修复样式问题
This commit is contained in:
parent
a11932e2bd
commit
870991d81d
|
|
@ -46,28 +46,42 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.generate-success {
|
.generate-success {
|
||||||
text-align: center;
|
position: relative;
|
||||||
padding: 60rpx;
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-container {
|
.result-container {
|
||||||
margin-bottom: 60rpx;
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.success-text {
|
.success-text {
|
||||||
|
position: absolute;
|
||||||
|
top: 60rpx;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
color: #34c759;
|
color: white;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 40rpx;
|
z-index: 10;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
padding: 20rpx 40rpx;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-media {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-image {
|
.result-image {
|
||||||
width: 500rpx;
|
width: 100%;
|
||||||
height: 500rpx;
|
height: 100%;
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-image image {
|
.result-image image {
|
||||||
|
|
@ -75,6 +89,11 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.result-video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.generate-error {
|
.generate-error {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 60rpx;
|
padding: 60rpx;
|
||||||
|
|
@ -106,6 +125,16 @@
|
||||||
margin-top: 60rpx;
|
margin-top: 60rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.generate-success .action-buttons {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 80rpx;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 10;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background-color: #FFD67A;
|
background-color: #FFD67A;
|
||||||
|
|
|
||||||
|
|
@ -123,7 +123,6 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||||
border: 1rpx solid #f0f0f0;
|
border: 1rpx solid #f0f0f0;
|
||||||
transition: all 0.3s ease;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -129,18 +129,17 @@ export default function History() {
|
||||||
<Text className='empty-desc'>开始创作你的第一个作品吧!{'\n'}所有的处理记录都会保存在这里</Text>
|
<Text className='empty-desc'>开始创作你的第一个作品吧!{'\n'}所有的处理记录都会保存在这里</Text>
|
||||||
</View>
|
</View>
|
||||||
) : (
|
) : (
|
||||||
records.map((record, index) => (
|
records.map((record) => (
|
||||||
<View
|
<View
|
||||||
key={record.id}
|
key={record.id}
|
||||||
className='history-item'
|
className='history-item'
|
||||||
onClick={() => handleItemClick(record)}
|
onClick={() => handleItemClick(record)}
|
||||||
style={{ animationDelay: `${index * 0.1}s` }}
|
|
||||||
>
|
>
|
||||||
<View className='item-thumbnail'>
|
<View className='item-thumbnail'>
|
||||||
{record.status === 'completed' && record.outputResult ? (
|
{record.status === 'completed' && record.outputResult ? (
|
||||||
<Image
|
<Image
|
||||||
className='thumbnail-image'
|
className='thumbnail-image'
|
||||||
src={Array.isArray(record.outputResult) ? record.outputResult[0] : record.outputResult}
|
src={record.outputUrl || record.inputImageUrl}
|
||||||
mode='aspectFill'
|
mode='aspectFill'
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue