4dd2f9f4a7
主要更新： - 后台菜单精简（9项→6项） - 新增搜索功能（敏感信息过滤） - 分销绑定和提现系统完善 - 数据库初始化API（自动修复表结构） - 用户管理：显示绑定关系详情 - 小程序：上下章导航优化、匹配页面重构 - 修复hydration和数据类型问题
1178 lines
21 KiB
Plaintext
1178 lines
21 KiB
Plaintext
/**
|
|
* Soul创业实验 - 找伙伴页样式
|
|
* 按H5网页端完全重构
|
|
*/
|
|
|
|
.page {
|
|
min-height: 100vh;
|
|
background: #000000;
|
|
padding-bottom: 200rpx;
|
|
}
|
|
|
|
/* ===== 导航栏 ===== */
|
|
.nav-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
background: rgba(0, 0, 0, 0.9);
|
|
backdrop-filter: blur(40rpx);
|
|
}
|
|
|
|
.nav-content {
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.nav-settings {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
background: #1c1c1e;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.settings-icon {
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.nav-placeholder {
|
|
width: 100%;
|
|
}
|
|
|
|
/* ===== 匹配提示条 - 简化版 ===== */
|
|
.match-tip-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16rpx;
|
|
margin: 24rpx 32rpx;
|
|
padding: 20rpx 32rpx;
|
|
background: rgba(255, 215, 0, 0.1);
|
|
border-radius: 16rpx;
|
|
border: 1rpx solid rgba(255, 215, 0, 0.2);
|
|
}
|
|
|
|
.tip-icon {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.tip-text {
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.tip-btn {
|
|
padding: 10rpx 24rpx;
|
|
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
|
|
color: #000;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.text-brand {
|
|
color: #00CED1;
|
|
}
|
|
|
|
.text-red {
|
|
color: #ff4444;
|
|
}
|
|
|
|
.text-gray {
|
|
color: #666666;
|
|
}
|
|
|
|
.text-muted {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.gold-text {
|
|
color: #FFD700;
|
|
}
|
|
|
|
/* ===== 主内容区 ===== */
|
|
.main-content {
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
/* ===== 匹配圆环 ===== */
|
|
.match-circle-wrapper {
|
|
position: relative;
|
|
width: 480rpx;
|
|
height: 480rpx;
|
|
margin: 48rpx auto;
|
|
}
|
|
|
|
.outer-glow {
|
|
position: absolute;
|
|
inset: -60rpx;
|
|
border-radius: 50%;
|
|
animation: pulseGlow 2s ease-in-out infinite;
|
|
}
|
|
|
|
.outer-glow.glow-active {
|
|
background: radial-gradient(circle, transparent 50%, rgba(0, 229, 255, 0.1) 70%, transparent 100%);
|
|
}
|
|
|
|
.outer-glow.glow-inactive {
|
|
background: radial-gradient(circle, transparent 50%, rgba(100, 100, 100, 0.1) 70%, transparent 100%);
|
|
}
|
|
|
|
@keyframes pulseGlow {
|
|
0%, 100% { transform: scale(1); opacity: 0.5; }
|
|
50% { transform: scale(1.1); opacity: 0.8; }
|
|
}
|
|
|
|
.middle-ring {
|
|
position: absolute;
|
|
inset: -30rpx;
|
|
border-radius: 50%;
|
|
border: 4rpx solid;
|
|
animation: pulseRing 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.middle-ring.ring-active {
|
|
border-color: rgba(0, 229, 255, 0.3);
|
|
}
|
|
|
|
.middle-ring.ring-inactive {
|
|
border-color: rgba(100, 100, 100, 0.3);
|
|
}
|
|
|
|
@keyframes pulseRing {
|
|
0%, 100% { transform: scale(1); opacity: 0.3; }
|
|
50% { transform: scale(1.05); opacity: 0.6; }
|
|
}
|
|
|
|
.inner-sphere {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: floatSphere 3s ease-in-out infinite;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.inner-sphere.sphere-active {
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
|
box-shadow: 0 0 120rpx rgba(0, 229, 255, 0.3), inset 0 0 120rpx rgba(123, 97, 255, 0.2);
|
|
}
|
|
|
|
.inner-sphere.sphere-inactive {
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
|
|
box-shadow: 0 0 60rpx rgba(100, 100, 100, 0.2);
|
|
}
|
|
|
|
@keyframes floatSphere {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10rpx); }
|
|
}
|
|
|
|
.sphere-gradient {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at 30% 30%, rgba(123, 97, 255, 0.4) 0%, transparent 50%),
|
|
radial-gradient(circle at 70% 70%, rgba(233, 30, 99, 0.3) 0%, transparent 50%);
|
|
}
|
|
|
|
.sphere-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.sphere-icon {
|
|
font-size: 96rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.sphere-title {
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.sphere-desc {
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/* ===== 当前模式 ===== */
|
|
.current-mode {
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
/* ===== 免费次数提示 ===== */
|
|
.free-tip {
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
/* ===== 购买提示卡片 ===== */
|
|
.purchase-tip-card {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 32rpx;
|
|
background: linear-gradient(90deg, rgba(0, 229, 255, 0.1) 0%, transparent 100%);
|
|
border: 2rpx solid rgba(0, 229, 255, 0.2);
|
|
border-radius: 24rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.tip-left {
|
|
flex: 1;
|
|
}
|
|
|
|
.tip-title {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.tip-desc {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.tip-btn {
|
|
padding: 16rpx 32rpx;
|
|
background: #00CED1;
|
|
color: #000000;
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
/* ===== 分隔线 ===== */
|
|
.divider {
|
|
height: 2rpx;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
margin: 32rpx 0;
|
|
}
|
|
|
|
/* ===== 匹配类型选择 ===== */
|
|
.type-section {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.type-section-title {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
text-align: center;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.type-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.type-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
padding: 32rpx 16rpx;
|
|
background: #1c1c1e;
|
|
border-radius: 24rpx;
|
|
border: 2rpx solid transparent;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.type-item.type-active {
|
|
background: rgba(0, 229, 255, 0.1);
|
|
border-color: rgba(0, 229, 255, 0.5);
|
|
}
|
|
|
|
.type-icon {
|
|
font-size: 48rpx;
|
|
}
|
|
|
|
.type-label {
|
|
font-size: 22rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
text-align: center;
|
|
}
|
|
|
|
/* ===== 匹配中状态 ===== */
|
|
.matching-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 48rpx 0;
|
|
}
|
|
|
|
.matching-animation {
|
|
position: relative;
|
|
width: 400rpx;
|
|
height: 400rpx;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
|
|
.matching-ring {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #00CED1, #7B61FF, #E91E63);
|
|
animation: rotateRing 3s linear infinite;
|
|
}
|
|
|
|
@keyframes rotateRing {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.matching-center {
|
|
position: absolute;
|
|
inset: 16rpx;
|
|
border-radius: 50%;
|
|
background: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.matching-icon {
|
|
font-size: 96rpx;
|
|
animation: pulseIcon 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulseIcon {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.2); }
|
|
}
|
|
|
|
.ripple {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
border: 4rpx solid rgba(0, 229, 255, 0.3);
|
|
animation: rippleExpand 2s ease-out infinite;
|
|
}
|
|
|
|
.ripple-1 { animation-delay: 0s; }
|
|
.ripple-2 { animation-delay: 0.5s; }
|
|
.ripple-3 { animation-delay: 1s; }
|
|
|
|
@keyframes rippleExpand {
|
|
0% { transform: scale(1); opacity: 0.6; }
|
|
100% { transform: scale(2); opacity: 0; }
|
|
}
|
|
|
|
.matching-title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.matching-count {
|
|
font-size: 28rpx;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
margin-bottom: 48rpx;
|
|
}
|
|
|
|
.cancel-btn {
|
|
padding: 24rpx 64rpx;
|
|
background: #1c1c1e;
|
|
color: #ffffff;
|
|
font-size: 28rpx;
|
|
border-radius: 48rpx;
|
|
border: 2rpx solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* ===== 匹配成功状态 ===== */
|
|
.matched-state {
|
|
padding: 32rpx 0;
|
|
}
|
|
|
|
.success-icon-wrapper {
|
|
text-align: center;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.success-icon {
|
|
font-size: 120rpx;
|
|
}
|
|
|
|
.match-card {
|
|
background: #1c1c1e;
|
|
border-radius: 32rpx;
|
|
padding: 40rpx;
|
|
border: 2rpx solid rgba(255, 255, 255, 0.05);
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.match-avatar {
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
border-radius: 50%;
|
|
border: 4rpx solid #00CED1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.match-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.match-name {
|
|
display: block;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.match-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.match-tag {
|
|
padding: 8rpx 16rpx;
|
|
background: rgba(0, 229, 255, 0.2);
|
|
color: #00CED1;
|
|
font-size: 20rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.match-score-box {
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.score-value {
|
|
display: block;
|
|
font-size: 48rpx;
|
|
font-weight: 700;
|
|
color: #00CED1;
|
|
}
|
|
|
|
.score-label {
|
|
font-size: 22rpx;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.card-section {
|
|
padding-top: 24rpx;
|
|
border-top: 2rpx solid rgba(255, 255, 255, 0.1);
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.section-title {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.interest-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.interest-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.interest-icon {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.interest-text {
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.concept-text {
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ===== 操作按钮 ===== */
|
|
.action-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.btn-primary {
|
|
padding: 32rpx;
|
|
background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%);
|
|
color: #ffffff;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
.btn-secondary {
|
|
padding: 32rpx;
|
|
background: #1c1c1e;
|
|
color: #ffffff;
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
border-radius: 24rpx;
|
|
border: 2rpx solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.btn-disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* ===== 弹窗 ===== */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(20rpx);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
padding: 48rpx;
|
|
}
|
|
|
|
.modal-content {
|
|
width: 100%;
|
|
max-width: 640rpx;
|
|
background: #1c1c1e;
|
|
border-radius: 32rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ===== 加入弹窗 ===== */
|
|
.join-modal {
|
|
padding: 40rpx;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.close-btn {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.form-tip {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.contact-tabs {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.contact-tab {
|
|
flex: 1;
|
|
padding: 20rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 2rpx solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.contact-tab.tab-active-phone {
|
|
background: rgba(0, 229, 255, 0.2);
|
|
color: #00CED1;
|
|
border-color: rgba(0, 229, 255, 0.3);
|
|
}
|
|
|
|
.contact-tab.tab-active-wechat {
|
|
background: rgba(7, 193, 96, 0.2);
|
|
color: #07C160;
|
|
border-color: rgba(7, 193, 96, 0.3);
|
|
}
|
|
|
|
.input-group {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.input-label {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 28rpx;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 2rpx solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 20rpx;
|
|
font-size: 32rpx;
|
|
color: #ffffff;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.input-placeholder {
|
|
color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.error-text {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: #ff4444;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.submit-btn {
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.form-notice {
|
|
display: block;
|
|
font-size: 22rpx;
|
|
color: rgba(255, 255, 255, 0.3);
|
|
text-align: center;
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
/* ===== 新版加入弹窗 ===== */
|
|
.join-modal-new {
|
|
padding: 0;
|
|
border-radius: 32rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.join-header {
|
|
position: relative;
|
|
padding: 48rpx 40rpx 32rpx;
|
|
background: linear-gradient(135deg, rgba(0, 206, 209, 0.15) 0%, rgba(123, 97, 255, 0.1) 100%);
|
|
text-align: center;
|
|
}
|
|
|
|
.join-icon-wrap {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin: 0 auto 20rpx;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.join-icon {
|
|
font-size: 48rpx;
|
|
}
|
|
|
|
.join-title {
|
|
display: block;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.join-subtitle {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.close-btn-new {
|
|
position: absolute;
|
|
top: 24rpx;
|
|
right: 24rpx;
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.contact-switch {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
padding: 24rpx 40rpx;
|
|
}
|
|
|
|
.switch-item {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12rpx;
|
|
padding: 24rpx;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 16rpx;
|
|
font-size: 28rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
border: 2rpx solid transparent;
|
|
}
|
|
|
|
.switch-item.switch-active {
|
|
background: rgba(0, 206, 209, 0.15);
|
|
color: #00CED1;
|
|
border-color: rgba(0, 206, 209, 0.3);
|
|
}
|
|
|
|
.switch-icon {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.input-area {
|
|
padding: 0 40rpx 24rpx;
|
|
}
|
|
|
|
.input-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 2rpx solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.input-prefix {
|
|
padding: 0 24rpx;
|
|
font-size: 28rpx;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
border-right: 1rpx solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.input-field {
|
|
flex: 1;
|
|
padding: 28rpx 24rpx;
|
|
font-size: 32rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.input-placeholder-new {
|
|
color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.error-msg {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: #ff4444;
|
|
margin-top: 12rpx;
|
|
padding-left: 8rpx;
|
|
}
|
|
|
|
.submit-btn-new {
|
|
margin: 8rpx 40rpx 24rpx;
|
|
padding: 28rpx;
|
|
background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%);
|
|
color: #ffffff;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.btn-disabled-new {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.form-notice-new {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 22rpx;
|
|
color: rgba(255, 255, 255, 0.3);
|
|
padding-bottom: 32rpx;
|
|
}
|
|
|
|
/* ===== 新版加入成功 ===== */
|
|
.join-success-new {
|
|
padding: 64rpx 40rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.success-icon-big {
|
|
font-size: 96rpx;
|
|
display: block;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.success-title-new {
|
|
display: block;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.success-desc-new {
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/* ===== 旧版加入成功 (保留兼容) ===== */
|
|
.join-success {
|
|
padding: 48rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.success-check {
|
|
font-size: 128rpx;
|
|
display: block;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.success-title {
|
|
display: block;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.success-desc {
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/* ===== 解锁弹窗 ===== */
|
|
.unlock-modal {
|
|
padding: 48rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.unlock-icon {
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
margin: 0 auto 24rpx;
|
|
background: rgba(255, 215, 0, 0.2);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 64rpx;
|
|
}
|
|
|
|
.unlock-title {
|
|
display: block;
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.unlock-desc {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.unlock-info {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 20rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12rpx 0;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.unlock-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.btn-gold {
|
|
padding: 28rpx;
|
|
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
|
|
color: #000000;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
.btn-ghost {
|
|
padding: 28rpx;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
/* ===== 底部留白 ===== */
|
|
.bottom-space {
|
|
height: 40rpx;
|
|
}
|
|
|
|
/* ===== 新版匹配动画 V2 ===== */
|
|
.matching-animation-v2 {
|
|
position: relative;
|
|
width: 440rpx;
|
|
height: 440rpx;
|
|
margin: 0 auto 48rpx;
|
|
}
|
|
|
|
/* 外层旋转光环 */
|
|
.matching-outer-ring {
|
|
position: absolute;
|
|
inset: -20rpx;
|
|
border-radius: 50%;
|
|
background: conic-gradient(
|
|
from 0deg,
|
|
transparent 0deg,
|
|
#00CED1 60deg,
|
|
#7B61FF 120deg,
|
|
#E91E63 180deg,
|
|
#FFD700 240deg,
|
|
#00CED1 300deg,
|
|
transparent 360deg
|
|
);
|
|
animation: rotateRingV2 2s linear infinite;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.matching-outer-ring::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 8rpx;
|
|
border-radius: 50%;
|
|
background: #000;
|
|
}
|
|
|
|
@keyframes rotateRingV2 {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* 中层脉冲环 */
|
|
.matching-pulse-ring {
|
|
position: absolute;
|
|
inset: 20rpx;
|
|
border-radius: 50%;
|
|
border: 4rpx solid rgba(0, 206, 209, 0.5);
|
|
animation: pulseRingV2 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulseRingV2 {
|
|
0%, 100% { transform: scale(1); opacity: 0.5; }
|
|
50% { transform: scale(1.1); opacity: 1; }
|
|
}
|
|
|
|
/* 内层核心球体 */
|
|
.matching-core {
|
|
position: absolute;
|
|
inset: 60rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #1a2a4a 0%, #0a1628 50%, #16213e 100%);
|
|
box-shadow:
|
|
0 0 60rpx rgba(0, 206, 209, 0.4),
|
|
0 0 120rpx rgba(123, 97, 255, 0.2),
|
|
inset 0 0 80rpx rgba(0, 206, 209, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: floatCoreV2 2s ease-in-out infinite;
|
|
}
|
|
|
|
.matching-core-inner {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(0, 206, 209, 0.3) 0%, transparent 70%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@keyframes floatCoreV2 {
|
|
0%, 100% { transform: translateY(0) scale(1); }
|
|
50% { transform: translateY(-10rpx) scale(1.02); }
|
|
}
|
|
|
|
.matching-icon-v2 {
|
|
font-size: 80rpx;
|
|
animation: searchIconV2 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes searchIconV2 {
|
|
0%, 100% { transform: rotate(-15deg); }
|
|
50% { transform: rotate(15deg); }
|
|
}
|
|
|
|
/* 粒子效果 */
|
|
.particle {
|
|
position: absolute;
|
|
font-size: 32rpx;
|
|
animation: floatParticle 3s ease-in-out infinite;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.particle-1 { top: 10%; left: 15%; animation-delay: 0s; }
|
|
.particle-2 { top: 20%; right: 10%; animation-delay: 0.5s; }
|
|
.particle-3 { bottom: 20%; left: 10%; animation-delay: 1s; }
|
|
.particle-4 { bottom: 15%; right: 15%; animation-delay: 1.5s; }
|
|
|
|
@keyframes floatParticle {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; }
|
|
50% { transform: translateY(-20rpx) rotate(180deg); opacity: 1; }
|
|
}
|
|
|
|
/* 扩散波纹 V2 */
|
|
.ripple-v2 {
|
|
position: absolute;
|
|
inset: 40rpx;
|
|
border-radius: 50%;
|
|
border: 3rpx solid;
|
|
border-color: rgba(0, 206, 209, 0.6);
|
|
animation: rippleExpandV2 2.5s ease-out infinite;
|
|
}
|
|
|
|
.ripple-v2-1 { animation-delay: 0s; }
|
|
.ripple-v2-2 { animation-delay: 0.8s; }
|
|
.ripple-v2-3 { animation-delay: 1.6s; }
|
|
|
|
@keyframes rippleExpandV2 {
|
|
0% { transform: scale(1); opacity: 0.8; }
|
|
100% { transform: scale(1.8); opacity: 0; }
|
|
}
|
|
|
|
/* 新版匹配文字 */
|
|
.matching-title-v2 {
|
|
display: block;
|
|
font-size: 38rpx;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
margin-bottom: 12rpx;
|
|
background: linear-gradient(90deg, #00CED1, #7B61FF, #00CED1);
|
|
background-size: 200% auto;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: shineText 2s linear infinite;
|
|
}
|
|
|
|
@keyframes shineText {
|
|
to { background-position: 200% center; }
|
|
}
|
|
|
|
.matching-subtitle-v2 {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
text-align: center;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.matching-tips {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.tip-item {
|
|
font-size: 26rpx;
|
|
color: #00CED1;
|
|
animation: fadeInUp 0.5s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.tip-item:nth-child(1) { animation-delay: 0.5s; }
|
|
.tip-item:nth-child(2) { animation-delay: 1.5s; }
|
|
.tip-item:nth-child(3) { animation-delay: 2.5s; }
|
|
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(20rpx); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.cancel-btn-v2 {
|
|
display: inline-block;
|
|
padding: 20rpx 60rpx;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 28rpx;
|
|
border-radius: 40rpx;
|
|
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
|
}
|