ea
This commit is contained in:
@@ -0,0 +1,590 @@
|
||||
page {
|
||||
min-height: 100vh;
|
||||
background: #f8faff;
|
||||
color: #111827;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.gen-page {
|
||||
width: 750rpx;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(circle at 12% 0%, rgba(104, 126, 255, 0.08), transparent 34%),
|
||||
radial-gradient(circle at 88% 8%, rgba(130, 86, 255, 0.08), transparent 30%),
|
||||
linear-gradient(180deg, #fbfcff 0%, #f6f8ff 46%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.gen-nav {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 60rpx;
|
||||
}
|
||||
|
||||
.nav-back text {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
display: block;
|
||||
border-left: 5rpx solid #111827;
|
||||
border-bottom: 5rpx solid #111827;
|
||||
transform: rotate(45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
color: #111827;
|
||||
font-size: 34rpx;
|
||||
line-height: 42rpx;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.coin-pill {
|
||||
height: 50rpx;
|
||||
padding: 0 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
/* border: 2rpx solid #eef0fb; */
|
||||
border-radius: 28rpx;
|
||||
/* background: rgba(255, 255, 255, 0.88); */
|
||||
/* box-shadow: 0 8rpx 18rpx rgba(93, 102, 158, 0.12); */
|
||||
color: #111827;
|
||||
font-size: 22rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 800;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.coin-icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #ffd45d 0%, #ffa51f 100%);
|
||||
font-size: 17rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.coin-count {
|
||||
color: #6657ff;
|
||||
}
|
||||
|
||||
.gen-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.confirm-card,
|
||||
.cost-card {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 2rpx solid #e6e9ff;
|
||||
border-radius: 16rpx;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: 0 14rpx 34rpx rgba(80, 92, 170, 0.08);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.confirm-card {
|
||||
padding: 22rpx 28rpx 10rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: #111827;
|
||||
font-size: 27rpx;
|
||||
line-height: 34rpx;
|
||||
font-weight: 900;
|
||||
padding-bottom: 18rpx;
|
||||
border-bottom: 2rpx solid #edf0f8;
|
||||
}
|
||||
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
min-height: 62rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
border-bottom: 2rpx solid #edf0f8;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.avatar-row {
|
||||
min-height: 72rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
flex: 0 0 160rpx;
|
||||
color: #303748;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.info-value,
|
||||
.voice-value,
|
||||
.script-summary {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: #41495b;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.small-avatar {
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
border-radius: 10rpx;
|
||||
background:
|
||||
radial-gradient(circle at 50% 33%, #ffe1d2 0 17rpx, transparent 18rpx),
|
||||
radial-gradient(circle at 50% 34%, #33201b 0 24rpx, transparent 25rpx),
|
||||
linear-gradient(180deg, #eef4ff 0%, #ffffff 100%);
|
||||
flex: 0 0 58rpx;
|
||||
}
|
||||
|
||||
.voice-value {
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.voice-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #6d58ff;
|
||||
flex: 0 0 28rpx;
|
||||
}
|
||||
|
||||
.voice-icon::before,
|
||||
.voice-icon::after,
|
||||
.voice-icon text {
|
||||
content: '';
|
||||
width: 5rpx;
|
||||
border-radius: 5rpx;
|
||||
background: #6d58ff;
|
||||
}
|
||||
|
||||
.voice-icon::before { height: 18rpx; }
|
||||
.voice-icon text { height: 28rpx; margin: 0 4rpx; display: block; }
|
||||
.voice-icon::after { height: 20rpx; }
|
||||
|
||||
.script-row {
|
||||
align-items: flex-start;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
|
||||
.script-summary {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 10rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.view-script {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
color: #7062ff;
|
||||
font-size: 23rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.right-arrow {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-right: 4rpx solid #7062ff;
|
||||
border-top: 4rpx solid #7062ff;
|
||||
transform: rotate(45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cost-card {
|
||||
padding: 12rpx 24rpx 22rpx;
|
||||
background: linear-gradient(100deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 255, 248, 0.92) 100%);
|
||||
margin-bottom: calc(10rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.cost-row {
|
||||
min-height: 52rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2rpx solid rgba(224, 229, 242, 0.75);
|
||||
color: #303748;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.amount,
|
||||
.balance-line,
|
||||
.enough {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.amount {
|
||||
gap: 10rpx;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.amount text:first-child {
|
||||
font-size: 32rpx;
|
||||
line-height: 38rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.amount text:last-child {
|
||||
font-size: 23rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.balance-line {
|
||||
gap: 22rpx;
|
||||
}
|
||||
|
||||
.enough {
|
||||
gap: 8rpx;
|
||||
color: #40bf83;
|
||||
font-size: 21rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.enough-waring {
|
||||
gap: 8rpx;
|
||||
color: red;
|
||||
font-size: 21rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.enough text:first-child {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
border-radius: 50%;
|
||||
background: #42c982;
|
||||
}
|
||||
|
||||
.enough text:first-child::after {
|
||||
content: '';
|
||||
width: 11rpx;
|
||||
height: 7rpx;
|
||||
margin: 7rpx auto 0;
|
||||
display: block;
|
||||
border-left: 3rpx solid #ffffff;
|
||||
border-bottom: 3rpx solid #ffffff;
|
||||
transform: rotate(-45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.generate-action {
|
||||
height: 66rpx;
|
||||
margin-top: 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
border-radius: 12rpx;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(100deg, #4e84ff 0%, #7d3ff3 100%);
|
||||
box-shadow: 0 12rpx 24rpx rgba(91, 86, 245, 0.22);
|
||||
font-size: 27rpx;
|
||||
line-height: 34rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
background:
|
||||
linear-gradient(90deg, transparent 42%, #ffffff 43% 57%, transparent 58%),
|
||||
linear-gradient(0deg, transparent 42%, #ffffff 43% 57%, transparent 58%);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.result-title {
|
||||
margin-top: 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
color: #3f4dff;
|
||||
font-size: 25rpx;
|
||||
line-height: 32rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
border: 4rpx solid #625aff;
|
||||
border-radius: 8rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.video-preview {
|
||||
width: 100%;
|
||||
height: 274rpx;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 12rpx 30rpx rgba(83, 92, 151, 0.13);
|
||||
}
|
||||
|
||||
.preview-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255,255,255,0.36) 0 3rpx, transparent 3rpx 64rpx),
|
||||
linear-gradient(180deg, #fff4e3 0%, #f1dcc3 58%, #d9b98f 100%);
|
||||
}
|
||||
|
||||
.preview-plant {
|
||||
width: 86rpx;
|
||||
height: 126rpx;
|
||||
margin-bottom: 18rpx;
|
||||
border-radius: 50rpx 50rpx 12rpx 12rpx;
|
||||
background:
|
||||
radial-gradient(circle at 30% 24%, #79ad65 0 22rpx, transparent 23rpx),
|
||||
radial-gradient(circle at 66% 32%, #6aa05f 0 24rpx, transparent 25rpx),
|
||||
radial-gradient(circle at 50% 50%, #7eb86a 0 25rpx, transparent 26rpx),
|
||||
linear-gradient(180deg, transparent 0 82rpx, #a9794d 83rpx 100%);
|
||||
}
|
||||
|
||||
.plant-left {
|
||||
margin-right: 76rpx;
|
||||
}
|
||||
|
||||
.plant-right {
|
||||
margin-left: 76rpx;
|
||||
}
|
||||
|
||||
.preview-avatar {
|
||||
width: 176rpx;
|
||||
height: 236rpx;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-head {
|
||||
width: 116rpx;
|
||||
height: 130rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
border-radius: 60rpx 60rpx 42rpx 42rpx;
|
||||
background: linear-gradient(160deg, #241a18 0%, #604038 60%, #8a6258 100%);
|
||||
}
|
||||
|
||||
.avatar-face {
|
||||
width: 78rpx;
|
||||
height: 92rpx;
|
||||
margin-bottom: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
border-radius: 42rpx 42rpx 34rpx 34rpx;
|
||||
background: linear-gradient(180deg, #ffe6d9 0%, #ffd0c2 100%);
|
||||
}
|
||||
|
||||
.avatar-eyes {
|
||||
width: 48rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.avatar-eyes text {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: #241a18;
|
||||
}
|
||||
|
||||
.avatar-mouth {
|
||||
width: 26rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 0 0 16rpx 16rpx;
|
||||
background: #ca6975;
|
||||
}
|
||||
|
||||
.avatar-body {
|
||||
width: 160rpx;
|
||||
height: 106rpx;
|
||||
border-radius: 46rpx 46rpx 0 0;
|
||||
background: linear-gradient(120deg, #ffffff 0%, #f5f4f1 48%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
width: 74rpx;
|
||||
height: 74rpx;
|
||||
margin-left: -126rpx;
|
||||
margin-bottom: 54rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.82);
|
||||
border-radius: 50%;
|
||||
background: rgba(49, 43, 38, 0.48);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.play-btn text {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: 6rpx;
|
||||
border-top: 16rpx solid transparent;
|
||||
border-bottom: 16rpx solid transparent;
|
||||
border-left: 24rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
display: flex;
|
||||
gap: 18rpx;
|
||||
}
|
||||
|
||||
.action-primary,
|
||||
.action-outline {
|
||||
height: 82rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
border-radius: 14rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 31rpx;
|
||||
font-weight: 900;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.action-primary {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(100deg, #5a80ff 0%, #764df3 100%);
|
||||
box-shadow: 0 12rpx 24rpx rgba(91, 86, 245, 0.18);
|
||||
}
|
||||
|
||||
.action-outline {
|
||||
color: #625aff;
|
||||
border: 2rpx solid #dce0f5;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.download-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-left: 4rpx solid #ffffff;
|
||||
border-bottom: 4rpx solid #ffffff;
|
||||
transform: rotate(-45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border: 4rpx solid #625aff;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-icon {
|
||||
width: 25rpx;
|
||||
height: 22rpx;
|
||||
border: 4rpx solid #625aff;
|
||||
border-top: 0;
|
||||
border-radius: 4rpx;
|
||||
box-sizing: border-box;
|
||||
transform: translateY(4rpx);
|
||||
}
|
||||
|
||||
.home-icon::before {
|
||||
content: '';
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
display: block;
|
||||
border-left: 4rpx solid #625aff;
|
||||
border-top: 4rpx solid #625aff;
|
||||
transform: rotate(45deg) translate(-4rpx, -13rpx);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.save-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
color: #8d94a5;
|
||||
font-size: 23rpx;
|
||||
line-height: 30rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: calc(10rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 3rpx solid #9aa1b2;
|
||||
border-radius: 50%;
|
||||
font-size: 16rpx;
|
||||
line-height: 18rpx;
|
||||
font-weight: 900;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icon-placeholder {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
Reference in New Issue
Block a user