/* 容器 */ .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; }