feat(collectionSettings): 添加身份证信息上传和有效期选择功能
新增身份证人像面、国徽面上传功能,包含预览和删除操作 添加身份证有效期开始和结束日期选择器 增加身份证地址输入字段 更新表单验证逻辑以包含新增字段
Showing
2 changed files
with
118 additions
and
0 deletions
| ... | @@ -356,3 +356,121 @@ | ... | @@ -356,3 +356,121 @@ |
| 356 | } | 356 | } |
| 357 | } | 357 | } |
| 358 | } | 358 | } |
| 359 | + | ||
| 360 | +// 身份证图片上传样式 | ||
| 361 | +.idcard-img-container { | ||
| 362 | + margin-top: 20rpx; | ||
| 363 | +} | ||
| 364 | + | ||
| 365 | +.idcard-img-upload { | ||
| 366 | + width: 100%; | ||
| 367 | + height: 200rpx; | ||
| 368 | + border: 2rpx dashed #ddd; | ||
| 369 | + border-radius: 12rpx; | ||
| 370 | + display: flex; | ||
| 371 | + flex-direction: column; | ||
| 372 | + align-items: center; | ||
| 373 | + justify-content: center; | ||
| 374 | + background-color: #fafafa; | ||
| 375 | + transition: all 0.3s ease; | ||
| 376 | + | ||
| 377 | + &:active { | ||
| 378 | + background-color: #f0f0f0; | ||
| 379 | + border-color: #ccc; | ||
| 380 | + } | ||
| 381 | + | ||
| 382 | + .upload-icon { | ||
| 383 | + font-size: 48rpx; | ||
| 384 | + color: #999; | ||
| 385 | + margin-bottom: 10rpx; | ||
| 386 | + } | ||
| 387 | + | ||
| 388 | + .upload-text { | ||
| 389 | + font-size: 28rpx; | ||
| 390 | + color: #999; | ||
| 391 | + } | ||
| 392 | +} | ||
| 393 | + | ||
| 394 | +.idcard-img-preview { | ||
| 395 | + width: 100%; | ||
| 396 | + position: relative; | ||
| 397 | + | ||
| 398 | + .idcard-img-image { | ||
| 399 | + width: 100%; | ||
| 400 | + height: 200rpx; | ||
| 401 | + border-radius: 12rpx; | ||
| 402 | + object-fit: cover; | ||
| 403 | + } | ||
| 404 | + | ||
| 405 | + .idcard-img-actions { | ||
| 406 | + display: flex; | ||
| 407 | + justify-content: space-between; | ||
| 408 | + margin-top: 20rpx; | ||
| 409 | + | ||
| 410 | + .change-img-btn { | ||
| 411 | + flex: 1; | ||
| 412 | + text-align: center; | ||
| 413 | + padding: 20rpx; | ||
| 414 | + background-color: #ffa500; | ||
| 415 | + color: white; | ||
| 416 | + border-radius: 8rpx; | ||
| 417 | + font-size: 28rpx; | ||
| 418 | + margin-right: 10rpx; | ||
| 419 | + | ||
| 420 | + &:active { | ||
| 421 | + background-color: #e6940a; | ||
| 422 | + } | ||
| 423 | + } | ||
| 424 | + | ||
| 425 | + .delete-img-btn { | ||
| 426 | + flex: 1; | ||
| 427 | + text-align: center; | ||
| 428 | + padding: 20rpx; | ||
| 429 | + background-color: #ff4757; | ||
| 430 | + color: white; | ||
| 431 | + border-radius: 8rpx; | ||
| 432 | + font-size: 28rpx; | ||
| 433 | + margin-left: 10rpx; | ||
| 434 | + | ||
| 435 | + &:active { | ||
| 436 | + background-color: #e63946; | ||
| 437 | + } | ||
| 438 | + } | ||
| 439 | + } | ||
| 440 | +} | ||
| 441 | + | ||
| 442 | +// 日期选择器样式 | ||
| 443 | +.date-selector { | ||
| 444 | + display: flex; | ||
| 445 | + align-items: center; | ||
| 446 | + justify-content: space-between; | ||
| 447 | + padding: 20rpx 0; | ||
| 448 | + border-bottom: 1rpx solid #eee; | ||
| 449 | + min-height: 80rpx; | ||
| 450 | + | ||
| 451 | + .date-text { | ||
| 452 | + font-size: 32rpx; | ||
| 453 | + color: #999; | ||
| 454 | + | ||
| 455 | + &.date-selected { | ||
| 456 | + color: #333; | ||
| 457 | + } | ||
| 458 | + } | ||
| 459 | + | ||
| 460 | + .arrow-down { | ||
| 461 | + font-size: 28rpx; | ||
| 462 | + color: #999; | ||
| 463 | + // transform: rotate(90deg); | ||
| 464 | + } | ||
| 465 | + | ||
| 466 | + &:active { | ||
| 467 | + background-color: #f5f5f5; | ||
| 468 | + } | ||
| 469 | +} | ||
| 470 | + | ||
| 471 | +// 必填项红色*号标记 | ||
| 472 | +.required-mark { | ||
| 473 | + color: #ff4757; | ||
| 474 | + font-size: 28rpx; | ||
| 475 | + margin-right: 8rpx; | ||
| 476 | +} | ... | ... |
This diff is collapsed. Click to expand it.
-
Please register or login to post a comment