1660 lines
28 KiB
Plaintext
1660 lines
28 KiB
Plaintext
/* AI智能体聊天详情页样式 - 基于Figma设计 */
|
||
|
||
/* 页面容器 */
|
||
.page-container {
|
||
min-height: 100vh;
|
||
background: #F5F2FD;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
/* 聊天区域包装器 - 使用固定定位确保正确布局 */
|
||
.chat-area-wrapper {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 120rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 面板打开时的透明遮罩层 */
|
||
.panel-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: transparent;
|
||
z-index: 98;
|
||
}
|
||
|
||
/* 状态栏区域 */
|
||
.status-bar-area {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(242, 237, 255, 0.6);
|
||
z-index: 101;
|
||
}
|
||
|
||
/* 顶部导航栏 */
|
||
.nav-header {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-bottom: 2rpx solid #F3F4F6;
|
||
z-index: 100;
|
||
}
|
||
|
||
.nav-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 98rpx;
|
||
padding: 0 16rpx;
|
||
}
|
||
|
||
/* 返回按钮 */
|
||
.nav-back {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
padding: 16rpx;
|
||
min-width: 160rpx;
|
||
}
|
||
|
||
.back-icon {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
}
|
||
|
||
.back-text {
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
color: #914584;
|
||
}
|
||
|
||
/* 中间角色信息 */
|
||
.nav-center {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.nav-avatar-wrap {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
border: 2rpx solid #E5E7EB;
|
||
}
|
||
|
||
.nav-avatar {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.nav-avatar-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #E9D5FF 0%, #FDF2F8 100%);
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #8B5CF6;
|
||
}
|
||
|
||
.nav-name {
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
color: #101828;
|
||
}
|
||
|
||
.online-dot {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
background: #00C950;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* 更多按钮 - 已移除，改为占位 */
|
||
.nav-right-placeholder {
|
||
min-width: 160rpx;
|
||
}
|
||
|
||
/* 聊天内容区域 - 使用100%高度填满父容器 */
|
||
.chat-scroll {
|
||
height: 100%;
|
||
padding: 0 32rpx;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 隐藏滚动条 */
|
||
.chat-scroll::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
/* 加载更多提示 */
|
||
.load-more-hint {
|
||
padding: 20rpx 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.load-more-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border: 4rpx solid #E5E7EB;
|
||
border-top-color: #b06ab3;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.load-more-text {
|
||
font-size: 24rpx;
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
.no-more-hint {
|
||
padding: 20rpx 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.no-more-hint text {
|
||
font-size: 24rpx;
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
/* 加密对话提示 */
|
||
.encrypt-hint {
|
||
text-align: center;
|
||
padding: 32rpx 0 48rpx;
|
||
}
|
||
|
||
.encrypt-hint text {
|
||
font-size: 24rpx;
|
||
color: #99A1AF;
|
||
}
|
||
|
||
/* 聊天消息列表 */
|
||
.chat-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 48rpx;
|
||
}
|
||
|
||
/* 单条消息 */
|
||
.chat-item {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
/* 用户消息靠右显示 */
|
||
.chat-item.me {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* 头像 */
|
||
.avatar-wrap {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
border: 2rpx solid rgba(255, 255, 255, 0.5);
|
||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1), 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.chat-avatar {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.avatar-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #E9D5FF 0%, #FDF2F8 100%);
|
||
}
|
||
|
||
.avatar-placeholder.user {
|
||
background: #E5E7EB;
|
||
}
|
||
|
||
.avatar-text {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #8B5CF6;
|
||
}
|
||
|
||
.avatar-placeholder.user .avatar-text {
|
||
color: #6A7282;
|
||
}
|
||
|
||
/* 用户头像特殊样式 - 确保显示 */
|
||
.user-avatar {
|
||
display: flex !important;
|
||
visibility: visible !important;
|
||
}
|
||
|
||
/* 消息内容 */
|
||
.message-content {
|
||
max-width: 540rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.message-content.me {
|
||
align-items: flex-end;
|
||
}
|
||
|
||
/* 聊天气泡 */
|
||
.chat-bubble {
|
||
padding: 24rpx 40rpx;
|
||
word-break: break-all;
|
||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1), 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* AI消息气泡 - 白色背景，左上角小圆角 */
|
||
.chat-bubble.other {
|
||
background: #FFFFFF;
|
||
border-radius: 12rpx 44rpx 44rpx 44rpx;
|
||
}
|
||
|
||
/* 用户消息气泡 - 紫色背景，右上角小圆角 */
|
||
.chat-bubble.me {
|
||
background: #914584;
|
||
border-radius: 44rpx 12rpx 44rpx 44rpx;
|
||
}
|
||
|
||
/* 消息文字 */
|
||
.chat-text {
|
||
font-size: 34rpx;
|
||
line-height: 1.625;
|
||
}
|
||
|
||
.chat-bubble.other .chat-text {
|
||
color: #1E2939;
|
||
}
|
||
|
||
.chat-bubble.me .chat-text {
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
/* 消息时间 */
|
||
.message-time {
|
||
font-size: 22rpx;
|
||
color: #99A1AF;
|
||
padding: 0 8rpx;
|
||
}
|
||
|
||
/* 消息操作区域 */
|
||
.message-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
/* AI语音播放按钮 */
|
||
.play-voice-btn {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
background: rgba(145, 69, 132, 0.1);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.play-voice-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 图片消息气泡 */
|
||
.chat-bubble-image {
|
||
max-width: 400rpx;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.chat-bubble-image.other {
|
||
border-radius: 12rpx 24rpx 24rpx 24rpx;
|
||
}
|
||
|
||
.chat-bubble-image.me {
|
||
border-radius: 24rpx 12rpx 24rpx 24rpx;
|
||
}
|
||
|
||
.message-image {
|
||
width: 100%;
|
||
min-width: 200rpx;
|
||
max-width: 400rpx;
|
||
display: block;
|
||
}
|
||
|
||
/* 语音消息气泡 */
|
||
.chat-bubble.voice {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
min-width: 160rpx;
|
||
padding: 24rpx 32rpx;
|
||
}
|
||
|
||
.chat-bubble.voice.other {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.chat-bubble.voice.me {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.voice-waves {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.voice-wave-bar {
|
||
width: 6rpx;
|
||
height: 20rpx;
|
||
border-radius: 3rpx;
|
||
background: #9CA3AF;
|
||
}
|
||
|
||
.chat-bubble.voice.me .voice-wave-bar {
|
||
background: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.voice-wave-bar:nth-child(1) { height: 16rpx; }
|
||
.voice-wave-bar:nth-child(2) { height: 28rpx; }
|
||
.voice-wave-bar:nth-child(3) { height: 20rpx; }
|
||
|
||
/* 语音播放动画 */
|
||
.chat-bubble.voice.playing .voice-wave-bar {
|
||
animation: voiceWave 0.8s ease-in-out infinite;
|
||
}
|
||
|
||
.chat-bubble.voice.playing .voice-wave-bar:nth-child(1) { animation-delay: 0s; }
|
||
.chat-bubble.voice.playing .voice-wave-bar:nth-child(2) { animation-delay: 0.2s; }
|
||
.chat-bubble.voice.playing .voice-wave-bar:nth-child(3) { animation-delay: 0.4s; }
|
||
|
||
@keyframes voiceWave {
|
||
0%, 100% { transform: scaleY(1); }
|
||
50% { transform: scaleY(1.8); }
|
||
}
|
||
|
||
.voice-duration {
|
||
font-size: 28rpx;
|
||
color: #6B7280;
|
||
}
|
||
|
||
.chat-bubble.voice.me .voice-duration {
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
/* 语音识别文字 */
|
||
.voice-recognized-text {
|
||
margin-top: 8rpx;
|
||
padding: 12rpx 16rpx;
|
||
background: rgba(0, 0, 0, 0.03);
|
||
border-radius: 12rpx;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.voice-recognized-text .recognizing-hint {
|
||
font-size: 24rpx;
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
.voice-recognized-text .recognized-text {
|
||
font-size: 26rpx;
|
||
color: #6B7280;
|
||
line-height: 1.5;
|
||
word-break: break-all;
|
||
}
|
||
|
||
/* 礼物消息 */
|
||
.gift-message {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.gift-message.me {
|
||
align-items: flex-end;
|
||
}
|
||
|
||
/* 确保用户消息内容右对齐 */
|
||
.message-content.me .gift-message {
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.gift-message-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
padding: 24rpx 32rpx;
|
||
background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
|
||
border-radius: 24rpx;
|
||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.gift-message-image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.gift-message-text {
|
||
font-size: 26rpx;
|
||
color: #914584;
|
||
}
|
||
|
||
/* 正在输入动画 */
|
||
.chat-bubble.typing {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
padding: 28rpx 40rpx;
|
||
}
|
||
|
||
.typing-dot {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
background: #9CA3AF;
|
||
border-radius: 50%;
|
||
animation: typing 1.4s infinite ease-in-out;
|
||
}
|
||
|
||
.typing-dot:nth-child(1) { animation-delay: 0s; }
|
||
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
|
||
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
|
||
|
||
@keyframes typing {
|
||
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
|
||
30% { transform: translateY(-12rpx); opacity: 1; }
|
||
}
|
||
|
||
/* 底部占位 - 为最后一条消息留出空间 */
|
||
.chat-bottom-space {
|
||
height: 40rpx;
|
||
}
|
||
|
||
/* 底部输入区域 */
|
||
.bottom-input-area {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: #FFFFFF;
|
||
border-top: 2rpx solid #F3F4F6;
|
||
box-shadow: 0 -10rpx 40rpx rgba(0, 0, 0, 0.03);
|
||
z-index: 100;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.input-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
padding: 24rpx 32rpx;
|
||
padding-bottom: 16rpx;
|
||
}
|
||
|
||
/* ==================== Figma设计样式 - 底部输入区域 ==================== */
|
||
|
||
/* Figma输入容器 */
|
||
.figma-input-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
padding: 24rpx 20rpx;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
/* Figma语音按钮 - 40x40px 灰色圆形 */
|
||
.figma-voice-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: #F3F4F6;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Figma按钮图标 */
|
||
.figma-btn-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
/* Figma输入框 - 234x48px 浅灰背景 圆角16px */
|
||
.figma-input-wrap {
|
||
flex: 1;
|
||
background: #F9FAFB;
|
||
border: 2rpx solid #F3F4F6;
|
||
border-radius: 32rpx;
|
||
padding: 0 32rpx;
|
||
height: 96rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.figma-text-input {
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 36rpx;
|
||
color: #101828;
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
|
||
.figma-input-placeholder {
|
||
color: rgba(10, 10, 10, 0.5);
|
||
font-size: 36rpx;
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
|
||
.figma-input-placeholder.warning {
|
||
color: #FF6B6B;
|
||
}
|
||
|
||
/* Figma表情按钮 - 40x40px 灰色圆形 */
|
||
.figma-emoji-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: transparent;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.figma-emoji-btn.active {
|
||
background: #E9D5FF;
|
||
}
|
||
|
||
/* Figma发送按钮 */
|
||
.figma-send-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: #914584;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.figma-send-btn .figma-btn-icon {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
|
||
/* Figma+号按钮 - 40x40px 粉色圆形背景 #FDF2F8 */
|
||
.figma-add-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: transparent;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.figma-add-btn.active {
|
||
background: #FCE7F3;
|
||
}
|
||
|
||
/* 语音按钮 */
|
||
.voice-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: #F3F4F6;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.voice-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
/* 输入框 */
|
||
.input-wrap {
|
||
flex: 1;
|
||
background: #F9FAFB;
|
||
border: 2rpx solid #F3F4F6;
|
||
border-radius: 32rpx;
|
||
padding: 0 32rpx;
|
||
height: 96rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.text-input {
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 36rpx;
|
||
color: #101828;
|
||
}
|
||
|
||
.input-placeholder {
|
||
color: rgba(10, 10, 10, 0.5);
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
/* 表情按钮 */
|
||
.emoji-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: #F3F4F6;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.emoji-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
/* 更多按钮 */
|
||
.add-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: #F3F4F6;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.add-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
/* 表情面板和更多面板显示时，移除底部安全区域 */
|
||
.bottom-input-area.panel-open {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
/* 语音录制按钮 */
|
||
.voice-record-btn {
|
||
flex: 1;
|
||
background: #F3F4F6;
|
||
border: 2rpx solid #E5E7EB;
|
||
border-radius: 32rpx;
|
||
height: 96rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #374151;
|
||
transition: all 0.15s;
|
||
}
|
||
|
||
.voice-record-btn:active,
|
||
.voice-record-btn.recording {
|
||
background: #E5E7EB;
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
/* 录音提示浮层 */
|
||
.voice-recording-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 200;
|
||
}
|
||
|
||
.voice-recording-popup {
|
||
width: 320rpx;
|
||
height: 320rpx;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
border-radius: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.voice-recording-popup.cancel {
|
||
background: rgba(220, 38, 38, 0.9);
|
||
}
|
||
|
||
.cancel-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
filter: brightness(0) invert(1);
|
||
}
|
||
|
||
.voice-wave {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.wave-bar {
|
||
width: 12rpx;
|
||
height: 40rpx;
|
||
background: #22C55E;
|
||
border-radius: 6rpx;
|
||
animation: wave 0.8s ease-in-out infinite;
|
||
}
|
||
|
||
.wave-bar:nth-child(1) { animation-delay: 0s; height: 40rpx; }
|
||
.wave-bar:nth-child(2) { animation-delay: 0.1s; height: 60rpx; }
|
||
.wave-bar:nth-child(3) { animation-delay: 0.2s; height: 80rpx; }
|
||
.wave-bar:nth-child(4) { animation-delay: 0.3s; height: 60rpx; }
|
||
.wave-bar:nth-child(5) { animation-delay: 0.4s; height: 40rpx; }
|
||
|
||
@keyframes wave {
|
||
0%, 100% { transform: scaleY(1); }
|
||
50% { transform: scaleY(1.5); }
|
||
}
|
||
|
||
.voice-tip {
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.voice-duration-tip {
|
||
font-size: 48rpx;
|
||
font-weight: 700;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
/* 发送按钮 */
|
||
.send-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: #914584;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.send-icon {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
|
||
/* 按钮激活状态 */
|
||
.voice-btn.active,
|
||
.emoji-btn.active,
|
||
.add-btn.active {
|
||
background: #E9D5FF;
|
||
}
|
||
|
||
/* 表情面板 */
|
||
.emoji-panel {
|
||
background: #FFFFFF;
|
||
border-top: 2rpx solid #F3F4F6;
|
||
}
|
||
|
||
.emoji-scroll {
|
||
height: 480rpx;
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.emoji-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.emoji-item {
|
||
width: 12.5%;
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.emoji-text {
|
||
font-size: 56rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
.emoji-item:active {
|
||
background: #F3F4F6;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
/* 表情面板底部操作 */
|
||
.emoji-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
padding: 16rpx 32rpx;
|
||
border-top: 2rpx solid #F3F4F6;
|
||
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
.emoji-delete {
|
||
width: 80rpx;
|
||
height: 72rpx;
|
||
background: #F3F4F6;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.delete-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.emoji-send {
|
||
width: 120rpx;
|
||
height: 72rpx;
|
||
background: #E5E7EB;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
.emoji-send.active {
|
||
background: #914584;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
/* 更多功能面板 */
|
||
.more-panel {
|
||
background: #F5F5F5;
|
||
border-top: 2rpx solid #E5E7EB;
|
||
}
|
||
|
||
.more-panel-content {
|
||
padding: 40rpx 32rpx 24rpx;
|
||
}
|
||
|
||
.more-grid {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* AI角色聊天：3个图标居中显示（Figma设计样式） */
|
||
.more-grid.ai-chat-grid {
|
||
justify-content: center;
|
||
gap: 90rpx;
|
||
padding: 0 48rpx;
|
||
}
|
||
|
||
.more-grid.second-row {
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.more-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
width: 25%;
|
||
}
|
||
|
||
.more-icon-wrap {
|
||
width: 112rpx;
|
||
height: 112rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
|
||
/* Figma设计样式 - 图标已包含白色圆角背景和阴影 */
|
||
.more-icon-wrap.figma-style {
|
||
width: 128rpx;
|
||
height: 128rpx;
|
||
background: transparent;
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Figma图标样式 - 完整显示PNG图标（已包含背景和阴影） */
|
||
.figma-action-icon {
|
||
width: 128rpx;
|
||
height: 128rpx;
|
||
}
|
||
|
||
.new-tag {
|
||
position: absolute;
|
||
top: -8rpx;
|
||
right: -8rpx;
|
||
background: #FF6B35;
|
||
color: #FFFFFF;
|
||
font-size: 18rpx;
|
||
font-weight: 700;
|
||
padding: 4rpx 10rpx;
|
||
border-radius: 8rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
.more-icon-img {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
}
|
||
|
||
.more-text {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #4A5565;
|
||
}
|
||
|
||
/* 相册图标 - CSS绘制 */
|
||
.album-icon {
|
||
width: 48rpx;
|
||
height: 40rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.album-frame {
|
||
width: 48rpx;
|
||
height: 40rpx;
|
||
border: 4rpx solid #914584;
|
||
border-radius: 6rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.album-sun {
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
background: #914584;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 8rpx;
|
||
left: 8rpx;
|
||
}
|
||
|
||
.album-mountain {
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 12rpx solid transparent;
|
||
border-right: 12rpx solid transparent;
|
||
border-bottom: 14rpx solid #914584;
|
||
position: absolute;
|
||
bottom: 6rpx;
|
||
left: 12rpx;
|
||
}
|
||
|
||
/* 常用语图标 - CSS绘制 */
|
||
.quick-reply-icon {
|
||
width: 48rpx;
|
||
height: 40rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.reply-bubble1 {
|
||
width: 32rpx;
|
||
height: 22rpx;
|
||
border: 4rpx solid #914584;
|
||
border-radius: 6rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.reply-bubble2 {
|
||
width: 32rpx;
|
||
height: 22rpx;
|
||
border: 4rpx solid #914584;
|
||
border-radius: 6rpx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
box-sizing: border-box;
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
/* 红包图标 - CSS绘制 */
|
||
.red-packet-icon {
|
||
width: 40rpx;
|
||
height: 52rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.packet-body {
|
||
width: 40rpx;
|
||
height: 52rpx;
|
||
background: #E53935;
|
||
border-radius: 6rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.packet-top {
|
||
width: 40rpx;
|
||
height: 20rpx;
|
||
background: #C62828;
|
||
border-radius: 6rpx 6rpx 0 0;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.packet-circle {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
background: #FFD54F;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 12rpx;
|
||
left: 12rpx;
|
||
}
|
||
|
||
.more-panel-safe {
|
||
height: env(safe-area-inset-bottom);
|
||
background: #F5F5F5;
|
||
}
|
||
|
||
/* 录音提示浮层 */
|
||
.voice-recording-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 200;
|
||
}
|
||
|
||
.voice-recording-popup {
|
||
width: 320rpx;
|
||
height: 320rpx;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
border-radius: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 32rpx;
|
||
}
|
||
|
||
.voice-recording-popup.cancel {
|
||
background: rgba(220, 38, 38, 0.9);
|
||
}
|
||
|
||
.voice-wave {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.wave-bar {
|
||
width: 12rpx;
|
||
height: 40rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 6rpx;
|
||
animation: wave 0.8s ease-in-out infinite;
|
||
}
|
||
|
||
.wave-bar:nth-child(1) { animation-delay: 0s; height: 40rpx; }
|
||
.wave-bar:nth-child(2) { animation-delay: 0.1s; height: 60rpx; }
|
||
.wave-bar:nth-child(3) { animation-delay: 0.2s; height: 80rpx; }
|
||
.wave-bar:nth-child(4) { animation-delay: 0.3s; height: 60rpx; }
|
||
.wave-bar:nth-child(5) { animation-delay: 0.4s; height: 40rpx; }
|
||
|
||
@keyframes wave {
|
||
0%, 100% { transform: scaleY(1); }
|
||
50% { transform: scaleY(1.5); }
|
||
}
|
||
|
||
.voice-tip {
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
/* 礼物选择弹窗 */
|
||
.gift-popup-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 300;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.gift-popup {
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
max-height: 80vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.gift-popup-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 32rpx;
|
||
border-bottom: 2rpx solid #F3F4F6;
|
||
}
|
||
|
||
.gift-popup-title {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #101828;
|
||
}
|
||
|
||
.gift-popup-close {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.close-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.gift-list-scroll {
|
||
flex: 1;
|
||
max-height: 500rpx;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.gift-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.gift-item {
|
||
width: calc(25% - 18rpx);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
padding: 16rpx 8rpx;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid transparent;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.gift-item.selected {
|
||
background: #FDF2F8;
|
||
border-color: #914584;
|
||
}
|
||
|
||
.gift-image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.gift-name {
|
||
font-size: 24rpx;
|
||
color: #374151;
|
||
text-align: center;
|
||
}
|
||
|
||
.gift-price {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
font-size: 22rpx;
|
||
color: #914584;
|
||
}
|
||
|
||
.price-icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.gift-popup-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx 32rpx;
|
||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||
border-top: 2rpx solid #F3F4F6;
|
||
}
|
||
|
||
.gift-balance {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.balance-label {
|
||
font-size: 28rpx;
|
||
color: #6B7280;
|
||
}
|
||
|
||
.balance-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.balance-value {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #914584;
|
||
}
|
||
|
||
.gift-send-btn {
|
||
width: 200rpx;
|
||
height: 80rpx;
|
||
background: #E5E7EB;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
.gift-send-btn.active {
|
||
background: #914584;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
/* 免费畅聊提醒条 */
|
||
.free-chat-bar {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 99;
|
||
padding: 16rpx 32rpx;
|
||
background: #FFF5F5;
|
||
border-bottom: 2rpx solid #FFE4E4;
|
||
box-shadow: 0 2rpx 10rpx rgba(255, 77, 79, 0.05);
|
||
}
|
||
|
||
.free-chat-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.free-chat-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.clock-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.free-chat-label {
|
||
font-size: 26rpx;
|
||
color: #FF4D4F;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.free-chat-time {
|
||
font-size: 28rpx;
|
||
color: #FF4D4F;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 免费畅聊选项样式 */
|
||
.free-chat-option {
|
||
background: #F0FFF4;
|
||
border: 2rpx solid #C6F6D5;
|
||
box-shadow: 0 2rpx 4rpx -2rpx rgba(0, 0, 0, 0.1), 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.free-icon {
|
||
background: linear-gradient(135deg, #F0FFF4 0%, #C6F6D5 100%);
|
||
}
|
||
|
||
.free-btn {
|
||
background: #38A169;
|
||
}
|
||
|
||
.free-btn text {
|
||
color: #fff;
|
||
}
|
||
|
||
/* ==================== 解锁弹窗样式（与首页一致） ==================== */
|
||
|
||
/* 输入框警告样式 */
|
||
.input-placeholder.warning {
|
||
color: #FF6B6B;
|
||
}
|
||
|
||
/* 弹窗遮罩 */
|
||
.unlock-popup-mask {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 1001;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 弹窗主体 */
|
||
.unlock-popup {
|
||
width: 680rpx;
|
||
background: #F8F9FC;
|
||
border-radius: 48rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
box-shadow: 0 50rpx 100rpx -24rpx rgba(0, 0, 0, 0.25);
|
||
animation: unlockPopupIn 0.3s ease-out;
|
||
}
|
||
|
||
@keyframes unlockPopupIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0.9);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
/* 关闭按钮 */
|
||
.unlock-popup-close {
|
||
position: absolute;
|
||
top: 32rpx;
|
||
right: 32rpx;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
opacity: 0.7;
|
||
z-index: 10;
|
||
}
|
||
|
||
.unlock-popup-close text {
|
||
font-size: 40rpx;
|
||
color: #0A0A0A;
|
||
line-height: 1;
|
||
font-weight: 300;
|
||
}
|
||
|
||
/* 顶部白色区域 */
|
||
.unlock-popup-header {
|
||
background: #fff;
|
||
padding: 48rpx 48rpx 40rpx;
|
||
border-radius: 0 0 60rpx 60rpx;
|
||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 头像容器 */
|
||
.unlock-avatar-container {
|
||
position: relative;
|
||
width: 192rpx;
|
||
height: 192rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.unlock-avatar-wrap {
|
||
width: 192rpx;
|
||
height: 192rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
border: 4rpx solid #fff;
|
||
box-shadow: 0 20rpx 30rpx -6rpx rgba(0, 0, 0, 0.1), 0 8rpx 12rpx -4rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.unlock-avatar {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 锁图标 */
|
||
.unlock-lock-icon {
|
||
position: absolute;
|
||
bottom: -8rpx;
|
||
right: -8rpx;
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4rpx 12rpx -2rpx rgba(0, 0, 0, 0.1), 0 8rpx 12rpx -2rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.unlock-lock-icon image {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
/* 标题 */
|
||
.unlock-title {
|
||
text-align: center;
|
||
font-size: 42rpx;
|
||
font-weight: 900;
|
||
color: #101828;
|
||
line-height: 1.25;
|
||
letter-spacing: -0.5rpx;
|
||
}
|
||
|
||
.unlock-title .highlight {
|
||
color: #914584;
|
||
}
|
||
|
||
/* 选项区域 */
|
||
.unlock-options {
|
||
padding: 40rpx 40rpx 48rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
/* 选项卡通用样式 */
|
||
.unlock-option-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 32rpx;
|
||
height: 140rpx;
|
||
border-radius: 28rpx;
|
||
}
|
||
|
||
.option-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 28rpx;
|
||
}
|
||
|
||
/* 图标容器 */
|
||
.option-icon {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 爱心图标 */
|
||
.hearts-icon {
|
||
background: linear-gradient(135deg, #FEF2F2 0%, #FFE2E2 100%);
|
||
box-shadow: inset 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.hearts-icon image {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
|
||
/* 金钱图标 */
|
||
.money-icon {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.money-icon .money-symbol {
|
||
font-size: 48rpx;
|
||
font-weight: 900;
|
||
color: #fff;
|
||
}
|
||
|
||
/* 选项信息 */
|
||
.option-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
|
||
.option-title {
|
||
font-size: 40rpx;
|
||
font-weight: 900;
|
||
color: #101828;
|
||
line-height: 1.5;
|
||
letter-spacing: -0.5rpx;
|
||
}
|
||
|
||
.option-desc {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #6A7282;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.option-info.light .option-title {
|
||
color: #fff;
|
||
}
|
||
|
||
.option-info.light .option-desc {
|
||
color: rgba(255, 255, 255, 0.95);
|
||
}
|
||
|
||
/* 按钮 */
|
||
.option-btn {
|
||
padding: 16rpx 40rpx;
|
||
border-radius: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.option-btn text {
|
||
font-size: 36rpx;
|
||
font-weight: 900;
|
||
letter-spacing: -0.5rpx;
|
||
}
|
||
|
||
/* 爱心选项 */
|
||
.hearts-option {
|
||
background: #fff;
|
||
border: 2rpx solid #F3F4F6;
|
||
box-shadow: 0 2rpx 4rpx -2rpx rgba(0, 0, 0, 0.1), 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.hearts-btn {
|
||
background: #F3F4F6;
|
||
}
|
||
|
||
.hearts-btn text {
|
||
color: #4A5565;
|
||
}
|
||
|
||
/* 现金选项 */
|
||
.money-option {
|
||
background: linear-gradient(180deg, #914584 0%, #7A3A6F 100%);
|
||
box-shadow: 0 8rpx 12rpx -8rpx rgba(243, 232, 255, 1), 0 20rpx 30rpx -6rpx rgba(243, 232, 255, 1);
|
||
}
|
||
|
||
.money-btn {
|
||
background: #fff;
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.money-btn text {
|
||
color: #914584;
|
||
}
|
||
|
||
/* 暂不需要 */
|
||
.unlock-cancel {
|
||
text-align: center;
|
||
padding: 20rpx 0 0;
|
||
}
|
||
|
||
.unlock-cancel text {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #99A1AF;
|
||
letter-spacing: 0.5rpx;
|
||
}
|