feat: 完善见素起名小程序功能
- 添加收藏锦囊功能，支持查看和删除收藏 - 实现积分系统，每日赠送5次灵感次数 - 添加静心阅读功能，阅读15秒可获得额外次数 - 实现灵感广场，展示用户分享的名字 - 添加字源溯源组件，长按汉字查看详情 - 优化空状态和结语卡片样式统一 - 添加音频控制（静音/风铃/雨落/古琴/白噪音/森林/溪流） - 优化名字生成逻辑，确保每次返回5个不重复名字 - 修复卡片翻转样式问题 - 移除首页动态提醒气泡
This commit is contained in:
王鹏
@@ -129,9 +129,10 @@
|
||||
|
||||
.card-face {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
|
||||
@@ -139,16 +140,101 @@
|
||||
flex-direction: column;
|
||||
padding: 60rpx;
|
||||
box-sizing: border-box;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.card-face.front {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.card-face.back {
|
||||
transform: rotateY(180deg);
|
||||
justify-content: space-between;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* 音符按钮 */
|
||||
.music-btn {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
right: 30rpx;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
opacity: 0.6;
|
||||
transition: all 0.3s;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.music-btn:active {
|
||||
opacity: 1;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.music-btn.active {
|
||||
color: #B22222;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 音频菜单 */
|
||||
.music-menu {
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
right: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10rpx);
|
||||
transition: all 0.3s;
|
||||
z-index: 20;
|
||||
max-height: 400rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.music-menu.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
border-radius: 12rpx;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.menu-item:active {
|
||||
background: #F5F5F0;
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background: #F5F5F0;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.name {
|
||||
@@ -200,7 +286,7 @@
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
margin-top: 20rpx;
|
||||
margin-top: 16rpx;
|
||||
padding: 16rpx 40rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 30rpx;
|
||||
@@ -220,6 +306,28 @@
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* 问问 AI 按钮 */
|
||||
.ai-btn {
|
||||
margin-top: 16rpx;
|
||||
padding: 16rpx 40rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.ai-btn:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.ai-icon {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.action-bar {
|
||||
display: flex;
|
||||
@@ -251,6 +359,12 @@
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.action-btn.square-btn {
|
||||
background: #F5F5F0;
|
||||
color: #B22222;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
@@ -284,20 +398,106 @@
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* 结语卡片 */
|
||||
.ending-card {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 50;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.ending-card.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ending-ink {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: radial-gradient(circle, rgba(45,45,45,0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
margin-bottom: 60rpx;
|
||||
animation: inkSpread 2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes inkSpread {
|
||||
from { transform: scale(0); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.ending-hint {
|
||||
font-family: "KaiTi", "STKaiti", serif;
|
||||
font-size: 40rpx;
|
||||
color: #2D2D2D;
|
||||
letter-spacing: 8rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.ending-subhint {
|
||||
font-size: 28rpx;
|
||||
color: #888888;
|
||||
letter-spacing: 4rpx;
|
||||
margin-bottom: 80rpx;
|
||||
}
|
||||
|
||||
.ending-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ending-btn {
|
||||
padding: 24rpx 80rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
letter-spacing: 4rpx;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.ending-btn.square-btn {
|
||||
background: #2D2D2D;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.ending-btn.square-btn:active {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.ending-btn.back-btn {
|
||||
background: transparent;
|
||||
color: #888888;
|
||||
border: 1rpx solid #E0E0E0;
|
||||
}
|
||||
|
||||
.ending-btn.back-btn:active {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
/* 收藏锦囊 */
|
||||
.collection-bag {
|
||||
position: fixed;
|
||||
right: 40rpx;
|
||||
bottom: 200rpx;
|
||||
bottom: 160rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
z-index: 100;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
@@ -614,6 +814,367 @@
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.poster-btn.square-btn {
|
||||
background: #B22222;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.poster-btn.square-btn:active {
|
||||
background: #8B1A1A;
|
||||
}
|
||||
|
||||
.poster-btn.share-btn:active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 字源溯源弹窗 */
|
||||
.char-detail-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 200;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.char-detail-modal.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.char-detail-content {
|
||||
width: 85%;
|
||||
max-width: 600rpx;
|
||||
max-height: 80vh;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.char-detail-modal.visible .char-detail-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.char-detail-close {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40rpx;
|
||||
color: #999;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.char-detail-close:active {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.char-detail-glass {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 100%);
|
||||
backdrop-filter: blur(20px);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* 篆书背景装饰 */
|
||||
.char-seal-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
opacity: 0.08;
|
||||
}
|
||||
|
||||
.seal-char {
|
||||
position: absolute;
|
||||
font-family: "KaiTi", "STKaiti", "SimSun", serif;
|
||||
font-size: 200rpx;
|
||||
color: #8B4513;
|
||||
font-weight: bold;
|
||||
letter-spacing: 20rpx;
|
||||
}
|
||||
|
||||
.seal-1 {
|
||||
top: 10%;
|
||||
left: -10%;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
|
||||
.seal-2 {
|
||||
top: 40%;
|
||||
right: -15%;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.seal-3 {
|
||||
bottom: 5%;
|
||||
left: 20%;
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
.char-display {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 60rpx 40rpx 40rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, #F5F5F0 0%, rgba(245,245,240,0) 100%);
|
||||
}
|
||||
|
||||
.char-big {
|
||||
font-family: "KaiTi", "STKaiti", "Noto Serif SC", serif;
|
||||
font-size: 120rpx;
|
||||
color: #2D2D2D;
|
||||
letter-spacing: 8rpx;
|
||||
text-shadow: 2rpx 2rpx 4rpx rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.char-pinyin {
|
||||
font-size: 28rpx;
|
||||
color: #888;
|
||||
margin-top: 16rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.char-info-scroll {
|
||||
max-height: 50vh;
|
||||
padding: 0 40rpx 40rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.char-info-section {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #E8E8E0;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.char-info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.char-label {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.char-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.char-section {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.char-section-title {
|
||||
font-size: 24rpx;
|
||||
color: #B22222;
|
||||
letter-spacing: 4rpx;
|
||||
margin-bottom: 16rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.char-section-text {
|
||||
font-size: 26rpx;
|
||||
color: #555;
|
||||
line-height: 1.8;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.char-section-text.poetry {
|
||||
font-family: "KaiTi", "STKaiti", serif;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.char-loading {
|
||||
padding: 60rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
/* 问问 AI 弹窗 */
|
||||
.ai-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.ai-modal.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ai-modal-content {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 600rpx;
|
||||
max-height: 70vh;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.ai-modal.show .ai-modal-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.ai-modal-glass {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(250,250,250,0.9) 100%);
|
||||
backdrop-filter: blur(20px);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.ai-modal-close {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40rpx;
|
||||
color: #999;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.ai-modal-header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 40rpx 40rpx 20rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.ai-modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #2D2D2D;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.ai-modal-subtitle {
|
||||
display: block;
|
||||
font-size: 48rpx;
|
||||
color: #667eea;
|
||||
margin-top: 12rpx;
|
||||
font-family: "KaiTi", "STKaiti", serif;
|
||||
}
|
||||
|
||||
.ai-input-section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 30rpx 40rpx;
|
||||
}
|
||||
|
||||
.ai-input-label {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 16rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.ai-context-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
padding: 0 24rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ai-result-scroll {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-height: 300rpx;
|
||||
padding: 0 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.ai-explanation {
|
||||
font-size: 28rpx;
|
||||
color: #444;
|
||||
line-height: 1.8;
|
||||
letter-spacing: 2rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.ai-loading {
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.ai-actions {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 20rpx 40rpx 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ai-action-btn {
|
||||
padding: 20rpx 60rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 4rpx;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.ai-action-btn:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user