peanut/happy-life-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化小程序人生事件详情、表单页及人生剧本页面样式

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Peanut
2026-05-12 22:52:26 +08:00
parent f62ae880be
commit eb83384623
4 changed files with 127 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mini-program/src/pages/main/ScriptView.vue
+114 -27
View File
@@ -70,7 +70,8 @@
</view>
<button class="generate-btn kos-primary" :disabled="generating || !prompt.trim()" :loading="generating" @click="generateByPrompt">
<view>
<view class="button-stars"></view>
<view class="button-copy">
<text class="generate-title">✦ 生成我的人生剧本</text>
<text class="generate-sub">今日剩余生成次数：{{ remainingCount }}次</text>
</view>
@@ -86,7 +87,7 @@
<view v-else-if="mode === 'custom'" class="custom-panel kos-card">
<view class="panel-title-row">
<text class="spark">✦</text>
<text class="title-spark">✦</text>
<text class="panel-title">定制你的平行人生</text>
</view>
<view class="field">
@@ -112,7 +113,17 @@
<textarea class="field-textarea" v-model="custom.npc" placeholder="写下一个人、一个阻碍，或一个即将出现的机会" placeholder-class="placeholder" />
</view>
<button class="primary-action kos-primary" :disabled="generating || !custom.theme.trim()" :loading="generating" @click="generateCustom">
{{ generating ? '正在生成' : '生成平行人生剧本' }}
<view class="button-stars"></view>
<view class="button-copy single">
<text>{{ generating ? '正在生成' : '生成平行人生剧本' }}</text>
</view>
<view class="planet-badge">
<view class="planet-face">
<view class="planet-eye left"></view>
<view class="planet-eye right"></view>
<view class="planet-mouth"></view>
</view>
</view>
</button>
</view>
@@ -348,11 +359,19 @@ const handleVoiceInput = () => {
}
.star,
.spark {
.title-spark {
color: #ffd58c;
text-shadow: 0 0 20rpx rgba(255, 202, 125, 0.48);
}
.title-spark {
flex: none;
width: 26rpx;
font-size: 25rpx;
line-height: 1;
text-align: center;
}
.subtitle {
display: block;
margin-top: 14rpx;
@@ -668,20 +687,84 @@ const handleVoiceInput = () => {
font-size: 22rpx;
}
.generate-btn {
.generate-btn,
.primary-action {
position: relative;
width: 100%;
height: 104rpx;
margin-top: 24rpx;
border-radius: 28rpx;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 28rpx;
overflow: visible;
overflow: hidden;
color: #fff;
background:
radial-gradient(circle at 92% 44%, rgba(244, 187, 255, 0.42), transparent 22%),
linear-gradient(135deg, #b64cff 0%, #762fff 48%, #4a20ff 100%);
box-shadow: 0 0 34rpx rgba(168, 85, 247, 0.58), inset 0 1rpx 0 rgba(255, 255, 255, 0.25);
radial-gradient(circle at 92% 52%, rgba(255, 200, 255, 0.72) 0 10%, transparent 23%),
radial-gradient(circle at 4% 34%, rgba(255, 255, 255, 0.22), transparent 22%),
linear-gradient(100deg, #a942ff 0%, #8c3cff 28%, #6a35ff 58%, #351eff 100%);
box-shadow:
0 0 34rpx rgba(164, 69, 255, 0.64),
0 14rpx 34rpx rgba(78, 39, 255, 0.34),
inset 0 2rpx 0 rgba(255, 255, 255, 0.36),
inset 0 -14rpx 24rpx rgba(55, 25, 203, 0.2);
}
.generate-btn {
margin-top: 24rpx;
}
.generate-btn::after,
.primary-action::after {
border: 0;
}
.generate-btn[disabled],
.primary-action[disabled] {
color: #fff;
opacity: 1;
background:
radial-gradient(circle at 92% 52%, rgba(255, 200, 255, 0.72) 0 10%, transparent 23%),
radial-gradient(circle at 4% 34%, rgba(255, 255, 255, 0.22), transparent 22%),
linear-gradient(100deg, #a942ff 0%, #8c3cff 28%, #6a35ff 58%, #351eff 100%);
}
.button-stars {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.82;
background-image:
radial-gradient(circle, rgba(255, 230, 160, 0.9) 0 2rpx, transparent 3rpx),
radial-gradient(circle, rgba(255, 255, 255, 0.82) 0 1rpx, transparent 2rpx),
radial-gradient(circle, rgba(255, 225, 151, 0.82) 0 1rpx, transparent 2rpx);
background-size: 126rpx 76rpx, 92rpx 58rpx, 170rpx 82rpx;
background-position: 62rpx 18rpx, 168rpx 42rpx, 264rpx 14rpx;
}
.button-copy {
position: absolute;
left: 28rpx;
right: 126rpx;
top: 50%;
z-index: 2;
transform: translateY(-50%);
text-align: center;
line-height: 1;
}
.button-copy.single {
left: 34rpx;
right: 118rpx;
}
.button-copy.single text {
display: block;
color: #fff;
font-size: 28rpx;
font-weight: 900;
line-height: 1;
text-align: center;
}
.generate-title,
@@ -691,8 +774,10 @@ const handleVoiceInput = () => {
}
.generate-title {
color: #fff;
font-size: 28rpx;
font-weight: 900;
line-height: 1.1;
}
.generate-sub {
@@ -702,23 +787,30 @@ const handleVoiceInput = () => {
}
.planet-badge {
position: relative;
width: 78rpx;
height: 78rpx;
position: absolute;
right: 10rpx;
top: 11rpx;
z-index: 2;
width: 82rpx;
height: 82rpx;
border-radius: 50%;
background: radial-gradient(circle at 36% 28%, #f0c7ff, #a64cff 62%, #5a22d6);
box-shadow: 0 0 30rpx rgba(219, 143, 255, 0.82);
flex-shrink: 0;
background:
radial-gradient(circle at 35% 27%, #ffd9ff 0 9%, transparent 10%),
radial-gradient(circle at 64% 68%, #8d33ff 0 12%, transparent 28%),
radial-gradient(circle at 42% 36%, #f0b5ff 0%, #b557ff 45%, #7431f2 72%, #5120d5 100%);
box-shadow:
0 0 24rpx rgba(237, 177, 255, 0.92),
0 0 44rpx rgba(153, 68, 255, 0.7);
}
.planet-badge::after {
content: '';
position: absolute;
left: -20rpx;
top: 34rpx;
width: 124rpx;
height: 24rpx;
border: 4rpx solid rgba(231, 201, 255, 0.72);
left: -18rpx;
top: 36rpx;
width: 122rpx;
height: 25rpx;
border: 4rpx solid rgba(223, 197, 255, 0.78);
border-top-color: transparent;
border-radius: 50%;
transform: rotate(-18deg);
@@ -797,12 +889,7 @@ const handleVoiceInput = () => {
}
.primary-action {
width: 100%;
height: 86rpx;
margin-top: 28rpx;
border-radius: 999rpx;
font-size: 28rpx;
font-weight: 800;
}
.section-title {