You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
743 lines
13 KiB
743 lines
13 KiB
page { |
|
background-color: #f5f7fa; |
|
// 为 uploadFile 组件设置 CSS 变量 |
|
--upload-size: 100%; |
|
--upload-preview-height: 350rpx; // 预览项高度 |
|
--upload-radius: 16rpx; |
|
--upload-bg: rgba(247, 249, 251, 1); |
|
--upload-border: #d1d5db; |
|
} |
|
|
|
.page { |
|
display: flex; |
|
flex-direction: column; |
|
height: 100vh; |
|
background: #f5f7fa; |
|
} |
|
|
|
/* ========== 自定义预览样式 ========== */ |
|
.upload-preview-image { |
|
width: 100%; |
|
height: 100%; |
|
display: block; |
|
} |
|
|
|
/* ========== 步骤条 ========== */ |
|
.step-bar { |
|
flex-shrink: 0; |
|
padding: 30rpx 60rpx 24rpx; |
|
background: #fff; |
|
|
|
.step-list { |
|
display: flex; |
|
align-items: flex-start; |
|
} |
|
|
|
.step-item { |
|
flex: 1; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
position: relative; |
|
|
|
&:not(:last-child)::after { |
|
content: ''; |
|
position: absolute; |
|
top: 32rpx; |
|
left: 50%; |
|
right: -50%; |
|
height: 2rpx; |
|
background: rgba(247, 248, 250, 1); |
|
z-index: 0; |
|
} |
|
|
|
&.is-done:not(:last-child)::after { |
|
background: #3b82f6; |
|
} |
|
|
|
.step-circle { |
|
width: 62rpx; |
|
height: 62rpx; |
|
border-radius: 50%; |
|
background: rgba(247, 248, 250, 1); |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
position: relative; |
|
z-index: 1; |
|
} |
|
|
|
.step-num { |
|
font-size: 28rpx; |
|
color: rgba(148, 163, 184, 1); |
|
font-weight: 500; |
|
} |
|
|
|
.step-check { |
|
font-size: 22rpx; |
|
color: rgba(148, 163, 184, 0.5); |
|
font-weight: 700; |
|
} |
|
|
|
&.is-active, |
|
&.is-done { |
|
.step-circle { |
|
background: linear-gradient(90deg, #9ddffd 0%, #4ab8fd 100%); |
|
box-shadow: 0rpx 19rpx 28rpx -4rpx rgba(20, 164, 255, 0.2); |
|
} |
|
|
|
.step-num, |
|
.step-check { |
|
color: #fff; |
|
} |
|
|
|
.step-label { |
|
color: rgba(74, 184, 253, 1); |
|
} |
|
} |
|
|
|
.step-label { |
|
margin-top: 10rpx; |
|
font-size: 20rpx; |
|
color: rgba(148, 163, 184, 1); |
|
text-align: center; |
|
line-height: 1.3; |
|
} |
|
} |
|
} |
|
|
|
/* ========== 表单滚动区 ========== */ |
|
.form-scroll { |
|
flex: 1; |
|
padding: 24rpx 32rpx; |
|
box-sizing: border-box; |
|
overflow: hidden; |
|
} |
|
|
|
/* ========== 表单卡片 ========== */ |
|
.form-card { |
|
background: #fff; |
|
border-radius: 24rpx; |
|
padding: 32rpx; |
|
margin-bottom: 24rpx; |
|
} |
|
|
|
/* ========== 表单字段 ========== */ |
|
.form-field { |
|
margin-bottom: 38rpx; |
|
|
|
&:last-child { |
|
margin-bottom: 0; |
|
} |
|
} |
|
|
|
.form-label { |
|
font-size: 32rpx; |
|
color: rgba(25, 28, 30, 1); |
|
font-weight: bold; |
|
margin-bottom: 20rpx; |
|
display: flex; |
|
align-items: center; |
|
|
|
.required { |
|
color: rgba(253, 91, 89, 1); |
|
margin-left: 6rpx; |
|
font-size: 28rpx; |
|
} |
|
.extra { |
|
flex: 1; |
|
display: flex; |
|
justify-content: flex-end; |
|
.ai-img { |
|
width: 203rpx; |
|
height: 56rpx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
gap: 12rpx; |
|
background: linear-gradient(90deg, #9ddffd 0%, #4ab8fd 100%); |
|
border-radius: 68rpx 68rpx 68rpx 68rpx; |
|
font-size: 28rpx; |
|
color: rgba(255, 255, 255, 1); |
|
.icon { |
|
width: 32rpx; |
|
height: 32rpx; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.input-wrap { |
|
position: relative; |
|
.form-input { |
|
width: 100%; |
|
height: 88rpx; |
|
background: #f7f8fa; |
|
border-radius: 16rpx; |
|
padding: 0 140rpx 0 24rpx; |
|
font-size: 32rpx; |
|
color: rgba(71, 85, 105, 1); |
|
box-sizing: border-box; |
|
} |
|
.form-input-place { |
|
color: rgba(148, 163, 184, 0.5); |
|
} |
|
.char-count--inline { |
|
position: absolute; |
|
right: 24rpx; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
font-size: 28rpx; |
|
color: rgba(148, 163, 184, 0.5); |
|
} |
|
} |
|
|
|
.textarea-wrap { |
|
position: relative; |
|
|
|
.form-textarea { |
|
width: 100%; |
|
height: 327rpx; |
|
background: #f7f8fa; |
|
border-radius: 16rpx; |
|
padding: 20rpx 24rpx 40rpx; |
|
font-size: 32rpx; |
|
color: #1f2937; |
|
box-sizing: border-box; |
|
} |
|
.form-textarea-place { |
|
color: rgba(148, 163, 184, 0.5); |
|
} |
|
|
|
.char-count { |
|
position: absolute; |
|
right: 24rpx; |
|
bottom: 12rpx; |
|
font-size: 24rpx; |
|
color: rgba(148, 163, 184, 0.5); |
|
} |
|
} |
|
|
|
.form-picker { |
|
width: 100%; |
|
height: 88rpx; |
|
background: #f7f8fa; |
|
border-radius: 16rpx; |
|
padding: 0 24rpx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
box-sizing: border-box; |
|
margin-bottom: 24rpx; |
|
|
|
.picker-value { |
|
font-size: 32rpx; |
|
color: rgba(71, 85, 105, 1); |
|
|
|
&.is-placeholder { |
|
color: rgba(148, 163, 184, 0.5); |
|
} |
|
} |
|
} |
|
|
|
.picker-icon { |
|
width: 40rpx; |
|
height: 40rpx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.icon-calendar { |
|
width: 32rpx; |
|
height: 32rpx; |
|
border: 2rpx solid rgba(148, 163, 184, 0.5); |
|
border-radius: 6rpx; |
|
position: relative; |
|
|
|
&::before { |
|
content: ''; |
|
position: absolute; |
|
top: 6rpx; |
|
left: 4rpx; |
|
right: 4rpx; |
|
height: 2rpx; |
|
background: rgba(148, 163, 184, 0.5); |
|
} |
|
|
|
&::after { |
|
content: ''; |
|
position: absolute; |
|
top: -6rpx; |
|
left: 6rpx; |
|
width: 4rpx; |
|
height: 8rpx; |
|
background: rgba(148, 163, 184, 0.5); |
|
border-radius: 2rpx; |
|
} |
|
} |
|
|
|
/* ========== 上传 ========== */ |
|
.upload-inner { |
|
width: 100%; |
|
height: 350rpx; |
|
border: 2rpx dashed #d1d5db; |
|
border-radius: 16rpx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
flex-direction: column; |
|
overflow: hidden; |
|
background-color: rgba(247, 249, 251, 1); |
|
|
|
&.has-image { |
|
border-style: solid; |
|
border-color: transparent; |
|
} |
|
|
|
.upload-camera { |
|
width: 45rpx; |
|
height: 45rpx; |
|
margin-bottom: 12rpx; |
|
} |
|
.upload-text { |
|
font-size: 24rpx; |
|
color: rgba(148, 163, 184, 0.5); |
|
} |
|
|
|
.upload-img { |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 16rpx; |
|
} |
|
} |
|
|
|
.upload-preview { |
|
position: relative; |
|
width: 100%; |
|
height: 350rpx; |
|
border-radius: 16rpx; |
|
.p-img { |
|
display: block; |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 16rpx; |
|
} |
|
.close { |
|
padding: 10rpx; |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
background-color: rgba(0, 0, 0, 0.6); |
|
color: #fff; |
|
font-size: 20rpx; |
|
border-radius: 0 16rpx 0 16rpx; |
|
} |
|
} |
|
|
|
/* ========== 标签选择 ========== */ |
|
.tag-list { |
|
display: grid; |
|
grid-template-columns: repeat(3, 1fr); |
|
gap: 24rpx 22rpx; |
|
.tag { |
|
padding: 20rpx; |
|
border-radius: 16rpx; |
|
text-align: center; |
|
font-size: 32rpx; |
|
color: rgba(100, 116, 139, 1); |
|
background: #F7F8FA; |
|
transition: all 0.2s; |
|
|
|
&.is-active { |
|
background: rgba(74, 184, 253, 1); |
|
color: #fff; |
|
} |
|
} |
|
} |
|
|
|
/* ========== 议程列表头部 ========== */ |
|
.section-header { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
padding: 28rpx 0; |
|
border-radius: 24rpx; |
|
margin-bottom: 16rpx; |
|
|
|
.section-title-wrap { |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.section-title { |
|
font-size: 36rpx; |
|
font-weight: bold; |
|
color: rgba(31, 41, 55, 1); |
|
} |
|
|
|
.section-info { |
|
margin-left: 8rpx; |
|
width: 24rpx; |
|
height: 24rpx; |
|
} |
|
|
|
.add-btn { |
|
padding: 18rpx 26rpx; |
|
display: flex; |
|
align-items: center; |
|
gap: 8rpx; |
|
color: rgba(74, 184, 253, 1); |
|
font-size: 28rpx; |
|
border: 1px solid rgba(74, 184, 253, 0.26); |
|
border-radius: 16rpx; |
|
|
|
.add-icon { |
|
width: 32rpx; |
|
height: 32rpx; |
|
} |
|
|
|
.add-text { |
|
font-size: 26rpx; |
|
} |
|
} |
|
} |
|
|
|
/* ========== 议程卡片 ========== */ |
|
.agenda-card { |
|
background: #fff; |
|
border-radius: 24rpx; |
|
overflow: hidden; |
|
margin-bottom: 30rpx; |
|
|
|
.agenda-header { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
padding: 24rpx 32rpx; |
|
} |
|
|
|
.agenda-name { |
|
font-size: 30rpx; |
|
font-weight: 600; |
|
color: #1f2937; |
|
} |
|
|
|
.agenda-del { |
|
font-size: 26rpx; |
|
color: #ef4444; |
|
font-weight: 500; |
|
display: flex; |
|
align-items: center; |
|
gap: 8rpx; |
|
.icon { |
|
width: 32rpx; |
|
height: 32rpx; |
|
} |
|
} |
|
|
|
.agenda-body { |
|
padding: 24rpx 32rpx; |
|
} |
|
|
|
.agenda-group { |
|
margin-bottom: 16rpx; |
|
padding: 0; |
|
background: transparent; |
|
|
|
&:last-child { |
|
margin-bottom: 0; |
|
} |
|
} |
|
} |
|
|
|
/* ========== 切换按钮 ========== */ |
|
.toggle-group { |
|
display: flex; |
|
gap: 20rpx; |
|
margin-bottom: 24rpx; |
|
.toggle-btn { |
|
flex: 1; |
|
height: 76rpx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border-radius: 16rpx; |
|
font-size: 32rpx; |
|
color: rgba(100, 116, 139, 1); |
|
background: rgba(247, 248, 250, 1); |
|
transition: all 0.2s; |
|
|
|
&.is-active { |
|
background: rgba(74, 184, 253, 1); |
|
color: #fff; |
|
} |
|
} |
|
} |
|
|
|
/* ========== 子区块标题 ========== */ |
|
.sub-section { |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 24rpx; |
|
|
|
.sub-icon-wrap { |
|
width: 86rpx; |
|
height: 86rpx; |
|
border-radius: 16rpx; |
|
background: rgba(239, 249, 255, 1); |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin-right: 23rpx; |
|
flex-shrink: 0; |
|
.icon { |
|
width: 46rpx; |
|
height: 46rpx; |
|
} |
|
} |
|
|
|
.sub-icon { |
|
width: 36rpx; |
|
height: 36rpx; |
|
background: #3b82f6; |
|
border-radius: 8rpx; |
|
|
|
&--checkin { |
|
width: 32rpx; |
|
height: 32rpx; |
|
border-radius: 50%; |
|
border: 4rpx solid #3b82f6; |
|
background: transparent; |
|
position: relative; |
|
|
|
&::after { |
|
content: ''; |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
width: 12rpx; |
|
height: 12rpx; |
|
background: #3b82f6; |
|
border-radius: 50%; |
|
} |
|
} |
|
} |
|
|
|
.sub-text-wrap { |
|
.sub-title { |
|
font-size: 32rpx; |
|
font-weight: 600; |
|
color: rgba(17, 24, 39, 1); |
|
display: block; |
|
} |
|
|
|
.sub-desc { |
|
font-size: 24rpx; |
|
color: rgba(148, 163, 184, 1); |
|
margin-top: 8rpx; |
|
display: block; |
|
} |
|
} |
|
} |
|
|
|
/* ========== 签到方式 ========== */ |
|
.checkin-list { |
|
display: flex; |
|
gap: 20rpx; |
|
} |
|
|
|
.checkin-item { |
|
flex: 1; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
padding: 22rpx 12rpx; |
|
border-radius: 16rpx; |
|
border: 2px solid rgba(241, 245, 249, 1); |
|
background: rgba(247, 248, 250, 1); |
|
transition: all 0.2s; |
|
position: relative; |
|
.select { |
|
position: absolute; |
|
top: -1rpx; |
|
right: -1rpx; |
|
padding: 6rpx 10rpx; |
|
background-color: rgba(74, 184, 253, 1); |
|
color: #fff; |
|
font-size: 16rpx; |
|
border-radius: 0 15rpx 0 20rpx; |
|
display: none; |
|
} |
|
|
|
&.is-active { |
|
border: 2px solid rgba(74, 184, 253, 1); |
|
background: rgba(238, 242, 255, 0.3); |
|
.checkin-icon { |
|
display: none; |
|
} |
|
.checkin-icon:last-of-type { |
|
display: block; |
|
} |
|
.select { |
|
display: block; |
|
} |
|
} |
|
|
|
.checkin-icon { |
|
width: 42rpx; |
|
height: 42rpx; |
|
border-radius: 8rpx; |
|
position: relative; |
|
&:last-of-type { |
|
display: none; |
|
} |
|
} |
|
|
|
.checkin-name { |
|
margin-top: 8rpx; |
|
font-size: 24rpx; |
|
color: rgba(71, 85, 105, 1); |
|
} |
|
} |
|
|
|
/* ========== 提示文字 ========== */ |
|
.form-tip { |
|
display: flex; |
|
align-items: flex-start; |
|
padding: 18rpx 26rpx; |
|
background-color: rgba(241, 249, 255, 1); |
|
border: 1px solid rgba(74, 184, 253, 0.25); |
|
border-radius: 16rpx; |
|
gap: 16rpx; |
|
|
|
.form-tip-icon { |
|
flex-shrink: 0; |
|
width: 32rpx; |
|
height: 32rpx; |
|
} |
|
|
|
.form-tip-text { |
|
font-size: 26rpx; |
|
color: rgba(148, 163, 184, 1); |
|
line-height: 32rpx; |
|
} |
|
} |
|
|
|
/* ========== 底部按钮 ========== */ |
|
.action-bar { |
|
flex-shrink: 0; |
|
padding: 24rpx 32rpx; |
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); |
|
background: #fff; |
|
display: flex; |
|
gap: 20rpx; |
|
.btn { |
|
height: 94rpx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border-radius: 12rpx; |
|
font-size: 32rpx; |
|
box-sizing: border-box; |
|
|
|
&.btn-primary { |
|
flex: 1; |
|
background: linear-gradient(90deg, #9ddffd 0%, #4ab8fd 100%); |
|
box-shadow: 0rpx 15rpx 30rpx -6rpx rgba(74, 172, 219, 0.4); |
|
color: #fff; |
|
|
|
&:active { |
|
opacity: 0.9; |
|
} |
|
} |
|
|
|
&.btn-default { |
|
flex: 1; |
|
background: #fff; |
|
color: rgba(74, 184, 253, 1); |
|
border: 1px solid rgba(74, 184, 253, 1); |
|
|
|
&:active { |
|
background: #eff6ff; |
|
} |
|
} |
|
|
|
&.btn--large { |
|
width: 80%; |
|
margin: 0 auto; |
|
flex: none; |
|
} |
|
} |
|
} |
|
|
|
/* ========== 结果页 ========== */ |
|
.result-page { |
|
flex: 1; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
padding: 60rpx; |
|
background: #f5f7fa; |
|
|
|
.result-circle { |
|
width: 160rpx; |
|
height: 160rpx; |
|
border-radius: 50%; |
|
background: #3b82f6; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin-bottom: 40rpx; |
|
box-shadow: 0 8rpx 32rpx rgba(59, 130, 246, 0.3); |
|
} |
|
|
|
.result-check { |
|
font-size: 80rpx; |
|
color: #fff; |
|
font-weight: 700; |
|
} |
|
|
|
.result-title { |
|
font-size: 40rpx; |
|
font-weight: 600; |
|
color: #1f2937; |
|
margin-bottom: 16rpx; |
|
} |
|
|
|
.result-desc { |
|
font-size: 28rpx; |
|
color: #6b7280; |
|
margin-bottom: 60rpx; |
|
} |
|
} |
|
|
|
.bottom-safe { |
|
height: 40rpx; |
|
} |
|
|
|
.slidebar-add { |
|
padding-top: 17rpx; |
|
position: fixed; |
|
right: 16rpx; |
|
bottom: 320rpx; |
|
width: 110rpx; |
|
height: 110rpx; |
|
background: linear-gradient(90deg, #9ddffd 0%, #4ab8fd 100%); |
|
box-shadow: |
|
inset 0rpx 4rpx 24rpx 0rpx rgba(255, 255, 255, 0.25), |
|
0rpx 15rpx 30rpx -6rpx rgba(74, 172, 219, 0.4); |
|
border-radius: 50%; |
|
text-align: center; |
|
box-sizing: border-box; |
|
.icon { |
|
width: 48rpx; |
|
height: 48rpx; |
|
} |
|
.name { |
|
font-size: 20rpx; |
|
color: rgba(255, 255, 255, 1); |
|
} |
|
}
|
|
|