2c47fb8f65
- 添加收藏锦囊功能，支持查看和删除收藏 - 实现积分系统，每日赠送5次灵感次数 - 添加静心阅读功能，阅读15秒可获得额外次数 - 实现灵感广场，展示用户分享的名字 - 添加字源溯源组件，长按汉字查看详情 - 优化空状态和结语卡片样式统一 - 添加音频控制（静音/风铃/雨落/古琴/白噪音/森林/溪流） - 优化名字生成逻辑，确保每次返回5个不重复名字 - 修复卡片翻转样式问题 - 移除首页动态提醒气泡
1181 lines
19 KiB
Plaintext
1181 lines
19 KiB
Plaintext
/* 容器 */
|
|
.container {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #FAFAFA;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 意境感加载页 */
|
|
.loading-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.loading-container.visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.loading-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 40rpx;
|
|
}
|
|
|
|
.loading-circle {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border: 4rpx solid #E8E8E8;
|
|
border-top-color: #2D2D2D;
|
|
border-radius: 50%;
|
|
animation: rotate 1s linear infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.loading-text {
|
|
font-family: "Noto Serif SC", serif;
|
|
font-size: 32rpx;
|
|
color: #4A4A4A;
|
|
letter-spacing: 8rpx;
|
|
animation: fadeInOut 2s ease-in-out infinite;
|
|
}
|
|
|
|
.loading-subtext {
|
|
font-size: 24rpx;
|
|
color: #A0A0A0;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
|
|
@keyframes fadeInOut {
|
|
0%, 100% { opacity: 0.6; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
/* 顶部标题 */
|
|
.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 40rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
.back-btn {
|
|
font-size: 36rpx;
|
|
color: #A0A0A0;
|
|
padding: 20rpx;
|
|
margin-left: -20rpx;
|
|
}
|
|
|
|
.header-title {
|
|
font-family: "Noto Serif SC", serif;
|
|
font-size: 28rpx;
|
|
color: #2D2D2D;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
|
|
.header-spacer {
|
|
width: 76rpx;
|
|
}
|
|
|
|
/* 卡片堆叠区域 */
|
|
.card-stack {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 40rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.card-container {
|
|
width: 100%;
|
|
max-width: 600rpx;
|
|
aspect-ratio: 3/4;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.card {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card.flipped {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.card-face {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
|
|
display: flex;
|
|
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 {
|
|
font-family: "Noto Serif SC", serif;
|
|
font-size: 96rpx;
|
|
color: #2D2D2D;
|
|
letter-spacing: 16rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.poem-container {
|
|
text-align: center;
|
|
}
|
|
|
|
.poem {
|
|
font-family: "Noto Serif SC", serif;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
line-height: 2;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
|
|
.desc-container {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 28rpx;
|
|
color: #4A4A4A;
|
|
line-height: 2;
|
|
text-align: justify;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.analysis-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.tone-tag, .score-tag {
|
|
font-size: 22rpx;
|
|
color: #888888;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.save-btn {
|
|
margin-top: 16rpx;
|
|
padding: 16rpx 40rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.save-btn:active {
|
|
background: #E8E8E8;
|
|
}
|
|
|
|
.save-icon {
|
|
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;
|
|
justify-content: center;
|
|
gap: 80rpx;
|
|
padding: 60rpx 40rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
.action-btn {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 48rpx;
|
|
transition: all 0.2s;
|
|
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.action-btn.dislike-btn {
|
|
background: #FFFFFF;
|
|
color: #888888;
|
|
}
|
|
|
|
.action-btn.like-btn {
|
|
background: #2D2D2D;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.action-btn.square-btn {
|
|
background: #F5F5F0;
|
|
color: #B22222;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.action-btn:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 60vh;
|
|
}
|
|
|
|
.empty-state text {
|
|
font-size: 28rpx;
|
|
color: #A0A0A0;
|
|
letter-spacing: 4rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.empty-state button {
|
|
background: none !important;
|
|
color: #2D2D2D !important;
|
|
font-size: 24rpx !important;
|
|
border: 1rpx solid #E0E0E0 !important;
|
|
padding: 16rpx 40rpx !important;
|
|
letter-spacing: 4rpx !important;
|
|
}
|
|
|
|
.empty-state button::after {
|
|
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: 160rpx;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 50%;
|
|
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.collection-bag:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.bag-icon {
|
|
font-family: "Noto Serif SC", serif;
|
|
font-size: 40rpx;
|
|
color: #4A4A4A;
|
|
}
|
|
|
|
.collection-count {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: #B22222;
|
|
color: white;
|
|
font-size: 18rpx;
|
|
border-radius: 50%;
|
|
padding: 4rpx 10rpx;
|
|
min-width: 18rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 收藏列表 */
|
|
.collection-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
backdrop-filter: blur(20px);
|
|
z-index: 20;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
}
|
|
|
|
.collection-overlay.visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.collection-content {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #FFFFFF;
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
padding: 60rpx 40rpx;
|
|
max-height: 70vh;
|
|
transform: translateY(100%);
|
|
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
}
|
|
|
|
.collection-overlay.visible .collection-content {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.collection-title {
|
|
font-family: "Noto Serif SC", serif;
|
|
font-size: 32rpx;
|
|
color: #2D2D2D;
|
|
text-align: center;
|
|
margin-bottom: 40rpx;
|
|
letter-spacing: 8rpx;
|
|
}
|
|
|
|
.collection-scroll {
|
|
max-height: 50vh;
|
|
}
|
|
|
|
.collection-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30rpx 0;
|
|
border-bottom: 1rpx solid #F0F0F0;
|
|
}
|
|
|
|
.item-name {
|
|
font-family: "Noto Serif SC", serif;
|
|
font-size: 36rpx;
|
|
color: #2D2D2D;
|
|
margin-bottom: 8rpx;
|
|
letter-spacing: 8rpx;
|
|
}
|
|
|
|
.item-origin {
|
|
font-size: 22rpx;
|
|
color: #888888;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.delete-btn {
|
|
font-size: 40rpx;
|
|
color: #E0E0E0;
|
|
font-weight: 200;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 50%;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.delete-btn:active {
|
|
color: #B22222;
|
|
background: #FAFAFA;
|
|
}
|
|
|
|
.collection-empty {
|
|
text-align: center;
|
|
padding: 100rpx 60rpx;
|
|
font-size: 24rpx;
|
|
color: #D0D0D0;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
|
|
/* 海报弹窗 */
|
|
.poster-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
z-index: 100;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.poster-modal.visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.poster-content {
|
|
width: 80%;
|
|
max-width: 600rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.poster-close {
|
|
position: absolute;
|
|
top: -80rpx;
|
|
right: 0;
|
|
font-size: 48rpx;
|
|
color: #FFFFFF;
|
|
padding: 20rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* 海报内容区域 */
|
|
.poster-capture-area {
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.poster-bg {
|
|
width: 100%;
|
|
aspect-ratio: 3/4;
|
|
background: linear-gradient(135deg, #FAFAFA 0%, #F0F0F0 100%);
|
|
position: relative;
|
|
padding: 60rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 大字竖排 */
|
|
.poster-name-vertical {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.poster-name-vertical text {
|
|
font-family: "Noto Serif SC", serif;
|
|
font-size: 120rpx;
|
|
color: #2D2D2D;
|
|
writing-mode: vertical-rl;
|
|
text-orientation: upright;
|
|
letter-spacing: 20rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* 出处 */
|
|
.poster-origin {
|
|
position: absolute;
|
|
top: 60rpx;
|
|
right: 60rpx;
|
|
font-family: "Noto Serif SC", serif;
|
|
font-size: 22rpx;
|
|
color: #888888;
|
|
writing-mode: vertical-rl;
|
|
text-orientation: mixed;
|
|
letter-spacing: 4rpx;
|
|
line-height: 2;
|
|
max-height: 300rpx;
|
|
}
|
|
|
|
/* 印章 */
|
|
.poster-seal {
|
|
position: absolute;
|
|
bottom: 180rpx;
|
|
right: 60rpx;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border: 4rpx solid #B22222;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: "Noto Serif SC", serif;
|
|
font-size: 36rpx;
|
|
color: #B22222;
|
|
writing-mode: vertical-rl;
|
|
text-orientation: upright;
|
|
letter-spacing: 8rpx;
|
|
transform: rotate(-5deg);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* 底部信息 */
|
|
.poster-footer {
|
|
position: absolute;
|
|
bottom: 60rpx;
|
|
left: 60rpx;
|
|
right: 60rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.poster-desc {
|
|
font-size: 20rpx;
|
|
color: #A0A0A0;
|
|
line-height: 1.8;
|
|
max-width: 60%;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.poster-qrcode {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.qrcode-text {
|
|
font-size: 16rpx;
|
|
color: #C0C0C0;
|
|
writing-mode: vertical-rl;
|
|
text-orientation: upright;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
/* 海报操作按钮 */
|
|
.poster-actions {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 40rpx;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.poster-btn {
|
|
width: 240rpx;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 26rpx;
|
|
letter-spacing: 4rpx;
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.poster-btn.save-btn {
|
|
background: #FFFFFF;
|
|
color: #2D2D2D;
|
|
}
|
|
|
|
.poster-btn.save-btn:active {
|
|
background: #F0F0F0;
|
|
}
|
|
|
|
.poster-btn.share-btn {
|
|
background: transparent;
|
|
color: #FFFFFF;
|
|
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;
|
|
}
|