1246 lines
23 KiB
Plaintext
1246 lines
23 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;
|
||
padding: 0 32rpx;
|
||
}
|
||
|
||
.nav-settings {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
flex-shrink: 0;
|
||
border-radius: 50%;
|
||
background: #1c1c1e;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.nav-title {
|
||
flex: 1;
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
}
|
||
|
||
.nav-right-placeholder {
|
||
width: 80rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.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 28rpx;
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
border-right: 1rpx solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
/* Skill §6：view 包裹、padding 写 view、input width 100% */
|
||
.input-field-wrap {
|
||
flex: 1;
|
||
padding: 28rpx 32rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.input-field-inner {
|
||
width: 100%;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
background: transparent;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
/* 资源对接表单（Skill §6：view 包裹、padding 写 view、input width 100%） */
|
||
.resource-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
margin-bottom: 24rpx;
|
||
padding: 0 40rpx;
|
||
}
|
||
.resource-form .form-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
.resource-form .form-label {
|
||
font-size: 26rpx;
|
||
color: rgba(255,255,255,0.6);
|
||
}
|
||
.resource-form .form-input-wrap {
|
||
background: #1c1c1e;
|
||
border: 2rpx solid rgba(0,206,209,0.3);
|
||
border-radius: 16rpx;
|
||
padding: 24rpx 32rpx;
|
||
}
|
||
.resource-form .form-input-inner {
|
||
width: 100%;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
background: transparent;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 手机/微信号弹窗 - comprehensive_profile_editor_v1_2 */
|
||
.contact-modal-overlay { background: rgba(0,0,0,0.85); backdrop-filter: blur(8rpx); }
|
||
.contact-modal {
|
||
width: 90%; max-width: 600rpx; background: #1A1A1A; border-radius: 48rpx;
|
||
padding: 48rpx 40rpx; border: 1rpx solid rgba(255,255,255,0.1);
|
||
}
|
||
.contact-modal-title { display: block; text-align: center; font-size: 40rpx; font-weight: bold; color: #fff; margin-bottom: 16rpx; }
|
||
.contact-modal-hint { display: block; font-size: 24rpx; color: #9CA3AF; text-align: center; margin-bottom: 40rpx; }
|
||
.contact-modal .form-input-wrap { margin-bottom: 32rpx; }
|
||
.contact-modal .form-label { display: block; font-size: 24rpx; color: #9CA3AF; margin-bottom: 12rpx; margin-left: 8rpx; }
|
||
.contact-modal .form-input-inner {
|
||
display: flex; align-items: center; padding: 24rpx 32rpx; background: #262626; border-radius: 24rpx;
|
||
}
|
||
.contact-modal .form-input-inner .form-icon { font-size: 36rpx; margin-right: 16rpx; opacity: 0.7; }
|
||
.contact-modal .form-input-inner .form-input { flex: 1; font-size: 28rpx; color: #fff; background: transparent; }
|
||
.contact-modal-btn {
|
||
width: 100%; height: 96rpx; line-height: 96rpx; text-align: center;
|
||
background: #4FD1C5; color: #000; font-size: 32rpx; font-weight: bold; border-radius: 24rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
.contact-modal-btn[disabled] { opacity: 0.6; }
|
||
.contact-modal-cancel { display: block; text-align: center; font-size: 28rpx; color: #9CA3AF; margin-top: 24rpx; padding: 16rpx; }
|