450 lines
8.2 KiB
Plaintext
450 lines
8.2 KiB
Plaintext
/* pages/index/index.wxss - 个人版首页，样式与企业版一致 */
|
||
.container {
|
||
min-height: 100vh;
|
||
width: 100vw;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 50%, #ffffff 100%);
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
/* 底栏留白由 .tabbar-pad + 全局 --tabbar-pad 统一控制 */
|
||
}
|
||
|
||
/* 首页：中间拍摄图整体上移，减轻与「测试流程」挤压；底栏略加垫避免中间拍摄钮挡主按钮 */
|
||
.container.tabbar-pad {
|
||
padding-bottom: calc(var(--tabbar-pad) + 32rpx) !important;
|
||
}
|
||
|
||
/* 背景装饰圆形（与企业版一致） */
|
||
.bg-decoration {
|
||
position: absolute;
|
||
width: 600rpx;
|
||
height: 600rpx;
|
||
border-radius: 50%;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
.bg-top-right {
|
||
top: -200rpx;
|
||
right: -200rpx;
|
||
background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
|
||
}
|
||
|
||
.bg-bottom-left {
|
||
bottom: 0;
|
||
left: 0;
|
||
background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
|
||
}
|
||
|
||
/* 自定义导航栏 */
|
||
.custom-navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: #ffffff;
|
||
z-index: 10000;
|
||
width: 100%;
|
||
}
|
||
|
||
.navbar-content {
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 40rpx;
|
||
position: relative;
|
||
background: #ffffff;
|
||
min-height: 88rpx;
|
||
}
|
||
|
||
.navbar-title {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #e63946;
|
||
text-align: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.navbar-placeholder {
|
||
width: 140rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 与企业版切换按钮同款样式（红主色） */
|
||
.switch-enterprise-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
padding: 12rpx 20rpx;
|
||
background: rgba(230, 57, 70, 0.1);
|
||
border-radius: 30rpx;
|
||
border: 1rpx solid rgba(230, 57, 70, 0.2);
|
||
flex-shrink: 0;
|
||
z-index: 10;
|
||
}
|
||
|
||
.enterprise-icon {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.enterprise-text {
|
||
font-size: 24rpx;
|
||
color: #e63946;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.top-image-section {
|
||
width: 100%;
|
||
padding: 8rpx 40rpx 10rpx;
|
||
flex-shrink: 0;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
z-index: 1;
|
||
margin-top: -20rpx;
|
||
}
|
||
|
||
.image-container {
|
||
position: relative;
|
||
width: 100%;
|
||
transform: translateY(-26rpx);
|
||
margin-bottom: -26rpx;
|
||
}
|
||
|
||
.image-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
padding-top: 100%;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
background: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.main-image {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 85%;
|
||
height: 85%;
|
||
display: block;
|
||
}
|
||
|
||
.float-tag {
|
||
position: absolute;
|
||
padding: 12rpx 24rpx;
|
||
border-radius: 30rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
color: #e63946;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
box-shadow: 0 4rpx 16rpx rgba(230, 57, 70, 0.2);
|
||
white-space: nowrap;
|
||
z-index: 10;
|
||
}
|
||
|
||
.tag-1 {
|
||
top: 15%;
|
||
right: 10rpx;
|
||
}
|
||
|
||
.tag-2 {
|
||
bottom: 25%;
|
||
left: 0;
|
||
}
|
||
|
||
.tag-3 {
|
||
bottom: 25%;
|
||
right: 0;
|
||
}
|
||
|
||
.process-section {
|
||
padding: 8rpx 40rpx 20rpx;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #e63946;
|
||
text-align: center;
|
||
margin-bottom: 25rpx;
|
||
}
|
||
|
||
.process-steps {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 10rpx;
|
||
}
|
||
|
||
.step-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.step-circle {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
border-radius: 50%;
|
||
background: #b8b9bc;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.step-circle.active {
|
||
background: #e63946;
|
||
}
|
||
|
||
.step-label {
|
||
font-size: 20rpx;
|
||
color: #666;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.step-text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.step-line {
|
||
width: 50rpx;
|
||
height: 4rpx;
|
||
background: #e0e0e0;
|
||
margin: 0 6rpx 50rpx;
|
||
}
|
||
|
||
.start-button {
|
||
margin: 16rpx 40rpx 0;
|
||
background: linear-gradient(135deg, #e63946 0%, #ff6b9d 100%);
|
||
border-radius: 50rpx;
|
||
padding: 24rpx;
|
||
text-align: center;
|
||
box-shadow: 0 8rpx 30rpx rgba(230, 57, 70, 0.3);
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.button-text {
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.version-picker-mask {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(10, 15, 30, 0.44);
|
||
z-index: 20000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.version-picker-dialog {
|
||
width: 100%;
|
||
max-width: 620rpx;
|
||
background: #ffffff;
|
||
border-radius: 36rpx;
|
||
padding: 30rpx 30rpx 30rpx;
|
||
border: 1rpx solid rgba(99, 102, 241, 0.12);
|
||
box-shadow: 0 30rpx 80rpx rgba(15, 23, 42, 0.22);
|
||
}
|
||
|
||
.version-picker-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.version-picker-badge {
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 999rpx;
|
||
background: linear-gradient(135deg, rgba(79, 70, 229, 0.12) 0%, rgba(124, 58, 237, 0.16) 100%);
|
||
color: #4f46e5;
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.version-picker-close {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
border-radius: 50%;
|
||
background: #f1f5f9;
|
||
color: #6b7280;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
.version-picker-title {
|
||
text-align: center;
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
color: #111827;
|
||
margin-top: 18rpx;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.version-picker-current {
|
||
margin-top: 16rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #475569;
|
||
background: #f8fafc;
|
||
border-radius: 999rpx;
|
||
padding: 10rpx 18rpx;
|
||
}
|
||
|
||
.version-picker-current-em {
|
||
color: #4f46e5;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.version-picker-desc {
|
||
margin-top: 14rpx;
|
||
text-align: center;
|
||
font-size: 23rpx;
|
||
color: #6b7280;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.version-picker-actions {
|
||
margin-top: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.version-btn::after,
|
||
.version-cancel-btn::after {
|
||
border: none;
|
||
}
|
||
|
||
.version-btn,
|
||
.version-cancel-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0;
|
||
margin: 0;
|
||
line-height: 1.25;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.version-btn {
|
||
height: 82rpx;
|
||
width: 100%;
|
||
border-radius: 999rpx;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
border: none;
|
||
box-shadow: 0 10rpx 20rpx rgba(79, 70, 229, 0.2);
|
||
}
|
||
|
||
.version-btn-is-current {
|
||
transform: translateY(-1rpx);
|
||
box-shadow: 0 0 0 4rpx #ffffff, 0 0 0 6rpx rgba(79, 70, 229, 0.45), 0 12rpx 24rpx rgba(79, 70, 229, 0.24);
|
||
}
|
||
|
||
.version-btn-personal { background: linear-gradient(135deg, #ef4444 0%, #f97316 100%); }
|
||
.version-btn-enterprise { background: linear-gradient(135deg, #2563eb 0%, #6366f1 100%); }
|
||
.version-btn-gaokao { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); }
|
||
|
||
.version-picker-foot {
|
||
margin-top: 14rpx;
|
||
}
|
||
|
||
.version-cancel-btn {
|
||
height: 76rpx;
|
||
border-radius: 999rpx;
|
||
background: #f3f4f6;
|
||
color: #6b7280;
|
||
font-size: 27rpx;
|
||
font-weight: 600;
|
||
border: 1rpx solid #e5e7eb;
|
||
}
|
||
|
||
.upload-button {
|
||
margin: 0 40rpx 16rpx;
|
||
border: 2rpx solid #8b5cf6;
|
||
border-radius: 50rpx;
|
||
padding: 18rpx;
|
||
text-align: center;
|
||
background: #fff;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 26rpx;
|
||
color: #8b5cf6;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* AI 生成内容标识横幅（监管合规，始终显示） */
|
||
.ai-disclosure-banner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12rpx;
|
||
margin: 24rpx 40rpx 16rpx;
|
||
padding: 16rpx 24rpx;
|
||
background: linear-gradient(135deg, #f0f4ff 0%, #e8ecf8 100%);
|
||
border: 1rpx solid #c7d2fe;
|
||
border-radius: 12rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.ai-disclosure-icon {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
border-radius: 8rpx;
|
||
background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ai-disclosure-text {
|
||
font-size: 22rpx;
|
||
color: #4338ca;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 自定义 tab 由内层 .tab-bar fixed，避免与组件双重 fixed 导致错位 */
|
||
custom-tab-bar {
|
||
display: block;
|
||
height: 0;
|
||
overflow: visible;
|
||
}
|