hookehuyr

feat(collectionSettings): 添加身份证信息上传和有效期选择功能

新增身份证人像面、国徽面上传功能,包含预览和删除操作
添加身份证有效期开始和结束日期选择器
增加身份证地址输入字段
更新表单验证逻辑以包含新增字段
......@@ -356,3 +356,121 @@
}
}
}
// 身份证图片上传样式
.idcard-img-container {
margin-top: 20rpx;
}
.idcard-img-upload {
width: 100%;
height: 200rpx;
border: 2rpx dashed #ddd;
border-radius: 12rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #fafafa;
transition: all 0.3s ease;
&:active {
background-color: #f0f0f0;
border-color: #ccc;
}
.upload-icon {
font-size: 48rpx;
color: #999;
margin-bottom: 10rpx;
}
.upload-text {
font-size: 28rpx;
color: #999;
}
}
.idcard-img-preview {
width: 100%;
position: relative;
.idcard-img-image {
width: 100%;
height: 200rpx;
border-radius: 12rpx;
object-fit: cover;
}
.idcard-img-actions {
display: flex;
justify-content: space-between;
margin-top: 20rpx;
.change-img-btn {
flex: 1;
text-align: center;
padding: 20rpx;
background-color: #ffa500;
color: white;
border-radius: 8rpx;
font-size: 28rpx;
margin-right: 10rpx;
&:active {
background-color: #e6940a;
}
}
.delete-img-btn {
flex: 1;
text-align: center;
padding: 20rpx;
background-color: #ff4757;
color: white;
border-radius: 8rpx;
font-size: 28rpx;
margin-left: 10rpx;
&:active {
background-color: #e63946;
}
}
}
}
// 日期选择器样式
.date-selector {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 0;
border-bottom: 1rpx solid #eee;
min-height: 80rpx;
.date-text {
font-size: 32rpx;
color: #999;
&.date-selected {
color: #333;
}
}
.arrow-down {
font-size: 28rpx;
color: #999;
// transform: rotate(90deg);
}
&:active {
background-color: #f5f5f5;
}
}
// 必填项红色*号标记
.required-mark {
color: #ff4757;
font-size: 28rpx;
margin-right: 8rpx;
}
......
This diff is collapsed. Click to expand it.